IPW HTML course


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

IPW HTML course

  1. 1. Introduction to Web Programming<br />(X)HTML<br />
  2. 2. Plan of the course<br />XHTML and HTML <br />Structure of a document<br />Main HTML Tags<br />Headings<br />Paragraphs<br />Links<br />Tables<br />Forms<br />Images<br />
  3. 3. HTML<br />HTML – HyperText Markup Language<br />It’s a markup language – uses tags to describe web pages<br />Currently used version – 4.01 - http://www.w3.org/TR/html401/ - from 1999!!<br />HTML 5 – work in progress<br />XHTML - http://www.w3.org/TR/xhtml1/ - same tags but using some XML constraints<br />XML – extension markup language – generic language for structuring documents<br />
  4. 4. What is a html tag<br />Keywords between “<“ and “>”<br />There is usually a start tag and an end tag<br />example:<br /><tag>…</tag><br />Empty tags<br /><tag /><br />Attributes<br />An attribute is a pair of type name=“value” that is inside a tag<br /><tag attribute=“value”> … </tag><br />
  5. 5. Characteristics of tags<br />Tags should <br />always be closed “/>”<br />be written in lowercase<br />Be properly nested<br /><tag1><tag2></tag2></tag1><br /><tag1><tag2></tag1></tag2><br />
  6. 6. HTML and XHTML<br />Browser work on “best effort” when interpreting an HTML file<br />=> one of the reasons pages look different in different browsers<br />Because browsers try to interpret everything they have become heavy and slow.<br />XHTML – a more strict syntax than HTML=>easier to parse by browsers<br />
  7. 7. Structure of a document<br />Logical structure of a document<br />Title of the document <br />Titles of the different sections<br />Content <br />Paragraphs, quoted text, code<br />Tabular information<br />Lists of items (ordered or unordered)<br />Very short example of document structure using Word<br />
  8. 8. Structure of an XHTML Document<br /><html><br /> <head><br /> <title>the title of the document</title><br /> </head><br /> <body><br /> <!-- the content of the document --><br /> </body><br /></html><br />
  9. 9. The head section<br />Contains data about the document<br /><title> - the actual document title – appears in the browser bar<br /><link> - points to a resource used by the page (<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />)<br /><meta> - defines meta information like keywords, content type, description – used by browsers and by spiders<br /><script> - contains references to scripts<br />
  10. 10. Head Section Example<br /><head> <br /><title>W3Schools Online Web Tutorials</title><br /><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> <br /><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <br /><meta name="Keywords" content="XML,tutorial,HTML,DHTML,CSS,XSL,XHTML,JavaScript,ASP,ADO,VBScript,DOM, " /> <br /><meta name="Description" content="HTML XHTML CSS JavaScript XML XSL ASP SQL ADO VBScript Tutorials References Examples" /> <br /><link rel="stylesheet" type="text/css" href="stdtheme.css" /> <br /></head> <br />
  11. 11. The body section<br />Contains the tags that are displayed in the browser<br />The body section SHOULD contain the content<br />The style information should be placed in external documents (see next course)<br />Elements are going to be presented next and we’re going to build a web page adding each element step by step<br />
  12. 12. Headings<br />The titles of the sections<br />H1…H6<br />Used by search engines to “understand” the structure of the document<br />SHOULD NOT be used for style reasons (make text bigger and bolder)<br /><h1>title of document</h1><br /><h2> title of first section</h2><br /><h3> title of the first sub-section</h3><br />
  13. 13. Content and formatting<br /><p>this is a paragraph</p><br /><br/> - passes to the next line<br /><hr> - horizontal line<br /><em> - emphasized text<br /><strong> - strong text<br /><small> - small text<br /><sub> <sup><br />
  14. 14. Lists<br />Ordered lists (numbered, ordered with letters or roman numbers) - <ol><br />Unordered lists (bulleted) – <ul><br />Items of the list for each of the 2 types of lists - <li><br />Example:<br /><ul><br /><li>red</li><br /><li>green</li><br /></ul><br />
  15. 15. Links<br /><a href=“absolute or relative url” target=“”>text or image</a><br />The target represents where the link should open<br />Missing – the same page<br />“_blank” – new window<br /><a name=“name of an anchor in the same document> text or image </a><br /><a href=“#name of an anchor”>text or image</a><br />
  16. 16. Images<br /><img src=“absolute or relative url” alt=“alternative text in case the image can’t be displayed or can’t be understood”/><br />The “alt” attribute is mandatory in XHTML!<br /> the src can be a full url: http://host/path_to_file or a path relative to the current page.<br />
  17. 17. Tables<br />Tables should ONLY be used for presenting tabular information<br />They should not be used for design<br /><table><br /><tr> <!--table row) --><br /><td > table cell</td><br /></tr><br /></table><br />
  18. 18. Tables<br />colspan<br />used to have a cell that spans on multiple columns <br />Attribute of the td element<br />rowspan<br />used to have a cell span on multiple rows<br />Attribute of the td element<br />Border <br />If the table has a border or not<br />Attribute of the table element<br />
  19. 19. Tables example<br /><table border="1"><br /> <tr><br /> <td>&nbsp;</td><br /> <td>&nbsp;</td><br /> <td>&nbsp;</td><br /> <td>&nbsp;</td><br /> </tr><br /> <tr><br /> <td>&nbsp;</td><br /> <td>&nbsp;</td><br /> <td>&nbsp;</td><br /> <td>&nbsp;</td><br /> </tr><br /> <tr><br /> <td>&nbsp;</td><br /> <td>&nbsp;</td><br /> <td>&nbsp;</td><br /> <td>&nbsp;</td><br /> </tr><br /> </table><br /><table border="1"><br /> <tr><br /> <td colspan="2">&nbsp;</td><br /><!-- only 3 cells because 1 spans on 2 columns--><br /> <td>&nbsp;</td><br /> <td>&nbsp;</td><br /> </tr><br /> <tr><br /> <td rowspan="2">&nbsp;</td><br /> <td>&nbsp;</td><br /> <td>&nbsp;</td><br /> <td>&nbsp;</td><br /> </tr><br /> <tr><br /> <!-- only 3 cells because 1 above spans on 2 rows --><br /> <td>&nbsp;</td><br /> <td>&nbsp;</td><br /> <td>&nbsp;</td><br /> </tr><br /> </table><br />
  20. 20. Forms<br />Necessary to collect and submit data to the server<br /><form action=“the server script that handles the submitted data” method=“the HTTP request method – GET or POST”><br />A form contains different kinds of input <br />
  21. 21. Form Inputs<br />Text input <input type=“text” name=“” /><br />Checkbox <input type=“checkbox” name=“” value=“”/><br />Radio <input type=“radio” name=“” value=“”/><br />Text area <textarea name=“”></textarea><br />Submit <input type=“submit” value=“name on the button”/><br />
  22. 22. Form example<br /><form method="post" action="script.php"><br /> Username: <input type="text" name="username" /><br /><br /> Password:<input type="password" name="password" /><br /><br /> Country: <br /> <select name="country"><br /> <option value="eng">England</option><br /> <option value="fra">France</option><br /> <option value="rou" selected="selected">Romania</option><br /> </select> <br /><br /> Address: <textarea name="address"></textarea><br /><br /> Type of account:<br /> <ul><li>Normal <input type="radio" name="account" value="normal" /></li><br /> <li>Special <input type="radio" name="account" value="special" /></li><br /> </ul><br /> Do you want to subscribe to our newsletter <input type="checkbox" name="subscription"/><br /><br /> <input type="submit" value="Register" /><br /> </form><br />
  23. 23. Others<br />Html comments<br />Whenever you write code you need to write comments<br /><!-- this is a comment in html --><br />
  24. 24. HTML Special Characters<br />Some special characters <,>,’ ‘,& need to be represented differently in HTML<br />There shouldn’t be confusion between the content of the page and the syntax<br />The special characters are represented like:&code;<br />Code is usually a 3-4 letter sequence that represents the special character<br />
  25. 25. HTML Special Characters<br />& - &amp;<br />‘ ‘ (space) - &nbsp;<br />“ - &quot;<br />< - &lt;<br />> - &gt;<br />Others:<br />http://www.w3schools.com/tags/ref_entities.asp<br />http://www.w3schools.com/tags/ref_symbols.asp<br />
  26. 26. Conclusions<br />In this course there are only the most important tags; more of them can be discovered as you work <br />HTML should be used for presenting content in web pages<br />The tags should be used according to their semantics<br />