Learning HTML http://www.w3schools.com Internet and Web Application Development SWE 444 Dr. Ahmed Youssef
Feb 22, 2016
Learning HTMLhttp://www.w3schools.com
Internet and Web Application DevelopmentSWE 444
Dr. Ahmed Youssef
Introduction
HTML is a language for describing web pages.HTML stands
for Hyper Text Markup LanguageHTML is not a programming language, it is
a markup languageA markup language is a set of markup tagsHTML uses markup tags to describe web
pagesAhmed Youssef:: SWE444: Internet and Web Application Development
HTML Tags
HTML tags are keywords surrounded by angle brackets like <html>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
Ahmed Youssef:: SWE444: Internet and Web Application Development
html
bodyhead
title ph1 p h2 ul
lili li
text text text text text
text text text
Web Page
HTML Basic Document
Open and close HTML document <html> … </html>Enclose document header <head> … </head>Contain the document’s assigned title. <title> … </title>Contain the body of the HTML document. <body> … </body>
<html><head><title>Title of document goes here</title></head><body> Visible text goes here…</body></html>
Ahmed Youssef:: SWE444: Internet and Web Application Development
Example Explained
The text between <html> and </html> describes the web pageThe text between <body> and </body> is the
visible page contentThe text between <h1> and </h1> is displayed
as a headingThe text between <p> and </p> is displayed as
a paragraphAhmed Youssef:: SWE444: Internet and Web Application Development
Heading Elements
<h1>Largest Heading</h1><h2> . . . </h2><h3> . . . </h3><h4> . . . </h4><h5> . . . </h5><h6>Smallest Heading</h6>
Ahmed Youssef:: SWE444: Internet and Web Application Development
Heading Elements
<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>
Paragraphs
Paragraphs are defined with the <p> tag.
<html><body><p>This is a paragraph.</p><p>This is a paragraph.</p><p>This is a paragraph.</p>
</body></html>
Ahmed Youssef:: SWE444: Internet and Web Application Development
HTML Links
HTML links are defined with the <a> tag.The href attribute specifies the destination of a link.
Example<html>
<body><a href="http://www.w3schools.com">This is a link</a></body>
</html>Ahmed Youssef:: SWE444: Internet and Web Application Development
HTML Comments
Comments can be inserted into the HTML code to make it more readable and understandable. Comments are ignored by the browser and
are not displayed.Comments are written like this:
<!-- This is a comment -->
Ahmed Youssef:: SWE444: Internet and Web Application Development
HTML LinesThe <hr /> tag creates a horizontal line in an HTML page.
<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 />
</body></html> Ahmed Youssef:: SWE444: Internet and Web Application Development
HTML Line Breaks
Use the <br /> tag if you want a line break (new line) without starting a new paragraphExample<html><body> <p>Welcome in Hail </p> <p>Welcome<br />in <br />Hail</p></body></html>
Ahmed Youssef:: SWE444: Internet and Web Application Development
HTML Text Formatting
Tag Description<b> bold text<big> big text<i> italic text<small> small text<strong> strong text<sub> subscripted text<sup> superscripted text
Ahmed Youssef:: SWE444: Internet and Web Application Development
Exapmle
<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>This is<sub> subscript</sub> and
<sup>superscript</sup></p></body></html>
Preserving Whitespace
<pre>class Foo{ static void main(string[] args) { return; }}</pre>
vs
HTML Images
In HTML, images are defined with the <img> tag.To display an image on a page, you need to use
the src attribute.
<img src="/images/pulpit.jpg" border=“0" width="304" height="228" />
Ahmed Youssef:: SWE444: Internet and Web Application Development 17
Images
WIDTH="..." The width in pixels of an image. HEIGHT="..." The height in pixels of the
image. BORDER="..." Creates a border around image.
Ahmed Youssef:: SWE444: Internet and Web Application Development
Ahmed Youssef:: SWE444: Internet and Web Application Development 19
<img src="../images/bird.jpg" alt="Magpie picture" width="200px"/>
(Relative) URL of the binary
image file
Alternative textto be displayed
if the image can't be displayedwidth and/or height
attributes used to scale the rendered size of the image
HTML Lists
Ordered list:1.The first list item2.The second list item3.The third list item
Unordered list:• List item• List item• List item
20
Definition Listslist of items, with a description of each item.Coffee - black hot drinkMilk - white cold drink
HTML List TagsTag Description<ol> Defines an ordered list<ul> Defines an unordered list<li> Defines a list item<dl> Defines a definition list<dt> Defines an item in a definition list<dd> Defines a description of an item in a
definition list
HTML List Tags
ListsUnordered Lists
>ul<> li>First Item</li<
> li>Another item</li</>ul<
Ordered Lists>ol<
> li>First Item</li<> li>Second Item</li<
/>ol<Definition Lists
>dl<> dt>job</dt <
> dd>a piece of work</dd<>dt>spade</dt<
>dd>a tool for digging</dd</>dl<
Numbered List<html><body>
<h4>Numbered list:</h4><ol>
< li>Apples</li>< li>Bananas</li>< li>Lemons</li>< li>Oranges</li>
/<ol></html></body>
Ahmed Youssef:: SWE444: Internet and Web Application Development
<h4>Letters list:</h4><ol type="A">
< li>Apples</li>< li>Bananas</li>< li>Lemons</li>< li>Oranges</li>
</ol>
<h4>Lowercase letters list:</h4><ol type="a">
<li>Apples</li>< li>Bananas</li>< li>Lemons</li>< li>Oranges</li>
</ol> Ahmed Youssef:: SWE444: Internet and Web Application Development
<h4>Roman numbers list:</h4><ol type="I">
< li>Apples</li>< li>Bananas</li>< li>Lemons</li>< li>Oranges</li>
</ol>
<h4>Lowercase Roman numbers list:</h4><ol type="i">
< li>Apples</li>< li>Bananas</li>< li>Lemons</li>< li>Oranges</li>
</ol>
Ahmed Youssef:: SWE444: Internet and Web Application Development
Different types of unordered lists
<html><body><h4>Disc list:</h4><ul type="disc">
< li>Apples</li>< li>Bananas</li>< li>Lemons</li>< li>Oranges</li>
</ul> </html></body>
>h4<Circle bullets list:>/h4<>ul type="circle"< >li<Apples>/li< >li<Bananas>/li< >li<Lemons>/li< >li<Oranges>/li<>/ul<
>h4<Square bullets list:>/h4<>ul type="square"< >li<Apples>/li< >li<Bananas>/li< >li<Lemons>/li< >li<Oranges>/li<>/ul<
HTML Tables
Tables are defined with the <table> tag.A table is divided into rows (with the <tr> tag),
data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell.
<td> tag can contain text, links, images, lists, forms, other tables, etc.
Example
<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>
HTML Table Headers<table border="1">
<tr><th>Header 1</th><th>Header 2</th>
</tr><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>
Vertical Headers
<table border="1"><tr> <th>First Name:</th> <td>Bill Gates</td>
</tr><tr> <th>Telephone:</th> <td>555 77 854</td>
</tr>
<tr> <th>Telephone:</th> <td>555 77 855</td>
</tr></table>
Tables<table border="2"> <caption>Fruit Juice Drinks</caption> <tr> <th></th> <th> Apple </th> <th> Orange </th> </tr> <tr> <th> Breakfast </th> <td> 0 </td> <td> 1 </td> </tr> <tr> <th> Lunch </th> <td> 1 </td> <td> 2 </td> </tr></table>
HTML Styles - Background Color
Ahmed Youssef:: SWE444: Internet and Web Application Development 33
HTML List Tags
<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>
HTML Style Font, Color and Size
>h1 style="font-family:verdana"<A heading>/h1<>p style="font-family:arial;color:red;font-
size:20;"< A paragraph.>/p<
Ahmed Youssef:: SWE444: Internet and Web Application Development 34
HTML Style - Text Alignment
<h1 style="text-align:center">This is a heading</h1><p>The heading above is aligned to the center </p>
Ahmed Youssef:: SWE444: Internet and Web Application Development 35
HTML Forms
HTML forms are used to pass data to a server.A 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.
HTML Form TagsDescription Tag
Defines an HTML form for user input <form>
Defines an input control <input />
Defines a multi-line text input control <textarea>
Defines a label for an input element <label>
Defines a border around elements in a form <fieldset>
Defines a select list (drop-down list) <select>
Defines an option in a select list <option>
Defines a push button <button>
HTML Forms
The <form> tag is used to create an HTML form:
<form>.input elements.
</form>
HTML Forms - The Input Element• The input element is used to select user information.• An input element can be of type
– text field, – checkbox, – password, – radio button, – submit button, – and more.
type = text|password|checkbox|radio|submit| reset|button
Text Field
<form>First name: <input type="text"
name="firstname" /><br />
Last name: <input type="text" name="lastname" /></form>
Password Field
<form>Password: <input type="password" name="pwd" />
</form>
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=“Gender" value="male" /> Male<br /><input type="radio" name=" Gender " value="female" /> Female</form>
Submit Button
A submit button is used to send form data to a server. <form>Username: <input type="text" name="user" /><input type="submit" value="Submit" /></form>
Checkboxes
User can 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
</form>
Drop-Down List
<form ><select name="cars">
<option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option>
</select></form>
Text-area
To create a multi-line text input control. User can write an unlimited number of characters.
<textarea rows="10" cols="30"> The cat was playing in the garden. </textarea>
Create a button
<form ><input type="button" value="Hello world!"></form>
Ahmed Youssef:: SWE444: Internet and Web Application Development 47
Last Lecture
ListTableStylesForms
Ahmed Youssef:: SWE444: Internet and Web Application Development 48
HTML Forms - The Input Element
used to select user information.type = text | password | checkbox | radio |
submit | reset | button
Text-area
To create a multi-line text input control. User can write an unlimited number of characters.
<textarea rows="10" cols="30"> The cat was playing in the garden. </textarea>
Fieldset
Used to logically group together elements in a form.To draws a box around the related form
elements.
Fieldset - Example
<form><fieldset>
Name: <input type="text" size="30" /><br />Email: <input type="text" size="30" /><br />Date of birth: <input type="text" size="10" />
</fieldset></form>
Legend
Defines a caption for the fieldset element <form>
<fieldset> <legend align="right">Information:</legend> Name: <input type="text" size="30" /><br /> Email: <input type="text" size="30" /><br /> Date of birth: <input type="text" size="10" /> </fieldset></form>
Drop-Down List
<form ><select name="cars">
<option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option>
</select></form>
Create a button
<form ><input type="button" value= " I Agree">
</form>
Ahmed Youssef:: SWE444: Internet and Web Application Development 55
Create a button
<button type="button">I Agree!</button>
HTML Frames
With frames, you can display more than one HTML document in the same browser window.
The HTML frameset Element
The frameset element holds one or more frame elements.The frameset element states HOW MANY columns or rows HOW MUCH percentage/pixels of space will
occupy each of them.
Vertical Frameset
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm" /> <frame src="frame_b.htm" /> <frame src="frame_c.htm" />
</frameset>
frame_a.htm
<html><body style="background-color: red" >
<h3>Frame A</h3></body>
</html>
frame_b.htm
<html><body style="background-color: green" > <h3>Frame B</h3>
</body></html>
frame_c.htm
<html><body style="background-color: blue" >
<h3>Frame C</h3></body>
</html>
Horizontal Frameset
<frameset rows="25%, *, 25%">
<frame src="frame_a.htm" /> <frame src="frame_b.htm" /> <frame src="frame_c.htm" />
</frameset>
Nested Framesets
<frameset rows="50%,50%"> <frame src="frame_a.htm" />
<frameset cols="25%,75%"> <frame src="frame_b.htm" />
<frame src="frame_c.htm" /> </frameset>
</frameset>
tryhtml_contents.htm
<body><a href ="frame_a.htm" target ="showframe">Frame a</a><br /><a href ="frame_b.htm" target ="showframe">Frame b</a><br /><a href ="frame_c.htm" target ="showframe">Frame c</a></body>
Navigation Frame
<frameset cols="120,*">
<frame src="tryhtml_contents.htm" /> <frame src="frame_a.htm" name="showframe" />
</frameset>
Frameset with noresize
<frameset rows="50%,50%">
<frame noresize="noresize" src="frame_a.htm" /> <frame noresize="noresize" src="frame_b.htm" />
</frameset>
XHTML
What Is XHTML?
Stands for eXtensible HyperText Markup
Language
XHTML is a combination of HTML and XML
XHTML is almost identical to HTML 4.01
XHTML is a stricter and cleaner version of
HTML
XHTML is a W3C Recommendation
All browsers support XHTML
Bad HTML
<html><head>
<title>This is bad HTML</title>
<body><h1>Bad HTML<p>This is a paragraph
</body> Why?
Differences Between XHTML and HTML
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 elements must be properly nested
<ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> <li>Milk</li></ul>
<ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li></ul>
XHTML Elements Must Always Be Closed
<p>This is a paragraph <p>This is another paragraph
<p>This is a paragraph</p> <p>This is another paragraph</p>
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%">
Mandatory XHTML Elements
All XHTML documents must have:
a DOCTYPE declaration. The html, head, title, and body
Mandatory XHTML Elements
<!DOCTYPE ...> <html> <head>
<title>... </title></head><body> ... </body>
</html>
77
HTML Document Type Declarations
XHTML 1.0 Strict:<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Frameset:<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN“"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
HTML 4.01 Transitional:<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN“"http://www.w3.org/TR/html4/loose.dtd">
SWE 444: Internet & Web Application Development
The 3 Document Type Definitions
XHTML 1.0 Strict Use this when you want really clean markup, free of presentational clutter.
Use this together with Cascading Style Sheets.XHTML 1.0 Transitional
Use this when you need to take advantage of HTML's presentational features and when you want to support browsers that don't understand Cascading Style Sheets.
XHTML 1.0 Frameset Use this when you want to use HTML Frames to partition the browser
window into two or more frames.
3.78
<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
79
A Minimum XHTML Document Template
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE htmlPUBLIC "-//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" xml:lang="en"
lang="en"> <head><title>... </title></head><body> ... </body></html>
SWE 444: Internet & Web Application Development
An XHTML Example• <!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" xml:lang="en" lang="en" >
<head><title>simple document</title>
</head><body>
<p>a simple paragraph</p></body>
</html>80