Introduction to HTML
HTML stands for Hypertext Markup Language, and it is the most widely used language to write Web Pages.
HTML is being widely used to format web pages with the help of different tags available
in HTML language.
Hypertext refers to the way in which Web pages (HTML documents) are linked together. Thus, the link
available on a webpage is called Hypertext.
Markup Language which means you use HTML to simply "mark-up" a text document with tags that tell a Web
browser how to structure it to display.
Technical Terms
1. Web page - simple document displayable by a browser, may contain text, graphics, and hyperlinks to
other web pages and files.
It is used to provide information to viewers, including pictures or videos to help illustrate
important topics.
2. Website - a collection of webpages located under a single domain name.
These webpages contain and display information about the business or organization and are usually
made up of elements such as photos, videos and text.
3. Tags - is a piece of markup language used to indicate the beginning and end of an HTML element in an
HTML document.
HTML tags help web browsers convert HTML documents into web pages. HTML tags are not visible in the
browser.
4. File Extension - The extension is a three- or four-letter abbreviation that signifies the file type.
Example: .jpg or .jpeg – image, .mp3 or .mp4 – audio , .docx – MS word, .html – web page source text
1
HTML <tags>
Basic Structure of HTML
<!DOCTYPE html>
<html>
<head>
<title> This is document title </title>
</head>
<body>
<h1> This is a heading </h1>
<p> Document content goes here..... </p>
</body>
</html>
2
Parts of a web page
How to save HTML Document
Step 1: Open Notepad. Press window + r in keyboard then type Notepad then click ok
Step 2: Type the basic structure of html or codes and details given by your teacher
Step 3: Click File in notepad then “Save as”
3
Step 5: Click Documents, find your own folder and open,
Step 6: Type in File name “basic structure sample.html and save
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration tag is used by the web browser to understand the version of
the HTML used in the document. Current version of HTML is 5 and it makes use of the following
declaration: <!DOCTYPE html>
HTML BASIC TAGS
1. Heading Tags
Any document starts with a heading. You can use different sizes for your headings. HTML also
has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and
<h6>. While displaying any heading, browser adds one line before and one line after that
heading.
<!DOCTYPE html>
<html>
<head>
<title> Heading Tag </title>
</head>
<body>
<h1> This is a heading 1 </h1>
<h2> This is a heading 1 </h2>
<h3> This is a heading 1 </h3>
<h4> This is a heading 1 </h4>
<h5> This is a heading 1 </h5>
<h6> This is a heading 1 </h6>
</body>
</html>
2. Paragraph Tag
The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of
4
text should go in between an opening <p> and a closing </p> tag as shown below in the
example:
<!DOCTYPE html>
<html>
<head>
<title> Paragraph Tag </title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>
3. Line Break Tags
Whenever you use the <br /> element, anything following it starts from the next line.
<!DOCTYPE html>
<html>
<head>
<title> Line Break Tag </title>
</head>
<body>
<p>Here is a first paragraph of text. </p> <br>
<p>Here is a second paragraph of text. </p> <br>
<p>Here is a third paragraph of text. </p> <br>
</body>
</html>
4. Centering Content
You can use <center> tag to put any content in the center of the page or any table cell.
5
<!DOCTYPE html>
<html>
<head>
<title> Center Tag </title>
</head>
<body>
<p>Here is a first paragraph of text. </p> <br>
<center> <p>Here is a second paragraph of text. </p> </center> <br>
<p>Here is a third paragraph of text. </p> <br>
</body>
</html>
5. Horizontal Lines
Horizontal lines are used to visually break-up sections of a document. The <hr> tag creates
a line from the current position in the document to the right margin and breaks the line
accordingly.
<!DOCTYPE html>
<html>
<head>
<title> Center Tag </title>
</head>
<body>
<h1> Horizontal Line </h1> <hr>
<p>Here is a first paragraph of text. </p> <br>
<center> <p>Here is a second paragraph of text. </p> </center> <br>
<p>Here is a third paragraph of text. </p> <br>
</body>
</html>
6
6. Grouping Content
The <div> and <span> elements allow you to group together several elements to create
sections or subsections of a page.
<!DOCTYPE html>
<html>
<head>
<title> Grouping Content Tag </title>
</head>
<body>
<div id="menu" align="middle" >
<a href="/index.htm">HOME</a> |
<a href="/about/contact_us.htm">CONTACT</a> |
<a href="/about/index.htm">ABOUT</a>
</div>
</body>
</html>
HTML Tag vs. Element
An HTML element is defined by a starting tag. If the element contains other content, it ends
with a closing tag.
For example, <p> is starting tag of a paragraph and </p> is closing tag of the same paragraph but <p>This is
paragraph</p> is a paragraph element.
HTML FORMATTING
Format Tag
Bold Text <b>...</b>
Italic Text <i>...</i>
Underlined Text <u>...</u>
Strike Text <strike>...</strike>
Superscript Text <sup>...</sup>
Subscript Text <sub>...</sub>
Larger Text <big>...</big>
Smaller Text <small>...</small>
Emphasized Text <em>...</em>
Marked Text <mark>...</mark>
Strong Text <strong>...</strong>
Quoting Text <blockquote>...</blockquote>
Short Quotations <q>...</q>
Text Citations <cite>..</cite>
7
Keyboard Text <kbd>...</kbd>
Address Text <address>...</address>
8
HTML COLORS
Body Background Color = <body bgcolor=”grey”>
<!DOCTYPE html>
<html>
<head>
<title> HTML Colors </title>
</head>
<body bgcolor="grey">
Body Background Color
</body>
</html>
Text Background Color
<!DOCTYPE html>
<html>
<head>
<title> HTML Colors </title>
</head>
<body>
<h1 style="background-
color:DodgerBlue;"> Text
Background Color </h1>
</body>
</html>
9
Border Color
<!DOCTYPE html>
<html>
<head>
<title> HTML Colors </title>
</head>
<body>
<h1 style="border:5px solid
green;"> Border Color </h1>
<br>
<h1 style="border:5px dotted
red;"> Dotted Border Color </h1>
</body>
</html>
Text Color, Size and Style
<!DOCTYPE html>
<html>
<head>
<title> HTML Font Styles </title>
</head>
<body>
<h1 style="color:Green;">
Text Color </h1> <br>
<h1 style="color:blue; font-
family:forte; font-
size:300%;"> Text Color: yellow -
font style: forte - font size: 300
</h1>
</body>
</html>
10
HTML Links
Links allow users to click their way from page to page.
HTML links are hyperlinks.
HTML Links – Syntax
<a href="url"> link text </a>
<a> tag defines a hyperlink.
href attribute, which indicates the link's destination
link text is the part that will be visible to the reader
NOTE: HTML Link documents should be place in one folder.
<!DOCTYPE html>
<html>
<head>
<title> HTML Link </title>
</head>
; <body>
<a href="file:///C:/Users/Veronica
%20Pajarilla/Documents/SY
%202022-2023/ICT/HTML/HTML
%20Samples/HTML%20Link/practical
%20quiz%201.html"> Practical Quiz 1
</a> <br>
<a href="file:///C:/Users/Veronica
%20Pajarilla/Documents/SY
%202022-2023/ICT/HTML/HTML
%20Samples/HTML%20Link/practical
%20quiz%201.1.html"> Practical Quiz
</a>
</body>
</html>
11
HTML Links - The target Attribute
The target attribute can have one of the following values:
_self - Default. Opens the document in the same window/tab as it was clicked
_blank - Opens the document in a new window or tab
_parent - Opens the document in the parent frame
_top - Opens the document in the full body of the window
<!DOCTYPE html>
<html>
<head>
<title> HTML Link </title>
</head>
<body>
<a href="file:///C:/Users/Veronica%20Pajarilla/Documents/SY%202022-2023/ICT/HTML/HTML
%20Samples/HTML%20Link/practical%20quiz%201.html" target="_parent"> Practical Quiz 1 </a>
<br>
<a href="file:///C:/Users/Veronica%20Pajarilla/Documents/SY%202022-2023/ICT/HTML/HTML
%20Samples/HTML%20Link/practical%20quiz%201.1.html" target="_blank"> Practical Quiz </a>
</body>
</html>
HTML Images
HTML Images Syntax
<img src="url" alt="alternatetext">
<img> tag is used to embed an image in a web page.
src - Specifies the path to the image
12
alt - Specifies an alternate text for the image
SAMPLE IMAGE
NOTE: HTML CODE:
images should be place in one folder.
<!DOCTYPE html>
<html>
<head>
<title> HTML Images </title>
</head>
<body>
<img src="franco.jpg" alt="franco">
</body>
</html>
<marquee> </marquee> - usw this code to move images from right to left
Image Size - Width and Height
The width and height attributes always define the width and height of the image in pixels.
<!DOCTYPE html>
<html>
<head>
<title> HTML Images </title>
</head>
<body>
<img src="franco.jpg" alt="franco"
width="300" height="400">
</body>
</html>
13
J
Image as LINK
<!DOCTYPE html>
<html>
<head>
<title> HTML Images </title>
</head>
<body>
<a href="file:///C:/Users/Veronica
%20Pajarilla/Documents/SY%202022-2023/
ICT/HTML/HTML%20Samples/HTML
%20Image/html%20image.html"> <img
src="franco.jpg" alt="franco" width="100"
height="150"> </a>
</body>
</html>
HTML <video> Tag
<!DOCTYPE html>
<html>
<head>
<title> HTML Images </title>
</head>
<body>
<video width="350" height="250"
controls>
<source
src="EP.10.v0.1654963628.480p.mp4">
</video>
</body>
</html>
14
<!DOCTYPE html>
<html>
<head>
<title> HTML Images </title>
</head>
<body>
<video width="350" height="250"
autoplay muted>
<source
src="EP.10.v0.1654963628.480p.mp4">
</video>
</body>
</html>
HTML <audio> Tag
<!DOCTYPE html>
<html>
<head>
<title> HTML Video </title>
</head>
<body>
<audio controls>
<source src="Up Dharma Down -
Kaibigan [LoudTronix.me].mp3">
</audio>
</body>
</html>
15
HTML <frameset> Tag
FRAMESET ROWS
<!DOCTYPE html>
<html>
<head>
<title> HTML Frameset rows </title>
</head>
<frameset rows = "10%,80%,10%">
<frame name = "top" src = "url" />
<frame name = "main" src = "url" />
<frame name = "bottom" src = "url" />
</frameset>
</html>
16
FRAMESET COLS
<!DOCTYPE html>
<html>
<head>
<title> HTML Frameset cols </title>
</head>
<frameset cols = "20%,60%,20%">
<frame name = "left" src = "url" />
<frame name = "center" src = "url" />
<frame name = "right" src = "url" />
</frameset>
</html>
17
