Basic html structure

Web Development:
{ Basic HTML Structure }
Presented by:
Mr. Jhaun Paul G. Enriquez
MIS Coordinator

What is HTML?
Web Development: Using HTML5 & CSS3 2
• describes the structure of Web pages using
markup
• elements are the building blocks of HTML pages
• File extension must be .html or .htm
World Wide Web
Consortium (W3C)
Web Hypertext Application
Technology Working Group
(WHATWG)

What is HTML?
Using Markup Tags or Elements:
• Use keywords or tag names
• Enclosed within angle brackets (< >)
Opening Tag Closing Tag
<tagname> content </tagname>
<h1> … </h1>
<p> … </p>
<a> … </a>
<body> … </body>
<header> … </header>
Examples:
<hr>
<br>
<img>
<meta>
<input>
Empty
Tags

HTML Basic Structure: Syntax
• has a "custom" HTML syntax that is compatible
with HTML 4 and XHTML1 documents
XHTML Rules:
• Lower case tag names
• Quoting our attributes
• An attribute had to
have a value
• Close all empty
elements
HTML5 Support:
• Uppercase tag names.
• Quotes are optional
for attributes.
• Attribute values are
optional.
• Closing empty
elements are optional

HTML Basic Structure: Documents
HTML
Web Document
XHTML Web Document

HTML5 Web Document

• used by the web browser to understand the
version of the HTML used in the document
• Older HTML versions was SGML based and
requires a reference to the DTD.
DOCTYPE Declaration
<!DOCTYPE html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>

Basic Web Document Elements
Tags Description
<html> root element of an HTML page
<head> represents the document's header
<title> mention the document title
<meta> provides metadata about the HTML
document like character encoding,
page description, or keywords
<body> represents the document’s body and
contains the visible page content

Using Block and Inline Elements
• Block-level - always starts on a new line and takes
up the full width available
– <h1> to <h6>, <p>, <div>, <table> or <form>
• Inline - does not start on a new line and only
takes up as much width as necessary
– <strong>, <em>, <b>, <i>, <span>, <img> or <a>
Nesting Elements on a Web Page
<p>This is a <b>paragraph</b>.</p>
<p>This is a <b>paragraph.</p></b>



HTML Basic Structure: Attributes
• provide additional info about HTML elements
• placed within the opening tag
• Paired with a "value"
Example:

HTML Basic Structure: Guidelines
• All markup tags must be lowercase
 <p>, <strong>, <em>, <blockquote>, <br>, <hr>
• All elements must have both an opening and
closing tag except for empty or void tags
 <p>This is a paragraph tag</p>
 This is a forced line break <br>
• All tags must be properly nested
 <p><strong>This is a paragraph tag</strong></p>
• Attributes can be assigned a value
 <img src="school.jpg" alt="school image" disabled>

Validating Web Documents
• to take away some of the uncertainty of HTML
• The most important validator is the W3C validator at
https://validator.w3.org

Quick Check:
1. What tag always begins an HTML document?
2. What tags are used to contain data that will not display
on the page?
3. Where will the text you type between the <title> tags
be displayed in the browser?
4. What would happen if you did not code the end </title>
tag properly?
5. What tag serve as a container for all the text and
images on a web page?
6. What would you code to make a statement that is not
displayed on a web page?

Exercise 1: Creating a Validated Web Page
Template
1. Create a template for developing web pages using HTML5.
2. Save the HTML document as webtemplate.html in a folder
and view using a web browser.
3. Validate the web page template using an W3C’s Markup
Validation Service.

Creating and Editing Web Page
Using Heading Tags:
• Increase the size of text and measured in points (pt)
• Six heading tags: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
• Heading tags make text bold
HTML Code
Browser Display

Using Paragraph and Break Tags:
• Control line endings in an HTML document
• <p>…</p> - inserts a blank line between text
• <br> - inserts a line break
HTML Code
Browser Display

Using Text Formatting Tags:
• Logical tags – let the browser determine how to
display the text in an HTML document
– <strong>…</strong> and <em>…</em>
• Physical tags – state how text should be displayed
– <b>…</b> and <i>…</i>
HTML Code
Browser
Display

Using Text Formatting Tags:
• <sup>…</sup> - makes text a superscript
• <sub>…</sub> - makes text a subscript
HTML Code
Browser Display

Using Blockquote Tags:
• Sets enclosed text to appear as a quotation,
indented on the right and left
– <blockquote>…</blockquote>
HTML Code
Browser
Display

Using Horizontal Rule:
• <hr> - used to create lines that are used to visually
divide a page into sections
HTML Code
Browser
Display

Using Preserve Formatting Tags:
• <pre>…</pre> - preserve the formatting of the
source document the exact way it was written
HTML Code
Browser Display

Using Abbreviations and Address:
• <abbr>…</abbr> - abbreviation or acronym
• <address>…</address> - contact information
HTML Code
Browser
Display

Inserting Reserved Characters:
Browser Display
Named Entity
Reference
Character
Reference
Symbol
Displayed
Description
< < < Less than
> > > Greater than
© ©  Copyright
    (a space) space
· ·  Round bullet
HTML Code
• Characters in HTML cannot be created by using a keyboard

Using Comments Tag:
• <!–– comment --> - insert comments in HTML
• Not displayed by the browser
HTML Code
Browser
Display

Deprecated Tags
• <acronym>
• <applet>
• <basefont>
• <big>
• <center>
• <dir>
• <font>
• <frame>
• <frameset>
• <isindex>
• <noframes>
• <strike>
• <u>
• <tt>
• elements are not available in HTML5 anymore and
their function is better handled by CSS

Exercise 2: Creating a Landing Page in HTML
for a Website
1. Create a home page as a landing page of a web site.
2. Format various text contained on a web page.
3. Use HTML elements and attributes to create the home page.

Basic html structure

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Basic html structure

Ähnlich wie Basic html structure (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Basic html structure

Hinweis der Redaktion