1 / 46

HTML - basic tags - How to learn more

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> .

rashad-herring
Download Presentation

HTML - basic tags - How to learn more

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML-basic tags- How to learn more

  2. What is HTML? • HyperText Markup Language • HTML5: • Recommended by the W3C

  3. 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/

  4. HTML Earlier version of HTML (HTML 4.1) offered : • text • multimedia • hyperlink features • scripting languages • style sheets

  5. HTML 4 Strengths: • Standard (ISO 8879) • Text-based => interoperability Issues: • Consequences of popularity and flexibility (sloppy syntax) • Explosion of device types (Mobile phones, PDAs, appliances, etc)

  6. HTML – conceptually Attractive proposition: • Basic set of HTML tags • Extension framework

  7. 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/

  8. Historical summary XHTML XML SGML HTML

  9. Basic example Hello World!

  10. Hello World! <html> <body> Hello World </body> </html>

  11. Another basic example

  12. 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&eacute;gory Lepl&acirc;tre</i> </body> </html>

  13. Hello world 2 – (1) <html> <body> (…) <h1>Some formatted text</h1> (…) </body> </html>

  14. 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>

  15. Hello world 2 – (3) <html> (…) <ul> <li>Apples</li> <li>Pears</li> <li>Bananas</li> <li>Oranges</li> </ul> (…) </body> </html>

  16. <html> <body> (…) <hr/> <p> <i>Author: Gr&eacute;gory Lepl&acirc;tre</i> </p> (…) </body> </html>

  17. 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: • &eacute; &acirc;

  18. HTML components • A DOCTYPE: <!DOCTYPE html> • The <html> tag (must be the first tag of the document, after 1) • <head> and <body> tags. • The head must contain a character set definition and a <title>.

  19. 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)

  20. Title <title> My first web page </title>

  21. Character set definition • <meta http-equiv="Content-Type“ content="text/html; charset=ISO-8859-1">

  22. 5. <body> tag The content of the page must be included within the <body> tag.

  23. Proper HTML Hello World!

  24. XHTML Hello World! <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 1.0 Strict//EN" "http://www.w3.org/TR/HTML1/DTD/HTML1-strict.dtd"> <html xmlns="http://www.w3.org/1999/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>

  25. 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>

  26. HTML tags

  27. 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

  28. Spacing • &nbsp; – 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.

  29. Text formatting • Bold: <b> or <strong> • Italics: <i> or <em> • Underline: <u> • Preformatted text: <pre>

  30. Lists There are three types of lists: • Ordered lists – numbered • Unordered lists – bullet • Definition lists

  31. Ordered lists <ol> <li>Apples</li> <li>Bananas</li> <li>Oranges</li> <li>Pears</li> </ol> http://www.w3schools.com/tags/tag_ol.asp

  32. Unordered lists <ul> <li>Apples</li> <li>Bananas</li> <li>Oranges</li> <li>Pears</li> </ul> http://www.w3schools.com/tags/tag_ul.asp

  33. Nested lists • Starters • Sea food chowder • Soupe du jour • Goats cheese salad • Main courses • Haggis • Sea bass • Risotto • Sweets • Chocolate mousse • Carrot cake • Apple tart

  34. Tables 2-dimensional representation of data: • <table> tag to create a table, contains … • <tr> tag for each line, which contains … • <td> tag for each column In addition: • <th> table headings Formatting: • Tag attributes

  35. 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>

  36. 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.asp http://www.w3schools.com/tags/tag_tr.asp http://www.w3schools.com/tags/tag_td.asp

  37. Links One tag <a>, four types of links: • Link to a location on the same page • Link to a document relative to the current document • Absolute link to a document • Email link General format: <a href = “place to go” > Text to display</a> The above HTML code will look like: Text to display

  38. HTML code Outcome of HTML in your browser 1. Link within document 1. Introduction 2. Discussion Introduction …… Discussion ……. <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> …….

  39. 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.

  40. 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>

  41. 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>

  42. 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

  43. 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 …

  44. Final Exercise My Web Page My name is: Xxxxxx Xxxxxxx My characteristics are:

  45. Summary • eXtensible Learning Process • Simple basic principle (tags) • Expand your tag knowledge (w3schools) • Practice • Next practical • At home

  46. Next week • Laboratory exercise • HTML • Lecture • Styling (CSS+ design issues)

More Related