HTML Step by Step

Hypertext Mark-up Language
HTML Step By Step January 1 2011 The step by step course of HTML is an introduction for the beginners of webpage designers and students. Advance HTML (HTML-5), CSS and JavaScript are available for advance web programming. More on www.eatvc.org/tutorials or on http://forum.eatvc.org Hypertext Mark-up Language
A Project of Youth League
www.eatvc.org www.youthleague.org.pk
HTML STEP BY STEP

For beginners
What is ?
HTML stands for HyperText Markup Language. Developed by scientist Tim Berners-Lee in 1990, HTML is the "hidden" code that helps us communicate with others on the World Wide Web (WWW). When writing HTML, you add "tags" to the text in order to create the structure. These tags tell the browser how to display the text or graphics in the document. For example, the following document has a simple layout (structure). Notice there are three major parts: a heading, two paragraphs and a bulleted list. To achieve a similar layout in a WWW browser, you need to add tags. Here is the same document with HTML tags (red) added: <html> <head> <title>Why I like to go swimming</title> </head> <body>
<h1> Why I like to go swimming in the summer. </h1>
<p> Swimming is my most favorite activity in the summer. When the sun is shining and the air is warm, you will find me dipping into my backyard pool. Its not an impressive pool, only three feet deep, but its mine.</p>
<p>There are three reasons I like to swim:</p>
<ul> <li>I get lots of exercise</li> <li>I enjoy the freedom</li> <li>I have an opportunity to be in the sun.</li> </ul> </body> </html> And here is the resulting page in your browser. Notice the tags are gone? Thats because the tags tell the browser how to display files but do not show themselves. Viewing the hidden code!
2|Page Copyright 2011 EATVC. All Rights Reserved.
HTML STEP BY STEP

For beginners
When learning something new, it often helps to see how others are doing the same thing. This is especially easy with HTML because every file that comes through your browser is formatted in HTML. So how do you see other peoples stuff? By viewing their source code. Heres how: Go online Open Internet Explorer or Netscape Navigator Enter the address to your favorite site Go to View on the toolbar and then click on Source for Explorer or Page Source for Navigator. In a matter of seconds, you will see the hidden code of that page. The tools you need Fortunately, HTML is written in plain text. That means you dont need any fancy software programs like a word processor to create your HTML files. All you need is a simple text-editor thats already on your system. For MACs, that would be SimpleText and for Windows, Notepad. Some rules As with most things in life, there are rules. In HTML, the rules are fairly simple. For starters, HTML tags are always surrounded by what are called angle brackets < and >. Youll find these brackets on your keyboard just above the comma and period. Elements The words/letters between these two angle brackets are called elements. These are the coded commands within HTML. Elements tell the browser how to display the web page. For example: <hr> tells the browser to display a horizontal rule; <br> tells the browser to skip a line. Container and empty tags There are two kinds of tags: container and empty. The container tag always wraps around text or graphics and comes in a set with an opening and a closing: <html> opening tag </html> closing tag Notice the forward slash (/) on the closing tag. This tells the browser that the tag has ended. On the other hand, the empty tag stands alone. The tag <br> is one that adds a line break. Empty tags do not have to be wrapped around copy and do not require a closing. Case sensitive HTML is also not case sensitive. That means, you can use either lowercase or uppercase. <HTML> is the same as <html>. For consistency, use either one or the other. It's best not to mix and match. For our purposes, I have written our code in lowercase. HTML structure. All HTML documents are divided into two main parts: the head and the body. It goes something like this:
HTML STEP BY STEP

For beginners
You must have the <html>, <head> and <body> container tags in every HTML file. The <html> tag tells the browser that this is an HTML document. You must begin and end your files with this tag. The <head> tag contains general information like the title of your document. The <body> tag holds all your content: words, pictures, artwork and other stuff. Nesting Part of the web page structure is called nesting. Notice how the tag <title> is nested inside the <head> tag, while <head> and <body> are nested inside <html>. 3. Primary Tags To build any web page you will need four primary tags: <html>, <head>, <title> and <body>. These are all container tags and must appear as pairs with a beginning and an ending. <html></html> Every HTML document begins and ends with the <html> tag. This tells the browser that the following document is an html file. Remember, tags tell the browsers how to display information. <head></head> The <head> tag contains the title of the document along with general information about the file, like the author, copyright, keywords and/or a description of what appears on the page. <title></title> Appears within the <head> tag and gives the title of the page. Try to make your titles descriptive, but not more than 20 words in length. The title appears at the very top of the browser page on the title bar. <body></body> The main content of your page is placed within the body tags: your text, images, links, tables and so on. 4. Creating your first web page Using the primary HTML tags, mentioned in Chapter 3, you are now ready to create your first Web page. Step 1 Open up a text editor (SimpleText for Mac or Notepad for Windows) Step 2 Enter the following: <html> <head> <title> This is my first web page</title> </head> <body> Hello world. This is my first web page. There's more to come.
HTML STEP BY STEP

