Download presentation
Presentation is loading. Please wait.
1
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 /> <element attribute=value>Content</element>
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. Core / Global attributes: id, title, class, style
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 DTD: The Type. This defines the type of DOCTYPE used. A Document Type Definition (DTD) defines the legal building blocks of an XML/HTML document. It defines the document structure with a list of legal elements and attributes The DOCTYPE element is an identifier found at the very beginning of an HTML document, even before the element. DocType declares to the browser what version of (X)HTML (eg. 3.4 or 4.01, 5.0 etc.) is used in the document. DocType is not an HTML Tag.
11
Basic HTML document structure
<head> <title>INT222</title> </head> <body> <h1>HTML Document Structure</h1> <p>This is a paragraph</p> <p><a href=" /> <a href=" College</a></p> </body> </html> What if DocType is absent in HTML document? An HTML document which lacks a DOCTYPE, will be rendered in bugwards compatibility mode (Quirk Mode), since it is assumed to be an older document which was written before DOCTYPE became widely used. 2.You will not be able to use a HTML (HyperText Markup Language) Validator to check the page coding. HTML validator requires the DOCTYPE declaration. 3.The stylesheet may not be implemented as planned.
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" " <html xmlns=" xml:lang="en"> <head> <title>INT222</title> </head> <body> <h2>xHTML Document Structure</h2> <p>This is a paragraph</p> <p><a href=" /> <a href=" College</a></p> </body> </html> 1. HTML 4.01 Strict, which describes the structural portions of HTML 4.01 and does not provide any presentational markup or frame-related markup. HTML 4.0 Strict says you to use an Cascading Style Sheet for presentational markup (<b>, <font> etc.) and not to include these elements in HTML page. This DocType claims that the document is a strict document; that is, it is authored according to a strict adherence to the W3C specification, and uses no presentational markup (<b>, <font> etc.). Upon seeing this, IE5/Mac will kick its rendering engine into STANDARD MODE, so that your document will be displayed according to the W3C standards. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
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" " <html xmlns=" xml:lang="en"> <head> <title>INT222</title> </head> <body> <h2>xHTML Document Structure</h2> <p>This is a paragraph</p> <p><a href=" /> <a href=" College</a></p> </body> </html> 2. HTML 4.01 Transitional, which includes the presentational markup such as and , but does not include frame-related markup. Transitional DTD allows some older PUBLIC and attributes that have been deprecated. This declaration calls for transitional (or loose) adherence to the standards. In this case, IE5/Mac will display the document according to bugwards compatibility rules (Quirk Mode). This will bring the rendering more in line with Internet Explorer for Mac's historical behavior. Upon seeing this, IE5/Mac will kick its rendering engine into QUIRK MODE. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
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" " <html xmlns=" 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> 3. HTML 4.01 Frameset, which is the same as HTML 4.01 Transitional except that it adds a description of frame-related markup. If frames are used, the Frameset DTD must be used.
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=" /> <a href=" College</a></p> </body> </html> HTML5 DTD-less DOCTYPE HTML5 uses a DOCTYPE declaration which is very short, due to its lack of references to a Document Type Definition in the form of a URL and/or FPI. All it contains is the tag name of the root element of the document, HTML. <!DOCTYPE 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=" <li><a href=" 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> <td>Item 1</td> <td>Item 2</td> </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:
20
Basic HTML Tags html 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 Headings Headings with reset 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
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 Highlight parts of a text Paragraphs & more
23
Presentation Tags Tags 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> <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
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 <li> </li> </ul> <li> Specifies a list item ul {list-style-type: none;}
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 <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 <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> <ul> </ul></li> </ol> This is a Nested list list item one sub for item one list item two list item three
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 Relative link
<a href=" 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=" "> 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 Image link Target link - Not recommended
<a ...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 <caption> </caption> <tr> <th> </th> </tr> <td> </td> </table> <caption> Specifies a table caption 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 tag width - applies to the table, td, th tags cellspacing - applies to the table tag cellpadding - applies to the table tag colspan - applies to the td, th tags rowspan - applies to the td, th tags align - applies to the table, caption, tr, td, th tags valign - applies to the tr, td, th tags Nested tables
37
Introduction to HTML (MDN)
HTML element reference (MDN) HTML attribute reference Basic Structure of an HTML5 Document
38
Thank You!
Similar presentations
