The Conceptual Foundations of Web Development

HTML Tutorial

1

Important Links– CISC:492

Feedback Form

http://goo.gl/nWchh

Slides are adapted from:

http://schoolacademy.googlecode.com/svn/trunk/

http://rizki.staff.ub.ac.id/category/web-programming/

2

Ice Breaker

How many of these terms are you already aware of?

WWW, HTTP, HTTP Client, HTTP Server, FTP, SMTP and URL

A. Pretty much all of them (6-7).

B. Many of them (4 – 5).

C. Just a few (2-3).

D. Almost nothing! (0-1)

3

4

What Is the Internet?

5

What is the Internet?

a network of networks – worldwide collection of computer networks that links together millions of computers.

What are Internet protocols?

the rules for transferring information between computers

Examples of Internet protocols: HTTP - hypertext transfer protocol (set of rules for exchanging text,

graphics and sound)

FTP - file transfer protocol (set of rules for exchanging files)

SMTP – simple mail transfer protocol (set of rules for exchanging emails)

Internet / Protocols / WWW

What is the World Wide Web?

6

WWW is a set of HTML pages accessible using the HTTP protocol

HTTP Protocol: the Heart of the WWW

What is a Web Site?

A collection of files stored on a computer called a web server.

•Text files •Graphical files (.jpg or .gif, for example) •Files that contain scripts that make programs run.

•A home page is the first document users see when they access a Web site

7

8

What is a Web Browser?

9

Web Browser (HTTP Client)

• A Web browser, also called a browser, is a program that interprets and displays Web pages and enables you to view and interact with a Web page – Microsoft Internet Explorer, Firefox, Opera, etc.

• A hyperlink, also called a link, is an element used to connect one Web page to another

• A Uniform Resource Locator (URL) is the address of a document or other file accessible on the Internet

URL Example

• It consists of:

– Protocol for communicating with the server (e.g.,

http, ftp, https, ...)