For beginners
</body> </html> Step 3 Save the document as: firstpage.html Your file can be saved as either an htm or html file. Remember to save your document on the computer in a place that you can find it again. Step 4 To preview your new document, open Netscape Navigator. On the tool bar (located up near the top of the browser): Select File menu. Select Open Page A dialogue box appears. Select Choose File Go to where you saved your file, click on it. This will bring you back to the dialogue box, which should now be showing your file. Click Open Step 5 If all went as planned, your file should look like this in your browser. 5. Basic Text Formatting After any length of time on the Internet, youll notice that a Web page is made up of more than just plain words on a screen. There are headlines, paragraphs, graphics, colors and much more. Its a lively place to be. Our next tags--headline, paragraph, line break and horizontal rule--will help us make our current page a lot more exciting. Lets learn how. Headline tag In HTML, bold copy is created by using the headline tag. There are six levels of headlines, ranging from <h1></h1> to <h6></h6>. Here is an example of the code for all the headline sizes: <h1>Level 1 Headline</h1> <h2>Level 2 Headline</h2> <h3>Level 3 Headline</h3> <h4>Level 4 Headline</h4> <h5>Level 5 Headline</h5> <h6>Level 6 Headline</h6> And here is how each level looks in a browser. Lets add a headline to our Web page document. Step 1 Load your text editor and open your file: firstpage.html This is what you should see: <html> <head> <title>This is my first web page.</title> </head> <body> Hello world. This is my first web page. There's more to come. </body> </html> Step 2 Add the <h1> tag to the words "Hello world." as shown in red. <html> <head> <title>This is my first web page.</title> </head> <body> <h1>Hello world.</h1> This is my first web page. There's more to come.
HTML STEP BY STEP

For beginners
</body> </html> Step 3 Save the file Step 4 Open up Netscape Navigator. Go to File menu Select Open Page A dialogue box appears. Select Choose File Go to where you saved your file, click on it. This will bring you back to the dialogue box, which should now be showing your file. Click Open Your new page should look like in your browser. Paragraphs & Line Breaks To add space between paragraphs you use the paragraph tag: <p></p> This is a container tag and must have a beginning and an ending. To add a single line of space, you use break tag: <br> This is an empty tag and stands alone. You can use the <br> tag to insert one or more blank lines. Horizontal Rule To create a horizontal line on your page you use the empty tag: <hr> Wow, what a lot to take in. Let's apply what we've learned. Step 1 Load your text editor. Step 2 Open the file: firstpage.html. Your code should look like this: <html> <head> <title>This is my first web page.</title> </head> <body> <h1>Hello world.</h1> This is my first web page. There's more to come. </body> </html> Let's add some more text so that we can use the new tags that we have learned. Add tags and text that appear in red. <html> <head> <title>This is my first web page.</title> </head> <body> <h1>Hello world.</h1> This is my first web page. There's more to come. <hr> <p> I am learning how to use the horizontal rule, headline, paragraph and line break tags. Writing HTML isn't as hard as it appears. </p> <p>Here's a list of items I like about school:<br> Science<br> Reading<br> But most of all--recess!<br>
HTML STEP BY STEP

For beginners
</p> </body> </html>
6. Lists Lists come in a variety of forms with most either numbered or bulleted. The numbered lists are called ordered lists and the bulleted lists are unordered lists. Lists are nested. There is a tag that identifies the type of list, like numbered or bulleted. Then within that tag there is another tag that itemizes the list. Maybe some definitions would help. <ol></ol> The ordered list is a container tag and is used for numbered lists. <ul></ul> The unordered list is a container tag and is used for bulleted lists. <li></li> The listed item tag is a container tag and is nested within the ordered or unordered tags. Here is an example of the differences between ordered and unordered lists. An ordered (numbered) list goes like this: <ol> <li>My first item on the list.</li> <li>My second item on the list.</li> <li>My third item on the list.</li> <li>My fourth item on the list.</li> </ol> In the browser it will appear like this: 1. 2. 3. 4. My first item on the list. My second item on the list. My third item on the list. My fourth item on the list.
HTML STEP BY STEP

