Upload
others
View
2
Download
0
Embed Size (px)
Citation preview
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:[email protected]?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
• < → <
• > → >
• & → &
• → space
• © ©
• " “
44
Formatting Tags:
45
Tag Purpose
<b></b> bold
<i></i> italicized
<u></u> underlined
<sup></sup> Samplesuperscript
<sub></sub> 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