Session ii(html)

 What is the Internet?
 a network of networks – an inter-network, or Internet
 What are Internet protocols?
 the rules for transferring information between programs
 HTTP - hypertext transfer protocol
 FTP - file transfer protocol
 SMTP – simple mail transfer protocol
 What is the World Wide Web?
 a set of HTML pages accessible using the HTTP protocol
2

 How does a Web Browser (Firefox) fit in this picture?
 - your browser connects, using the HTTP protocol, to a web server
- the web server fetches an HTML web page and sends the HTML to your browser
- your browser turns the HTML page into a nice-looking page on your screen
3
Your computer,
Your web browser
e.g. Firefox
Internet
connection
Internet
Routers
Text file containing
an HTML web page
Their computer,
Their web server
(an HTTP server)
e.g. Apache
/mypage.html

 Hyper Text Markup Language (HTML) Basics
 HTML is a “mark-up language”
 You add the mark-up tags to your text document
 Now follows a published standard via http://w3c.org/
 HTML is a language of mark-up “tags” in angle brackets: <>
 each tag has a name and may have one or more quoted
attributes
 eg. <p class=”thesis” style=”color: red”>
 Tags usually come in pairs (with some exceptions)
 <html>...</html>, <body>...</body>, <p>...</p>, <hr>, <br>
 Web pages are free-form input; line breaks can be used most
anywhere and don't affect the appearance of the document
 Yes, your entire page could be a single line of text!
4

 <html> … </html> (Required!)
 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> (Required!)
 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
5

 <title> … </title> (Required!)
 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
 <body> … </body> (Required!)
 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
6

 <p> … </p> (Required!)
 included as an element inside the <body>…</body> section
 Surrounds a paragraph of text
 DOCTYPE (Required!)
 Must be 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
 In this course we use only the “strict” HTML version 4.01 type:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
7

8
HTML – Required Tags
 That's all you need for a basic web page!
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My Title</title>
</head>
<body>
<p>This is my first web page.</p>
</body>
</html>

 More useful basic tags:
 <br> (no closing tag needed)
 put a line break in the text (starts a new line)
 <h1> … </h1> through <h6> ... </h6>
 used to identify text as a Level 1 (major) to Level 6 (minor) heading
Comment Tag
 
 notice that the comment is typed as an attribute inside the tag
 comments may be one or multiple lines long (HTML is free-form)
 text within this tag will not be displayed or processed by your browser
 comments do not nest! No comments inside comments!
 The comment may not contain two (or more) adjacent dashes, e.g. --
9

 The Anchor Tag – Hyper Linking - making the web a
web
 <a> … </a>
 one major attribute – the location of the hyperlink:
 href=”string”
 element is clickable/selectable as a document hyperlink
 browser attempts to load the page specified by the href=
attribute
 the href= string can be a relative URL on the same server:
 without the leading http://host/ it is in the same directory
structure:
 e.g. <a href=“page2.html”>Click here to continue</a>
 e.g. <a href=”images/box.jpg”>See the box here.</a>
 e.g. <a href=“../another_dir/page3.html”>Click here</a>
10

 <a>…</a> anchor tag continued
 The href= string can be an absolute URL on any server:
 string can be any HTTP URL (web address) you like:
 e.g. <a href=“http://www.gnu.org/philosophy/”>Free
Software</a>
 The href= string can be an email address:
 string can be an email address preceded by “mailto:”
 e.g. <a href=”mailto:idallen@idallen.ca>Ian! D. Allen
