Scribd
Upload
31 views

EndTerm LearningTopic1-HTML Basic

The document provides an introduction to HTML including its fundamentals, tags, elements, attributes and formatting. It explains what HTML is, basic HTML document structure, common tags and their uses, and how to format text bold, italic and underlined.

Uploaded by

Pablo Peakazoo
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
31 views

EndTerm LearningTopic1-HTML Basic

The document provides an introduction to HTML including its fundamentals, tags, elements, attributes and formatting. It explains what HTML is, basic HTML document structure, common tags and their uses, and how to format text bold, italic and underlined.

Uploaded by

Pablo Peakazoo
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 31

INTRODUCTION TO HTML

HTML Fundamentals
References:
https://www.tutorialspoint.com/html/index.htm
https://www.w3schools.com/html/default.asp
Class Requirements:
Hardware:
Computer (Laptop or PC) Or Smart Phones
/ Tablet
Software:
Notepad, Sublime, Notepad++, atom, or
other HTML Editor (for PC)
For Smartphones or Tablets- search for
HTML Editor or choose anWriter Free, HTML Editor
by Codeplay
What is HTML?
HTML stands for Hypertext Markup 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. As its name suggests, HTML is a
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.
HTML Tags
As told earlier, HTML is a markup language
and makes use of various tags to format the
content. HTML tags are keywords (tag names).
These tags are enclosed within angle
braces <Tag Name>. Except few tags, most of
the tags have their corresponding closing tags.
For example, <html> has its closing
tag</html> and <body> tag has its closing tag
</body> tag etc.
Basic HTML Document
In its simplest form, following is an example
of an HTML document:

<!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>
Previous example of HTML document uses the following tags:
Tag Description
<!DOCTYPE...> This tag defines the document type and HTML
version.
<html> This tag encloses the complete HTML document
and mainly comprises of document header which is
represented by <head>...</head> and document
body which is represented by <body>...</body>
tags.
<head> This tag represents the document's header which
can keep other HTML tags like <title>, <link> etc.

<title> The <title> tag is used inside the <head> tag to


mention the document title.
<body> This tag represents the document's body which
keeps other HTML tags like <h1>, <div>, <p> etc.

<h1> This tag represents the heading.


<p> This tag represents a paragraph.
HTML – ELEMENTS
An HTML element is defined by a starting tag. If the element
contains other content, it ends with a closing tag, where the
element name is preceded by a forward slash as shown
below with few tags:
Start Tag Content End Tag
1. <p> This is paragraph content. </p>
2. <h1> This is heading content. </h1>
3. <div> This is division content. </div>
4. <br />

So here <p>....</p> is an HTML element, <h1>...</h1> is


another HTML element. There are some HTML elements which
don't need to be closed, such as <img.../>, <hr /> and <br />
elements. These are known as void elements.
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.

❖ The element content is everything between the


start and the end tag
❖ Empty elements are closed in the start tag
❖ Most HTML elements can have attributes.
Nested HTML Elements
It is very much allowed to keep one HTML
element inside another HTML element:
Example

<!DOCTYPE html>
<html>
<head>
<title>Nested Elements Example</title>
</head>
<body>
<h1>This is <i>italic</i> heading</h1>
<p>This is <u>underlined</u> paragraph</p>
</body>
</html>
HTML – ATTRIBUTES
ATTRIBUTES
An attribute is used to define the characteristics of
an HTML element and is placed inside the element's
opening tag.
All attributes are made up of two parts: a name and a
value:
The name is the property you want to set. For example,
the paragraph <p> element in the example carries an
attribute whose name is align, which you can use to
indicate the alignment of paragraph on the page.
The value is what you want the value of the property to
be set and always put within quotations. The below
example shows three possible values of align attribute:
left, center and right.
Attribute names and attribute values are case-
insensitive. However, the World Wide Web Consortium
(W3C) recommends lowercase attributes/attribute
values in their HTML 4 recommendation.

