IPW HTML course
•Télécharger en tant que PPTX, PDF•
0 j'aime•1,969 vues
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.
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
En vedette (18)
Similaire à IPW HTML course
Similaire à IPW HTML course (20)
Plus de Vlad Posea
Plus de Vlad Posea (14)
IPW HTML course
- 1. Introduction to Web Programming (X)HTML
- 2. Plan of the course XHTML and HTML Structure of a document Main HTML Tags Headings Paragraphs Links Tables Forms Images
- 3. HTML HTML – HyperText Markup Language It’s a markup language – uses tags to describe web pages Currently used version – 4.01 - http://www.w3.org/TR/html401/ - from 1999!! HTML 5 – work in progress XHTML - http://www.w3.org/TR/xhtml1/ - same tags but using some XML constraints XML – extension markup language – generic language for structuring documents
- 4. What is a html tag Keywords between “<“ and “>” There is usually a start tag and an end tag example: <tag>…</tag> Empty tags <tag /> Attributes An attribute is a pair of type name=“value” that is inside a tag <tag attribute=“value”> … </tag>
- 5. Characteristics of tags Tags should always be closed “/>” be written in lowercase Be properly nested <tag1><tag2></tag2></tag1> <tag1><tag2></tag1></tag2>
- 6. HTML and XHTML Browser work on “best effort” when interpreting an HTML file => one of the reasons pages look different in different browsers Because 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 document Logical structure of a document Title of the document Titles of the different sections Content Paragraphs, quoted text, code Tabular information Lists 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 section Contains 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="/favicon.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="favicon.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 section Contains the tags that are displayed in the browser The body section SHOULD contain the content The style information should be placed in external documents (see next course) Elements are going to be presented next and we’re going to build a web page adding each element step by step
- 12. Headings The titles of the sections H1…H6 Used by search engines to “understand” the structure of the document SHOULD 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. Lists Ordered 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=“absolute or relative url” target=“”>text or image</a> The target represents where the link should open Missing – 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=“absolute or relative url” alt=“alternative text in case the image can’t be displayed or can’t 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. Tables Tables should ONLY be used for presenting tabular information They should not be used for design <table> <tr> <!--table row) --> <td > table cell</td> </tr> </table>
- 18. Tables colspan used to have a cell that spans on multiple columns Attribute of the td element rowspan used to have a cell span on multiple rows Attribute of the td element Border If the table has a border or not Attribute of the table element
- 19. Tables example <table border="1"> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> <table border="1"> <tr> <td colspan="2"> </td> <!-- only 3 cells because 1 spans on 2 columns--> <td> </td> <td> </td> </tr> <tr> <td rowspan="2"> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <!-- only 3 cells because 1 above spans on 2 rows --> <td> </td> <td> </td> <td> </td> </tr> </table>
- 20. Forms Necessary 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 Inputs Text 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. Others Html comments Whenever you write code you need to write comments <!-- this is a comment in html -->
- 24. HTML Special Characters Some special characters <,>,’ ‘,& need to be represented differently in HTML There shouldn’t be confusion between the content of the page and the syntax The special characters are represented like:&code; Code is usually a 3-4 letter sequence that represents the special character
- 25. HTML Special Characters & - & ‘ ‘ (space) - “ - " < - < > - > Others: http://www.w3schools.com/tags/ref_entities.asp http://www.w3schools.com/tags/ref_symbols.asp
- 26. Conclusions In 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 pages The tags should be used according to their semantics