Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
51 views

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
Available Formats
Download as PPSX, PDF, TXT or read online on Scribd
51 views

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
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