HTML
Fundamentals
Learning Objectives:
After completing this lesson, you should be able to:
● Create HTML documents
● Explain the uses of HTML elements and tags
● Identify mostly used HTML tags
● Classify different HTML attributes
● Demonstrate how HTML attributes and values work
HTML stands for?
Hypertext Markup
Language
(HTML)
The basic building block,
or the backbone, or the
skeleton of your website
How does HTML
work?
HTML documents are made up of:
1. Text Content
called ELEMENTS
Tags tell the web
browsers how to 2. Special code
display the
content. known as TAGS
HTML documents are identified by their .html or
.htm file extensions.
Find the HTML Tags?
HTML Tags
Start Tag End Tag
HTML uses “tags”, which <html> </html>
are the angled brackets <head> </head>
<…>. The tags are usually <title> </title>
<body> </body>
pairs; we have what we <h1> </h1>
called the “start tag” and <p> </p>
the “end tag” and they are <ul> </ul>
usually written like this: <li> </li>
HTML Tags
Find the HTML Elements?
HTML
Elements
Start Tag End Tag
The “elements” are
<html> </html>
everything that you put <head> </head>
between the start tag and <title> </title>
the end tag brackets, <body> </body>
whether it’s a text, a link, or <h1> </h1>
<p> </p>
an image. An element is a
<ul> </ul>
command that tells the <li> </li>
browser to do something.
HTML Elements
Rendering HTML
When a browser displays a Web page, it retrieves the HTML
file for that page from a server, analyzes the HTML tags to
determine how the content should be formatted, and renders
the page. The HTML tags tell the browser what images,
video, audio, and other content need to be downloaded and
integrated into the page.
HTML Standards
The World Wide Web Consortium, or W3C, is the primary
group guiding the evolution of the HTML language. The
W3C is made up of hundreds of companies and
organizations including Web Industry leaders such as
Microsoft, Apple, and Google. The standards developed by
the W3C give developers of Web servers and browsers a
set of common guidelines with which to develop their
products.
HTML Versions
The most recent version of HTML5 is 5.0. Version 5.0
includes rules for using more than 90 HTML tags. It is a
much improved HTML compared on the previous versions
because of its better support for multimedia, scripting, and
style sheets.
Understanding
HTML Structures
HTML Tags
The <HTML> and </HTML> tags at the beginning and end of
a text document identify it as HTML code. When a browser
encounters these tags, it knows that anything within the two
tags defines a Web page. Older Web browsers expect to
see the HTML tags; with the latest version of HTML and
newer versions of browsers, the tags are not always
necessary, but adding them is good form.
Document Header
The document header tags, <HEAD> and </HEAD>,
immediately follow the opening <HTML> tag.
The document header contains information that does not
appear in the bowser window including title information,
metadata, scripts, and style sheets.
Document Type Declaration
<!DOCTYPE html> - you can add a DOCTYPE declaration
to specify which tags a browser can expect to see in your
HTML document.
Document Title
● <TITLE> and </TITLE> - these tags define a page title
and appear inside the document header. It is good form
to keep the title to fewer than 64 characters in length.
● You can add a title to you HTML document to help people
and search engine identify your Web page.
● For example, you are building a web page for a business,
you might want to include the company’s name and
specialization in the title.
Body
● <BODY> and </BODY> - the body of a document comes
after the header of a document.
● The visible content that makes up your Web page,
including paragraphs, lists, tables, and images, lives in
the body of your HTML document.
Metadata
● Metadata means “data about data.” On a Web page,
metadata can include author information, the type of
editor used to create the page, a description of the
content, relevant keywords, and copyright information.
● Search engines often use metadata when trying to
categorize a page.
● You place metadata inside the document header.
Exploring Web
browsers
Exploring Web browsers
● Web browser is a software that can retrieve HTML
documents from the web, parse the HTML instructions,
and display the resulting web pages.
● You can also use a browser to display HTML documents
you save locally on your computer.
● When coding your HTML, you can use a Web browser to
test your work.
A browser to display the content of your
website
Exploring HTML Editors
● Because HTML documents are plain-text documents, you
can use any text-editing program to code HTML and
create a Web page.
● You can also use a variety of Web-specific coding
environments that will write your HTML code, validate it,
and upload it to a Web server.
● Example: Notepad or Notepad++, Adobe Dreamweaver,
and Word processing programs
Viewing HTML Code
in a Browser
● You can view the HTML code for any web page that you
have loaded into your web browser.
● Viewing HTML from different web sites is a good way to
learn how to write your own code and you can generate
new ideas for your own pages.
● You can also save a web page locally for you to use as a
template or for you to study later.
View HTML Code in a Browser
1. Open a web page in your browser window
2. Right-click on the page, select and click View Page
Source
3. Click the Close button when finished
Writing HTML
Writing HTML tags
Writing HTML tags
Writing HTML tags
Starting an HTML
Start an HTML Document
1. Lunch Notepad++, or Notepad
2. Type <HTML> then press Enter ( this tag declares the document as HTML)
3. Type <HEAD> then press Enter ( this tag defines where the title, metadata, and
other descriptive information appear)
4. Type <TITLE>
5. Type the title text for your page ( title text describes the contents of the page and
appears in the title bar of the web browser)
6. Type </TITLE> then press Enter
Start an HTML Document
7. Type <BODY> then press Enter (this tag marks the beginning of the actual
content of your web page)
8. Type the body text you want to appear on the page then
press Enter after the last text.
9. Type the </BODY> the press Enter
10. Type </HTML> (this tag ends the HTML code of your document)
Saving an HTML
Document
Save an HTML Document
1. Click File
2. Click Save As
3. Click the Save in Drop down box and navigate to the folder or drive
where you want to store or save the file
4. Click Save as type drop down box and select Text document as
your type
5. Type a name for the file, followed by .html or .htm extentsion
6. Click Save
Previewing it in a
Browser
View an HTML Page
1. Open your web browser
2. Click Open File
3. Click the Drop down box to navigate to the folder or drive in which
your HTML documents ins stored
4. Click the Filename
5. Click Open
6. In the Open dialog box, click OK
Adding Metadata
View an HTML Page
● You can add metadata to your page to include descriptive
information that does not appear in the browser.
● Metadata can include a page description, author and copyright
information, keywords, and more.
● What you insert in metadata tags can help search engines
categorize your page.
● You can define metadata in the document headers using the
<META> tag
Add an Author Name
1. Click between the <HEAD> and </HEAD> tag and press Enter to
start a new line
2. The metadata appears below the <TITLE>
3. Type <META NAME=“author” followed by a space
4. Type CONTENT=“My name”>, replacing My name with your name
or company name
5. Press Enter
Add Page Description
1. Type <META NAME=“description” and blank space
2. Type CONTENT=“description”>, replacing description with your
own page description
3. Press Enter
Specify Keywords
1. Type <META NAME=“keywords” and a space
2. Type CONTENT=“Mykeywords”>, replacing Mykeywords with a
keywords
3. For multiple keywords, use a comma followed by a space to
separate the keywords
4. Press Enter
Add a Copyright
1. Type <META NAME=“copyright”, and a space
2. Type CONTENT=“2010”>, replacing 2010 with your own numbers
or copyright information
3. Press Enter
4. Metadata is now part of the HTML document
SUMMARY IN CREATING AN HTML WEB PAGE
1. Open Notepad or Notepad++ on your laptop or computer.
2. Type the HTML code in Notepad.
3. Save your HTML document.
4. Create a filename for your HTML document.
5. And don’t forget to put the .html extension after the filename (ex. Mywebsite.html).
6. Save the HTML file to your preferred location.
7. Go to the location where you saved your HTML document.
8. Right-click or double-click your file so that it will be opened in a browser.
Promote
honest work
by
discouraging
Integrated Values in plagiarism in
coding
Today’s Lesson: projects. Instill
the value of
originality and
“Integrity and Honesty” sincerity in
digital
creation.
It’s Your Turn to try!
Directions: Create a simple web page that promotes values. The
title of your page should be “Why Honesty Matters”. You can use
the basic html tags below:
<!DOCTYPE html>
<title></title>
<html></html>
<body></body>
<h1></h1>
<p></p>
<head></head>
