HTLM
WHAT IS HTML?
is as a markup language.
A markup language
is simply a way of annotating a document in such a way as to
make the annotations distinct from the text being annotated.
Markup languages such as HTML, Tex, XML, and XHTML
allow users to control how text and visual elements will be laid
out and displayed.
The term comes from the days of print, when editors would
write instructions on manuscript pages that might be revision
instructions to the author or copy editor.
Mark up
A way to indicate information
about the content that is distinct
from the content.
This “information about
content” in HTML
is implemented via tags or
HTML elements
The markup in Figure 3.1
consists of the red text and the
various circles and arrows and
the little yellow sticky notes.
HTML does the same thing
but uses textual tags
There are three main aims to HTML
1. Specify unambiguously how browsers should
deal with invalid markup.
2. Provide an open, nonproprietary programming
framework (via JavaScript) for creating rich
web applications.
3. Be backward compatible with the existing web.
The current W3C Recommendation for HTML is the
HTML5 specification, which dates back to 2014.
The syntax for marking up documents was defined
and centered around using elements and attributes
Elements and Attributes
HTML documents
are composed of textual content and HTML
elements.
The term HTML element is often used
interchangeably with the term tag.
HTML element
is a more expansive term that encompasses the element name
within angle brackets (i.e., the tag) and the content within the tag
(though some elements contain no extra content).
is identified in the HTML document by tags.
A tag
consists of the element name within angle brackets.
The element name
appears in both the beginning tag and the closing tag, which contains a
forward slash followed by the element's name, again all enclosed within angle
brackets.
The closing tag
acts like an off-switch for the on-switch that is the start tag.
It can also contain attributes.
HTML attribute
is a name=value pair that provides more information
about the HTML element.
the quotes are optional, though many web authors
still maintain the practice of enclosing attribute
values in quotes.
Some HTML attributes expect a number for the
value.
These will just be the numeric value; they will never
include the unit.
Nesting HTML Elements
an HTML element will contain other HTML
elements.
In such a case, the container element is said to be a
parent of the contained, or child, element.
Any elements contained within the child are said to
be descendants of the parent element; likewise, any
given child element may have a variety of ancestors.
Often an HTML element will contain other HTML
elements.
In such a case, the container element is
said to be a parent of the contained, or child, element.
Any elements contained within the child are said to be
descendants of the parent element;
likewise, any given child element may have a variety of
ancestors.
Semantic Markup
HTML documents should only focus on the structure
of the document; information about how the content
should look when it is displayed in the browser is
best left to CSS (Cascading Style Sheets)
HTML document
should not describe how to visually present content,
but only describe its content's structural semantics
or meaning.
Structure
is a vital way of communicating information in paper
and electronic documents.
All of the tags are used to describe the basic
structural information in a document, such as :
headings, lists, paragraphs, links, images, navigation, footers,
and so on.
Writing semantic HTML Markup advantages
1. Maintainability
easier to update and change than web pages that contain a great deal of presentation markup
2. Performance
quicker to author and faster to download.
3. Accessibility
Not all web users are able to view the content on web pages. Users with sight disabilities
experience the web using voice reading software.
Visiting a web page using voice reading software can be a very frustrating experience if the
site does not use semantic markup.
As well, many governments insist that sites for organizations that receive federal government
funding must adhere to certain accessibility guidelines.
4. Search Engine Optimization
the most important users of a website are the various search engine crawlers. These crawlers
are automated programs that cross the web scanning sites for their content, which is then
used for users' search queries. Semantic markup provides better instructions for these
crawlers: it tells them what things are important content on the site.
Structure of HTML Documents
The element
is used to provide a broad description of the content.
The title is not displayed within the browser window.
displayed by the browser in its window and/or tab
The title has some additional uses that are also important to
know.
used by the browser for its bookmarks and its browser history
list.
DOCTYPE (Document Type Definition) element
tells the browser (or any other client software that is
reading this HTML document) what type of
document it is about to process.
Head and Body
The element
is sometimes called the root element as it contains all the other
HTML elements in the document.
Notice that it also has a lang attribute.
This optional attribute tells the browser the natural language
that is being used for textual content in the HTML document,
which is English in this example.
This doesn't change how the document is rendered in the
browser; rather, search engines and screen reader software can
use this information.
Headings
HTML provides six levels of heading (h1 through
h6), with the higher heading number indicating a
heading of less importance.
In the real-world documents shown in Figure 3.6 ,
shows that headings are an essential way for
document authors to show their readers the
structure of the document.
used by the browser to create a document outline for
the page.
Headings
Every web page has a document outline.
This outline is not something that you see. Rather, it is an
internal data representation of the control on the page.
This document outline
is used by the browser to render the page.
It is also potentially used by web authors when they write
JavaScript to manipulate elements in the document or when
they use CSS to style different HTML elements.
Document Outline
is constructed from
headings and other
structural tags in the
content and is
analogous to the
outlines in the created
term papers in school
The browser
has its own default styling for each heading level.
Paragraphs and Divisions
Tag is a container and
can contain HTML and
other inline HTML
elements (the and
elements in Figure
3.9 ).
This term refers to
HTML elements that do
not cause a paragraph
break but are part of the
regular “flow” of the text
and are
Don't confuse the <p> element with the line break
element (<br> ).
<p>
a container for text and other inline elements.
The line break element forces a line break.
It is suitable for text whose content belongs in a single paragraph
but which must have specific line breaks: for example, addresses
and poems
<div> element
is also a container element and is used to create a logical grouping
of content (text and other HTML elements, including containers
such as <p> and other <div> elements).
<hr> element
used to add a “break” between paragraphs or <div> elements.
Browsers generally style the <hr> element as a horizontal rule.
Links
essential feature of all web pages.
created using the element (the “a” stands for anchor).
has two main parts: the destination and the label.
URL Relative Referencing
In constructing links with the element, referencing
images with the element, or including external
JavaScript or CSS files, we need to be able to
successfully reference files within site.
referencing a page or resource on an external site, a
full absolute reference is required: that is, a complete
URL with a protocol (typically, http://), the domain
name, any paths, and then finally the file name of the
desired resource.
Example site
directory tree
Inline Text Elements
