G11 Lesson 1 PART2 BASIC HTML

Web Development
HTML5, JavaScript CSS3

Grade 11
Presented by: Chen, LPT

MIT-Cyber Security
Objectives:
➢ Create a Web page using HTML.

➢ Use different tags and text enhancement.
➢ Apply backgrounds in Web page.
➢ Link a Web page to other external pages.
Plan your Web Project
Having a good plan will help you to build a web site. First question to keep in mind is
“Why are you building a Website?”
Companies build Web sites in order to promote their products and service. Other companies
build web site to automate the transaction with their clients through Internet.
Example of automated services like

Online Banking
Reservation
Shopping
Travel Booking
Constructing Web Page
In this lesson you will learn how to create a Web page. You will learn the
basic structure of Web page, and different tags.
Tag
Tag is generally a pair of angle brackets that contain <!DOCTYPE html>
one or more letters or numbers. <html>
<head>
An HTML page is specified with an <html> </html> <title>Page Title</title>
tag pair. Same also with the other tag like head, title and body. </head>
<body>
The title is a label for your web page since it is the only text visible
when the browser window is minimized. <h1>This is a Heading</h1>
<p>This is a paragraph.</p>
The content of the Web page are coded inside the <body> </body>.
</body>
</html>
HTML Paragraphs , Headings and <!DOCTYPE html>
Horizontal Rules <html>
<head>
<title>Page Title</title>
</head>
The HTML <p> element defines a paragraph. <body>
A paragraph always starts on a new line, and <h1>Heading 1</h1>

browsers automatically add some white space <h2>Heading 2</h2>
(a margin) before and after a paragraph. <h3>Heading 3</h3>
<h4>Heading 4</h4>
HTML headings are defined with the <h1> to </h6> <h5>Heading 5</h5>
<h6>Heading 6</h6>
<hr>
<p>This is a paragraph.</p>
</body>
</html>
HTML Formatting Elements
Using the tags below, you can have more control over how the text will display in web browser.
<b> </b> Bold text

<strong> </strong> Important text
<i> </i> Italic
<em> </em> emphasize
<mark> </mark> Marked text
<small> </small> Small text
<del> </del> Deleted text
<ins> </ins> Inserted text
<sub> </sub> Subscript text
<sup> </sup> Superscript text
<br> Line break tag
Exercise 1
Filename: exercise1.html
<!DOCTYPE html>
<html>
<head>
<title>
My Autobiography
</title>
</head>
<body>
<h1> My Autobiography </h1>
<em>Joana B. Dela Cruz</em>
<p> I am Joana C. Dela Cruz, I was born on April 30, 2002 at Bolosan District,
Dagupan City. We are five siblings in the family. I am the eldest daughter of Mr.
Benjamin V. Dela Cruz and Mrs. Adelfa B. Dela Cruz. My parents are both from Urdaneta City.
I took my elementary education at Judge Jose De Venecia Elementary School located
at Dagupan City. My dream is to become a web developer. I am presently enrolled in SHS Grade 11 major
in ICT Programming at Mangaldan National High School.</p>
</body>
</html>
Output should look like this.
Name: _________________ Grade: ___________ Section: _________ Date: _________
Activity # 1
Create a Web page with file name “activityOne.html”. It must be displayed as exactly as the output below.
HTML Attributes
An HTML attribute provides additional information about an HTML element.
Attributes modify or add meaning to an HTML element. In general, an attribute is a characteristic
of a page element, such as font size or color. When a Web browser interprets an HTML tag, it will also look for
its attributes so that it can display the desired Web page's elements properly.
<tag attribute-name="attribute-value">Some content...</tag>

HTML Style Attributes
Syntax
<tag style="property:value;">Some content...</tag>
Example
<body style="background-color:blue;">
<p style="color:red;">This is a paragraph.</p>
</body>
HTML Style Attributes
Syntax
Example
<h1 style="font-family:verdana;">This is a heading</h1>

<p style="font-size:160%;">This is a paragraph.</p>
</body>
Text alignment value
HTML Style Attributes text-align: right;

text-align: left;
text-align: justify;
Syntax
Example
<h1 style="text-align:center;">Centered Heading</h1>

<p style="text-align:center;">Centered paragraph.</p>
</body>
HTML Images
Syntax
<img src=“image.jpeg”>
Example
Exercise 2
<!DOCTYPE html>
<html>
<head>
<title>
My Autobiography
</title>
</head>
<body>
<h1 style="color:green; text-align:center">My Autobiography</h1>
<p> I am <b>Joana C. Dela Cruz</b>, I was born on April 30, 2002 at Bolosan District,
Dagupan City. We are five siblings in the family. I am the eldest daughter of <b><i>Mr.
Benjamin V. Dela Cruz</i></b> and <b><i>Mrs. Adelfa B. Dela Cruz</i></b>. My parents are both from Urdaneta City.
at Dagupan City. My dream is to become a <b>web developer</b>. I am presently enrolled in SHS Grade 11 major
</body>
</html>
Exercise 3
<!DOCTYPE html>
<html>
<head>
<title>
My Autobiography
</title>
</head>
<body style=“background-color:yellow; text-align:justify”>
<h1 style="color:green; text-align:center">My Autobiography</h1>
<p> I am <b>Joana C. Dela Cruz</b>, I was born on April 30, 2002 at Bolosan District,
Dagupan City. We are five siblings in the family. I am the eldest daughter of <b><i>Mr.
Benjamin V. Dela Cruz</i></b> and <b><i>Mrs. Adelfa B. Dela Cruz</i></b>. My parents are both from Urdaneta City.
at Dagupan City. My dream is to become a <b>web developer</b>. I am presently enrolled in SHS Grade 11 major
</body>
</html>
Name: _________________ Grade: ___________ Section: _________ Date: _________
Activity # 2
Create a Web page with file name “activityTwo.html”. Follow the specified format below.
1. HTML Hyperlink, internal and external
2. List Ordered and Unordered List
3. Tables
4. HTML Forms
5. Canvass
6. Media

G11 Lesson 1 PART2 BASIC HTML

Uploaded by

Copyright:

Available Formats

G11 Lesson 1 PART2 BASIC HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

G11 Lesson 1 PART2 BASIC HTML

Uploaded by

Copyright:

Available Formats

Web Development

HTML5, JavaScript CSS3

Presented by: Chen, LPT

➢ Create a Web page using HTML.

Example of automated services like

A paragraph always starts on a new line, and <h1>Heading 1</h1>

<b> </b> Bold text

<tag attribute-name="attribute-value">Some content...</tag>

<p style="color:red;">This is a paragraph.</p>

<h1 style="font-family:verdana;">This is a heading</h1>

HTML Style Attributes text-align: right;

<h1 style="text-align:center;">Centered Heading</h1>

You might also like