Learne HTML: by Exccc For R00Tw0Rm Members

2012
Learne HTML
By ExccC for R00tw0rm Members
ExccC r00tw0rm
HTML Elements
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. Element Content - paragraph words 3. </p> - closing tag Every (web) page requires four elements: the html, head, title, and body elements.
The <html> Element...</html>

<html> begins and ends each and every web page. Its sole purpose is to encapsulate all the HTML code and describe the HTML document to the web browser. Remember to close your HTML documents with the corresponding </html> tag at the bottom of the document.
HTML Code:
<html> </html>
The <head> Element

The <head> element is falls between the <html> tag and the web page content (<body>). The head functions "behind the scenes." Tags placed within the head element are not directly displayed by web browsers.
<html> <head> </head> </html>
The <title> Element

The <title> tag is placed within the <head> element to title your page. The words you write between the opening and closing <title></title> tags will be displayed at the top of a viewer's browser.
<html> <head> <title>My WebPage!</title> </head> </html>
This page will show "My WebPage!" in the upper-left, as the window's title.
The <body> Element

The <body> element is where all content is placed. (Paragraphs, pictures, tables, etc). The body element will encapsulate all of your webpage's viewable content.
<html> <head> <title>My WebPage!</title> </head> <body> Hello World! All my content goes here! </body> </html>
Beginning HTML Tags!

<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>
Tags Without Closing Tags

There are a few tags that do not follow the mold above. In a way, they still have the 3 parts (opening/closing and content). These tags however do not require a formal </closing tag> but rather a modified version. The reason being that these tags do not really require any content.
HTML Code:
<br />
To tell the browser we want to place a line break onto the site, it is not necessary to type <br>linebreak</br>. 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:
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.
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.
HTML - Class or ID Attribute

The class and id attributes are nearly identical. They play no direct role in formatting your elements but rather serve behind the scenes for scripting and Cascading Style Sheets (CSS). The idea is that you can classify or id certain a tag and later format the tag using Cascading Style Sheets. 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.
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 - Name Attribute

Name is much different than id and class. By allotting a name to an element, that name becomes a scripting variable for scripting languages such as JavaScript, ASP, and PHP. The name attribute is seen most often with forms and other user-input elements.
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 - Title Attribute

<h2 title="Hello There!">Titled Heading Tag</h2>
HTML - Align Attribute

If you wish to change the horizontal location of your elements you may do so using the align attribute. You may align things left, right, or center. By default most elements are automatically aligned left unless otherwise specified.
HTML Code
<h2 align="center">Centered Heading</h2>
Display:
Centered Heading
HTML Code
<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
Attribute align valign bgcolor background id class width height title Options Function right, left, center Horizontally aligns tags top, middle, bottom Vertically aligns tags within an HTML element. numeric, hexidecimal, RGB values Places a background color behind an element URL Places an background image behind an element User Defined Names an element for use with Cascading Style Sheets. User Defined Classifies an element for use with Cascading Style Sheets. Numeric Value Specifies the width of tables, images, or table cells. Numeric Value Specifies the height of tables, images, or table cells. User Defined "Pop-up" title for your elements.
Paragraph Tag <p>

The <p> tag defines a paragraph. Using this tag places a blank line above and below the text of the paragraph.
HTML Code:
<p>Avoid losing floppy disks with important school...</p> <p>For instance, let's say you had a HUGE school...</p>
HTML - Paragraph Justification

Here the align attribute is used to "justify" our paragraph.
HTML Code:
<p align="justify">let's say you had a HUGE school or work...</p> <p align="center">let's say you had a HUGE school or work...</p> <p align="right">let's say you had a HUGE school or work...</p>
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.
HTML Code:
<body> <h1>Headings</h1> <h2>are</h2> <h3>great</h3> <h4>for</h4> <h5>titles</h5> <h6>and subtitles</h6> </body>
Display
Headings
are
great
for
titles
and subtitles
Each heading has a line break before and after each heading display.
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.
HTML Code:
<p> Will Mateson<br /> Box 61<br /> </p>
Address:
Will Mateson Box 61 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 Horizontal Rule

Use the <hr /> tag to display lines across the screen. Note: the horizontal rule tag has no ending tag like the line break tag.
HTML Code
HTML <hr /> JAVASCRIPT
Display
HTML JAVASCRIPT
HTML Lists
There are 3 different types of lists. <ul> - unordered list; bullets <ol> - ordered list; numbers <dl> - definition list; dictionary Use the type and start attributes to fine tune your lists accordingly.
HTML Ordered Lists

