Ch2: Introduction to HTML5. How does the WWW work? Web information is stored in documents called Web pages. Web pages are files stored on computers called

Ch2: Introduction to HTML5

How does the WWW work?

• Web information is stored in documents called Web pages.

• Web pages are files

stored on computers called Web servers.

• Computers reading the

Web pages are called Web clients.

How does the browser fetch the pages?

• A browser fetches a Web page from a server by a request. • A request is a standard HTTP request containing a page

address. • A page address looks like this:

http://www.someone.com/home.htm.

How does the browser display the pages?

• All Web pages contain instructions for display • The browser displays the page by reading these instructions.

• The most common display instructions are called HTML tags.

• HTML tags look like this <p>This is a Paragraph</p>.

Who is making the Web standards?

• The Web standards are not made up by Firefox or Chrome or Microsoft.

• The rule-making body of the Web is the W3C.

• W3C stands for the World Wide Web Consortium.

• W3C puts together specifications for Web standards.

• The most essential Web standards are HTML, CSS and XML.

• The latest HTML standard is HTML 5.

What is an HTML File?

• HTML stands for Hyper Text Markup Language

• An HTML file is a text file containing small markup tags

• The markup tags tell the Web browser how to display the page

• An HTML file must have an htm or html file extension

• An HTML file can be created using a simple text editor

• A HTML file is also called HTML document.

A Simple Example

<!DOCTYPE html><html>

<body> <p> This is my first homepage. </p>

</body> </html>

What is HTML Tag?

• HTML tags are used to mark-up HTML elements

• HTML tags are surrounded by the two characters < and >

• The surrounding characters are called angle brackets

• HTML tags normally come in pairs like <b> and </b>

• The first tag in a pair is the start tag, the second tag is the end tag

• The text between the start and end tags is the element content

• HTML tags are not case sensitive, <b> means the same as <B>

A Simple Example


<head> <title>Title of page</title>

</head> <body> This is my first homepage.

<b>This text is bold</b> </body>

</html>

Example Explained

• The first tag in your HTML document is <html>. This tag tells your browser that this is the start of an HTML document. The last tag in your document is </html>. This tag tells your browser that this is the end of the HTML document. <!DOCTYPE html> tells your browser that the document is an html5 document.

• The text between the <head> tag and the </head> tag is header information. Header information is not displayed in the browser window.

• The text between the <title> tags is the title of your document. The title is displayed in your browser's caption.

• The text between the <body> tags is the text that will be displayed in your browser.

• The text between the <b> and </b> tags will be displayed in a bold font.

What is HTML element?

This is an HTML element:

<b>This text is bold</b>

• An HTML element starts with a start tag and end tag.• Name of the HTML element follows the initial < bracket = b;• The element content is everything between the tags = This text

is bold.• Some HTML elements have empty content.• void elements are closed in the start tag.

• An Example is the line break tag <br /> (new line).

Nested HTML Elements

• Most HTML elements can contain other HTML elements.


<head> <title>Title of page</title>

</head> <body> This is my first homepage.

<b>This text is bold</b> </body>

</html>

HTML Attributes

<body bgcolor="red"> This is my first homepage. </body>

<body bgcolor=‘red’> This is my first homepage. </body>

Name of the attribute : bgcolor;Value of the attribute : red.

Both double style quotes and single style quotes are allowed.

HTML Attributes

• Attributes provide additional information about an element

• Attributes are always specified in the start tag

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

Notes:

• Attribute values should always be enclosed in quotes.

• Double or Single style quotes “ or ‘ can be used.

• Attribute names and attribute values are case-insensitive.

HTML Headings

Headings

Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading.

<h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3> <h4>This is a heading</h4> <h5>This is a heading</h5> <h6>This is a heading</h6>

HTML automatically adds an extra blank line before and after a

heading.

<!DOCTYPE html>

<html>

<body>

<h1>This is heading 1</h1>






</body>

</html>

This is heading 1This is heading 2This is heading 3This is heading 4This is heading 5This is heading 6

HTML Code Its Output

HTML Paragraphs

Paragraphs

Paragraphs are defined with the <p> tag.

<p>This is a paragraph</p>

HTML automatically adds an extra blank line before and after a

paragraph.

<!DOCTYPE html>

<html>

<body>

<p>This is paragraph I.</p>

<p>This is paragraph II.</p>

<p>This is paragraph III.</p>

</body>

</html>

This is paragraph I.This is paragraph II.This is paragraph III.


HTML Paragraphs <p>

