Understanding the Web Page Layout

Web Development:
{ Understanding the Web Page Layout
in HTML5}
Presented by:
Mr. Jhaun Paul G. Enriquez
SHS Faculty

HTML Elements
Web Development: Using HTML5 & CSS3 2
• are marked up using start tags and end tags
• delimited using angle brackets with a tag
name in between
• HTML5 tag names are case-insensitive
• Tags can either be a container tag or an
empty tag
Opening Tag Closing Tag
<tagname> content </tagname>
angle brackets

HTML Attributes
• used to define the characteristics of an HTML
element and placed inside the element's
opening tag
• all attributes have a name and a value
Name
Value
<a href="index.html"> Click Link</a>
property you
want to set
the value of the property to be
set and within double quotes
Note: Attribute names and values are case-insensitive

HTML Core Attributes
id class
title style
• used to uniquely
identify any element
• <h1 id="header">
• associate an element
with a style sheet
• <p class="section">
• suggested title for the
element
• often displayed as a
tooltip
• <abbr title="Hello">
• specify Cascading Style
Sheet (CSS) rules within an
element
• <p style="color:#bbccff;">

HTML Internationalization Attributes
dir attribute
• indicate to the browser about the direction in which
the text should flow
Value Meaning
ltr - Left to right (default value)
rtl - Right to left (for Hebrew and Arabic)
CODE
OUTPUT

lang attribute
• indicate the main language used in a document
• kept in HTML only for backwards compatibility with
earlier versions of HTML
CODE
OUTPUT

xml:lang attribute
• XHTML replacement for the lang attribute
CODE
OUTPUT

Deprecated Attributes
• alink
• link
• vlink
• border
• height
• width
• clear
• hspace
• vspace
• align
• nowrap
• text
• background
• bgcolor
• start
• type
• language

HTML Formatting Tags
• Bold – <b> … </b>
• Italic – <i> … </i>
• Superscript – <sup> … </sup>
• Subscript – <sub> … </sub>
• Insert – <ins> … </ins>
• Delete – <del> … </del>
• Big* – <big> … </big>
• Small – <small> … </small>
• Underline* – <u> … </u>
• Strike* – <strike> … </strike>
• Monospaced*
– <tt> … </tt>
Note:
Tags with
asterisk (*) are
deprecated

HTML Phrase Tags
• Emphasize – <em> … </em>
• Strong – <strong> … </strong>
• Abbreviation – <abbr> … </abbr>
• Acronym* – <acronym> … </acronym>
• Blockquote – <blockquote> … </blockquote>
• Short quotations – <q> … </q>
• Address – <address> … </address>
Note: Tags with asterisk (*) are deprecated

HTML Phrase Tags
• Text Citation – <cite> … </cite> == in italics
• Marked – <mark> … </mark> == with yellow mark
• Bi-Directional Override – <bdo> … </bdo>
• Definition – <dfn> … </dfn> == in italics
• Computer Code – <code> … </code> == in monospace
• Keyboard Text – <kbd> … </kbd>
• Programming Variables – <var> … </var> == in italics
• Program Output – <samp> … </samp>

1. What is used to define the characteristics of
element?
2. Where should the element attribute be place?
3. What are the two parts of an attribute?
4. What are the four core attributes used in HTML?
5. Which XHTML attribute was replaced by the
lang attribute in HTML5?
6. In displaying the content by a web browser, what
is the default direction of the text on a web page?
Quick Learning Check:

Web Page Layout Elements
• clearly describes its meaning to both the browser
and the developer
Source: http://www.w3schools.com/html/html_layout.asp
• define the
different parts of
a web page
• create a
structured layout
for web pages
SEMANTIC MARKUPS

Source: http://www.w3schools.com/html/html_layout.asp
Non-semantic Semantic
<div id="header">
<div
id="sid
ebar">
<div
class="section">
<div id="footer">
<header>
<aside> <section>
<footer>

Source: http://www.developer.com/lang/understanding-the-proper-way-to-lay-out-a-page-with-html5.html

Defining the Page Structure
Why use Semantics?
– accessibility - help assistive technologies read
and interpret your webpage
– searchability - help computers make sense of
your content
– internationalization - only 13% of the world are
English native speakers
– interoperability - help other programmers
understand the structure of your webpage
Source: https://codepen.io/mi-lee/post/an-overview-of-html5-semantics

Source: https://www.harding.edu/fmccown/classes/comp250-f15/notes/images/acu_screenshot_markup.png

The <header> Element
– specifies a header for a document or section
– should be used as a container for introductory content
– several <header> elements in one document are
allowed
SAMPLE CODE

• The <nav> Element
– specifies a navigation menus or links for a document
– contain links to the other pages from the website or
to other parts of the same web page
– not for minor set of hyperlinks
SAMPLE CODE

• The <section> Element
– a generic section of a document or application
– a thematic grouping of content, typically with a
heading (from W3C HTML5 Documentation)
– appropriate only if the contents would be listed
explicitly in the document's outline
SAMPLE CODE

• The <article> Element
– specifies independent, self-contained content
– can be used for a forum post, blog post or comment
– use <section> and <article> together or use nested
<article> elements
SAMPLE CODE

• The <aside> Element
– piece of content that is only slightly related to the
rest of the page
– used for extra information, related links and
contextual advertisements
SAMPLE CODE

• The <footer> Element
– specifies a footer for a document or section
– should contain information about its containing
element
– typically contains the author of the document,
copyright information, links to terms of use, contact
information, etc.
SAMPLE CODE

1. What HTML elements convey their meaning &
purpose clearly to the developer & to the browser?
2. Can you give a non-semantic markup?
3. Why should we use semantic markups?
4. What semantic markup represents a thematic
grouping of content, typically with a heading?
5. Which markup should be used for piece of
content that is only slightly related to the rest of
the page?
Quick Learning Check:

Understanding the Web Page Layout

Related slideshows

More Related Content

Understanding the Web Page Layout

Editor's Notes