Use the <ol> tag to begin an ordered list. Place the <li> (list item) tag between your opening <ol> and closing </ol> tags to create list items. Ordered simply means numbered, as the list below demonstrates.
HTML Code:
Goals <ol start="4"> <li>Find a Job</li> <li>Get Money</li> <li>Move Out</li> </ol>
Numbered list:
Goals
4. Find a Job 5. Get Money 6. Move Out Start your ordered list on any number besides 1 using the start attribute.
HTML Ordered Lists Continued

There are 4 other types of ordered lists. Instead of generic numbers you can replace them with Roman numberless or letters, both capital and lower-case. Use the type attribute to change the numbering.
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. Find a Job i. Find a Job I. Find a Job b. Get Money B. Get Money ii. Get Money II. Get Money c. Move Out C. Move Out iii. Move Out III. Move Out
HTML Unordered Lists

Create a bulleted list with the <ul> tag. The bullet itself comes in three flavors: squares, discs, and circles. The default bullet displayed by most web browsers is the traditional full disc.
HTML Code:
Shopping List <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">
Unordered List Types:

type="square" Milk Toilet Paper Cereal Bread type="disc" Milk Toilet Paper Cereal Bread type="circle" o Milk o Toilet Paper o Cereal o Bread
HTML Definition Term Lists

Make definition lists as seen in dictionaries using the <dl> tag. These lists displace the term word just above the definition itself for a unique look. It's wise to bold the terms to displace them further. <dl> - defines the start of the list <dt> - definition term <dd> - defining definition
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></dl>
HTML Code:
Fromage French word for cheese. Voiture French word for car.
HTML - Formatting Tags

The formatting tags can make text bold, italic, sub/superscripted, and more.
Bold, Italic and More

<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
HTML Color Coding System - Color Names

There are 3 different methods to set color. The simplest being the Generic terms of colors. Examples: black, white, red, green, and blue. Generic colors are preset HTML coded colors where the value is simply the name of each color. Here is a sample of the most widely supported colors and their respective name values.
The 16 Basic Colors:

Black Yellow Red Maroon Gray Lime Green Olive Silver Aqua Blue Navy White Fuchsia Purple Teal
HTML Coloring System - RGB Values

RGB stands for Red, Green, and Blue. Each can have a value from 0 (none of that color) to 255 (fully that color). The format for RGB is - rgb(RED, GREEN, BLUE), just like the name implies. Below is an example of RGB in use, but if you are not using a browser that supports it, do not worry, that is just one of the problems with HTML RGB.
Red, Green, and Blue Values:

bgcolor="rgb(255,255,255)" bgcolor="rgb(255,0,0)" bgcolor="rgb(0,255,0)" bgcolor="rgb(0,0,255)" White Red Green Blue
HTML Coloring System - Hexadecimal

A hexadecimal is a 6 digit representation of a color. The first two digits (RR) represent a red value, the next two are a green value (GG), and the last are the blue value (BB). Here's a hexadecimal you might see in an HTML document.
My First Hexadecimal:
bgcolor="#RRGGBB"
HTML Color Code - Breaking the Code

The following table shows how letters are incorporated into the hexadecimal essentially extending the numbers system to 16 values.
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
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. 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 from browser to browser.
HTML - Font and Basefont

The <font> tag is used to add style, size, and color to the text on your site. Use the size, color, and face attributes to customize your fonts. Use a <basefont> tag to set all of your text to the same size, face, and color.
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.
<p> <font size="5">Here is a size 5 font</font> </p>
Display
Here is a size 5 font.
Font Color
Set the color of your font with color.
<font color="#990000">This text is hexcolor #990000</font> <font color="red">This text is red</font>
Display
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.
<p> <font face="Bookman Old Style, Book Antiqua, Garamond">This paragraph has had its font...</font> </p>
Display
This paragraph has had its font formatted by the font tag!
Basefont - Set a Solid Base

With the basefont tag you will be able to set the default font for your web page. We highly recommend specifying a basefont if you plan on using any font with HTML.
<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>
Display
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!
Beautiful First Letter Style