Example
<!DOCTYPE html>
<html>
<head>
<title>Align Attribute Example</title>
</head>
<body>
<p align="left">This is left aligned</p>
<p align="center">This is center aligned</p>
<p align="right">This is right aligned</p>
</body>
</html>
Core Attributes
The four core attributes that can be used on the
majority of HTML elements (although not all) are:
❖ Id , Title , Class , Style
The Id Attribute
The id attribute of an HTML tag can be used to uniquely
identify any element within an HTML page. There are two
primary reasons that you might want to use an id
attribute on an element:
1. If an element carries an id attribute as a unique
identifier, it is possible to identify just that element and its
content. 2. If you have two elements of the same name
within a Web page (or style sheet), you can use the id
attribute to distinguish between elements that have the
same name.

Example
• <p id="html">This para explains what is HTML</p>
• <p id="css">This para explains what is Cascading Style Sheet</p>
Core Attributes
The title Attribute
The title attribute gives a suggested title for the
element. They syntax for the title attribute is similar
as explained for id attribute:
-often displayed as a tooltip when cursor comes
over the element or while the element is loading.
Example
<!DOCTYPE html>
<html>
<head>
<title>The title Attribute Example</title>
</head>
<body>
<h3 title="Hello HTML!">Titled Heading Tag Example</h3>
</body>
</html>
Core Attributes
The class attribute is used to associate an element with a
style sheet, and specifies the class of element. You will learn
more about the use of the class attribute when you will learn
Cascading Style Sheet (CSS). The value of the attribute may
also be a space-separated list of class names. For example:
class="className1 className2 className3"
The style attribute allows you to specify Cascading Style
Sheet (CSS) rules within the element.
<!DOCTYPE html>
<html>
<head>
<title>The style Attribute</title>
</head>
<body>
<p style="font-family:arial; color:#FF0000;">Some text...</p>
</body>
</html>
This will produce the following result:
Some text...
Internationalization Attributes
There are three internationalization attributes, which are
available for most (although not all) XHTML elements.
dir, lang, xml:lang

The dir attribute allows you to indicate to the browser


about the direction in which the text should flow. The dir
attribute can take one of two values, as you can see in
the table that follows:
Value Meaning
ltr Left to right (the default value)
rtl Right to left (for languages such as Hebrew
or Arabic that are read right to left)
Internationalization Attributes
The lang attribute allows you to indicate the
main language used in a document, but this
attribute was kept in HTML only for backwards
compatibility with earlier versions of HTML. This
attribute has been replaced by the xml:lang
attribute in new XHTML documents.
Generic Attributes
Here's a table of some other attributes that are readily
usable with many of the HTML tags.

Attribute Options Function


align right, left, center Horizontally aligns tags

Vertically aligns tags within an HTML


valign top, middle, bottom element.

numeric, hexidecimal, Places a background color behind


bgcolor
RGB values an element

Places a background image behind


background URL an element

Names an element for use with


id User Defined Cascading Style Sheets.

Classifies an element for use with


class User Defined Cascading Style Sheets.

Specifies the width of tables, images,


width Numeric Value or table cells.

Specifies the height of tables,


height Numeric Value images, or table cells.

title User Defined "Pop-up" title of the elements.


HTML – FORMATTING
If you use a word processor, you must be familiar
with the ability to make text bold, italicized, or underlined;
these are just three of the ten options available to indicate
how text can appear in HTML and XHTML.
Bold Text
Anything that appears within <b>...</b> element, is
displayed in bold as shown below:
<!DOCTYPE html>
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b> typeface.</p>
</body>
</html>

This will produce the following result:


The following word uses a bold typeface.
HTML – FORMATTING
Italic Text
Anything that appears within <i>...</i> element is displayed
in italicized as shown below:
Example
<!DOCTYPE html>
<html>
<head>
<title>Italic Text Example</title>
</head>
<body>
<p>The following word uses a <i>italicized</i>
typeface.</p>
</body>
</html>

This will produce the following result:


The following word uses an italicized typeface.
HTML – FORMATTING
Underlined Text
Anything that appears within <u>...</u> element, is
displayed with underline as shown below:
Example
<!DOCTYPE html>
<html>
<head>
<title>Underlined Text Example</title>
</head>
<body>
<p>The following word uses a <u>underlined</u>
typeface.</p>
</body>
</html>

This will produce the following result:


The following word uses an underlined typeface.
HTML – FORMATTING
Strike Text
Anything that appears within <strike>...</strike> element is
displayed with strikethrough, which is a thin line through the
text as shown below:
Example:
<!DOCTYPE html>
<html>
<head>
<title>Strike Text Example</title>
</head>
<body>
<p>The following word uses a <strike>strikethrough</strike>
typeface.</p>
</body>
</html>

This will produce the following result:


The following word uses a strikethrough typeface.
HTML – FORMATTING
Monospaced Font
The content of a <tt>...</tt> element is written in monospaced font.
Most of the fonts are known as variable-width fonts because
different letters are of different widths (for example, the letter 'm' is
wider than the letter 'i'). In a monospaced font, however, each
letter has the same width.
Example
<!DOCTYPE html>
<html>
<head>
<title>Monospaced Font Example</title>
</head>
<body>
<p>The following word uses a <tt>monospaced</tt>
typeface.</p>
</body>
</html>
This will produce the following result:
The following word uses a monospaced typeface.
HTML – FORMATTING
Superscript Text
The content of a <sup>...</sup> element is written in
superscript; the font size used is the same size as the
characters surrounding it but is displayed half a character's
height above the other characters.

Example
<!DOCTYPE html>
<html>
<head>
<title>Superscript Text Example</title>
</head>
<body>
<p>The following word uses a <sup>superscript</sup>
typeface.</p>
</body>
</html>
This will produce the following result:
The following word uses a superscript typeface.
HTML – FORMATTING
Subscript Text
The content of a <sub>...</sub> element is written in
subscript; the font size used is the same as the characters
surrounding it, but is displayed half a character's height
beneath the other characters.
Example
<!DOCTYPE html>
<html>
<head>
<title>Subscript Text Example</title>
</head>
<body>
<p>The following word uses a <sub>subscript</sub>
typeface.</p>
</body>
</html>
This will produce the following result:
The following word uses a subscript typeface.
HTML – FORMATTING
Inserted Text
Anything that appears within <ins>...</ins> element is
displayed as inserted text.
Example
<!DOCTYPE html>
<html>
<head>
<title>Inserted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>
HTML – FORMATTING
Deleted Text
Anything that appears within <del>...</del> element, is
displayed as deleted text.
Example
<!DOCTYPE html>
<html>
<head>
<title>Deleted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>
HTML – FORMATTING
Larger Text
The content of the <big>...</big> element is displayed
one font size larger than the rest of the text surrounding it
as shown below:
Example
<!DOCTYPE html>
<html>
<head>
<title>Larger Text Example</title>
</head>
<body>
<p>The following word uses a <big>big</big>
typeface.</p>
</body>
</html>
HTML – FORMATTING
Smaller Text
The content of the <small>...</small> element is displayed
one font size smaller than the rest of the text surrounding it
as shown below:
Example
<!DOCTYPE html>
<html>
<head>
<title>Smaller Text Example</title>
</head>
<body>
<p>The following word uses a <small>small</small>
typeface.</p>
</body>
</html>
HTML – FORMATTING
Grouping Content
The <div> and <span> elements allow
you to group together several elements
to create sections or subsections of a
page.
For example, you might want to put all of
the footnotes on a page within a <div>
element to indicate that all of the
elements within that <div> element relate
to the footnotes.
You might then attach a style to this
<div> element so that they appear using
a special set of style rules.
HTML – FORMATTING
Example
<!DOCTYPE html>
<html>
<head>
<title>Div Tag Example</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>
<div id="content" align="left" bgcolor="white">
<h5>Content Articles</h5>
<p>Actual content goes here.....</p>
</div>
</body>
</html>

You might also like