HTML Intermediate

Welcome

This slideshow presentation is designed to introduce you to intermediate HTML. It is the second of three HTML workshops available at www.tinyurl.com/rpi123. In addition to the three HTML workshops, there are also workshops on CSS, PHP, and MySQL.

These slides are based on source material found at the w3schools.com website.You are encouraged to visit the site – it is a great resource.

A bit o' history

If you aren't interested in the history of HTML, you can skip ahead a few slides without missing much.

However, if you'd like to geek out on some hypertext history, read on...

HTML Old School 1990: HTML is introduced to the world. 1995: HTML 2.0 is released. 1997: HTML 3.2 is released.

dropped math formulas, reconciled overlap among various proprietary extensions and adopted most of Netscape's visual markup tags. Netscape's blink element and Microsoft's marquee element were omitted due to a mutual agreement between the two companies.

HTML Old School 1997: HTML 4.0 is released in response

to how awful 3.2 was. 4.0 included: Strict deprecated elements forbidden Transitional deprecated elements allowed Frameset, in which mostly only frame

related elements are allowed 1998: HTML 4.0 is released (again).

reissued with minor edits without incrementing the version number.

HTML New School 1999: HTML 4.01

Same variations as HTML 4.0 2008: HTML 5

Currently in WorkingDraft stage. Will to be in CandidateRecommendationstage in 2012.

Okay, then. History lesson is over.Let's dive into the types of

markup elements used in HTML...

Types of markup elements

Hypertext markup makes parts of a document into links to other documents. An anchor element creates a hyperlink in the document with the href attribute set to the link URL.

For example, the HTML markup, <a href="http://twitter.com/">Twitter</a>, will render the word "Twitter" as a hyperlink.

Types of markup elements

Structural markup describes the purpose of text. For example, <h2>Golf</h2> establishes "Golf" as a second-level heading. Structural markup does not denote any specific rendering, but most web browsers have default styles for element formatting. Text may be further styled with Cascading Style Sheets (CSS).

Types of markup elements

Presentational markup describes the appearance of the text, regardless of its purpose. For example <b>boldface</b> indicates that visual output devices should render "boldface" in bold text, but gives little indication what devices which are unable to do this (such as aural devices that read the text aloud) should do.

Out With the Old...Presentational markup tags aredeprecated * in current HTML and XHTML recommendations and are illegal in HTML5.

<i>text</i> <center>text</center> <b>text</b> <font>text</font>

* the term deprecation is applied to software features that are superseded and should be avoided.

Examples of Text Markup<big> <small><em><strong><sub><sup><u>

big textsmall textemphasized textstrong textsubscripted textsuperscripted textunderlined text [deprecated]

More Text Markup<code>

<blockquote>

computer code text defines a long quotation

Table tags

Tables are defined with the <table> tag.A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag).

The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.

Example: <tr> <td>

Tables

<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr></table>

Bye-bye Borders

Table Borders

If you do not specify a border attribute the table will be displayed without any borders. Sometimes this can be useful, but most of the time, you want the borders to show.

To display a table with borders, you will have to use the border attribute:

<table border="1">

Table Headings

<table border="1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr></table>

Headings in a table are defined with the <th> tag.

Table Cells

<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td></td> </tr></table>

Table cells with no content are not displayed very well in most browsers.

Table Cells

To avoid inconsistent rendering inbrowsers, add a non-breaking space (&nbsp;) to empty data cells to makethe borders visible:

<td>&nbsp;</td>

Tables

Visit the sandbox... try adding these attributes to the <table> element:

border=”5”cell padding=”5”cell spacing =”5”width=”50%”

Lists: Unordered

An unordered list is a list of items. The list items are marked with bullets.

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

<ul> <li>Coffee</li> <li>Milk</li></ul>

An unordered list: Coffee Tea Milk

Lists: Ordered

An ordered list is also a list of items – but the list items are marked with numbers.

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

<ol> <li>Coffee</li> <li>Milk</li></ol>

An ordered list:0. Coffee1. Tea2. Milk

Forms

HTML Forms are used to select different kinds of user input.

A form is defined with the <form> tag.

<form>

input elements

</form>

FormsInput - The most used form tag is the <input> tag. The type of input is specified with the type attribute. The most commonly used input types are explained below.

Text Fields - Text fields are used when you want the user to type letters, numbers, etc. in a form.

Example Form

<form>First name:<input type="text" name="firstname" /><br />Last name:<input type="text" name="lastname" /></form>

Visit the sandbox and experiment...

Forms: Passwords

Shhh... It's a secret...

Radio ButtonsRadio Buttons are used when you want the user to select 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>

Checkboxes

Checkboxes are used when you want the user to select one or more options.

<form><input type="checkbox" name="vehicle" value="Bike" /> I have a bike <br /><input type="checkbox" name="vehicle" value="Car" /> I have a car <br /><input type="checkbox" name="vehicle" value="Airplane" /> I have an airplane</form>

Submit button

When the user clicks on the "Submit" button, the content of the form is sent to the server. The form's action attribute defines the name of the file to send the content to. The file defined in the action attribute usually does something with the received input.

Submit button

<form name="input" action="html_form_submit.asp" method="get">Username:<input type="text" name="user" /><input type="submit" value="Submit" /></form>

Visit the sandbox...

Colors

Colors

HTML colors are defined using a hexadecimal (hex) notation for the combination of Red, Green, and Blue color values (RGB).

The lowest value that can be given to one of the light sources is 0 (hex 00). The highest value is 255 (hex FF).

Hex values are written as 3 double digit numbers, starting with a # sign.

Color Values

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.

Colors

The next several slides show shades of red and shades of gray as well as other color selections. Pay attention to how the changing hex codes relate to the changing colors...

Validation

HTML 3.2 caused a lot of problems.

The original HTML was never intended to contain tags for formatting a document. HTML tags were intended to define the content of the document like:

<p>This is a paragraph</p>

<h1>This is a heading</h1>

Validation

When tags like <font> and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large web sites where fonts and color information had to be added to every single Web page, became a long, expensive and unduly painful process.

Validation

In HTML 5 all formatting is removed from the HTML document and stored in a separate style sheet.

Because HTML 5 separates the presentation from the document structure, we have what we always needed: Total control of presentation layout without messing up the document content.

Not quite yet...

We'll take a close look at HTML 5in the next workshop in this series.

Character Entities

Some characters are reserved in HTML. For example, if you use the greater than or less than symbols within your text, your browser could mistake them for markup.

If we want the browser to actually display these characters we must insert character entities in the HTML source.

A character entity looks like this: &entity_name; OR &#entity_number;

Character Entities

To display a less than sign we must write: &lt; or &#60;

The advantage of using an entity name instead of a number is that the name often is easier to remember. However, the disadvantage is that browsers may not support all entity names (while the support for entity numbers is very good).

Character Entities

The most common character entity in HTML is the non-breaking space.

Normally HTML will truncate spaces in your text. If you write 10 spaces in your text HTML will remove 9 of them. To add lots of spaces to your text, use the &nbsp; character entity.

Character Entities

End of Workshop

More web workshops can be found atwww.tinyurl.com/rpi123