– Name of the server or IP address (e.g.

www.facebook.com, http://69.63.181.12/)

– Path and name of the resource (e.g. profile.php)

– Parameters (optional, e.g. ?id=12345678&lang=en)

10

http://www.facebook.com/profile.php?id=12345678&lang=en

URL Encoding

• URLs are encoded according RFC 1738 Standards

• All other characters are escaped with the “%” character:

For example: Space in URL becomes %20,or it can also be encoded as "+“.

11

“... Only latin alphanumeric [0-9a-zA-Z] and some special characters $-_.+!*'() may be used unencoded within an URL.”

12

What is a Web Server (HTTP Server)?

• Web pages are stored on a Web server, or host, which is a computer that stores and sends (serves) requested Web pages and other files to client computers

• Publishing is copying Web pages and other files to a Web server

13

How the WWW Works

Client-Server Architecture

The Classical Client-Server Model

Server

Desktop Client

Mobile Client

Client Machine

14

- your browser connects, using the HTTP protocol, to a web server

- the web server fetches the requested web page and sends the HTML to your browser - your browser turns the HTML into a nice-looking page on your screen

How the WWW Works

Client computer,

Your web browser

e.g. Firefox, IE

Internet connection

Internet

Routers Text file containing

an HTML web page

Web server (an HTTP server) e.g. Apache, IIS

/mypage.html

Client-Server Architecture

• User uses an HTTP client (Web Browser)

• Makes a request to an HTTP server with a URL (e.g. http://www.yahoo.com/)

• Server sends back data in HTML format (the response)

• Web browser reads HTML response and displays it on the client side.

15

Page request (URL)

Client running a Web Browser

Server running Web Server Software

(Apache, IIS, etc.)

Server response (HTML)

HTTP

HTTP

16

Hypertext Markup Language (HTML)

17

What is HTML? • HyperText Markup Language the authoring language used to create

webpages on the World Wide Web.

• HTML is a tag-driven language; it uses a set of special instructions called

tags or markup to define the structure and layout of a web document, and specify how the page is displayed in a browser

• HTML is a case-insensitive language and platform independent.

• HTML files are identified as .html or .htm file extension.

• There are tools and WYSIWYG HTML editors available to help users creating HTML pages:

• FrontPage, Dreamweaver, Visual Studio.

• Notepad ++, ConTEXT, or as simple as Notepad.

18

HTML is a tag driven language

Tags And Attributes

Tags are :

surrounded with angle brackets like this

<B> or <I>.

Most tags come in pairs (opening and closing)

exceptions: <br>, <img>, etc.

The first tag turns the action on, and the second turns it off.

<b> ALL TEXT HERE WILL APPEAR BOLD </b>

19

Tags And Attributes – Contd.

Nesting of tags are allowed.

20

Tags And Attributes – Contd. Attributes specify tag properties and behaviour.

Attributes can use either single or double quote.

For example,

<P> starts a paragraph </p>

<P ALIGN=“CENTER”> centers the paragraph </p>

Getting started

<html>

<head>

<title>My First Web Page</title>

</head>

<body bgcolor="white">

<p> Hello World!</p>

</body>

</html>

21

HTML header

HTML body

Run your file!

This is the title

This is the body

Hello World!

22

Line breaks

Line breaks can be embedded anywhere in HTML, and don't affect the appearance of the web page on your browser.

<html> <head> <title>My First Web Page</title> </head> <body bgcolor="white"> <p> Hello World!</p> </body> </html>

<html><head> <title>My First Web Page</title></head> <body bgcolor="white"> <p> Hello<br>World!</p> </body> </html>

23

Document Structure: Nested Tags

• Like a tree, each element is contained inside a parent element

• Each element may have any number of attributes

<body>...</body> bgcolor="white"

<html>...</html>

<head>...</head>

<title>...</title> other stuff <p>...</p> <br> <table>...</table>

This is some text!

24

25

<html> … </html>

Basic tag to identify portion of file that contains HTML

<html> is an opening tag

</html> is a closing tag (note the direction of the slash!)

text between the opening and closing tag is called the “element”

<head> … </head>

placed at the top of document immediately after the <html> tag

tags information about the document, e.g. author, style, etc.

contains the required document <title>...</title> tag

can contain other tags, such as <Script>, <!– comments -->, etc.

HTML – Basic Tags

26

HTML – Basic Tags

<title> … </title> included as an element inside the <head>…</head> section

element of this tag is the title displayed in title bar of the browser

may also be used as title of page when page is bookmarked

should be meaningful and uniquely identify the page because search engines and people rely on titles.

<body> … </body>

included as the second element inside the <html>…</html> tags.

follows the <head>…</head> portion of the document

contains the information to be displayed in the browser window

any attributes set on this tag will apply to the entire page

27

HTML – Basic Tags

<p> … </p>

included as an element inside the <body>…</body> section

Surrounds a paragraph of text

DOCTYPE

Placed at the very first line of your file, before <html>

NOT an HTML tag; it is an instruction to your web browser

Tells the browser what version of HTML to expect

For example, write this to use the “strict” HTML version 4.01 type:

<!DOCTYPE HTML PUBLIC

"-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

a. First Year b. Second Year c. Third Year

Ordered Lists: <ol> Tag

• Create an Ordered List using <ol></ol>:

• Attribute values for type are 1 (default), A, a, I, or i

28

1. First Year 2. Second Year 3. Third Year

A. First Year B. Second Year C. Third Year

I. First Year II. Second Year III. Third Year

i. First Year ii. Second Year iii. Third Year

<ol type="1">

<li>First Year</li>

<li>Second Year</li>

<li>Third Year</li>

</ol>

Unordered Lists: <ul> Tag • Create an Unordered List using <ul></ul>:

• Attribute values for type are:

– disc, circle (default) or square

29

• Fall Term

• Winter Term

• Summer Term

o Fall Term

o Winter Term

o Summer Term

Fall Term

Winter Term

Summer Term

<ul type="disk">

<li>Fall Term</li>

<li>Winter Term</li>

<li>Summer Term</li>

</ul>

Exercise #1

Write an HTML page to display the following list:

o First Year 1. Fall term

2. Winter term

o Second Year 1. Fall term

2. Winter term

• Unordered Lists (bullet points) <ul>

<li> First Year

<li> Second Year

</ul>

• Ordered Lists (numbered) <ol>

<li> Fall Term

<li> Winter Term

</ol>

• Can be nested

30

Image Files <img src="URL/Location of image file“ alt="logo" >

• JPEG – Best for photos

– Public standard

• GIF – Best for simple images

– Older standard

• PNG – Portable Network Graphics – Public standard replacement for GIF

31

The alt attribute specifies

an alternate text for an

image, if the image cannot

be displayed because of

slow connection, or if the

user uses a screen reader.

Anchor Tag (Hyperlinks)

Absolute HREFs specify full path/URL.

• <a href=http://www.yahoo.com/ title=“Click here to open your email">Yahoo!</a>

• <a href=“C:/My Docs/realdoc.html">Yahoo!</a>

Relative HREFs are relative to the directory containing the current HTML file.

• <a href="reldoc.html“> In this directory!</a>

• <a href="a/doc.html">In sub-directory a!</a>

32

Content of title attribute is displayed as

hint when element is hovered with mouse

Hyperlinks: <a> Tag

• Link to a document called form.html on the same server in the same directory:

• Link to a document called cat.html on the same server in the subdirectory stuff:

33

<a href="form.html">Fill Our Form</a>

<a href="stuff/cat.html">Catalog</a>

Hyperlinks: <a> Tag

• Link to an external Web site:

– Always use a full URL, including "http://", not just "www.somesite.com"

– Using the target="_blank" attribute opens the link in a new window

• Link to an e-mail address:

34

<a href="http://www.devbg.org" target="_blank">BASD</a>

<a href="mailto:bugs@example.com?subject=Bug+Report">

Please report bugs here (by e-mail only)</a>

Hyperlinks: <a> Tag

• Link to a document called parent.html on the same server in the parent directory:

• Link to a document called index.html

– On the same server, in the subdirectory english of the parent directory:

35

<a href="../english/index.html">Switch to

English version</a>

<a href="../parent.html">Parent</a>

HTML Tables

HTML Tables • Tables represent tabular data

– A table consists of one or several rows

– Each row has one or more columns

• Tables comprised of several core tags:

<table></table>: begin / end the table

<tr></tr>: create a table row

<td></td>: create tabular data (cell)

<th></th>: for header row (bold and centered)

37

HTML Tables – Core Tags

• Start and end of a table

• Start and end of a row

• Start and end of a cell in a row

38

<table> ... </table>

<tr> ... </tr>

<td> ... </td>

Simple Table 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>

39

Table Example 2 - Lecture Notes

40

Lectures Table – Example

41

<table border="1"> <tr> <td><img src="ppt.gif"></td> <td><a href="lecture1.ppt">Lecture 1</a></td> </tr> <tr> <td><img src="ppt.gif"></td> <td><a href="lecture2.ppt">Lecture 2</a></td> </tr> <tr> <td><img src="ppt.gif"></td> <td><a href="lecture1.ppt">Lecture 1</a></td> </tr> </table>

Exercise #2

42

Table.html

<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>

<a href="a/doc.html">In sub-directory a!</a>

<img src="URL/Location of image file">

Hello.html

Comments

• <!-- This is a comment -->

• <!--

This paragraph,

is also a

comment...

-->

43

Special HTML

• &lt; → <

• &gt; → >

• &amp; → &

• &nbsp; → space

• &copy; ©

• &quot; “

44

Formatting Tags:

45

Tag Purpose

<b></b> bold

<i></i> italicized

<u></u> underlined

 Samplesuperscript

 Samplesubscript

<strong> </strong>

strong

<em></em> emphasized

<blockquote> </blockquote>

Quoted text

block

<del></del> Deleted text – strike through

Basic Tags

Start Tag Purpose

<!DOCTYPE> Defines the document type

<html> Defines an html document

<head> Defines the header element

<title> Defines the page title

<body> Defines the body of the page

<h1> to <h6> Defines header 1 to header 6

<p> Defines a paragraph

<br > Inserts a single line break

<hr > Inserts a horizontal line

<!--...--> Defines a comment

46

Lists:

Start Tag Purpose

<ul> Defines an unordered list

<ol> Defines an ordered list

<li> Defines a list item

47

Tables :

Start Tag Purpose

<table> Defines a table

<caption> Defines a table caption

<th> Defines table header

<tr> Defines a table row

<td> Defines a table cell

48

Form:

Start Tag Purpose

<form> Defines a form

<input> Defines an input field

<textarea> Defines a large text area

<button> Defines a push button

<select> Defines a selectable list

<optgroup> Defines an option group

<option> Defines an item in a list box

<label> Defines a label

<fieldset> Defines a fieldset

<legend> Defines a title in a fieldset

49

HTML Forms

• Forms are the primary method for gathering data from site visitors

• Create a form block with

• Example:

50

<form></form>

<form name="myForm" method="post" action="path/to/some-script.php"> ... </form>

The "action" attribute tells where the form data should be sent

The “method" attribute tells how the form data should be sent – via

GET or POST request

Form Fields

• Text fields are single-line entry fields:

• Text areas can contain multiple lines of text:

• Hidden fields contain data not shown to user: – Often used by JavaScript code

51

<input type="text" name="FirstName" value="This is a text field">

<textarea name="Comments">This is a multi-line text field</textarea>

<input type="hidden" name="Account" value="This is a hidden text field">

Form Input Controls

• Create a checkbox:

• Create a radio button:

• Radio buttons can be grouped, allowing only one to be selected from a group:

52

<input type="checkbox" name="fruit" value="apple">

<input type="radio" name="title" value="Mr.">

<input type="radio" name=“city" value=“Kingston"> <input type="radio" name=“city" value=“Toronto">

Other Form Controls

• Pull down menu (drop-down list):

• Submit button:

53

<select name="gender"> <option value="Value 1" selected="selected">Male</option> <option value="Value 2">Female</option> </select>

<input type="submit" name="submitBtn" value="Apply Now">

Other Form Controls

• Reset button – clears the form

• Image button – acts like submit but image is displayed instead of button

• Ordinary button – used for JavaScript, no default action

54

<input type="reset" name="resetBtn" value="Clear the form">

<input type="image" src="submit.gif" name="submitBtn" alt="Submit">

<input type="button" value="simple button">

Other Form Controls

• Password input – acts like normal text field but hides the text with * signs

• Multiple select field – code is like drop down but displays list of items to select

55

<input type="password" name="pass" value="">

<select name="products" multiple="multiple"> <option value="Value 1" selected="selected">keyboard</option> <option value="Value 2">mouse</option> <option value="Value 3">speakers</option> </select>

HTML Forms – Example

56

<form method="POST" action="apply-now.php"> <input name="subject" type="hidden" value="Class" /> <p>Degree: <select name="degree"> <option value="BA">Bachelor of Art</option> <option value="BS">Bachelor of Science</option> <option value="MBA" selected="true">Master of Business Administration</option> </select> </p> <p> First Name: <input type="text" name="firstname" /> </p> <p> Last Name: <input type="text" name="lastname" /> </p> <p> Student ID: <input type="password" name="studentid" /> </p>

form.html

HTML Forms – Example

57

<p> Gender: <input name="gender" type="radio" value="Male" checked="true" /> Male <input name="gender" type="radio" value="Female" /> Female </p> <p> E-mail: <input type="text" name="email" value="" /> </p> <p> <textarea name="terms" cols="30" rows="4" readonly="true">TERMS AND CONDITIONS By clicking the Send Form button you agree to submit this form.</textarea> </p> <p> <input type="submit" name="button" value="Send Form" /> </p> </form>

form.html (continuation)

<p> Gender: <input name="gender" type="radio" value="Male" checked="true" /> Male <input name="gender" type="radio" value="Female" /> Female </p> <p> E-mail: <input type="text" name="email" value="" /> </p> <p> <textarea name="terms" cols="30" rows="4" readonly="true">TERMS AND CONDITIONS By clicking the Send Form button you agree to submit this form.</textarea> </p> <p> <input type="submit" name="button" value="Send Form" /> </p> </form>

form.html (continuation)

HTML Forms – Example

58

59