• Like
IPW HTML course
Upcoming SlideShare
Loading in...5
×

IPW HTML course

  • 2,917 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
2,917
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
69
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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>&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. 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
    & - &amp;
    ‘ ‘ (space) - &nbsp;
    “ - &quot;
    < - &lt;
    > - &gt;
    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