For beginners
An unordered (bulleted) list goes like this: <ul> <li>My first item on the list.</li> <li>My second item on the list.</li> <li>My third item on the list.</li> <li>My fourth item on the list.</li> </ul> In the browser it will appear like this: My first item on the list. My second item on the list. My third item on the list. My fourth item on the list.
Let's apply what we've learned Step 1 Load your text editor once more and open our current HTML document:firstpage.html. Step 2 Your file should appear as below: <html> <head> <title>This is my first web page.</title> </head> <body> <h1>Hello world.</h1> This is my first web page. There's more to come. <hr> <p> I am learning how to use the horizontal rule, headline, paragraph and line break tags. Writing HTML isn't as hard as it appears. </p> <p>Here's a list of items I like about school:<br> Science<br> Reading<br> But most of all--recess!<br> </p> </body> </html> Step 3. Let's add one of the lists noted above. Enter the tags and text that appear in red. <html> <head>
HTML STEP BY STEP

For beginners
<title>This is my first web page.</title> </head> <body> <h1>Hello world.</h1> This is my first web page. There's more to come. <hr> <p> I am learning how to use the horizontal rule, headline, paragraph and line break tags. Writing HTML isn't as hard as it appears. </p> <p>Here's a list of items I like about school:<br> Science<br> Reading<br> But most of all--recess!<br> </p> <p>I can also create lists using numbers and bullets. Here is an example of a list with numbers: <ol> <li>My first item on the list.</li> <li>My second item on the list.</li> <li>My third item on the list.</li> <li>My fourth item on the list.</li> </ol> </p> </body> </html> Step 4 Save your file. 7. Attributes: Adding interest to your page. <body bgcolor="#bee3c2">...</body> 1. 2. 3. 4. 5. The bracket and tag appear first (<body). Always add a space between the tag and attribute. Then enter the attribute (bgcolor). Equal sign goes next (=). Next are quotation marks that contain a description of how the attribute should look like ("#bee3c2"). In this case, it's a code for the color green. 6. Close with a bracket (>). 7. Then, add your closing tag </body>. 8. Advanced text formatting In this section, we will cover the following tags and attributes: Font styles: <font>...</font> Bold: <b>...</b>
HTML STEP BY STEP

For beginners
Italic: <i>...</i> Indented text: <blockquote>...</blockquote> Smaller type: <small>...</small> Larger type: <large>...</large> Centered type: <center>...</center>
Font tag* Not long ago, Times Roman was the only font you could use with HTML. It is still the font of choice (the default) for the leading browsers. Today, we can choose different font styles as well as several other font options by using the tag: <font></font> The font tag gives you some control over how your page will look. But unlike other tags discussed so far, the font tag does nothing without an attribute (remember an attribute describes what the tag should do). We will cover three attributes used with the font tag: <font size= "#"></font> <font face= "type style name"></font> <font color= "hex code"></font> *A Note to Remember: In the new HTML (version 4.0), the font tag has been deprecated--a big word that means the tag will be dropped in favor of Cascade Style Sheets (CSS). If you would like more information on CSS, please check out the Web site:Style Master to learn more. This changeover--from the font tag to CSS--will happen sometime in the future, but right now many Web sites are still using the font tag. We are in what is called the "transitional period," meaning things are still changing. Font Size So far, we have learned that the only way to change the size of our text is through the headline tag. But that causes a problem. One, if you use this tag, all the text changes and secondly, youll have paragraph breaks before and after the text. So what can you do if you want to change the size of some text within a sentence? Simple, add the attributesize to the font tag. Heres a coded example: Learning HTML code <font size=5> does have its advantages, </font> especially considering how important the WWW has become. The resulting line in a browser: Learning HTML code does have its advantages, especially considering how important the WWW has become. Notice how the type increased? You can also decrease your text. Lets take the same sentence but use size=1.
10 | P a g e Copyright 2011 EATVC. All Rights Reserved.
HTML STEP BY STEP

For beginners
Learning HTML code does have its advantages, especially considering how important the WWW has become. By using the size attribute, you can change your text to whatever you like. (By the way, your browsers default size is number 3.) Here are all seven levels as they would appear in your browser: font size=1 font size=2 font size=3 font size=4 font size=5 font size=6 font size=7 Font Face You can also use an attribute that will change the type style of a font. Its call face. But a word of caution: the face attribute is system dependent. That is, it will only work if the end user has the same typeface (type style) on his or her system. If not, the browser will automatically go with the default of Times Roman. So what you see on your Netscape or Internet Explorers page may not be the same for each user. So how can prevent this problem? Include more than one type face. For instance, lets say you want the following text to appear in Arial typeface. This is how you would do it. <font face="Arial, Helvetica">Selecting type styles can be tricky at times. You must always consider your end user.</font> Your end result will look like this: Selecting type styles can be tricky at times. You must always consider your end user. If the users computer did not have Arial, the browser would automatically search for the next typeface mentioned, which in this case is Helvetica. If no such type styles are on the computer, then the browser will go to the default type of Times Roman. Fortunately Windows 95 and Macintosh come with a variety of different typefaces: Arial Arial Black Arial Narrow Book Antiqua Bookman Old Style Century Gothic Century Schoolbook Courier New Garamond Times New Roman Verdana
HTML STEP BY STEP

