Scribd
Upload
24 views

Topic 2 - HTML Basics

The document provides an introduction to HTML basics and tags. It explains that HTML tags contain formatting instructions that tell browsers how to display text. Common tags are described, including the <b> bold tag. The document also discusses nesting tags within each other and the basic skeleton of an HTML page, which includes the <html>, <head>, and <body> elements. Finally, some examples of HTML code are provided.

Uploaded by

Temitope Osadare
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
24 views

Topic 2 - HTML Basics

The document provides an introduction to HTML basics and tags. It explains that HTML tags contain formatting instructions that tell browsers how to display text. Common tags are described, including the <b> bold tag. The document also discusses nesting tags within each other and the basic skeleton of an HTML page, which includes the <html>, <head>, and <body> elements. Finally, some examples of HTML code are provided.

Uploaded by

Temitope Osadare
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

LIFESKILLS COMPUTER

TRAINING AND
CONSULTING LIMITED
PRESENTS

HTML BASICS
LifeSkills Computer Training and Consulting Limited. Get Skill Get Life
HTML TAGS
HTML tags are formatting instructions that tell a browser how
to transform ordinary text into something visually appealing. If
you were to take all the tags out of an HTML document, the
resulting page would consist of nothing more than plain,
unformatted text.

You can recognize a tag by looking for angle brackets, two


special characters that look like this: < >. To create a tag, you
type HTML code between the brackets. This code is for the
browser’s eyes only; web visitors never see it (unless they use
the View➝Source trick to peek at the HTML).
LifeSkills Computer Training and Consulting Limited. Get Skill Get Life
HTML TAGS
For example, one simple tag is the <b> tag, which stands for
“bold” (tag names are always lowercase). When a browser
encounters this tag, it switches on boldface formatting, which
affects all the text that follows the tag.

On its own, the <b> tag isn’t quite good enough; it’s known as a
start tag, which means it switches on some effect (in this case,
bold lettering). Most start tags are paired with a matching end
tag that switches off the effect. You can easily recognize an end
tag. They look the same as start tags, except that they begin
with a forward slash. They look like this </ instead of like this <.
LifeSkills Computer Training and Consulting Limited. Get Skill Get Life
HTML TAGS
So the end tag for bold formatting is </b>. Here’s an example:

This isn't bold. <b>Pay attention!</b> Now we're back to


normal.

Which a browser displays as:

This isn’t bold. Pay attention! Now we’re back to normal.

LifeSkills Computer Training and Consulting Limited. Get Skill Get Life
OTHER HTML ELEMENTS
(a) Basic Block Level Elements

(1)

(2)

LifeSkills Computer Training and Consulting Limited. Get Skill Get Life
OTHER HTML ELEMENTS
(a) Block Level Elements (continued)

(3)

(4)

LifeSkills Computer Training and Consulting Limited. Get Skill Get Life
OTHER HTML ELEMENTS
(b) Basic Inline Elements

(1)

(2)

LifeSkills Computer Training and Consulting Limited. Get Skill Get Life
OTHER HTML ELEMENTS
(b) Basic Inline Elements (continued)

(3)

(4)

LifeSkills Computer Training and Consulting Limited. Get Skill Get Life
NESTING ELEMENTS
You can also nest one element inside another. In fact, nesting
elements is one of the basic building block techniques of web pages.
The question is, what happens if you want to make a piece of text
bold and italicized? HTML doesn’t include a single element for this
purpose, so you need to combine the two. Here’s an example:
This <b><i>word</i></b> has italic and bold formatting.
When a browser see these tags, it produces text that looks like
this:
This word has italic and bold formatting.

Note: Nesting elements follow LIFO rule i. e. LAST IN FIRST OUT


LifeSkills Computer Training and Consulting Limited. Get Skill Get Life
The Basic Skeleton of HTML Page
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
</body>
</html>
Every web page uses this basic framework. The ellipsis (…) shows
where you insert additional information.
LifeSkills Computer Training and Consulting Limited. Get Skill Get Life
The Basic Skeleton of HTML Page
To create a true HTML document, you start with Document Type
Definition (DTD) and three container elements: <html>, <head>,
and <body>. These three elements work together to describe the
basic structure of your page. Today, most web developers use
the HTML5 doctype, which looks like this:

<!DOCTYPE html>

The document type definition (DTD) is the first piece of


information in an HTML file. It tells the browser what markup
standard you used to write the page.
LifeSkills Computer Training and Consulting Limited. Get Skill Get Life
The Basic Skeleton of HTML Page
For comparison, here’s the much wordier doctype for XHTML
1.0, which you’re likely to spot in slightly older web pages:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Even seasoned web developers had to copy the XHTML 1.0


doctype from an existing web page to avoid typing it in wrong.
In this training, we are going to use the HTML5 doctype.

LifeSkills Computer Training and Consulting Limited. Get Skill Get Life
The Basic Skeleton of HTML Page
<html>
This element wraps everything (other than the doctype) in your
web page.
<head>
This element designates the header portion of your document.
The header can include some optional information about your
web page, including the required title (which your browser
displays in its title bar), optional search keywords, and an
optional style sheet
<body>
This element holds the meat of your web page, including the
actual content you want to display to the world.
LifeSkills Computer Training and Consulting Limited. Get Skill Get Life
An Example HTML Page
<!DOCTYPE html>
<html>
<head>
<title>Everything I Know About Web Design</title>
</head>
<body>
<p></p>
</body>
</html>

LifeSkills Computer Training and Consulting Limited. Get Skill Get Life
The Basic Skeleton of HTML Page
<title>
This element sets the title for your web page. The title plays several roles.
First, web browsers display the title at the top of the browser window.
Second, when a web visitor bookmarks your page, the browser uses the
title to label the bookmark in your Bookmark (or Favorites) menu. Third,
when your page turns up in a web search, the search engine usually
displays this title as the first line in the search results, followed by a
snippet of content from the page.
<p>
This indicates a paragraph. Web browsers don’t indent paragraphs, but
they do add a little space between consecutive paragraphs to keep them
separated.

LifeSkills Computer Training and Consulting Limited. Get Skill Get Life
IN THE NEXT VIDEO…..

WE WILL HAVE PRACTICAL


SESSION

LifeSkills Computer Training and Consulting Limited. Get Skill Get Life

You might also like