Scribd Logo
Upload

Welcome to Scribd!

  • Brief Introduction HTML5: John - Woodward@cs - Stir.ac - Uk

    Uploaded by

    Pankaj Verma
    18 views25 pages
    html5

    Original Title

    5_HTML5

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    html5

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    18 views25 pages

    Brief Introduction HTML5: John - Woodward@cs - Stir.ac - Uk

    Uploaded by

    Pankaj Verma
    html5

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 25

    Brief Introduction HTML5

    John.woodward@cs.stir.ac.uk
    Material from
    http://www.w3schools.com/html
    Mark up Language
    HTML is a mark-up language.
    Other mark-up language include
    Tex (document preparation)
    Xhtml
    Xml
    You can use tools rather that work with raw text
    (e.g. Dreamweaver, or even Microsoft Word)
    Learning by Example
    We will do lots of example.
    Learning by example may be easier than
    learning some rules.
    You will learn more from examples than
    reading lecture notes (or books)
    A word about labs
    DO NOT WRITE LOTS OF HTML and then try
    and view it.
    Write a little, then test if and see if it does
    what you intended.
    Then you can write some more
    The same will apply when you write programs.
    This is the incremental approach (rather than
    the big bang approach)
    Tutorials
    There are some great tutorials on-line to get you
    started
    http://www.w3schools.com/html/
    http://www.html-5-tutorial.com/
    http://html5doctor.com/
    Just Google html5 tutorial
    http://www.w3schools.com/css/
    Do not just read them.do them.
    Text Editors
    Choice of editor is quite personal
    E.g. emacs (linux) allows you to set hotkeys
    Which of the following would you choose and
    why?
    Notepad
    Notepad++
    There are hundred of editors
    Browsers
    You probably know, internet explorer (IE),
    Firefox, chrome
    There are differences.
    Largely a personal choice.
    Chrome is good if you have google account.
    Firefix has some good add-ins
    IE is supplied with Microsoft Windows.
    checkpoint
    To get the checkpoint your page must use
    some lists (numbered and/or un-numbered
    and/or description), as well as a table, and a
    variety of headings. Your page must also
    include some images and some links to other
    websites.
    We will cover most of this in this lecture.
    Resources books and webpages
    You will find it helpful to consult Creating a
    Website: the Missing Manual (MacDonald
    2011, available as an e-book from the library).
    Chapters 1, 2, 7 and 8 are relevant to this
    worksheet.

    See also the W3Schools tutorials on HTML at


    http://www.w3schools.com/html/.
    Good to know
    If you find a tag you do not understand
    what should you do ?
    http://www.w3schools.com/tags/
    What is the re-fresh key on your browser (e.g.
    for internet explorer, menu > view > refresh or
    used hotkey or shortcut F5)
    How do you view page source (tools>web
    developer>page source)
    HTML5 minimal document
    <!DOCTYPE html>
    <html>
    <head>
    <title>Title of the document</title>
    </head>

    <body>
    The content of the document......!
    </body>

    </html>
    Example Explained
    1. The DOCTYPE declaration defines the document
    type
    2. The text between <html> and </html> describes
    the web page
    3. The text between <body> and </body> is the
    visible page content
    4. The text between <h1> and </h1> is displayed as
    a heading
    5. The text between <p> and </p> is displayed as a
    paragraph
    From the worksheet
    <!DOCTYPE html>
    <html>
    <head>
    <title>All About Me</title>
    </head>
    <body>
    <p>
    This is <b>my very own web page</b> all about me!
    </p>
    <p>
    I wonder what I shall write in it...
    </p>
    </body>
    </html>
    Comments
    <! this is a comment, ignored!!-->
    Instead of deleting some html, You can
    comment out bit of html.
    This practice is also used in programming
    languages.
    Print(hello people)
    <! Print(do not print hello people) -->
    Basic Tags
    Title: <title> My nice new web page </title>
    Cascading Style Sheets
    CSS can be added to HTML in the following
    ways:
    Inline - using the style attribute in HTML
    elements
    Internal - using the <style> element in the
    <head> section
    External - using an external CSS file
    HTML Tables
    Tables are defined with the <table> tag.
    A table is divided into rows with the <tr> tag. (tr stands
    for table row)
    A row is divided into data cells with the <td> tag. (td
    stands for table data)
    A row can also be divided into headings with
    the <th> tag. (th stands for table heading)
    The <td> elements are the data containers in the table.
    The <td> elements can contain all sorts of HTML
    elements like text, images, lists, other tables, etc.
    The width of a table can be defined using CSS.
    HTML Table Tags
    Tag Description
    <table> Defines a table
    <th> Defines a header cell in a table
    <tr> Defines a row in a table
    <td> Defines a cell in a table
    <caption> Defines a table caption
    <colgroup> Specifies a group of one or more columns
    in a table for formatting

    <col> Specifies column properties for each


    column within a <colgroup> element

    <thead> Groups the header content in a table

    <tbody> Groups the body content in a table

    <tfoot> Groups the footer content in a table


    HTML Unordered Lists
    An unordered list starts with the <ul> tag.
    Each list item starts with the <li> tag.
    The list items are marked with bullets
    (typically small black circles).
    <ul>
    <li>Coffee</li>
    <li>Milk</li>
    </ul>
    HTML Ordered Lists
    An ordered list starts with the <ol> tag. Each
    list item starts with the <li> tag.
    The list items are marked with numbers.
    <ol>
    <li>Coffee</li>
    <li>Milk</li>
    </ol>
    HTML Description Lists
    A description list is a list of terms/names, with a
    description of each term/name.
    The <dl> tag defines a description list.
    The <dl> tag is used in conjunction with <dt> (defines
    terms/names) and <dd> (describes each term/name):
    <dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
    </dl>
    Character Entities
    < use &lt;
    > use &gt;
    & use &amp;
    Again Google character entities
    http://dev.w3.org/html5/html-author/charref
    Diacritical Marks

    a a&#768; a
    a a&#769; a
    a a&#770; a
    a a&#771; a
    O O&#768; O
    O O&#769; O
    O O&#770; O
    O O&#771; O
    HTML Character Entities
    Result Description Entity Name Entity Number
    non-breaking &nbsp; &#160;
    space
    < less than &lt; &#60;
    > greater than &gt; &#62;
    & ampersand &amp; &#38;
    cent &cent; &#162;
    pound &pound; &#163;
    yen &yen; &#165;
    euro &euro; &#8364;
    copyright &copy; &#169;
    registered &reg; &#174;
    trademark
    Try it yourself
    Here you have had just a few pointers.
    Try it yourself
    I will be in labs most Wednesdays
    and the Occasional Thursday

    You might also like