For beginners
You can specify these typefaces, and the browser will easily find them. However, its best to specify more than one typeface, just in case an end user is operating Windows 3.0 or has for some reason, taken one of these typefaces off the computer system. So how does the attribute look for other type styles? <font face="bookman old style"> Selecting type styles can be tricky at times. You must always consider your end user. <font face="arialblack"> Selecting type styles can be tricky at times. You must always consider your end user. <font face="garamond"> Selecting type styles can be tricky at times. You must always consider your end user. Font Color In the last section, we discussed text color as an attribute in the body tag. The text color attribute only permits you to color all the type on your Web page. But what if you want to color only a word or two. Then use the attribute color within the font tag. Heres an example. Selecting type styles can be tricky at times. <font color="#0033ff">You should always consider your end user.</font> This will create text that is bright blue: Selecting type styles can be tricky at times. You should always consider your end user. Notice two things here. First of all, the color has been specified in hex code (remember we discussed that in the last lesson). Two, since we did not specify the typeface, the type appeared as Times Roman.
Let's apply what we've learned Step 1 Load your text editor and open the HTML document we have been working on:firstpage.html Step 2 Here's how to add some attribute codes to your original HTML file. Enter the code listed below in red. <html> <head> <title>This is my first web page.</title> </head> <body bgcolor="#ffff00" text="#000000"> <h1 align="center">Hello world.</h1> <p align="right"><b>This is my first web page. There's more to come.</b>
HTML STEP BY STEP

For beginners
<hr align="center" width="50%"> <p><font size="5" face="arialblack" color="#0033ff"> I am learning how to use the horizontal rule, headline, paragraph and line break tags. Writing HTML isn't as hard as it appears.</font> </p> <p>Here's a list of items I like about school:<br> Science<br> Reading<br> But most of all--recess!<br> <p>I can also create lists using numbers and bullets. Here is an example of a list with numbers: <ol> <li>My first item on the list.</li> <li>My second item on the list.</li> <li>My third item on the list.</li> <li>My fourth item on the list.</li> </ol> </p> </body> </html> Here's how it will appear in your browser. Congratulations, you have just added a new font size, typeface and font color to your Web page!
Other text formatting tags The other text formatting tags are fairly simple to use and understand. Bold and Italic tags To create bold text use: <b></b> To create italicized text use: <i></i> Blockquote Sometimes you may want to indent a sentence or an entire paragraph. Thats when youll want to you the blockquote tag: <blockquote></blockquote> Small and big tags To create copy that is slightly smaller than normal: <small></small> To create copy that is slightly larger than normal:
HTML STEP BY STEP

For beginners
<big></big> Center tag* You learned about aligning copy with the align attribute in the last lesson. Fortunately HTML allows us to center text without using an attribute. So when you want to center your copy, its simple. Use the following tag: <center></center> 9. Links down the street to around the world. Uniform Resource Locator Before we get into how to create a hyperlink in HTML, we have to cover some "techy" stuff. Every Web site has an address call the Uniform Resource Locator or URL (pronounced like "earl"). Think of an URL as an address. If youve done any Web surfing at all, you have probably used an URL or two. But what does it mean? Lets examine one more closely:
http:// (hypertext transfer protocol) is a code or what is technically called a protocol that helps one computer talk to another computer. The Internet also has another protocol called FTP (file transfer protocol). www or world wide web lets the server (the computer) know the file is located on the World Wide Web. myschool.com is a domain name or where the Web site is hosted. homework.html is the file or Web page you are seeking. To create a link in HTML, you need the anchor tag: <a></a> Inside the tag, you need the attribute: HREF (hypertext reference). An example of a link looks like this: Harry uses the browser called Netscape. The code looks like this: Harry uses the browser called <a href="http//:www.netscape.com">Netscape</a>. Let's take a closer look at the code:
HTML STEP BY STEP

