際際滷

際際滷Share a Scribd company logo

IPW HTML course

Download as PPTX, PDF
Vlad Posea
Vlad Posea

The document provides an introduction to HTML and XHTML, covering key topics like document structure, headings, paragraphs, links, images, tables, forms, and other important tags. It explains concepts like the head and body sections, empty elements, attributes, and special characters. Examples are given for many common elements to demonstrate how to properly structure an XHTML document and add different types of content.

1 of 26
Introduction to Web Programming(X)HTML
Plan of the courseXHTML and HTML Structure of a documentMain HTML TagsHeadingsParagraphsLinksTablesFormsImages
HTMLHTML HyperText Markup LanguageIts a markup language uses tags to describe web pagesCurrently used version 4.01 - http://www.w3.org/TR/html401/ - from 1999!!HTML 5 work in progressXHTML - http://www.w3.org/TR/xhtml1/ - same tags but using some XML constraintsXML extension markup language generic language for structuring documents
What is a html tagKeywords between < and >There is usually a start tag and an end tagexample:<tag></tag>Empty tags<tag />AttributesAn attribute is a pair of type name=value that is inside a tag<tag attribute=value> </tag>
Characteristics of tagsTags should always be closed />be written in lowercaseBe properly nested<tag1><tag2></tag2></tag1><tag1><tag2></tag1></tag2>
HTML and XHTMLBrowser work on best effort when interpreting an HTML file=> one of the reasons pages look different in different browsersBecause browsers try to interpret everything they have become heavy and slow.XHTML a more strict syntax than HTML=>easier to parse by browsers
Structure of a documentLogical structure of a documentTitle of the document Titles of the different sectionsContent Paragraphs, quoted text, codeTabular informationLists of items (ordered or unordered)Very short example of document structure using Word
Structure of an XHTML Document<html> <head> <title>the title of the document</title> </head> <body> <!-- the content of the document --> </body></html>
The head sectionContains data about the document<title> - the actual document title appears in the browser bar<link> - points to a resource used by the page (<link rel="shortcut icon" href="/favicon1.ico" type="image/x-icon" />)<meta> - defines meta information like keywords, content type, description used by browsers and by spiders<script> - contains references to scripts
Head Section Example<head> <title>W3Schools Online Web Tutorials</title><link rel="shortcut icon" href="favicon1.ico" type="image/x-icon" /> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <meta name="Keywords" content="XML,tutorial,HTML,DHTML,CSS,XSL,XHTML,JavaScript,ASP,ADO,VBScript,DOM, " /> <meta name="Description" content="HTML XHTML CSS JavaScript XML XSL ASP SQL ADO VBScript Tutorials References Examples" /> <link rel="stylesheet" type="text/css" href="stdtheme.css" /> </head>
The body sectionContains the tags that are displayed in the browserThe body section SHOULD contain the contentThe style information should be placed in external documents (see next course)Elements are going to be presented next and were going to build a web page adding each element step by step
HeadingsThe titles of the sectionsH1H6Used by search engines to understand the structure of the documentSHOULD NOT be used for style reasons (make text bigger and bolder)<h1>title of document</h1><h2> title of first section</h2><h3> title of the first sub-section</h3>
Content and formatting<p>this is a paragraph</p><br/> - passes to the next line<hr> - horizontal line<em> - emphasized text<strong> - strong text<small> - small text<sub> <sup>
ListsOrdered lists (numbered, ordered with letters or roman numbers) - <ol>Unordered lists (bulleted) <ul>Items of the list for each of the 2 types of lists - <li>Example:<ul><li>red</li><li>green</li></ul>
Links<a href=/slideshow/ipw-html-course/7098777/absolute or relative url target=>text or image</a>The target represents where the link should openMissing the same page_blank new window<a name=name of an anchor in the same document> text or image </a><a href=#name of an anchor>text or image</a>
Images<img src=/slideshow/ipw-html-course/7098777/absolute or relative url alt=alternative text in case the image cant be displayed or cant be understood/>The alt attribute is mandatory in XHTML! the src can be a full url: http://host/path_to_file or a path relative to the current page.
TablesTables should ONLY be used for presenting tabular informationThey should not be used for design<table><tr> <!--table row) --><td > table cell</td></tr></table>
Tablescolspanused to have a cell that spans on multiple columns Attribute of the td elementrowspanused to have a cell span on multiple rowsAttribute of the td elementBorder If the table has a border or notAttribute of the table element
Tables example<table border="1"> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table><table border="1"> <tr> <td colspan="2">&nbsp;</td><!-- only 3 cells because 1 spans on 2 columns--> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td rowspan="2">&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <!-- only 3 cells because 1 above spans on 2 rows --> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table>
FormsNecessary to collect and submit data to the server<form action=the server script that handles the submitted data method=the HTTP request method GET or POST>A form contains different kinds of input
Form InputsText input <input type=text name= />Checkbox <input type=checkbox name= value=/>Radio <input type=radio name= value=/>Text area <textarea name=></textarea>Submit <input type=submit value=name on the button/>
Form example<form method="post" action="script.php"> Username: <input type="text" name="username" /><br /> Password:<input type="password" name="password" /><br /> Country: <select name="country"> <option value="eng">England</option> <option value="fra">France</option> <option value="rou" selected="selected">Romania</option> </select> <br /> Address: <textarea name="address"></textarea><br /> Type of account: <ul><li>Normal <input type="radio" name="account" value="normal" /></li> <li>Special <input type="radio" name="account" value="special" /></li> </ul> Do you want to subscribe to our newsletter <input type="checkbox" name="subscription"/><br /> <input type="submit" value="Register" /> </form>
OthersHtml commentsWhenever you write code you need to write comments<!-- this is a comment in html -->
HTML Special CharactersSome special characters <,>, ,& need to be represented differently in HTMLThere shouldnt be confusion between the content of the page and the syntaxThe special characters are represented like:&code;Code is usually a 3-4 letter sequence that represents the special character
HTML Special Characters& - &amp; (space) - &nbsp; - &quot;< - &lt;> - &gt;Others:http://www.w3schools.com/tags/ref_entities.asphttp://www.w3schools.com/tags/ref_symbols.asp
ConclusionsIn this course there are only the most important tags; more of them can be discovered as you work HTML should be used for presenting content in web pagesThe tags should be used according to their semantics

More Related Content

IPW HTML course

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