This document provides an overview of basic HTML structure and elements. It discusses what HTML is, how it uses markup tags to describe web page structure with elements like headings, paragraphs, and links. It also covers HTML syntax and documents, how to structure a basic HTML page with tags for the root, head, title, and body. The document demonstrates using block and inline elements and attributes to build out web pages. It provides examples of different text formatting tags and tags for things like quotes, lines, and comments.
UiPath Community: Communication Mining from Zero to Hero
HTML Landing Page Structure
1. Web Development:
{ Basic HTML Structure }
Presented by:
Mr. Jhaun Paul G. Enriquez
MIS Coordinator
2. 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)
3. What is HTML?
Web Development: Using HTML5 & CSS3 3
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
4. HTML Basic Structure: Syntax
Web Development: Using HTML5 & CSS3 4
• 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
5. HTML Basic Structure: Documents
Web Development: Using HTML5 & CSS3 5
HTML
Web Document
XHTML Web Document
6. HTML Basic Structure: Documents
Web Development: Using HTML5 & CSS3 6
HTML5 Web Document
7. • 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.
HTML Basic Structure: Documents
Web Development: Using HTML5 & CSS3 7
DOCTYPE Declaration
<!DOCTYPE html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
8. 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
Web Development: Using HTML5 & CSS3 8
9. Web Development: Using HTML5 & CSS3 9
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>
10. HTML Basic Structure: Attributes
Web Development: Using HTML5 & CSS3 10
• provide additional info about HTML elements
• placed within the opening tag
• Paired with a "value"
Example:
11. HTML Basic Structure: Guidelines
Web Development: Using HTML5 & CSS3 11
• 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>
12. 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
13. 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?
14. Exercise 1: Creating a Validated Web Page
Template
Web Development: Using HTML5 & CSS3 14
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.
15. Creating and Editing Web Page
Web Development: Using HTML5 & CSS3 15
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
16. Creating and Editing Web Page
Web Development: Using HTML5 & CSS3 16
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
17. Creating and Editing Web Page
Web Development: Using HTML5 & CSS3 17
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
18. Creating and Editing Web Page
Web Development: Using HTML5 & CSS3 18
Using Text Formatting Tags:
• <sup>…</sup> - makes text a superscript
• <sub>…</sub> - makes text a subscript
HTML Code
Browser Display
19. Creating and Editing Web Page
Web Development: Using HTML5 & CSS3 19
Using Blockquote Tags:
• Sets enclosed text to appear as a quotation,
indented on the right and left
– <blockquote>…</blockquote>
HTML Code
Browser
Display
20. Creating and Editing Web Page
Web Development: Using HTML5 & CSS3 20
Using Horizontal Rule:
• <hr> - used to create lines that are used to visually
divide a page into sections
HTML Code
Browser
Display
21. Creating and Editing Web Page
Web Development: Using HTML5 & CSS3 21
Using Preserve Formatting Tags:
• <pre>…</pre> - preserve the formatting of the
source document the exact way it was written
HTML Code
Browser Display
22. Creating and Editing Web Page
Web Development: Using HTML5 & CSS3 22
Using Abbreviations and Address:
• <abbr>…</abbr> - abbreviation or acronym
• <address>…</address> - contact information
HTML Code
Browser
Display
24. Creating and Editing Web Page
Web Development: Using HTML5 & CSS3 24
Using Comments Tag:
• <!–– comment --> - insert comments in HTML
• Not displayed by the browser
HTML Code
Browser
Display
25. Deprecated Tags
• <acronym>
• <applet>
• <basefont>
• <big>
• <center>
• <dir>
• <font>
• <frame>
• <frameset>
• <isindex>
• <noframes>
• <strike>
• <u>
• <tt>
Web Development: Using HTML5 & CSS3 25
• elements are not available in HTML5 anymore and
their function is better handled by CSS
26. Exercise 2: Creating a Landing Page in HTML
for a Website
Web Development: Using HTML5 & CSS3 26
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.
Editor's Notes
Deprecated - a deprecated language entity is one that is tolerated or supported but not recommended. For example, a number of elements and attributes are deprecated in HTML 4.0 , meaning that other means of accomplishing the task are preferred.