INTRODUCTION TO HTML

LESSON 1
 Objectives:
• At the end of the lesson, you will:
– Describe HTML and its syntax.
– Distinguish what is new in HTML5
– Create your first HTML file.
 You will need
• To complete this lesson, you will need:
– A computer with text editor and browser.
 The Beginning of HTML
• The internet was created at CERN, also known
as the European Organization for Nuclear
Research, by Tim Berners-Lee in 1989.
• It was conceived as a way for scientist in
different regions to collaborate on documents.
To make this endeavor easier
 The Beginning of HTML
• Tim Berners-Lee modified an existing markup
language and created Hypertext Markup
Language, abbreviated as HTML.
• In HTML, he added hypertext links, also
known as anchor tags.
 What is HTML?
• It is a Markup Language. Simply put, a
language is a language that tells applications,
and the computer, how to display certain
elements on the screen. These elements have
different purposes.
 What is HTML?
• HTML elements are different parts of a
webpage. Some are presentational in nature,
while others are focused on the content of the
page.
• Generally, elements’ names describe their
content. Elements are comprised of tags “tag”
and opening and closing tag and the content
of the element.
 What is HTML
• An opening tag is composed of an opening
angle bracket, the element name, and a
closing angle bracket. An example of an
opening tag for the paragraph element is: <p>
 What is HTML
• A closing tag is composed of an opening angle
bracket , a forwards slash, the element name
and a closing angle bracket . An example of a
closing tas or the paragraph element is </p>
• An element may have multiple element inside
of it. An example of this would be a div
element with a heading element and a
paragraph element.
– <div>
• <h1>I am a heading</h1>
• <p>I am a content</p>
– <div>
• Aside from tag names, the opening tag may
also contain attributes. Attributes are
additional information about the element.
Most attributes are a name and value pair.
• The values are text or numbers enclosed in
quotation marks, usually double quotation
marks. Ex.
– <div class=“Foo’></div>
• Some attributes do not require any value. The
required attribute of an <input> element is an
example of this. The examples are both valid.
– <input required=“required”></input>
– <input required></input>
• Since HTML has a lot of characters with special
meanings, named character references are
used in order to display these characters.
Adding blank spaces to your content
commonly used named character references
are
– &gt; for greater than (>)
– &lt; for less than (<)
– &quot; for double quotes (“)
– &amp; for ampersand (&)
 HTML comments
• HTML comments are text written in your
HTML file that do not appear in the browser.
They serve as references fro you, or your
teammates, when you read your HTML code.
• Comments start with an angle bracket, an
exclamation point and two dashes. They are
closed with two dashed and a closing angle
bracket.
– <!—Insert text here
 Events that led to HTML 5
• In the early years of HTML., browser vendors
created different HTML tags. Eventually, the
W3C, was formed to create standardized
definitions of HTML.
• But by 1998, the development of HTML was
halted in favor an XML-based markup
language, which they called XHTML.
• After a few iterations of XHTML, several
developers from different browser vendors
found that the new definition of XHTML would
not work on older machines. This pushed
them to form Web Hypertext Application
Technology Working Groups, or WHATWG.
• They created a prototype definition for
HTML5.
• A few year later, W3C began their work on a
new definition of HTML5, based on the work
by WHATWG
 HTML5 and its philosophies
• According to the specification documents on
their site, HTML 5 should be:
– Compatible with older content but maintains
flexibility to change.
– Effectively usable for a lot of different purposes
that solve real problems.
– Uniform implementation across different
browsers.
– Universally Accessible
 What Is HTML5 and what
encompasses it?
• HTML5 is a standardized definition of HTML.
Within this definition, new technologies were
created and standardized. Among theses new
things, the most basic are:
– Sematic tags
– Multimedia tags
– 3D Graphic and Effects
 Semantic Tags
• Are HTML tags that describe their purpose.
This includes <nav>, <article> <aside>, among
other things.
• Semantic tags already exist before HTML 5 but
the amount of semantic tags has been
increased in the HTML5 definition.
 Multimedia tags
• Specifically <audio> and <video>, extend the
capabilities of the web to manipulate
multimedia content.
• Before HTML5, only the <img> tag was the
commonly used multimedia tag.
 3D Graphics and Effects support was
added into HTML5
• Here lies the new <canvas> element, a 3D web
graphics library and SVG, or Standard Vector
Graphics, shapes.