Customize your fonts to achieve any of your desired looks.
<p><font size="7" face="Georgia, Arial" color="maroon">C</font>ustomize your font to achieve a desired look.</p>
Display
ustomize your font to achieve a desired look.
HTML - Links and Anchors

The connections are made using anchor tags to create links. Text, Images, and Forms may be used to create these links.
HTML - Hypertext Reference (href)

The href attribute defines reference that the link refers to. Basically this is where the user will be taken if they wish to click this link. 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
Internal - href="#anchorname" Local - href="../pics/picturefile.jpg" Global - href="http://www.tizag.com/"
HTML - Text Links

Use the <a></a> tags to define the start and ending of an anchor. Decide what type of href attribute you need and place this attribute into the opening tag. The text you place between the opening and closing tags will be shown as the link on a page.
Code
<a href="http://www.tizag.com/" target="_blank" >Tizag Home</a> <a href="http://www.espn.com/" target="_self" >ESPN Home</a> <a href="http://www.yahoo.com/" target="_blank" >Yahoo Home</a>
Global Link:
Tizag Home ESPN Home Yahoo Home
HTML - Link Targets

The target attribute defines whether to open the page in a separate window, or to open the link in the current browser window.
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, canceling all frames
HTML - Anchors
To link to sections of your existing page a name must be given to the anchor.
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, 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>
Local Links:
Go to the Top Learn about Text Links
HTML - Email Links

Creating an email link is simple. 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.
HTML Code:
<a href="mailto:email@abc.com?subject=Feedback" >Email@abc.com</a>
Email Links:
Email@abc.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@abc.com?subject=Feedback&body=Sweet site!"> Email@abc.com</a>
Complete Email:
Email@abc.com
HTML - Download Links

Placing files available for download is done in exactly the same fashion as placing text links. Things become complicated if we want to place image links available for download.
HTML Code:
<a href="http://www.abc.com/pics/htmlT/blanktext.zip">Text Document</a>
Download a Text Document:

Text Document
HTML - Default Links; Base

Use the <base> tag in the head element to set a default URL for all links on a page to go to. 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.
HTML Code:
<head> <base href="http://www.abc.com/"> </head>
Additional Spaces and <>

As you have may have learned within paragraph and heading tags, browsers will only recognize and format 1 space between words regardless of how many you may actually type in your coded HTML. An entity exists for placing additional spaces.
Here's an example.
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>
Less than Greater than:

Less than - < Greater than - > Body tag - <body>
HTML - Images
Use the <img /> tag to place an image on your web page.
HTML Code:
<img src="sunset.gif" />
Image:
HTML - Image src

