P. 1
Introduction to HTML

Introduction to HTML

|Views: 116|Likes:
Published by kit456

More info:

Published by: kit456 on Sep 02, 2010
Copyright:Attribution Non-commercial


Read on Scribd mobile: iPhone, iPad and Android.
download as DOC, PDF, TXT or read online from Scribd
See more
See less






  • Your Second Web Page
  • Basic HTML Tag Information
  • Closing Tags - </tag>
  • HTML Tag Order - Important!
  • Continue Along
  • Conclusion & Review
  • <head>
  • <title>
  • <h2>
  • <p>
  • Continue Your Learning - HTML Tutorial
  • Hyper Text Markup Language - HTML
  • Preparation for HTML
  • Brief HTML Background
  • Web Pages
  • Words to Know
  • The Rest of the Tutorial
  • HTML Elements
  • The <html> Element.../html>
  • The <head> Element
  • The <title> Element
  • The <body> Element
  • Tips
  • Beginning HTML Tags!
  • Tags Without Closing Tags
  • HTML - Attributes
  • HTML - Class or ID Attribute
  • HTML - Name Attribute
  • HTML - Title Attribute
  • HTML - Align Attribute
  • Attribute Defaults
  • Generic Attributes
  • Paragraph Tag <p>
  • HTML - Paragraph Justification
  • HTML - Paragraph Centering
  • HTML - Paragraph Align Right
  • HTML - Headings 1:6
  • Headings
  • Essay Walkthrough
  • Essay Example
  • Line Breaks
  • HTML Horizontal Rule
  • HTML Lists
  • HTML Ordered Lists
  • HTML Ordered Lists Continued
  • HTML Unordered Lists
  • HTML Definition Term Lists
  • HTML - Formatting Elements w/ Tags
  • Bold, Italic and More
  • HTML - Formatting Tag Usage
  • HTML Color Coding System - Color Names
  • HTML Coloring System - RGB Values
  • HTML Coloring System - Hexadecimal
  • HTML Color Code - Breaking the Code
  • HTML - Font and Basefont
  • Font Size
  • Font Color
  • Font Face
  • Basefont - Set a Solid Base
  • Attribute Review
  • Beautiful First Letter Style
  • HTML - Links and Anchors
  • HTML - Hypertext Reference (href)
  • HTML - Text Links
  • HTML - Link Targets
  • HTML - Anchors
  • HTML - Email Links
  • HTML - Download Links
  • HTML - Default Links; Base
  • HTML Character Entities
  • Additional Spaces and <>
  • HTML Entities Reference Table
  • Create HTML Email
  • HTML Email Tag
  • Additional HTML Email Code
  • HTML - Images
  • HTML - Image src
  • HTML - Alternative Attribute
  • HTML - Image Height and Width
  • Vertically and Horizontally Align Images
  • Images as Links
  • Thumbnails
  • HTML Gifs vs. Jpegs
  • HTML - Image Links
  • HTML - Thumbnails
  • HTML Forms
  • Text Fields
  • HTML Form Email
  • HTML Radio Buttons
  • HTML Check Boxes
  • HTML Drop Down Lists
  • HTML Selection Forms
  • HTML Upload Forms
  • HTML Text Areas
  • HTML Tables
  • Spanning Multiple Rows and Cells
  • Cell Padding and Spacing
  • HTML Color - bgcolor
  • Adding Color to Your Tables
  • Adding Color to Table Rows & Columns
  • Background Color and Font Color Together!
  • HTML - Background
  • HTML - Background Repeat
  • HTML - Patterned Backgrounds
  • HTML - Transparent Background
  • HTML Color Chart
  • HTML Frames
  • Frames - A Generic Frame Page
  • Adding a Banner or Title Frame
  • FrameBorder and FrameSpacing
  • Frame Name and Frame Target
  • Noresize and Scrolling
  • HTML - Layout
  • HTML - Standard Layout
  • HTML - <!-- Comments -->
  • HTML - <!-- Commenting Existing Code -->
  • HTML - <!-- Commenting Scripts -->
  • HTML Meta Tags
  • Keywords Meta Tag
  • Description Meta Tag
  • Revised Meta Tag
  • Refresh Page and Redirect
  • HTML Scripts
  • HTML Javascript Code
  • HTML Vbscript How To
  • HTML Music Codes
  • HTML Embed
  • Embed Attributes - Related to Display
  • Embed Attributes - Related to Functionality
  • Controls Attribute
  • HTML - Video Codes
  • HTML - Video Media Types
  • HTML - Embed Attributes
  • HTML - Google Video
  • HTML - Body
  • HTML - Body Margins
  • HTML - Base Text
  • HTML - Base Links
  • HTML - Div Element(s)
  • HTML - Div Layouts
  • HTML - Bold
  • HTML - Italic(s)
  • HTML Bold and Italics
  • HTML - Code <code>
  • HTML - Code Links
  • HTML - <pre> Preformatting
  • HTML - <sup> Superscript
  • HTML - Exponents
  • HTML - Footnotes
  • HTML - Subscript
  • HTML - Chemical Compounds
  • HTML - Strikethrough
  • HTML - Check Off Tasks
  • HTML - Input Tags
  • HTML - The Type Attribute
  • HTML - Text Fields and Password Fields
  • HTML - Checkboxes
  • HTML - Radios
  • HTML - Reset Buttons
  • HTML - User Input
  • HTML - Text Fields
  • HTML - Text Field Size
  • HTML - Text Field Maxlength
  • HTML - Text Field Value
  • HTML - Password Fields
  • HTML - Checkbox Forms
  • HTML Checkboxes Selected
  • HTML - Radio Forms
  • HTML - Radio Checked
  • HTML - Textareas
  • HTML - Text area Cols and Rows
  • HTML - Textarea Wrap
  • HTML - Textarea Readonly
  • HTML - Disabled
  • HTML - Upload Forms
  • Max File Size
  • HTML - Selection Forms and Drop Down Lists
  • HTML - Selection Forms
  • HTML - Selecting Multiples
  • HTML - Submit Buttons
  • Form Submission - Action
  • HTML Reset Buttons
  • HTML Reset in Action
  • HTML - Hidden Field
  • HTML - Name and Value the Fields
  • HTML Reference - Version 0.5

Your Second Web Page

Now that you have created your first webpage, let us examine the different segments of your "index.html" file. You have probably noticed a pattern of various words that are surrounded with < and >. These items are called HTML tags. An example of an html tag is <body>. The Body tag tells the browser where the page's content begins. Body is also an example of one of the required HTML tags that every web page must have.

Basic HTML Tag Information
Let's learn more about these tags. A basic web page is composed of 2 main tags. If you create a web page without these tags you will be in trouble!

HTML Code:
<html> <body> Your site's content goes here </body> </html>

The first HTML tag, which conviently is labled <html> tells the browser that your HTML code is starting. The second HTML tag, <body> tells the browser that the visible part of the webpage ( your content ) is going to start.

Closing Tags - </tag>
You might be wondering what is the deal with the two tags at the end, </body> and </html>. These tags are telling the browser that certain tags are ending. The </body> lets the browser know that your content is ending, while the </html> tells the browser that your HTML file is finished. The "/" that is placed before the tag's name informs the browser that you would like to stop using the specified tag. <tag> is used to begin a tag and </tag> is used to end a tag.

HTML Tag Order - Important!
The order that opening tags appear and ending tags appear follow an important rule. If an HTML tag is opened within another, for example the body tag is opened inside the html tag, then that tag(body) must close before the outter(html) tag is closed. We ended the body tag first because it was opened most recently. This rule of "closing the most recent tag before closing older tags" applies to all HTML tags.

Continue Along
These ideas might take a while to sink in, so how about you create your second web page? Copy this code into notepad, like you did before, following the same directions.

HTML Code:
<html> <head> <title>My Own Webpage!</title> </head> <body> <h2>Welcome to my webpage</h2> <p>Coming soon will be my completed webpage that will wow and impress you!</p> </body> </html>

After you are sure that your HTML code inside notepad is exactly the same as our provided HTML code, go ahead and save your file. You should be saving this file as "index.html". You may be prompted that you will be saving over a file, that is OK, you do not need your 1st web page anymore. When you are done, please continue.

Conclusion & Review
A few new tags were introduced in the last lesson. We will now give you a definition of these new tags to get you ready for starting the real HTML Tutorial. The new tags were: <head>, <title>, <h2>, and <p>. Advertise on Tizag.com

The HTML Code in Question:
<html> <head> <title>My Own Webpage!</title> </head> <body> <h2>Welcome to my webpage</h2> <p>Coming soon will be my completed webpage that will wow and impress you!</p> </body> </html>


This comes immediately following <html> and is used to tell the browser useful information, such as: the title of your page, the topic of your webpage ( used on old search engines ) and more.

This tag must comes between <head> & </head> and will label the web browser's title bar, which is located in the top left of most browsers. In the previous example, we titled the page "My Own Webpage!" and that text would show up as the browser's title.

This is a header tag. It will create a "header" that is much larger than the default font size. The "h2" means that it is the 2nd largest header. The largest header is "h1" and the smallest header is "h6". Headers should be used for titles, just like the ones you see on this page.

This is a paragraph tag. So when you're writing a paragraph make sure you place <p> at the beginning of the paragraph and </p> at the end!

Continue Your Learning - HTML Tutorial
Now that you have attained a basic understanding for how HTML works, please continue on to our HTML tutorial section. Here you will learn all the basic HTML tags and attributes required to make a usable web site.

Hyper Text Markup Language - HTML
Welcome to Tizag.com's HTML Tutorial. Here you will learn how the basics of the Hyper Text Markup Language (HTML), so that you may make your own web pages like the one you are viewing right now. Advertise on Tizag.com HTML is not a programming language, but rather a markup language. If you already know XML, then HTML will be a snap for you to learn. We urge you not to attempt to blow through this tutorial in one sitting. We recommend that you spend 15 minutes to an hour a day practicing HTML and then take a break, to let the information settle in. We aren't going anywhere!

Preparation for HTML
Creating an HTML document is easy. To begin coding HTML you need only two things: a simple-text editor and the dedication to follow our tutorial! Notepad is the most basic of simpletext editors and you will probably code a fair amount of HTML with it.

the Tizag banner. the element's content. A group called the World Wide Web Consortium was then formed and have since set the standards that are widely accepted and we will base our teachings around them. an element is a complete tag. and an attribute customizes or modifies HTML elements.Used to specify ("mark-up") regions of HTML documents for the web browser to interpret. .com An element consists of three basic parts: an opening tag. or you can continue to learn step-by-step using the "Continue" button below. Here are some important facts about why web pages are so useful. and the navigation links on the left are all elements of this web page. Advertise on Tizag. November 1990 marks the day of the first web page and back then there were little to no HTML standards to be followed. For now just know that a tag is a command the web browser interprets.If you are new to HTML and haven't read through the Beginner's Tutorial. Another medium to market your business. and finally. Everything you see in front of you. please take a few minutes to complete that tutorial before moving on. Web Pages Web pages have many uses. Tags look like this: <tag> Element . Let the world know about you with a personal website! Words to Know • • • Tag . a closing tag. HTML Elements HTML elements exist on many levels. An element in HTML is a loose term that describes each individual piece of your web page. The Rest of the Tutorial For the rest of the tutorial.Used to modify the value of the HTML element. having an opening <tag> and a closing </tag>. you may use the menu to navigate to specific lessons. • • • A cheap and easy way to spread information to a large audience. the paragraph texts. Brief HTML Background HTML has not been around for many years. Examples and "walk-throughs" are provided in each section. Attribute .A complete tag. Elements will often have multiple attributes.

html".paragraph words 3. blank document ready to go. Element Content . Click on the "Save as Type" drop down box and select the option "All Files". you're golden. open up Notepad or Crimson Editor and have a new. </p> . Other elements used for scripting (Javascript) and formatting (CSS) will eventually be introduced and you will have to place them within your head element. Now open your file in a new web browser so that you have the ability to refresh your page and see your changes. you should be starring at your very first blank (white) web page! The <head> Element The <head> element is "next" as they say. and body elements. As long as it falls somewhere between your <html> tag and your web page content (<body>). For now. When asked to name your file. HTML Code: <html> <head> </head> </html> .closing tag Every (web)page requires four critical elements: the html." Tags placed within the head element are not directly displayed by web browsers. The <html> Element. If you haven't already. Its sole purpose is to encapsulate all the HTML code and describe the HTML document to the web browser. Copy the following HTML code into your text editor. We will be placing the <title> element here and we'll talk about the other possible elements in later lessons. Remember to close your HTML documents with the corresponding </html> tag at the bottom of the document. Here's a sample of the initial set up. <p> .html document. name it "index. The head functions "behind the scenes.. your head element will continue to lay empty except for the title element that will be introduced next. Double check that you did everything correctly and then press save. without the quotes.opening paragraph tag 2. If you opened up your index.</html> <html> begins and ends each and every web page. head.1. HTML Code: <html> </html> Now save your file by Selecting Menu and then Save.. title.

pictures. we still have nothing happening on the web page. As the menu on the left suggests.As of yet. tables. it is only important to understand that the body element will encapsulate all of your webpage's viewable content. we will be looking at each of these elements in greater detail as the tutorial progresses. You should see "My WebPage!" in the upper-left. the best titles are brief and descriptive. complete webpage. HTML Code: <html> <head> <title>My WebPage!</title> </head> <body> Hello World! All my content goes here! </body> </html> Go ahead and view your first. (Paragraphs. The <title> Element Place the <title> tag within the <head> element to title your page. Content (stuff you can see) will come later. • Go Back . For now. Here's the html code: HTML Code: <html> <head> <title>My WebPage!</title> </head> </html> Save the file and open it in your browser. just keep in mind. as the window's title. The <body> Element The <body> element is where all content is placed. All we have so far is a couple of necessary elements that describe our document to the web browser. etc). The words you write between the opening and closing <title></title> tags will be displayed at the top of a viewer's browser. Name your webpage as you please.

This is the standard for XHTML and Dynamic HTML. Tables. they still have the 3 parts (opening/closing and content). forms. left to right. By adding tags to an HTML document.• Continue Tips With these 4 elements. Tags have 3 major parts: opening tag(s). Recall that a completed tag is termed an element. etc). HTML Tags: <body>Body Tag (acts as a content shell) <p>Paragraph Tag</p> <h2>Heading Tag</h2> <b>Bold Tag</b> <i>Italic Tag</i> </body> Tags Without Closing Tags There are a few tags that do not follow the mold above. content(s). tables look like tables. you now may begin adding content to your site. I'm sure you want to learn some more techniques." Advertise on Tizag. Here's quick look at some HTML tags. The reason being that these tags do not really require any content. images. So please continue on! Review: • • • Elements consist of three parts There are four main elements to every web page Create a primitive Site Beginning HTML Tags! A web browser reads an HTML document top to bottom. and closing tag(s).com As you will learn. and everything else being displayed on an web page requires the use of a tag or two. HTML Code: <openingtag>Content</closingtag> <p>A Paragraph Tag</p> Tags should be lower-case letters if you plan on publishing your work. there are probably hundreds of HTML Tags. though. . lists. I'm a paragraph tag. These tags however do not require a formal </closingtag> but rather a modified version. it is displayed accordingly (paragraphs look like paragraphs. In a way. you signal to the browser "Hey look. now treat me as such. Each time the browser finds a tag.

