Embed Size (px)
HTML- basic tags
- How to learn more
What is HTML?
• HyperText Markup Language• HTML5:– Recommended by the W3C
HTML
• “HTML is the lingua franca for publishing hypertext on the World Wide Web ”
• Structure and format of documents defined by <tags>.
• Enables connections between documents through hyperlinks
http://www.w3.org/MarkUp/
HTML
Earlier version of HTML (HTML 4.1) offered :– text– multimedia– hyperlink features– scripting languages– style sheets
HTML 4
Strengths:• Standard (ISO 8879)• Text-based => interoperabilityIssues:• Consequences of popularity and flexibility
(sloppy syntax)• Explosion of device types (Mobile phones,
PDAs, appliances, etc)
HTML – conceptually
Attractive proposition:• Basic set of HTML tags• Extension framework
HTML5 – In practice
• Today’s standard for web development • Backwards compatible with earlier versions• Good browser compatibility• Extensions developed for non-standard devices• Makes programming for accessibility easier• Allows separation of content and style (e.g.for
mobile delivery)• Easy to learn – Countless resources available– http://www.w3schools.com– http://validator.w3.org/
Historical summary
SGML
XML
HTML
XHTML
Basic example
Hello World!
Hello World!
<html>
<body>
Hello World
</body>
</html>
Another basic example
Hello world 2<html>
<body><h1>Some formatted text</h1><p>This is a paragraph. Text can be formatted easily: <i>italic</i>, <b>Bold</b>,
<u>underlined</u>, <i><u>italic and underlined</i></u> (note that underlining isn't a good stylistic choice on the web, guess why?).
</p>
<h1>A bullet list</h1><ul> <li>Apples</li> <li>Pears</li> <li>Bananas</li> <li>Oranges</li></ul>
<hr/><p><i>Author: Grégory Leplâtre</i>
</body>
</html>
Hello world 2 – (1)
<html>
<body>
(…)
<h1>Some formatted text</h1>
(…)
</body>
</html>
Hello world 2 – (2)<html><body>(…)<p>This is a paragraph. Text can be formatted
easily: <i>italic</i>, <b>Bold</b>, <u>underlined</u>, <i><u>italic and underlined</u></i> (note that underlining isn't a good stylistic choice on the web, guess why?).
</p>(…)</body></html>
Hello world 2 – (3)<html>
(…)
<ul>
<li>Apples</li>
<li>Pears</li>
<li>Bananas</li>
<li>Oranges</li>
</ul>
(…)
</body>
</html>
<html>
<body>
(…)
<hr/>
<p>
<i>Author: Grégory Leplâtre</i>
</p>
(…)
</body>
</html>
What we have learnt
• Links:– <a> (not yet)
• Structural tags:– <html>, <body>, <p>, <h1>, <ul>, <li>
• Formatting tags:– <i>, <b>, <u>
• Graphical elements:– <hr>
• Special characters:– é â
HTML components
1. A DOCTYPE: <!DOCTYPE html>
2. The <html> tag (must be the first tag of the document, after 1)
3. <head> and <body> tags. 4. The head must contain a character set
definition and a <title>.
5. <head> tag
• <title> The title appears at the top of the browser. Can be used by search engines.
• <meta> Literally: information about (the page). A typical page will contain several of these tags. Works with name/content pairs:<meta name=“description” content=“This is a test page”/>
• <style> specifies the style sheet to be used (more on this in the CSS lecture)
Title
<title>My first web page</title>
Character set definition
• <meta http-equiv="Content-Type“ content="text/html; charset=ISO-8859-1">
5. <body> tag
The content of the page must be included within the <body> tag.
Proper HTML Hello World!
HTML5 Hello World!<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-
8"/> <meta name="Author" content=“Harry Potter"/> <meta name="keywords" content=“Napier, HTML"/> <meta name="GENERATOR" content=“HapEdit"/> <title>Hello World! page</title></head><body><p>Hello World!</p></body></html>
HTML tags
Headings
• <h1>, <h2>, … <h6> (h1 largest font, h6, smallest font)
• Example:<h1>Some Basic Examples</h1>
<h2>Example 1: formatting</h2>
http://www.w3schools.com/tags/tag_hn.asp
Spacing
• – non-breaking space: forces the browser to display a white space.
• <p> starts a new paragraph (which must be concluded with a </p>).
• <br/> - line break: starts a new line.
Text formatting
• Bold: <b> or <strong>• Italics: <i> or <em>• Underline: <u> • Preformatted text: <pre>
Lists
There are three types of lists:• Ordered lists – numbered• Unordered lists – bullet• Definition lists
Ordered lists
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>
<li>Pears</li>
</ol>
http://www.w3schools.com/tags/tag_ol.asp
Unordered lists
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>
<li>Pears</li>
</ul>
http://www.w3schools.com/tags/tag_ul.asp
Nested lists1. Starters
Sea food chowderSoupe du jourGoats cheese salad
2. Main coursesHaggisSea bassRisotto
3. Sweets– Chocolate mousse– Carrot cake– Apple tart
Tables
2-dimensional representation of data:• <table> tag to create a table, contains …• <tr> tag for each line, which contains …• <td> tag for each columnIn addition:• <th> table headingsFormatting:• Tag attributes
Table example<table border=“3"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr></table>
Tables – Important attributes
• border: border width (0 used frequently)• cellspacing: space between cells• cellpadding: space between the cell walls and
content• width: width of the table (% or pixels)
http://www.w3schools.com/tags/tag_table.asphttp://www.w3schools.com/tags/tag_tr.asphttp://www.w3schools.com/tags/tag_td.asp
Links
One tag <a>, four types of links:1. Link to a location on the same page2. Link to a document relative to the current
document3. Absolute link to a document4. Email link
General format:<a href = “place to go” > Text to display</a>
The above HTML code will look like: Text to display
1. Link within documentHTML code Outcome of HTML
in your browser
…….
<a href = “#intro”>1. Introduction</a>
<a href = “#discuss”>2. Discussion</a>
……
<a name = “intro”></a>
<h2>Introduction</h2>
…….
<a name = “discuss”></a><h2>Discussion</h2>…….
1. Introduction
2. Discussion
Introduction
……
Discussion
1. Link within document
Two steps:1. defines a hypertext link that specifies where you
want to go within a document<a href = “#Part1”>Go to part 1</a>
2. defines the place where you will jump to with a document when you click on the above link
<a name=“Part1”> Part 1 is here </a>
The # sign indicates a location within a document and must be included.
2. Relative link
Link to a document on the same server:<a href = “path/filename”>link text</a>
Example:<a href = “../index.html”>teaching main page</a>
3. Absolute link
Link to a document on the same server:<a href = “http://server/path/filename”> link text</a>
Example:<a href =
“http://www.dcs.napier.ac.uk/~mjr/teaching/index.html”>
teaching main page</a>
Images
Images are added using the <img> tag:
<img src=“picture location”/>
Pictures can be used as links:
<a href=“…”><img src=“…”/></a>
http://www.w3schools.com/tags/tag_img.asp
Audio and Video?
• HTML doesn’t support these.• Links to audio or video files are possible.• Ways to embed media in web pages involves
plugins… For multimedia students next year …
Final Exercise
My Web PageMy name is: Xxxxxx XxxxxxxMy characteristics are:
Height 180 cm
Weight 65 Kg
Age 22
Summary
• eXtensible Learning Process– Simple basic principle (tags)– Expand your tag knowledge (w3schools)
• Practice– Next practical– At home
Next week
• Laboratory exercise– HTML
• Lecture– Styling (CSS+ design issues)
