Scribd
Upload
67 views32 pages

Module 2 Creating Your First Web Page

This document provides an introduction to creating basic HTML web pages. It discusses HTML tags and structure, including the <html>, <head>, <body>, <title>, <p>, <h1-6>, <b>, <i>, <br>, and <hr> tags. It then gives instructions for writing and saving an HTML file, and provides examples of using various tags to format headings, paragraphs, lines, and horizontal rules in activities and a laboratory exercise to build a first web page.

Uploaded by

Just Me
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPSX, PDF, TXT or read online on Scribd
67 views32 pages

Module 2 Creating Your First Web Page

This document provides an introduction to creating basic HTML web pages. It discusses HTML tags and structure, including the <html>, <head>, <body>, <title>, <p>, <h1-6>, <b>, <i>, <br>, and <hr> tags. It then gives instructions for writing and saving an HTML file, and provides examples of using various tags to format headings, paragraphs, lines, and horizontal rules in activities and a laboratory exercise to build a first web page.

Uploaded by

Just Me
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPSX, PDF, TXT or read online on Scribd
You are on page 1/ 32

Module 2: Creating

Your First Web Page


Web Page
Structure
HTML Tags

• HTML tags are keywords (tag names)


surrounded by angle brackets like <html>.
• HTML tags normally come in pairs like <body> and
</body>
• The first tag in a pair is the start tag, the second
tag is the end tag.
• The end tag is written like the start tag, with a
slash (/) before the tag name.
HTML Tags
• Start and end tags are also called opening and
closing tags
• The element content is everything inserted
between the start and end tags.
• Some HTML tags have empty content (ex. <br /> or
<hr />
• Empty tags are closed in the start tag (ex. <br />)
Basic
HTML Tags
Basic HTML Tags
• The <!DOCTYPE html> declaration specifies the
version of HTML used (HTML5 in our case).
• The <html> and </html> elements are the root
elements of an HTML page. They indicate the start
and the end of the HTML document. These tags
are written after the <!DOCTYPE> declaration
• The <head> and </head> elements contain all
information about the html document. They are
written inside the <html> and </html> tags.
Basic HTML Tags
• The <title> and </title> elements specify the title
of the document. They are written inside the
<head> and the </head> tags.
• The <body> and </body> elements contain all the
visible content within the web page. They are
written after the <head> and </head> tags inside
the <html> and </html> tags.
Let’s try to
build our
first web
page
Writing and Saving an HTML File
• Open a Text Editor (Notepad) or Source Code
Editor (Sublime Text) program.
• Save the file as .html.
• Write your HTML codes
• Double click on the saved file, and it will be opened
in your default browser.
Additional
HTML Tags
Activity 1
The <br /> tag
• To direct the browser to move the content to the
start of a new line, we must use the <br /> or the
line-break tag.
Activity 1
Activity 2
The <p> and </p> tags
• The <p> and </p> or paragraph tags define a
paragraph in HTML.
• By using the paragraph tag pair, the browser
places the start of each paragraph on a new line
and separates each paragraph with a space.
Activity 2
Activity 3
The heading tag
• The heading tag defines a heading for a specific
section in a web page.
• The size of the heading can be adjusted by using
the different heading tags, <h1> to <h6>. <h1> will
provide the largest heading size and <h6> will
provide the smallest heading size.
Activity 3
The <b> and </b> tags
• The <b> and </b> or bold tags are used to display
specific text using a bold font.
• When the browser encounters a <b> tag, the
browser will start its use of a bold font to display
the page text. When the browser later encounters
the </b> tag, it will turn off bolding.
Activity 3
Activity 4
The <i> and </i> tags
• The <i> and </i> or italic tags are used to display
specific text using an italic font.
Activity 4
The <hr /> tag
• The <hr /> or the horizontal rule tag is used to
insert a horizontal line in the web page.
Activity 5
Laboratory
Exercise 1
Creating Your First Web Page
Instructions
• Using a Source Code Editor, create an HTML file
that will produce the same output as shown on the
next slide.
• Save the file as laboratory1.html
• The title should be “Laboratory 1”

You might also like