For beginners
10. Graphics SRC attribute To help the browser identify and find an image, you use the following command: <img src="filename.gif"> <img src="mystery.jpg" alt="When things go wrong with your code, you need to do some detective work!"> <a href-"graphicsc10.html"><img src=atom.jpg width="119" height="120" alt="Take this link to the Blast-Off page" border="0"></a>
11. Building Web pages with tables. Step 1 Open up a text editor (remember, Simple Text for Mac and Notepad for Windows. Step 2 Enter the following code: <html> <head> <title> This is a page using tables </title> </head> <body bgcolor="ffffff" text="000000"> <h1>A Web Page Using Tables</h1> <table border="1"> <tr> <td>This is column one</td> <td>This is column two</td> <td>This is column three</td> </tr> </table> </body> </html> <html> <head> <title> This is a page using tables </title> </head> <body bgcolor="#ffffff" text="#000000">
HTML STEP BY STEP

For beginners
<h1>A Web Page Using Tables</h1> <table border="1"> <tr> <td bgcolor="#000000"> <font color="#ffffff"> <b>This is column one</b> <br> I enjoy working on HTML code. It gives me a chance to be creative.</font> </td> <td bgcolor="#bee3c2"> <b>This is column two</b></td> <td bgcolor="#ff8000"> <font color="#804000"> <b>This is column three<br>Notice what happens to the column when you add copy. It gets larger. This can cause a problem. But we do have a way to control the margins in tables.</b> </font> </td> </tr> </table> </body> </html> Step 3 Save the file as table2.html <html> <head> <title> This is a page using tables </title> </head> <body bgcolor="#ffffff" text="#000000"> <h1>A Web Page Using Tables</h1> <table border="1" width="595"> <tr> <td bgcolor="#000000" width="20"> <font color="#ffffff"> <b>This is column one</b> <br> I enjoy working on HTML code. It gives me a chance to be creative. </td> <td bgcolor="#bee3c2" width="100"> <b>This is column two</b> </td> <td bgcolor="#ff8000" width="475"> <font color="#804000"> <b>This is column three<br>Notice what happens to the column when you add copy. It gets larger. This can cause a problem. But we do have a way to control the margins in tables.</b> </font> </td>
HTML STEP BY STEP

For beginners
</tr> </table> </body> </html> Step 3 Save the file as table3.html Now view it in Netscape. A table with multiple rows and columns/cells Now that we've gone through the table tags and have a beginning understanding of rows and columns, let's create a table with several rows and a couple of columns each. Step 1 Open up your text editor. Step 2 Enter the following code. <html> <head> <title> Rows </title> </head> <body> <h1>Here's a table with two rows</h1> <table border="1"> <tr> <td>This is column one</td> <td>This is column two</td> </tr> <tr> <td>This is column A</td> <td>This is column B</td> </tr> </table> </body> </html> Step 3 Save the file as rows.html Step 4 Open Netscape Navigator Step 5 View the page in the browser. If all went right, you now have two rows and two columns/cells. Now let's examine the column/cell tag. Column/cell tag and its attributes In Chapter 11, we learned about a couple of attributes--bgcolor and width. You can use these in the table tag (<table>), and the column/cell tag (<td>). You can also use other attributes in the column/cell tag, such as: 1. align: sets your text or image to left, center or right 2. valign: sets your content vertically to top, center or bottom 3. colspan: expands across multiple columns/cells
HTML STEP BY STEP

For beginners
4. rowspan: expands over multiple rows Let's examine each attribute separately. Align attribute Leaving your text or image to the left of your column is usually pretty boring, so the align attribute lets you center things, using "center" or place them to the right, using "right". Valign attribute When placing copy in a column, the browser will automatically place it in the center of the column. You can change this default by using the valign attributes of "top", "center" or "bottom". Let's apply these two attributes now before we continue. Step 1 Open up your text editor. Step 2 Enter the following code. <html> <head> <title> Alignment Attributes </title> </head> <body> <h1>Here are some examples of alignment</h1> <table border="1" width="100%"> <tr> <td bgcolor="#ff0000" width="40%" align="right"> This is column one<br> This is column one<br> This is column one<br> This is column one<br> </td> <td width="60%"> This is column two<br> This is column two<br> This is column two<br> This is column two<br> </td> </tr> <tr> <td bgcolor="#ffff00" width="40%" align="center"> This is column A<br> This is column A<br> This is column A<br> This is column A<br> This is column A<br> This is column A<br> </td> <td bgcolor="#0000ff" width="60" valign="bottom">
HTML STEP BY STEP

For beginners
<font color="#FFFFFF"> This is column b<br> This is column b<br> This is column b<br> </font> </td> </tr> </table> </body> Step 3 Save the file as alignment.html Step 4 Open Netscape Navigator Step 5 View the page in the browser. If all went well, you should have a very colorful table with two rows and four columns (cells). Now we are ready to explore expanding these rows and columns (cells) in order to add interest to a page. Spanning rows and columns Ever wonder how some pages have such wonderful layouts? They're using tables. To see what I mean, take a look at these links: Family.com PBS Barney & Friends Demo of the Day by Bill Nye
Even though some of these Web sites are using some advanced things like frames and java script (coming soon!), each one uses tables as their basic structure. Learning to span rows and columns can help you add variety to your tables too! To begin, let's look at our previous illustration, but this time with some rows and columns expanded.
When creating a table and you want to expand a column or a row you use the following attributes: colspan: expands across a number of columns rowspan: expands across a number of rows
HTML STEP BY STEP

For beginners
Let's try this with some code: Step 1 Open up your text editor. Step 2 Enter the following code. <html> <head> <title> Rowspan and Colspan </title> </head> <body> <h1>Here's a table demonstrating rowspan and colspan</h1> <table border="1"> <tr> <td rowspan="2">This is an example of rowspan. It is spanning two rows.</td> <td>This is column B</td> <td>This is column C</td> </tr> <tr> <td>This is column D</td> <td>This is column E</td> </tr> <tr> <td colspan="3">This is an example of colspan. It is spanning three columns.</td> </tr> </table> </body> </html> Step 3 Save the file as span.html <span style="font-family:arial; font-size:12px; color:red;">Font Example</span> FRAMS
Inside the Frame Building Page The page will be enclosed in HTML and HEAD tags: <HTML><HEAD> ... </HEAD></HTML> The instructions for your frames will be enclosed in the following HTML tags: <FRAMESET> ... </FRAMESET>
<HTML> <HEAD> <FRAMESET COLS="100%" ROWS="80,*"> <FRAME NAME="top" SRC="top.html"> <FRAMESET COLS="120,*">
HTML STEP BY STEP

For beginners
<FRAME NAME="left" SRC="left.html"> <FRAME NAME="right" SRC="right.html"> </FRAMESET> </FRAMESET> </HEAD> </HTML> FORMS:........................................ There are 5 choices of form question layouts. 1. 2. 3. 4. 5. 6. 7. Text fields Radio Buttons Check Boxes Selector Bars Text areas 1) The Text Field Text fields are one line of input. Normally you set a limit as to how many characters can be typed for the given field (maxlength). You can also set the size of the field (size). 9. <INPUT TYPE=TEXT NAME=name SIZE=40 maxlength=30 value="This only allows 30 characters">
This only allow s 30 characters
<INPUT TYPE=TEXT NAME=name SIZE=30 maxlength=15 value="This only 15.">

