WEBPAGE
text document
that contains
HTML tags.
Website
is a collection of related web pages,
images, videos or other digital assets
that are addressed with a common
domain name or IP address in an
Internet Protocol-based network.
Website
Hypertext and Hyperlinks
• Hyperlink - is a reference to a
document that the reader can directly
follow.
• Hypertext – is a text with hyperlinks
Hypertext and Hyperlinks
WEBMASTER
Uniform Resource Locator (URL)
consists of a string of characters used to
identify or name a resource on the
Internet.
Uniform Resource Locator (URL)
WEB BROWSERS
a software application for retrieving,
presenting, and traversing information
resources on the World Wide Web.
WEB BROWSERS
SEARCH ENGINES
a tool designed to search for information
on the World Wide Web.
SEARCH ENGINES
INTRODUCTION TO HTML
WHAT IS HTML?
• HTML is the standard markup language for
creating Web pages.
• HTML stands for Hyper Text Markup
Language
• HTML is the standard markup language for
creating Web pages
WHAT IS HTML?
• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to
display the content
• HTML elements label pieces of content such
as "this is a heading", "this is a paragraph",
"this is a link", etc.
HTML Page Structure
HTML Editors
• Notepad
• Visual Studio Code
• Adobe Dreamweaver
HTML Basic
• All HTML documents must start with a document
type declaration: <!DOCTYPE hmlt>.
• The HTML document itself begins with <html>
and ends with </html>.
• The visible part of the HTML document is
between <body> and </body>.
HTML Headings
• All HTML documents must start with a document
type declaration: <!DOCTYPE hmlt>.
• The HTML document itself begins with <html>
and ends with </html>.
• The visible part of the HTML document is
between <body> and </body>.
HTML Headings
HTML headings are defined with the
<h1> to <h6> tags.
<h1> defines the most important heading.
<h6> defines the least important heading
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>
<!DOCTYPE html>
The <!DOCTYPE html> declaration
defines that this document is an
HTML5 document
<html>
The <html> element is the root element
of an HTML page
<head>
The <head> element contains meta
information about the HTML page
<title>
The <title> element specifies a title for
the HTML page (which is shown in the
browser's title bar or in the page's tab)
<body>
The <body> element defines the
document's body, and is a container for
all the visible contents, such as
headings, paragraphs, images,
hyperlinks, tables, lists, etc.
<h1>
The <h1> element defines a large
heading
<p>
The <p> element defines a paragraph
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>
HTML Links
HTML links are defined with the <a> tag:
<a href="https://www.facebook.com">This is
a link</a>
HTML Images
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width,
and height are provided as attributes:
<img src=“picture1.jpg" alt=“Picture 1"
width="104" height="142">
HTML is Not Case Sensitive
HTML tags are not case sensitive: <P> means
the same as <p>.
The HTML standard does not require lowercase
tags, but W3C recommends lowercase in
HTML, and demands lowercase for stricter
document types like XHTML.
HTML Attributes
HTML attributes provide additional information
about HTML elements.
HTML Attributes
• All HTML elements can have attributes
• Attributes provide additional information
about elements
HTML Attributes
• Attributes are always specified in the start
tag
• Attributes usually come in name/value pairs
like: name="value"
The href Attribute
• The <a> tag defines a hyperlink. The href
attribute specifies the URL of the page the
link goes to:
<a href="https://www.Facebook.com">Visit
Facebook</a>
The src Attribute
• The <img> tag is used to embed an image in
an HTML page. The src attribute specifies the
path to the image to be displayed:
<img src="img_girl.jpg">
The src Attribute
There are two ways to specify the URL in the
src attribute:
1. Absolute URL - Links to an external image
that is hosted on another website.
Ex.:
src="https://www.facbook.com/images/img_girl.jpg".
The src Attribute
2. Relative URL - Links to an image that is
hosted within the website.
Example: src="/images/img_girl.jpg"
The width and height Attributes
The <img> tag should also contain the width
and height attributes, which specify the width
and height of the image (in pixels):
<img src="img_girl.jpg" width="500"
height="600">
The alt Attribute
The required alt attribute for the <img> tag
specifies an alternate text for an image if the
image cannot be displayed for some reason.
<img src="img_girl.jpg" alt="Girl with a
jacket">
The style Attribute
The style attribute defines some extra
information about an element.
The value of the title attribute will be displayed
as a tooltip when you mouse over the element:
<p title="I'm a tooltip">This is a
paragraph.</p>
The title Attribute
The title attribute is used to add styles to an
element, such as color, font, size, and more.
<p style="color:red;">This is a red
paragraph.</p>
Important Notes to Remember:
• The HTML standard does not require
lowercase attribute names.
• The title attribute (and all other attributes) can
be written in uppercase or lowercase like title
or TITLE.
Important Notes to Remember:
• Always Quote Attribute Values
• Single or Double Quotes?
• All HTML elements can have attributes
• The href attribute of <a> specifies the URL of
the page the link goes to
Important Notes to Remember:
• Always Quote Attribute Values
• Single or Double Quotes?
• All HTML elements can have attributes
• The href attribute of <a> specifies the URL of
the page the link goes to
Important Notes to Remember:
• 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
Important Notes to Remember:
• The style attribute is used to add styles to an
element, such as color, font, size, and more
• The title attribute defines some extra
information about an element
HTML Horizontal Rules
• The <hr> tag defines a thematic break in an
HTML page and is most often displayed as a
horizontal rule.
HTML Formatting Elements
• <b> - Bold text
• <strong> - Important text
• <i> - Italic text
• <em> - Emphasized text
• <mark> - Marked text
HTML Formatting Elements
• <small> - Smaller text
• <del> - Deleted text
• <ins> - Inserted text
• <sub> - Subscript text
• <sup> - Superscript text
HTML Comment Tag
HTML comments are not displayed in the
browser, but they can help document your
HTML source code.
HTML Comment Tag
You can add comments to your HTML source
by using the following syntax:
<!-- Write your comments here -->
HTML Colors
HTML colors are specified with predefined
color names, or with RGB, HEX, HSL, RGBA,
or HSLA values.
Color Names
In HTML, a color can be specified by using a
color name:
