HTML
Hyper Text Markup Language
HISTORY OF WWW
In early 1989, an English Physicist started the
world wide web.
HISTORY OF WWW
Sir Tim Berners-Lee
ACCESSING THE WEB
The most common means of accessing the
internet is through the use of telephone lines.
ACCESSING THE WEB
• Dial-Up Connection – Connecting to internet using the
telephone lines.
• DSL – Digital Subscriber Line also same as dial up but provides
both data and voice communication.
• Cable Internet – connection to the web using cable lines.
• Wireless internet – internet connection without any cables and
can access any gadget with Wi-Fi enabled.
IN ACCESSING THE WEB, YOU NEED A
BROWSER
• Internet Explorer
IN ACCESSING THE WEB YOU NEED A
BROWSER
• Internet Explorer
• Safari
IN ACCESSING THE WEB YOU NEED A
BROWSER
• Internet Explorer
• Safari
• Mozilla Firefox
IN ACCESSING THE WEB YOU NEED A
BROWSER
• Internet Explorer
• Safari
• Mozilla Firefox
• Google Chrome
IN ACCESSING THE WEB YOU NEED A
BROWSER
• Internet Explorer
• Safari
• Mozilla Firefox
• Google Chrome
• Opera
IN ACCESSING THE WEB YOU NEED A
BROWSER
• Internet Explorer
• Safari
• Mozilla Firefox
• Google Chrome
• Opera
HTML TEXT EDITOR
TEXTUAL
WYSIWYG HTML
EDITOR
NOTEPAD++
Notepad++ is a free HTML editor
that was developed for Windows-
based machines. Linux users can
also use it via Wine. This editor is
distributed as free software and its
repository is also available on
GitHub. Like other community
projects, third-party plugins are
supported.
SUBLIME TEXT
Sublime is another excellent free
HTML editor. Developed by a Sydney-
based company, this software falls
under the category of freemium.
Freemium means that you can use
Sublime for free, but you must buy a
license to enjoy the full features.
DREAMWEAVER
Developed and managed by
tech giant Adobe Inc, Adobe
Dreamweaver CC is a premium,
powerful, and versatile tool. It
caters to both the back end and
front-end development. As a
closed-source software,
Dreamweaver is designed to
work within the Adobe
ecosystem. Adobe also provides
support, plugins, and features to
make sure you will always code
seamlessly.
A SIMPLE HTML DOCUMENT
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
A SIMPLE HTML DOCUMENT
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
A SIMPLE HTML DOCUMENT
The <!DOCTYPE html> declaration defines this document to be HTML5 <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
A SIMPLE HTML DOCUMENT
<!DOCTYPE html>
The <html> element is the root element of an HTML page <html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
A SIMPLE HTML DOCUMENT
<!DOCTYPE html>
<html>
The <head> element contains meta information about the document <head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
A SIMPLE HTML DOCUMENT
<!DOCTYPE html>
<html>
<head>
The <title> element specifies a title for the document
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
A SIMPLE HTML DOCUMENT
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
The <body> element contains the visible page content </head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
A SIMPLE HTML DOCUMENT
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
The <h1> element defines a large heading
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
A SIMPLE HTML DOCUMENT
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
The <p> element defines a paragraph
<p>My first paragraph.</p>
</body>
</html>
HTML PAGE STRUCTURE
HTML TAGS
<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
This is the root element tag. It designates that
<html></html> everything between these brackets contains
HTML code.
This tag distinguishes the head of the web page
from the content. This is where you put Javascript
<head></head> code or give ‘meta’ information about the web
site.
Have you noticed that browser tabs contain text
<title></title> that gives you an overview of the website? That
text is written as the site’s title with this tag.
The body tag specifies the actual content of the
<body></body> website.
This is a heading tag, which creates a title by
making text bigger and making it bold. There are
<h1></h1> six heading tags: h1, h2, h3, h4, h5, h6, in
descending order of size.
This tag specifies that a given section is
supposed to be its own paragraph.
Browsers usually insert blank spaces
<p></p>
between paragraphs, making the text
easier to read.
This tag let’s us create a link with its
‘href’ attribute, like so: <a
<a></a>
href=www.somewebsite.com>Click
here</a>.
The ‘image’ tag is how you insert images
<img></img>
into a web page.
<b></b> This tag specifies bold text.
<i></i> This tag specifies italic text.
<u></u> This tag specifies undelined text.
HTML ATTRIBUTES
All HTML elements can have attributes
Attributes provide additional information about
elements
Attributes are always specified in the start tag
Attributes usually come in name/value pairs
like: name="value"
HTML ATTRIBUTES
The href attribute of <a> specifies the URL of the page the link goes to
The src attribute of <img> specifies the path to the image to be displayed
The width and height attributes of <img> provide size information for images
The alt attribute of <img> provides an alternate text for an image
The style attribute is used to add styles to an element, such as color, font, size,
and more
The lang attribute of the <html> tag declares the language of the Web page
The title attribute defines some extra information about an element