This only 15.
11. 2) The Radio Button 12. Radio Buttons allow for multiple choices yet the user can only select one. Multiple selections are not allowed with radio buttons. Notice that the NAME is the same for all buttons in a set, but the VALUE is different. Also notice that in the first one, the word "checked" is in the code which defaults "Yes" as being chosen when the page loads. 14. <INPUT type=radio name="happy" checked value="yes"> Yes <INPUT type=radio name="happy" value="no">No <INPUT type=radio name="happy" value="maybe">Maybe Yes 16. 3) The Check Box 17. Check Boxes allow for multiple choices AND multiple selections. The user can select one or more. Notice that the NAME is now different for all checkboxes, but the VALUE is the same. Also notice that in the second two, the word "checked" is in the code which puts a check in the box for "Two" and "Three" when the page loads. 19. <INPUT type=checkbox name="One" value="yes">One <INPUT type=checkbox checked name="Two" value="yes">Two <INPUT type=checkbox checked name="Three" value="yes">Three One 21. 4) The Selector Bar 22. Selector Bars are perfect for questions that have many responses and you don't want to take up a lot of room on a page. They can be set for single or multiple selections Two Three No Maybe
HTML STEP BY STEP

For beginners
allowed (either put in the word multiple or don't). If you choose multiple, you have to hold down the ctrl-key when making multiple choices. Notice the size can be however many cells you want. The NAME designates the topic for all the individual VALUES. 24. <SELECT name="favorite_color" multiple size=3> <OPTION selected value="Red"> Red </OPTION> <OPTION value="blue"> Blue </OPTION> <OPTION value="green"> Green </OPTION> <OPTION value="purple"> Purple </OPTION> <OPTION value="black"> Black </OPTION> <OPTION value="yellow"> Yellow </OPTION> <OPTION value="pink"> Pink </OPTION> </SELECT> Size set to 1 (not multiple) Size set to 3 (multiple)
Red
Red Blue Green
26. 5) The Text Area 27. Text fields are multiple lines of input. Normally this is where people respond with a lengthy answer of a paragraph or more. Be sure to put in the wrap=virtual so that when the typing hits the end of the line it auto wraps to the next line. You can set the columns and rows to whatever you like. And you can put in a default response that is preloaded in the box when the page loads. 29. <TEXTAREA WRAP=VIRTUAL NAME="comments" COLS=20 ROWS=5> Nice Site! </TEXTAREA>
31. 6) The Submit and Reset Button 32. The Submit Button is what sends in the form once the user finishes filling it out. The Reset button erases andthing the user has typed so he can start again. To alter the text that appears on the buttons, change the value atribute to the text you wish to have displayed. 34. <INPUT type=submit name=submit value="Click Here to Continue"> <INPUT type=reset name=reset value="Start Again">
Click Here to Continue Start Again
36. 7) Hidden Values 37. If you had several forms on different pages and you wanted to have a field in the email you received that told you which page it came from, you can put in a hidden field. Only you will ever see this, the user will not. 38. <INPUT type=hidden name=webpage value=from_index_page> EMBED: Inserting video audio.
HTML STEP BY STEP

