You are on page 1of 13

Introduction to

HTML
What is HTML
Webpages are written in HTML - a simple scripting language.

● HTML stands for Hyper Text Markup Language


● Hypertext is simply a piece of text that works as a link.
● Markup Language is a way of writing layout information within
documents.
● HTML elements are the building blocks of HTML pages
● HTML elements are represented by tags
● HTML tags label pieces of content such as "heading",
"paragraph", "table", and so on
● Browsers do not display the HTML tags, but use them to render
the content of the page

2
A Simple HTML Document Example Explained
<!DOCTYPE html> ● The <!DOCTYPE html> declaration defines this
<html> document to be HTML5
<head>
<title>Page Title</title> ● The <html> element is the root element of an
</head> HTML page
<body>
● The <head> element contains meta information
<h1>My First Heading</h1> about the document
<p>My first paragraph.</p> ● The <title> element specifies a title for the
</body> document
</html> ● The <body> element contains the visible page
content
● The <h1> element defines a large heading
● The <p> element defines a paragraph

3
The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration represents the document type, and helps


browsers to display web pages correctly.
It must only appear once, at the top of the page (before any HTML tags).
The <!DOCTYPE> declaration is not case sensitive.
The <!DOCTYPE> declaration for HTML5 is:

<!DOCTYPE html>

4
Web Browsers
× Google Chrome.
× Firefox.
× Safari.
× UC Browser.
× Internet Explorer.
× Opera.

5
Versions of HTML

HTML 1.0 (1989 - 1994)


HTML 1.0 was very limited in terms of styling and presentation of content. In HTML 1.0, for
example, you could not:
● use tables or frames,
● specify fonts,
● change page background, or
● use forms
Because of these limitations, every web page created with HTML 1.0 looked the same with similar
background and the type of font used.
Notes:
● because the World Wide Web Consortium (W3C) did not exist at the time HTML 1.0 first
appeared, W3C did not formally specify the HTML 1.0 specification.
● HTML 1.0 was only supported by Lynx (a non-graphical browser running on UNIX) and
Mosaic.

6
HTML 2.0 (1995)
Supported more browsers. HTML 2.0 supported:
× forms with limited set of form elements such as text boxes, and
option buttons
× change of page background
× use of tables

HTML 3.20 (1997)


This version included support for creating tables and expanded options for
form elements.
× It also allowed web pages to include complex mathematical
equations. This version of HTML supports many
presentation-focused elements such as font, as well as early support
for some scripting features.

7
HTML 4.01 (1999)

HTML 4.01 is the current official standard. This version is very stable,
having been released in December 1999. This version added support
for style sheets and scripting ability for multimedia elements.

8
HTML 5 (2014)
VIDEO
The video element allows you to easily stream video from a website.

<video width="450px" height="350px" controls>


<source src="video-url.mp4" type="video/mp4">
</video>

FIGURE
Figure elements can be used to display visual content, such as photos, illustrations,
diagrams or code snippets.

<figure class="gallery-item">
<img src="image-1.png">
</figure>
<figure class="gallery-item">
<img src="image-2.png">
</figure>
9
SECTION NAV
Section elements, like divs, can The nav element is used for the part of a website
be used to organize webpage that links to other pages on the site. The links can
content into thematic groups. be organized a number of ways. Below, the links are
displayed within paragraph elements. An
<section
class="contact-form"> unordered list could also be used.
<h2>Contact Us</h2>
<form> <nav>
... <p><a href="login.html">Log In</a></p>
</form> <p><a href="signup.html">Sign Up</a></p>
</section> <p><a href="contact.html">Contact Us</a></p>
</nav>

10
HTML TAGS
<TAG> (something) </TAG>

11
HTML TAGS
HTML tags are element names surrounded by angle brackets:

<tagname>content goes here...</tagname>


× HTML tags normally come in pairs like <p> and </p>
× The first tag in a pair is the start tag, the second tag is the end tag
× The end tag is written like the start tag, but with a forward slash inserted
before the tag name

12
13