your browser is completely capable of interpreting this tag so long as we tell the browser where the image is located using the src attribute. • • Go Back Continue Tips • • • • A tag consists of an opening tag and a closing tag . Other tags have also been modified such as the image tag and input tag. Few HTML tags do not require a closing tag. .. it is not necessary to type <br>linebreak</br>. HTML Code: <img src="./mypic. life would become redundant real quick. Let's take a look at a line break tag.Input Field Display: --Line Break-þÿ As you can see from the above image tag.jpg" /> -. Instead the better solution was to combine the opening and closing tags into a single format.Line Break Tag <input type="text" size="12" /> -. HTML Code: <br /> To tell the browser we want to place a line break (carriage return) onto the site. Modify tags with attributes to customize your webpages! Tags depreciate as new web technologies evolve. More on attributes in the next lesson.Image Tag <br /> -.Rather some of them just need a source URL and this is enough information for the web browser to display the tag properly (image tags). If every line break tag needed all three components as other do.

Name Attribute Name is much different than id and class. HTML . All of these things and more can be achieved using Attributes. that name becomes a scripting variable for scripting languages such as Javascript.Now is a good time to start thinking about what type of website you may want to make. it will also search for set attributes and then display the element (tags+attributes) in its entirety. They play no direct role in formatting your elements but rather serve behind the scenes for scripting and Cascading Style Sheets (CSS). What we mean by amplify is that when a web browser interprets a tag. HTML Code: . HTML . Advertise on Tizag. and PHP. ASP. The name attribute is seen most often with forms and other user-input elements. These will be discussed as each tag is introduced throughout the tutorial. Right now we want to focus on a set of generic attributes that can be used with just about every HTML Tag in existence. The role of classification and identifying elements will become more apparent as your learn CSS. The idea is that you can classify or id certain a tag and later format the tag using Cascading Style Sheets. At some point you may want to give your body element a background color or perhaps change the width of a table. By allotting a name to an element. Attributes are placed within the opening tag and they follow a precise syntax (format).Class or ID Attribute The class and id attributes are nearly identical. HTML Code: <p id="italicsparagraph">Paragraph type 1 Italics</p> <p id="boldparagraph">Paragraph type 2 Bold</p> Classification Attributes: Paragraph type 1 Italics Paragraph type 2 Bold HTML .com Many HTML tags have a unique set of their own attributes.Attributes Attributes are used to amplify tags. It becomes necessary when you have two or more of the same element on a page (like a <p> tag) but want them to be different in appearance. It is always easier to make content for a topic or to achieve a goal.

HTML Code: <h2 align="center">Centered Heading</h2> Display: Centered Heading HTML Code: . Much like the text pop-ups of word processing programs. but behind the scenes it plays a huge identification role. You may align things left. or center. You may title an element anything you would like. HTML Code: <h2 title="Hello There!">Titled Heading Tag</h2> Title Attribute: Titled Heading Tag Hover your mouse over the display heading to see the magic of the title attribute! This provides your web site with some user interaction which is priceless. the effects of this attribute are not seen until you hover your mouse over the element for a few seconds.Align Attribute If you wish to change the horizontal location of your elements you may do so using the align attribute. This attribute titles an element and adds a tiny text pop-up to any HTML element. HTML . forgotten attribute. By default most elements are automatically aligned left unless otherwise specified.Title Attribute This is a neat little perhaps. HTML . right. these attributes should not be forgotten.<input type="text" name="TextField" /> The Name Game: þÿ This attribute has no effect on the display of the text field. Do not overlook the title attribute.

<h2 align="left">Left aligned heading</h2> <h2 align="center">Centered Heading</h2> <h2 align="right">Right aligned heading</h2>

Display: Left aligned heading Centered heading Right aligned heading

Attribute Defaults
Many tags are assigned default attributes. This means that unless a tag attribute is specified by you the creator, it will have some distinct attributes. For example, a paragraph tag will always align its text to the left unless it has an align attribute in it specifying otherwise. Also elements placed within a table are vertically centered and to the left unless otherwise specified. As you code and learn about each of the different HTML elements, you will become aware of many of these defaults.

Generic Attributes
Attributes exist to modify HTML tags allowing for complete customization of a website. Here's a table of some other attributes that are readily usable with many of HTML's tags. Attribute align valign Options right, left, center top, middle, bottom numeric, hexidecimal, RGB bgcolor values background URL id class width height title User Defined User Defined Numeric Value Numeric Value User Defined Function Horizontally aligns tags Vertically aligns tags within an HTML element. Places a background color behind an element Places an background image behind an element Names an element for use with Cascading Style Sheets. Classifies an element for use with Cascading Style Sheets. Specifies the width of tables, images, or table cells. Specifies the height of tables, images, or table cells. "Pop-up" title for your elements.

• •

Go Back Continue

• • •

Use several different attributes to enhance a tag. Completely customize your site through various tag/attribute combos. Use the title attribute!

Paragraph Tag <p>
Publishing any kind of written works requires the use of a paragraph. The paragraph tag is very basic and a great introductory tag for beginner's because of its simplicity. Advertise on Tizag.com The <p> tag defines a paragraph. Using this tag places a blank line above and below the text of the paragraph. These automated blank lines are examples of how a tag "marks" a paragraph and the web browser automatically understands how to display the paragraph text because of the paragraph tag.

HTML Code:
<p>Avoid losing floppy disks with important school...</p> <p>For instance, let's say you had a HUGE school...</p>

Two HTML Paragraphs:
Avoid losing floppy disks with important school/work projects on them. Use the web to keep your content so you can access it from anywhere in the world. It's also a quick way to write reminders or notes to yourself. With simple html skills, (the ones you have gained so far) it is easy. For instance, let's say you had a HUGE school or work project to complete. Off hand, the easiest way to transfer the documents from your house could be a 3.5" floppy disk. However, there is an alternative. Place your documents, photos, essays, or videos onto your web server and access them from anywhere in the world.

HTML - Paragraph Justification
Paragraphs can be formatted in HTML much the same as you would expect to find in a word processing program. Here the align attribute is used to "justify" our paragraph.

HTML Code:
<p align="justify">For instance, let's say you had a HUGE school or work...</p>

Justified Text Alignment:
For instance, let's say you had a HUGE school or work project to complete. Off hand, the easiest way to transfer the documents from your house could be a 3.5" floppy disk. However, there is an alternative. Place your documents, photos, essays, or videos onto your web server and access them from anywhere in the world.

HTML - Paragraph Centering
HTML Code:
<p align="center">For instance, let's say you had a HUGE school or work...</p>

Centered Text Alignment:
For instance, let's say you had a HUGE school or work project to complete. Off hand, the easiest way to transfer the documents from your house could be a 3.5" floppy disk. However, there is an alternative. Place your documents, photos, essays, or videos onto your web server and access them from anywhere in the world. Each line of the paragraph has now been centered inside the display window.

HTML - Paragraph Align Right
HTML Code:
<p align="right">For instance, let's say you had a HUGE school or work...</p>

Right Text Alignment:
For instance, let's say you had a HUGE school or work project to complete. Off hand, the easiest way to transfer the documents from your house could be a 3.5" floppy disk. However, there is an alternative. Place your documents, photos, essays, or videos onto your web server and access them from anywhere in the world. Every line of the paragraph above is now aligned to the right hand side of the display box.

HTML - Headings 1:6
A heading in HTML is just what you might expect, a title or subtitle. By placing text inside of <h1> (heading) tags, the text displays bold and the size of the text depends on the number of heading (1-6). Headings are numbered 1-6, with 1 being the largest heading and 6 being the smallest. Advertise on Tizag.com

Or make your own essay paragraphs.</p> HTML Essay: Essay Example ... This is a built in attribute so to speak associated with the heading tag. Essay Walkthrough Let's tie together headings and paragraphs to form an essay.. HTML Code: <h1 align="center">Essay Example</h1> <p>Avoid losing floppy disks with important school/work projects. Each time you place a heading tag. let's say you had a HUGE school or work project to complete. your web browser automatically places a line break in front of your beginning tag and after your ending tag exactly the same as with <p> tags. then Ctrl C) or code the following in the body of your page or a new page. Copy(Highlight. Headings 1-6: Headings are great for titles and subtitles Notice that each heading has a line break before and after each heading display.</p> <p>For instance.. Off .HTML Code: <body> <h1>Headings</h1> <h2>are</h2> <h3>great</h3> <h4>for</h4> <h5>titles</h5> <h6>and subtitles</h6> </body> Place these lines into your HTML file and you should get what is displayed below.

5" floppy disk. It's also a quick way to write reminders or notes to yourself. The line break tag will also come in handy toward the end of our letter. Use the web to keep your content so you can access it from anywhere in the world. For instance. Ohio<br /> </p> Address: Will Mateson Box 61 Cleveland. Ohio We have created a possible address for a letter head. essays.<br /> <br /> <br /> Kevin Sanders<br /> Vice President</p> Closing Letter: Sincerely. However. Line Breaks Line breaks are different then most of the tags we have seen so far. Place your documents. let's say you had a HUGE school or work project to complete. (the ones you have gained so far by now) it is easy. HTML Code: <p>Sincerely.Avoid losing floppy disks with important school/work projects on them. Advertise on Tizag. Placing <br /> within the code is the same as pressing the return key in a word processor. the easiest way to transfer the documents from your house could be a 3.com HTML Code: <p> Will Mateson<br /> Box 61<br /> Cleveland. Use the <br /> tag within the <p> (paragraph) tag. With simple html skills. . or videos onto your web server and access them from anywhere in the world. photos. there is an alternative. Off hand. A line break ends the line you are currently on and resumes on the next line.

JRR Tolkein. HTML Code: <hr /> <p>1. "The Hobbit".<br /> 2. Advertise on Tizag. and headings. the horizontal rule tag can come in handy when publishing work. "The Fellowship of the Ring" JRR Tolkein. Note: the horizontal rule tag has no ending tag like the line break tag. A table of contents or perhaps a bibliography. lists. save larger page layout issues for tables and the align attribute.com HTML Code:: <hr /> Use <hr /><hr /> Them <hr /> Sparingly <hr /> Display:: Use Them Sparingly Aside from our exaggerated example.Kevin Sanders Vice President Tips • • • The line break tag can be placed within other HTML elements such as paragraphs. Remember that the line break tag does not require a closing tag. tables. HTML Horizontal Rule Use the <hr /> tag to display lines across the screen.</p> Biliography: . Use the line break tag to solve minor formatting issues.

Find a Job 2. its results can be outstanding.unordered list. Ordered simply means numbered. HTML Lists There are 3 different types of lists. Advertise on Tizag. Move Out Start your ordered list on any number besides 1 using the start attribute. Place the <li> (list item) tag between your opening <ol> and closing </ol> tags to create list items. HTML Code: <h4 align="center">Goals</h4> <ol start="4" > <li>Buy Food</li> <li>Enroll in College</li> <li>Get a Degree</li> . As you can see. dictionary HTML Ordered Lists Use the <ol> tag to begin an ordered list. Use the type and start attributes to fine tune your lists accordingly. numbers <dl> .ordered list.definition list. "The Hobbit".1. HTML Code: <h4 align="center">Goals</h4> <ol> <li>Find a Job</li> <li>Get Money</li> <li>Move Out</li> </ol> Numbered list: Goals 1. "The Fellowship of the Ring" JRR Tolkein. and used properly. JRR Tolkein. A <ol> tag starts an ordered list. bullets <ol> . Get Money 3.com • • • <ul> . and <dl> for definition lists. <ul> for unordered lists. all this tag does is draw a line across your content. 2. as the list below demonstrates.

Move Out iii. Move Out C. Use the type attribute to change the numbering. start simply defines which number to begin numbering with. Move Out HTML Unordered Lists Create a bulleted list with the <ul> tag. discs. Get Money II. The default bullet displayed by most web browsers is the traditional full disc. both capital and lower-case. Find a Job I. Instead of generic numbers you can replace them with Roman numberals or letters. Get Money B. HTML Code: <h4 align="center">Shopping List</h4> <ul> <li>Milk</li> <li>Toilet Paper</li> <li>Cereal</li> <li>Bread</li> </ul> . Get a Degree Nothing fancy here. Enroll in College 6. and circles. Get Money ii. Find a Job b. Move Out III. Find a Job i. Buy Food 5. HTML Ordered Lists Continued There are 4 other types of ordered lists. The bullet itself comes in three flavors: squares.</ol> Numbered List Start: Goals 4. HTML Code: <ol <ol <ol <ol type="a"> type="A"> type="i"> type="I"> Ordered List Types: Lower-Case Letters Upper-Case Letters Lower-Case Numerals Upper-Case Numerals a. Find a Job A. Get Money c.

HTML Code: <ul type="square"> <ul type="disc"> <ul type="circle"> Unordered List Types: type="square" type="disc" type="circle" o Milk  Milk • Milk o Toilet Paper  Toilet Paper • Toilet Paper  Cereal • Cereal o Cereal  Bread • Bread o Bread HTML Definition Term Lists Make definition lists as seen in dictionaries using the <dl> tag.defines the start of the list <dt> .Unordered Lists: Shopping List • • • • Milk Toilet Paper Cereal Bread Here's a look at the other flavors of unordered lists may look like.definition term <dd> . • • • <dl> . It's wise to bold the terms to displace them further. These lists displace the term word just above the definition itself for a unique look.</dd> <dt><b>Voiture</b></dt> <dd>French word for car.</dd> </dt> HTML Code: .defining definition HTML Code: <dl> <dt><b>Fromage</b></dt> <dd>French word for cheese.

Fromage French word for cheese.Formatting Tag Usage These tags should be used sparingly. and more.Formatting Elements w/ Tags As you begin to place more and more elements onto your web site. And what we mean by that is that you should only use them to bold or italicize one or two words in your elements at a time. and you should consult how .com Bold. HTML . HTML . Several tags exist to further amplify text elements. They can be used with any text type element. Advertise on Tizag. italic. Voiture French word for car. it will become necessary to make minor changes to the formatting of those elements. These formatting tags can make text bold. sub/superscripted. Italic and More HTML Code: <p>An <p>An <p>An <p>An <p>An <p>An <p>An <p>An example example example example example example example example of of of of of of of of <b>Bold Text</b></p> <em>Emphasized Text</em></p> <strong>Strong Text</strong></p> <i>Italic Text</i></p> <sup>superscripted Text</sup></p> <sub>subscripted Text</sub></p> <del>struckthrough Text</del></p> <code>Computer Code Text</code></p> HTML Formatting: An example of Bold Text An example of Emphasized Text An example of Strong Text An example of Italic Text An example of superscripted Text An example of subscripted Text An example of An example of Computer Code Text All of these tags add a pinch of flavor to paragraph elements. In our HTML Attributes lesson we discussed ways to add some flavor with attributes and align elements within other elements. If you wish to bold an entire paragraph a better solution would involve Cascading Style Sheets.

RGB Values We do not recommend that you use RGB for safe web design because non-IE browsers do not support HTML RGB.com The 16 Basic Colors: Black Yellow Red Maroon Gray Lime Green Olive Silver Aqua Blue Navy White Fuchsia Purple Teal HTML Coloring System . Being a voice of experience. The simplest being the Generic terms of colors. • • Go Back Continue Tips • • Remember that there is a special form for line breaks and horizontal rule tags. but if you are not using a browser that supports it. the web developer. if you plan on learning CSS then you should glance over this topic.Color Names There are 3 different methods to set color. Below is an example of RGB in use. RGB stands for Red. Green. GREEN. red. that is just one of the problems with HTML RGB. Green. Generic colors are preset HTML coded colors where the value is simply the name of each color. and Blue Values: . HTML Color Coding System . Advertise on Tizag. However. do not worry. BLUE). Here is a sample of the most widely supported colors and their respective name values.to do that in our CSS Tutorial. Examples: black. and blue. keep the use of these tags quick and sparse. Each can have a value from 0 (none of that color) to 255 (fully that color). white. The format for RGB is . Red. Use this page as a reference if you ever need to format your web site's text in the future. Ultimately the decision is yours. green. just like the name implies.rgb(RED. Blue.