For beginners
<EMBED SRC="example.mid" AUTOSTART="TRUE" LOOP="TRUE" WIDTH="145" HEIGHT="60" ALIGN="CENTER"> <NOEMBED> <BGSOUND SRC="example.mid" LOOP="10"> </NOEMBED> </EMBED>
Hyperlinking: linking from one page to another Hyperlinking, or Linking, is the ability to click on a bit of text or an image and have it jump you to another page, or area of a page. This requires both the Opening <A> and the Closing </A> Anchor Tag. Anchors also must have the HREF= (Hypertext Reference) attribute to work properly: <A HREF=> </A> But this tag is still incomplete and will do nothing until you give it a place to link to: <A HREF="http://www.HTMLclinic.com/example.html"> </A> Now to give your visitor something to click on, put some text between the opening and closing tag, like this: <A HREF="http://www.HTMLclinic.com/example.html">HTML Help For All</A> Now the tag is complete. Try it here: HTML Help For All Page Linking Tips If a page is not on your site put in the web address for the page, like this: <A HREF="http://www.examplesite.com/index.html">Example Site</A> If the page is in the same folder use just the filename, like this: <A HREF="examplepage.html"> Click here </A> If the page is in a different directory or folder reference that right before the page: <A HREF="otherfoldernamehere/page2.html">Page Two</A> Linking to Downloadable Files If you want to make a file available for your visitors to download, use the anchor tag with the filename of the file you wish your visitors to grab: <A HREF="filename.here"> Click here to download the file </A>
HTML STEP BY STEP

For beginners
Name Anchors: links to areas on the same page Anchors can also be used to jump to a specific spot on the same page. Lets' say you have a page about pets, and at the top of this page you want to provide a link down to the area about your dog. Go to the area about your dog and put a Name Anchor around the title or first word of the 'dog' portion: <A NAME="dog">All about my dog Fluffy:</A> Fluffy is my dog. He has a tail, 4 legs and likes to bark. Now go up to the top of the page where you want to put the link to the 'dog' section. Here is the code for the link at the top of the page: <A HREF="#dog">Click for Fluffy the Dog</A> Now when you click on the link on the top of your pets page, it will jump right down to the section about Fluffy! If you are linking to the Fluffy section from a different page you'll have to do this: <A HREF="animals.htm#dog">Click for Fluffy the Dog</A> Mailto Anchor: making a link to an email address If you want the link to jump to sending mail to a specific e-mail address, you have to add "mailto:" to the anchor: <A HREF="mailto:support@htmlclinic.com">Email Me Now!</A> Now when you click on this mailto link, it will open your email program and automatically address an email to whatever address you have defined in this tag. Try it here: Email Me Now! Image Anchor: hyperlinking to a graphic image NOTE: If you have not yet read the section dealing with creating image tags you might want to review that tutorial before you begin this one. Let's say we have a spiffy new graphic and we want to make it clickable so people can use it to go to another page. Here is the image code: <IMG SRC="mypicture.gif" HEIGHT="30" WIDTH="40" ALT="My Picture" BORDER="0"> Now we have to wrap the Anchor code around it: <A HREF="folder/page2.html"><IMG SRC="mypicture.gif" HEIGHT="30" WIDTH="40" ALT="My Picture" BORDER="0"></A>
HTML STEP BY STEP

For beginners
If you want to put a border around the picture (border="3"): <A HREF="folder/page2.html"><IMG SRC="mypicture.gif" HEIGHT="30" WIDTH="40" ALT="My Picture"BORDER="3"></A> If you want to hyperlink from a small version of the image (known as a 'thumbnail') to a larger version, link the small file to the large one: <A HREF="LargeImage.gif"><IMG SRC="SmallImage.gif"></A> In this example, clicking on the SmallImage.gif file will open to the LargerImage.gif file. Finally Lets go to java script for form validation:
Making scrolling text/images with the use of the marquee tag

<marquee title="Holding your cursor over this stops the marquee." ONMOUSEOVER="this.stop();" ONMOUSEOUT="this.start();"> <H3>Test Marquee</H3> <P>Holding the mouse over this marquee stops it from scrolling.</P> </MARQUEE> Some good links for Marquee cool effects:
http://www.quackit.com/myspace/myspace_code_generators/myspace_falling_text_generator.cfm http://www.w3schools.com/html/default.asp
HTML STEP BY STEP

