+
Web Programming
By: Bernard Mussa
+
HTML5
+
Introduction
HTML5 (HyperText Markup Language 5)
Markup language that specifies the structure and content of
documents that are displayed in web browsers
Introduce you HTML5 basics, then cover more
sophisticated HTML5 techniques such as:
Tables, which are particularly useful for structuring
Information from databases (i.e., software that stores
structured sets of data)
Forms for collecting information(input data) from web-page
visitors
Internal linking for easier page navigation
Metadata elements for specifying information about a
document
+ Editing HTML5
We’llcreate HTML5 documents by typing HTML5
markup text in a text editor (such as Notepad,
TextEdit, vi, emacs) and saving it with the .html
or .htm filename extension.
Computers called web servers store HTML5
documents.
Clients
(such as web browsers running on your local
computer or smartphone) request specific resources
such as HTML5 documents from web servers.
+ First HTML5 Example
Create an HTML5 document named main.html,
which is stored in the examples/folder.
This
first example displays the message “Welcome to
HTML5!” in the browser.
+ First HTML5 Example
+ Document Type Declaration
T h e document type declaration
(DOCTYPE) is required in HTML5
documents so that browsers render the
page in standards mode.
Some browsers operate in quirks mode to
maintain backward compatibility with web
pages that are not up-to-date with the
latest standards.
Syntax: <!DOCTYPE html>
+ Comments
I n s e r t
comments in your HTML5
markup to improve readability and
describe the content of a document.
The browser ignores comments when
your document is rendered.
Comments start with <!-- and end with
-->.
+ html, head and body Elements
HTML5 markup contains:
Text (and images, graphics, animations, audios and videos) that
represents the content of a document
Elements that specify a document’s structure and meaning
The html element encloses the head section (represented by the head
element) and the body section (represented by the body element).
The head section contains information about the HTML5 document, such
as the character set (UTF-8, the most popular character-encoding
scheme for the web) that the page use which helps the browser determine
how to render the content and the title.
The head section also can contain special document-formatting
instructions called CSS3 style sheets and client-side programs called
scripts for creating dynamic web pages.
The body section contains the page’s content, which the browser displays
when the user visits the web page.
+ Start Tags and End Tags
HTML5 documents delimit most elements with a start tag and end tag.
A start tag consists of the element name in angle brackets
For example, <html>
An end tag consists of the element name preceded by a forward slash
(/) in angle brackets
For example, </html>
There are several so-called “void elements” that do not have end tags.
Many start tags have attributes that provide additional information
about an element, which browsers use to determine how to process
the element.
Each attribute has a name and a value separated by an equals sign
(=).
+ Title Element
The title element is called a nested element, because
it’s enclosed in the head element’s start and end tags.
The head element is also a nested element, because
it’s enclosed in the html element’s start and end tags.
The title element describes the web page.
Titles usually appear in the title bar at the top of the
browser window, in the browser tab on which the
page is displayed, and also as the text identifying a
pa g e w h e n u s e r s a d d t h e p a g e t o t h e i r l i st o f
Favorites or Bookmarks, enabling them to return to
their favorite sites.
Search engines use the title for indexing purposes
and when displaying results
+ Paragraph Element (<p>...</p>)
text placed between the <p> and </p>
All
tags forms one paragraph.
+ W3C HTML Validation Service
HTML5 documents that are syntactically
correct are guaranteed to render properly
HTML5 documents that contain syntax
errors may not display properly
Validation services (e.g.,
validator.w3.org/#validate-by-upload)
ensure that an HT ML 5 d o c u m e n t is
syntactically correct
+
Headings
HTML5 provides six heading elements
(h1 through h6) for specifying the
relative importance of information
Heading element h1 is considered the
most significant heading and is
rendered in the largest font.
Each successive heading element (i.e.,
h2, h3, etc.) is rendered in a
progressively smaller font.
+ Headings (cont.)
HTML5 provides six heading elements
(h1 through h6) for specifying the
relative importance of information
Heading element h1 is considered the
most significant heading and is
rendered in the largest font.
Each successive heading element (i.e.,
h2, h3, etc.) is rendered in a
progressively smaller font.
+ Headings (Cont.)
+ Headings (Cont.)
+ Exercise 1
Create html file displaying 3 paragraphs with
details of the following about you:
Your education background
Your favorite programming language
Your future career goals
+ Exercise 2
+
END!