HTML Line Breaks

HTML Line Breaks

The <br /> tag is used when you want to end a line, but don't want to start a new paragraph. The <br /> tag forces a line break wherever you place it.

<p>This <br /> is a para<br />graph with line breaks</p>

The br element is an void element. It has no closing tag.

<!DOCTYPE html>

<html>

<body>

<p>This is<br/>a para<br/>graph with line breaks</p>

</body>

</html>

This isa paragraph with line breaks


HTML Line Breaks

HTML Lines

HTML Lines

The <hr /> element is a void element. It has no closing tag.

The <hr /> tag creates a horizontal line in an HTML page.

<!DOCTYPE html>

<html>

<body>

<p>The hr tag defines a horizontal rule:</p>

<hr />


<hr />


<hr />


</body>

</html>

The hr tag defines a horizontal rule:

This is a paragraph

This is a paragraph

This is a paragraph


HTML Lines

HTML Comments

Comments in HTML

An example of comment tag.



The start of the comment is: 

<!DOCTYPE html>

<html>

<body>



<p>This is a regular paragraph</p>

</body>

</html>

This is a regular paragraph


HTML Comments

HTML Formatting

<!DOCTYPE html>

<html>

<body>

<p><b>This text is bold</b></p>

<p><i>This text is italic</i></p>

<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>

</body>

</html>

This text is boldThis text is italicThis is subscript and superscript


HTML Formatting

HTML Images

• <img> tag is used to insert images in webpages.• <img/> tag is empty (no closing tag)• Syntax for inserting image

<img src=“url” alt=“text”/>

src attribute is used to specify the URL (location of the image).

alt attribute specifies an alternate text that is used if the image can’t be displayed. This is required in HTML5.

HTML Images

<!DOCTYPE html>

<html>

<body>

<p>An image from folder</p>

<img src="/images/chrome.gif" alt="Google Chrome" />

<p>An image from internet</p>

<img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com" />

</body>

</html>

HTML Images – src & alt attributes

An image from folder

An image from internet

• height=“height_value” attribute is used to set the height of the image.• width=“width_value” attribute is used to set the width of the image.

<!DOCTYPE html>

<html>

<body>

<p>An image from internet</p>

<img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com" height=“200” width=“100”/>

</body>

</html>

HTML Images – height & width attributes

HTML Links

<!DOCTYPE html>

<html>

<body>

<a href="http://www.google.com">Visit Google</a>

<br />

<a href="http://www.google.com" target="_blank">Visit Google</a>

</body>

</html>

Visit Google Visit Google

HTML Code

Its Output

HTML Link and href attributes

If you set the target attribute to "_blank", the link will open in a new browser window

Open Google home page in the same window

Open Google home page in a new window

http://www.google.com/

http://www.google.com/


Using links to send e-mails:

Links can be used to link to email accounts not only web pages

HTML code

Output

<!DOCTYPE html>

<html>

<body>

<a href=“mailto:[email protected]”> Click here to email John</a>

</body>

</html>

Click here to email John


Using images as links:

Pressing the image will lead tothe web page

<!DOCTYPE html>

<html>

<body>

<a href = “http://www.w3schools.com”>

<img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com" />

</a>

</body>

</html>


Linking to files:

<!DOCTYPE html>

<html>

<body>

<a href = “http://www.w3schools.com/tutorial.mp4”>HTML5 video tutorial</a><br/>

<a href =“http://www.dr-almutairi.com/media/Kuwait.mp3”>Kuwait national anthem link in a media folder on the webserver</a>

</body>

</html>

Internal Linking• Links can be used to jump to different locations on the same page.

<!DOCTYPE html>

<html>

<body>

<h1 id=“top”>Internal linking example</h1>

<br/>

<br/>

<br/>

<br/>

<a href=“#top”>Go to the top of the page</a>

</body>

</html>

HTML Lists

An ordered list:1. Jehad2. Helal 3. Kassem

Note: Inside a list item you can put text, line breaks, images, links, other lists, etc.

HTML Lists

An unordered list:• Apple• Orange• Dates

HTML ordered Lists

<!DOCTYPE html>

<html>

<body>

<h4>An Ordered List:</h4><ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ol>

</body>

</html>

An Ordered List:1. Coffee 2. Tea 3. Milk

More HTML ordered Lists<!DOCTYPE html>

<html>

<body>

<h4>Numbered list:</h4>

<ol>

<li>Apples</li>

<li>Oranges</li>

</ol>

<h4>Letters list:</h4>

