Scribd
Upload
54 views17 pages

Introduction To HTML

HTML is the standard markup language used to create web pages. It uses tags to give structure and meaning to the content on web pages. Some key HTML tags include headings, paragraphs, line breaks, and links. HTML documents can be written and saved with a .html file extension. Common HTML elements include headings, paragraphs, links, lists, and images. CSS is used to style and lay out HTML elements on the page.

Uploaded by

Vero Nica
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
Download as docx, pdf, or txt
54 views17 pages

Introduction To HTML

HTML is the standard markup language used to create web pages. It uses tags to give structure and meaning to the content on web pages. Some key HTML tags include headings, paragraphs, line breaks, and links. HTML documents can be written and saved with a .html file extension. Common HTML elements include headings, paragraphs, links, lists, and images. CSS is used to style and lay out HTML elements on the page.

Uploaded by

Vero Nica
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
Download as docx, pdf, or txt
Download as docx, pdf, or txt
You are on page 1/ 17

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

You might also like