Introduction
Day 1
Introduction to tags
HTML stands for HyperText Markup Language. It consists of labels specifically called tags to identify the properties and looks of a web page. All tags are written between the < and > signs like this: <instruction>. Some tags are written in pairs, one to start a property of an object and one to end it. This would be an example:
<b>Text here</b>
This pair of tags indicates that the text between them should be displayed in bold letters. Notice that the last tag has a slash "/" in it. This indicates the end of the instruction.
Other tags like <hr> and <br> do not need an ending tag because their properties are different. These tags perform a function not involving text nor other objects, therefore there is no need to specify where to stop using the instruction.
Along this tutorial you will be creating a page about an imaginary theme park. It will consist on a default or main page, and five other branched pages. Your job is to pay attention and do your homework every day. That way you will not miss anything covered at the end of this tutorial.
Before you start, create a folder called "Html" in any place you want. Inside thit folder make another two folders, one with the name "Graphics" and one with the name "Pages." Be aware that html is case sensitive, so be sure to use upper case for the first letter of the name of each folder!
Document tags
Lets start with the first hands on-practice. This is going to be the default page of your project. Open a simple text editor like Note Pad in Windows or Simple Text in Mac and type the following code:
<html> <head> <title> Welcome to Adventure Paradise! </title> </head> <body> </body> </html>
This set of tags mark the beginning and the end of the entire html document. Inside the two <html> lables, the entire code for the page is nested. The <head> tags hold important information first to be read by the browser. This includes the title, that will be displayed up in the title bar of the browser's window, some comments about the page (not listed here), and small programs also called scripts that can be run within the browser. Last, the <body> tags hold the actual information of the page. Between these two tags lies the code for the actual content of the page.
Now save your text file as Default.html in the folder you have created for this tutorial. Always write the .html after the file name to indicate that the page is an "html" document and not just simple text. Otherwise, the browser will display the code, not the content of the page.
Having your page saved, you are now ready to view it with your browser. Follow these instructions step by step:
- In the file menu of your browser, select new window.
- In that second window select open or open file from the file menu.
- Then from there you can look for your default page by clicking on "browse" or "choose file" depending on your browser.
- When ready, click on ok.
Right now this page may not have any useful content, but hold on, we'll get there soon! First look up in the title bar of your window. What do you see? Isn't that exciting? You've just created your first page with a title! This is what you should have so far:
Modifying your document
Most web pages have useful content, not just a title! so lets put some text into our document.
From your text editor open your Default.html page, if it is not already open. Now lets add the following introductory paragraph to it, shall we?
<html> <head> <title> Welcome to Adventure Paradise! </title> </head> <body> Find the thrill, find "Adventure Paradise!"
Adventure Paradise invites you to have a thrilling summer, full of fun and excitement! Don't miss the opportunity to come! Now with all the packages we offer you should not have any excuses not to come.
Adventure land offers you the largest theme park in the world, with 10 different roller coasters, docens of hard core mechanical games, NASA's computer power in virtual coasters and video games, great food, hotel, and location. Isn't this enough not to stay home this summer? </body> </html>
Having this exciting explanation of "Adventure Paradise" in your document, go to file and save in your text editor. Now go to your browser window and click on "Reload" or "Refresh" whatever applies. You should now see a very noticeable change; something similar to this:
Headings and breaks
There are six sizes for headings in html. Headings are used for titles and subtitles in the formation of a web page; just like in books. The largest size is used to entitle the unit or chapter then the divided sections contain subtitles using a different size of heading. The tags for a heading are these: <h1>title</h1>. The number after the "h" indicates the size of the heading. The number "1" is the largest and "6" the smallest. See the table below:
| <h1>Title</h1> | Title |
| <h2>Title</h2> | Title |
| <h3>Title</h3> | Title |
| <h4>Title</h4> | Title |
| <h5>Title</h5> | Title |
| <h6>Title</h6> | Title |
Lets make some changes to our default page. Open it in your text editor if it is not already open and make the following changes:
<html> <head> <title> Welcome to Adventure Paradise! </title> </head> <body> <h1>Find the thrill, find "Adventure Paradise!"</h1>
Adventure Paradise invites you to have a thrilling summer, full of fun and excitement! Don't miss the opportunity to come! Now with all the packages we offer you should not have any excuses not to come.
Adventure land offers you the largest theme park in the world, with 10 different roller coasters, docens of hard core mechanical games, NASA's computer power in virtual coasters and video games, great food, hotel, and location. Isn't this enough not to stay home this summer? </body> </html>
When you are done, save it and reload in in your browser. The heading really gives a better look to the page doesn't it? Notice that after the heading, there is a space separating the title from the paragraph. This is because heading tags automatically adds a paragraph break into your document.
Html does not arrange your text automatically as it looks when you type it. You have to specify when a paragraph ends, when you want to skip to the next line even if you are not at the end of the current line, and other things like that. For this there are special tags, like the <p> tag that creates a break between bodies of text. Make the following addition to your page, and see the effects by yourself, then save and reload your document into your browser.
<html> <head> <title> Welcome to Adventure Paradise! </title> </head> <body> <h1>Find the thrill, find "Adventure Paradise!"</h1>
Adventure Paradise invites you to have a thrilling summer, full of fun and excitement! Don't miss the opportunity to come! Now with all the packages we offer you should not have any excuses not to come. <p> Adventure land offers you the largest theme park in the world, with 10 different roller coasters, docens of hard core mechanical games, NASA's computer power in virtual coasters and video games, great food, hotel, and location. Isn't this enough not to stay home this summer? </body> </html>
Now your page looks even better. Take a look to what you should have so far.
Lets talk about another tag for text break. The <br> tag works for when you want to skip to the next line of your document even if you are not at the end of the current line. Here is an example to show this better:
Adventure Paradise
a place for fun,
don't eat banana nor pies
before comming along!
After each line there is a break to skip to the next line. You could not do this without the <br> tag, the text would be continuous even if you typed it like this in your code. The <br> tag is very useful to write poems in a web page. This is what the code looks like:
Adventure Paradise<br> a place for fun,<br> don't eat banana nor pies<br> before comming along!
After the last paragraph of your page add a <p> tag then copy the poem above.
Preformatted text
Last for this lesson, we are going to discuss the <pre></pre> tags; an instruction that lets you do whatever you want with text. This tag is very useful for making lists, tables, outlined notes, etc. The <pre> tag enables you to work with text just like in your text editor. You can use tabs and there are no limits for the spaces you want between words. Lets do something with this tag in your Default.html document.
<html> <head> <title> Welcome to Adventure Paradise! </title> </head> <body> <h1>Find the thrill, find "Adventure Paradise!"</h1>
Adventure Paradise invites you to have a thrilling summer, full of fun and excitement! Don't miss the opportunity to come! Now with all the packages we offer you should not have any excuses not to come. <p> Adventure land offers you the largest theme park in the world, with 10 different roller coasters, docens of hard core mechanical games, NASA's computer power in virtual coasters and video games, great food, hotel, and location. Isn't this enough not to stay home this summer? <p> Adventure Paradise<br> a place for fun,<br> don't eat banana nor pies<br> before comming along!
<h2>Summer Packages</h2>
<pre> Package Price
Single $40.00 Couple $60.00 Family $110.00 </pre> </body> </html>
Save your document and reload it in your browser. Check your work with this example:
You made it! It's now time for your first self test, then go ahead and do your homework.