Example Explained: K 9 Computer Labs

[K 9 COMPUTER LABS]
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Example Explained
The DOCTYPE declaration defines the document type
The text between <html> and </html> describes the web page
The text between <body> and </body> is the visible page content
The text between <h1> and </h1> is displayed as a heading
The text between <p> and </p> is displayed as a paragraph
What is HTML?
HTML is a language for describing web pages.
HTML stands for Hyper Text Markup Language
HTML is a markup language
A markup language is a set of markup tags
The tags describe document content
HTML documents contain HTML tags and plain text
HTML documents are also called web pages
HTML Tags
HTML markup tags are usually called HTML tags.
HTML tags are keywords (tag names) surrounded by angle brackets like <html>
HTML tags normally come in pairs like <p> and </p>
The first tag in a pair is the start tag, the second tag is the end tag
[K 9 COMPUTER LABS]
The end tag is written like the start tag, with a slash before the tag name
Start and end tags are also called opening tags and closing tags
<tagname>content</tagname>
HTML Elements
In HTML, most elements are written with a start tag (e.g. <p>) and an end tag (e.g. </p>), with the content in between:
<p>This is a paragraph.</p>
Web Browsers
The purpose of a web browser (such as Google Chrome, Internet Explorer, Firefox, Safari) is to read HTML documents
and display them as web pages.
The browser does not display the HTML tags, but uses the tags to determine how the content of the HTML page is to be
presented/displayed to the user:
[K 9 COMPUTER LABS]
HTML Versions
Since the early days of the web, there have been many versions of HTML:
Version
HTML
HTML+
HTML 2.0
HTML 3.2
HTML 4.01
XHTML
HTML5
Year
1991
1993
1995
1997
1999
2000
2012
The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration helps the browser to display a web page correctly.
There are many different documents on the web, and a browser can only display an HTML page 100% correctly if it
knows the HTML version and type used.
Common Declarations
HTML5
<!DOCTYPE html>
[K 9 COMPUTER LABS]
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML Editors
Write HTML Using Notepad or TextEdit
HTML can be edited by using a professional HTML editor like:
Adobe Dreamweaver
Microsoft Expression Web
CoffeeCup HTML Editor
However, for learning HTML we recommend a text editor like Notepad (PC) or TextEdit (Mac).
We believe using a simple text editor is a good way to learn HTML.
Follow the 4 steps below to create your first web page with Notepad.
Step 1: Open Notepad

To open Notepad in Windows 7 or earlier:
Click Start (bottom left on your screen). Click All Programs. Click Accessories. Click Notepad.
To open Notepad in Windows 8 or later:
Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad.
Step 2: Write Some HTML

Write or copy some HTML into Notepad.
Example
<!DOCTYPE html>
<html>
<body>
[K 9 COMPUTER LABS]
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Step 3: Save the HTML Page

Save the file on your computer.
Select File -> Save as in the Notepad menu.
When saving an HTML file, use either the .htm or the .html file extension. There is no difference, it is entirely up to you.
Step 4: View HTML Page in Your Browser

Double-click your saved HTML file, and the result will look much like this:
HTML Basic Examples

Don't worry if the examples use tags you have not learned.
You will learn about them in the next chapters.
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
[K 9 COMPUTER LABS]
Example
<h1>This is a heading</h1>
HTML Paragraphs
HTML paragraphs are defined with the <p> tag.
Example
<p>This is another paragraph.</p>
HTML Links
HTML links are defined with the <a> tag.
Example
<a href="http://www.k9computerlabs.com">This is a link</a>
Note: The link address is specified in the href attribute.

(You will learn about attributes in a later chapters).
HTML Images
HTML images are defined with the <img> tag.
Example
<img src="k9image.jpg" alt="k9image.com" width="104" height="142">
Note: The filename and the size of the image are provided as attributes.
Don't Forget the End Tag

Some HTML elements might display correctly even if you forget the end tag:
[K 9 COMPUTER LABS]
<p>This is a paragraph
The example above works in most browsers, because the closing tag is considered optional.
Never rely on this. Many HTML elements will produce unexpected results and/or errors if you forget the end tag .
Empty HTML Elements

HTML elements with no content are called empty elements.
<br> is an empty element without a closing tag (the <br> tag defines a line break).
Tip: In XHTML, all elements must be closed. Adding a slash inside the start tag, like <br />, is the proper way of closing
empty elements in XHTML (and XML).
Line Break Tag

Whenever you use the <br /> element, anything following it starts from the next line. This tag is an example of an empty
element, where you do not need opening and closing tags, as there is nothing to go in between them.
The <br /> tag has a space between the characters br and the forward slash. If you omit this space, older browsers will
have trouble rendering the line break, while if you miss the forward slash character and just use <br> it is not valid in
XHTML
HTML Tip: Use Lowercase Tags

HTML tags are not case sensitive: <P> means the same as <p>. Many web sites use uppercase HTML tags.
World Wide Web Consortium (W3C) recommends to use lowercase tags starting from HTML 4.
Example
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br />
You delivered your assignment ontime.<br />
Thanks<br />
Mahnaz</p>
</body>
</html>
This will produce following result:
[K 9 COMPUTER LABS]
Hello
You delivered your assignment ontime.
Thanks
Mahnaz
Centering Content
You can use <center> tag to put any content in the center of the page or any table cell.
Example
<!DOCTYPE html>
<html>
<head>
<title>Centring Content Example</title>
</head>
<body>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
</body>
</html>

This text is not in the center.
This text is in the center.
Horizontal Lines
Horizontal lines are used to visually break up sections of a document. The <hr> tag creates a line from the current
position in the document to the right margin and breaks the line accordingly.
For example you may want to give a line between two paragraphs as in the given example below:
Example
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>
</html>

This is paragraph one and should be on top
This is paragraph two and should be at bottom
[K 9 COMPUTER LABS]
Again <hr /> tag is an example of the empty element, where you do not need opening and closing tags, as there is nothing
to go in between them.
The <hr /> element has a space between the characters hr and the forward slash. If you omit this space, older browsers
will have trouble rendering the horizontak line, while if you miss the forward slash character and just use <hr> it is not
valid in XHTML
Attributes provide additional information about HTML elements.
HTML Attributes
HTML elements can have attributes
Attributes provide additional information about an element
Attributes are always specified in the start tag
Attributes come in name/value pairs like: name="value"
Attribute Example
HTML links are defined with the <a> tag. The link address is specified in the href attribute:
Example
<a href="http://www.k9computerlabs.com">This is a link</a>
Always Quote Attribute Values

Attribute values should always be enclosed in quotes.
Double style quotes are the most common, but single style quotes are also allowed.
Tip: In some rare situations, when the attribute value itself contains quotes, it is necessary to use
single quotes: name='John "ShotGun" Nelson'
HTML Tip: Use Lowercase Attributes

Attribute names and attribute values are case-insensitive.
[K 9 COMPUTER LABS]
However, the World Wide Web Consortium (W3C) recommends lowercase attributes/attribute values in their HTML 4
recommendation.
Newer versions of (X)HTML will demand lowercase attributes.
HTML Attributes Reference

A complete list of legal attributes for each HTML element is listed in our: HTML Tag Reference.
Below is a list of some attributes that can be used on any HTML element:
Attribute
Description
class
Specifies one or more classnames for an element (refers to a class in a style sheet)
id
Specifies a unique id for an element
style
Specifies an inline CSS style for an element
title
Specifies extra information about an element (displayed as a tool tip)
For more information about global attributes: HTML Global Attributes Reference.
Note: Browsers automatically add some empty space (a margin) before and after each heading.
Headings Are Important

Use HTML headings for headings only. Don't use headings to make text BIG or bold.
Search engines use your headings to index the structure and content of your web pages.
Since users may skim your pages by its headings, it is important to use headings to show the document structure.
H1 headings should be used as main headings, followed by H2 headings, then the less important H3 headings, and so on.
HTML Output - Useful Tips

You cannot be sure how HTML will be displayed. Large or small screens, and resized windows will create different
results.
With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code.
[K 9 COMPUTER LABS]
The browser will remove extra spaces and extra lines when the page is displayed. Any number of lines count as one line,
and any number of spaces count as one space.
<!DOCTYPE html>
<html>
<body>
<p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.

</p>
<p>Note that your browser ignores the layout in the HTML source code!</p>
</body>
</html>
My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to
me.
Note that your browser ignores the layout in the HTML source code!
[K 9 COMPUTER LABS]
HTML Text Formatting

<!DOCTYPE html>
<html>
<body>
<p><b>This text is bold</b></p>
<p><strong>This text is strong</strong></p>
<p><i>This text is italic</i></p>
<p><em>This text is emphasized</em></p>
<p><code>This is computer output</code></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
</body>
</html>
Output
This text is bold

This text is italic
This is computer output
This is subscript and
superscript
HTML Formatting Tags

HTML uses tags like <b> and <i> for formatting output, like bold or italic text.
These HTML tags are called formatting tags
Often <strong> renders as <b>, and <em> renders as <i>.
However, there is a difference in the meaning of these tags:
<b> or <i> defines bold or italic text only.
[K 9 COMPUTER LABS]
<strong> or <em> means that you want the text to be rendered in a way that the user understands
as "important". Today, all major browsers render strong as bold and em as italics. However, if a
browser one day wants to make a text highlighted with the strong feature, it might be cursive for
example and not bold!
HTML Text Formatting Tags

Tag
Description
<b>
Defines bold text
<em>
Defines emphasized text
<i>
Defines a part of text in an alternate voice or

mood
<small>
Defines smaller text
<strong> Defines important text