the next two are a green value(GG). They are far more reliable and widely compatible among web browsers and are the standard for colors on the internet.255.0)" bgcolor="rgb(0. Hexadecimal Formula: (15 * 16) + (15) = 255 . The first two digits(RR) represent a red value. A Real Hexadecimal: bgcolor="#FFFFFF" The letter "F" is the maximum amount we can send each color and as you may deduce.255)" White Red Green Blue HTML Coloring System . Rest assured that the system becomes much. Hexadecimal Color Values: Decimal 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Hexadecimal 0 1 2 3 4 5 6 7 8 9 A B C D E F So use letters as numbers?We will answer this question as we dive into the converting hexadecimals to regular numbers.Breaking the Code The following table shows how letters are incorporated into the hexadecimal essentially extending the numbers system to 16 values. A hexadecimal is a 6 digit representation of a color. Hang in there it all makes sense shortly.0.0. and the last are the blue value(BB). this color (#FFFFFF) represents the color white.Hexadecimal The hexadecimal system is complex and difficult to understand at first.255.bgcolor="rgb(255. A formula exists to calculate the numeric equivalent of a hexadecimal. MUCH easier with practice and as a blossoming web developer. My First Hexadecimal: bgcolor="#RRGGBB" HTML Color Code .255)" bgcolor="rgb(255. Let's have a look at real Hexadecimal.0)" bgcolor="rgb(0. Here's a hexadecimal you might see in an HTML document. it is critical to understand hexadecimals to be capable of using them in your own web publications.

and color to the text on your site. color. size. The value 255 is the maximum allowed for any primary color. "#44HHFF".Green) (7 * 16) + (0) = 112 05(BB . or "#117788". use paired hex values for color. Example 2: bgcolor="#CC7005" CC(RR . HTML . Even the most minor of change in color can throw your entire site out of whack. Take the first value (F) or 15 multiply it by 16 and add it to the second value. use css styles to manipulate your font. and color. These are called True Colors.The formula is real simple. so be sure to check your site in a number of browsers.Red) (12 * 16) + (12) = 204 70(GG . Advertise on Tizag. Font Size Set the size of your font with size. face. Use the size.The default size of a font is 3. Use a <basefont> tag to set all of your text to the same size. 15. Let's try another one. .Font and Basefont The <font> tag is used to add style. Examples: "#0011EE". HTML Code: <p> <font size="5">Here is a size 5 font</font> </p> Font Size: Here is a size 5 font. and face attributes to customize your fonts. If you want to be absolutely sure your colors will not change. since they will stay true in hue from browser to browser. The range of accepted values is from 1(smallest) to 7(largest). Instead.Blue) (0 * 16) + (5) = 5 Hexadecimals are the best choice for compatible web development because of their consistency between browsers.com The font and basefont tags are deprecated and should not be used. See our CSS Tutorial for more information.

. Book Antiqua. An option is to choose a few that are similar in appearance. Garamond">This paragraph has had its font.. We highly recommend specifying a basefont if you plan on using any font with HTML.. Below is the correct way to set your basefont.</font> </p> Font Face: This paragraph has had its font formatted by the font tag! Basefont .</p> <p>This paragraph has had its font. Be aware that if the user viewing the page doesn't have the font installed. HTML Code: <font color="#990000">This text is hexcolor #990000</font> <br /> <font color="red">This text is red</font> Font Color: This text is hexcolor #990000 This text is red Font Face Choose a different font face using any font you have installed.Set a Solid Base With the basefont tag you will be able to set the default font for your web page. HTML Code: <p> <font face="Bookman Old Style. they will not be able to see it.. HTML Code: <html> <body> <basefont size="2" color="green"> <p>This paragraph has had its font.Font Color Set the color of your font with color.. Instead they will default to Times New Roman..</p> .

</p> </basefont> </body> </html> Base Font: This paragraph has had its font formatted by the basefont tag! This paragraph has had its font formatted by the basefont tag! This paragraph has had its font formatted by the basefont tag! However. Attribute Review Attributes: Attribute= "Value" size= color= face= "Num.. HTML Code: <p><font size="7" face="Georgia. 7 is biggest Change the font type "rgb.or hexidecimal" Change font color Beautiful First Letter Style Customize your fonts to achieve any of your desired looks.name. HTML .Links and Anchors . The perfectly correct way to change your sites basefont is to set it with CSS. Check out our CSS Tutorial for more information..<p>This paragraph has had its font.</p> Beauty: C ustomize your font to achieve a desired look. Arial" color="maroon">C</font>ustomize your font to achieve a desired look. which means it may not be supported sometime in the future. Value 1-7" "name of font" Description Size of your text. the use of basefont is deprecated.

and Forms may be used to create these links. These connections are made using anchor tags to create links.href=".Links to anchors on the current page Local . Advertise on Tizag.jpg" Global . or to open the link in the current browser window.com/" HTML .The web got its spidery name from the plentiful connections between web sites.. HTML Code: <a href="http://www. Decide what type of href attribute you need and place this attribute into the opening tag. Images. Use the demonstration below as a reference. HTML Code: . • • • Internal .tizag.Links to other domains outside of your site HTML Code: Internal .href="#anchorname" Local .href="http://www. Text.Link Targets The target attribute defines whether to open the page in a separate window. The text you place between the opening and closing tags will be shown as the link on a page.yahoo. Hypertext references can be Internal.tizag. Basically this is where the user will be taken if they wish to click this link.Links to other pages within your domain Global .Text Links Use the <a></a> tags to define the start and ending of an anchor. or Global./pics/picturefile. Local.com/" target="_blank" >ESPN Home</a> <a href="http://www.com/" target="_blank" >Yahoo Home</a> Global Link: Tizag Home ESPN Home Yahoo Home HTML .Hypertext Reference (href) The href attribute defines reference that the link refers to.com/" target="_blank" >Tizag Home</a> <a href="http://www.espn.com HTML .

a popular sports web site. In the example below. we've created a mini Table of Contents for this page.com" target="_blank">ESPN. and naming them. By placing blank anchors just after each heading. The target attribute is added to allow the browser to open ESPN in a new window. the headings of this page contain blank. First. so that the viewer can remain at our web site. Here's the example.Anchors To link to sections of your existing page a name must be given to the anchor. cancelling all frames The example below shows how you would link to ESPN. named anchors.COM</a> _blank Target: ESPN. placing the pound symbol followed by the name of the anchor in the href of the new link. HTML Code: <a href="http://www. Anchor Code: <a href="#top">Go to the Top</a> <a href="#text">Learn about Text Links</a> <a href="#email">Learn about Email Links</a> Local Links: .COM HTML . we can then create reference links to those sections on this page as shown below.target=" _blank" Opens new page in a new browser window _self" Loads the new page in current window _parent" Loads new page into a frame that is superior to where the link lies _top" Loads new page into the current browser window. Tizag's Own Code: <h2>HTML Links and Anchors<a name="top"></a></h2> <h2>HTML Text Links<a name="text"></a></h2> <h2>HTML Email<a name="email"></a></h2> Now create the reference links. They look like this.COM.ESPN.

Default Links. Base . HTML Code: <a href="http://www.Email Links Creating an email link is simple. The best solution for images is to use a thumbnail link that we discuss in the next lesson. HTML Code: <a href="mailto:email@tizag. HTML Code: <a href="mailto:email@tizag.Go to the Top Learn about Text Links Learn about Email Links HTML .Download Links Placing files available for download is done in exactly the same fashion as placing text links.com?subject=Feedback" >Email@tizag.zip">Text Document</a> Download a Text Document: Text Document HTML .com/pics/htmlT/blanktext. If you want somebody to mail you about your site a good way to do it is place an email link with a subject already in place for them.com?subject=Feedback&body=Sweet site!"> Email@tizag.tizag.com</a> Email Links: Email@tizag.com HTML .com</a> Complete Email: Email@tizag.com In some circumstances it may be necessary to fill in the body of the Email for the user as well. Things become complicated if we want to place image links available for download.

com/"> </head> HTML Character Entities An entity is a fancy term for a symbol. Advertise on Tizag. HTML Code: <head> <base href="http://www.Copyright symbol.. . Several symbols such as copyright. or foreign cash symbols exist outside of the ones you see on your keyboard. to make . Additional Spaces and <>. HTML Code: • Each begins with a ampersand .copy • And finally a semicolon . you need to know 4 parts. trademark.tizag.com There's three parts to every entity.& • Then the entities name .Use the <base> tag in the head element to set a default URL for all links on a page to go to. In order to display them. It's always a good idea to set a base tag just incase your links become bugged somewhere down the line. Usually set your base to your home page.© . Copyright: Combine &copy. Expect complications if you forget to include all three parts of an entity. In order to display these characters.

&#165. &#166. &#164. HTML Code: <p>Everything that goes up. &iexcl. must come down! In HTML we use less than and greater than characters to create tags. HTML Code: <p> Less than . .&nbsp. &gt. &#62. &cent. browsers will only recognize and format 1 space between words reguardless of how many you may actually type in your coded HTML.&nbsp. <br /> Body tag .<body> Take a few minutes to view and play with the symbols listed in the Entities Table.> Body tag . &lt.&lt. &brvbar.< Greater than . so to use them on your web site you will need entities. <br /> Greater than .body&gt. HTML Entities Reference Table Symbol < > " ¡ ¢ £ ¤ ¥ ¦ § Definition Non-Breaking Space Less Than Greater Than Quotation Mark Inverted Exclamation Cent English Pound Currency Yen Broken Vertical Bar Section Numeric Value Correlating Name &#160. &curren.&gt. &#167. &nbsp. &#34. &pound.&nbsp. &#60. &#163. &#162. &sect. must come &nbsp.down!</p> Spaces: Everything that goes up. &#161. &yen. &quot. Here's an example. An entity exists for placing additional spaces.As you have may have learned within paragraph and heading tags.&lt. </p> Less than Greater than: Less than .

Acute Accent-Capital I &#205. &Otilde. &Acirc. Tilde-Capital O &#213. ¾ Fraction &#190. Capital ae &#198. &sup3.¨ © ª « » ¬ ® ¯ ° ± ² ³ ´ µ ¶ · ¸ ¹ º ¼ ½ ¾ ¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô Õ Ö Double Dot &#168. &Atilde.)uml. Registered Trademark &#174. Spacing Macron &#175.Ntilde. &Auml. &Aring. &Igrave. Degree(s) &#176. &mp. Right Angle Quotation Mark &#187. Circumflex Accent-Capital E &#202. &Ocirc. Grave Accent-Capital I &#204. Acute Accent-Capital A &#193. &uml. &middot. &Ccedil. &Agrave. Grave Accent-Capital E &#200. Left Angle Quotation Mark &#171. &Iacute. &acute. Inverted Question Mark &#191. &micro. Grave Accent-Capital O &#210. &deg. &copy. &laquo. Umlaut Mark-Capital O &#214. Copyright &#169.ETH. Masculine Ordinal Indicator &#186. Spacing Cedilla &#184. &para. Tilde-Capital N &#209. Grave Accent-Captial A &#192. %amp. Ring-Capital A &#197. Paragraph &#182. &frac14. Superscript 3 &#179. Circumflex Accent-Capital A &#194. &iquest. &not. ½ Fraction &#189. ¼ Fraction &#188. Superscript 1 &#185. Tilde-Capital A &#195. Umlaut Mark-Capital E &#203. Cedilla-Capital C &#199. &mp. . &frac34. &macr. Umlaut Mark-Capital A &#196. &cedil. &AElig. &raquo. &Ograve. &Oacute. &Eml. &ordf. &Iuml. &frac12. Middle Dot &#183. Circumflex Accent-Capital O &#212. &sup2. Acute Accent-Capital O &#211. &Aacute. &sup1. Circumflex Accent-Capital I &#206. Negation &#172. Capital eth &#208. Spacing Acute &#180. Umlaut Mark-Capital I &#207. Superscript 2 &#178. Feminine Ordinal Indicator &#170. &reg. &Icirc. &Egrave. &Eacute. Acute Accent-Capital E &#201. &plusmn. &ordm. Plus or Minus &#177. Micro &#181. &Ecirc.

Umlaut Mark-Capital U &#220. &oelig. However. &OElig. &rsquo. you should know that when you place your email on your website. &eth. Slash-Small o &#248. &oslash. Per Mile &#8240. Left Single Arrow Quote &#8249. Acute Accent-Captital U &#218. &aelig. it is very easy for computer experts to run programs to harvest these types of emails for spamming. &ldquo. Slash-Capital O &#216. &Uacute. &rdquo. &Ugrave. &Oslash. Create HTML Email Making an HTML email link on your page is quick and simple. &mdash. En Dash &#8211. Capital Ligature &#338. be sure that you have anti-spam software! Advertise on Tizag. &trade. Em Dash &#8212. Zero Width Joiner &#8205. Circumflex Accent-Capital U &#219. &lsquo. Double Dagger &#8225. Small ae &#230. &Uuml. &times. Acute Accent-Capital Y &#221. Small Ligature &#339. Single Low Quote &#8218. Small Thorn &#254. TradeMark &#8482. Right Double Quote &#8221. Small eth &#240. &lsaquo. &bdquo. Modifier Circumflex Accent &#710. &ndash. &THORN.× Ø Ù Ú Û Ü Ý Þ ß æ ð ø þ Œ œ ˆ ˜ ‍ – — ‘ ’ ‚ “ ” „ † ‡ ‰ ‹ › € ™ Multiplication &#215. &dagger. Small Tilde &#732. &rsaquo. &zwj. &Dagger. Grave Accent-Capital U &#217. &circ. Left Single Quote &#8216. &szlig. &Yacute. &Ucirc. &sbquo. Euro Mark &#8364. Right Single Arrow Quote &#8250. &tilde.com . If you are going to put your email link on a public website. Small Sharp &#223. &euro. Dagger &#8224. Double Low Quote &#8222. Thorn &#222. &permil. Right Single Quote &#8217. Left Double Quote &#8220. &thorn.

Populates the subject of the email with the information that you provide.com" >Email Example</a> Email Link: Email Example Additional HTML Email Code By adding a couple extra goodies onto the email address in href you can have both the SUBJECT and the BODY of the email automatically populated for your visitors. By defining a uniform subject that people will automatically have when clicking the link you will be able to tell right away whether or not an email came from the website or from another source (as long as your visitors don't mess with the subject that you give them). HTML Email Tag There actually is not a separate HTML tag for creating an HTML email link. HTML Code: <a href= "mailto: a@b.Another option to allow people to send you emails without exposing yourself to massive amounts of spam is to create an HTML form that gathers data from the user and emails it to your email account. • • Subject . Instead you use a standard HTML anchor tag <a> and set the href property equal to the email adddress. rather than specifying a web URL. This is great when receiving emails from a website to an email account that handles more mail than just from that one link on your site. HTML Code: <a href= "mailto:abc@mail.Populates the body of the email with the information that you provide. This is probably confusing and may take a little while to get used to.com?subject=Web Page Email&body=This email is from your website" > 2nd Email Example</a> Complete Email: 2nd Email Example HTML . We recommend the HTML Form Email that usually reduces the amount of potential spam. Body .Images .

There are two ways to define the source of an image.. you may eventually run short on hard drive space.html file picture file resides in the pic directory in a previous directory as . URL Types: Local Src src="sunset. where the picture file is located.gif) As your second choice. so it is very important that you understand how to use them properly. Src stands for source..html file A URL cannot contain drive letters.Images are a staple of any web designer.Tizag.gif" src=". HTML .Image src Above we have defined the src attribute.html file. as you continue to upload picture files to your system. Each method has its pros and cons. Advertise on Tizag.Alternative Attribute ./sunset. you may use any standard URL to properly point the src attribute to a local or external source. since a src URL is a relational source interpretation based on the location of your .gif" Location Description picture file resides in same directory as . however. Use the <img /> tag to place an image on your web page. (src=".com/pics/htmlT/sunset. the source of the image or more appropriately.gif") The location of this picture file is in relation to your location of your . for instance using the URL of pictures on other sites poses a problem if the web master(s) of the other site happen to change the physical location of the picture file. you may copy or upload the file onto your web server and access it locally using standard directory tree methods.html file and the location of the picture file. First you may use a standard URL./sunset.html file picture file resides in previous directory as . Pictures must be uploaded along with your . Use your best judgement to meet your needs. Copying the file directly to your web server solves this problem.com HTML Code: <img src="sunset. (src=http://www.html file to your web server./pics/sunset.gif" /> Image: HTML .gif" src=". Therefore something like src="C:\\www\web\pics\" will not work.. As with links described in a previous lesson.

Vertically and Horizontally Align Images Use the align and valign attributes to place images within your body. valign (Vertical) o top o bottom . height and width attributes.Image Height and Width To define the height and width of the image. text and other images will be moved around when the browser finally figures out how big the picture is supposed to be and then makes room for the picture. HTML Code: <img src="http://example. tables. HTML Code: <img src="sunset. align (Horizontal) o right o left o center 2.gif" height="50" width="100"> Height and Width: Above we have defined the src. rather than letting the browser compute the size. or if a user has image files disabled. use the height and width attributes.gif" alt="Beautiful Sunset" /> Alternative Text: HTML . Text only browsers also depend on the alt attribute since they cannot display pictures. 1.com/brokenlink/sunset. By informing the browser of the image dimensions it knows to set aside a place for that image. or sections.The alt attribute specifies alternate text to be displayed if for some reason the browser cannot find the image. Without defining an image's dimensions your site may load poorly.

Images are very useful for links and can be created with the HTML below.. If we were talking about beautiful tropical sunsets.tizag. The image will appear along the right hand side of the paragraph. HTML Code: <a href="http://www.gif" align="right"> The image will appear along the. isn't it? This is the third paragraph that appears below the paragraph with the image! you can see specified picture Images as Links This will be a quick review of the links . this would be perfect.image lesson.</p> Image Wrap Arond: This is paragraph 1..gif"> </a> Image Links: Now your image will take you to our home page when you click it.isn't it? </p> <p>This is the third paragraph that appears..o center Below is an example of how to align an image to the right of a paragraph. But we aren't talking about that. Change it to your home page URL. so it's rather a waste. yes it is.. yes it is. HTML Code: <p>This is paragraph 1. ..</p> <p> <img src="sunset.. As this is very nice for adding a little eye candy that relates to the paragraph. I think this paragraph serves as a nice example to show how this image alignment works.com/"> <img src="sunset.

Jpegs don't allow for transparent backgrounds.gif"> </a> Image Link: . To make a thumbnail save a low-quality version of a picture and make it have smaller dimensions. If you do not know how to use the image tag. not as compressed as a jpeg. and have a high compression rate downsizing your load times and saving hard drive space. skip ahead to the image tutorial and come back after you feel comfortable with it. To make an image link simply insert an image within the anchor tag. stick to using them for thumbnails and backgrounds. gifs are usually larger files. HTML Code: <a href="http://www. clip art. HTML Code: <a href="sunset. Jpegs Gifs are best used for banners. HTML .espn. but their size/quality ratio is outstanding. or artwork to allow the viewer to catch that extra bit of detail. The main reason for this is that gifs can have a transparent background which is priceless when it comes to web design. Its best to use Jpegs for photo galleries. Now make this low-quality picture into an image link and have it point to the the high-quality picture. and buttons.gif"> <img src="thmb_sunset.gif"> </a> Thumbnails: HTML Gifs vs.Image Links Using graphics will liven up that tired. Gifs are also limited to the 256 color scheme.Thumbnails Thumbnails are small size (Kilobytes) pictures that link to the larger. Jpegs however.com" target="_blank"> <img src="ahman. bland-looking text link. Avoid Jpegs for graphical design. On the down side. which calls for slow load times and large transfer rates. have an unlimited color wheel. high quality picture.

To make a thumbnail save a low-quality version of a picture and make it have smaller dimensions.Thumbnails Thumbnails are small size (Kilobytes) pictures that link to the larger. credit card. many browsers add a small border around image links. This is to quickly deceifer the difference between image links and just ordinary images on a web site. register the person to your web forum. or maybe subscribe them to your weekly newsletter.gif"> <img src="thmb_sunset.espn. No Border: HTML . Advertise on Tizag. Now make this low-quality picture into an image link and have it point to the the high-quality picture. etc. you may store that data into a file. Since this default is different from web browser to web browser it may be best to squelch this ambiguity by setting the border attribute to zero. HTML Code: <a href="sunset. HTML Code: <a href="http://www.com Text Fields . gather user statistics.gif" border="0"> </a> Image Link.gif"> </a> Thumbnails: HTML Forms Forms are a vital tool for the webmaster to receive information from the web surfer. email address.Notice that by default. high quality picture.com" target="_blank"> <img src="ahman. place an order. A form will take input from the viewer and depending on your needs. such as: their name.

HTML Code: <form method="post" action="mailto:youremail@email.Determines what kind of input field it will be.com"> Name: <input type="text" size="10" maxlength="40" name="name"> <br /> Password: <input type="password" size="10" maxlength="10" name="password"> </form> Input Forms: Name: þÿ Password: Do not use the password feature for security purposes. The data in the password field is not encrypted and is not secure in any way. submit. we must also add a destination for this information and specify how we want it to travel to that place. Generally. • • method .com"> Name: <input type="text" size="10" maxlength="40" name="name"> <br /> Password: <input type="password" size="10" maxlength="10" name="password"><br /> <input type="submit" value="Send"> . • • • • type . HTML Code: <form method="post" action="mailto:youremail@email. We will be sending our information to a fake email address.Sets the horizontal width of the field. and password.We will only be using the post functionality of method. The unit of measurement is in blank spaces. HTML Form Email Now we will add the submit functionality to your form. Possible choices are text.Assigns a name to the given field so that you may reference it later. let's start out with the basics of forms. The <input> has a few attributes that you should be aware of. Name defines what the label of the button will be. name . Here is a list of important attributes of the submit: In addition to adding the submit button. action . Adding the following attributes to your <form> will do just this. which sends the data without displaying any of the information to the visitor.Before we teach you how to make a complete form. Input fields are going to be the meat of your form's sandwich.Dictates the maximum number of characters that can be entered.Specifies the URL to send the data to. size . the button should be the last item of your form and have its name attribute set to "Send" or "Submit". maxlength .

You may have seen them on quizzes. • • value .specifies what will be sent if the user chooses this radio button. . HTML Code: <form method="post" action="mailto:youremail@email. Only one value will be sent for a given group of radio buttons (see name for more information). questionnaires.com"> What kind of shirt are you wearing? <br /> Shade: <input type="radio" name="shade" value="dark">Dark <input type="radio" name="shade" value="light">Light <br /> Size: <input type="radio" name="size" value="small">Small <input type="radio" name="size" value="medium">Medium <input type="radio" name="size" value="large">Large <br /> <input type="submit" value="Email Myself"> </form> Radios: What kind of shirt are you wearing? Shade: Size: Email Myself Dark Small Light Medium Large If you change the email address to your own and "Email Myself" then you should get an email with "shade=(choice) size=(choice)". Below are a couple attributes you should know that relate to the radio button.defines which set of radio buttons that it is a part of. Below we have 2 groups: shade and size. and other web sites that give the user a multiple choice question.</form> Email Forms: Name: Send þÿ Password: Simply change the email address to your own and you will have set up your first functional form! HTML Radio Buttons Radio buttons are a popular form of interaction. name .

HTML Code: <form method="post" action="mailto:youremail@email. The check box's name and value attributes behave the same as a radio button. <input type="checkbox" name="toon" value="Goofy">Goofy <input type="checkbox" name="toon" value="Donald">Donald <input type="checkbox" name="toon" value="Bugs">Bugs Bunny <input type="checkbox" name="toon" value="Scoob">Scooby Doo <input type="submit" value="Email Myself"> </form> Check Boxes: Select the 2 greatest toons. Goofy Donald Bugs Bunny Scooby Doo Email Myself HTML Drop Down Lists Drop down menues are created with the <select> and <option> tags. HTML Code: <form method="post" action="mailto:youremail@email.com"> College Degree? <select name="degree"> <option>Choose One</option> <option>Some High School</option> <option>High School Degree</option> <option>Some College</option> <option>Bachelor's Degree</option> <option>Doctorate</option> <input type="submit" value="Email Yourself"> </select> </form> Drop Down Lists: .HTML Check Boxes Check boxes allow for multiple items to be selected for a certain group of choices. <select> is the list itself and each <option> is an available choice for the user.com"> Select your favorite cartoon characters.

Education? þÿ Email Yourself HTML Selection Forms Yet another type of form. The HTML code for the upload form does nothing more than create an interface for the user to see and work with. PHP and PERL work fine. In this field. HTML codes this automatically when we place the type="file" attribute within the input tag. This hidden field does nothing more than limit the allowed file size of our uploaded file. PHP File Upload. Javascript is also an option. Basically just another type of way to get input from the user. HTML Code: <form method="post" action="mailto:youremail@email. and the selected option tells the browser which choice to select by default. the user has the option to type in the full local URL of the file or he/she may click the browse button to thumb through directory after directory. We have an entire upload example demonstrated here. The second part is the input field itself. The first being a hidden field. to actually make the upload form function correctly you must know a scripting language of some sort. The size attribute selects how many options will be shown at once before needing to scroll. This form will post what the user highlights.com"> Musical Taste <select multiple name="music" size="4"> <option value="emo" selected>Emo</option> <option value="metal/rock" >Metal/Rock</option> <option value="hiphop" >Hip Hop</option> <option value="ska" >Ska</option> <option value="jazz" >Jazz</option> <option value="country" >Country</option> <option value="classical" >Classical</option> <option value="alternative" >Alternative</option> <option value="oldies" >Oldies</option> <option value="techno" >Techno</option> </select> <input type="submit" value="Email Yourself"> </form> Selection Forms: Musical Taste þÿ Email Yourself HTML Upload Forms First of all. a highlighted selection list. . An upload form consists of three basic parts.

Another attribute to be aware of is the wrap. The words come as they are. Rows are roughly 12pixels high. the web host. • wrap= o o o "off" "virtual" "physical" Virtual means that the viewer will see the words wrapping as they type their comments. and the viewer including any page breaks and additional spaces that may be inputed. the same as in word programs and the value of the columns reflects how many characters wide the text area will be. Forums and the like use text areas to post what you type onto their site using scripts.com"> <textarea rows="5" cols="20" wrap="physical" name="comments"> Enter Comments Here </textarea> <input type="submit" value="Email Yourself"> </form> Text Area: . For this form. but when the page is submitted to you. the text area is used as a way to write comments to somebody. HTML Code: <form method="post" action="mailto:youremail@email.e. Wrap has 3 values. turns off word wrapping within the text area. One ongoing line. Off of course. the web host. Rows and columns need to be specified as attributes to the <textarea> tag. i. The example below shows a text area 5 rows tall and 20 characters wide.HTML Code: <input type="hidden" name="MAX_FILE_SIZE" value="100" /> <input name="file" type="file" /> Upload Form: HTML Text Areas Text areas serve as an input field for viewers to place their own comments onto. the document sent will not have wrapping words. Physical means that the text will appear both to you.

com HTML Code: <table border="1"> <tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr> <tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr> </table> Basic Table: Row 1 Cell 1 Row 1 Cell 2 Row 2 Cell 1 Row 2 Cell 2 Content is placed within tables cells. The <table> tag is used to begin a table. Here's how to make a table. Tips • • Remember to set the name and value attributes for your forms so the document created will be neatly organized. Within a table element are the <tr> (table rows) and <td> (table columns) tags. Advertise on Tizag.Enter Comments Here Email Yourself Also note that any text placed between the opening and closing textarea tags will show up inside the text area when the browser views it. Tables are a handy way to create a site's layout. . but after working through this lesson you'll see how they aren't too bad. HTML Tables Tables may seem difficult at first. A table cell is defined by <td> and </td>. Remember to place submit buttons with the form tags to submit the document correctly.The border attribute defines how wide the table's border will be. but it does take some getting used to.

use the <th> tag as shown below. Color has been added to the table to emphasize these attributes. By default these headers are bold to set them apart from the rest of your table's content.255. HTML Code: <table border="1"> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr><td rowspan="2">Row 1 Cell 1</td> <td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr> <tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr> <tr><td colspan="3">Row 3 Cell 1</td></tr> </table> Colspan and Rowspan: Column 1 Column 2 Column 3 Row 1 Cell 2 Row 1 Cell 3 Row 1 Cell 1 Row 2 Cell 2 Row 2 Cell 3 Row 3 Cell 1 Cell Padding and Spacing With the cellpadding and cellspacing attributes you will be able to adjust the white space on your tables. while padding represents the distance between cell borders and the content within. Spacing defines the width of the border. Note: if you would like to place headers at the top of your columns.0)"> <tr> <th>Column 1</th> <th>Column 2</th> </tr> <tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr> <tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr> </table> Cellspacing and Padding: .Spanning Multiple Rows and Cells Use rowspan to span multiple rows and colspan to span multiple columns. HTML Code: <table border="1" cellspacing="10" bgcolor="rgb(0.

but if you keep everything organized it will be much easier to manage down the road. For additional . Also. Tips • • • Tables can be given backgrounds using the bgcolor attribute. we suggest you only use it for your page's main background (<body>) and in tables. The examples above show good form for organizing the table code.Column 1 Row 1 Cell 1 Row 2 Cell 1 Column 2 Row 1 Cell 2 Row 2 Cell 2 And now we will change the cellpadding of the table and remove the cellspacing from the previous example. Bgcolor can be placed within several of the HTML tags.255. HTML Color . It may seem a bit complicated. However.0)"> <tr> <th>Column 1</th> <th>Column 2</th> </tr> <tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr> <tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr> </table> Cell Pads: Column 1 Row 1 Cell 1 Row 2 Cell 1 Column 2 Row 1 Cell 2 Row 2 Cell 2 The value you specify for padding and spacing is interpreted by the browser as a pixel value you. HTML Code: <table border="1" cellpadding="10" bgcolor="rgb(0. Most attributes that use numeric values for their measurements use pixels. The <tr> tag must always be placed before the <td> tag. So a value of 10 is simply 10 pixels wide. you can also give separate backgrounds to <td> and <tr> tags. be aware that backgrounds are not limited to the <table> tag.bgcolor The bgcolor attribute is used to control the background of an HTML elmement. specifically page and table backgrounds.

A red colored table background using hexadecimal values "#FF0000".</td> </tr></table> <table bgcolor="rgb(0. check out CSS Backgrounds. The body tag is where you change the pages background. Just use the bgcolor attribute in the <body> tag and you are golden.</p> </body> Paragraph Bgcolor: We set the background of this paragraph to be silver.. . here is how to change the background of your web page.</td> </tr></table> <table bgcolor="#ff0000" border="1"><tr> <td>A red colored table background using hexadecimal values "#FF0000". 255)". HTML Code: <table bgcolor="lime" border="1"><tr> <td>A lime colored table background using color names. 255)". Now continue the lesson to learn more about adding background colors in your HTML! Adding Color to Your Tables This example shows how to add a background color for an entire table using generic values of color.. HTML Code: <body bgcolor="Silver"> <p>We set the background. 0. 0.com Syntax <TAGNAME bgcolor="value"> Quick and dirty. 0. 255)" border="1"><tr> <td>A blue colored table background using RGB values "rgb(0.background styling. The HTML to change the background color is simple: Advertise on Tizag. A blue colored table background using RGB values "rgb(0.</td> </tr></table> Table Bgcolors: A lime colored table background using color names.

Verdana" size="4" color="#00FF00"> .Adding Color to Table Rows & Columns Here's a few common examples of "bgcolor" and font color HTML Code: <table> <tr bgcolor="#FFFF00"><td>This <tr bgcolor="#AAAAAA"><td>This <tr bgcolor="#FFFF00"><td>This <tr bgcolor="#AAAAAA"><td>This <tr bgcolor="#FFFF00"><td>This <tr bgcolor="#AAAAAA"><td>This </table> Row Row Row Row Row Row is is is is is is Yellow!</td></tr> Gray!</td></tr> Yellow!</td></tr> Gray!</td></tr> Yellow!</td></tr> Gray!</td></tr> Alternating Colors: This Row is Yellow! This Row is Gray! This Row is Yellow! This Row is Gray! This Row is Yellow! This Row is Gray! Background Color and Font Color Together! Check out this "Scoreboard" we made with the use of font color and bgcolor! HTML Code: <table bgcolor="#000000"> <tr><td bgcolor="#009900"> <font color="#FFFF00" align="right">Green Bay</font></td> <td><font color="#FFFFFF">13</font></td></tr> <tr><td bgcolor="#0000FF"> <font color="#DDDDDD" align="right">New England</font></td> <td><font color="#FFFFFF">27</font></td></tr> </table> Scoreboard: Green Bay 13 New England 27 HTML Code: <table bgcolor="#777777"> <tr><td> <p><font face="Monotype Corsiva.

The colors are made out of hex-pairs for red. we use the background attribute as follows. Both fonts are widely accepted as standard fonts. paragraphs.com/pics/htmlT/background. Remember that black is NO color at all (a blank screen). Shades of gray occur when the 3 paired amounts of each color are equal.. To accomplish this. white is all the colors of light. or Verdana as the backup. Examples: #99FFCC. "#333333. #33AA44.This paragraph tag has. "rgb(100. headache-causing color schemes! Keep your coloring distinct and purposeful. and bodys may all have a background image. </font></p> </td></tr> </table> Colored Paragraph: This paragraph tag has a gray background with green colored font. Example. and green. Advertise on Tizag. You should see Monotype Corsiva font if you have it installed.100)". blue.100." "#0A0A0A" Avoid bright. Which is the oposite when dealing with pigments of color on paper. There's 216 "true colors" with hexidecimal. Tips • • • • • If you are new to HTML consider sticking with color names for setting your background color. Tables.Background Repeat .Background Images can be placed within elements of HTML.com HTML Code: <table height="100" width="150" background="http://www..tizag. HTML .jpg" > <tr><td>This table has a background image</td></tr> </table> Background Image: This table has a background image HTML .

In an image editing program such as Adobe Photosop.com/pics/htmlT/background.com/pics/htmlT/pattern. we can use this default attribute to our benefit say if we wanted to have some sort of pattern as our background. 4x4 Image: Now here is the same image set as the background to our same table. . We either need to find an image to fit exactly as our background or have an image editing program to adjust the dimensions of our image.jpg" > <tr><td>This table has a background patterned image</td></tr> </table> Pattern: This table has a background patterned image This technique is definitely one for the pros. HTML Code: <table height="200" width="300" background="http://www. however.tizag.Patterned Backgrounds Repeating a generic image as a background doesn't have much practical use. it can also be quite useful as you will see in the following example. HTML .jpg" > <tr><td>This table has a background image</td></tr> </table> Repeating Background: This table has a background image It is obvious this is often not the desired outcome. the image simply begins to repeat itself.tizag. or Paint Shop Pro. Everything looks great. When your HTML element is larger than the dimensions of your picture.In the first example we happen to be lucky because our image and our table had exactly the same size pixel dimensions. From a different angle. we could create a very small (perhaps 4X4 pixels) and create a couple of basic patterns. HTML Code: <table height="100" width="150" background="http://www.

We're not going to cover how to do this with every single program. The hexadecimal value that you see displayed in each box represents the value to get the background color of that cell.gif" > <tr><td>This table has a red transparent background image</td></tr> </table> Transparent: This table has a red transparent background image Tips • • When creating patterns or transparent gifs. tinker. and all systems should be go. and fiddle around with your backgrounds to come up with something enjoyable to look at.Transparent Background Another great techinique. use the smallest dimensions possible even as small as 1x1 if you can. however. Then make sure you save your file as a gif not a jpeg. Now that you have had the crash course on creating transparent files. #000000 #003300 #006600 #009900 #000033 #003333 #006633 #009933 #000066 #003366 #006666 #009966 #000099 #003399 #006699 #009999 #0000CC #0033CC #0066CC #0099CC #0000FF #0033FF #0066FF #0099FF #00CC00 #00CC33 #00CC66 #00CC99 #00CCCC #00CCFF #00FF00 #00FF33 #00FF66 #00FF99 #00FFCC #00FFFF .com/pics/htmlT/transparent. Be creative. you place them onto your websites the exact same way as you would a repeating background. Experiment. check out our HTML Background Color lesson. Most image editors have some sort of transparency device to create images that appear see through. HTML Code: <table background="http://www.HTML . HTML Color Chart Below is the hexadecimal representation for an array of HTML background colors. Larger files load slow and inhibit the load time of your sites. most of the time all you need to do is fill your canvas with the color you would like and then set the opacity to something below 100%. colored backgrounds.tizag. along the same lines as the patterned images. is that of transparent. If you would like more information about using HTML color.

#330000 #333300 #336600 #339900 #330033 #333333 #336633 #339933 #330066 #333366 #336666 #339966 #330099 #333399 #336699 #339999 #3300CC #3333CC #3366CC #3399CC #3300FF #3333FF #3366FF #3399FF #33CC00 #33CC33 #33CC66 #33CC99 #33CCCC #33CCFF #33FF00 #33FF33 #33FF66 #33FF99 #33FFCC #33FFFF #660000 #663300 #666600 #669900 #660033 #663333 #666633 #669933 #660066 #663366 #666666 #669966 #660099 #663399 #666699 #669999 #6600CC #6633CC #6666CC #6699CC #6600FF #6633FF #6666FF #6699FF #66CC00 #66CC33 #66CC66 #66CC99 #66CCCC #66CCFF #66FF00 #66FF33 #66FF66 #66FF99 #66FFCC #66FFFF #990000 #993300 #996600 #999900 #990033 #993333 #996633 #999933 #990066 #993366 #996666 #999966 #990099 #993399 #996699 #999999 #9900CC #9933CC #9966CC #9999CC #9900FF #9933FF #9966FF #9999FF #99CC00 #99CC33 #99CC66 #99CC99 #99CCCC #99CCFF #99FF00 #99FF33 #99FF66 #99FF99 #99FFCC #99FFFF #CC0000 #CC0033 #CC0066 #CC0099 #CC00CC #CC00FF #CC3300 #CC3333 #CC3366 #CC3399 #CC33CC #CC33FF #CC6600 #CC6633 #CC6666 #CC6699 #CC66CC #CC66FF #CC9900 #CC9933 #CC9966 #CC9999 #CC99CC #CC99FF #CCCC00 #CCCC33 #CCCC66 #CCCC99 #CCCCCC #CCCCFF #CCFF00 #CCFF33 #CCFF66 #CCFF99 #CCFFCC #CCFFFF #FF0000 #FF0033 #FF0066 #FF0099 #FF00CC #FF00FF #FF3300 #FF3333 #FF3366 #FF3399 #FF33CC #FF33FF #FF6600 #FF6633 #FF6666 #FF6699 #FF66CC #FF66FF .

Here is a classic example of a basic "index" frameset with a menu on the left and content on the right.html" because that is typically a site's main page. which means the content (the 2nd column) will use the remaining width for itself. A good rule of thumb is to call the page which contains this frame information "index. In the above example we chose the menu (the 1st column) to be 30% of the total page and used a "*". read on. When someone clicks a link on the menu that web page is then opened on the content page. and content in another frame. frames have become outdated. . but rather tells the browser which web pages you would like to open. With the addition of CSS and PHP. *".html"> </frameset> </html> Frame Set: Here's the example: Frame Index • • • frameset . frame src="" -The location of the web page to load into the frame.*"> <frame src="menu. Individual frames are defined inside it. Advertise on Tizag.#FF9900 #FF9933 #FF9966 #FF9999 #FF99CC #FF99FF #FFCC00 #FFCC33 #FFCC66 #FFCC99 #FFCCCC #FFCCFF #FFFF00 #FFFF33 #FFFF66 #FFFF99 #FFFFCC #FFFFFF HTML Frames Frames allow for multiple ". frameset cols="#%.html" documents to be displayed inside of one browser window at a time.html"> <frame src="content. This means that one page has no content on it.A Generic Frame Page Frames are most typically used to have a menu in one frame.Cols(columns) defines the width that each frame will have. but if you wish to use them.The parent tag that defines the characteristics of this frames page. HTML Code: <html> <head> </head> <frameset cols="30%.com Frames .

It is possible to remove these and manipulate the spacing between frames with frameborder and framespacing.*"> <frame src="title.Adding a Banner or Title Frame Add a row to the top for a title and graphics with the code as follows: HTML Code: <html><head></head> <frameset rows="20%. but some browsers only recognize one or the other. Note: Framespacing and border are the same attribute.html"> <frameset border="0" frameborder="0" framespacing="0" cols="30%. used by Internet Explorer. framespacing="#" -Modifies the border width. used by Netscape. with the same value.rows defines the height that each frame will have.Modifies the border width.html"> <frame src="content. which means that menu and content (which are the 2nd row) will use the remaining height. to be safe.*"> <frame src="title. These attributes appear within the frameset tag.html"> <frameset cols="30%. HTML Code: <html><head></head> <frameset border="0" frameborder="0" framespacing="0" rows="20%.html"> </frameset> </html> Frame Borders: Here's a visual:Visual . • • • frameborder="#" .html"> </frameset> </html> frameset rows="#%.*"> <frame src="menu. so use both.*"> <frame src="menu. border="#".html"> <frame src="content.A zero value shows no "window" border. FrameBorder and FrameSpacing You probably noticed those ugly gray lines that appear between the frames. In the above example we chose the new title (the 1st row) to be 20% of the total page height and used a "*". *". Here's an example of the same frameset without the borders.

.html"> <name="content" src="content.*"> <frame src="menu. HTML Code: <html><head></head> <frameset border="2" frameborder="1" framespacing="2" rows="20%.html to point to that frame. </html> Frame Target: Here's the Visual: Visual We first named the content frame "content" on our frame page and then we set the base target inside menu.html"> </frameset> </html> HTML Code: <html> <head> <base target="content"> </head> . HTML Code: <html><head></head> <frameset rows="20%. Our frame page is now a perfectly functional menu & content layout! Noresize and Scrolling It's possible to further customize the <frame> tag using the noresize and scrolling="" attributes.html" noresize scrolling="no"> <frameset border="4" frameborder="1" framespacing="4" cols="30%.Frame Name and Frame Target How nice would it be to make each menu link load into the content page? We do this by naming each frame and setting the correct base target inside menu.*"> <frame src="title.*"> <frame name="menu" src="menu.html" scrolling="auto" noresize> <frame src="content.html" scrolling="yes" noresize> </frameset> </html> ..html.*"> <frame name="title" src="title.html"> <frameset cols="30%.

scrolling="(yes/no)". the black one.Layout HTML layout is very basic.Noresize and Scrolling: Here's the Visual: Visual • • noresize .Allow scrolling or not inside a frame. Any element may be placed inside of a table including tables themselves.html file and be done with it! HTML . HTML . you could simply update the menu. Using a simple menu/content frame design can reduce updates to massive sites.Standard Layout . because it does not make sense to have a scrollbar appear in the title frame. Not many options exist with the body tag alone. they are usually viewed as unacceptable by most web designers. We set the scrolling for our content frame to yes to ensure our visitors will be able to scroll if the content goes off the screen. Instead of updating the menu on each page. Always set the scrolling and resize options to optimize loadtime. We also set the scrolling for our title banner to no. Tips • • • Frames can be simple and well organized.Do not let the frames be resized by the visitor. Tables on the other hand are the bread and butter of HTML layouts. However. A light bulb should be going off inside of your head as you explore how this system will allow for the creation of limitless layouts. HTML Code: <table id="shell" bgcolor="black" border="1" heigh="200" width="300"> <tr><td> <table id="inner" bgcolor="white" heigh="100" width="100"> <tr><td>Tables inside tables!</td></tr> </table> </td></tr></table> Tables inside tables: Tables inside tables! The white table (identified as inner) exists inside of the (shell) table.

These are the backbone to any great website. Often times websites become too complex for the viewer to follow. HTML Code: <table cellspacing="1" cellpadding="0" border="0" bgcolor="black" id="shell" height="250" width="400"> <tr height="50"><td colspan="2" bgcolor="white"> <table title="Banner" id="banner" border="0"> <tr><td>Place a banner here</td></tr> </table> </td></tr> <tr height="200"><td bgcolor="white"> <table id="navigation" title="Navigation" border="0"> <tr><td>Links!</td></tr> <tr><td>Links!</td></tr> <tr><td>Links!</td></tr> </table> </td><td bgcolor="white"> <table title="Content" id="content" border="0"> <tr><td>Content goes here</td></tr> </table> </td></tr></table> Basic Layout: Place a banner here Content goes here Links! Links! Links! This approach is basic yet organized. The code becomes complex rather fast. and your content or display box. you will need to be sure to properly assign height and width values to your tables as well.A fairly standard layout consists of a banner near the top. navigation. The more specific you are about heights and widths. HTML Code: <table id="shell" title="Shell" height="250" width="400" border="0" bgcolor="black" cellspacing="1" cellpadding="0"> <tr height="50"><td bgcolor="white"> <table title="banner" id="banner"> <tr><td>Banner goes here</td></tr> </table> . the less debugging you will have to perform.

HTML .</td></tr> <tr height="25"><td bgcolor="white"> <table title="Navigation" id="navigation"> <tr><td>Links!</td> <td>Links!</td> <td>Links!</td></tr> </table> </td></tr> <tr><td bgcolor="white"> <table title="Content" id="content"> <tr><td>Content goes here</td></tr> </table> </td></tr></table> Basic Layout 2: Banner goes here Links! Links! Links! Content goes here The code is quite a lot to look at. .Comments --> A comment is a way for you as the web page developer to control what lines of code are to be ignored by the web browser. Advertise on Tizag. Use cellspacing to add usable borders to your content. Be creative yet organized. Use the align and valign (vertical align) attributes to align your navigation and content.<!-. break it up and organize it in your own way to make things easier for you.com There are three main reasons you may want your code to be ignored. keep an organized spacing system so it becomes easy to spot where one table ends and the other beings. Tips • • • • Your code can become quite complicated rather fast. Keep things neat. Scripting languages such as Javascript require some commenting. • • • Writing notes or reminders to yourself inside your actual HTML documents. Temporarily commenting out elements especially if the element has been left unfinished.

jpg" height="100" width="200" /> Comment to self: As you can see comment syntax may be a little complicated.Use the last example place text inside your code and documents that the web browser will ignore.Commenting Existing Code --> As a web developer often times you may have many works in progress. This is a great way to place little notes to yourself or to remind yourself what pieces of code are doing what.Opening Comment -.> Closing Comment Placing notes and reminders to yourself is a great way to remember your thoughts and to keep track elements embedded in your webpages. or elements that aren't quite finished. there is an opening and a closing much like tags.tizag. HTML . In this case you may comment out an element until it is 100% ready for the site. • • <!-. this includes any HTML tags.<!-. HTML Code: <!--Note to self: This is my banner image! Don't forget --> <img src="http://www.Input Field --> Now when we are ready to display that element.com/pics/tizagSugar. Below we have commented out an input form element since we are not quite ready to receive input from our users. these notes to yourself are a great way to remember what was going on as you may not remember 5 or more years down the road. Also. HTML Code: <!-. HTML Code: . All combinations of text placed within the comment tags will be ignored by the web browser. your code may exist for many years.<input type="text" size="12" /> -. scripting language(s). etc. we can simply remove the comment tags and our browser will readily display the element.

only then does the browser correctly execute the scripts.<!-. A few years back. They are a very useful tool for any large project. Commenting out elements is a great technique to pick up from where you left off in your code. allow your site to be included in their search engine. meta tags were a primary way for your site to be recognized by web spiders. Keywords Meta Tag Keywords or phrases are placed in this meta tag's content attribute. Nothing is more frustrating than deleting bits of code only to turn around and recode them. . Tips • • Make notes often and frequently. You will learn that once they are placed within the <script> tags. Nevertheless. HTML . but the internet community abused the meta tags to artificially increase their ranking in the search engine databases.<input type="text" size="12" /> Input Field: þÿ Comment out elements and bits of code that you may want to recall and use at a later date. you may want to look back and edit your code 5 years from now. you should still include meta for those search bots that do recognize them. HTML Code: <script> <!-document.write("Hello World!") //--> </script> With this example we are jumping far ahead. HTML Meta Tags Meta tags are used to supply information for search engines that will not be seen by the web surfer unless they were to view your web site's HTML. just be sure you understand when to use comments and where to look for them.Commenting Scripts --> Scripting languages such as Javascript and VBScript must be commented out as well. You should specify the most popular search terms you believe someone would use to reach your web site. In the past.

HTML Code: <head> <meta name="keywords" content="keyword. Be careful. HTML Code: <head> <meta name="revised" content="Happy New Year: 1/1/2003" /> </head> Refresh Page and Redirect . and they should be. Revised Meta Tag The revised meta tag records when the last update was done to the site.you could spam this meta tag with any and every keyword possible to gain ranking on search engines. Your description should be a sentence or two about your web site. Repeated words. tizag" /> </head> Description Meta Tag As you might have guessed.com would be as follows. HTML Code: <head> <meta name="keywords" content="HTML. As mentioned above if they do not match. or words that do not pertain to the content of the site will not benefit you or those using a search engine. Here's an example of proper usage for a site. HTML Code: <head> <meta name="description" content="Tizag contains webmaster tutorials. this tag will show a brief description of the web page to a search engine. CSS. XHTML. An example of the keywords meta tag for Tizag." /> </head> Description and Keywords tags are very similar. etc" /> </head> name defines what type of meta tag being used. tutorials. Note that the keywords are separated by commas. Keywords that appeared in the keyword meta tag should appear here as well. you may be ignored or blocked by some search engines. key keywords.

com after being at your site for five seconds. or even validate your HTML form's data before you let the user submit. . url=http://www.espn. If your domain (. or any other time-sensitive information. stocks. This code will send your visitors to espn. of course!). make image rollovers for really cool menu effects. remember to place a simple "Our site has moved" message as the existing domain. just change the URL to the new site as shown below. url=http://www. A common reason might be that you have just purchased a better domain name and would like to retain your old visitors. HTML javascript and HTML vbscript are very useful scripting languages to know. It may be simpler just to download someone elses scripting code and use it on your web page (if they have given you permission to do so. javascript and vbscript are very complicated compared to HTML.com" /> </head> Tips • • • Its important not to repeat words in the description or keywords meta tags Meta is not the only way to have your site seen by search engines. you may need to redirect traffic to another domain.tizag. if you have the time.com) ever changes. however. and then use a redirect meta tag to make life easier for your viewers that already may have your site bookmarked.com With HTML scripts you can create dynamic web pages.com" /> </head> Above shows refreshing Tizag's home page every 10 seconds. A quick refresh may be necessary for news. is redirection. However. HTML Scripts There are two very popular scripts that are commonly used in HTML to make web pages come alive.Later down the road. Advertise on Tizag. The most common use for this type of meta tag. Do not rely on meta tags alone to get your web site listed on search engines. To redirect a viewer automatically. With the refresh meta tag you will be able to redirect visitors to the web site of your choice. HTML Code: <head> <meta http-equiv="refresh" content="10. yet still use your new domain. HTML Code: <head> <meta http-equiv="refresh" content="5.

I am glad to announce that this is a problem of the past and you will have a much easier time then webmasters of the past. HTML Music Codes Inserting music onto a web page is relatively easy. which is similar to specifying CSS. This will prevent browsers that do not support javascript or have had javascript disabled from displaying the javascript code in the web browser. Below is the correct code to insert vbscript code onto your site.com HTML Embed . check out our Javascript Tutorial. However. Below is the correct code to insert embedded javascript code onto your site.HTML Javascript Code If you want to insert javascript code into your HTML you are going to use the script tag. If you would like to know more about javascript. We also include a comment around the vbscript code. HTML Vbscript How To To insert vbscript code onto your website you must once again make use of the script tag. This will prevent browsers that do not support vbscript or have had vbscript disabled from displaying the vbscript code in the web browser. We also include a comment around the javascript code. which is similar to the process of specifying CSS. HTML Code: <script type="text/javascript"> <!--script ***Some javascript code should go here*** --> </script> For javascript you set the type attribute equal to "text/javascript". HTML Code: <script type="text/vbscript"> <!--script ***The vbscript code should go in this spot*** --> </script> For vbscript you set the type attribute equal to "text/vbscript". Advertise on Tizag. In the past multiple tags had to be used because browsers did not have a uniform standard for defining embedded media files.

To stop the music press stop/pause. To make your embedded player display properly change the attributes associated with display.Related to Functionality To customize the functionality of the embedded media player be sure to set the following attributes.if this value is true then the media player will not be displayed.the height of the media player hidden . but embed is now considered the standard for inserting media.Music is inserted onto a web page with the use of the embed tag. There are other ways to link to music. HTML Code: <embed src="beethoven.choose if the media file will start automatically loop . height . • • • autostart . Embed Attributes . Below is an minimalist example of the embed tag using the src attribute to define the media file's location.mid" autostart="false" loop="false" volume="60" /> . (Values are true/false) HTML Code: <embed src="beethoven. you do not want to mess with the width and height of the media player as it can cause the media player to look rather distorted.</p> Depending on what kind of media software you or your visitor has installed. HTML Code: <embed src="beethoven. Embed Attributes .Related to Display To customize the appearance of the embedded media player be sure to set the following attributes. We recommend using this attribute only if you know that your visitors will not want the option to stop the music that is playing on your web page.the width of the media player. The range is 0-100.mid" width="360" height="165" /> Embedded Music: Usually.mid" /> <p>Above is an embedded media player.sets the media file to repeat or not volume . the above example will appear slightly different.set the volume of the media file. • • • width .

much like the concept of "thumbnailing" images.Customize Your Code: Controls Attribute The attribute controls sets which controls for the media player will be displayed.choose if the media file will start automatically loop . If done poorly. it works much like the image tag. You may also simply place the URL of your media files into the href attribute of an anchor tag. • • • autostart . users will be annoyed by the music and will leave your web site Only set the hidden attribute if you are certain your visitors will not want to stop the music.sets the media file to repeat or not volume . Tips • • • Be careful when placing music on your web site.com HTML Code: <embed src="http://www. HTML . In fact. The range is 0-100.set the volume of the media file.Video Codes Videos can be embedded into your html documents (web pages) two different ways. If you want your music to play over and over again. Advertise on Tizag. Here is a look at the embed tag with a global URL. HTML Code: .tizag.com/files/html/htmlexample. The embed tag does not require a closing tag.mpeg" autostart="false" /> Mpeg Movie: You may start and stop your movie files by either pressing the buttons at the bottom of the object or by single clicking (stop) on the object and double clicking your mouse (continue/play). then be sure to set the loop attribute to true. One method is to use the <embed /> tag to display your media file. A src attribute must be defined by the correct URL (local or global) in order for the video file to be displayed correctly. feel free to use this URL while you practice.

swf). • • • • • autostart .mov files .swf files . playcount .controls the media's ability to start without prompting. ".set a numeric value for the loudness of your media.<a href="http://www.wmv files . Values are true or false. autostart.swf</a> Flash Media: motiontween1easy. HTML Code: <! -. .com/pics/flash/motiontween1easy.swf HTML .swf"> motiontween1easy.avi).controls whether or not the play/stop/pause embedded object is hidden or not. and loop.set the standard for compression movie files created by the Moving Pictures Expert Group. Google allows you to download and display these movies on any of your own html pages.Embed Attributes Along with the previously discussed src attribute.mpeg files . and MOV's (. At Google Video it is possible to search for any type of movie. HTML . false means no looping.mpeg" files and Macromedia's . Copy this text area to your own HTML pages to embed Google videos onto your own pages. . • • • • . HTML . (Hide your embeded media if you just want background noise). loop . .Google Video HTML Code -.are the file types created by Macromedia's Flash program.swf files are the most compact and widely used among the internet.A true value means the media will continuously loop. hidden. Values are true or false.tizag.Setting a playcount means the media will repeat itself x number of times instead of continuously as with the loop attribute above.Video Media Types Flash movies (. AVI's (. The listings above are the most commonly used formats for the internet.mov) file types are supported by the embed tag.are Apple's Quick Time Movie format. volume . hidden . (0-100). Stick to any of the file types above for use with your web pages. As you search through videos there Google has provided a text area with an embed tag inside of it. there are some unique attributes available to the <embed /> tag including: volume.are Microsoft's Window's Media Video file types.> . (playcount="2" will repeat the video twice).Google Video Google video has recently gained popularity as a source for sharing movies on the internet.

Forms. A unique set of margin attributes are available to the body tag. the body tag serves as the element containing all the content for the website. Tables. Embed Google Video: HTML .com%2Fvideodownload%3Fversion%3D0%26 secureurl%3DvgAAAG7ggqAHSiJjpW0D3w4aYTUFW9M-NghJgbJjy8mhm cEoPD-qcpQj2i1OD9xJ6RseUKhCxEKqxhx0jnEJlzf04o-E7gUJc5z_Ur OEGJAZeqGJwm5u3VIm_6cNAj34Tj_GwI13lu4V8_s49xIsqh8GGFa2yKI pP3DN-u3fZclxMdm3EKZKMqwjROPGPOcl1AMH17kgA5XA503H4WS0Gefm G5TKWrRHsY2d3pOatXR_2IxBzGEIq5p-9ybrmmn_o0zj6g%26sigh%3DP dJGakwLdDs6uXBefAsAxQMQDls%26begin%3D0%26len%3D3569%26doc id%3D8734085858581743191&thumbnailUrl=http%3A%2F%2Fvi deo. right. everything must be placed within the body element to be displayed on your site.End of Google Video HTML Code --> It is a messy code above.google. top.<embed style="width:400px. height:326px. allowing you set a pixel value margin for the left.Body Margins Unique Attributes leftmargin Sets a lefthand margin for your body element. Advertise on Tizag.Body As we mentioned.google. Lists.com HTML . but once you put it into your HTML documents you get a great video clip.video. .com%2FThumbnailServer%3Fapp%3Dvss%26contentid% 3Dbc66969d46ff8d61%26second%3D0%26itag%3Dw320%26urlcreate d%3D1147452288%26sigh%3DhQlKmBGLA2yrYhrTGpU029bCEHA&p layerId=8734085858581743191" allowScriptAccess="sameDomain" quality="best" bgcolor="#ffffff" scale="noScale" wmode="window" salign="TL" FlashVars="playerMode=embedded"> </embed> <! -." id="VideoPlayback" align="middle" type="application/x-shockwave-flash" src="http://video. These attributes work much like those of a word processing program.swf?videoUrl=http%3A% 2F%2Fvp.google. topmargin Sets a margin along the top of your body element. Paragraphs.com/googleplayer.

HTML Code: <body topmargin="50"> <body leftmargin="50"> Margin Examples: Top Margin Left Margin HTML .Base Links Along the same lines.Div Element(s) . HTML .0.0.or bottom of your website.0)" > Setting a baselink is a great way to ensure your viewers will not receive that annoying error message that occurs with broken links. we recommend using Cascading Style Sheets instead. Think of it as a means to set the color of your text 'unless otherwise noted'. HTML Code: <body link="white" vlink="black" > or <body link="rgb(255.0)" > HTML . Basically you set a base color scheme and then you may use other means to modify the text color as needed in your site.255)" vlink="rgb(0. This method has deprecated. we may also specify base colors for visted or unvisted links.Base Text The text attribute sets the text color of all text contained within the body tags.255. HTML Code: <body text="red" > or <body text="rgb(255. Setting these attributes means that all the content you place within your body tags will honor the preset margin.

A table layout. we have included the style attribute in order to color our div tag in order to bring a stronger visualization for our viewers. web creators only had two choices. since a div can contain any/every other type of html element within its beginning and ending tag.com • • • • • id width height title style For the purpose of this example. anything else should be reserved for CSS.</p> .com">Google</a> </div> </body> HTML Div Element: SEARCH LINKS Google Above is a great visual about how a div plays the role of a container for other HTML elements. applying a background color/image is the only real way to visualize your div tags.The <div> tag is nothing more than a container for other tags. Use only the following attributes with your div element.Div Layouts When HTML first began. The div element provides a 3rd alternative. Much like the body tag. (CSS Tutorial) Advertise on Tizag.google. Div elements are block elements and work behind the scenes grouping other tags together. HTML . or frames. HTML Code: <body> <div style="background: green"> <h5 >SEARCH LINKS</h5> <a target="_blank" href="http://www. HTML Code: <div id="menu" align="right" > <a href="">HOME</a> | <a href="">CONTACT</a> | <a href="">ABOUT</a> </div> <div id="content" align="left" bgcolor="white"> <h5>Content Articles</h5> <p>This paragraph would be your content paragraph with all of your readable material.

and another article of content below the existing content. Tips • Use CSS Positioning with divs and code like a pro! HTML . Let's add a "LINKS" page to our menu.</div> HTML Div Layout: HOME | CONTACT | ABOUT Content Articles This paragraph would be your content paragraph with all of your readable material.</p> </div> HTML Div Layout II: HOME | CONTACT | ABOUT | LINKS Content Articles This paragraph would be your content paragraph with all of your readable material.Bold . adding more content or more links to our previous example might demonstrates why a div is simpler to work with. Advanced web developers find div elements to be far easier to work with than tables.</p> <h5 >Content Article Number Two</h5> <p>Here's another content article right here. Content Article Number Two Here's another content article right here. HTML Code: <div id="menu" align="right" > <a href="">HOME</a> | <a href="">CONTACT</a> | <a href="">ABOUT</a> | <a href="">LINKS</a> </div> <div id="content" align="left" > <h5>Content Articles</h5> <p>This paragraph would be your content paragraph with all of your readable material.

Advertise on Tizag. HTML Code: <p><b>Cardio:</b> Latin word meaning of the heart. It is not a good idea to bold entire paragraphs or other elements simply because you want the text to be larger or fatter. Rather. The idea here is to use the bold tag in quick formatting situations. Use Cascading Style Sheets for font styles and sizes. HTML .com HTML Code: <b>This text is entirely BOLD!</b> Bold: This text is entirely BOLD! Place the bold tag inside other elements to highlight important words and give feeling to your text.Creating bold text can be accomplished through the use of the <b> bold tag. HTML Code: <p><b>Don't</b> touch that!</p> More Bold: Don't touch that! You may also use it to separate words from their meaning in a dictionary fashion. use them to emphasize text or words.com HTML Code: Italic <i>tag</i>! .</p> Dictionary: Cardio: Latin word meaning of the heart.Italic(s) The italics tags should be used to highlight a key word or phrase. Advertise on Tizag. These tags are not intended to to stylize or shape your font face.

HTML Code: <p>Phillip M. They are short and sweet. HTML Code: <b>HTML</b> <i>Hyper Text Markup Language</i> or <b>HTML</b> <em>Hyper Text Markup Language</em> HTML Dictionary: HTML Hyper Text Markup Language or HTML Hyper Text Markup Language As you can see. The two commonly used tags to place italics onto a website are <em> and <i>. HTML Bold and Italics Both the <b> and the <i> tags can be placed within other elements to format your texts. They can also be used together to bold and italisize words or phrases. Nothing fancy here.<em>Emphasized</em> Text! Create a <blockquote>blockquote</blockquote>! Format your <address>addresses</address>! HTML Italics: Italic tag! Emphasized Text! Create a blockquote! Format your addresses! Each of the above tags is generally interpretted by the browser in a similar way. Rogerson <b><i>MD</i></b></p> Display: . the output is the same regardless of what tag we used to emphasize our definitions. just be sure you open and close the tags in the same order.

Tips • The best advice is just to keep things simply and avoid going overboard with these tags. . and letter spacing to give the text the feel of being computer code. HTML . This simply changes the font face. As you can see.com You may have noticed that nearly all of our examples thus far use the computer code tag when displaying each HTML Code example. but the tag exists if you so desire. we will discuss <a href="" target="_blank" title="Tizag Links"> <b><i>HTML Links</i></b> </a> in a later lesson.Code <code> The code tag allows you to specify some of your text as computer code. HTML Code: This text has been formatted to be computer <code>code</code>! Computer Code: This text has been formatted to be computer code! Use this tag to separate any computer code you wish to display on your website. HTML Code: <p>Include several external links throughout your texts as references to your viewers.</p> Format Links: Include several external links throughout your texts as references to your viewers. Be assured that once you learn Cascading Style Sheets the code will become simpler. Advertise on Tizag. we will discuss HTML Links in a later lesson. It is not always necessary. Rogerson MD This is brilliant when placing text links directly inside your paragraphs as a reference to the user. size.Phillip M. the code becomes quite complex as you begin to place more and more tags on the board.

But I love you! </pre> Preformatted Text: . Violets are blue. Advertise on Tizag. Sure. you may have tabs and line breaks in notepad aligning your content so it is easier to read for you the web master your browser ignores those tabs and line breaks. and line breaks that exist in your actual code will be preserved with the pre tag. HTML Code: <pre> Roses are Red.com" target="_blank"> <code>Google</code> </a> for anything you wish to find on the internet. One simple solution might be to use the <pre> tag.<pre> Preformatting A web browser interprets your html document as being one long line. I may sound crazy. and absolutely annoying at times. This tag provides a very quick way to accomplish this. tabs. Spaces. HTML Code: <p>Feel free to search <a href="http://www.com We showed you one way to get around this by using the ltbr /> tag.google. Use the <pre> tag for any special circumstances where you wish to have the text appear exactly as it is typed. Tabs and spacing are quite different. Tips • It is not a good idea to use this tag to format large pieces of text.</p> Code Links: Feel free to search Google for anything you wish to find on the internet.HTML . Often times you will lose track of the tags and debugging can be tedious.Code Links Another use may be to separate links on your page and give them a unique look. standing for previously formatted text. HTML .

superscripting directs your attention to the bottom of the page. HTML Code: 2<sup>3</sup> = 8 14<sup>x</sup> Exponents: 23 = 8 14x HTML . HTML Code: <p>"It was a lover's tryst<sup>1</sup>. These footnotes can also be created with the superscript tag. Advertise on Tizag.Roses are Red.<sup> Superscript Superscripted text can be placed onto your website using the <sup> tag. Secret meeting between lovers Footnotes: . But I love you! HTML . Violets are blue.com HTML Code: <p>This text is <sup>superscripted!</sup></p> Superscript: This text is superscripted! HTML . You may id these tags for use with Cascading Style Sheets.Exponents We may use the superscripting technique to express exponential expressions. I may sound crazy.Footnotes You may have come across several texts where a referencing." <hr /> 1.

Strikethrough To place text onto your site that appears to be crossed out. Advertise on Tizag.Water <p>O<sub>2</sub> . Secret meeting between lovers HTML .Oxygen CO2 .Oxygen <p>CO<sub>2</sub> .Chemical Compounds This tag allows for the creation of chemical compounds." 1.Carbon Dioxide Chemical Compounds: H2O . HTML Code: <p>H<sub>2</sub>0 ."It was a lover's tryst1.Subscript Use the subscript tags to place subscripted text onto your websites.com HTML Code: <p>This text is <del>scratched</del> out!</p> Strikethrough: . we use the <del> tag.com HTML Code: <p>This text is <sub>subscripted!</sub></p> Subscripted: This text is subscripted! HTML .Carbon Dioxide HTML .Water O2 . Advertise on Tizag.

This text is out!

HTML - Check Off Tasks
Here's an example of a web developer checking off tasks as they are performed.

HTML Code:
<ol> <li>Clean my room</li> <li><del>Cook Dinner</del></li> <li><del>Wash Dishes</del></li> </ol>

To Do List:
1. Clean my room 2. Cook Dinner 3. Wash Dishes


Place the del tags inside your links or anchor tags for a unique look.

HTML - Input Tags
Input fields come in several flavors including checkboxes, text fields, radios, and form submission buttons. The <input /> tag does not require a closing tag and is thus an "all in one" tag. Advertise on Tizag.com

HTML - The Type Attribute
To specify one type of input tag from another we set the type attribute to one of the following values.
• • • • • •

"text" "password" "checkbox" "radio" "submit" "reset"

HTML - Text Fields and Password Fields

You have seen many of these types of input forms throughout the internet.

HTML Code:
<input type="text" /> <input type="password" />

Text Fields and Passwords:

HTML - Checkboxes
Checkboxes allow the user to select multiple choices for a single question. A type of "check all that apply" question is best answered using a checkbox.

HTML Code:
<input type="checkbox" /> <input type="checkbox" /><input type="checkbox" />


HTML - Radios
Radios are best used in "multiple choice" type quizzes and questionaires. Where the user is only permitted to select one answer to a question.

HTML Code:
<input type="radio" /> <input type="radio" /><input type="radio" />


HTML - Submit Buttons

Setting an input type to "submit" specifies a very unique button. When pressed, the button activates the action of the form whatever that may be. Most often times this is some sort of server side scripting file or a javascript function. Since we are creatting a submission button. We need to introduce a new attribute, the value attribute. Anyword(s) specified as the value will be displayed on our button. Often it is best to stick with "Submit" or "Continue". Boring, yet effective.

HTML Code:
<input type="submit" value="Submit" /> <input type="submit" value="Continue Please!" />

Submit Buttons:
Submit Continue Please!

HTML - Reset Buttons
The final type of input is the reset button. Setting the type to reset will place a button within your form to reset each field when clicked. Users enjoy having a "start over" button such as the reset button in case they begin filling out the wrong information in a major way.

HTML Code:
<input type="reset" value="Reset Fields" /> <input type="reset" value="Start Over" />

Reset Buttons:
Reset Fields Start Over

HTML - User Input
Input from the user is critical to the development of your websites and applications. Without the use of a scipting language such as PHP or Javascript, you will find HTML Input to be very limiting. Our PHP Form Example offers a step by step guide to mastering HTML/PHP forms. Feel free to copy any code you may find useful in that example. The following lessons take a deeper look at each individual type of input field including those not mentioned: textareas, selection forms, and upload forms.

HTML .Text Fields Text fields are small rectangles that allow a user to simply input some text and submit that information to the web server. The default size is around 20 characters long. PERL. always specify a maxlength.Text Field Maxlength Without specifying a maxlength attribute. HTML Code: <input type="text" size="5" maxlength="5" /> <input type="text" size="15" maxlength="15" /> <input type="text" size="25" maxlength="25" /> Maxlength Attribute: . HTML .HTML . HTML Code: <input type="text" size="5" /> <input type="text" size="15" /> <input type="text" size="25" /> Text Fields: þÿ þÿ þÿ Changing the size attribute changes the size of the display of the text field on our site. generally this should match the size of your field. To limit the number of characters a user can type into your fields.Text Field Size We can control the size of the text area by specifying the size attribute. or ASP.com This information is usually then processed through a server side scripting language such as PHP. Advertise on Tizag. The example below provides 3 different sizes for your text fields. the viewer is able to type as many characters as they wish into the text field (even if you specify a size).

Password Fields Password fields are a special type of <input /> tag.þÿ þÿ þÿ HTML .Text Field Value Using the value attribute. or boxes. replacing them with dots. stars. the browser hides the characters being typed. All that we need to do is change the type attribute from text to password. . this will become more useful as you will be able to pre-populate text fields for returning users through the use of session variables. Later on as you develop your skills with a scripting language such as PHP. HTML Code: <input type="text" size="5" maxlength="5" value="55555" /> <input type="text" size="15" maxlength="15" value="Corndog" /> <input type="text" size="25" maxlength="25" value="Tizag Tutorials!" /> Text Field Values: 55555 þÿ þÿ HTML . Also. beaware that these fields are not encrypted and therefore are unsafe. HTML Code: <input type="password" size="5" maxlength="5" /> <input type="password" size="15" maxlength="15" /> <input type="password" size="25" maxlength="25" /> Password Fields: The only difference between these fields and the normal text fields is that when you type into them. we could pre-populate our text fields with some information. Encryption occurs through the use of a scripting language.

HTML Code: <p>Please select every sport that you play.Checkbox Forms Checkboxes are another type of <input /> form.</p> Soccer: <input type="checkbox" checked="yes" name="sports" value="soccer" /> <br /> Football: <input type="checkbox" name="sports" value="football" /> <br /> Baseball: <input type="checkbox" name="sports" value="baseball" /> <br /> Basketball: <input type="checkbox" checked="yes" name="sports" value="basketball" /> Checked Checkboxes: . We set the type attribute to check and we also must set a name and value attribute for them to be at all helpful. Simply set the checked attribute to yes or no.</p> Soccer: <input type="checkbox" name="sports" value="soccer" /><br /> Football: <input type="checkbox" name="sports" value="football" /><br /> Baseball: <input type="checkbox" name="sports" value="baseball" /><br /> Basketball: <input type="checkbox" name="sports" value="basketball" /> Checkboxes: Please select every sport that you play.HTML . HTML Code: <p>Please select every sport that you play. Soccer: Football: Baseball: Basketball: Checkboxes are used for instances where a user may wish to select multiple options. HTML Checkboxes Selected It is possible to precheck the input boxes for your viewers using the checked attribute. a sort of check all that apply question.

In order to achieve this. We can further expand this idea and name two different sets of radios. HTML Code: Italian: <input type="radio" name="food" /> Greek: <input type="radio" name="food" /> Chinese: <input type="radio" name="food" /> Radios: Italian: Greek: Chinese: By naming these three radios "food" they are identified as being related by the browser and we achieve this either or effect (only being able to make one selection). we must properly name each radio button selection accordingly.Please select every sport that you play.Radio Forms Radios are types of input forms that allow a user to pick an either/or type of selection. These types of forms must be named. Soccer: Football: Baseball: Basketball: HTML . HTML Code: Italian: <input type="radio" name="food" /> Greek: <input type="radio" name="food" /> Chinese: <input type="radio" name="food" /> Male: <input type="radio" name="gender" /> Female: <input type="radio" name="gender" /> Multiple Radios: Italian: Greek: Chinese: .

Radio Checked By using the checked attribute. we can tell our form to automatically "check" a default radio. HTML .Male: Female: Here we have two sets of radio selections contained within the same form. HTML Code: Italian: <input type="radio" name="food" checked="yes" /> Greek: <input type="radio" name="food" /> Chinese: <input type="radio" name="food" /> Default Italian: Italian: Greek: Chinese: HTML Code: Italian: <input type="radio" name="food" /> Greek: <input type="radio" name="food" checked="yes" /> Chinese: <input type="radio" name="food" /> Default Greek: Italian: Greek: Chinese: HTML Code: Italian: <input type="radio" name="food" /> Greek: <input type="radio" name="food" /> Chinese: <input type="radio" name="food" checked="yes" /> Default Chinese: .

essays.Italian: Greek: Chinese: HTML . HTML Code: <textarea cols="20" rows="10">Text Area!</textarea> <textarea cols="40" rows="2">Text Area!</textarea> <textarea cols="45" rows="5">Text Area!</textarea> Bigger Text Areas: . Textareas have an opening and a closing tag. Paragraphs. Advertise on Tizag. cols and rows.Text area Cols and Rows Adjusting the size of the appearance of the text area requires two attributes. Use a numeric value for each attribute and the larger the value the larger the field will appear. or memos can by cut and pasted into textareas and submitted. any words placed between them will appear inside your text area.com HTML Code: <textarea>Text Area!</textarea> Default Textarea: Text Area! HTML .Textareas Textareas retrieve "blog" type information from the user.

</textarea> Text Area Wrapping: .Textarea Wrap The wrap attribute refers to how the text reacts when it reaches the end of each row in the text field. Wrapping can be one of three settings: • • • soft hard off Soft forces the words to wrap once inside the text area but when the form is submitted. Hard wraps the words inside the text box and places line breaks at the end of each line so that when the form is submitted it appears exactly as it does in the text box. Since it makes everything nice and easy to read. Off sets a textarea to ignore all wrapping and places the text into one ongoing line. HTML . HTML Code: <textarea cols="20" rows="5" wrap="hard"> As you can see many times word wrapping is often the desired look for your textareas. the words will no longer appear as such (Line breaks will not be added).Text Area! Text Area! Text Area! A text area could take up an entire page if required.

However. Since it makes everything nice and easy to read. </textarea> Read Only Textareas: As you can see many is often the desired lo nice and easy to read Now you may not change the text inside the text area. Since it makes everything nice and easy to read.Textarea Readonly Settting a yes or no value for the readonly attribute determines whether or not a viewer can manipulate the text inside the text field. HTML . </textarea> No Wrapping: As you can see many w rapping is often the everything nice and e HTML . HTML Code: <textarea cols="20" rows="5" wrap="hard" readonly="yes"> As you can see many times word wrapping is often the desired look for your text areas.Disabled . you can still highlight or Ctrl-C and copy the texts.As you can see many w rapping is often the everything nice and e HTML Code: <textarea cols="20" rows="5" wrap="off"> As you can see many times word wrapping is often the desired look for your textareas.

Advertise on Tizag. we can take things one step further by setting the disabled attribute. HTML Code: <input type="hidden" name="MAX_FILE_SIZE" value="500" /> < input type="file" /> Max File Size: .Upload Forms Use an upload form to allow users to upload pictures. Since it makes everything nice and easy to read.com HTML Code: <input type="file" /> Upload Form: Max File Size To limit the size of the file being uploaded and saving you precious webserver space. An upload form is another type of input form. movies. HTML Code: <textarea cols="20" rows="5" wrap="hard" disabled="yes"> As you can see many times word wrapping is often the desired look for your text areas.As the readonly attribute disables text manipulation. This grays out the textarea altogether and inhibits any change in the text as well as text highlighting. We make use of a hidden input field and set a few specific attributes. </textarea> Disabled Textareas: As you can see many is often the desired lo nice and easy to read HTML . simply set the type attribute to file. or even their own webpages.

CO</option> <option>Connecticut -. We can change this using the selected attribute. Advertise on Tizag. HTML .CN</option> </select> Drop Down List: þÿ By default the first coded <option> will be displayed or selected as the default. maybe filling out a personal profile and selecting the state in which you live. You have probably seen them already on the internet. Drop down lists have several options a user can select.The value specified is the maximum allowable KB to be uploaded via this form.CO</option> <option selected="yes">Conneticut -. HTML Code: <select> <option>California -. A value of 100 will allow a file up to 100kb.Selection Forms and Drop Down Lists Drop down lists are the basic selection forms.com HTML Code: <select> <option>California -.CA</option> <option>Colorado -.CA</option> <option>Colorado -. .CN</option> </select> Drop Down List: þÿ HTML .Selection Forms We use the size attribute to break out from the single displayed drop down list.

Selecting Multiples We can further add to our selection forms by adding the multiple attribute.CN</option> </select> Multiple Selections: þÿ Now the user may select any or all states that apply to them. Obviously this attribute does not work with the single drop down lists.CO</option> <option>Connecticut -.Submit Buttons Submission buttons are a type of <input /> tag. Set the type attribute to submit.CA</option> <option>Colorado -. This allows the user to select more than one entry from your selection forms. We learned about the action attribute in our HTML Forms lesson. HTML .CO</option> <option>Connecticut -. HTML Code: <select multiple="yes" size="3"> <option>California -. This creates a special type of button in your forms that will perfom the form's set action.HTML Code: <select size="3"> <option>California -.CN</option> </select> Selection Forms: þÿ HTML .CA</option> <option>Colorado -. HTML Code: <input type="submit" value="Submit" /><br /> <input type="submit" value="Send" /><br /> <input type="submit" value="Submit Form" /><br /> Submit Buttons: .

you can change the email address to your email and then send yourself the results of your form. Another choice may be to set the action to mailto followed by an email address. and the form will be emailed to the specified address. These are handy for very large forms and the user is having difficulty or simply needs to start filling in the form from scratch. Form Submission . The action is always set to a server side scripting file such as a PHP. HTML Reset Buttons Reset buttons exist to reset the fields of your form. it will work great in our example. PERL. This can be changed to any value you wish. HTML Code: <form method="post" action="mailto:youremail@youremail. Advertise on Tizag.Action For a submission button to accomplish anything it must be placed inside of a form tag with an action and a method.com HTML Code: <input type="reset" value="Reset" /> . or ASP file.Submit Send Submit Form Notice that in the above example we also changed what was written on our button using the value attribute.com" > First:<input type="text" name="First" size="12 maxlength="12" /> Last:<input type="text" name="Last" size="24" maxlength="24" /> <input type="submit" value="Send Email" /> </form> Form Action: First: Last: þÿ þÿ Send Email Fill out the above form and as your mail program opens. however for the purpose of this example and to get a feel for form submission. Mailto has been depreciated.

php" method="post"> <input type="text" size="12" maxlength="12" /> <input type="text" size="24" maxlength="24" /> <input type="reset" value="Reset" /> </form> Reset Forms: þÿ þÿ Reset Fill out some information in the field boxes and press reset to experience a reset form! HTML . They need to be placed within a form tag. Use the type attribute to specify a hidden field. In this rare case. HTML Forms has some great examples of how to use the form tag properly. there are a number of uses for them. When dealing with forms you will usually find yourself using some sort of database mechanism: MySQL.com A hidden HTML field is used to pass along variables w/ values from one form to another page without forcing the user to re-enter the information. In any case use hidden forms to pass along information to your database that may have already been received from the user.Hidden Field Hidden fields are not displayed by the browser. Advertise on Tizag. HTML Code: <form action="myphp. HTML Code: . SQL Server. a hidden form field may come in handy.<input type="reset" value="Start Over" /> Reset Button: Reset Start Over HTML Reset in Action To actually make submit and reset buttons function with your other input fields. or maybe justa plain text file.

Our field above is incomplete and pretty much useless as it is. Adding a name and a value attribute will change this. The admin field could be used to check some sort of user level entry of a returning user. Use the id or name attribute to specify a name for your hidden field.<input type="hidden" /> Hidden Fields: There is no display of your hidden field in the box because the browser is told to hide them from view. Use hidden fields when you have variables you want to pass from one form to another without forcing the user to re-type information over and over again. HTML Code: <input type="hidden" id="age" name="age" value="23" /> <input type="hidden" id="DOB" name="DOB" value="01/01/70" /> <input type="hidden" id="admin" name="admin" value="1" /> Above we have demonstrated 3 possible hidden fields that you may want to pass along some form at some point.Name and Value the Fields Naming your fields can be accomplished in two different ways discussed previously. 1 being administrator and 0 being non-administrator access. HTML . . especially if you have any kind of user base where returning users must log in.

Tag Attributes accesskey href name <a> tabindex target type Description Deprecated? Create an Anchor for hyperlink navigation. Page break Yes! and formating tags are still required for proper format. and text between the opening and closing tags. Create a "base" url for all links on the page. Quickly format text to be bold! This can be done using Cascading Style Sheets. If you would like to see additional HTML reference items.5 We are constantly updating this page." It's safe to No! place images. line breaks. common outputs are italics. Click the link on the left side of the chart to see more information and an example of that property. Create an italic address! Simialr to the <I> tag. This allows for the easy translation of languages such as Hebrew or Chinese. manipulating the font-weight to your preference. as well as left and right indents for any of the text placed within this tag. Commonly called just plain "links. Many other tags function inside this element as well. please Contact Us with your request.HTML Reference . and size for the entire page! (Sizes 1-7) Yes! Bidirectional Override. but best used for long addresses. changes the direction of all the text flow from right to left or vice versa. The output of this tag is browser dependent. This tag must be placed between the head element of your code.Version 0. No! <address> nill <b> nill href <base> target color face <basefont> id name size class id <bdo> lang style title <blockquote> nill No! Sets a font face. color. providing many options to No! No! .

customize the text therein. No! The definition part of a definition list. No! Creates "cited" or italic text without paragraph breaks before and after your text. resuming text flow on the next line. alink class background bgcolor id <body> lang link style text title vlink class id <br> style title class dir id <cite> lang style title class dir id <code> lang style title class dir id <dd> lang style title class dir id <del> lang style title Place your content within your "body" tags. No! Strike through text. Quick formate to change the text output to "code" text. however. Allows for No! inline citation of text. Insert a line break. Cite and date the time of deletion if you desire. CSS has made most of the attributes for this tag No! obsolete. browsers continue to recognize them. The resulting text will resemble computer generated code much like a courier font. Yes! .

Create Definition Lists. paragraphs. Create forms to retrieve user input and data. fonts. For example. or sizse. Group together tables. beginning with a bold word followed with a definition in italics. Yes! Change colors.align class dir lang height <div> id nowrap style title valign width class dir id <dl> lang style title class dir id <dt> lang style title class color dir face <font> id lang size style title action class dir id lang <form> method name style target title Divide your content. No! Customize fonts within your HTML document. the word you will be defining. No! . or headings allowing alterations of groups of different tags at once. adding specific styles to specific divisions. No! The definition term of a Definition List. No! changing the language attribute of a <div> tag will alter the language of all tags within the div.

No! Define a frameset and few base properties for the frameset. Run scripts. Using style sheets. Must be placed within frameset tags. No! Specifies the start of an HTML document to a Web Browser. its possible to alter this tag in many ways. Creates a horizontal rule on the page. or link to exterior style sheets here. Most attributes are being replaced by Style Sheets.bordercolor class frameborder height id marginheight marginwidth <frame> name noresize scrolling src style title width border bordercolor cols class <frameset> frameborder framespacing rows style title align class id <h1-7> lang style title valign <head> nill class dir id <hr> lang style title dir <html> lang Set specifics of a frame within a frameset. the base tag for links is No! placed within this element as well. Heading tags automatically place a page break before No! and after the closing and opening tags. place your title. No! Places a heading onto your document. Also. No! .

Input tags are used with forms to retrieve user data. Supported by many browsers. No! iFrames are windowed frames allowing for viewing of multiple HTML documents through No! a single window browser. Supported by numerous browsers.<i> nill align class frameborder height id marginheight marginwidth <iframe> name scrolling src style title valign width align alt border class dir height hspace <img> lang name src style title valign vspace width <input> accesskey class checked dir disabled id lang maxlength name readonly size style tabindex title Use this tag to highlight key words or phrases using italics. Specify using the type attribute. From buttons. Place images onto your website. No! . Use any of the listed attributes and style sheets to perfect the No! output of your image on your site. Works well to quickly format text. or checkboxes. to text fields.

An Ordered List is a numbered list with predefined indents and spacing. this is a way for search engines to pick up your site for others to hit.type value class dir id lang <li> style title type value class dir lang href <link> rel style title type content dir <meta> lang name class dir id <noframes> lang style title class dir id <noscript> lang style title <ol> class dir id lang start style Used to create list items of HTML lists. No! Create Ordered Lists. Must be placed within <ul> or <ol> tags. Keep code neat and clean linking other elements to your site. . Use a seperate link tag for each link No! Place a description and keywords of your site within the head element of your HTML document. No! Link exterior documents to your websight. No! Place text within this tag for browsers that do not support the use of frames. No! Add a line of text for browsers unable to support scripts. within you HTML No! documents.

Must be placed within a "Select" tag. No! Add a subscript to any paragraphs or text No! . Allows for inline text quotation.type title class dir disabled id <option> selected style title value align class id <p> lang style title class dir <pre> id lang style class dir id <q> lang style title class dir disabled id multiple <select> lang name size style tabindex title <sub> class dir Add options to be selected by the viewer with your Select Forms. For example any line breaks Yes! or spaces will be carried to the browser. Display given text exactly the way it appears in the lines of code. Place within a form element to retrieve user input. No! Begins a paragraph placing a line break before No! the beginning tag and after the ending tag. No! Create a selection list to retrieve user input.

WIthin these tags is background where your actual content of the table will be bgcolor placed. No! <td> align Create a table data cell. Tables are the backbone of HTML documents as they provide a coherent method to organize your code and your websight itself.id lang style title class dir id <sup> lang style title align background bgcolor border bordercolor bordercolordark bordercolorlight cellpadding cellspacing class <table> frame height hspace id lang nowrap style title valign vspace width Add superscripted text to your site. No! Create a table for layout or data presentation. border bordercolor bordercolordark bordercolorlight class height hspace id lang nowrap style No! .

capable of retrieving user input via forms. No! Create a title for your site to be displayed in the browser's top heading. No! Create table headers over each of your columns. Compatible in nearly every browser. Each tag defines the start and end of a table row. Placed within the No! "Head" element. No! .title valign vspace width accesskey class cols dir disabled id lang <textarea> name readonly rows style tabindex title wrap align background bgcolor border bordercolor bordercolordark bordercolorlight class colspan <th> height hspace id lang nowrap style title valign vspace width dir <title> lang <tr> align background bgcolor border Creats a field to display codelike text. Very versatile. Automatically bolds your headers and places them in the center of their corresponding cells. Creates a table row for your tables.

No! Create unordered lists (bulleted lists). Compatible with many browsers. No! . Great fast way to plave emphasis on your text.bordercolor bordercolordark bordercolorlight class height hspace id lang nowrap style title valign vspace width class dir id <u> lang style title class dir id <ul> lang style type Underline your text.

You're Reading a Free Preview

/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->