|
Goto Lesson:
Lesson 1 Lesson 2 Lesson 3 Lesson 4 Lesson 5 Lesson 6 Lesson 7 Lesson 8 Lesson 9 Lesson 10 Lesson 11 |
HTML has its own way of organizing things and a form of hierarchy that should be understood. In some cases and in most simple pages this system can be ignored with no visible errors. Once you become more competent and your pages become more advanced this system is almost a necessity. It makes your code easier to read and debug and will allow you to quickly edit pages in an organized fashion. You should get into the practice of beginning and ending all commands and formatting options right away. You can open notepad (PC) or simpletext(mac) and follow along with the steps below.
Before we get into the commands and and structure of pages you must know the basics. HTML is just a text file and text will be displayed as text. A command is used to inform the browser of how something should be displayed or provide additional information. All commands are enclosed in tags (<,>) and almost all commands should be ended by rewriting the command with a slash. You may not know what the commands below do but it will show you how commands should be started and ended: <center> this is my page </center> capitalization makes no difference in the creation of your webpages and can be used however you see fit. Be sure to space out your pages it makes it easier to read and debug and will not effect the page itself in any way. Now that you know a few basics we will get into the structure of the web page. A Browser is capable of reading and displaying many types of files and pages and therefore you should always inform the browser of what type of file it is reading. This is done by simply making the first line of your page <html>. This means that the very last line in your page should be </html>, which informs the browser the page has ended. In between these two tags will be the entire contents of your page. Every Webpage has two many sections a head and a body. The following is an explanation of what these sections are used for and how to use them. If you are creating a page in entirely HTML the head section is not very useful to the structure of your page. The head is very useful when adding interactivity to your pages with Javascript or DHTML though because it may be used for all your variable declarations and function definitions. The useful part of the head to the HTML scripter is the title. The title is the text that will appear in the bar at the top of your page. Both the head and the title have very simple commands and the way to use them is demonstrated below. <html> <head> <title>This is a Webpage</title> </head> </html>The Body is where your actual page will go and will be used exactly like the head command. it should come after the end of your head (</head>) and be ended before the end of your page. There are many options involved with the background tag and they will be discussed later in these tutorials. Below is how the page structure looks thus far: <html> <head> <title>My Webpage is cool</title> </head> <body> </body> </html> Now you know how a webpage is structured and can began to create your pages, which will be done in the very next lesson. Before you continue onto that lesson there is one more command you need to know. All languages have the ability to allow comments to be added to the page that will never be seen on the page but are very useful in debugging your pages. They also allow other to read your source and make some use of it and learn from you. At this time I will make another point, the best way to learn is by example if you see something you like on someone else's page view the source and figure out how to do it on your page. Now back to comments, Below is example of a comment be sure to use them often: <!--YOUR COMMENT GOES HERE--> whatever is in between there will be completely ignored by the browser. You are now ready to make your first page, continue on to the next lesson to learn how. |