Above we have defined the src attribute. Src stands for source, the source of the image or more appropriately, where the picture file is located. There are two ways to define the source of an image. First you may use a standard URL. (src=http://www.abc.com/pics/htmlT/sunset.gif) As your second choice, you may copy or upload the file onto your web server and access it locally using standard directory tree methods. (src="../sunset.gif") The location of this picture file is in relation to your location of your .html file. URL Types: Local Src Location Description src="sunset.gif" picture file resides in same directory as .html file src="../sunset.gif" 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
HTML - Alternative Attribute

The alt attribute specifies alternate text to be displayed if for some reason the browser cannot find the image, or if a user has image files disabled. Text only browsers also depend on the alt attribute since they cannot display pictures.
HTML Code:
<img src="http://example.com/brokenlink/sunset.gif" alt="Beautiful Sunset" />
Alternative Text:
HTML - Image Height and Width
To define the height and width of the image, rather than letting the browser compute the size, use the height and width attributes.
HTML Code:
<img src="sunset.gif" height="50" width="100">
Height and Width:
Vertically and Horizontally Align Images

Use the align and valign attributes to place images within your body, tables, or sections. 1. align (Horizontal) o right o left o center 2. valign (Vertical) o top o bottom o center Below is an example of how to align an image to the right of a paragraph.
HTML Code:
<img src="sunset.gif" align="right"> The image will appear along the...isn't it?
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.abc.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.
HTML - Image Links

Using graphics will liven up that tired, bland-looking text link. To make an image link simply insert an image within the anchor tag. If you do not know how to use the image tag, skip ahead to the image tutorial and come back after you feel comfortable with it.
HTML Code:
<a href="http://www.espn.com" target="_blank"> <img src="ahman.gif"> </a>
Image Link:
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.
HTML Form Email

Now we will add the submit functionality to your form. Generally, the button should be the last item of your form and have its name attribute set to "Send" or "Submit". Name defines what the label of the button will be. Here is a list of important attributes of the submit: In addition to adding the submit button, we must also add a destination for this information and specify how we want it to travel to that place. Adding the following attributes to your <form> will do just this. 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: 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. You may have seen them on quizzes, questionnaires, and other web sites that give the user a multiple choice question. Below are a couple attributes you should know that relate to the radio button. value - specifies what will be sent if the user chooses this radio button. Only one value will be sent for a given group of radio buttons (see name for more information).
name - defines which set of radio buttons that it is a part of. Below we have 2 groups: shade and size.
HTML Code:
<form method="post" action="mailto:youremail@email.com"> Shade: <input type="radio" name="shade" value="dark">Dark <input type="radio" name="shade" value="light">Light <br /> </form>
Radios:
Shade: Dark Light
HTML Check Boxes

Check boxes allow for multiple items to be selected for a certain group of choices. The check box's name and value attributes behave the same as a radio button.
HTML Code:
<form > <input type="checkbox" name="toon" value="aaa">Goofy <input type="checkbox" name="toon" value="bbb">Donald <input type="checkbox" name="toon" value="ccc">Bugs Bunny <input type="checkbox" name="toon" value="ddd">Scooby Doo </form>
Check Boxes:
aaabbbcccddd
HTML Drop Down Lists

Drop down menues are created with the <select> and <option> tags. <select> is the list itself and each <option> is an available choice for the user.
HTML Code:
<form > <select name="degree"> <option>Choose One</option> <option>Some High School</option> <option>High School Degree</option> </select> </form>
Drop Down Lists:
HTML Selection Forms

HTML Code:
<form > <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> </select> </form>
Selection Forms:
HTML Upload Forms
In this field, 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. HTML codes this automatically when we place the type="file" attribute within the input tag.
HTML Code:
<input type="hidden" name="MAX_FILE_SIZE" value="100" /> <input name="file" type="file" />
Upload Form:
HTML Text Areas

Rows and columns need to be specified as attributes to the <textarea> tag. Rows are roughly 12pixels high, the same as in word programs and the value of the columns reflects how many characters wide the text area will be. i.e. The example below shows a text area 5 rows tall and 20 characters wide. Another attribute to be aware of is the wrap. Wrap has 3 values. wrap= o "off" o "virtual" o "physical" 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 > <textarea rows="5" cols="20" wrap="physical" name="comments"> Enter Comments Here </textarea></form>
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.
HTML Tables
The <table> tag is used to begin a table. Within a table element are the <tr> (table rows) and <td> (table columns) tags.
<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. A table cell is defined by <td> and </td>.The border attribute defines how wide the table's border will be.
Spanning Multiple Rows and Cells

Use rowspan to span multiple rows and colspan to span multiple columns. Note: if you would like to place headers at the top of your columns, use the <th> tag as shown below. By default these headers are bold to set them apart from the rest of your table's content.
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. Spacing defines the width of the border, while padding represents the distance between cell borders and the content within. Color has been added to the table to emphasize these attributes.
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>
Cellspacing and Padding:

Column 1 Column 2 Row 1 Cell 1 Row 1 Cell 2 Row 2 Cell 1 Row 2 Cell 2 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 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 values you. So a value of 10 is simply 10 pixels wide. Most attributes that use numeric values for their measurements use pixels.
HTML Color - bgcolor
The bgcolor attribute is used to control the background of an HTML elmement, specifically page and table backgrounds. Bgcolor can be placed within several of the HTML tags
Syntax
<TAGNAME bgcolor="value">
HTML Code:
<body bgcolor="Silver"> <p>We set the background...</p> </body>
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:
<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)".
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> </table>
Scoreboard:
Green Bay 13
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="background.jpg" > <tr><td>This table has a background image</td></tr> </table>
Background Image:
This table has a background image
HTML - Background Repeat

