1. No category

HTML element

Intro to HTML
HOW PAGES USE STRUCTURE
HEADLINE
HOW PAGES USE STRUCTURE
TEXT
HOW PAGES USE STRUCTURE
IMAGE
HOW PAGES USE STRUCTURE
SUBHEADING
HOW PAGES USE STRUCTURE
Digital versions
often have similar
structure
STRUCTURE IN WORD DOCS
Headings and
subheadings
reflect hierarchy
of information
HTML defines the structure
of web pages
HTML is defined as a markup language.
• A markup language is simply a way of annotating a
document in such a way to make the annotations
distinct from the text being annotated.
• The term comes from the days of print, when
editors would write instructions on manuscript
pages that might be revision instructions to the
author or copy editor.
Sample ad hoc markup
Markup
At its simplest, markup is a way to indicate
information about the content
• This “information about content” in HTML is
implemented via tags (aka elements).
• The markup in the previous slide consists of the
red text and the various circles and arrows on the
one page, and the little yellow sticky notes on the
other.
• HTML does the same thing but uses textual tags.
Elements and Attributes
HTML documents are composed of textual content
and HTML elements.
An HTML element can contain text, other elements,
or be empty. It is identified in the HTML document
by tags.
HTML elements can also contain attributes. An
HTML attribute is a name=value pair that provides
more information about the HTML element.
A CLOSER LOOK AT TAGS
CHARACTER
CHARACTER
FORWARD SLASH
LEFT-ANGLE BRACKET
OPENING TAG
RIGHT-ANGLE BRACKET
CLOSING TAG
ATTRIBUTES TELL US MORE
ABOUT ELEMENTS
ATTRIBUTE
NAME
<a lang ="en-us ">Paragraph in English</p>
ATTRIBUTE
VALUE
Another look at Elements and Attributes
HTML: PAGE STRUCTURE
<html>
<body>
<h1>This is the Main Heading</h1>
<p>This text might be an introduction to
the rest of the page.</p>
<h2>This is a Sub-Heading</h2>
<p>Many long articles have sub-headings
to help you follow the structure.</p>
<h2>Another Sub-Heading</h2>
<p>Here you can see another.</p>
</body>
</html>
Head and Body
HTML pages are divided into two sections: the head and the
body, which correspond to the <head> and <body> elements.
The head contains descriptive elements about the document
The body contains content that will be displayed in the
browser window.
<!DOCTYPE>
(short for Document Type Definition)
Tells the browser what type of document it is
about to process.
Notice that it does not indicate what version of
HTML is contained within the document: it only
specifies that it contains HTML.
BODY, HEAD & TITLE
<html>
<head>
<title>This is the Title of...</title>
</head>
<body>
<h1>This is the Body of the Page</h1>
<p>Anything within the body of a web
page is displayed in the main
browser window.</p>
</body>
</html>
BODY, HEAD & TITLE
<html>
<head>
<title>This is the Title of...</title>
</head>
<body>
<h1>This is the Body of the Page</h1>
<p>Anything within the body of a web
page is displayed in the main
browser window.</p>
</body>
</html>
BODY, HEAD & TITLE
BODY, HEAD & TITLE
<html>
<head>
<title>This is the Title of...</title>
</head>
<body>
<h1>This is the Body of the Page</h1>
<p>Anything within the body of a web
page is displayed in the main
browser window.</p>
</body>
</html>
BODY, HEAD & TITLE
Where to learn about HTML tags?
•
Your textbook
•
http://www.w3schools.com/ (and click HTML)
•
In your browser: right click > view page source
Headings
<h1>, <h2>, <h3>, etc
HTML provides six levels of
heading (h1, h2, h3, …), with
the higher heading number
indicating a heading of less
importance.
Headings are an essential
way for document authors
use to show their readers the
structure of the document.
HEADINGS
<h1>This is
<h2>This is a
<h3>This is a
<h4>This is a
<h5>This is a
<h6>This is a
a Main Heading</h1>
level 2 heading</h2>
level 3 heading</h3>
level 4 heading</h4>
level 5 heading</h5>
level 6 heading</h6>
Headings
The browser has its
own default styling
for each heading
level.
However, these are
easily modified and
customized via CSS.
Headings
In practice, specify a heading level that is semantically
accurate.
Do not choose a heading level because of its default
presentation:
- choosing <h3> because you want your text to be bold and 16pt
Rather, choose the heading level because it is
appropriate:
- choosing <h3> because it is a third level heading and not a
primary or secondary heading
PARAGRAPHS
<p>A paragraph consists of one or more
sentences that form a self-contained unit
of discourse. The start of a paragraph is
indicated by a new line.
<p>Text is easier to understand when it is
split up into units of text. For example,
a book may have chapters. Chapters can
have subheadings. Under each heading will
be one or more paragraphs.
Whitespace is Collapsed
<p>The
moon is
drifting
earth.</p>
away
from the
Line Breaks
<p>The Earth<br>gets one hundred tons
heavier every day<br>due to falling space
dust.</p>
Horizontal Rules
<p>Venus is the only planet that rotates
clockwise</p>
<hr>
<p>Jupiter is bigger than all the other
planets combined.</p>
Bold & Italic
<p><b>Beware</b> of Greeks bearing gifts.
</p>
<p><i>I</i> think bowties are cool.</p>
<p>I <i>think</i> bowties are cool.</p>
<p>I think <i>bowties</i> are cool.</p>
Strong & Emphasis
<p><strong>Beware</strong> of Greeks
bearing gifts.</p>
<p><em>I</em> think bowties are cool.</p>
<p>I <em>think</em> bowties are cool.</p>
<p>I think <em>bowties</em> are cool.</p>
Bold & Italic / Strong & Emphasis
Beware of Greeks bearing gifts.
I think bowties are cool.
I think bowties are cool.
I think bowties are cool.
Nesting HTML Elements
Often an HTML element will contain other HTML elements.
In such a case, the container element is said to be a parent of
the contained, or child, element.
Any elements contained within the child are said to be
descendents of the parent element; likewise, any given child
element, may have a variety of ancestors.
Hierarchy of Elements
Nesting HTML Elements
In order to properly construct a hierarchy of elements, your
browser expects each HTML nested element to be properly
nested.
That is, a child’s ending tag must occur before its parent’s
ending tag.
Using an HTML Validator
http://validator.w3.org

 Download  Report

Paperzz.com

Your Paperzz

© Copyright 2026 Paperzz