<ol type="A">

<li>Apples</li>

<li>Oranges</li>

</ol>

<h4>Lowercase letters list:</h4>

<ol type="a">

<li>Apples</li>

<li>Oranges</li>

</ol>

<h4>Roman numbers list:</h4>

<ol type="I">

<li>Apples</li>

<li>Oranges</li>

</ol>

<h4>Lowercase Roman numbers list:</h4>

<ol type="i">

<li>Apples</li>

<li>Oranges</li>

</ol>

</body>

</html>

Numbered list:1. Apples 2. Oranges

Uppercase Letters list:A. Apples B. Oranges

Lowercase letters list:a. Apples b. Oranges

Uppercase Roman numbers list:I. Apples II. Oranges

Lowercase Roman numbers list:i. Apples ii. Oranges

HTML Unordered Lists

<!DOCTYPE html>

<html>

<body>

<h4>An Unordered List:</h4><ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ul>

</body>

</html>

An Unordered List:• Coffee • Tea • Milk

More HTML Unordered Lists<!DOCTYPE html>

<html>

<body>

<h4>Disc bullets list:</h4>

<ul type="disc">

<li>Apples</li>

<li>Oranges</li>

</ul>

<h4>Circle bullets list:</h4>

<ul type="circle">

<li>Apples</li>

<li>Oranges</li>

</ul>

<h4>Square bullets list:</h4>

<ul type="square">

<li>Apples</li>

<li>Oranges</li>

</ul>

</body>

</html>

Disc bullets list:• Apples • Oranges

Circle bullets list:o Apples o Oranges

Square bullets list:■ Apples ■ Oranges

Nested Lists<!DOCTYPE html>

<html>

<body>

<h4>Numbered list:</h4>

<ol>

<li>Apples:

<ul>

<li>Green apples</li>

<li> Red apples</li>

</ul>

</li>

<li>Oranges</li>

</ol>

</body>

</html>

Numbered list:1. Apples:

• Green apples• Red apples

2. Oranges

HTML Tables

• <table> element defines an HTML table.

• A table can be split into three distinct sections: • Head (<thead> element)

• Table titles• Column headers

• Body (<tbody> element)• Primary table data

• Foot (<tfoot> element)• Calculation results• Footnotes• Above body section in the code, but displays at the bottom in the page

• Element <caption> describes the table’s content• The text inside the <caption> tag is rendered above the table in most browsers

HTML Tables

HTML Table Example

Table caption

Table head

Table body

Table foot

HTML Tables – table & caption elements<!DOCTYPE html><html><body>

<table border = "1" width = "40%" ><caption><strong>Price of Fruit</strong></caption><thead> <tr> <th>Fruit</th> <th>Price</th> </tr> </thead><tfoot> <tr> <th>Total</th> <th>$3.75</th> </tr> </tfoot>

<tbody> <tr> <td>Apple</td> <td>$0.25</td> </tr> <tr> <td>Orange</td> <td>$0.50</td> </tr> <tr> <td>Banana</td> <td>$1.00</td> </tr> <tr> <td>Pineapple</td> <td>$2.00</td> </tr> </tbody>

</table> </body></html>

TableCaption

HTML Tables – thead & tfoot elements<!DOCTYPE html><html><body>

<table border = "1" width = "40%" ><caption><strong>Price of Fruit</strong></caption><thead> <tr> <th>Fruit</th> <th>Price</th> </tr> </thead><tfoot> <tr> <th>Total</th> <th>$3.75</th> </tr> </tfoot>

<tbody> <tr> <td>Apple</td> <td>$0.25</td> </tr> <tr> <td>Orange</td> <td>$0.50</td> </tr> <tr> <td>Banana</td> <td>$1.00</td> </tr> <tr> <td>Pineapple</td> <td>$2.00</td> </tr> </tbody>

</table> </body></html>

TableCaption

• You can merge data cells with the rowspan and colspan attributes

• The values of these attributes specify the number of rows or columns occupied by the cell

• Can be placed inside any data cell <td> or table header cell <th>

HTML Tables -

HTML tables - Rowspan<!DOCTYPE html>

<html>

<body>

<table border="1" width="40%">

<tr>

<th>Name</th><td>Paul Deitel</td>

</tr>

<tr>

<th rowspan="2">Telephone</th><td>555-4321</td>

</tr>

<tr>

<td>555-1234</td>

</tr>

</table>

</body>

</html>

Name Paul Deitel

Telephone555-4321555-1234