In the first example we happen to be lucky because our image and our table had exactly the same size pixel dimensions. Everything looks great. When your HTML element is larger than the dimensions of your picture, the image simply begins to repeat itself.
HTML Code:
<table height="200" width="300" background="background.jpg" > <tr><td>This table has a background image</td></tr> </table>
Repeating Background:
This table has a background image
HTML Frames
Frames allow for multiple ".html" documents to be displayed inside of one browser window at a time.
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.
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%,*"> <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.
FrameBorder and FrameSpacing
You probably noticed those ugly gray lines that appear between the frames. It is possible to remove these and manipulate the spacing between frames with frameborder and framespacing. These attributes appear within the frameset tag. 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. Here's an example of the same frameset without the borders.
HTML Code:
<html><head></head> <frameset border="0" frameborder="0" framespacing="0" rows="20%,*"> <frame name="title" 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
Noresize and Scrolling

It's possible to further customize the <frame> tag using the noresize and scrolling="" attributes.
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>
Noresize and Scrolling:

Here's the Visual: Visual noresize - Do not let the frames be resized by the visitor. scrolling="(yes/no)"- Allow scrolling or not inside a frame. 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.
HTML - Layout
Inner Table
<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!
HTML - Standard Layout

<table cellspacing="1" cellpadding="0" border="0" id="shell" height="250" width="400"> <tr><td colspan="2">Place a banner here</td></tr> <tr><td>ABC</td> <td>BCD</td> </tr></table>
Place a banner here ABC BCD
HTML - 

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. There are three main reasons you may want your code to be ignored. Writing notes or reminders to yourself inside your actual HTML documents. Scripting languages such as Javascript require some commenting. Temporarily commenting out elements especially if the element has been left unfinished.
HTML Code:
 <img src="http://www.abc.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. 

HTML Code:

HTML Code:
<input type="text" size="12" />
Input Field:
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.
HTML - Body Margins

Leftmargin-Sets a lefthand margin for your body element. Topmargin-Sets a margin along the top of your body element. 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" leftmargin="50"> </body >
Text
<body text="red" > OR <body text="rgb(255,0,0)" >
HTML - Div Element(s)

The <div> tag is nothing more than a container for other tags. Much like the body tag, Div elements are block elements and work behind the scenes grouping other tags together. Use only the following attributes with your div element, anything else should be reserved for CSS. id width height title style 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>
MARQUEE
It moves some text and also any image to any direction.
<MARQUEE WIDTH=100% BEHAVIOR=ALTERNATE BGColor=yellow DIRECTION=RIGHT >This is an example of an alternating marquee...</MARQUEE>

Learne HTML: by Exccc For R00Tw0Rm Members

Transféré par

Informations du document

Description originale:

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Learne HTML: by Exccc For R00Tw0Rm Members

Transféré par

Droits d'auteur :

Formats disponibles

2012

The <html> Element...</html>

The <head> Element

The <title> Element

The <body> Element

Beginning HTML Tags!

Tags Without Closing Tags

HTML - Class or ID Attribute

HTML - Name Attribute

HTML - Title Attribute

HTML - Align Attribute

Paragraph Tag <p>

HTML - Paragraph Justification

HTML - Headings 1:6

HTML Horizontal Rule

HTML Ordered Lists

HTML Ordered Lists Continued

Ordered List Types:

HTML Unordered Lists

Unordered List Types:

HTML Definition Term Lists

HTML - Formatting Tags

Bold, Italic and More

HTML Color Coding System - Color Names

The 16 Basic Colors:

HTML Coloring System - RGB Values

Red, Green, and Blue Values:

HTML Coloring System - Hexadecimal

HTML Color Code - Breaking the Code

Hexadecimal Color Values:

HTML - Font and Basefont

Basefont - Set a Solid Base

<p>This paragraph has had its font...</p> </basefont> </body> </html>

Beautiful First Letter Style

ustomize your font to achieve a desired look.

HTML - Links and Anchors

HTML - Hypertext Reference (href)

HTML - Text Links

HTML - Link Targets

HTML - Email Links

HTML - Download Links

Download a Text Document:

HTML - Default Links; Base

Additional Spaces and <>

Less than Greater than:

HTML - Image src

HTML - Alternative Attribute

HTML - Image Height and Width

Height and Width:

Vertically and Horizontally Align Images

HTML - Image Links

HTML Form Email

HTML Radio Buttons

HTML Check Boxes

HTML Drop Down Lists

Drop Down Lists:

HTML Selection Forms

HTML Upload Forms

HTML Text Areas

Spanning Multiple Rows and Cells

Colspan and Rowspan:

Cell Padding and Spacing