<sub>
Defines subscripted text
<sup>
Defines superscripted text
<ins>
Defines inserted text
<del>
Defines deleted text
<mark>
Defines marked/highlighted text
#Practice
HTML <ins> Tag
Example
A text with a deleted part, and a new, inserted part:
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
<!DOCTYPE html>
<html>
<body>
[K 9 COMPUTER LABS]
</body>
</html>
#Practice
HTML <del> Tag
Example
A text with a deleted part, and a new, inserted part:
Definition and Usage

The <del> tag defines text that has been deleted from a document.
<!DOCTYPE html>
<html>
<body>
</body>
</html>

The <ins> tag defines a text that has been inserted into a document.
Tip: Also look at the <del> tag to markup deleted text.
Browsers will normally strike a line through deleted text and underline inserted text.
[K 9 COMPUTER LABS]
Tips and Notes

Tip: Use <ins> it together with <del> to markup updates and modifications in a document.
Differences Between HTML 4.01 and HTML5

NONE.
#Practice
HTML <mark> Tag
Example
Highlight parts of a text:
<p>Do not forget to buy <mark>milk</mark> today.</p>

The <mark> tag defines marked text.
Use the <mark> tag if you want to highlight parts of your text.
The <mark> tag is new in HTML5.

<!DOCTYPE html>
<html>
<body>
[K 9 COMPUTER LABS]
<p>Do not forget to buy <mark>milk</mark> today.</p>
</body>
</html>
HTML "Computer Output" Tags

Tag
Description
<code
Defines computer code text
>
<kbd> Defines keyboard text
<sam Defines sample computer
p>
code
<var> Defines a variable
<pre> Defines preformatted text
<!DOCTYPE html>
<html>
<body>
<em>Emphasized text</em><br>
<strong>Strong text</strong><br>
<dfn>Definition term</dfn><br>
<code>A piece of computer code</code><br>
<samp>Sample output from a computer program</samp><br>
<kbd>Keyboard input</kbd><br>
<var>Variable</var>
</body>
</html>

The <pre> tag defines preformatted text.
Text in a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks.
[K 9 COMPUTER LABS]
<!DOCTYPE html>
<html>
<body>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both
spaces and
line breaks
</pre>
</body>
</html>
HTML Citations, Quotations, and Definition Tags

Tag
Description
<abbr>
Defines an abbreviation or acronym
<address>
Defines contact information for the author/owner of a

document
<bdo>
Defines the text direction
<blockquote
Defines a section that is quoted from another source
>
<q>
Defines an inline (short) quotation
<cite>
Defines the title of a work
<dfn>
Defines a definition term \\ <dfn>Definition

term</dfn><br>
[K 9 COMPUTER LABS]
#Practice
HTML <abbr> Tag
Example
An abbreviation is marked up as follows:
The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.

The <abbr> tag indicates an abbreviation or an acronym, like "WWW" or "NATO".
By marking up abbreviations you can give useful information to browsers, spell checkers, translation systems and searchengine indexers.
Tips and Notes

Tip: The global title attribute can be used in the <abbr> tag to show the full version of the abbreviation/acronym when
you mouse over the <abbr> element.
<!DOCTYPE html>
<html>
<body>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
</body>
</html>
#Practice
HTML <address> Tag
[K 9 COMPUTER LABS]
Example
Contact information for Example.com:
<!DOCTYPE html>
<html>
<body>
<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
</body>
</html>

The <address> tag defines the contact information for the author/owner of a document or an article.
If the <address> element is inside the <body> element, it represents contact information for the document.
If the <address> element is inside an <article> element, it represents contact information for that article.
The text in the <address> element usually renders in italic. Most browsers will add a line break before and after the
address element.
#Practice
HTML <bdo> Tag
Example
[K 9 COMPUTER LABS]
Specify the text direction:
<!DOCTYPE html>
<html>
<body>
<p>This paragraph will go left-to-right.</p>
<p><bdo dir="rtl">This paragraph will go right-to-left.</bdo></p>
</body>
</html>
#Practice
HTML <blockquote> Tag
Example
A section that is quoted from another source:
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works
in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockquote>
<!DOCTYPE html>
<html>
<body>
<h1>About WWF</h1>
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization,
WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5
million globally.
</blockquote>
[K 9 COMPUTER LABS]
</body>
</html>

The <blockquote> tag specifies a section that is quoted from another source.
Browsers usually indent <blockquote> elements.
HTML <q> Tag
Example
Mark up a short quotation:

The <q> tag defines a short quotation.
Browsers normally insert quotation marks around the quotation.
<!DOCTYPE html>
<html>
<body>
<p>WWF's goal is to:

<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>
</body>
</html>
HTML <cite> Tag

<!DOCTYPE html>
<html>
<body>
[K 9 COMPUTER LABS]
<img src="img_the_scream.jpg" width="220" height="277" alt="The Scream">
<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>
</body>
</html>
HTML Comment Tags

Comment tags  are used to insert comments in HTML.
You can add comments to your HTML source by using the following syntax:

Note: There is an exclamation point (!) in the opening tag, but not in the closing tag.
Comments are not displayed by the browser, but they can help document your HTML.
With comments you can place notifications and reminders in your HTML:
Example


Comments are also great for debugging HTML, because you can comment out HTML lines of code, one at a time, to
search for errors:
Example

Conditional Comments
You might stumble upon conditional comments in HTML:

Conditional comments defines HTML tags to be executed by IE only. We will not use conditional comments here.
[K 9 COMPUTER LABS]
Software Program Tags

HTML comments tags can also be generated by various HTML software programs.
For example  tags wrapped inside HTML comments by FrontPage and Expression Web.
As a rule, let these tags stay, to help support the software that created them.
HTML Hyperlinks (Links)

The HTML <a> tag defines a hyperlink.
A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another document.
When you move the cursor over a link in a Web page, the arrow will turn into a little hand.
The most important attribute of the <a> element is the href attribute, which indicates the link's destination.
By default, links will appear as follows in all browsers:
An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red
HTML Link Syntax

The HTML code for a link is simple. It looks like this:
<a href="url">Link text</a>
The href attribute specifies the destination of a link.
Example
<a href="http://www.k9computerlabs.com/">Visit k9computerlabs </a>
which will display like this:

Visit: k9computerlabs
Clicking on this hyperlink will send the user to k9computerlabs s' homepage.
Tip: The "Link text" doesn't have to be text. It can be an image or any other HTML element.
[K 9 COMPUTER LABS]
HTML Links - The target Attribute

The target attribute specifies where to open the linked document.
The example below will open the linked document in a new browser window or a new tab:
Example
<a href="http://www.k9computerlabs.com/" target="_blank">Visit k9computerlabs!</a>
HTML Links - The id Attribute

The id attribute can be used to create a bookmark inside an HTML document.
Tip: Bookmarks are not displayed in any special way. They are invisible to the reader.
Example
An anchor with an id inside an HTML document:
<a id="tips">Useful Tips Section</a>
Create a link to the "Useful Tips Section" inside the same document:
<a href="#tips">Visit the Useful Tips Section</a>
Or, create a link to the "Useful Tips Section" from another page:
<a href="http://www. k9computerlabs.com/html_links.htm#tips">
Visit the Useful Tips Section</a>
Basic Notes - Useful Tips

Note: Always add a trailing slash to subfolder references. If you link like this: href="http://www.
k9computerlabs.com/html", you will generate two requests to the server, the server will first add a slash to the address,
and then create a new request like this: href="http://www.k9computerlabs.com/html/".
The HTML <head> Element

The <head> element is a container for all the head elements. Elements inside <head> can include scripts, instruct the
browser where to find style sheets, provide meta information, and more.
The following tags can be added to the head section: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.
The HTML <title> Element
[K 9 COMPUTER LABS]
The <title> tag defines the title of the document.
The <title> element is required in all HTML/XHTML documents.
The <title> element:
defines a title in the browser toolbar
provides a title for the page when it is added to favorites
displays a title for the page in search-engine results
A simplified HTML document:

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
The HTML <base> Element

The <base> tag specifies the base URL/target for all relative URLs in a page:
<head>
<base href="http://www.k9computerlabs.com/images/" target="_blank">
</head>
The HTML <link> Element

The <link> tag defines the relationship between a document and an external resource.
The <link> tag is most used to link to style sheets:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
The HTML <style> Element

The <style> tag is used to define style information for an HTML document.
Inside the <style> element you specify how HTML elements should render in a browser:
[K 9 COMPUTER LABS]
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
The HTML <meta> Element

Metadata is data (information) about data.
The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be
machine parsable.
Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other
metadata.
The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web
services.
<meta> tags always go inside the <head> element.
<meta> Tags - Examples of Use

Define keywords for search engines:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
Define a description of your web page:

<meta name="description" content="K9 study material on HTML and CSS">
Define the author of a page:

<meta name="author" content="Hege Refsnes">
Refresh document every 30 seconds:

<meta http-equiv="refresh" content="30">
The HTML <script> Element

The <script> tag is used to define a client-side script, such as a JavaScript.
The <script> element will be explained in a later chapter.
[K 9 COMPUTER LABS]
HTML head Elements #Practice (Given in javascript section page:

106)
Tag
Description
<head>
Defines information about the document
<title>
Defines the title of a document
<base>
Defines a default address or a default target for all links on a page
<link>
Defines the relationship between a document and an external resource
<meta>
Defines metadata about an HTML document
<script>
Defines a client-side script
<style>
Defines style information for a document
HTML Styles - CSS

CSS (Cascading Style Sheets) is used to style HTML elements.
<!DOCTYPE html>
<html>
<body>
<div style="opacity:0.5;position:absolute;left:50px;width:300px;height:150px;background-color:#40B3DF;"></div>
<div style="font-family:verdana;padding:20px;border-radius:10px;border:10px solid #EE872A;">
<div style="opacity:0.3;position:absolute;left:120px;width:100px;height:200px;background-color:#8AC007;"></div>
<h3>Look! Styles and colors</h3>
<div style="letter-spacing:12px;">Manipulate Text</div>
<div style="color:#40B3DF;">Colors <span style="background-color:#B4009E;color:#ffffff;">Boxes</span></div>
<div style="color:#000000;">and more...</div>
</div>
</body>
</html>
[K 9 COMPUTER LABS]
Look! Styles and colors
M a n i p u l a t e
C o l o r s ,
T e x t
B o x e s
and more...
Styling HTML with CSS