For beginners
The Email Form Validator JavaScript The sample we are using is referring to a Bravenet E-mail Form. That is what we use on this site. If you use a different e-mail form processing service, you'll have to change the form tag. Thanks toBravenet Web Services for providing this JavaScript. This is for ADVANCED CODERS ONLY PLEASE. What 's Your Name? Where are you from? A Validation Script ensures your forms are filled out correctly. With Javascript, you can require your visitors to fill in areas of the form. Try the form on the right. It doesn't send mail anywhere, so try it all you like. It requires you to fill in name and email address. E-mail Address? Comments and Questions?
Send This Via E-mail
Here is the copy/paste code for validating your email form. You'll need to edit your existing form to make it work. This code goes between the <HEAD> and the </HEAD> tags in your page:
HTML STEP BY STEP

For beginners
<script> <!-// E-mail Form - Validator // Bravenet Web Services - www.bravenet.com function checkData() { var correct = true if (document.Bravenet.name.value == "") {correct = false; alert("Please enter your name!")} if (document.Bravenet.replyemail.value == "") {correct = false; alert("Please enter your e-mail address.")} /* You can add more variables above. The name after the word Bravenet has to match the name in the form below. */ if (correct){alert("Thank you for taking your time to fill out this form.")} return correct } //--> </script>
And this RED code must go in your existing form tag. More about HTML:
http://www.w3schools.com/html/default.asp
End.

HTML Step by Step

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Step by Step

Uploaded by

Copyright:

Available Formats

Hypertext Mark-up Language

A Project of Youth League

HTML STEP BY STEP

<h1> Why I like to go swimming in the summer. </h1>

<p>There are three reasons I like to swim:</p>

2|Page Copyright 2011 EATVC. All Rights Reserved.

HTML STEP BY STEP

3|Page Copyright 2011 EATVC. All Rights Reserved.

HTML STEP BY STEP

4|Page Copyright 2011 EATVC. All Rights Reserved.

HTML STEP BY STEP

5|Page Copyright 2011 EATVC. All Rights Reserved.

HTML STEP BY STEP

6|Page Copyright 2011 EATVC. All Rights Reserved.

HTML STEP BY STEP

7|Page Copyright 2011 EATVC. All Rights Reserved.

HTML STEP BY STEP

8|Page Copyright 2011 EATVC. All Rights Reserved.

HTML STEP BY STEP

9|Page Copyright 2011 EATVC. All Rights Reserved.

HTML STEP BY STEP

10 | P a g e Copyright 2011 EATVC. All Rights Reserved.

HTML STEP BY STEP

11 | P a g e Copyright 2011 EATVC. All Rights Reserved.

HTML STEP BY STEP

12 | P a g e Copyright 2011 EATVC. All Rights Reserved.

HTML STEP BY STEP

13 | P a g e Copyright 2011 EATVC. All Rights Reserved.

HTML STEP BY STEP

14 | P a g e Copyright 2011 EATVC. All Rights Reserved.

HTML STEP BY STEP

15 | P a g e Copyright 2011 EATVC. All Rights Reserved.

HTML STEP BY STEP

16 | P a g e Copyright 2011 EATVC. All Rights Reserved.

HTML STEP BY STEP

17 | P a g e Copyright 2011 EATVC. All Rights Reserved.

HTML STEP BY STEP

18 | P a g e Copyright 2011 EATVC. All Rights Reserved.

HTML STEP BY STEP

19 | P a g e Copyright 2011 EATVC. All Rights Reserved.

HTML STEP BY STEP

20 | P a g e Copyright 2011 EATVC. All Rights Reserved.

HTML STEP BY STEP

<INPUT TYPE=TEXT NAME=name SIZE=30 maxlength=15 value="This only 15.">

21 | P a g e Copyright 2011 EATVC. All Rights Reserved.

HTML STEP BY STEP

22 | P a g e Copyright 2011 EATVC. All Rights Reserved.

HTML STEP BY STEP

23 | P a g e Copyright 2011 EATVC. All Rights Reserved.

HTML STEP BY STEP

24 | P a g e Copyright 2011 EATVC. All Rights Reserved.

HTML STEP BY STEP

Making scrolling text/images with the use of the marquee tag

25 | P a g e Copyright 2011 EATVC. All Rights Reserved.

HTML STEP BY STEP

Send This Via E-mail

26 | P a g e Copyright 2011 EATVC. All Rights Reserved.

HTML STEP BY STEP

27 | P a g e Copyright 2011 EATVC. All Rights Reserved.

You might also like