Scribd
Upload
42 views

Getting The Structure and Text Right

The document discusses key concepts of HTML including elements, tags, attributes and values, and nesting. Elements act as containers for portions of a page. Tags are used to format text and are enclosed in angle brackets. Attributes and values define element characteristics, with attributes referring to characteristics and values completing the definitions. Nested elements cannot overlap. The document also covers HTML document structure, with the DOCTYPE at the top followed by <html> tags containing the <head> and <body>. The <head> contains metadata and the <body> contains visible page content.

Uploaded by

Kawaii Glamour
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
42 views

Getting The Structure and Text Right

The document discusses key concepts of HTML including elements, tags, attributes and values, and nesting. Elements act as containers for portions of a page. Tags are used to format text and are enclosed in angle brackets. Attributes and values define element characteristics, with attributes referring to characteristics and values completing the definitions. Nested elements cannot overlap. The document also covers HTML document structure, with the DOCTYPE at the top followed by <html> tags containing the <head> and <body>. The <head> contains metadata and the <body> contains visible page content.

Uploaded by

Kawaii Glamour
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 33

GETTING THE STRUCTURE

AND TEXT RIGHT


Prepared By:
Mary Grace Garces
4 Key Concepts of HTML
1. Elements: all HTML pages are
made up of elements. Think of an
element as a container in which a
portion of a page is placed. Ex:
<h1>Text Here</h1>
2. Tags: is an HTML codes that are
enclosed in angle brackets and are
used to format the text. Ex:<br>
– Often elements and tags are used
interchangeably.
– An element is made up of two tags:
an opening tag and a closing tag.
4 Key Concepts of HTML
3. Attributes and Values:
– Attribute is used to define the
characteristics of an element and is
placed inside the elements opening
tag. Ex: lang attribute of head.
– Values work together with attributes to
complete the definition of an element’s
characteristics.
<html lang=“en”>
lang – is the attribute (refers to language)
en – is the value (refers to English)
4 Key Concepts of HTML
3. Attributes and Values:
– Attribute is used to define the
characteristics of an element and is
placed inside the elements opening
tag. Ex: lang attribute of head.
– Values work together with attributes to
complete the definition of an element’s
characteristics.
<html lang=“en”>
lang – is the attribute (refers to language)
en – is the value (refers to English)
4 Key Concepts of HTML
4. Nesting:
– Often, you will want to apply more than one
element to a portion of your page.
– Nesting simply means that elements must
never overlap.
HTML DOCTYPE
Starts Things Off!
• In any HTML document sits a Document
Type Declaration (DTD), or DOCTYPE
declaration. This line of markup specifies
which version of HTML(or XHTML) you’re
using and also lets browsers know how to
interpret what follows.
HTML Document Organization
• The <html></html> opening and closing tags follow
the DOCTYPE declaration and contain everything else
inside the HTML document.
• The <head></head> follows the opening <html> tag. It
contain definitions, labels, and information about the
HTML document body that follows. The only legal
elements inside the <head> HTML document include
base, link, meta, script, style, and title.
• The <body></body> opening and closing tags follow
the closing </head> tag. They include the content and
related markup for the HTML document. This is where 99
percent of the stuff that actually appears inside a web
browser lives.
The <head> himself
• The head, or header, provides basic
information about the document, including
its title and metadata (information about
information), such as keywords, character
encoding, author information, and a
description.
• If you want to use an external style sheet
within a page, information about that style
sheet also goes into the header.
Handling Metadata
• Metadata means data or information about
data.
• All <meta> elements always appear inside
the HTML <head>, and may be used to
define the character encoding — that is,
the bit level codes used to represent
character data — inside an HTML
document.
• They define keywords for search engines,
describe document content, identify the
document’s author, define a document
refresh interval (the interval at which a page
automatically reloads itself), and more.
<head>
<meta charset=”UTF-8”> <!-- defines default HTML
character codes -->
<meta name=”keywords” content=”HTML, CSS, meta tag
examples”>
<meta name=”author” content=”MGVentura”> <!--
identifies author -->
<meta name=”description” content=”meta element
discussion -->
<meta http-equiv=”refresh” content=”1800”> <!-- refresh
every 30 mins -->
<title>Lots of head markup, no body</title>
</head>
Comments in HTML5
• Comments function as little notes to
yourself.
• Comments are represented through
• <!--Add your Comment Here-->
• Comments are not displayed in the
browser, they are sometimes called non
printing lines.
Control Text Flow
Controlling Text Flow
• Indents, Paragraph Breaks and
Line spacing is a main
consideration when building a
web site.
• HTML provide several means
for indicating breaks in your
paragraph.
<br /> and <p>
• The difference between the line
break and the paragraph
elements is that…
• when you use <br /> you’re
telling a browser to insert a line
break and go to the next line.
• The <p>element on the other
hand, will add a blank line
before it starts your new
paragraph.
Designate Headings with
<h#></h#>
• The purpose of the heading
element is to indicate
different heading levels in a
document.
• The tag are made up of h
with level of 1-6 following it.
One(1) will be the largest and
six(6) will be the smallest
Browser Displays
• ✓ First-level headings (<h1>) are the
largest (usually two or three font sizes
larger than the default text size for
paragraphs).
• ✓ All headings use boldface type by
default, and paragraph text uses plain
(nonbold) type by default.
• ✓ Sixth-level headings (<h6>) are the
smallest and may be two or three font
sizes smaller than the default paragraph
text.
Indent Text
• When you want to indent text in
a word processor, just press
the TAB key.
• In HTML, its NOT that SIMPLE.
• Web browsers ignore normal
text formatting instructions, you
have to be creative to indent
text.
Use &nbsp; to add spaces
• The non breaking space entity
(&nbsp;) will instruct a browser to
add spaces wherever you want
them.
• It is most commonly used to create
an indent at the beginning of a
paragraph.
• If you want to have a five-space
indent at the beginning of the
paragraph, type five nonbreaking
space entities at the beginning of
the line you want to indent.
Use the Definition Description
Element <dd> to Indent Text
• The definition description
<dd> </dd> element
automatically indents.
• So by enclosing the top line of
your text in this element, you
can force an indent without
typing all those entities.
Use <blockquote> to Indent a
Large Block
• If you want to indent
everything from the left margin,
the easiest way to do it is to use
the <blockquote> </blockquote>
element.
• Keep in mind that when you
enclose your text in this
element, you will instruct the
browser to indent the margins
from both sides.
Preformatted text
• The preformatted text element
(<pre></pre>) instructs
browsers to keep all white
space intact while it displays
your content.
Insert Ruler Lines with <hr />
• The horizontal rule element, <hr />,
will draw a horizontal line wherever you
place it.
• Attributes/Values of <hr /> tag
✓ width:refers to the width of the rule.
✓ It could be based on the percentage of the
✓ screen size or in the number of pixels (the
little “dots” that make up the pictures on the
monitor of your screen.
✓ Example1: <hr width=“200” /> in pixels
✓ Example2: <hr width=“20%”> % of screen
Attributes of <hr /> Tag
• size: you can specify the thickness
of the rule with the size attribute,
but this time you must use pixels
instead of percentages.
<hr width=“25%” size=“3”>
Attributes of <hr /> Tag
• noshade: Some browsers display a
horizontal rule line with shading that
gives it a 3D look.
• If you prefer your rule to appear as
a solid line, add the noshade
attribute.
<hr width=“25%” size=“3” noshade
color=“blue”>
Attributes of <hr /> Tag
• color: you can choose a color by
adding the color attribute.

<hr width=“25%” size=“3” noshade color=“blue”>

• you could use a standard color


name Ex. (red, green, blue, yellow )
name or use the hexadecimal
format (#FF00FF)
Control Text with
Character Elements
• The character elements give you some
basic controls over how text will display on
a Web browser.
• Physical elements describe the physical
appearance of the characters.
Ex: <b>A bold text</b>
• Elements that derive their names from the
intended function or purpose of the text is
called Logical Element.
Ex: <strong>A strong text</strong>
• This element will display bold typeface, but
the element’s name stands for strongly
emphasized text.
Display Italicized Text
Six different elements of displaying
italicized text with distinct purpose:
• <i></i> The italics element is a physical
element for displaying italicized text.
• <em></em> The emphasis element is a
logical element for emphasizing
important portions of a document.
• <cite></cite> The citation element
identifies a portion of your document as
a reference to an outside source.
Display Italicized
Text
• <var></var> The logical element
indicates a variable, as might be
used in computer code.
• <dfn></dfn> This logical element
identifies a portion of text as
defining instance of a term.
• <address></address> Defines
contact information for the
author/owner of a document
Display Boldface
Text
• <b></b> The bold element is a
physical element that allows
you to render boldface text.
• <strong></strong> The
strong also displays in bold.
This logical element indicates a
heavier or stronger emphasis
than does <b>, but there is
usually no difference in how the
two look in the browser
Create Superscripts
& Subscripts

• <sup></sup> This element


creates a superscript
• <sub></sub> This element
forces text to display as a
subscript.
Display Monospaced Text
• <code></code>This logical element not
only displays in a courier, fixed width-font
font, but also indicates that the text is a
portion of computer code.
• <kbd></kbd> Standing for keyboard, this
logical element identifies its contents as
keyboard input.
• <samp></samp>This is another logical
element. It describe its content as sample
output, most often rendering text in
monospaced font.
Display Strikethroughs
• <s></s> This physical element will
display text as “strikethrough”.
• <del></del> The deleted element is a
logical element that indicates that the
text has been deleted but left in the
page.
Display Underlined
Text
• <u></u> The underline element
will render text with a line
underneath.
• <ins></ins> The inserted text
element is a logical element
that indicates text that has
been inserted since the
document was written.

You might also like