Introduction To HTML

INTRODUCTION TO HTML
PREPARED BY: KC CACAYURAN

WHAT IS HTML?
• HTML stands for Hyper Text Markup Language
• HTML is the standard markup language for creating Web
pages
• 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.
A SIMPLE HTML DOCUMENT
CODE
<!DOCTYPE html>
<html> OUTPUT
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>

<p>My first paragraph.</p>
</body>
</html>
EXAMPLE EXPLAINED
<!DOCTYPE html> --------------Declaration defines that this document is an
HTML5 document
<html></html>-------------------Element is the root element of an HTML page
<head></head>--------------------Element contains meta information about
the HTML page
<title>Page Title</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></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></h1>-------------------------------Element defines a large heading
<p></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>
HTML PAGE STRUCTURE
Visualization of an HTML page structure:
HTML BASIC
1. <!DOCTYPE> declaration
• Represents the document type, and helps browsers to
display web pages correctly.
• It must only appear once, at the top of the page
(before any HTML tags).
• The <!DOCTYPE> declaration is not case sensitive.
HTML BASIC
2. HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the
least important heading.
<!DOCTYPE html>
<html>
OUTPUT
<body>
<h1>This is heading 1</h1>

</body>
</html>
HTML BASIC
3. HTML paragraphs are defined with the <p> tag
<!DOCTYPE html>
<html> OUTPUT
<body>
<p>This is a
paragraph.</p>
<p>This is another
paragraph.</p>
</body>
</html>
HTML BASIC
4. HTML links are defined with the <a> tag
<!DOCTYPE html>
<html>
<body>
<h2>HTML Links</h2> OUTPUT
<p>HTML links are
defined with the a
tag:</p>
<a
href="https://www.facebo
ok.com/">This is a
link</a>
</body>
</html>
HTML BASIC
5. HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height
are provided as attributes
<!DOCTYPE html>
<html> OUTPUT
<body>
<h2>7 Deadly Sins</h2>
<p>Escanor is one of the 7 deadly
sins:</p>
<img src="ESCANOR-IN-FULL-POWER-
MODE.jpg" alt="Escanor" width="104"
height="142">
</body>
</html>
HTML PARAGRAPHS
• A paragraph always starts on a new line, and is usually a
block of text.
• The HTML <p> element defines a paragraph.
• A paragraph always starts on a new line, and browsers
automatically add some white space (a margin) before
and after a paragraph.
HTML PARAGRAPHS
Code
Output
HTML DISPLAY
• Large or small screens, and resized windows will create different
results.
• With HTML, you cannot change the display by adding extra spaces
or extra lines in your HTML code.
The browser will automatically

remove any extra spaces and lines
when the page is displayed
HTML HORIZONTAL RULES
• The<hr> tag defines a thematic break in an HTML page,
and is most often displayed as a horizontal rule.
• The<hr> element is used to separate content (or define a
change) in an HTML page
Code
Output
The <hr> tag is an empty tag, which means

that it has no end tag.
HTML LINE BREAKS
• The HTML <br> element defines a line break.
• Use <br> if you want a line break (a new line) without
starting a new paragraph.
Code
Output
The <br> tag is an empty tag, which means

that it has no end tag.
HTML STYLES
• TheHTML style attribute is used to add styles to an
element, such as color, font, size, and more.
• Setting the style of an HTML element, can be done with
the style attribute.
The HTML style attribute has the following syntax:
<tagname style="property:value;">
HTML STYLES
Example
Code
<!DOCTYPE html> Output
<html>
<body>
<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am
big</p>
</body>
</html>
HTML STYLES
Set the background color for a page to powderblue:
Code
Output
<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
HTML STYLES
Set background color for two different elements
Code
<!DOCTYPE html> Output
<html>
<body>
<h1 style="background-
color:powderblue;">This is a heading</h1>
<p style="background-
color:tomato;">This is a paragraph.</p>
</body>
</html>
HTML STYLES
Set the background color for a page and text color.
Take note! You can use style="property:value;“ or
bgcolor=“name of color"
Code
<!DOCTYPE html>
<html>
Output
<body bgcolor="blue">
<p style="color:white;">I am normal</p>

<p style="color:red;">I am red</p>
<p style="color:black;">I am blue</p>
</body>
</html>
Using bgcolor
HTML FONTS
The HTML <font> tag defines the font size, color and face of text in the
HTML document. Since this tag <font> was removed in HTML5, it is
recommended that you use CSS properties such as font, font-family,
font-size and color to format the text in the document. This tag is also
commonly referred to as the <font> element.
Suggested font-family Lists
To help give you an idea of how to create our own font-family list, here are some
of our suggestions:
• Verdana, Geneva, sans-serif • "Gadget, sans-serif
• Georgia, "Times New Roman", Times, • "Times New Roman", Times, serif
serif • "Palatino Linotype", "Book Antiqua",
• "Courier New", Courier, monospace Palatino, serif
• Arial, Helvetica, sans-serif • "Lucida Sans Unicode", "Lucida
Grande", sans-serif
• Tahoma, Geneva, sans-serif
• "Trebuchet MS", Arial, Helvetica, sans- • "MS Serif", "New York", serif
serif • "Comic Sans MS", cursive
• "Arial Black", Gadget, sans-serif
HTML FONTS
Example of a font-family, font-size and color to format the
text in the document.
Code
<!DOCTYPE html>
<html>
Output
<body>
<p style="color:black; font-family:Verdana; font-
size: 300%;">This is a heading</p>
<p style="color:blue; font-family:Tahoma; font-
size: 160%;">This is a heading</p>
</body>
</html>
HTML TEXT ALIGNMENT
The CSS text-align property defines the horizontal text
alignment for an HTML element.
Code
<!DOCTYPE html>
<html>
Output
<body>
<p style="text-align:center;">This is a
heading</p>
<p style="text-align:right;">This is a
heading</p>
<p style="text-align:left;">This is a heading</p>
</body>
</html>
HTML TEXT FORMATTING
HTML contains several elements for defining text with a special
meaning.
Formatting elements were designed to display special types of text:
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text
HTML TEXT FORMATTING
Code
<!DOCTYPE html>
<html>
<body> Output
<p><b>This text is bold</b></p>
<p><i>This text is italic</i></p>
<p>This is<sub> subscript</sub> and
<sup>superscript</sup></p>
<p><small>This is some smaller text.</small></p>
<p>Do not forget to buy <mark>milk</mark>
today.</p>
<p>My favorite color is <del>blue</del> red.</p>
<p>My favorite color is <del>blue</del>
<ins>red</ins>.</p>
</body>
</html>
LAB ACTIVITY.
DO WHAT IS BEING ASKED FOR. CREATE A
PROGRAM THAT COULD DISPLAY AN OUTPUT.
Sample Output

Introduction To HTML

Uploaded by

Document Information

Original Title

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

Introduction To HTML

Uploaded by

Copyright:

Available Formats

INTRODUCTION TO HTML

PREPARED BY: KC CACAYURAN

<h1>My First Heading</h1>

<h1>This is heading 1</h1>

The browser will automatically

The <hr> tag is an empty tag, which means

The <br> tag is an empty tag, which means

The HTML style attribute has the following syntax:

<p style="color:white;">I am normal</p>

You might also like