CSS was introduced together with HTML 4, to provide a better way to style HTML elements.
CSS can be added to HTML in the following ways:
Inline - using the style attribute in HTML elements
Internal - using the <style> element in the <head> section
External - using an external CSS file
The preferred way to add CSS to HTML, is to put CSS syntax in separate CSS files.
However, in this HTML study material we will introduce you to CSS using the style attribute. This is done to simplify the
examples.
Inline Styles
An inline style can be used if a unique style is to be applied to one single occurrence of an element.
To use inline styles, use the style attribute in the relevant tag. The style attribute can contain any CSS property. The
example below shows how to change the text color and the left margin of a paragraph:
<p style="color:blue;margin-left:20px;">This is a paragraph.</p>
HTML Style Example - Background Color

The background-color property defines the background color for an element:
Example
<!DOCTYPE html>
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>
</html>
The background-color property makes the "old" bgcolor attribute obsolete.
[K 9 COMPUTER LABS]
HTML Style Example - Font, Color and Size

The font-family, color, and font-size properties defines the font, color, and size of the text in an element:
Example
<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>
The font-family, color, and font-size properties make the old <font> tag obsolete.
HTML Style Example - Text Alignment

The text-align property specifies the horizontal alignment of text in an element:
Example
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
</body>
</html>
The text-align property makes the old <center> tag obsolete.
Internal Style Sheet

An internal style sheet can be used if one single document has a unique style. Internal styles are defined in the <head>
section of an HTML page, by using the <style> tag, like this:
<head>
<style>
p {color:blue;}
</style>
</head>
External Style Sheet
[K 9 COMPUTER LABS]
An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the
look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag
goes inside the <head> section:
<head>
</head>
HTML Style Tags

Tag
Description
<style>
<link>
Defines the relationship between a document and an external resource
Deprecated Tags and Attributes

In HTML 4, several tags and attributes were used to style documents. These tags are not supported in newer versions of
HTML.
Avoid using the elements: <font>, <center> and <strike>, and the attributes: color and bgcolor.
[K 9 COMPUTER LABS]
<!DOCTYPE html>
<html>
<body>
<h2>Spectacular Mountains</h2>
<img src="pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px">
</body>
</html>
Always specify the size of an image. If the size is unknown, the page will flicker while it loads.
HTML Images Syntax

In HTML, images are defined with the <img> tag.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The src (source) attribute defines the url (web address) of the image:
<img src="url" alt="some_text">
The alt Attribute

The alt attribute specifies an alternate text for the image, if it cannot be displayed.
The value of the alt attribute should describe the image in words:
Example
<img src="html5.gif" alt="The official HTML5 Icon">
The alt attribute is required. A web page will not validate correctly without it.
HTML Screen Readers

Screen readers are software programs that can read what is displayed on a screen.
Used on the web, screen readers can "reproduce" HTML as text-to-speech, sound icons, or braille output.
Screen readers are used by people who are blind, visually impaired, or learning disabled.
Screen readers can read the alt attribute.
Image Size - Width and Height
[K 9 COMPUTER LABS]
You can use the style attribute to specify the width and height of an image.
The values are specified in pixels (use px behind the value):
Example
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px">
Alternatively, you can use width and height attributes.

The values are specified in pixels (without px behind the value):
Example
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
Width and Height or Style?

Both width and height and the style attribute, are specified in the HTML5 standard.
Since both are allowed, you are free to choose which one to use.
Note: Using the style attribute prevents external styles to set default size to images:
Example
<!DOCTYPE html>
<html>
<head>
<style>
img { width:100%; }
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px">
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
</body>
</html>
Images in Another Folder

Browsers expect that the url (web address) of an image, is the same as the url of the HTML page.
If not specified, it is expected that images are stored in the same folder as the web page.
[K 9 COMPUTER LABS]
However, it is common on the web, to store images in a sub-folder, and refer to the folder in the image name:
Example
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px">
If a browser cannot find an image, it will display a broken link icon:
Example
<img src="wrongname.gif" alt="HTML5 Icon" style="width:128px;height:128px">
Images on Another Server

Some web sites store their images on image servers.
Actually, you can access images from any web address in the world:
Example
<img src="http://www.k9computerlabs.com/images/k9_green.jpg">
Moving Images
The GIF standard allows moving images:
Example
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px">
Note that the syntax of inserting moving images is no different from non-moving images.
Using an Image as a Link

It is common to use images as links:
Example
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0">
</a>
We have added border:0 to prevent IE9 (and earlier) from displaying a border around the image.
[K 9 COMPUTER LABS]
Image Maps
For an image, you can create an image map, with clickable areas:
Example
<img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
Image Floating
You can let an image float to the left or right of a paragraph:
Example
<p>
<img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px">
A paragraph with an image. The image floats to the left of the text.
</p>
HTML images Summary
Use <img> to define images
Use the src attribute to define the image file name
Use the alt attribute to define an alternative text
Use the width and height attributes to define the image size
Use CSS style to define the width and height (alternatively)
Use CSS style to define image floating
Use the usemap attribute to point to an image map
Use <map> to define an image map
Use <area> to define image map areas

Loading images takes time. Large images can slow down your page. Use images carefully.
[K 9 COMPUTER LABS]
HTML Table Example

Number
1
2
3
4
First Name
Eve
John
Adam
Jill
<!DOCTYPE html>
<html>
<body>
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
Last Name
Jackson
Doe
Johnson
Smith
Points
94
80
67
50
[K 9 COMPUTER LABS]
</body>
</html>
Defining HTML Tables

Example explained:
Tables are defined with the <table> tag.
Tables are divided into table rows with the <tr> tag.
Table rows are divided into table data with the <td> tag.
A table row can also be divided into table headings with the <th> tag.
Table data <td> are the data containers of the table.
They can contain all sorts of HTML elements like text, images, lists, other tables, etc.
An HTML Table with a Border Attribute

If you do not specify a border for the table, it will be displayed without borders.
A border can be added using the border attribute:
<!DOCTYPE html>
<html>
<body>
<table border="1" style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
[K 9 COMPUTER LABS]
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
The border attribute is on its way out of the HTML standard! It is better to use CSS.
To add borders, use the CSS border property:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
[K 9 COMPUTER LABS]
<body>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Remember to define borders for both the table and the table cells.
[K 9 COMPUTER LABS]
An HTML Table with Collapsed Borders

If you want the borders to collapse into one border, add CSS border-collapse:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border-collapse: collapse;
}
</style>
</head>
<body>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
[K 9 COMPUTER LABS]
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
An HTML Table with Cell Padding

Cell padding specifies the space between the cell content and its borders.
If you do not specify a padding, the table cells will be displayed without padding.
To set the padding, use the CSS padding property:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
}
[K 9 COMPUTER LABS]
th, td {
padding: 15px;
}
</style>
</head>
<body>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
[K 9 COMPUTER LABS]
</table>
<p>Try to change the padding to 5px.</p>
</body>
</html>
HTML Table Headings

Table headings are defined with the <th> tag.
By default, all major browsers display table headings as bold and centered:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
}
th, td {
padding: 5px;
}
</style>
</head>
<body>
<tr>
<th>Firstname</th>
<th>Lastname</th>
[K 9 COMPUTER LABS]
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
To left-align the table headings, use the CSS text-align property:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
[K 9 COMPUTER LABS]
}
th, td {
padding: 5px;
}
th {
text-align: left;
}
</style>
</head>
<body>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
[K 9 COMPUTER LABS]
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
An HTML Table with Border Spacing

Border spacing specifies the space between the cells.
To set the border spacing for a table, use the CSS border-spacing property:
table {
border-spacing: 5px;
}
example
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
padding: 5px;
}
table {
border-spacing: 15px;
}
</style>
</head>
[K 9 COMPUTER LABS]
<body>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<p>Try to change the border-spacing to 5px.</p>

</body>
</html>
Table Cells that Span Many Columns

To make a cell span more than one column, use the colspan attribute:
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
[K 9 COMPUTER LABS]
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
Example
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<h2>Cell that spans two columns:</h2>
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
[K 9 COMPUTER LABS]
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
Table Cells that Span Many Rows

To make a cell span more than one row, use the rowspan attribute:
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
Example
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
}
th, td {
padding: 5px;
[K 9 COMPUTER LABS]
text-align: left;
}
</style>
</head>
<body>
<h2>Cell that spans two rows:</h2>
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
An HTML Table With a Caption

To add a caption to a table, use the <caption> tag:
<caption>Monthly savings</caption>
<tr>
[K 9 COMPUTER LABS]
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
Example
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<caption>Monthly savings</caption>
<tr>
[K 9 COMPUTER LABS]
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
</body>
</html>
Different Styles for Different Tables

Most of the examples above use a style attribute (width="100%") to define the width of each table.
This makes it easy to define different widths for different tables.
The styles in the <head> section, however, define a style for all tables in a page.
To define different styles for different tables, add a class attribute to the table:
<table class="names">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
[K 9 COMPUTER LABS]
Now you can define a different styles for this table:
table.names {
width: 100%;
background-color: #f1f1c1;
}
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
}
th, td {
padding: 5px;
text-align: left;
}
table.names {
width: 100%;
}
</style>
</head>
<body>
<tr>
<th>First Name</th>
[K 9 COMPUTER LABS]
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<br>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
[K 9 COMPUTER LABS]
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
And add more styles:

table.names tr:nth-child(even) {
}
table.names tr:nth-child(odd) {
background-color: #ffffff;
}
table.names th {
color: white;
background-color: #333333;
}
<!DOCTYPE html>
[K 9 COMPUTER LABS]
<html>
<head>
<style>
table {
width:100%;
}
table, th, td {
}
th, td {
padding: 5px;
text-align: left;
}
table.names tr:nth-child(even) {
}
table.names tr:nth-child(odd) {
background-color:#ffffff;
}
table.names th
background-color: #c1c1c1;
}
</style>
[K 9 COMPUTER LABS]
</head>
<body>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
[K 9 COMPUTER LABS]
</table>
<br>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
[K 9 COMPUTER LABS]
</html>
Summary
Use the HTML <table> element to define a table
Use the HTML <tr> element to define a table row
Use the HTML <td> element to define a table data
Use the HTML <th> element to define a table heading
Use CSS border property to define a border
Use CSS border-collapse property to collapse cell borders
Use CSS padding property to add padding to cells
Use CSS text-align property to align cell text
Use CSS border-spacing property to set the spacing between cells
HTML Table Tags

Tag
Description
<table>
Defines a table
<th>
Defines a header cell in a table
<tr>
Defines a row in a table
<td>
Defines a cell in a table
<caption>
Defines a table caption
<colgroup>
Specifies a group of one or more columns in a table for formatting
<col>
Specifies column properties for each column within a <colgroup> element
<thead>
Groups the header content in a table
<tbody>
Groups the body content in a table
<tfoot>
Groups the footer content in a table
#Practice
HTML <colgroup> Tag
Example
[K 9 COMPUTER LABS]
Set the background color of the three columns with the <colgroup> and <col> tags:
<table>
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>
The <colgroup> tag specifies a group of one or more columns in a table for formatting.
The <colgroup> tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each
row.
Note: The <colgroup> tag must be a child of a <table> element, after any <caption> elements and before any <thead>,
<tbody>, <tfoot>, and <tr> elements.
Tip: To define different properties to a column within a <colgroup>, use the <col> tag within the <colgroup> tag.
<!DOCTYPE html>
<html>
<head>
<style>
table,th,td
{
border:1px solid black;
}
</style>
</head>
[K 9 COMPUTER LABS]
<body>
<table>
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
<tr>
<td>5869207</td>
<td>My first CSS</td>
<td>$49</td>
</tr>
</table>
[K 9 COMPUTER LABS]
</body>
</html>
#Practice
HTML <thead> Tag
Example
An HTML table with a <thead>, <tfoot>, and a <tbody> element:
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>

The <thead> tag is used to group header content in an HTML table.
The <thead> element is used in conjunction with the <tbody> and <tfoot> elements to specify each part of a table (header,
body, footer).
Browsers can use these elements to enable scrolling of the table body independently of the header and footer. Also, when
printing a large table that spans multiple pages, these elements can enable the table header and footer to be printed at the
top and bottom of each page.
[K 9 COMPUTER LABS]
The <thead> tag must be used in the following context: As a child of a <table> element, after any <caption>, and
<colgroup> elements, and before any <tbody>, <tfoot>, and <tr> elements.
<!DOCTYPE html>
<html>
<head>
<style>
thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}
table,th,td
{
border:1px solid black;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
[K 9 COMPUTER LABS]
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
<p><b>Tip:</b> The thead, tbody, and tfoot elements will not affect the layout of the table by default. However, you can use CSS to
style these elements.</p>
</body>
</html>
HTML Lists
HTML can have Unordered Lists, Ordered Lists, or Description Lists:

Unordered HTML List
Ordered HTML List
The first item
1.
The first item
The second item
2.
The second item
HTML Description List

The first item
Description of item
The second item
Description of item
[K 9 COMPUTER LABS]
The third item
3.
The third item
The fourth item
4.
The fourth item
Unordered HTML Lists

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles).
Unordered List:
Syntax:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
example
<!DOCTYPE html>
<html>
<body>
<h2>Unordered List with Default Bullets</h2>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
</body>
</html>
Unordered HTML Lists - The Style Attribute

A style attribute can be added to an unordered list, to define the style of the marker:
Style
list-style-type:disc
list-style-type:circle
list-style-type:square
Description
The list items will be marked with bullets (default)
The list items will be marked with circles
The list items will be marked with squares
[K 9 COMPUTER LABS]
list-style-type:none
The list items will not be marked
Disc:
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea
<li>Milk</li>
</ul>
<!DOCTYPE html>
<html>
<body>
<h2>Unordered List with Disc Bullets</h2>
<ul style="list-style-type:disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
</body>
</html>
Circle:
syntax
<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea
<li>Milk</li>
</ul>
example
<!DOCTYPE html>
<html>
<body>
<h2>Unordered List with Circle Bullets</h2>
<ul style="list-style-type:circle">
<li>Apples</li>
[K 9 COMPUTER LABS]
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
</body>
</html>
Square:
<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea
<li>Milk</li>
</ul>
None:
<ul style="list-style-type:none">
<li>Coffee</li>
<li>Tea
<li>Milk</li>
</ul>
Ordered HTML Lists

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers.
Ordered List:
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List</h2>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
[K 9 COMPUTER LABS]
</ol>
</body>
</html>
Ordered HTML Lists - The Type Attribute

A type attribute can be added to an ordered list, to define the type of the marker:
Type
type="1"
type="A"
type="a"
type="I"
type="i"
Description
The list items will be numbered with numbers (default)
The list items will be numbered with uppercase letters
The list items will be numbered with lowercase letters
The list items will be numbered with uppercase roman numbers
The list items will be numbered with lowercase roman numbers
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Letters</h2>
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
</body>
</html>
HTML Description Lists

A description list, is a list of terms, with a description of each term.
The <dl> tag defines a description list.
The <dt> tag defines the term (name), and the <dd> tag defines the data (description).
Description List:
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
[K 9 COMPUTER LABS]
Example
<!DOCTYPE html>
<html>
<body>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>
Nested HTML Lists

List can be nested (lists inside lists).
Nested Lists:
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
List items can contain new list, and other HTML elements, like images and links, etc.
<!DOCTYPE html>
<html>
<body>
<h2>A Nested List</h2>
<ul>
<li>Coffee</li>
<li>Tea
[K 9 COMPUTER LABS]
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
Horizontal Lists
HTML lists can be styled in many different ways with CSS.
One popular way, is to style a list to display horizontally:
Horizontal List:
<!DOCTYPE html>
<html>
<head>
<style>
ul.menu li {
display:inline;
}
</style>
</head>
<body>
<h2>Horizontal List</h2>
<ul class="menu">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
</body>
</html>
With a little extra style, you can make it look like a menu:
New Style:syntax
ul.menu {
padding: 0;
}
ul.menu li {
[K 9 COMPUTER LABS]
display: inline;
}
ul.menu li a {
background-color: black;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 4px 4px 0 0;
}
ul.menu li a:hover {
background-color: orange;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
ul.menu {
padding: 0;
}
ul.menu li {
display: inline;
}
ul.menu li a {
background-color: black;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 4px 4px 0 0;
}
ul.menu li a:hover {
background-color: orange;
}
[K 9 COMPUTER LABS]
</style>
</head>
<body>
<h2>Horizontal List</h2>
<ul class="menu">
<li><a href="html_tables.asp">Tables</a></li>
<li><a href="html_lists.asp">Lists</a></li>
<li><a href="html_blocks.asp">Blocks</a></li>
<li><a href="html_classes.asp">Classes</a></li>
</ul>
</body>
</html>
Chapter Summary
Use the HTML <ul> element to define an unordered list
Use the HTML style attribute to define the bullet style
Use the HTML <ol> element to define an ordered list
Use the HTML type attribute to define the numbering type
Use the HTML <li> element to define a list item
Use the HTML <dl> element to define a description list
Use the HTML <dt> element to define the description term
Use the HTML <dd> element to define the description data
Lists can be nested inside lists
List items can contain other HTML elements
Use the CSS property display:inline to display a list horizontally
HTML List Tags

Tag
<ul>
Description
Defines an unordered list
[K 9 COMPUTER LABS]
<ol>
Defines an ordered list
<li>
Defines a list item
<dl>
Defines a description list
<dt>
Defines the term in a description list
<dd>
Defines the description in a description list
[K 9 COMPUTER LABS]
HTML Block Elements

Syntax
<div style="background-color:black; color:white; margin:20px; padding:20px;">
<h2>London</h2>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million
inhabitants.
</p>
</div>
Example
<!DOCTYPE html>
<html>
<body>
<div style="background-color:black; color:white; margin:20px; padding:20px;">
<h2>London</h2>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million
inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the
Romans, who named it Londinium.
</p>
</div>
</body>
</html>
HTML Block Elements and Inline Elements

Most HTML elements are defined as block level elements or inline elements.
Block level elements normally start (and end) with a new line, when displayed in a browser.
Examples: <h1>, <p>, <ul>, <table>
Inline elements are normally displayed without line breaks.
Examples: <b>, <td>, <a>, <img>
The HTML <div> Element

The HTML <div> element is a block level element that can be used as a container for other HTML elements.
[K 9 COMPUTER LABS]
The <div> element has no special meaning. It has no required attributes, but style and class are common.
Because it is a block level element, the browser will display line breaks before and after it.
When used together with CSS, the <div> element can be used to style blocks of content.
The HTML <span> Element

The HTML <span> element is an inline element that can be used as a container for text.
The <span> element has no special meaning. It has no required attributes, but style and class are common.
Unlike <div>, which is formatted with line breaks, the <span> element does not have any automatic formatting.
When used together with CSS, the <span> element can be used to style parts of the text:
Example
<h1>My <span style="color:red">Important</span>Heading</h1>
<!DOCTYPE html>
<html>
<body>
<h1>My <span style="color:red">Important</span> Heading</h1>

</body>
</html>
HTML Grouping Tags

Tag
Description
<div>
Defines a section in a document (block-level)
<span>
Defines a section in a document (inline)
HTML Classes
Classing HTML elements, makes it possible to define CSS styles for classes of elements.
Equal styles for equal classes, or different styles for different classes.
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
[K 9 COMPUTER LABS]
background-color:black;
color:white;
margin:20px;
padding:20px;
}
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million
inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who
named it Londinium.</p>
</div>
</body>
</html>
Classing Block Elements

