TOPIC 2 - HTML BASICS.pptx

LIFESKILLS COMPUTER
TRAINING AND
CONSULTING
PRESENTS
LIMITED
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
you
the
use
special characters that look like this: < >. To create a tag,
type HTML code between the brackets. This code is for
browser’s eyes only; web visitors never see it (unless they
the View➝Source trick to peek at the HTML).

HTML
For example, one simple
TAGS
the tag, which stands
tag is 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 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 <.

HTML TAGS
So the end tag for bold formatting is . Here’s an example:
This isn't bold.
normal.
Pay attention! Now we're back to
Which a browser displays as:
This isn’t bold. Pay attention! Now we’re back to normal.

OTHER
(a) Basic Block Level Elements
HTML ELEMENTS
(1)
(2)

OTHER HTML
(a) Block Level Elements (continued)
ELEMENTS
(3)
(4)

OTHER
(b) Basic Inline Elements
HTML ELEMENTS
(1)
(2)

OTHER HTML
(b) Basic Inline Elements (continued)
ELEMENTS
(3)
(4)

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
bold and italicized? HTML doesn’t include a single element for
purpose, so you need to combine the two. Here’s an example:
This word has italic and bold formatting.
text
this
When a browser see these tags, it produces text that looks
this:
This word has italic and bold formatting.
like
Note: Nesting elements follow LIFO rule i. e. LAST IN FIRST OUT

The Basic Skeleton of HTML Page
<!DOCTYPE
<html>
<head>
...
</head>
<body>
...
</body>
</html>
html>
Every web page uses this basic framework. The ellipsis (…) shows
where you insert additional information.

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
use
basic structure of your page. Today, most web developers
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.

The Basic
For comparison, here’s
1.0, which you’re likely
Skeleton of HTML Page
the much wordier doctype for XHTML
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.

<html>
This element
web page.
<head>
wraps everything (other than the doctype) in your
This element designates the header portion of your document.
The header can include some optional information about your
web page, including the
bar),
required
optional
title (which your browser
displays in its title 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.

An
<!DOCTYPE html>
<html>
<head>
Example HTML Page
<title>Everything
</head>
<body>

</body>
</html>
I Know About Web Design</title>

<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.

This indicates a paragraph. Web browsers don’t indent paragraphs, but
they do add a little space between consecutive paragraphs to keep them
separated.

TOPIC 2 - HTML BASICS.pptx

Recommended

Recommended

More Related Content

Similar to TOPIC 2 - HTML BASICS.pptx

Similar to TOPIC 2 - HTML BASICS.pptx (20)

Recently uploaded

Recently uploaded (20)

TOPIC 2 - HTML BASICS.pptx