Scribd
Upload
100 views

Web Pages and Structure

The document discusses creating and structuring basic HTML web pages. It explains how to create an HTML file using a text editor like Notepad, save it with a .html extension, and view it in a web browser. It identifies common HTML tags and elements and describes the typical structure of an HTML document, including the HTML declaration, head, and body sections. The document provides examples of basic HTML code and tags to help familiarize the reader with building a simple web page.

Uploaded by

Eunard Balbuena
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
100 views

Web Pages and Structure

The document discusses creating and structuring basic HTML web pages. It explains how to create an HTML file using a text editor like Notepad, save it with a .html extension, and view it in a web browser. It identifies common HTML tags and elements and describes the typical structure of an HTML document, including the HTML declaration, head, and body sections. The document provides examples of basic HTML code and tags to help familiarize the reader with building a simple web page.

Uploaded by

Eunard Balbuena
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 25

Web Pages and Structure

Learning objectives
At the end of this lesson, you should be able to:

 Use Notepad to create an HTML file


 Use HTML to create your first web page
 Preview your first web page
 Identify tags and elements
 Recognize HTML 5 structure;
 Create the most basic HTML 5 web page; and
 Familiarize yourself with the parts of an HTML.
Working with Web Page Files
To create an HTML file, you can use any
ordinary text editor like windows notepad.
Save the file with an extension of “html”
instead of the default “txt.”
Working with Web Page Files
Always be careful when saving your life
as it is possible to commit a mistake in
making your html file into “.html.txt”
It should be like this
Working with Web Page Files
Note:
When you make that mistake, the file will be
treated as a text file instead of an HTML file.
Such as this
 When a browser reads a text file, it
would display everything including
the codes and will not execute any
formatting.
 Shown on the next page is how it
looks like.
Look at this example
In contrast, browsers know how to read html files would
display the intended output.
Output would have formatting applied which is called
styles .
Codes and tags will be invisible
This is the sample

To view your web page, open your HTML codes.


Let’s Do It !
Open your editor and type the following HTML codes
Save your file as webcoding.html.

Open it using web browsers.


Spot the HTML Tags

<header>
<nav>
</nav>
</header>
<section>
<article>
<aside>
</aside>
</articles>
<article>
</article>
</section>
<footer> </footer>
HTML Structure
HTML, being mark-up language, uses markup
tags .
These are used to mark the beginning and end of
the element.
HTML Structure
<body bgcolor =“#fff000”></body>

Attribute Closing Tag

Opening tag Value


HTML documents are actually divided into
sections:

 The HTML declaration


 The head
 The body
<!DOCTYPE html>
First section
Is the HTML declaration.
A document type declaration that tells the
browser that this page is written in HTML5.
<!DOCTYPE html>
First section

<!DOCTYPE HTML PUBLIC”- //W3C//DTD


HTML4.01
Which do you think is simpler?
<!DOCTYPE HTML PUBLIC”- //W3C//DTD
HTML4.01
<The head>
Second section
 Defines the title of a web page and appears on the Title
bar .
<body>
Third section
 contains all the content of the HTML document displayed as
a web page.

You might also like