l5 HTML Introduction

HTML
INTRODUCTION
Prepared by: Era Marie F. Gannaban
What is HTML?
• HTML stands for Hyper Text Markup Language
• Hypertext: Hypertext means, text with a link embedded in it. If you click
on that link, it will open a new webpage. Apart from text, hypertext may
contain HTML tables, HTML lists, HTML forms, HTML images.
• Markup language: Markup language uses tags to define elements within
a document. It contains familiar words that are human-readable like
forms, tables, links, titles, etc. Every tag in a markup language has a
special meaning of its own and performs a particular operation.
Sample HTML Document
• <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>

<p>My first paragraph.</p>
</body>
</html>
• The <!DOCTYPE html> declaration defines that this document is an
HTML5 document
• The <html> element is the root element of an HTML page
• The <head> element contains meta information about the HTML page
• 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)
• 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.
• The <h1> element defines a large heading
• 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>
• The HTML element is everything from the start tag to
the end tag:
• <h1>My First Heading</h1>
• <p>My first paragraph.</p>
Types of tags in HTML
• Paired Tags (Opening and • Unpaired Tags (Singular Tag)
Closing Tags)
Open Tag Close Tag Open Tag
<html> </html> <br>
<table> </table>
<hr>
<form> </form>
<meta>
<span> </span>
<ul> </ul> <input>
<p> </p>
<head> </head>
<div> </div>
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"
Attributes
• All HTML elements can have 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
HTML Formatting Tags
1. Bold Tag <b> 7. Mark Tag <mark>
2. Italic Tag <i> 8. Emphasized Tag <em>
3. Underline Tag <u> 9. Deleted Tag <del>
4. Strong Tag <strong> 10. Inserted Tag <ins>
5. Small Tag <small> 11. Subscripted Tag <sub>
6. Big Tag <big> 12. Superscripted Tag <sup>
HTML Headings
<body>
<h1> This is Heading 1 </h1>
</body>
Examples – Formatting tags
• <b> This is Bold Text. </b> - This is Bold Text.
• <strong> This Text is Strong </strong> - This Text is Strong
• <i> This is italic Text </i> - This is italic Text
• <u> This is Underlined Text </u> - This is Underlined Text
• This text is <small> small </small> -
• This text is <big> BIG </big> -
• This text is <em> Emphasized. </em> - This text is Emphasized.
• This text is <sub> Subscripted. </sub> - This text is Subscripted.
• This text is <sup> Superscripted. - This text is Subscripted.
HTML Paragraphs
HTML p tag defines a paragraph in a webpage. It is a
Paired Tag, i.e., it comes with an opening <p> and a
closing </p> tag.
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Pre tag
<pre>
This is a Paragraph Tag.
</pre>
HTML a tag - What is href in HTML
• HTML a tag is also known as anchor tag.
• It defines a hyperlink that links one page to another.
• The href HTML attribute is used to give the reference(Path) of the
page or document to be linked.
• The <a> tag is a paired tag with </a> tag as a closing tag.
• Whatever is written between these two tags will feature as a
hyperlink on the webpage.
<a href="url">link text</a>
Example: <a href="https://www.coderepublics.com">Visit our

Website CodeRepublics</a>
HTML Target Attribute
Value Description
target="_blank" Opens the linked document in a new window
or tab.
target="_self" Opens the linked document in the same
window/tab. This is the default value.
target="_parent" Opens the linked document in the parent

frame.
target="_top" Opens the linked document in the full body
of the window.
target="_framename" Opens the linked document in a named
frame.
Example
• <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Anchor Tag Example </title>
</head>
<body>
<p><a href="https://www.coderepublics.com" target="_blank">Welcome to
CodeRepublics</a></p>
<p><a href="https://www.coderepublics.com" target="_top">Welcome to
<p><a href="https://www.coderepublics.com" target="_parent">Welcome to
<p><a href="https://www.coderepublics.com" target="_top">Welcome to
</body>
</html>
HTML Image Link - use HTML href with img
tag
• <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Image Link </title>
</head>
<body>
<p>The image is a link. You can click on it.</p>
<a href="https://www.coderepublics.com">
<img src="PUBG.png" alt="HTML Image"
style="width:300px;height:200px;">
</a>
</body>
</html>
HTML Link Color
• You can set colors of your links, active links and visited links
using link, alink and vlink attributes of <body> tag.
<body alink="green" vlink="red">

<p> Click following link </p>
<a href="https://geekrepublics.com/"> Welcome to
GeekRepublics </a>
</body>
Image tag in HTML
• The <img> tag is the image tag in HTML. It inserts images in
web pages. It is a single tag, i.e., it has no closing tag.
<img src="location of image" alt="info. about

image" height="px" width="px">
Image Attribute
<img src="HTML-Image.png" alt="HTML5 Image"
style="width:400px; height:250px;">
The img alt attribute
• In "alt" attribute of <img> tag, you will give brief information
about the image. The info can be about the content present in
the image.
<img src="HTML-Image.png" alt="HTML5 Image"

style="width:400px; height:250px;">
<img src="HTML5-Image.png" alt="HTML5 Image" width=600px

height=250px>
Background Color
• The CSS background-color property defines the
background color for an HTML element.
• Example:
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
HTML Font Tag
• HTML Font Tag has three attributes called size, color,
and face to customize the Font. To change any of the
font attributes at any time within your webpage, use
the <font> tag. The text that follows will remain switched
until you close with the </font> tag.
• We can set html font size using size attribute.

• The range of accepted values is from 1 to 7.
• The default font size of a font is 3.
<body>
<font size="1">Hello HTML 5!</font>
</body>
The Font Face
• You can set font face using 'face' attribute but be aware that if
the user viewing the page doesn't have the Font installed, they
will not see it.
Font Face
• <font face="Times New Roman" size="5">Times
New Roman</font>
<font face="Verdana" size="5">Verdana</font>
<font face="Comic sans MS" size="5">Comic Sans
MS</font>
<font face="WildWest" size="5">WildWest</font>
<font face="Bedrock" size="5">Bedrock</font>
Alternative Font Face
• It is possible to specify two or more font face alternatives by
listing the font face names, separated by a comma. If the user
doesn't have one Font installed in his system, the other can
display the content.
Example
<body>
<font face="Times New
Roman,Verdana,Comic sans
MS,WildWest" size="5">Times New
Roman</font><br />
<font face="Lucida Calligraphy,Comic
Sans MS,Lucida Console"
size="5">Bedrock</font>
</body>
HTML Font Color Tag
<body>
<font color="#69C">This text is in
Blue</font><br />
<font color="green">This text is
Green</font>
</body>
Thank You!

l5 HTML Introduction

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

l5 HTML Introduction

Uploaded by

Copyright:

Available Formats

HTML

<h1>My First Heading</h1>

Example: <a href="https://www.coderepublics.com">Visit our

target="_parent" Opens the linked document in the parent

<body alink="green" vlink="red">

<img src="location of image" alt="info. about

<img src="HTML-Image.png" alt="HTML5 Image"

<img src="HTML5-Image.png" alt="HTML5 Image" width=600px

• We can set html font size using size attribute.

You might also like