HTML tables - colspan<!DOCTYPE html>

<html>

<body>

<table border="1" width="40%">

<tr>

<th>Name</th><th colspan="2">Telephone</th>

</tr>

<tr>

<td>Paul Deitel</td>

<td>555-4321</td>

<td>555-1234</td>

</tr>

</table>

</body>

</html>

Name Telephone

Paul Deitel 555-4321 555-1234

HTML Tables – cellpadding attribute

<!DOCTYPE html><html><body>

<table border="1" cellpading ="10"><tr> <td>First</td> <td>Row</td></tr> <tr> <td>Second</td> <td>Row</td></tr></table>

</body></html>

Use cellpadding attribute to set the white space between the cell content and its borders.

HTML Tables – cellspacing attribute


<table border="1" cellspacing="10"><tr> <td>First</td> <td>Row</td></tr> <tr> <td>Second</td> <td>Row</td></tr></table>

</body></html>

Use cellspacing attribute to increase the distance between the cells.

HTML Tables – align attribute


<table border="2"><tr> <th

align="left">Item</th> <th

align="right">2010</th></tr>

<tr> <td align="left">Clothes</td> <td align="right">$241.10</td></tr><tr> <td align="left">Food</td> <td align="right">$30.00</td></tr>

</table></body></html>

Special characters in HTML

• Some characters can not be directly shown in an HTML document. Either because these characters are reserved for the HTML code or because they are not on the keyboard.

<p> if x < 10 then increment x by 1</p>

Results in a syntax error• HTML provides Character entity references for represnting these

special characters.<p> if x < 10 then increment x by 1</p>

Doesn’t result in a syntax error

Special characters in HTMLSymbol Description Character entity reference

HTML5 character entities

& ampersand &

‘ apostrophe '

> greater-than >

< less-than <

“ quote "

Other common character entities

non-breaking space

© copyright ©

¼ fraction 1/4 ¼

½ fraction 1/2 ½

¾ fraction 3/4 ¾

™ trademark ™

HTML Forms

HTML provides the ability for collecting information or data from users using web forms.

Forms have many different uses like: Sending e-mail creating user accounts providing feedback issuing search queries

forms are used to pass and/or retrieve data to/from a server.

HTML Forms

1. User visits a web page that contains a form.

How does a web form work?

Web page containing form

2. User fills and submits the form.• The form contains the address of the web server.• When the user clicks the submit button the form will

automatically be transmitted to the server.


Filled form submitted to web server

3. Web server processes the data on the form using a form processor script, and returns the response back to the user.


Response page

Script file

Forms contain visual components, that users interact with such as Buttons, text fields, checkboxes, radio-buttons, drop-down

menus and more.

Forms may also contain nonvisual components, called hidden inputs. Hidden inputs are used to store any data that needs to be sent

to the server, but is not entered by the user. Hidden inputs can help the server to sort out the different forms

submitted to the web server.

HTML Forms

A form begins with the <form> element Attribute method specifies how the form’s data is sent to the web

server. (either “post” or “get”).

The action attribute of the form element specifies the URL of a script on the Web server to which the form data will be sent.

HTML Forms

<form method = "post" action = “script_file">

input elements

</form>

The <input> element is the most important element on a form.

The <input> element is used to create the different input fields on the form (buttons, textareas, checkboxes...)

An input element can vary depending on the type=“” attribute.

Users specify their data values using these input fields.

The values in these input elements are provided to the script that processes the form.

HTML Forms – input element

HTML Forms – Text Fields

<html><body>

<form method = "get" action = ""><h2> Text Field </h2><label> First Name: <input type="text“ name=“f_name”

size=“5” maxlength=“10”/> </label></form></body></html>

HTML Forms – Text Fields

<label> First Name: <input type="text“ name=“f_name” size=“5” maxlength=“10”/> </label>

Setting attribute type= “text” defines a single-line input field.

The <label> element provides users with information about the input element’s purpose.

The size attribute specifies the number of characters visible in the input element.

Optional attribute maxlength limits the number of characters input into a text box.

HTML Forms – Password Field

<html><body> <form method = "get" action = "">

<label> Password: <input type="password“ name=“p_field”/></label>

</form></body></html>

type= “password” defines a password input field.

The actual characters entered by the user are not shown. Here black circles are shown instead.

Allows users to enter sensitive information, such as credit card numbers and passwords.

The actual value input is sent to the web server, not the circles that mask the input.

HTML Forms – Radio Buttons

<html><body>

