Intro to HTML5

HTML5
Introduction to Web Programming

Plan of the course
• HTML5
• Structure of a document
• Main HTML Tags
– Headings
– Paragraphs
– Links
– Tables
– Forms
– Images

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 - first draft 2008
• Key ideas
– less need for external plugins (like Flash)
– More markup
– Device independence

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>

Guidelines for tags
– Empty <br/>
– Containing text or other tags <h1>text</h1>
– Tags contain attributes <img src=“http://...”/>
– Tags should always be written in lowercase
– Tags should be properly nested
– Tags should always be closed

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)
• navigation
• Very short example of document structure
using Word

Structure of a HTML5 Document
<!DOCTYPE html>
<html>
<head>
<title>the title of the document</title>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
• DOCTYPE:
• A DOCTYPE is a required preamble.
• DOCTYPEs are required for legacy
reasons. When omitted, browsers tend
to use a different rendering mode that
is incompatible with some
specifications. Including the DOCTYPE
in a document ensures that the
browser makes a best-effort attempt at
following the relevant specifications.

<html>
• The root of the document
• Contains a head element (that contains
metadata)
• Contains a body element (that contains
the content)
• Can have some global attributes like
“lang”
– <html lang=“en”> specifies the content of the
document is in english

The head section
• Contains data about the document
• <title> - the actual document title – appears in
the browser bar (mandatory)
• <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
• <base> specifies the base URL, allowing us to
define relative links

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

<section>
• The section element represents a generic
section of a document or application. A
section, in this context, is a thematic
grouping of content, typically with a
heading.
• Examples of sections:
– chapters,
– the various tabbed pages in a tabbed dialog
box,
– the numbered sections of a thesis.

Example no. 1
<!DOCTYPE html>
<html>
<head>
<title>The first example</title>
</head>
<body >
<section> About the course </section>
<section> About the lab </section>
</body>
</html>

<article>
• The article element represents a self-
contained composition in a document,
page, application, or site and that is, in
principle, independently distributable or
reusable, e.g. in syndication.

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>

Example no. 2
<!DOCTYPE html>
<html>
<head>
<title>The second example</title>
</head>
<body >
<section>
<h2>About the course</h2>
<p>Some information about the course</p>
</section>
</body>
</html>

<header>
• The header element represents a group of
introductory or navigational aids.
• A header element is intended to usually
contain the section's heading (an h1–
h6 element or an hgroup element), but
this is not required.
• The header element can also be used
to wrap a section's table of contents, a
search form, or any relevant logos.

<footer>
• The footer element represents a footer for
its nearest ancestor sectioning content or
sectioning root element.
• contains information about its section such
as who wrote it, links to related
documents, copyright data, and the like.
• When the footer element contains entire
sections, they represent appendices,
indexes, long colophons, verbose license
agreements, and other such content.

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>

<nav>
• The nav element represents a section of a
page that links to other pages or to parts
within the page: a section with navigation
links.

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>

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>

Absolute vs relative urls
• Absolute url: http://www.google.com
• Relative url ./images/1.jpg - refers to the
file 1.jpg that is found in the folder images
of the base/current folder
• If the page has a base element - the
relative URL starts from the base address
• If the page doesn’t have a base element
the relative URL starts from the URL of the
current page

<figure>
• The figure element represents some flow content,
optionally with a caption, that is self-contained and is
typically referenced as a single unit from the main flow of
the document.
• Usually contains images, videos
• Can contain text/code/<pre>
• <figcaption> - The figcaption element represents a
caption or legend for the rest of the contents of
the figcaption element's parent figure element

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.

<video>
• A video element is used for playing videos or movies,
and audio files with captions.
• some attributes:
– src = the address of the file
– poster = the address of an image to show if the video
is not available
– autoplay= boolean; if present the video will be played
as soon as it is available
– controls = boolean; if present the controls will be
displayed
– muted=boolean; if present the sound will be muted
– width, height = the dimensions of the video frame

Tables
• Tables should ONLY be used for
presenting tabular information
• They should not be used for design
• <table>
– <tr> 
• <td > table cell</td>
– </tr>
• </table>

Tables
• colspan
– used to have a cell that spans on multiple
columns
– Attribute of the td element
• rowspan
– used to have a row span on multiple columns
– Attribute of the tr element
• Border
– If the table has a border or not
– Attribute of the table element

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

<label>
• The label represents a caption in a user
interface.
• can be associated with a specific form
control, known as the labeled control
– Can use the for attribute for specifying the
labeled control
– Can put the form control inside
the label element itself.

Form Inputs
• <input type=“the type of input”> - see next
slide
• Text area <textarea name=“”></textarea>
- used for areas of text
• Submit <input type=“submit” value=“name
on the button”/> - used to submit the form
to the server

Others
• Html comments
– Whenever you write code you need to write
comments
•

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

References
• http://www.w3.org/TR/html5/
• HTML5 tutorial on w3schools.com

Intro to HTML5

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Intro to HTML5

Ähnlich wie Intro to HTML5 (20)

Mehr von Vlad Posea

Mehr von Vlad Posea (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Intro to HTML5