The HTML <div> element is a block level element. It can be used as a container for other HTML elements.
Classing <div> elements, makes it possible to define equal styles for equal <div> elements:
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
color:white;
margin:20px;
[K 9 COMPUTER LABS]
padding:20px;
}
</style>
</head>
<body>
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million
inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who
named it Londinium.</p>
</div>
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
<p>Situated on the Seine River, it is at the heart of the le-de-France region, also known as the rgion parisienne.</p>
<p>Within its metropolitan area is one of the largest population centers in Europe, with over 12 million inhabitants.</p>
</div>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
<p>It is the seat of the Japanese government and the Imperial Palace, and the home of the Japanese Imperial Family.</p>
<p>The Tokyo prefecture is part of the world's most populous metropolitan area with 38 million people and the world's largest urban economy.</p>
</div>
</body>
</html>
Classing Inline Elements

The HTML <span> element is an inline element that can be used as a container for text.
[K 9 COMPUTER LABS]
Classing <span> elements makes it possible to design equal styles for equal <span> elements
<!DOCTYPE html>
<html>
<head>
<style>
span.red {
color:red;
}
</style>
</head>
<body>
<h1>My <span class="red">Important</span> Heading</h1>
</body>
</html>
[K 9 COMPUTER LABS]
HTML Layouts
Websites often display content in multiple columns (like a magazine or newspaper).
HTML Layout Using <div> Elements

The <div> element is often used as a layout tool, because it can easily be positioned with CSS.
This example uses 4 <div> elements to create a multiple column layout:
<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>
<div id="section"">
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
[K 9 COMPUTER LABS]
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>
<div id="footer">
Copyright K9computerlabs.com
</div>
</body>
The CSS
style>
#header {
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section {
width:350px;
float:left;
padding:10px;
}
#footer {
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
<!DOCTYPE html>
<html>
<head>
<style>
#header {
[K 9 COMPUTER LABS]
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section {
width:350px;
float:left;
padding:10px;
}
#footer {
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
[K 9 COMPUTER LABS]
</head>
<body>
<div id="header">
</div>
<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>
<div id="section">
<h2>London</h2>
<p>
</p>
<p>
</p>
</div>
<div id="footer">
Copyright K9ComputerLabs.com
</div>
</body>
</html>
[K 9 COMPUTER LABS]
Website Layout Using HTML5

HTML5 offers new semantic elements that define different parts of a web page:
header
nav
section
article
aside
footer
details
summary
Defines a header for a document or a section

