Lesson 02

Lesson 02
Getting Started with HTML5

Objectives
• Study the syntax of HTML tags and attributes
• Define a Web page head, body, and title
• Work with the HTML5 structural elements
• Mark page headings, paragraphs, block
quotes, and addresses
Web Pages and Web Servers
• Each document on the World Wide Web is
referred to as a Web page
• Web pages are stored on Web servers,
which are computers that make Web pages
available to any device connected to the
Internet
• A Web browser retrieves the page from the
Web server and renders it on the user’s
computer or other device
• The earliest browsers, known as text‐based
browsers, were incapable of displaying
images
Introducing HTML
• A Web page is a text file written in Hypertext
Markup Language
• A markup language is a language that
describes the content and structure of a
document by identifying, or tagging, different
elements in the document
The History of HTML
• The first popular markup language was
Standard Generalized Markup Language
(SGML)
• In the early years of HTML, Web developers
were free to define and modify HTML in
whatever ways they thought best
The History of HTML
• A group of Web designers and programmers,
called the World Wide Web Consortium, or
the W3C, created a set of standards or
specifications that all browser manufacturers
were to follow
• The W3C has no enforcement power
• The recommendations of the W3C are
usually followed since a uniform approach to
Web page creation is beneficial to everyone
The History of HTML
• Older features of HTML are often deprecated, or
phased out, by the W3C That does not mean you
can’t continue to use them—you may need to use
them if you are supporting older browsers
• Current Web developers are increasingly using
XML (Extensible Markup Language)
• XML is a metalanguage like SGML, but without
SGML’s complexity and overhead
The History of HTML
• XHTML (Extensible Hypertext Markup
Language) is a stricter version of HTML and
is designed to confront some of the problems
associated with the different and competing
versions of HTML
• XHTML is also designed to better integrate
HTML with other markup languages such as
XML
The History of HTML
• XHTML 2.0 began development, but work
was halted in 2009
• HTML5 was developed as the next HTML
specification, and the de facto standard for
the next generation of HTML
HTML and Style Sheets
• HTML marks the different parts of a
document, but it does not indicate how
document content should be displayed by
browsers
• For this reason, the exact appearance of
each page element is described in a
separate document known as a style sheet
– Internal style sheets specify the appearance of
different HTML elements
Tools for Creating HTML
Documents
• Basic text editor such as Windows Notepad
• Other software programs that enable you to
create documents in different formats, such as
Microsoft Word or Adobe Acrobat, include tools
to convert their documents into HTML for quick
and easy publishing on the Web
• Web publishing software manages all of the
code and extended features of your site
Entering Elements and Attributes
• An HTML document is composed of
elements that represent distinct items in the
Web page, such as a paragraph, the page
heading, or even the entire body of the page
itself
– Elements are marked by one or more tags
• A two‐sided tag is a tag that contains some
document content. General syntax for a two
sided tag:
<element>content</element>
Marking Elements with Tags
• A two‐sided tag’s opening tag () and
closing tag () should completely enclose
its content
• Elements can contain other elements
– Tags cannot overlap
Welcome to the J‐Prop Shop

Exploring the Structure of an HTML
File
<html>
<head>
head content
</head>
<body>
body content
</body>
</html>
The Structure of an HTML File
• An HTML document is divided into two main
sections: the head and the body
• The head element contains information
about the document, for example the
document title or the keywords
• The content of the head element is not
displayed within the Web page
The Structure of an HTML File
• The body element contains all of the content
to appear on the Web page
• The body element can contain code that
tells the browser how to render the content
CSS (Cascading Style Sheets)
• While (X)HTML is used to describe the
content in a web page, it is Cascading Style
Sheets (CSS) that describe how you want
that content to look. In the web design biz,
the way the page looks is known as its
presentation. CSS is now the official and
standard mechanism for formatting text and
page layouts.
• CSS also provides methods for controlling
how documents will be presented in media
other than the traditional browser on a
screen, such as in print and on handheld
devices. It also has rules for specifying the
non-visual presentation of documents, such
as how they will sound when read by a
screen reader.
• Style sheets are also a great tool for
automating production, because you can
make changes to all the pages in your site by
editing a single style sheet document.
• Style sheets are supported to some degree
by all modern browsers.
• Although it is possible to publish web pages
using (X)HTML alone, you’ll probably want to
take on style sheets so you’re not stuck with
the browser’s default styles. If you’re looking
into designing web sites professionally,
proficiency at style sheets is mandatory.
Creating a Simple Page
5 basic steps of page production
• Start with content

