HTML
INTRODUCTION TO BASIC
HYPERTEXT MARKUP LANGUAGE
HISTORY OF HTML
Sir Tim Berners-Lee
• is an English computer scientist
best known as the inventor of the
World Wide Web.
• He created HTML in late 1991 but
was not released officially,
published in 1995 as HTML 2.0 .
HTML 4.01 was published in late
1999 and was a major version of
HTML.
HTML Versions
• HTML 1.0, released in 1993
• HTML 2.0, released in November 1995
• HTML 3.0, released in January 1997
• HTML 4.01, released in December 1999
• HTML 5.0, released in 2012
HTML
INTRODUCTION
Understanding a Website
• HTML (Hypertext Markup Language) is the code that is
used to structure a web page and its content.
• JavaScript is a text-based programming language used both
on the client-side and server-side that allows you to make
web pages interactive.
• CSS (Cascading Style Sheet) is the language for describing
the presentation of Web pages, including colors, layout, and
fonts. CSS is independent of HTML
What is HTML?
• Hype r te xt Mar kup L ang ua g e
• H T ML i s the sta nd a r d ma r kup l a ng ua g e fo r
cr e ati ng We b page s
• HT ML de scr i be s the str uct ur e o f a We b p a g e
A Simple HTML Document
What is an HTML Element?
• An HTML element is defined by a start tag, some content, and an
end tag:
<tagname>Content goes here...</tagname>
• The HTML element is everything from the start tag to the end
tag:
Example:
Web Browsers
• The purpose of a web browser (Chrome, Edge, Firefox,
Safari) is to read HTML documents and display them
correctly.
• A browser does not display the HTML tags, but uses them
to determine how to display the document:
Example:
HTML Page Structure
Below is a visualization of an HTML page structure:
BASIC HTML TAGS
• <!DOCTYPE> • <p>
• <html > • <br>
• <he a d > • <h1>,<h2>,<h3>,<h4>, <h5>,<h6>
• <body> • <a>
• <ti tl e > • <img>
< ! D O CT Y PE h t m l >
• This tag is the very first line in the HTML document.
• It tells the browser what version of HTML the document is written so that the
browser knows what to expect.
• This tag is also commonly referred to as the <!DOCTYPE> element.
Example:
<html> Tag
• The <html> tag represents the root of an HTML document.
• The <html> tag is the container for all other HTML elements (except for
the <!DOCTYPE> tag).
Note: You should always include the lang attribute inside the <html> tag, to
declare the language of the Web page. This is meant to assist search engines
and browsers.
Example:
<head> Tag
• The <head> element is a container for metadata (data about data) and is
placed between the <html> tag and the <body> tag.
• Metadata is data about the HTML document. Metadata is not displayed.
• Metadata typically define the document title, character set, styles, scripts, and
other meta information.
Example:
< t i tl e > T a g
• The <title> tag defines the title of the document. The title must be text-only, and
it is shown in the browser's title bar or in the page's tab.
• The <title> tag is required in HTML documents!
• The contents of a page title is very important for search engine optimization
(SEO)! The page title is used by search engine algorithms to decide the order
when listing pages in search results.
Example: Output:
<body> Tag
• The <body> tag defines the document's body.
• The <body> element contains all the contents of an HTML document, such as
headings, paragraphs, images, hyperlinks, tables, lists, etc.
Example:
<p> Tag
• The <p> tag defines a paragraph.
• Browsers automatically add a single blank line before and after each <p>
element.
Example:
<br> Tag
• The <br> tag inserts a single line break.
• The <br> tag is an empty tag which means that it has no end tag.
Example:
Output:
<h1> to <h2> Tag
• The <h1> to <h6> tags are used to define HTML headings.
• <h1> defines the most important heading. <h6> defines the least important
heading.
Example: Output:
<a> Tag
• The <a> tag defines a hyperlink, which is used to link from one page to another.
• The most important attribute of the <a> element is the href attribute, which
indicates the link's destination.
By default, links will appear as follows in all browsers:
• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red
Example:
<img> Tag
• The <img> tag is used to embed an image in an HTML page.
• Images are not technically inserted into a web page; images are linked to web pages. The <img> tag
creates a holding space for the referenced image.
The <img> tag has two required attributes:
• src - Specifies the path to the image
• alt - Specifies an alternate text for the image, if the image for some reason cannot be displayed
Note: Also, always specify the width and height of an image. If width and height are not specified, the
page might flicker while the image loads.
Tip: To link an image to another document, simply nest the <img> tag inside an <a> tag (see example
below).
Example:
END OF DISCUSSION