<form method = "get" action = ""> <p> Select your department:</p> <label> <input type="radio“ name=“cfw_dept” value=“ISC”/> ISC

</label> <br/> <label> <input type="radio“ name=“cfw_dept” value=“AAD”/> AAD

</label> </form>

</body></html>

HTML Forms – Radio Buttons

The radio input allows the user to make a selection

Set type=“radio” to define a radio button.

Radio buttons are usually defined in groups.

All radio buttons in a group have the same name attribute but different value attributes. (ex. name=“cfw_dept”).

The value attribute specify the value of the radio button selected. It is the value that gets submitted to the Web server.

only one radio button in a group can be selected at any time

<label> <input type="radio“ name=“cfw_dept” value=“ISC”/> ISC </label>

HTML Forms – Checkboxes

<html><body>

<form method = "post" action = ""> <p> Select all coursed you have completed:</p> <label> <input type="checkbox" name="courses" value="ISC240"/>

ISC240 </label> <br/> <label> <input type="checkbox" name=“courses” value=“ISC340"/>

ISC340 </label> </form>

</body></html>

HTML Forms – Checkboxes

<label> <input type="checkbox" name="courses" value="ISC240"/> ISC240 </label>

A checkbox is similar in function and use to a radio buttons, except that it allows multiple checkboxes in a group to be selected.

Set type=“checkbox” to define a checkbox.

All checkboxes in a group must have the same name attribute.

The value attribute specify the value of the checkbox selected.

HTML Forms – Buttons

<html><body><form method="get" action=""> <label> Username: <input type="text" name="user" /></label> <input type="submit“ name=“bsubmit” value="Submit" /> <input type="reset" name=“breset” value="Reset" /></form></body></html>

The submit input is used to submit the data entered in the form to the web server for processing.

In most web browsers having type=“submit” will create a button that submits the form data when clicked.

The reset input allows a user to reset all form elements to their default values. To create a reset button set type=“reset”.

HTML Forms – hidden inputs

Input hidden is used to store any data that needs to be sent to the server, but is not entered by the user.

Set type =“hidden” to create a hidden input.

Hidden inputs are not displayed on the form.

<input type=“hidden" name=“form_type” value=“feedback form”/>

HTML Forms – Drop-down list

<html><body>

<form method = "post" action = ""> <label> select your country: <select name="country"> <option value="Kuwait">Kuwait</option> <option value="Bahrain">Bahrain</option> <option value="UAE">UAE</option> <option value="KSA">KSA</option></select></label> </form>

</body></html>

HTML Forms – Drop-down list

The select input provides a drop-down list of items.

The name attribute identifies the drop-down list.

The option element adds items to the drop-down list.

The value attribute specifies the value that is transmitted to the web server.

<select name="country"> <option value="Kuwait">Kuwait</option> <option value=“Bahrain">Bahrain</option></select>

HTML Forms – Textarea

<html><body>

<form method = "post" action = ""> <textarea name="feedback" rows="5" cols="30"> Write your

feedback. </textarea> </form>

</body></html>

HTML Forms – Textarea

The textarea element inserts a multiline text box, called a text area, into a form

The number of rows in the text area is specified with the rows attribute.

The number of columns (i.e., characters per line) is specified with the cols attribute.

The text placed between the <textarea></textarea> tags is the default text displayed when the page is visited.

<textarea name="feedback" rows="5" cols="30"> Write your feedback.</textarea>

Include a label element for each form element to help users determine the purpose of each form element.

Place hidden input elements at the beginning of a form, immediately after the opening <form> tag. This placement allows document authors to locate hidden input elements quickly.

When your form has several checkboxes with the same name, you must make sure that they have different values, or the scripts running on the web server will not be able to distinguish them.

Not setting the name attributes of the radio buttons in a form to the same name is a logic error because it lets the user select all of them at the same time.

Notes to remember

Form Exercise

meta Elements

• Information about the web page should be included in the html document so that search engines can add the page to their database for search results.

• HTML element <meta> is used to write this information for search engines.

<!DOCTYPE html>

<html>

<head>

<meta name=“keywords” content=“Kuwait University, Information Science Department, web programming, Kuwait, ISC340”>

<meta name=“description” content=“This is the website for the ISC340 web programming course offered in the Information Science department in Kuwait University”>

</head>

<body>

<h1> ISC340 course</h1>

</body>

</html>

Documents

Ch2: Introduction to HTML5. How does the WWW work? Web information is stored in documents called Web pages. Web pages are files stored on computers called