Scribd
Upload
23 views62 pages

HTML5 Overview and Basic Tags

The document outlines the objectives of exploring HTML elements and attributes. It discusses exploring the history of the web, creating the structure of an HTML document, inserting elements and attributes, adding metadata and defining page titles. It also covers marking page structures, organizing content, inserting images and links. The document provides examples of different HTML elements and their syntax including headings, paragraphs, lists, comments and more.

Uploaded by

riaguanzon2
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
23 views62 pages

HTML5 Overview and Basic Tags

The document outlines the objectives of exploring HTML elements and attributes. It discusses exploring the history of the web, creating the structure of an HTML document, inserting elements and attributes, adding metadata and defining page titles. It also covers marking page structures, organizing content, inserting images and links. The document provides examples of different HTML elements and their syntax including headings, paragraphs, lists, comments and more.

Uploaded by

riaguanzon2
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 62

Objectives

• Explore the history of the web


• Create the structure of an HTML document
• Insert HTML elements and attributes
• Insert metadata into a document
• Define a page title

2
Objectives (continued 1)
• Mark page structures with sectioning elements
• Organize page content with grouping elements
• Mark content with text-level elements
• Insert inline images
• Insert symbols based on character codes

3
Objectives (continued 2)
• Mark content using lists
• Create a navigation list
• Link to files within a website with hypertext links

4
Introducing HTML
• A Web page is a text file written in HTML (Hypertext Markup Language)
• A markup language describes the content and structure of a document
by identifying, or tagging, different document elements

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition 5


The History of HTML
• In the early years of HTML, browser developers were free to define and
modify the language as no rules or syntax were defined
• The World Wide Web Consortium, or the W3C, created a set of
standards or specifications for all browser manufacturers to follow

6
The History of HTML (continued 1)
• The W3C has no enforcement power
• The recommendations of the W3C are usually followed since a uniform
approach to Web page creation is beneficial to everyone

7
The History of HTML (continued 2)

• XHTML (Extensible Hypertext Markup Language) is a different version of


HTML enforced with a stricter set of standards
• HTML5 was developed as the de facto standard for the next generation
of HTML
• Older features of HTML are often deprecated, or phased out; you may
need to use them if you are supporting older browsers

8
The History of HTML (continued 3)

9
Tools for Working with HTML
• Basic text editor such as Windows Notepad
• Other HTML editors such as Notepad++, UltraEdit, CoffeeCup, BBEdit,
and ConTEXT

10
The Element Hierarchy
<!DOCTYPE html>
<html>
<head>
head content
</head>
<body>
body content
</body>
</html>

12
The Structure of an HTML5 Document

13
Exploring an HTML File

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition 14


The Document Type Declaration
• The first line in an HTML file is the document type declaration, or
doctype, that indicates the type of markup language used in the
document

<!DOCTYPE html>

15
Creating the Document Head
• The document head contains metadata
• Metadata is the content that describes or provides information about
how the document should be processed by the browser

16
Creating the Document Head (continued)

Examples of these are on the next slides


17
Setting the Page Title

18
Adding Metadata to the Document
• Meta element is used for general lists of metadata values.
The meta element structure is
<meta attributes />
• Character encoding is the process by which a computer converts text
into a sequence of bytes and vice versa when it stores the text and
when the text is read.

19
Adding Metadata to the Document (continued)

20
Adding Comments to Your Document
• A comment is descriptive text that is added to the HTML file but does not
appear in the browser window
<!-- comment -->
• Comments can be spread across several lines
• It is a good practice to always include a comment in the document head

21
Adding Comments to your Document
(continued)

22
Introducing Element Tags
• Element tag is the fundamental building block in every HTML document
that marks an element in the document
• A starting tag (<element>) indicates the beginning of an element, while
an ending tag (</element>) indicates the ending
• The general syntax of a two-sided element tag is
<element>content</element>

23
Writing the Page Body

• HTML marks the major topical areas of a page


using sectioning elements also referred to as
semantic elements.

Sample outputs are on the next slides 27


Comparing Sections in HTML4 and HTML5

28
Using Grouping Elements

29
Element Sample Output

blockquote <blockquote Words can be like X-rays, if you use them


cite="https://www.huxley.net/bnw/four.html"> properly—they’ll go through anything. You
<p>Words can be like X-rays, if you use them read and you’re pierced.
properly--they'll go through anything. You read
and you're pierced.</p> —Aldous Huxley, Brave New World
<footer>--Aldous Huxley, <cite>Brave New
World</cite></footer>
</blockquote>

Div (content <div class="warning">


division) <img src="/media/examples/leopard.jpg" alt="An
intimidating leopard." />
<p>Beware of the leopard</p>
</div>

dl (description list), <p>Cryptids of Cornwall:</p> Cryptids of Cornwall:


dt (description or
definition term, and <dl> Beast of Bodmin
dd (description <dt>Beast of Bodmin</dt> A large feline inhabiting Bodmin
details) <dd>A large feline inhabiting Bodmin Moor.
Moor.</dd>
Morgawr
A sea serpent.
<dt>Morgawr</dt>
<dd>A sea serpent.</dd> Owlman
A giant owl-like creature.
<dt>Owlman</dt>
<dd>A giant owl-like creature.</dd>
</dl>
Figure and <figure>
figcaption <img src="/media/cc0-images/elephant-660-
480.jpg" alt="Elephant at sunset" />
<figcaption>An elephant at sunset</figcaption>
</figure>

Hr (thematic breaks) [sample paragraph here]

<hr />

[sample paragraph here]

main <header>Gecko facts</header> Gecko facts

<main> Geckos are a group of usually small, usually


nocturnal lizards. They are found on every
<p>
continent except Australia.
Geckos are a group of usually small, usually
nocturnal lizards. They are found on every Many species of gecko have adhesive toe pads
continent except Australia. which enable them to climb walls and even
</p> windows.
<p>Many species of gecko have adhesive toe pads
which enable them to climb walls and even
windows.</p>
</main>
ol (ordered list of <ol> 1. Mix flour, baking powder,
items), li (list <li>Mix flour, baking powder, sugar, and sugar, and salt.
items) salt.</li> 2. In another bowl, mix eggs,
<li>In another bowl, mix eggs, milk, and
milk, and oil.
oil.</li>
<li>Stir both mixtures together.</li> 3. Stir both mixtures together.
<li>Fill muffin tray 3/4 full.</li> 4. Fill muffin tray 3/4 full.
<li>Bake for 20 minutes.</li> 5. Bake for 20 minutes.
</ol>

ul (unordered list <ul> ○ Milk


of items) <li>Milk</li> ○ Cheese
<li> ■ Blue cheese
Cheese ■ Feta
<ul>
<li>Blue cheese</li>
<li>Feta</li>
</ul>
</li>
</ul>

p <p> Geckos are a group of usually small,


Geckos are a group of usually small, usually nocturnal lizards. They are
usually nocturnal lizards. They are found found on every continent except
on every continent except Antarctica. Antarctica.
</p>
Pre (pre-formatted <pre>
text) L TE
A A
C V
R A
DOU
LOU
REUSE
QUE TU
PORTES
ET QUI T'
ORNE O CI
VILISÉ
OTE- TU VEUX
LA BIEN
SI RESPI
RER - Apollinaire
</pre>
Using Text-Level Elements

34
Using Text-Level Elements
Element Sample Output

a Hyperlink <a href="url">link text</a> link text

aabr abbreviat The <abbr title="World Wide The WWW (World Wide Web) is a
ion Web">WWW</abbr> is a global global system of interlinked
system of interlinked
hypertext documents that are
hypertext documents that
are accessed via the accessed via the Internet.
Internet.

b Bold text <b>This is bold text.</b> This is bold text

br line break This is the first line.<br> This is the first line.
This is the second line This is the second line.

cite citation <cite>The Grapes of The Grapes of Wrath by John


Wrath</cite> by John Steinbeck
Steinbeck

code computer <p> The push() method adds one or more


The <code>push()</code>
code method adds one or more
elements to the end of an array and returns
elements to the end of an array the new length of the array.
and returns the new length of
the
array.
</p>
Element Sample Output

data <p>New Products</p> New Products


<ul>
<li><data value="398">Mini Ketchup</data></li> ● Mini Ketchup
<li><data value="399">Jumbo Ketchup</data></li> ● Jumbo Ketchup
<li><data value="400">Mega Jumbo ● Mega Jumbo Ketchup
Ketchup</data></li>
</ul>

dfn (define a <p>A <dfn id="def-validator">validator</dfn> is a A validator is a program that


term) program that checks for syntax errors in code or checks for syntax errors in code
documents.</p> or documents.

em <p>Get out of bed <em>now</em>!</p> Get out of bed now!

<p>We <em>had</em> to do something about it.</p> We had to do something about it.

<p>This is <em>not</em> a drill!</p> This is not a drill!

i <p>I looked at it and thought <i>This can't be I looked at it and thought This
real!</i></p> can't be real!

<p><i>Musa</i> is one of two or three genera in the Musa is one of two or three
family <i>Musaceae</i>; it includes bananas and genera in the family Musaceae; it
plantains.</p> includes bananas and plantains.
Kbd <p>Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> Please press Ctrl + Shift + R to re-
(keyboard) + <kbd>R</kbd> to re-render an MDN page.</p> render an MDN page.

marks <p>Search results for "salamander":</p> Search results for "salamander":

<hr />

<p>Several species of <mark>salamander</mark> Several species of salamander


inhabit the temperate rainforest of the Pacific inhabit the temperate rainforest of
Northwest.</p> the Pacific Northwest.

Most salamanders are nocturnal,


<p>Most <mark>salamander</mark>s are nocturnal, and and hunt for insects, worms, and
hunt for insects, worms, and other small other small creatures.
creatures.</p>

q <p> When Dave asks HAL to open the


When Dave asks HAL to open the pod bay door, HAL pod bay door, HAL answers: I'm
answers: sorry, Dave. I'm afraid I can't do
<q that.
cite="https://www.imdb.com/title/tt0062622/quotes/q
t0396921">I'm sorry, Dave. I'm afraid I can't do
that.</q>
</p>
S <s>This text is no longer relevant.</s> This is no longer relevant
(strikethroug
h or line
through)

samp <p>I was trying to boot my computer, but I got this I was trying to boot my computer,
hilarious message:</p> but I got this hilarious message:

<p> Keyboard not found


<samp>Keyboard not found <br />Press F1 to Press F1 to continue
continue</samp>
</p>

small <p>MDN Web Docs is a learning platform for Web MDN Web Docs is a learning
technologies and the software that powers the platform for Web technologies
Web.</p> and the software that powers the
Web.
<hr />

<p><small>The content is licensed under a Creative The content is licensed under a Creative
Commons Attribution-ShareAlike 2.5 Generic Commons Attribution-ShareAlike 2.5 Generic
License.
License.</small></p>

span <p> Add the basil, pine nuts and garlic


Add the <span class="ingredient">basil</span>, to a blender and blend into a
<span class="ingredient">pine nuts</span> and paste.
<span class="ingredient">garlic</span> to a
blender and blend into a paste.
</p>
strong <p> ... the most important rule, the
... the most important rule, the rule you can rule you can never forget, no
never forget, no matter how much he cries, no matter how much he cries, no
matter how much he begs: matter how much he begs:
<strong>never feed him after midnight</strong>. never feed him after
</p> midnight.

sub <p> Almost every developer's


Almost every developer's favorite molecule is favorite molecule is
C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</su C8H10N4O2, also known as
b>, also known as "caffeine."
"caffeine."
</p>

script <p>The <em>Pythagorean theorem</em> is often The Pythagorean theorem is


expressed as the following equation:</p> often expressed as the
following equation:
<p>
<var>a<sup>2</sup></var> + a2 + b2 = c 2
<var>b<sup>2</sup></var> = <var>c<sup>2</sup></var>
</p>

time <p> The Cure will be celebrating their


The Cure will be celebrating their 40th 40th anniversary on July 7 in
anniversary on <time datetime="2018-07-07">July London's Hyde Park.
7</time> in London's Hyde
Park. The concert starts at 20:00 and
</p> you'll be able to enjoy the band
for at least 2h 30m.
<p>
The concert starts at <time
datetime="20:00">20:00</time> and you'll be able to
enjoy the band for at least
<time datetime="PT2H30M">2h 30m</time>.
</p>
u <p>You could use this element to highlight <u>speling</u> You could use this element to
mistakes, so the writer can <u>corect</u> them.</p> highlight speling mistakes, so the
writer can corect them

Var (variable) <p> The volume of a box is l × w × h,


The volume of a box is <var>l</var> × <var>w</var> × where l represents the length, w the
<var>h</var>, where <var>l</var> represents the length, width and h the height of the box.
<var>w</var> the width and <var>h</var> the height of
the box.
</p>

wbr <div id="example-paragraphs">


<p>Fernstraßenbauprivatfinanzierungsgesetz</p>
<p>Fernstraßen<wbr />bau<wbr />privat<wbr
/>finanzierungs<wbr />gesetz</p>

<p>Fernstraßen&shy;bau&shy;privat&shy;finanzierungs&shy;g
esetz</p>
</div>
External Styling: Linking HTML to Style Sheet
• A style sheet is a set of rules specifying how page elements are displayed; it is
written in the Cascading Style Sheet (CSS) language
• To link an HTML document to an external style sheet file, add the following
element:
<link href=”file” rel=”stylesheet” />

47
Working with Hypertext Links
• Hypertext is created by enclosing content within a set of opening and closing
<a> tags like:
<a href=“url”>content</a>
where url is Uniform Resource Locator (URL)

• Inline images can also be turned into links by enclosing the image within
opening and closing <a> tags
<a href=“ct_start.html”><img src=“ct_logo2.png” /></a>

57
● header: <header>.
● navigation bar: <nav>.
● main content: <main>, with various content subsections represented by
<article>, <section>, and <div> elements.
● sidebar: <aside>; often placed inside <main>.
● footer: <footer>.

You might also like