– As a starting point, we’ll add raw text content and
see what browsers do with it.
• Give the document structure
– You’ll learn about (X) HTML elements and the
elements that give a document its structure.
5 basic steps of page production
cont..
• Identify text elements
– You’ll describe the content using the appropriate text
elements and learn about the proper way to use
(X)HTML.
• Add an Image
– By adding an image to the page, you’ll learn about
attributes and empty elements.
• Change the look with a style sheet
– This exercise gives you a taste of formatting content with
Cascading Style Sheets.
Lab Activity : The Bistro Website
HTML element
Basic document structure
1 The first line in the example isn’t an element at all;
it is a document type declaration (also called
DOCTYPE declaration) that identifies this
document as an HTML5 document.
2 The entire document is contained within an html

element. The html element is called the root
element because it contains all the elements in the
document, and it may not be contained within any
other element.
3 Within the html element, the document is divided
into a head and a body. The head element contains
descriptive information about the document itself,
such as its title, the style sheet(s) it uses, scripts,
and other types of “meta” information.
The meta elements within the head element
4 provide information about the document itself. A
meta element can be used to provide all sorts of
information, but in this case, it specifies the
character encoding (the standardized collection of
letters, numbers, and symbols) used in the
document.
5 Also in the head is the mandatory title element.
According to the HTML specification, every
document must contain a descriptive title.
Finally, the body element contains everything that

6 we want to show up in the browser window.
Semantic markup
• The purpose of (X)HTML is to provide meaning
and structure to the content. It is not intended to
provide instructions for how the content should look
(its presentation).
• Your job when marking up content is to choose the
(X)HTML element that provides the most meaningful
description of the content at hand. In the biz, we call
this semantic markup.
Semantic markup cont.
• It is important that you choose elements
based on what makes the most sense for the
content.
• document structure is the foundation upon
which we can add presentation instructions
with style sheets, and behaviors.
Attributes
• Attributes are instructions that clarify or
modify an element.
Attributes cont.
• Attributes go after the element name in the
opening tag only, never in the end tag.
• There may be several attributes applied to an
element, separated by spaces in the opening
tag. Their order is not important.
• Attributes take values, which follow an equals
sign (=).
Attributes cont.
• A value might be a number, a word, a string
of text, a URL, or a measurement depending
on the purpose of the attribute.
• Always put values within quotation marks.
Although quotation marks aren’t required
around all values in HTML, they are required
in XHTML.
Attributes cont.
• Some attributes are required, such as the src

and alt attributes in the img element.
• The attribute names available for each
element are defined in the (X)HTML
specifications; in other words, you can’t make
up an attribute for an element.
When Good Pages Go Bad
• What if I had forgotten to type the slash (/) in
the closing emphasis tag ()? With just
one character out of place, the remainder of
the document displays in emphasized (italic)
text. That’s because without that slash,
there’s nothing telling the browser to turn “off”
the emphasized formatting, so it just keeps
going.
• Making mistakes in your first HTML
documents and fixing them is a great way to
learn.
Summary
• This lesson introduced the elements that establish
the structure of the document.
• The remaining elements introduced in the exercises
will be treated in more depth in the following
lessons.
Online Reference:
• http://www.w3schools.com

Lesson 02 - Getting Started With HTML5

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Lesson 02 - Getting Started With HTML5

Caricato da

Copyright:

Formati disponibili

Getting Started with HTML5

<p>Welcome to the J‐Prop Shop</p>

• Start with content

2 The entire document is contained within an html

Finally, the body element contains everything that

• Some attributes are required, such as the src

Potrebbero piacerti anche