Transcript HTML
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 => interoperability Issues: • 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 XHTML XML SGML HTML 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 lists 1. Starters Sea food chowder Soupe du jour Goats cheese salad 2. Main courses Haggis Sea bass Risotto 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 column In addition: • <th> table headings Formatting: • 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.asp http://www.w3schools.com/tags/tag_tr.asp http://www.w3schools.com/tags/tag_td.asp Links One tag <a>, four types of links: 1. Link to a location on the same page 2. Link to a document relative to the current document 3. Absolute link to a document 4. Email link General format: <a href = “place to go” > Text to display</a> The above HTML code will look like: Text to display HTML code Outcome of HTML in your browser 1. Link within document ……. 1. Introduction <a href = “#intro”>1. Introduction</a> 2. Discussion <a href = “#discuss”>2. Discussion</a> …… <a name = “intro”></a> <h2>Introduction</h2> Introduction …… ……. <a name = “discuss”></a> <h2>Discussion</h2> ……. 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.h tml”> 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 Page My name is: Xxxxxx Xxxxxxx My 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)