The World Wide Web Consortium (http://w3c.org) sets the standards for HTML and its related languages.
Each markup code represents an HTML element. Each element has a purpose. Most elements are coded as a pair of tags: an opening tag and a closing tag. Tags are enclosed in angle brackets, "<" and ">" symbols.
What is HTML5 ? Newest draft version of HTML/XHTML. Adds new functionality: Edit form data, Native video and audio, And more.
Document Type Definition (DTD): identifies the version of HTML contained in your document. Placed at the top of a web page document ex of XHTML transitional DTD: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
Html5 ex: <!DOCTYPE html>
HTML5 Webpage: <!DOCTYPE html>
<html lang="en">
<head> (Contains information that describes the Web page document)
<title>Page Title Goes Here</title>
<meta charset="utf-8">
</head>
<body> (Contains text and elements that display in the Web page document)
... body text and more HTML5 tags go here ...
</body>
</html>
Line Break element: <br> Stand-alone, or void tag. Causes the next element or text to display on a new line.
Blockquote element: <blockquote> Indents a block of text for special emphasis, Configures empty space above and below.
<ul>Contains the unordered list. <li> Contains an item in the list. <ol> Contains the ordered list. <dl>Contains the description list. <dt> Contains a term/phrase/sentence,Configures empty space above and below the text. <dd> Contains a description of the term/phrase/sentence, Indents the text, Configures empty space above and below the text.
Character Code
© ©
< <
> >
& &
Anchor Element: Specifies a hyperlink reference (href) to a file. Text between the <a> and </a> is displayed on the web page. <a href="contact.html">Contact Us</a> href Attribute Indicates the file name or URL.
Absolute link: Link to a different website <a href="http://yahoo.com">Yahoo</a>
Relative link: Link to pages on your own site <a href="index.htm">Home</a>
CSS: Greater typography and page layout control, Style is separate from structure, Styles can be stored in a separate document and associated with the web page, Potentially smaller documents, Easier site maintenance
CASCADING STYLESHEET: Inline Styles: body section, HTML style attribute, apply only to the specific element
-Embedded Styles: head section, HTML style element, apply to the entire web page document
-External Styles: Separate text file with .css file extension, Associate with a HTML link element in the head section of a web page
-Imported Styles: Similar to External Styles, We’ll concentrate on the other three types of styles.
CSS SYNTAX SAMPLE :Configure a web page to display blue text and yellow background. body { color: blue; background-color: yellow; }
This could also be written using hexadecimal color values as shown below. body { color: #0000FF; background-color: #FFFF00; }
CONFIGURING CSS: Example: configure red color text in an <h1> element:
<h1 style="color:#ff0000">Heading text is red</h1>
Example 2: configure the red text in the heading, configure a gray background in the heading: Separate style rule declarations with ;
<h1 style="color:#FF0000;background-color:#cccccc">This is displayed as a red heading with gray background</h1>
CONFIGURING TEXT WITH CSS:CSS properties for configuring text:
-font-weight: Configures the boldness of text. font-style: Configures text to an italic style. font-size: Configures the size of the text. font-family: Configures the font typeface of the text. Color- color of text
-line-height:Configures the height of the line of text (use the value 200% to appear double-spaced) -text-align: Configures alignment of text within a block display element. -text-indent: Configures