Post on 12-Jan-2016
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
<!DOCTYPE html><html>
<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.
<!DOCTYPE html><html>
<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>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</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 Code Its Output
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 Code Its Output
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 />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
</body>
</html>
The hr tag defines a horizontal rule:
This is a paragraph
This is a paragraph
This is a paragraph
HTML Code Its Output
HTML Lines
HTML Comments
Comments in HTML
An example of comment tag.
<!-- This is a comment -->
The start of the comment is: <!--
The end of the comment is: -->
<!DOCTYPE html>
<html>
<body>
<!--This comment will not be displayed-->
<p>This is a regular paragraph</p>
</body>
</html>
This is a regular paragraph
HTML Code Its Output
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 Code Its Output
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
HTML Link and href attributes
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:john@company.com”> Click here to email John</a>
</body>
</html>
Click here to email John
HTML Link and href attributes
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>
HTML Link and href attributes
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
<!DOCTYPE html><html><body>
<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
<!DOCTYPE html><html><body>
<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.
How does a web form work?
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.
How does a web form work?
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>