int222 – internet fundamentals
DESCRIPTION
INT222 – Internet Fundamentals. Week 3: Introduction to HTML. Outline. Document structure/overview Important elements and using them. What is HTML. - PowerPoint PPT PresentationTRANSCRIPT
INT222 – Internet Fundamentals
Week 3: Introduction to HTML
2
Outline
• Document structure/overview• Important elements and using them
3
What is HTML• HTML (HyperText Markup Language) is the set of markup
symbols or codes inserted in a file intended for display on a World Wide Web browser page. – Hypertext is text with hyperlinks.– The markup tells the Web browser how to display a Web page's words
and images for the user.• The markup indicators are often called “tags”, which are
enclosed in angle brackets – e.g. <h1>.– Most html tags come in pairs - e.g. <h1> and </h1>
• <h1> being the opening of the tag and • </h1> being the closing of the tag. • In between these tags you can add text-based content.
– There are some tags that are not paired – these tags are know as empty tags, such as <img />
4
Tags vs. Elements vs. Attributes
The terms tag, element & attribute are used throughout the web site. You should note the difference between these terms.
• HTML elements:– Html documents are defined by HTML elements , and – An HTML Element is everything from the start tag to the
end tag, e.g. <p>Some text</p> - is referred to as an element,
including starting tag - content - ending tag• <p> and </p> - are referred to as tags.
5
Tags vs. Elements vs. Attributes
• <p class="....">Some text</p> – class is an attribute
• An attribute is used to define the characteristics of an element, and it is placed inside the opening tag.
• All attribute are made up 2 parts: a name and a value.
6
HTML Tags/Element Categories
HTML tags are classified in three different categories:• Block-level: – A block-level tag is a tag that creates large blocks of
content like tables (<table>) or page divisions (<div>).– e.g. <p>, <h1>, <ul>, <hr>, <dl>, …– They start new lines of text when you use them, and – They can contain other block tags as well as inline tags
and text.
7
HTML Tags/Element Categories
• Inline-level– An inline tag is a tag that defines the text or data
in the document like STRONG(<strong>) makes the enclosed text strongly emphasized.
– e.g. <span>, <a>, <img>, <td>, <b>, <em>, <input>, …
– Inline tags don't start new lines when they are used, and
– they generally only contain other inline tags and text or data.
8
HTML Tags/Element Categories
• Empty– Empty tags do not have closing tags or they are
not paired. – An empty tag does not contain any text/content. – Empty tags are simply used as markers. • In some cases empty tags are used for whatever is
contained in their attributes.
– The <br />, <img />, <input />, <meta /> tags are a few examples of empty tags.
9
Document Type Definition (DTD)
• A document type definition (DTD) is a set of markup declarations that define a document type for an SGML-family markup language (SGML, XML, HTML).
10
Document Type Definition Example
HTML Document Structure Examples - Doctype Declarations List:
• Basic HTML document structure• Basic xHTML 1.0 Strict document structure• Basic xHTML 1.0 Transitional document
structure• Basic xHTML 1.0 Frameset document structure• Basic HTML5 document
11
Basic HTML document structure<html> <head> <title>INT222</title> </head> <body> <h1>HTML Document Structure</h1> <p>This is a paragraph</p> <p><a href="https://scs.senecac.on.ca">ICT</a><br /> <a href="http://www.senecac.on.ca">Seneca College</a></p> </body></html>
12
Basic xHTML 1.0 Strict document structure
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>INT222</title> </head> <body> <h2>xHTML Document Structure</h2> <p>This is a paragraph</p> <p><a href="https://scs.senecac.on.ca">ICT</a><br /> <a href="http://www.senecac.on.ca">Seneca College</a></p> </body></html>
13
Basic xHTML 1.0 Transitional document structure
<?xml version="1.0" encoding="UTF-8"?><!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"> <head> <title>INT222</title> </head> <body> <h2>xHTML Document Structure</h2> <p>This is a paragraph</p> <p><a href="https://scs.senecac.on.ca">ICT</a><br /> <a href="http://www.senecac.on.ca">Seneca College</a></p> </body></html>
14
Basic xHTML 1.0 Frameset document structure
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>INT222</title> </head> <frameset cols="40%,60%"> <frame name="frame1" src="../int222/f1.html" /> <frame name="frame2" src="../int222/f2.html" /> </frameset></html>
15
Basic HTML5 document<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title>INT222</title> </head> <body> <h2>HTML5 Document Structure</h2> <p>This is a paragraph</p> <p><a href="https://scs.senecac.on.ca">ICT</a><br /> <a href="http://www.senecac.on.ca">Seneca College</a></p> </body></html>
16
HTML5 document structure<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>Try it</title> </head> <body> <header> <h1>HTML5 Document Structure</h1> </header> <nav> <ul> <li><a href="https://scs.senecac.on.ca">ICT</a></li> <li><a href="http://www.senecac.on.ca">Seneca
College</a></li> </ul> </nav>
<article> <section> <p>An article can have multiple sections</p> </section> </article> <aside> <p>This is aside part of the web page</p> </aside> <footer> <p>This is the footer</p> </footer> </body></html>
17
Basic HTML Document Presentation
• Basic HTML document (browser default)• Basic HTML document (No browser default)
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <title>INT222</title> <link rel="stylesheet" href="reset.css" type="text/css" media="screen" /> </head> <body> <h1>Heading - the h1 tag</h1> <h2>Heading - the h2 tag</h2> <p>This is a paragraph - the p tag</p> <p>Unolrdered list</p>
<ul> <li>item 1</li> <li>item 2</li> </ul> <table> <tr> <th>Column heading 1</th> <th>Column heading 2</th> </tr> <tr> <td>Item 1</td> <td>Item 2</td> </tr> </table> </body></html>
18
Recommended list of Doctype declarations
• World Wide Web Consortium (W3C) Doctype declarations
• HTML5 specification
19
Why html then xhtml and now html5?
• The history of HTML:http://www.rackspace.com/blog/internet-history-html-evolution/
20
Basic HTML Tagshtml tag Description
<!DOCTYPE> Specifies the document type
<html> Specifies an html document
<head> Specifies information about the document
<title> Specifies the document title
<meta> Specifies meta information
<link> Specifies a resource reference
<script> Specifies a script
<style> Specifies a style definition
<body> Specifies the body element
<!--...--> Specifies a comment
21
HTML Heading Tags
Heading tags Description Example
<h1> Specifies a heading level 1 <h1>.......</h1><h2>.......</h2><h3>.......</h3><h4>.......</h4><h5>.......</h5><h6>.......</h6>
<h2> Specifies a heading level 2
<h3> Specifies a heading level 3
<h4> Specifies a heading level 4
<h5> Specifies a heading level 5
<h6> Specifies a heading level 6
Headings Headings with reset
22
p, blockquote, pre, br, hr tags
Tags Description Example
<p> Specifies a paragraph <p>.......</p> <blockquote>.......</blockquote> <pre>.......</pre> <br /> <hr /><mark>
<blockquote> Specifies a long quotation
<pre> Specifies preformatted text
<br />, <br> Inserts a single line break
<hr />, <hr> Specifies a horizontal rule <mark> Highlight parts of a text
Paragraphs & more
23
Presentation TagsTags Description Example Equivalent CSS
<b> Specifies bold text <b>.......</b> .bold { font-weight:bold; }
<em> Specifies emphasized text <em>.......</em> .italic { font-style:italic; }
<i> Specifies italic text <i>.......</i> .italic { font-style:italic; }
<u> Specifies text to be underlined <u>.......</u> .under
{ text-decoration:underline; } <sup> Specifies
superscripted text<sup>.......</sup>
.superscript { font-size:small; vertical-align:top;}
<sub> Specifies subscripted text <sub>.......</sub> .subscript { font-size:xx-small;
vertical-align:bottom;}
Presentation tags -1- Presentation tags -2- * use CSS instead
24
HTML List Tags
Three types of list tags in HTML:• Unordered lists• Ordered lists• Definition lists
25
Unordered lists• The <ul> tag displays an unordered bulleted list. You can
use CSS (list-style-type property) to control the bullet style.• The <li> tag is used to designate the individual list items in
the list.• Both the <ul> and the <li> require a closing tag (</ul> and
</li>).
Tags Description Example
<ul> Specifies an unordered list<ul> <li> ...... </li> <li> ...... </li> <li> ...... </li></ul><li> Specifies a list item
26
Ordered lists
• The <ol> tag displays an ordered list. You can use CSS (list-style-type property) to control the sequence style.
• The <li> tag is used to designate the individual list items in the list.
• Both the <ol> and the <li> require a closing tag (</ol> and </li>).
Tags Description Example
<ol> Specifies an ordered list<ol> <li> ...... </li> <li> ...... </li> <li> ...... </li></ol><li> Specifies a list item
27
Definition lists
• The <dl> encloses a definition list. • A definition list contains terms, which are defined with the
<dt> tag, and descriptions, which are defined with the <dd> tag.
• The <dl>, <dt> and the <dd> require a closing tag (</dl>, <dt> and </dd>).
• By default, a browser will align terms on the left and indents each definition on a new line.
• The intent of a definition list is to display lists of terms and their corresponding descriptions, such as in a glossary.
28
Definition lists
Tags Description Example
<dl> Specifies a definition list<dl> <dt> ...... </dt> <dd> ...... </dd> <dd> ...... </dd> <dt> ...... </dt> <dd> ...... </dd></dl>
<dt> Specifies a definition term
<dd> Specifies a definition description
29
Nested lists
• Ordered lists and Unordered lists can be nested - a combination of the two can also be nested.
• Each level will indented.• Nested lists may look
complicated however you just need remember the basic structure for ordered and unordered lists.
Example
<ol> <li> ...... </li> <li> ...... </li> <li> ...... <ul> <li> ...... </li> </ul></li> <li> ...... </li> <li> ...... </li></ol>
30
Hyperlinks & Anchor
• The HTML <a> Element (or the HTML Anchor Element) defines a hyperlink, the named target destination for a hyperlink, or both.
• A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another document or another part of the same document.
• Basic HTML link (anchor) format: <a href="URL.................">text</a>
31
Hyperlinks• Absolute link
<a href="https://scs.senecac.on.ca/~facultyname">John Doe's Website</a>
• Relative link – The links should be relative to the location of
the current document. e.g.<a href="xxxxx.html">Text...text</a><a href="../xxxxx.html">Text...text</a><a href="info/xxxxx.html">Text...text</a>
32
Hyperlinks• Link to a particular section of an html page
– To link to a specific section (int222) of a page named (xxxxx.html), it is assumed that somewhere in (xxxxx.html) the following code is available:<a id="int222"></a>
– Then use an hyperlinks to link to it:<a href="xxxxx.html#int222">Text...text</a>
– e.g. The link here is a absolute link to an HTML document: <a href=" https://zenit.senecac.on.ca/~emile.ohan/int222/examples/anchor/href-relative.html#tests "> and links to the “tests” id
33
Hyperlinks
• Link to a particular section in current page – To link to a specific section (top) in the current
html, it is assumed that somewhere in current html document the following code is available
<a id="top"></a>
<a href="#top">Top</a>
34
Hyperlinks
• E-mail link <a
href="mailto:[email protected]">Text ...text</a>
• Image link <a href="xxxxx.html"> <img src="action.gif" alt="Text..."
/> </a>• Target link - Not recommended
<a href="xxxxx.html" target="window_name"> Text...text</a>
35
Basic table tags
Tag Description Example<table> Specifies a table <table>
<caption>.......</caption> <tr> <th>.......</th> <th>.......</th> </tr> <tr> <td>.......</td> <td>.......</td> </tr> </table>
<caption> Specifies a table caption
<tr> Specifies a table row
<th> Specifies a table header
<td> Specifies a table cell / detail
36
Table Elements’ Attributes
• A lot of these attributes have been declared as being obsolete features in HTML5. We need to use CSS instead
border - applies to the table tagwidth - applies to the table, td, th tagscellspacing - applies to the table tagcellpadding - applies to the table tagcolspan - applies to the td, th tagsrowspan - applies to the td, th tagsalign - applies to the table, caption, tr, td, th tagsvalign - applies to the tr, td, th tagsNested tables
37
• Introduction to HTML (MDN)https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction
• HTML element reference (MDN)https://developer.mozilla.org/en-US/docs/Web/HTML/Element
• HTML attribute referencehttps://developer.mozilla.org/en-US/docs/Web/HTML/Attributes
• Basic Structure of an HTML5 Documenthttp://www.coreservlets.com/html5-tutorial/basic-html5-document.html#
Thank You!