Академический Документы
Профессиональный Документы
Культура Документы
HTML elements exist on many levels. Everything you see in front of you, the paragraph texts, the Tizag banner, and the navigation links on the left are all elements of this web page. An element in HTML is a loose term that describes each individual piece of your web page. An element consists of three basic parts: an opening tag, the element's content, and finally, a closing tag. 1. <p> - opening paragraph tag 2. Ele ment Content - paragraph words 3. </p> - closing tag Every (web)page requires four critical elements: the html, head, title, and body elements.
HTML Code:
<html> </html>
Now save your file by Selecting Menu and then Save. Click on the "Save as Type" drop down box and select the option "All Files". When asked to name your file, name it "index.html", without the quotes. Double check that you did everything correctly and then press save. Now open your file in a new web browser so that you have the ability to refresh your page and see your changes. If you opened up your index.html document, you should be starring at your very first blank (white) web page!
Other elements used for scripting (Javascript) and formatting (CSS) will eventually be introduced and you will have to place them within your head element. For now, your head element will continue to lay empty except for the title element that will be introduced next. Here's a sample of the initial set up.
HTML Code:
<html> <head> </head> </html>
As of yet, we still have nothing happening on the web page. All we have so far is a couple of necessary elements that describe our document to the web browser. Content (stuff you can see) will come later.
HTML Code:
<html> <head> <title>My WebPage!</title> </head> </html>
Save the file and open it in your browser. You should see "My WebPage!" in the upper-left, as the window's title. Name your webpage as you please, just keep in mind, the best titles are brief and descriptive.
HTML Code:
<html> <head> <title>My WebPage!</title> </head>
Tips
With these 4 elements, you now may begin adding content to your site. I'm sure you want to learn some more techniques, though. So please continue on! Review: Elements consist of three parts There are four main elements to every web page Create a primitive Site
HTML Code:
<openingtag>Content</closingtag> <p>A Paragraph Tag</p>
Tags should be lower-case letters if you plan on publishing your work. This is the standard for XHTML and Dynamic HTML. Here's quick look at some HTML tags.
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>
HTML Code:
<br />
To tell the browser we want to place a line break (carriage return) onto the site, it is not necessary to type <br>linebreak</br>. If every line break tag needed all three components as other do, life would become redundant real quick. Instead the better solution was to combine the opening and closing tags into a single format. Other tags have also been modified such as the image tag and input tag.
HTML Code:
<img src="../mypic.jpg" /> -- Image Tag <br /> -- Line Break Tag <input type="text" size="12" /> -- Input Field
Display:
--Line Break--
As you can see from the above image 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. More on attributes in the next lesson.
Tips
A tag consists of an opening tag and a closing tag . Few HTML tags do not require a closing tag. Modify tags with attributes to customize your webpages! Tags depreciate as new web technologies evolve. Now is a good time to start thinking about what type of website you may want to make. It is always easier to make content for a topic or to achieve a goal.
HTML - Attributes
Attributes are used to amplify tags. What we mean by amplify is that when a web browser interprets a tag, it will also search for set attributes and then display the element (tags+attributes) in its entirety. At some point you may want to give your body element a background color or perhaps change the width of a table. All of these things and more can be achieved using Attributes. Many HTML tags have a unique set of their own attributes. 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. Attributes are placed within the opening tag and they fo llow a precise syntax (format).
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 Code:
<input type="text" name="TextField" />
This attribute has no effect on the display of the text field, but behind the scenes it plays a huge identification role.
HTML Code:
<h2 title="Hello There!">Titled Heading Tag</h2>
HTML Code:
<h2 align="center">Centered Heading</h2>
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 bgcolor Options right, left, center top, middle, bottom Function Horizontally aligns tags Vertically aligns tags within an HTML element.
numeric, hexidecimal, RGB values 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.
background URL id class width height title User Defined User Defined Numeric Value Numeric Value User Defined
Tips
Use several different attributes to enhance a tag. Completely customize your site through various tag/attribute combos. Use the title attribute!
HTML Code:
<p>Avoid losing floppy disks with important school...</p> <p>For instance, let's say you had a HUGE school...</p>
HTML Code:
<p align="justify">For instance, let's say you had a HUGE school or work...</p>
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.
Headings 1-6:
Headings
are
great for titles and subtitles
Notice that each heading has a line break before and after each heading display. This is a built in attribute so to speak associated with the heading tag. Each time you place a heading tag, 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.
Essay Walkthrough
Let's tie together headings and paragraphs to form an essay. Copy(Highlight, then Ctrl C) or code the following in the body of your page or a new page. Or make your own essay paragraphs.
HTML Code:
<h1 align="center">Essay Example</h1> <p>Avoid losing floppy disks with important school/work projects...</p> <p>For instance, let's say you had a HUGE school or work project to complete. Off ...</p>
HTML Essay:
Essay Example
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 by now) it is easy. For instance, let's say you had a HUGE schoo l 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.
Tips
Headings have no unique attributes tied to them, just the general align, class, id, etc.
Line Breaks
Line breaks are different then most of the tags we have seen so far. A line break ends the line you are currently on and resumes on the next line. Placing <br /> within the code is the same as pressing the return key in a word processor. Use the <br /> tag within the <p> (paragraph) tag.
HTML Code:
<p> Will Mateson<br /> Box 61<br /> Cleveland, Ohio<br /> </p>
Address:
Will Mateson Box 61 Cleveland, Ohio
We have created a possible address for a letter head. The line break tag will also come in handy toward the end of our letter.
HTML Code:
<p>Sincerely,<br /> <br /> <br /> Kevin Sanders<br /> Vice President</p>
Closing Letter:
Sincerely,
Tips
The line break tag can be placed within other HTML elements such as paragraphs, tables, lists, and headings. Use the line break tag to solve minor formatting issues, save larger page layout issues for tables and the align attribute. Remember that the line break tag does not require a closing tag.
HTML Code::
<hr /> Use <hr /><hr /> Them <hr /> Sparingly <hr />
Display::
Use
Them
Sparingly
Aside from our exaggerated example, the horizontal rule tag can come in handy when publishing work. A table of contents or perhaps a bibliography.
HTML Code:
<hr /> <p>1. "The Hobbit", JRR Tolkein.<br /> 2. "The Fellowship of the Ring" JRR Tolkein.</p>
Biliography:
1. "The Hobbit", JRR Tolkein. 2. "The Fellowship of the Ring" JRR Tolkein.
As you can see, all this tag does is draw a line across your content, and used properly, its results can be outstanding.
HTML Lists
There are 3 different types of lists. A <ol> tag starts an ordered list, <ul> for unordered lists, and <dl> for definition lists. Use the type and start attributes to fine tune your lists accordingly.
<ul> - unordered list; bullets <ol> - ordered list; numbers <dl> - definition list; dictionary
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. Find a Job 2. Get Money 3. Move Out
Start your ordered list on any number besides 1 using the start attribute.
HTML Code:
<h4 align="center">Goals</h4> <ol start="4" > <li>Buy Food</li> <li>Enroll in College</li> <li>Get a Degree</li> </ol>
Nothing fancy here, start simply defines which number to begin numbering with.
HTML Code:
<ol <ol <ol <ol type="a"> type="A"> type="i"> type="I">
iii.
III.
HTML Code:
<h4 align="center">Shopping List</h4> <ul> <li>Milk</li> <li>Toilet Paper</li> <li>Cereal</li> <li>Bread</li> </ul>
Unordered Lists:
Shopping List Milk Toilet Paper Cereal Bread
Here's a look at the other flavors of unordered lists may look like.
HTML Code:
<ul type="square"> <ul type="disc"> <ul type="circle">
type="circle"
o o o o
HTML Code:
<dl> <dt><b>Fromage</b></dt> <dd>French word for cheese.</dd> <dt><b>Voiture</b></dt> <dd>French word for car.</dd> </dt>
HTML Code:
Fromage French word for cheese. Voiture French word for car.
Tips
Use the start and type attributes to customize your lists. It is possible to make lists of lists, which is helpful for creating some items, such as outlines.
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 Tex t An example of subscripted Text An example of struckthrough Text An example of Computer Code Text
All of these tags add a pinch of flavor to paragraph elements. They can be used with any text type element.
Tips
Remember that there is a special form for line breaks and horizontal rule ta gs. Use this page as a reference if you ever need to format your web site's text in the future.
Maroon
Olive
Navy
Teal
My First Hexadecimal:
bgcolor="#RRGGBB"
The following table shows how letters are incorporated into the hexadecimal essentially extending the numbers system to 16 values. Hang in there it all makes sense shortly.
Hexadecimal 0 1 2 3 4 5 6 7 8 9 A B C
So use letters as numbers?We will answer this question as we dive into the converting hexadecimals to regular numbers. Let's have a look at real Hexadecimal.
A Real Hexadecimal:
bgcolor="#FFFFFF"
The letter "F" is the maximum amount we can send each color and as you may deduce, this color (#FFFFFF) represents the color white. A formula exists to calculate the numeric equivalent of a hexadecimal.
Hexadecimal Formula:
(15 * 16) + (15) = 255
The formula is real simple. Take the first value (F) or 15 multiply it by 16 and add it to the second value, 15. The value 255 is the maximum allowed for any primary color. Let's try another one.
Example 2:
bgcolor="#CC7005" CC(RR - Red) (12 * 16) + (12) = 204 70(GG - Green) (7 * 16) + (0) = 112 05(BB - Blue) (0 * 16) + (5) = 5
Hexadecimals are the best choice for compatible web development because of their consistency between browsers. Even the most minor of change in color can throw your entire site out of whack, so be sure to check your site in a number of browsers. If you want to be absolutely sure your colors will not change, use paired hex values for color. Examples: "#0011EE", "#44HHFF", or "#117788". These are called True Colors, since they will stay true in hue from browser to browser.
Font Size
Set the size of your font with size. The range of accepted values is from 1(smallest) to 7(largest).The default size of a font is 3.
HTML Code:
<p> <font size="5">Here is a size 5 font</font> </p>
Font Size:
Font Color
Set the color of your font with color.
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. Be aware that if the user viewing the page doesn't have the font installed, they will not be able to see it. Instead they will default to Times New Roman. An option is to choose a few that are similar in appearance.
HTML Code:
<p> <font face="Bookman Old Style, Book Antiqua, Garamond">This paragraph has had its font...</font> </p>
Font Face:
This paragraph has had its font formatted by the font tag!
HTML Code:
<html> <body> <basefont size="2" color="green"> <p>This paragraph has had its font...</p> <p>This paragraph has had its font...</p> <p>This paragraph has had its font...</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, the use of basefont is deprecated, which means it may not be supported sometime in the future. The perfectly correct way to change your sites basefont is to set it with CSS. Check out our CSS Tutorial for more information.
Attribute Review
Attributes:
Attribute= "Value" Description
"rgb,name,or hexidecimal" Change font color "name of font" Change the font type
HTML Code:
<p><font size="7" face="Georgia, Arial" color="maroon">C</font>ustomize your font to achieve a desired look.</p>
Beauty:
Tips
Don't use font tags if at all possible! Use CSS Styles instead! Fonts add character and orginality to sights, so long as they're not overused or unreadable. Use consistant fonts throughout your site. Nobody enjoys sights that are hard to read, keep your fonts legible! Use formatting tags rather than the font tag for bold or italic texts.
Hypertext references can be Internal, Local, or Global. Internal - Links to anchors on the current page Local - Links to other pages within your domain Global - Links to other domains outside of your site
HTML Code:
Internal - href="#anchorname" Local - href="../pics/picturefile.jpg" Global - href="http://www.tizag.com/"
HTML Code:
<a href="http://www.tizag.com/" target="_blank" >Tizag Home</a> <a href="http://www.espn.com/" target="_blank" >ESPN Home</a> <a href="http://www.yahoo.com/" target="_blank" >Yahoo Home</a>
Global Link:
Tizag Home ESPN Home Yahoo Home
HTML Code:
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, cancelling all frames
The example below shows how you would link to ESPN.COM, a popular sports web site. The target attribute is added to allow the browser to open ESPN in a new window, so that the viewer can remain at our web site. Here's the example.
HTML Code:
<a href="http://www.ESPN.com" target="_blank">ESPN.COM</a>
_blank Target:
ESPN.COM
HTML - Anchors
To link to sections of your existing page a name must be given to the anchor. In the example below, we've created a mini Table of Contents for this page. By placing blank anchors just after each heading, and naming them, we can then create reference links to those sections on this page as shown below. First, the headings of this page contain blank, named anchors. They look like this.
Now create the reference links, placing the pound symbol followed by the name of the anchor in the href of the new link.
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:
Go to the Top Learn about Text Links Learn about Email Links
HTML Code:
<a href="mailto:email@tizag.com?subject=Feedback" >Email@tizag.com</a>
Email Links:
Email@tizag.com
In some circumstances it may be necessary to fill in the body of the Email for the user as well.
HTML Code:
<a href="mailto:email@tizag.com?subject=Feedback&body=Sweet site!"> Email@tizag.com</a>
Complete Email:
Email@tizag.com
HTML Code:
<a href="http://www.tizag.com/pics/htmlT/blanktext.zip">Text Document</a>
HTML Code:
<head> <base href="http://www.tizag.com/"> </head>
An entity is a fancy term for a symbol. Several symbols such as copyright, trademark, or foreign cash symbols exist outside of the ones you see on your keyboard. In order to display them. In order to display these characters, you need to know 4 parts. There's three parts to every entity.
HTML Code:
Each begins with a ampersand - &
Copyright:
Combine © to make - - Copyright symbol.
HTML Code:
<p>Everything that goes up, must come down!</p>
Spaces:
Everything that goes up, must come down!
In HTML we use less than and greater than characters to create tags, so to use them on your web site you will need entities.
HTML Code:
<p>
Less than - < <br /> Greater than - > <br /> Body tag - <body> </p>
Take a few minutes to view and play with the symbols listed in the Entities Table.
Paragraph ¶ Middle Dot · Spacing Cedilla ¸ Superscript 1 ¹ Masculine Ordinal Indicator º Fraction ¼ Fraction ½ Fraction ¾ Inverted Question Mark ¿ Grave Accent-Captial A À Acute Accent-Capital A Á Circumflex Accent-Capital A Â Tilde-Capital A Ã Umlaut Mark-Capital A Ä Ring-Capital A Å Capital ae Æ Cedilla-Capital C Ç Grave Accent-Capital E È Acute Accent-Capital E É Circumflex Accent-Capital E Ê Umlaut Mark-Capital E Ë Grave Accent-Capital I Ì Acute Accent-Capital I Í Circumflex Accent-Capital I Î Umlaut Mark-Capital I Ï Capital eth Ð Tilde-Capital N Ñ Grave Accent-Capital O Ò Acute Accent-Capital O Ó Circumflex Accent-Capital O Ô Tilde-Capital O Õ Umlaut Mark-Capital O Ö Multiplication × Slash-Capital O Ø Grave Accent-Capital U Ù Acute Accent-Captital U Ú Circumflex Accent-Capital U Û Umlaut Mark-Capital U Ü
¶ · ¸ ¹ º ¼ ½ ¾ ¿ À Á Â Ã Ä Å Æ Ç È É Ê &Eml; Ì Í Î Ï ∓ETH; ∓Ntilde; Ò Ó Ô Õ %amp;)uml; × Ø Ù Ú Û Ü
Acute Accent-Capital Y Thorn Small Sharp Small ae Small eth Slash-Small o Small Thorn Capital Ligature Small Ligature Modifier Circumflex Accent Small Tilde Zero Width Joiner En Dash Em Dash Left Single Quote Right Single Quote Single Low Quote Left Double Quote Right Double Quote Double Low Quote Dagger Double Dagger Per Mile Left Single Arrow Quote Right Single Arrow Quote Euro Mark TradeMark
Ý Þ ß æ ð ø þ Œ œ ˆ ˜ ‍ – — ‘ ’ ‚ “ ” „ † ‡ ‰ ‹ › € ™
Ý Þ ß æ ð ø þ Œ œ ˆ ˜ ‍ – — ‘ ’ ‚ “ ” „ † ‡ ‰ ‹ › € ™
Tips
Names or Numbers? After looking at our entities table you probably noticed that there is a number value and a name value for each entity. Some older values do not support name values, but it is not likely that someone will run into this problem today. Remember to use the entity code for lt44 and gt44 within your text. Otherwise you might find strange errors occuring all over the place that you can't pinpoint.
HTML Code:
<a href= "mailto:abc@mail.com" >Email Example</a>
Email Link:
Email Example
HTML Code:
<a href= "mailto: a@b.com?subject=Web Page Email&body=This email is from your website" > 2nd Email Example</a>
Complete Email:
HTML - Images
Images are a staple of any web designer, so it is very important that you understand how to use them properly. Use the <img /> tag to place an image on your web page.
HTML Code:
<img src="sunset.gif" />
Image:
URL Types:
Local Src src="sunset.gif" src="../sunset.gif" Location Description picture file resides in same directory as .html file picture file resides in previous directory as .html file
src="../pics/sunset.gif" picture file resides in the pic directory in a previous directory as .html file
A URL cannot contain drive letters, since a src URL is a relational source interpretation based on the location of your .html file and the location of the picture file. Therefore something like src="C:\\www\web\pics\" will not work. Pictures must be uploaded along with your .html file to your web server.
Each method has its pros and cons, 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. Copying the file directly to your web server solves this problem, however, as you continue to upload picture files to your system, you may eventually run short on hard drive space. Use your best judgement to meet your needs.
HTML Code:
<img src="http://example.com/brokenlink/sunset.gif" alt="Beautiful Sunset" />
Alternative Text:
HTML Code:
<img src="sunset.gif" height="50" width="100">
Above we have defined the src, height and width attributes. By informing the browser of the image dimensions it knows to set aside a place for that image. Without defining an image's dimensions your site may load poorly; 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:
<p>This is paragraph 1, yes it is...</p> <p> <img src="sunset.gif" align="right"> The image will appear along the...isn't it? </p> <p>This is the third paragraph that appears...</p>
Images as Links
This will be a quick review of the links - image lesson. Images are very useful for links and can be created with the HTML below.
HTML Code:
<a href="http://www.tizag.com/"> <img src="sunset.gif"> </a>
Image Links:
Now your image will take you to our home page when you click it. Change it to your home page URL.
Thumbnails
Thumbnails are small size (Kilobytes) pictures that link to the larger, high quality picture. To make a thumbnail save a low-quality version of a picture and make it have smaller dimensions. Now make this low-quality picture into an image link and have it point to the the high-quality picture.
HTML Code:
<a href="sunset.gif"> <img src="thmb_sunset.gif"> </a>
Thumbnails:
Tips
Find a good graphics editing program to edit your images with. We recommend starting with Paint Shop Pro. Defining a height and width for your images will allow your page to load gracefully
HTML Forms
Forms are a vital tool for the webmaster to receive information from the web surfer, such as: their name, email address, credit card, etc. A form will take input from the viewer and depending on your needs, you may store that data into a file, place an order, gather user statistics, register the person to your web forum, or maybe subscribe them to your weekly newsletter.
Text Fields
Before we teach you how to make a complete form, let's start out with the basics of forms. Input fields are going to be the meat of your form's sandwich. The <input> has a few attributes that you should be aware of.
type - Determines what kind of input field it will be. Possible choices are text, submit, and password. name - Assigns a name to the given field so that you may reference it later. size - Sets the horizontal width of the field. The unit of measurement is in blank spaces. maxlength - Dictates the maximum number of characters that can be entered.
HTML Code:
<form method="post" action="mailto:youremail@email.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.
method - We will only be using the post functionality of method, which sends the data without displaying any of the information to the visitor. action - Specifies the URL to send the data to. We will be sending our information to a fake email address.
HTML Code:
<form method="post" action="mailto:youremail@email.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"> </form>
Email Forms:
Name: Password:
Send
Simply change the email address to your own and you will have set up your first functional form!
HTML Code:
<form method="post" action="mailto:youremail@email.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: Dark Small Light Medium Large
Email Myself
If you change the email address to your own and "Email Myself" then you should get an email with "shade=(choice) size=(choice)".
HTML Code:
<form method="post" action="mailto:youremail@email.com"> Select your favorite cartoon characters. <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 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>
HTML Code:
<form method="post" action="mailto:youremail@email.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
Emo Metal/Rock Hip Hop Ska
Email Yourself
HTML Code:
<input type="hidden" name="MAX_FILE_SIZE" value="100" /> <input name="file" type="file" />
Upload Form:
Virtual means that the viewer will see the words wrapping as they type their comments, but when the page is submitted to you, the web host, the document sent will not have wrapping words. Physical means that the text will appear both to you, the web host, and the viewer including any page breaks and additional spaces that may be inputed. The words come as they are. Off of course, turns off word wrapping within the text area. One ongoing line.
HTML Code:
<form method="post" action="mailto:youremail@email.com"> <textarea rows="5" cols="20" wrap="physical" name="comments"> Enter Comments Here </textarea> <input type="submit" value="Email Yourself"> </form>
Text Area:
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.
Tips
Remember to set the name and value attributes for your forms so the document created will be neatly organized. Remember to place submit buttons with the form tags to submit the document correctly.
HTML Tables
Tables may seem difficult at first, but after working through this lesson you'll see how they aren't too bad. The <table> tag is used to begin a table. Within a table element are the <tr> (table rows) and <td> (table columns) tags. Tables are a handy way to create a site's layout, but it does take some getting used to. Here's how to make a table.
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
Content is placed within tables cells. A table cell is defined by <td> and </td>.The border attribute defines how wide the table's border will be.
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>
Row 1 Cell 2 Row 1 Cell 3 Row 1 Cell 1 Row 2 Cell 2 Row 2 Cell 3 Row 3 Cell 1
HTML Code:
<table border="1" cellspacing="10" bgcolor="rgb(0,255,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>
And now we will change the cellpadding of the table and remove the cellspacing from the previous example.
HTML Code:
<table border="1" cellpadding="10" bgcolor="rgb(0,255,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 Column 2
Row 1 Cell 1
Row 1 Cell 2
Row 2 Cell 1
Row 2 Cell 2
The value you specify for padding and spacing is interpreted by the browser as a pixel value you. So a value of 10 is simply 10 pixels wide. Most attributes that use numeric values for their measurements use pixels.
Tips
Tables can be given backgrounds using the bgcolor attribute. Also, be aware that backgrounds are not limited to the <table> tag, you can also give separate backgrounds to <td> and <tr> tags. The <tr> tag must always be placed before the <td> tag. The examples above show good form for organizing the table code. It may seem a bit complicated, but if you keep everything organized it will be much easier to manage down the road.
Quick and dirty, here is how to change the background of your web page. Just use the bgcolor attribute in the <body> tag and you are golden.
HTML Code:
<body bgcolor="Silver"> <p>We set the background...</p> </body>
Paragraph Bgcolor:
We set the background of this paragraph to be silver. The body tag is where you change the pages background. Now continue the lesson to learn more about adding background colors in your HTML!
HTML Code:
<table bgcolor="lime" border="1"><tr> <td>A lime colored table background using color names.</td> </tr></table> <table bgcolor="#ff0000" border="1"><tr> <td>A red colored table background using hexadecimal values "#FF0000".</td> </tr></table> <table bgcolor="rgb(0, 0, 255)" border="1"><tr> <td>A blue colored table background using RGB values "rgb(0, 0, 255)".</td> </tr></table>
Table Bgcolors:
A lime colored table background using color names. A red colored table background using hexadecimal values "#FF0000". A blue colored table background using RGB values "rgb(0, 0, 255)".
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!
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, Verdana" size="4" color="#00FF00"> This paragraph tag has... </font></p> </td></tr> </table>
Colored Paragraph:
This paragraph tag has a gray background with green colored font. You should see Monotype Corsiva font if you have it installed, or Verdana as the backup. Both fonts are widely accepted as standard fonts.
Tips
If you are new to HTML consider sticking with color names for setting your background color. There's 216 "true colors" with hexidecimal. The colors are made out of hex-pairs for red, blue, and green. Examples: #99FFCC, #33AA44. Remember that black is NO color at all (a blank screen), white is all the colors of light. Which is the oposite when dealing with pigments of color on paper.
Shades of gray occur when the 3 paired amounts of each color are equal. Example. "rgb(100,100,100)", "#333333," "#0A0A0A" Avoid bright, headache-causing color schemes! Keep your coloring distinct and purposeful.
HTML - Background
Images can be placed within elements of HTML. Tables, paragraphs, and bodys may all have a background image. To accomplish this, we use the background attribute as follows.
HTML Code:
<table height="100" width="150" background="http://www.tizag.com/pics/htmlT/background.jpg" > <tr><td>This table has a background image</td></tr> </table>
Background Image:
This table has a background image
HTML Code:
<table height="200" width="300" background="http://www.tizag.com/pics/htmlT/background.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, however, it can also be quite useful as you will see in the following example.
Repeating a generic image as a background doesn't have much practical use. 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. From a different angle, we can use this default attribute to our benefit say if we wanted to have some sort of pattern as our background. In an image editing program such as Adobe Photosop, or Paint Shop Pro, we could create a very small (perhaps 4X4 pixels) and create a couple of basic patterns.
4x4 Image:
Now here is the same image set as the background to our same table.
HTML Code:
<table height="100" width="150" background="http://www.tizag.com/pics/htmlT/pattern.jpg" > <tr><td>This table has a background patterned image</td></tr> </table>
Pattern:
This table has a background patterned image
HTML Code:
<table background="http://www.tizag.com/pics/htmlT/transparent.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, use the smallest dimensions possible even as small as 1x1 if you can. Larger files load slow and inhibit the load time of your sites. Experiment, tinker, and fiddle around with your backgrounds to come up with something enjoyable to look at. Be creative.
#00CC00 #00CC33 #00CC66 #00CC99 #00CCCC #00CCFF #00FF00 #00FF33 #00FF66 #00FF99 #00FFCC #00FFFF #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 #990000 #993300 #996600 #999900 #990033 #993333 #996633 #999933 #66FF66 #990066 #993366 #996666 #999966 #99FF66 #66FF99 #990099 #993399 #996699 #999999 #99FF99 #66FFCC #66FFFF #9900CC #9933CC #9966CC #9999CC #9900FF #9933FF #9966FF #9999FF
#99CC00 #99CC33 #99CC66 #99CC99 #99CCCC #99CCFF #99FF00 #99FF33 #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 #FF3300 #FF3333 #FF6600 #FF6633 #FF9900 #FF9933 #FF0066 #FF3366 #FF6666 #FF9966 #FF0099 #FF3399 #FF6699 #FF9999 #FF00CC #FF00FF #FF33CC #FF33FF #FF66CC #FF66FF #FF99CC #FF99FF
#FFCC00 #FFCC33 #FFCC66 #FFCC99 #FFCCCC #FFCCFF #FFFF00 #FFFF33 #FFFF66 #FFFF99 #FFFFCC #FFFFFF
HTML Frames
Frames allow for multiple ".html" documents to be displayed inside of one browser window at a time. This means that one page has no content on it, but rather tells the browser which web pages you would like to open. With the addition of CSS and PHP, frames have become outdated, but if you wish to use them, read on.
HTML Code:
<html> <head> </head> <frameset cols="30%,*"> <frame src="menu.html"> <frame src="content.html"> </frameset> </html>
Frame Set:
Here's the example: Frame Index frameset - The parent tag that defines the characteristics of this frames page. Individual frames are defined inside it. frameset cols="#%, *"- Cols(columns) defines the width that each frame will have. In the above example we chose the menu (the 1st column) to be 30% of the total page and used a "*", which means the content (the 2nd column) will use the remaining width for itself. frame src="" -The location of the web page to load into the frame.
A good rule of thumb is to call the page which contains this frame information "index.html" because that is typically a site's main page.
HTML Code:
<html><head></head> <frameset rows="20%,*"> <frame src="title.html"> <frameset cols="30%,*"> <frame src="menu.html"> <frame src="content.html"> </frameset> </html>
frameset rows="#%, *"- rows defines the height that each frame will have. In the above example we chose the new title (the 1st row) to be 20% of the total page height and used a "*", which means that menu and content (which are the 2nd row) will use the remaining height.
Note: Framespacing and border are the same attribute, but some browsers only recognize one or the other, so use both, with the same value, to be safe.
frameborder="#" - A zero value shows no "window" border. border="#"- Modifies the border width, used by Netscape. framespacing="#" -Modifies the border width, used by Internet Explorer.
HTML Code:
<html><head></head> <frameset border="0" frameborder="0" framespacing="0" rows="20%,*"> <frame src="title.html"> <frameset border="0" frameborder="0" framespacing="0" cols="30%,*"> <frame src="menu.html"> <frame src="content.html"> </frameset> </html>
Frame Borders:
Here's a visual:Visual
HTML Code:
<html><head></head> <frameset rows="20%,*"> <frame name="title" src="title.html"> <frameset cols="30%,*"> <frame name="menu" src="menu.html"> <name="content" src="content.html"> </frameset> </html>
HTML Code:
<html> <head> <base target="content"> </head>
... </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 to point to that frame. Our frame page is now a perfectly functional menu & content layout!
HTML Code:
<html><head></head> <frameset border="2" frameborder="1" framespacing="2" rows="20%,*"> <frame src="title.html" noresize scrolling="no"> <frameset border="4" frameborder="1" framespacing="4" cols="30%,*"> <frame src="menu.html" scrolling="auto" noresize> <frame src="content.html" scrolling="yes" noresize> </frameset> </html>
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. We also set the scrolling for our title banner to no, because it does not make sense to have a scrollbar appear in the title frame.
Tips
Frames can be simple and well organized. However, they are usually viewed as unacceptable by most web designers. Always set the scrolling and resize options to optimize loadtime. Using a simple menu/content frame design can reduce updates to massive sites. Instead of updating the menu on each page, you could simply update the menu.html file and be done with it!
HTML - Layout
HTML layout is very basic. Not many options exist with the body tag alone. Tables on the other hand are the bread and butter of HTML layouts. Any element may be placed inside of a table including tables themselves.
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>
The white table (identified as inner) exists inside of the (shell) table, the black one. 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 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
This approach is basic yet organized. Often times websites become too complex for the viewer to follow. The code becomes complex rather fast, you will need to be sure to properly assign height and width values to your tables as well. The more specific you are about heights and widths, the less debugging you will have to perform.
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> </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!
The code is quite a lot to look at, break it up and organize it in your own way to make things easier for you.
Tips
Your code can become quite complicated rather fast, keep an organized spacing system so it becomes easy to spot where one table ends and the other beings. Use cellspacing to add usable borders to your content. Keep things neat. Be creative yet organized. Use the align and valign (vertical align) attributes to align your navigation and content.
Use the last example place text inside your code and documents that the web browser will ignore. This is a great way to place little notes to yourself or to remind yourself what pieces of code are doing what.
HTML Code:
<!--Note to self: This is my banner image! Don't forget --> <img src="http://www.tizag.com/pics/tizagSugar.jpg" height="100" width="200" />
Comment to self:
As you can see comment syntax may be a little complicated, there is an opening and a closing much like tags.
Placing notes and reminders to yourself is a great way to remember your thoughts and to keep track elements embedded in your webpages. Also, your code may exist for many years, 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. All combinations of text placed within the comment tags will be ignored by the web browser, this includes any HTML tags, scripting language(s), etc.
HTML Code:
<!-- <input type="text" size="12" /> -- Input Field -->
Now when we are ready to display that element, we can simply remove the comment tags and our browser will readily display the element.
HTML Code:
<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. Nothing is more frustrating than deleting bits of code only to turn around and recode them.
HTML Code:
<script> <!-document.write("Hello World!") //-->
</script>
With this example we are jumping far ahead, just be sure you understand when to use comments and where to look for them. They are a very useful tool for any large project.
Tips
Make notes often and frequently, you may want to look back and edit your code 5 years from now. Commenting out elements is a great technique to pick up from where you left off in your code.
HTML Code:
<head> <meta name="keywords" content="keyword, key keywords, etc" /> </head>
name defines what type of meta tag being used. Note that the keywords are separated by commas. An example of the keywords meta tag for Tizag.com would be as follows.
HTML Code:
<head> <meta name="keywords" content="HTML, XHTML, CSS, tutorials, tizag" /> </head>
HTML Code:
<head> <meta name="description" content="Tizag contains webmaster tutorials." /> </head>
Description and Keywords tags are very similar, and they should be. As mentioned above if they do not match, you may be ignored or blocked by some search engines. Be careful.
HTML Code:
<head> <meta name="revised" content="Happy New Year: 1/1/2003" /> </head>
HTML Code:
<head> <meta http-equiv="refresh" content="10; url=http://www.tizag.com" /> </head>
Above shows refreshing Tizag's home page every 10 seconds. A quick refresh may be necessary for news, stocks, or any other time-sensitive information. The most common use for this type of meta tag, however, is redirection. To redirect a viewer automatically, just change the URL to the new site as shown below. This code will send your visitors to espn.com after being at your site for five seconds.
HTML Code:
<head> <meta http-equiv="refresh" content="5; url=http://www.espn.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. Do not rely on meta tags alone to get your web site listed on search engines. If your domain (.com) ever changes, remember to place a simple "Our site has moved" message as the existing domain, and then use a redirect meta tag to make life easier for your viewers that already may have your site bookmarked.
HTML Scripts
There are two very popular scripts that are commonly used in HTML to make web pages come alive. HTML javascript and HTML vbscript are very useful scripting languages to know, if you have the time. With HTML scripts you can create dynamic web pages, make image rollovers for really cool menu effects, or even validate your HTML form's data before you let the user submit. However, javascript and vbscript are very complicated compared to HTML. 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, of course!).
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", which is similar to the process of specifying CSS. We also include a comment around the javascript code. This will prevent browsers that do not support javascript or have had javascript disabled from d isplaying the javascript code in the web browser.
To insert vbscript code onto your website you must once again make use of the script tag. Below is the correct code to insert vbscript code onto your site.
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", which is similar to specifying CSS. We also include a comment around the vbscript code. This will prevent browsers that do not support vbscript or have had vbscript disabled from displaying the vbscript code in the web browser.
HTML Embed
Music is inserted onto a web page with the use of the embed tag. There are other ways to link to music, but embed is now considered the standard for inserting media. Below is an minimalist example of the embed tag using the src attribute to define the media file's location.
HTML Code:
<embed src="beethoven.mid" /> <p>Above is an embedded media player. stop/pause.</p> To stop the music press
Depending on what kind of media software you or your visitor has installed, the above example will appear slightly different. To make your embedded player display properly change the attributes associated with display.
width - the width of the media player. height - the height of the media player hidden - if this value is true then the media player will not be displayed. 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. (Values are true/false)
HTML Code:
<embed src="beethoven.mid" width="360" height="165" />
Usually, 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.
HTML Code:
<embed src="beethoven.mid" autostart="false" loop="false" volume="60" />
Controls Attribute
The attribute controls sets which controls for the media player will be displayed. autostart - choose if the media file will start automatically loop - sets the media file to repeat or not volume - set the volume of the media file. The range is 0-100.
Tips
Be careful when placing music on your web site. If done poorly, 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. If you want your music to play over and over again, then be sure to set the loop attribute to true.
HTML Code:
<embed src="http://www.tizag.com/files/html/htmlexample.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). You may also simply place the URL of your media files into the href attribute of an anchor tag, much like the concept of "thumbnailing" images.
HTML Code:
<a href="http://www.tizag.com/pics/flash/motiontween1easy.swf"> motiontween1easy.swf</a>
Flash Media:
motiontween1easy.swf
The listings above are the most commonly used formats for the internet. ".mpeg" files and Macromedia's .swf files are the most compact and widely used among the internet. Stick to any of the file types above for use with your web pages.
Along with the previously discussed src attribute, there are some unique attributes available to the <embed /> tag including: volume, autostart, hidden, and loop.
autostart - controls the media's ability to start without prompting. Values are true or false. hidden - controls whether or not the play/stop/pause embedded object is hidden or not. Values are true or false. (Hide your embeded media if you just want background noise). loop - A true value means the media will continuously loop, false means no looping. playcount - Setting a playcount means the media will repeat itself x number of times instead of continuously as with the loop attribute above. (playcount="2" will repeat the video twice). volume - set a numeric value for the loudness of your media. (0-100).
HTML Code:
<! -- Google Video HTML Code -- > <embed style="width:400px; height:326px;" id="VideoPlayback" align="middle" type="application/x-shockwave-flash" src="http://video.google.com/googleplayer.swf?videoUrl=http%3A% 2F%2Fvp.video.google.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.google.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> <! -- End of Google Video HTML Code -->
It is a messy code above, but once you put it into your HTML documents you get a great video clip.
HTML - Body
As we mentioned, the body tag serves as the element containing all the content for the website. Tables, Lists, Forms, Paragraphs, everything must be placed within the body element to be displayed on your site.
A unique set of margin attributes are available to the body tag. These attributes work much like those of a word processing program, allowing you set a pixel value margin for the left, right, top, or bottom of your website. Setting these attributes means that all the content you place within your body tags will honor the preset margin.
HTML Code:
<body topmargin="50"> <body leftmargin="50">
Margin Examples:
Top Margin Left Margin
HTML Code:
<body text="red" >
or
<body text="rgb(255,0,0)" >
HTML Code:
<body link="white" vlink="black" >
or
<body link="rgb(255,255,255)" vlink="rgb(0,0,0)" >
Setting a baselink is a great way to ensure your viewers will not receive that annoying error message that occurs with broken links.
For the purpose of this example, we have included the style attribute in order to color our div tag in order to bring a stronger visualization for our viewers.
HTML Code:
<body> <div style="background: green"> <h5 >SEARCH LINKS</h5> <a target="_blank" href="http://www.google.com">Google</a> </div> </body>
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.
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.</p> </div>
This paragraph would be your content paragraph with all of your readable material. Advanced web developers find div elements to be far easier to work with than tables, adding more content or more links to our previous example might demonstrates why a div is simpler to work with. Let's add a "LINKS" page to our menu, and another article of content below the existing content.
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.</p> <h5 >Content Article Number Two</h5> <p>Here's another content article right here.</p> </div>
This paragraph would be your content paragraph with all of your readable material.
Content Article Number Two
Tips
Use CSS Positioning with divs and code like a pro! Formatting Tags
HTML - Bold
Creating bold text can be accomplished through the use of the <b> bold tag.
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.
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.
HTML Code:
<p><b>Cardio:</b> Latin word meaning of the heart.</p>
Dictionary:
Cardio: Latin word meaning of the heart.
The idea here is to use the bold tag in quick formatting situations. It is not a good idea to bold entire paragraphs or other elements simply because you want the text to be larger or fatter. Use Cascading Style Sheets for font styles and sizes.
HTML - Italic(s)
The italics tags should be used to highlight a key word or phrase. These tags are not intended to to stylize or shape your font face. Rather, use them to emphasize text or words.
HTML Code:
Italic <i>tag</i>! <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. The two commonly used tags to place italics onto a website are <em> and <i>. 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
As you can see, the output is the same regardless of what tag we used to emphasize our definitions.
HTML Code:
<p>Phillip M. Rogerson <b><i>MD</i></b></p>
Display:
Phillip M. Rogerson MD
This is brilliant when placing text links directly inside your paragraphs as a reference to the user.
HTML Code:
<p>Include several external links throughout your texts as references to your viewers, we will discuss <a href="" target="_blank" title="Tizag Links"> <b><i>HTML Links</i></b> </a> in a later lesson.</p>
Format Links:
Include several external links throughout your texts as references to your viewers, we will discuss HTML Links in a later lesson.
As you can see, the code becomes quite complex as you begin to place more and more tags on the board. Be assured that once you learn Cascading Style Sheets the code will become simpler.
Tips
The best advice is just to keep things simply and avoid going overboard with these tags.
You may have noticed that nearly all of our examples thus far use the computer code tag when displaying each HTML Code example.
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. It is not always necessary, but the tag exists if you so desire.
HTML Code:
<p>Feel free to search <a href="http://www.google.com" target="_blank"> <code>Google</code> </a> for anything you wish to find on the internet.</p>
Code Links:
Feel free to search Google for anything you wish to find on the internet.
HTML Code:
<pre> Roses are Red, Violets are blue, I may sound crazy,
Preformatted Text:
Roses are Red, Violets are blue, I may sound crazy, But I love you!
HTML Code:
<p>This text is <sup>superscripted!</sup></p>
Superscript:
This text is superscripted!
HTML - Exponents
We may use the superscripting technique to express exponential expressions.
HTML Code:
2<sup>3</sup> = 8 14<sup>x</sup>
Exponents:
23 = 8 14x
HTML - Footnotes
You may have come across several texts where a referencing, superscripting directs your attention to the bottom of the page. These footnotes can also be created with the superscript tag.
HTML Code:
<p>"It was a lover's tryst<sup>1</sup>." <hr /> 1. Secret meeting between lovers
Footnotes:
"It was a lover's tryst1."
HTML - Subscript
Use the subscript tags to place subscripted text onto your websites.
HTML Code:
<p>This text is <sub>subscripted!</sub></p>
Subscripted:
This text is subscripted!
HTML Code:
<p>H<sub>2</sub>0 - Water <p>O<sub>2</sub> - Oxygen <p>CO<sub>2</sub> - Carbon Dioxide
Chemical Compounds:
H2O - Water O2 - Oxygen CO2 - Carbon Dioxide
HTML - Strikethrough
To place text onto your site that appears to be crossed out, we use the <del> tag.
HTML Code:
<p>This text is <del>scratched</del> out!</p>
Strikethrough:
This text is scratched out!
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
Tips
Place the del tags inside your links or anchor tags for a unique look. HTML Forms
HTML Code:
<input type="text" /> <input type="password" />
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" />
Checkboxes:
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" />
Radios:
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 Code:
<input type="reset" value="Reset Fields" /> <input type="reset" value="Start Over" />
Reset Buttons:
Reset Fields Start Over
his information is usually then processed through a server side scripting language such as PHP, PERL, or ASP.
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.
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:
as you will be able to pre-populate text fields for returning users through the use of session variables.
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!" />
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, the browser hides the characters being typed; replacing them with dots, stars, or boxes. Also, beaware that these fields are not encrypted and therefore are unsafe. Encryption occurs through the use of a scripting language.
HTML Code:
<p>Please select every sport that you play.</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. Soccer: Football: Baseball: Basketball:
Checkboxes are used for instances where a user may wish to select multiple options, a sort of check all that apply question.
HTML Code:
<p>Please select every sport that you play.</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:
Please select every sport that you play. Soccer: Football: Baseball: Basketball:
Radios are types of input forms that allow a user to pick an either/or type of selection. In order to achieve this, we must properly name each radio button selection accordingly. These types of forms must be named.
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 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" /> Male: <input type="radio" name="gender" /> Female: <input type="radio" name="gender" />
Multiple Radios:
Italian: Greek: Chinese: Male: Female:
Here we have two sets of radio selections contained within the same form.
By using the checked attribute, we can tell our form to automatically "check" a default radio.
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:
Italian: Greek: Chinese:
HTML - Textareas
Textareas retrieve "blog" type information from the user. Paragraphs, essays, or memos can by cut and pasted into textareas and submitted. Textareas have an opening and a closing tag, any words placed between them will appear inside your text area.
HTML Code:
<textarea>Text Area!</textarea>
Default Textarea:
Text Area!
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>
Text Area!
Text Area!
hard off
Soft forces the words to wrap once inside the text area but when the form is submitted, the words will no longer appear as such (Line breaks will not be added). 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. Off sets a textarea to ignore all wrapping and places the text into one ongoing line.
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. Since it makes everything nice and easy to read. </textarea>
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. Since it makes everything nice and easy to read. </textarea>
No Wrapping:
As you can see many w rapping is often the everything nice and e
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. Since it makes everything nice and easy to read. </textarea>
Now you may not change the text inside the text area. However, you can still highlight or Ctrl-C and copy the texts.
HTML - Disabled
As the readonly attribute disables text manipulation, we can take things one step further by setting the disabled attribute. This grays out the textarea altogether and inhibits any change in the text as well as text highlighting.
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. Since it makes everything nice and easy to read. </textarea>
Disabled Textareas:
As you can see many is often the desired lo nice and easy to read
HTML Code:
<input type="file" />
Upload Form:
HTML Code:
<input type="hidden" name="MAX_FILE_SIZE" value="500" /> < input type="file" />
The value specified is the maximum allowable KB to be uploaded via this form. A value of 100 will allow a file u
HTML Code:
<select> <option>California -- CA</option> <option>Colorado -- CO</option> <option>Connecticut -- CN</option> </select>
By default the first coded <option> will be displayed or selected as the default. We can change this using the selected attribute.
HTML Code:
<select> <option>California -- CA</option> <option>Colorado -- CO</option> <option selected="yes">Conneticut -- CN</option> </select>
HTML Code:
<select size="3"> <option>California -- CA</option> <option>Colorado -- CO</option> <option>Connecticut -- CN</option> </select>
Selection Forms:
California -- CA Colorado -- CO Connecticut -- CN
HTML Code:
<select multiple="yes" size="3"> <option>California -- CA</option> <option>Colorado -- CO</option> <option>Connecticut -- CN</option> </select>
Multiple Selections:
California -- CA Colorado -- CO Connecticut -- CN
Now the user may select any or all states that apply to them.
HTML Code:
<input type="submit" value="Submit" /><br /> <input type="submit" value="Send" /><br /> <input type="submit" value="Submit Form" /><br />
Submit Buttons:
Submit Send Submit Form
Notice that in the above example we also changed what was written on our button using the value attribute. This can be changed to any value you wish.
HTML Code:
<form method="post" action="mailto:youremail@youremail.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, you can change the email address to your email and then send yourself the results of your form.
Reset buttons exist to reset the fields of your form. These are handy for very large forms and the user is having difficulty or simply needs to start filling in the form from scratch.
HTML Code:
<input type="reset" value="Reset" /> <input type="reset" value="Start Over" />
Reset Button:
Reset Start Over
HTML Code:
<form action="myphp.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!
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. Use the type attribute to specify a hidden field.
HTML Code:
<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. Our field above is incomplete and pretty much useless as it is. Adding a name and a value attribute will change this.
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, especially if you have any kind of user base where returning users must log in. The admin field could be used to check some sort of user level entry of a returning user; 1 being administrator and 0 being non-administrator access. 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.