Defines a container for navigation links
Defines a section in a document
Defines an independent self-contained article
Defines content aside from the content (like a sidebar)
Defines a footer for a document or a section
Defines additional details
Defines a heading for the details element
This example uses <header>, <nav>, <section>, and <footer> to create a multiple column layout:
<!DOCTYPE html>
<html>
<head>
<style>
header {
color:white;
text-align:center;
padding:5px;
}
nav {
line-height:30px;
height:300px;
width:100px;
[K 9 COMPUTER LABS]
float:left;
padding:5px;
}
section {
width:350px;
float:left;
padding:10px;
}
footer {
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body>
<header>
</header>
<nav>
London<br>
Paris<br>
Tokyo<br>
</nav>
[K 9 COMPUTER LABS]
<section>
<h1>London</h1>
<p>
</p>
<p>
</p>
</section>
<footer>
Copyright K9ComputerLabs.com
</footer>
</body>
</html>
HTML Layout Using Tables

The <table> element was not designed to be a layout tool.
The purpose of the <table> element is to display tabular data.
Layout can be achieved using the <table> element, because table elements can be styled with CSS:
HTML Forms and Input

HTML Forms are used to select different kinds of user input.
HTML Forms
HTML forms are used to pass data to a server.
[K 9 COMPUTER LABS]
An HTML form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form
can also contain select lists, textarea, fieldset, legend, and label elements.
The <form> tag is used to create an HTML form:
<form>
.
input elements
.
</form>
HTML Forms - The Input Element

The most important form element is the <input> element.
The <input> element is used to select user information.
An <input> element can vary in many ways, depending on the type attribute. An <input> element can be of type text field,
checkbox, password, radio button, submit button, and more.
The most common input types are described below.
Text Fields
<input type="text"> defines a one-line input field that a user can enter text into:
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
How the HTML code above looks in a browser:
First name:
Last name:
Note: The form itself is not visible. Also note that the default width of a text field is 20 characters.
Password Field
<input type="password"> defines a password field:
[K 9 COMPUTER LABS]
<form>
Password: <input type="password" name="pwd">
</form>
Password:
Note: The characters in a password field are masked (shown as asterisks or circles).
Radio Buttons
<input type="radio"> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices:
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
Male
Female
Checkboxes
<input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number
of choices.
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
I have a bike
I have a car
Submit Button
[K 9 COMPUTER LABS]
<input type="submit"> defines a submit button.
A submit button is used to send form data to a server. The data is sent to the page specified in the form's action attribute.
The file defined in the action attribute usually does something with the received input:
<form name="input" action="demo_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
Username:
If you type some characters in the text field above, and click the "Submit" button, the browser will send your input to a
page called "demo_form_action.asp". The page will show you the received input.
HTML Form Tags

= Tag added in HTML5.
Tag
Description
<form>
Defines an HTML form for user input
<input>
Defines an input control
<textarea>
Defines a multiline input control (text area)
<label>
Defines a label for an <input> element
<fieldset>
Groups related elements in a form
<legend>
Defines a caption for a <fieldset> element
<select>
Defines a drop-down list
<optgroup>
Defines a group of related options in a drop-down list
<option>
Defines an option in a drop-down list
<button>
Defines a clickable button
<datalist>
Specifies a list of pre-defined options for input controls
<keygen>
Defines a key-pair generator field (for forms)
<output>
Defines the result of a calculation
[K 9 COMPUTER LABS]
HTML <fieldset> Tag
Example
Group related elements in a form:
<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
</form>
HTML <select> Tag
Example
Create a drop-down list with four options:
<!DOCTYPE html>
<html>
<body>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</body>
</html>
[K 9 COMPUTER LABS]
The <select> element is used to create a drop-down list.
The <option> tags inside the <select> element define the available options in the list.

The <fieldset> tag is used to group related elements in a form.
The <fieldset> tag draws a box around the related elements.
HTML <optgroup> Tag
Example
Group related options with <optgroup> tags:
<select>
<optgroup label="Swedish Cars">
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
</optgroup>
</select>

The <optgroup> is used to group related options in a drop-down list.
If you have a long list of options, groups of related options are easier to handle for a user
<!DOCTYPE html>
<html>
<body>
<select>
<optgroup label="Swedish Cars">
[K 9 COMPUTER LABS]
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
</optgroup>
</select>
</body>
</html>
HTML <datalist> Tag
Example
An <input> element with pre-defined values in a <datalist>:
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>

The <datalist> tag specifies a list of pre-defined options for an <input> element.
The <datalist> tag is used to provide an "autocomplete" feature on <input> elements. Users will see a drop-down list of
pre-defined options as they input data.
Use the <input> element's list attribute to bind it together with a <datalist> element.
<!DOCTYPE html>
[K 9 COMPUTER LABS]
<html>
<body>
<form action="demo_form.asp" method="get">

<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
<p><strong>Note:</strong> The datalist tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p>
</body>
</html>
HTML <button> Tag
Example
A clickable button is marked up as follows:
<button type="button">Click Me!</button>

The <button> tag defines a clickable button.
[K 9 COMPUTER LABS]
Inside a <button> element you can put content, like text or images. This is the difference between this element and buttons
created with the <input> element.
Tip: Always specify the type attribute for a <button> element. Different browsers use different default types for the
<button> element.
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="alert('Hello world!')">Click Me!</button>
</body>
</html>
HTML <keygen> Tag
Example
A form with a keygen field:
<!DOCTYPE html>
<html>
<body>
<form action="demo_keygen.asp" method="get">

Username: <input type="text" name="usr_name">
Encryption: <keygen name="security">
<input type="submit">
</form>
<p><strong>Note:</strong> The keygen tag is not supported in Internet Explorer.</p>
</body>
</html>
[K 9 COMPUTER LABS]
The <keygen> tag specifies a key-pair generator field used for forms.
When the form is submitted, the private key is stored locally, and the public key is sent to the server.
HTML Iframes
An iframe is used to display a web page within a web page.
<!DOCTYPE html>
<html>
<body>
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
</body>
</html>
he src attribute specifies the URL (web address) of the iframe page.
Iframe - Set Height and Width

Use the height and width attributes to specify the size.
The attribute values are specified in pixels by default, but they can also be in percent (like "80%").
Example
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
<!DOCTYPE html>
<html>
<body>
[K 9 COMPUTER LABS]
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
</body>
</html>
Iframe - Remove the Border

The frameborder attribute specifies whether or not to display a border around the iframe.
Set the attribute value to "0" to remove the border:
Example
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
Use iframe as a Target for a Link

An iframe can be used as the target frame for a link.
The target attribute of the link must refer to the name attribute of the iframe:
Example
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.k9computerlabs.com" target="iframe_a">k9computerlabs</a></p>
HTML Color Names

Colors are displayed combining RED, GREEN, and BLUE light.
140 Color Names are Supported by All Browsers

140 color names are defined in the HTML5 and CSS3 color specifications.
17 colors are from the HTML specification, 123 colors are from the CSS specification.
The table below lists them all, along with their hexadecimal values.
The 17 colors from the HTML specification are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive,
orange, purple, red, silver, teal, white, and yellow.
Sorted by Color Name

Colors sorted by HEX values
Click on a color name (or a hex value) to view the color as the background-color along with different text colors:
[K 9 COMPUTER LABS]
Color Name
HEX
AliceBlue
#F0F8FF
AntiqueWhite
#FAEBD7
Aqua
#00FFFF
Aquamarine
#7FFFD4
Azure
#F0FFFF
Beige
#F5F5DC
Bisque
#FFE4C4
Black
#000000
BlanchedAlmond
#FFEBCD
Blue
#0000FF
BlueViolet
#8A2BE2
Brown
#A52A2A
BurlyWood
#DEB887
CadetBlue
#5F9EA0
Chartreuse
#7FFF00
Chocolate
#D2691E
Coral
#FF7F50
CornflowerBlue
#6495ED
Cornsilk
#FFF8DC
Crimson
#DC143C
Cyan
#00FFFF
DarkBlue
#00008B
DarkCyan
#008B8B
DarkGoldenRod
#B8860B
DarkGray
#A9A9A9
DarkGreen
#006400
DarkKhaki
#BDB76B
DarkMagenta
#8B008B
DarkOliveGreen
#556B2F
DarkOrange
#FF8C00
Color
[K 9 COMPUTER LABS]
DarkOrchid
#9932CC
DarkRed
#8B0000
DarkSalmon
#E9967A
DarkSeaGreen
#8FBC8F
DarkSlateBlue
#483D8B
DarkSlateGray
#2F4F4F
DarkTurquoise
#00CED1
DarkViolet
#9400D3
DeepPink
#FF1493
DeepSkyBlue
#00BFFF
DimGray
#696969
DodgerBlue
#1E90FF
FireBrick
#B22222
FloralWhite
#FFFAF
ForestGreen
#228B22
Fuchsia
#FF00FF
Gainsboro
#DCDCDC
GhostWhite
#F8F8FF
Gold
#FFD700
GoldenRod
#DAA520
Gray
#808080
Green
#008000
GreenYellow
#ADFF2F
HoneyDew
#F0FFF0
HotPink
#FF69B4
IndianRed
#CD5C5C
Indigo
#4B0082
Ivory
#FFFFF0
Khaki
#F0E68C
Lavender
#E6E6FA
LavenderBlush
#FFF0F5
[K 9 COMPUTER LABS]
LawnGreen
#7CFC00
LemonChiffon
#FFFACD
LightBlue
#ADD8E6
LightCoral
#F08080
LightCyan
#E0FFFF
LightGoldenRodYel
#FAFAD2
low
LightGray
#D3D3D3
LightGreen
#90EE90
LightPink
#FFB6C1
LightSalmon
#FFA07A
LightSeaGreen
#20B2AA
LightSkyBlue
#87CEFA
LightSlateGray
#778899
LightSteelBlue
#B0C4DE
LightYellow
#FFFFE0
Lime
#00FF00
LimeGreen
#32CD32
Linen
#FAF0E6
Magenta
#FF00FF
Maroon
#800000
MediumAquaMarin
#66CDAA
e
MediumBlue
#0000CD
MediumOrchid
#BA55D3
MediumPurple
#9370DB
MediumSeaGreen #3CB371
MediumSlateBlue #7B68EE
MediumSpringGre
#00FA9A
en
MediumTurquoise #48D1CC
MediumVioletRed #C71585
[K 9 COMPUTER LABS]
MidnightBlue
#191970
MintCream
#F5FFFA
MistyRose
#FFE4E1
Moccasin
#FFE4B5
NavajoWhite
#FFDEAD
Navy
#000080
OldLace
#FDF5E6
Olive
#808000
OliveDrab
#6B8E23
Orange
#FFA500
OrangeRed
#FF4500
Orchid
#DA70D6
PaleGoldenRod
#EEE8AA
PaleGreen
#98FB98
PaleTurquoise
#AFEEEE
PaleVioletRed
#DB7093
PapayaWhip
#FFEFD5
PeachPuff
#FFDAB9
Peru
#CD853F
Pink
#FFC0CB
Plum
#DDA0DD
PowderBlue
#B0E0E6
Purple
#800080
Red
#FF0000
RosyBrown
#BC8F8F
RoyalBlue
#4169E1
SaddleBrown
#8B4513
Salmon
#FA8072
SandyBrown
#F4A460
SeaGreen
#2E8B57
SeaShell
#FFF5EE
[K 9 COMPUTER LABS]
Sienna
#A0522D
Silver
#C0C0C0
SkyBlue
#87CEEB
SlateBlue
#6A5ACD
SlateGray
#708090
Snow
#FFFAFA
SpringGreen
#00FF7F
SteelBlue
#4682B4
Tan
#D2B48C
Teal
#008080
Thistle
#D8BFD8
Tomato
#FF6347
Turquoise
#40E0D0
Violet
#EE82EE
Wheat
#F5DEB3
White
#FFFFFF
WhiteSmoke
#F5F5F5
Yellow
#FFFF00
YellowGreen
#9ACD32
HTML Color Values

Colors are displayed combining RED, GREEN, and BLUE light.
Color Values
Colors are defined using a hexadecimal (hex) notation for the combination of Red, Green, and Blue values (RGB).
The lowest value for each of the light sources is 0 (hex 00). The highest value is 255 (hex FF).
Hex values are written as # followed by either three or six hexadecimal characters.
Three three-digit notations (#rgb) are converted to six digits (#rrggbb).
[K 9 COMPUTER LABS]
HTML Color Shades
16 Million Different Colors

The combination of Red, Green and Blue values from 0 to 255 gives a total of more than 16 million different colors to play with (256
x 256 x 256).
Most modern monitors are capable of displaying at least 16384 different colors.
If you look at the color table below, you will see the result of varying the red light from 0 to 255, while keeping the green and blue
light at zero.
In the Stone Age

In the stone age, when computers only supported 256 different colors, a list of 216 "Web Safe Colors" was suggested as a Web
standard, reserving 40 fixed system colors.
This 216 cross-browser color palette was created to ensure that all computers would display colors correctly:
000000
003300
006600
009900
00CC00
00FF00
330000
333300
336600
339900
33CC00
33FF00
660000
663300
666600
669900
66CC00
66FF00
990000
993300
996600
999900
99CC00
99FF00
CC0000
CC3300
CC6600
CC9900
CCCC00
CCFF00
FF0000
FF3300
FF6600
000033
003333
006633
009933
00CC33
00FF33
330033
333333
336633
339933
33CC33
33FF33
660033
663333
666633
669933
66CC33
66FF33
990033
993333
996633
999933
99CC33
99FF33
CC0033
CC3333
CC6633
CC9933
CCCC33
CCFF33
FF0033
FF3333
FF6633
000066
003366
006666
009966
00CC66
00FF66
330066
333366
336666
339966
33CC66
33FF66
660066
663366
666666
669966
66CC66
66FF66
990066
993366
996666
999966
99CC66
99FF66
CC0066
CC3366
CC6666
CC9966
CCCC66
CCFF66
FF0066
FF3366
FF6666
000099
003399
006699
009999
00CC99
00FF99
330099
333399
336699
339999
33CC99
33FF99
660099
663399
666699
669999
66CC99
66FF99
990099
993399
996699
999999
99CC99
99FF99
CC0099
CC3399
CC6699
CC9999
CCCC99
CCFF99
FF0099
FF3399
FF6699
0000CC
0033CC
0066CC
0099CC
00CCCC
00FFCC
3300CC
3333CC
3366CC
3399CC
33CCCC
33FFCC
6600CC
6633CC
6666CC
6699CC
66CCCC
66FFCC
9900CC
9933CC
9966CC
9999CC
99CCCC
99FFCC
CC00CC
CC33CC
CC66CC
CC99CC
CCCCCC
CCFFCC
FF00CC
FF33CC
FF66CC
0000FF
0033FF
0066FF
0099FF
00CCFF
00FFFF
3300FF
3333FF
3366FF
3399FF
33CCFF
33FFFF
6600FF
6633FF
6666FF
6699FF
66CCFF
66FFFF
9900FF
9933FF
9966FF
9999FF
99CCFF
99FFFF
CC00FF
CC33FF
CC66FF
CC99FF
CCCCFF
CCFFFF
FF00FF
FF33FF
FF66FF
[K 9 COMPUTER LABS]
FF9900
FFCC00
FFFF00
FF9933
FFCC33
FFFF33
FF9966
FFCC66
FFFF66
FF9999
FFCC99
FFFF99
FF99CC
FFCCCC
FFFFCC
FF99FF
FFCCFF
FFFFFF
HTML Scripts
JavaScripts make HTML pages more dynamic and interactive.
The HTML <script> Tag

The <script> tag is used to define a client-side script, such as a JavaScript.
The <script> element either contains scripting statements or it points to an external script file through the src attribute.
Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.
The script below writes Hello JavaScript! into an HTML element with id="demo":
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
</script>
</body>
</html>
The HTML <noscript> Tag

The <noscript> tag is used to provide an alternate content for users that have disabled scripts in their browser or have a
browser that doesn't support client-side scripting.
The <noscript> element can contain all the elements that you can find inside the <body> element of a normal HTML
page.
The content inside the <noscript> element will only be displayed if scripts are not supported, or are disabled in the user's
browser:
[K 9 COMPUTER LABS]
<script>
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
<p>A browser without support for JavaScript will show the text written inside the noscript element.</p>
</body>
</html>
A Taste of JavaScript
Here are some examples of what JavaScript can do:
JavaScript can change HTML content:

<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<p>JavaScript can change the content of an HTML element:</p>
<button type="button" onclick="myFunction()">Click Me!</button>
<p id="demo">This is a demonstration.</p>
<script>
function myFunction() {
[K 9 COMPUTER LABS]
}
</script>
</body>
</html>
JavaScript can change HTML styles:

document.getElementById("demo").style.fontSize = "25px";
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<p id="demo">JavaScript can change the style of an HTML element.</p>
<script>
function myFunction() {
document.getElementById("demo").style.fontSize = "25px";
}
</script>
<button type="button" onclick="myFunction()">Click Me!</button>
</body>
</html>
JavaScript can change HTML attributes:

document.getElementById("image").src = "picture.gif";
<!DOCTYPE html>
<html>
<body>
<script>
[K 9 COMPUTER LABS]
function light(sw) {
var pic;
if (sw == 0) {
pic = "pic_bulboff.gif"
} else {
pic = "pic_bulbon.gif"
}
document.getElementById('myImage').src = pic;
}
</script>
<img id="myImage" src="pic_bulboff.gif" width="100" height="180">
<p>
<button type="button" onclick="light(1)">Light On</button>
<button type="button" onclick="light(0)">Light Off</button>
</p>
</body>
</html>
HTML Script Tags

Tag
Description
<script>
<noscript>
Defines an alternate content for users that do not support client-side scripts
HTML Head
The HTML <head> Element

The <head> element is a container for all the head elements. Elements inside <head> can include scripts, instruct the
browser where to find style sheets, provide meta information, and more.
The following tags can be added to the head section: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.
[K 9 COMPUTER LABS]
The HTML <title> Element

The <title> tag defines the title of the document.
The <title> element is required in all HTML/XHTML documents.
The <title> element:
defines a title in the browser toolbar
provides a title for the page when it is added to favorites
displays a title for the page in search engine results
A simplified HTML document:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
The content of the document......
</body>
</html>
The HTML <base> Element

The <base> tag specifies the base URL/target for all relative URLs in a page:
Example
<head>
<base href="http://www.k9computerlabs.com/images/" target="_blank">
</head>
The HTML <link> Element

The <link> tag defines the relationship between a document and an external resource.
The <link> tag is most used to link to style sheets:
Example
[K 9 COMPUTER LABS]
<head>
</head>
The HTML <style> Element

The <style> tag is used to define style information for an HTML document.
Inside the <style> element you specify how HTML elements should render in a browser:
Example
<head>
<style">
p {color:blue;}
</style>
</head>
The HTML <meta> Element

Metadata is data (information) about data.
The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be
machine parsable.
Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other
metadata.
The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web
services.
<meta> tags always go inside the <head> element.
<meta> Tags - Examples of Use

Define keywords for search engines:
Example
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
Define a description of your web page:
Example
<meta name="description" content="Welcome to the world of HTML and CSS">
Define the author of a page:
[K 9 COMPUTER LABS]
Example
<meta name="author" content="Hege Refsnes">
Refresh document every 30 seconds:
Example
<meta http-equiv="refresh" content="30">
The HTML <script> Element

The <script> tag is used to define a client-side JavaScript.
The script below writes Hello JavaScript! into an HTML element with id="demo":
Example
<script>
</script>
HTML head Elements

Tag
Description
<head>
Defines information about the document
<title>
Defines the title of a document
<base>
Defines a default address or a default target for all links

on a page
<link>
Defines the relationship between a document and an

external resource
<meta>
Defines metadata about an HTML document
<script>
<style>
HTML Entities
Reserved characters in HTML must be replaced with character entities.
Characters, not present on your keyboard, can also be replaced by entities.
[K 9 COMPUTER LABS]
HTML Entities
Some characters are reserved in HTML.

If you use the less than (<) or greater than (>) signs in your text, the browser might mix them with tags.
Character entities are used to display reserved characters in HTML.
A character entity looks like this:
&entity_name;
OR
&#entity_number;
To display a less than sign we must write: < or <

The advantage of using an entity name, instead of a number, is that the name is easier to
remember.
The disadvantage is that browsers may not support all entity names, but the support for
numbers is good.
Non Breaking Space
A common character entity used in HTML is the non breaking space ( ).
Remember that browsers will always truncate spaces in HTML pages. If you write 10 spaces in your text, the
browser will remove 9 of them. To add real spaces to your text, you can use the character entity.
Some Other Useful HTML Character Entities
Result
Description
Entity Name
Entity Number
non-breaking space

<
less than
<
<
>
greater than
>
>
&
ampersand
&
&
cent
¢
¢
pound
£
£
yen
¥
¥
euro
€
€
[K 9 COMPUTER LABS]
copyright
©
©
registered trademark
®
®
Entity names are case sensitive.

HTML Symbol Entities
HTML entities were described in the previous chapter.

Many mathematical, technical, and currency symbols, are not present on a normal keyboard.
To add these symbols to an HTML page, you can use an HTML entity name.
If no entity name exists, you can use an entity number; a decimal (or hexadecimal) reference.
If you use an HTML entity name or a hexadecimal number, the character will always
display correctly.
This is independent of what character set (encoding) your page uses!
Example
<p>I will display €</p>
Will display as:

I will display
I will display
I will display
Some Mathematical Symbols Supported by HTML
Char
Number
Entity
Description
∀ ∀
FOR ALL
∂ ∂
PARTIAL DIFFERENTIAL
∃ ∃
THERE EXISTS
∅ ∅
EMPTY SETS
∇ ∇
NABLA
[K 9 COMPUTER LABS]
∈ ∈
ELEMENT OF
∉ ∉
NOT AN ELEMENT OF
∋ &ni;
CONTAINS AS MEMBER
∏ ∏
N-ARY PRODUCT
∑ ∑
N-ARY SUMMATION
Some Greek Letters Supported by HTML

Char
Number
Entity
Description
Α
Α
GREEK CAPITAL LETTER ALPHA
Β
Β
GREEK CAPITAL LETTER BETA
Γ
Γ
GREEK CAPITAL LETTER GAMMA
Δ
Δ
GREEK CAPITAL LETTER DELTA
Ε
Ε
GREEK CAPITAL LETTER EPSILON
Ζ
Ζ
GREEK CAPITAL LETTER ZETA
Some Other Entities Supported by HTML

Char
Number
Entity
Description
©
©
COPYRIGHT SIGN
®
®
REGISTERED SIGN
€ €
EURO SIGN
™ ™
TRADEMARK
← ←
LEFTWARDS ARROW
↑ ↑
UPWARDS ARROW
→ →
RIGHTWARDS ARROW
↓ ↓
DOWNWARDS ARROW
♠ &spades;
BLACK SPADE SUIT
♣ &clubs;
BLACK CLUB SUIT
[K 9 COMPUTER LABS]
♥ &hearts;
BLACK HEART SUIT
♦ &diams;
BLACK DIAMOND SUIT
HTML and XHTML

XHTML is HTML written as XML.
What Is XHTML?
XHTML stands for EXtensible HyperText Markup Language
XHTML is almost identical to HTML 4.01
XHTML is a stricter and cleaner version of HTML
XHTML is HTML defined as an XML application
XHTML is supported by all major browsers
Why XHTML?
Many pages on the internet contain "bad" HTML.

The following HTML code will work fine if you view it in a browser (even if it does NOT follow the HTML
rules):
<html>
<head>
<title>This is bad HTML</title>
<body>
<h1>Bad HTML
</body>
XML is a markup language where documents must be marked up correctly and must be "well-formed".
Today's market consists of different browser technologies. Some browsers run on computers, and some
browsers run on mobile phones or other small devices. Smaller devices often lack the resources or power to
interpret a "bad" markup language.
Therefore - by combining the strengths of HTML and XML, XHTML was developed. XHTML is HTML
redesigned as XML.
[K 9 COMPUTER LABS]
The Most Important Differences from HTML:

Document Structure
XHTML DOCTYPE is mandatory
The xmlns attribute in <html> is mandatory
<html>, <head>, <title>, and <body> are mandatory
XHTML Elements
XHTML elements must be properly nested
XHTML elements must always be closed
XHTML elements must be in lowercase
XHTML documents must have one root element
XHTML Attributes
Attribute names must be in lower case
Attribute values must be quoted
Attribute minimization is forbidden
<!DOCTYPE ....> Is Mandatory
An XHTML document must have an XHTML DOCTYPE declaration.

The <html>, <head>, <title>, and <body> elements must also be present, and the xmlns attribute in <html>
must specify the xml namespace for the document.
The example below shows an XHTML document with a minimum of required tags:
<!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>
<title>Title of document</title>
</head>
[K 9 COMPUTER LABS]
<body>
......
</body>
</html>
XHTML Elements Must Be Properly Nested
In HTML, some elements can be improperly nested within each other, like this:
<b><i>This text is bold and italic</b></i>
In XHTML, all elements must be properly nested within each other, like this:
<b><i>This text is bold and italic</i></b>
XHTML Elements Must Always Be Closed
This is wrong:
<p>This is another paragraph
This is correct:
<p>This is a paragraph</p>
<p>This is another paragraph</p>
Empty Elements Must Also Be Closed
This is wrong:
A break: <br>
A horizontal rule: <hr>
An image: <img src="happy.gif" alt="Happy face">
This is correct:
A break: <br />
A horizontal rule: <hr />
An image: <img src="happy.gif" alt="Happy face" />
XHTML Elements Must Be In Lower Case
This is wrong:
[K 9 COMPUTER LABS]
<BODY>
<P>This is a paragraph</P>
</BODY>
This is correct:
<body>
<p>This is a paragraph</p>
</body>
XHTML Attribute Names Must Be In Lower Case
This is wrong:
<table WIDTH="100%">
This is correct:
<table width="100%">
Attribute Values Must Be Quoted
This is wrong:
<table width=100%>
This is correct:
<table width="100%">
Attribute Minimization Is Forbidden
This is wrong:
<input checked>
<input readonly>
<input disabled>
<option selected>
This is correct:
<input checked="checked">
<input readonly="readonly">
<input disabled="disabled">
<option selected="selected">
[K 9 COMPUTER LABS]
How to Convert from HTML to XHTML
1. Add an XHTML <!DOCTYPE> to the first line of every page
2. Add an xmlns attribute to the html element of every page
3. Change all element names to lowercase
4. Close all empty elements
5. Change all attribute names to lowercase
6. Quote all attribute values
HTML5 Introduction
HTML5 is the latest HTML standard. It walks hand in hand with CSS3, the latest CSS standard.
HTML5
CSS3
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
CSS3 Borders
CSS3 Backgrounds
CSS3 Gradients
CSS3 Fonts
CSS3 2D
Transforms
CSS3 3D
Transforms
CSS3 Transitions
CSS3 Animations
CSS3 Columns
CSS3 User
Interface
Elements
Semantic
Input types
Graphics
Video / Audio
Geolocation
Drag / Drop
Local Storage
Web Workers
What is New in HTML5?
The DOCTYPE declaration for HTML5 is very simple:

<!DOCTYPE html>
The character encoding (charset) declaration is also very simple:
[K 9 COMPUTER LABS]
<meta charset="UTF-8">
HTML5 Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
Content of the document......
</body>
</html>
The default character encoding in HTML5 is UTF-8.
New HTML5 Elements
The most interesting new elements are:

New semantic elements like <header>, <footer>, <article>, and <section>.
New form controls like number, date, time, calendar, and range.
New graphic elements: <svg> and <canvas>.
New multimedia elements: <audio> and <video>.
New HTML5 API's (Application Programming Interfaces)
The most interesting new API's are:
HTML Geolocation
HTML Drag and Drop
HTML Local Storage
HTML Application Cache
[K 9 COMPUTER LABS]
HTML Web Workers
HTML SSE
Local storage is a powerful replacement for cookies.
Elements Removed in HTML5
The following HTML4 elements have been removed from HTML5:
<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>
HTML5 Semantic Elements

Semantics means (from Ancient Greek), is the study of meaning.
Semantic elements are elements with a meaning.
What are Semantic Elements?
A semantic element clearly describes its meaning to both the browser and the developer.
Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.
[K 9 COMPUTER LABS]
Examples of semantic elements: <form>, <table>, and <img> - Clearly defines its content.
Browser Support
HTML5 semantic elements are supported in all modern browsers.

In addition, you can "teach" older browsers how to handle "unknown elements".
New Semantic Elements in HTML5
Many web sites contain HTML code like: <div id="nav"> <div class="header"> <div id="footer">
to indicate navigation, header, and footer.
HTML5 offers new semantic elements to define different parts of a web page:
<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>
[K 9 COMPUTER LABS]
HTML5 <section> Element
The <section> element defines a section in a document.

According to W3C's HTML5 documentation: "A section is a thematic grouping of content, typically with a
heading."
A Web site's home page could be split into sections for introduction, content, and contact information.
Example
<!DOCTYPE html>
<html>
<body>
<section>
<h1>WWF</h1>
<p>
The World Wide Fund for Nature (WWF) is an international organization working on issues
regarding the conservation, research and restoration of the environment, formerly named the
World Wildlife Fund. WWF was founded in 1961.
</p>
</section>
[K 9 COMPUTER LABS]
<section>
<h1>WWF's Panda symbol</h1>
<p>
The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a
panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same
year of the establishment of WWF.
</p>
</section>
</body>
</html>
HTML5 <article> Element
The <article> element specifies independent, self-contained content.

An article should make sense on its own, and it should be possible to read it independently from the rest of the
web site.
Examples of where an <article> element can be used:
Forum post
Blog post
Newspaper article
Example
<!DOCTYPE html>
<html>
<body>
<article>
<h1>Internet Explorer 9</h1>
<p>
Windows Internet Explorer 9 (abbreviated as IE9) was released to
[K 9 COMPUTER LABS]
the public on March 14, 2011 at 21:00 PDT.
</p>
</article>
</body>
</html>
Nesting Semantic Elements
In the HTML5 standard, the <article> element defines a complete, self-contained block of related elements.
The <section> element is defined as a block of related elements.
Can we use the definitions to decide how to nest elements? No, we cannot!
On the Internet, you will find HTML pages with <section> elements containing <article> elements, and
<article> elements containing <sections> elements.
You will also find pages with <section> elements containing <section> elements, and <article> elements
containing <article> elements.
Newspaper: The sports articles in the sports section, have a technical section in each
article.
HTML5 <header> Element
The <header> element specifies a header for a document or section.

The <header> element should be used as a container for introductory content.
You can have several <header> elements in one document.
The following example defines a header for an article:
Example
<!DOCTYPE html>
<html>
<body>
[K 9 COMPUTER LABS]
<article>
<header>
<h1>Internet Explorer 9</h1>
<p><time pubdate datetime="2011-03-15"></time></p>
</header>
<p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
the public on March 14, 2011 at 21:00 PDT.</p>
</article>
</body>
</html>
HTML5 <footer> Element
The <footer> element specifies a footer for a document or section.

A <footer> element should contain information about its containing element.
A footer typically contains the author of the document, copyright information, links to terms of use, contact
information, etc.
You can have several <footer> elements in one document.
Example
<!DOCTYPE html>
<html>
<body>
<footer>
<p>Posted by: Hege Refsnes</p>
<p><time pubdate datetime="2012-03-01"></time></p>
</footer>
[K 9 COMPUTER LABS]
</body>
</html>
HTML5 <nav> Element
The <nav> element defines a set of navigation links.

The <nav> element is intended for large blocks of navigation links. However, not all links in a document should
be inside a <nav> element!
Example
<!DOCTYPE html>
<html>
<body>
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
</body>
</html>
HTML5 <aside> Element
The <aside> element defines some content aside from the content it is placed in (like a sidebar).
The aside content should be related to the surrounding content.
Example
<!DOCTYPE html>
<html>
[K 9 COMPUTER LABS]
<body>
<p>My family and I visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
</body>
</html>
HTML5 <figure> and <figcaption> Elements
In books and newspapers, it is common to have captions with images.

The purpose of a caption is to add a visual explanation to an image.
With HTML5, images and captions can be grouped together in <figure> elements:
Example
<!DOCTYPE html>
<html>
<body>
<p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above
Lysefjorden, opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. The
top of the cliff is approximately 25 by 25 metres (82 by 82 feet) square and
almost flat, and is a famous tourist attraction in Norway.</p>
<figure>
[K 9 COMPUTER LABS]
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304"

height="228">
<figcaption>Fig.1 - The Pulpit Rock, Norway.</figcaption>
</figure>
</body>
</html>
Why Semantic HTML5 Elements?
With HTML4, developers used their own favorite attribute names to style page elements:
header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, ...
This made it impossible for search engines to identify the correct web page content.
With HTML5 elements like: <header> <footer> <nav> <section> <article>, this will become easier.
According to the W3C, a Semantic Web:
"Allows data to be shared and reused across applications, enterprises, and communities."
Semantic Elements in HTML5
Below is an alphabetical list of the new semantic elements in HTML5.

Tag
Description
<article>
Defines an article
<aside>
Defines content aside from the page content
<details>
Defines additional details that the user can view or hide
<figcaption>
Defines a caption for a <figure> element
<figure>
Specifies self-contained content, like illustrations, diagrams, photos,

code listings, etc.
<footer>
Defines a footer for a document or section
<header>
Specifies a header for a document or section
[K 9 COMPUTER LABS]
<main>
Specifies the main content of a document
<mark>
Defines marked/highlighted text
<nav>
Defines navigation links
<section>
Defines a section in a document
<summary>
Defines a visible heading for a <details> element
<time>
Defines a date/time

Example Explained: K 9 Computer Labs

Uploaded by

Copyright:

Available Formats

Example Explained: K 9 Computer Labs

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Example Explained: K 9 Computer Labs

Uploaded by

Copyright:

Available Formats

[K 9 COMPUTER LABS]

The DOCTYPE declaration defines the document type

The text between <h1> and </h1> is displayed as a heading

The text between <p> and </p> is displayed as a paragraph

HTML stands for Hyper Text Markup Language

HTML is a markup language

A markup language is a set of markup tags

The tags describe document content

HTML documents contain HTML tags and plain text

HTML documents are also called web pages

HTML tags normally come in pairs like <p> and </p>

The <!DOCTYPE> Declaration

Microsoft Expression Web

CoffeeCup HTML Editor

Step 1: Open Notepad

Step 2: Write Some HTML

Step 3: Save the HTML Page

Step 4: View HTML Page in Your Browser

HTML Basic Examples

Note: The link address is specified in the href attribute.

Don't Forget the End Tag

Empty HTML Elements

Line Break Tag

HTML Tip: Use Lowercase Tags

This will produce following result:

This will produce following result:

This will produce following result:

This is paragraph two and should be at bottom

HTML elements can have attributes

Attributes provide additional information about an element

Attributes are always specified in the start tag

Attributes come in name/value pairs like: name="value"

Always Quote Attribute Values

HTML Tip: Use Lowercase Attributes

HTML Attributes Reference

Specifies a unique id for an element

Specifies an inline CSS style for an element

Specifies extra information about an element (displayed as a tool tip)

Headings Are Important

HTML Output - Useful Tips

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

HTML Text Formatting

This text is bold

This is subscript and

HTML Formatting Tags

HTML Text Formatting Tags

Defines bold text

Defines emphasized text

Defines a part of text in an alternate voice or

Defines smaller text

<strong> Defines important text

Defines subscripted text

Defines superscripted text

Defines inserted text

Defines deleted text

Defines marked/highlighted text

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>