Search Google

www.chagoyan.com

Mr. Chagoyan

Room 208 -Computer Lab

HTML/XHTML/HTML5

Quick Facts

HTML stands for Hyper Text Markup Language. It is the language of the web.

  • An HTML file is a text file containing markup tags
  • The markup (HTML)tags determine how Web browser displays the page
  • An HTML file must have an .htm or .html file extension
  • An HTML file can be created using a simple text editor (notepad!)
  • HTML tags are surrounded by angle brackets ( < and > )
  • HTML tags normally come in pairs like <body> and </body>
  • The first tag in a pair is the start tag, the second tag is the end tag
  • The forwards slash precedes the end tag - </html>

XHTML stands for Extensible Hyper Text Markup Language. It is a version of HTML and a combo of XML and HTML. XHTML is strict and much less forgiving of coding errors versus HTML. There are four main differences between XHTML and HTML including:

  • XHTML tags must be properly nested

  • <strong>
    <em>CHS</em>
    </strong>

    not

    <strong>
    <em>CHS</strong>
    </em>

  • XHTML tags must always be closed, even single tags such as:

    • <hr> must become <hr />
    • <br> must become <br />
    • <img> must become <img />
    • <meta> must become <meta />
  • XHTML tags/attributes must be in lowercase and all attributes must be in quotes

    <img src="dog.gif" /> not <IMG SRC=dog.gif>

  • Attribute minimization is not allowed (mostly in forms)

    <option selected> must become <option selected="selected">

  • The id attribute replaces the name attribute (but both can be used)

  • The following tags are required by the DOCTYPE Declaration


  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    </head>

    <body>
    </body>
    </html>

    HTML5

    Only requires:

    <!DOCTYPE html>

    Here's more info on HTML5

Make sure to include the Doctype declaration in all your documents! You can configure Dreamweaver to automatically include the Doctype by selecting Edit, Preferences, and selecting the version of HTML under the New Document category.

 

Reference

Basic Tags
<html> </html> Specifies a document as an HTML document
<head> </head> Holds information about the web page including author, description, and keywords
<body> </body> Holds visible information in the web page

Header Tags
<title></title> Displays title in browser's title bar
<meta /> Holds information about web page including keywords and description

Body Attributes (replaced with CSS!)
<body">
Sets the background color
Text Tags
<pre></pre>
Allows for display of preformatted text
<h1></h1>
Specifies the largest heading
<h6></h6>
Specifies the smallest heading
<b></b> (no longer used)
Specifies bold text
<i></i> (no longer used)
Specifies italic text
<tt></tt>
Specifies typewriter text
<cite></cite>
Specifies a citation
<em></em>
Specifies italics (emphasis)
<strong></strong>
Specifies bold

Links
<a href="URL"> link description </a>
Creates a hyperlink to a local or remote web page
<a href="mailto:theemailaddress"></a>
Creates a mailto link that opens email program on click
<a name="targetname"></a>
Creates a target location within the web page
<a href="#TargeName"></a>
Links to a target location within the web page

Structure
<p></p>
Creates a new paragraph with one space above paragraph
<br / >
Drops down one line (line break)
<blockquote> </blockquote>
Sets of text (Indents) from both sides
<dl></dl>
Specifies a definition list
<dt>
Specifies a definition term
<dd>
Specifies a definition

Bullet or Number Lists
<ol></ol>
Creates a numbered list
<ul></ul>
Creates an unordered bulleted list
<li></li>
Precedes each list item and adds a number or a bullet

Alignment
<div> </div>
Names a section of your Web site for use by CSS.

Images
<img src="name" / > Adds an image by specifying the source location
<img src="name" align="?" />
Aligns an image (left, right, center; bottom, top, middle)

Horizontal Rules
<hr />
Creates a horizontal rule

Tables
<table></table>
Creates a table
<tr></tr>
Creates rows in a table
<td></td>
Creates a cell in a row
<th></th>
Creates table header in a row

Table Attributes (CSS can handle most of this!)
<th colspan="#">
Specifies number of columns for a cell to span
<td colspan="#">
Specifies number of columns for a cell to span
<td rowspan="#">
Specifies number of rows for a cell to span


Forms
<form></form>
Creates a form
<select multipe="multiple" name="NAME" size="?"></select>
Creates a scrolling menu. Size sets the number of menu items visible before scrolling
<option>
Specifies items in the menu box
<select name="NAME"></select>
Creates a drop-down box (menu)
<option>
Specifies items in a drop-down box
<textarea name="NAME" cols="?" rows="?"></textarea>
Creates a text box area. Columns set the width; rows set the height.
<input type="checkbox" name="NAME">
Creates a checkbox. Text follows tag.
<input type="radio" name="NAME" value="x">
Creates a radio button. Text follows tag
<input type=text name="txtBox" size=?>
Creates a text box. Size sets length in characters.
<input type="submit" value="NAME">
Creates a Submit button
<input type="image" border="?" name="NAME" src="name.gif">
Creates a Submit button using an image
<input type="reset">
Creates a Reset button

There are many more. Google what you need!

Information obtained at:
www.webmonkey.com
www.w3schools.com

-->
DropBox
Shared
Files






Random Number

Copyright © 2004-2018 Chagoyan.com/Chaggy.net | All Rights Reserved

All courses at Coalinga High School are open to all students without regard to race, color, national origin, sex, disability, sexual orientation, gender, ethnic group identification, ancestry, or religion.