email</a>
 Attempts to open an email client (specified in the web
browser's options) and places the specified email address in
the To: field of a new email message.
11

 <img> (no closing tag needed)
 used to display graphics (.jpeg, .png, .gif) in your web pages
 you must specify the URL for the image source, and an alt= text
 the basic attributes of <img> are:
 src=”string” - the absolute or relative location of the image file
 alt=”string” - Alternate Text for people who don't see images
 height=”string” - image height, percent or absolute pixels
(optional)
 width=”string” - image width, percent or absolute pixels
(optional)
 title=”string” - mouse-over title of the image (optional)
 Etc….
 specifying height= and width= lets your browser reserve space in the
document to load the image in the background and avoid redrawing
the page after the image is fully loaded
12

• <hr> (no closing tag needed)
– Hard/Horizontal Rule – draw a horizontal line
– rule appearance can be changed with styles
• <blockquote> … </blockquote>
– block quotation, indented
• <q> … </q>
– a short, in-line “quotation as part of running text”
• <pre> … </pre>
– preformatted text (e.g. computer code or output)
– fixed-width font (e.g. Courier fixed width)
– preserves spaces and line breaks
13

• Font-style tags – for more control, use CSS instead
• <b> … </b> and <i> … </i>
– bold and italic text (in-line)
• <tt> … </tt>
– Teletype Text: fixed-width font (e.g. Courier)
• <big> … </big> and <small> … </small>
– bigger and smaller text (in-line)
14
HTML - Basic TagsHTML - Basic TagsHTML - Basic Tags

 Phrase tags – often better done using CSS
• <em> … </em> and <strong> ... </strong>
– text to be emphasized and strongly emphasized
– browser decides how: usually italicized, made bold
Less often used:
• <code>...</code>, <samp>...</samp>,
<kbd>...</kbd>
– computer code, sample code, keyboard text
– usually rendered in Courier fixed-width font
15

 The <style> element and the style= attribute
• The style= attribute can be used on most tags
– defines features for a single HTML element, e.g.
<p style=”text-align: center”>Center me.</p>
• The <style> element: <style type=”text/css”> ...
</style>
– <style> tag always goes in the <head> section
– defines style information for the whole HTML page
– requires the type=”text/css” attribute
– more details to come in the description of CSS
– to link to a separate CSS style sheet, use instead:
<link rel=”stylesheet” type=”text/css” href=”string”>
16
HTML – Style Element/Attribute

 <ul>
 <li>Apple</li>
 <li>Pear</li>
 <li>Kiwi</li>
 <li><ul>
 <li>Big</li>

<li>Small</li>
 </ul></li>
 </ul>
 <ol>
 <li>Apple</li>
 <li>Pear</li>
 <li>Kiwi</li>
 <li><ul>
 <li>Big</li>

<li>Small</li>
 </ul></li>
 </ol>
HTML - Lists
Lists – <ul> Unordered List and <ol> Ordered List

• <li>…</li>
– List Item: surrounds each list item inside a list
– used inside both <ul> and <ol> list types
• <ul>…</ul>
– surrounds an unordered list – no numbering
– <li>...</li> items each indented and bulleted
– use styles (style= attribute) to change type of bullet:
– CSS style: list-style-type: string
• string can be: circle, disc, square
• e.g. <ul style=”list-style-type: square”> ... </ul>
18
HTML – Unordered Lists

• <ol> … </ol>
– surrounds an ordered list
– items are indented and numbered (or alphabetized)
– use styles (style=) to change type of numbering:
– CSS style: list-style-type: string
• examples of string: decimal, lower-alpha, upper-
roman
• e.g. <ol style=”list-style-type: upper-latin”> ... </ul>
– the start= attribute determines first item's value
• e.g. <ol start=“3”> - begin numbering at 3 (or c, or iii)
• but this is deprecated, with no CSS replacement!
• http://www.w3schools.com/tags/att_ol_start.asp
19

• <dl>…</dl>
– definition list containing <dt> and <dd> items
– <dt>...</dt> definition title
– <dd>...</dd> definition description
• Example definition list containing two definitions:
<dl>
<dt>Hacker</dt>
<dd>An expert or enthusiast of any kind.</dd>
<dt>Cracker</dt>
<dd>An intruder into computer systems.</dd>
</dl>
20

21
HTML - <meta> - Page Attributes
• <meta> (no closing tag needed)
– used only inside <head> section of page
– gives details about page, e.g. author, keywords
– search engines may ignore keywords, since many
pages use fake keywords to boost search results
<head>
<title>CST8281 Course Homepage</title>
<meta name="Keywords" content=”Fundamentals, HTML, CSS”>
<meta name="Description" content=”An introductory course
dealing with computer and Internet fundamentals.">
<meta name="GENERATOR" content="Arachnophilia 5.4">
</head>

22
HTML - <meta> - continued
• elements of <meta> include:
– name=string identifies what type of meta content will follow
– content=string details relating to the name
• <meta> can also be used to have your page automatically
load another web page after a short delay:
<meta http-equiv="refresh" content="10; url=index.html">
– note the attribute name: http-equiv=”refresh”
– the content= string begins with number of seconds
before next page is loaded, followed by a
semicolon, then url= giving the URL of the next
page to be loaded

• Use <meta> to set the character set for the HTML page
– needed to pass W3C validation without warnings
<meta http-equiv=”Content-Type”
content=”text/html; charset=UTF-8”>
• also frequently used: charset=iso-8859-1
– iso-8859-1 is “Latin-1” and includes French
– Latin-1 common in North America, Western Europe
– but UTF-8 includes all languages (preferred)
23
HTML – <meta> - charset – Character Set

 Identifying and Grouping elements (e.g. for CSS)
• <div>...</div>
– division or section
– groups and identifies one or more block-elements
– usually causes a line break before and after
• <span>...</span>
– groups and identifies in-line elements (e.g. words)
– no visual change by itself (no line break)
– used to apply styles to parts of a text line, e.g.
This <span style=”color: red”>red</span> apple.
24
HTML – Identify/Group Tags

 HTML Entities – for special characters, accents, foreign
– starts with ampersand and ends with semicolon
   non-breaking-space – acts like a letter
– words connected with   will not separate
across a line break; they stay together as one word
– e.g. Mr. Ian! D. Allen
 < (less than) = < > (greater than) = >
 " (double quote) = " ' (apostrophe) = '
 & (ampersand) = &
– many, many others!
25
HTML – Entities (Special Characters)

Session ii(html)

More Related Content

What's hot

Viewers also liked

Similar to Session ii(html)

More from Shrijan Tiwari

Recently uploaded

Session ii(html)