HTM Lesson and Activity
Activity 1: My First HTML
REMEMBERS THIS:
Basic Construction of an HTML Page
These tags should be placed underneath each other at the top of every HTML page that you create.
<!DOCTYPE html> — This tag specifies the language you will write on the page. In this case, the
language is HTML 5.
<html> — This tag signals that from here on we are going to write in HTML code.
<head> — This is where all the metadata for the page goes — stuff mostly meant for search engines and
other computer programs.
<body> — This is where the content of the page goes.
The NOTEPAD Window:
Notepad
The first notepad in windwos contains elements which are the same with any document windows such
as Word. The element s of a Notepad window are :
8. Text Area
Notepad++
Notepad++ is a free (as in “free speech” and also as in “free beer”) source code editor and Notepad
replacement that supports several languages. Running in the MS Windows environment.
Based on the powerful editing component Scintilla, Notepad++ is written in C++ and uses pure Win32
API and STL which ensures a higher execution speed and smaller program size. By optimizing as many
routines as possible without losing user friendliness, Notepad++ is trying to reduce the world carbon
dioxide emissions. When using less CPU power, the PC can throttle down and reduce power
consumption, resulting in a greener environment.
[SorSUmelestrellado] Page 1
HTM Lesson and Activity
Structuring an HTML Page
Every HTML Page should have the following structure:
Add the <html> Tag Pair – the <html> tag identify the document as an HTML document. The
whole HTML file is enclosed in <html> </html>. Evey Web page should begin and end with these
tags.
Add the <head> Tag Pair – the <head> tag encloses heading information sich as page title,
indexing information, date created and other information by the author. The information typed
within these tags will not appear on the heading.
Add the <title> Tag Pair – Whatever you type within the <title> tags will appear in the title bar at
the top of the browser. Search engines use the information found in the title to help identify the
page content.
Add the <body> Tag Pair – write the contents of web page within the <body> tags. The
information you type here will appear on your Web Page.
Creating HTML Tags and Attributes
HTML code or source code is comprised of a series of commands called tags. In order to
produce a Web page, you have to make a complete and accurate set of HTML code. When a Web
browser is sent a file containing HTML code, instead of displaying the code, the browsers interprets the
commands inside the file and shows the formatted text and graphics on the Web Page.
The attribute is the color, size, character and other information of the elements in the tag; they
are reflected on the beginning tag but not on the closing tag. They are enclosed in quotes. A tag can be
more that an attributes.
Example:
Result:
As seen above, each tag has a beginning tag and an end tag: <html> </html> <body></body>
[SorSUmelestrellado] Page 2
HTM Lesson and Activity
CREATE THE FOLLOWING:
Activity 2A: Follow the simple activity as shown in the video.
Activity 2B: Create your own Activity (FOLLOW THE INSTRUCTIONS BELOW) using Notepad or
Notepad++ and show the result in MS Edge ( or you can make use of any application available for the
gadget/cp. Screenshot the page and send it to my email: [email protected]
Open the Notepad Program
Type <html> on the first line.
On the second line type the <head> tag
Type your title in between the <title> and </title> tags.
Type the </html> to end the HTML document.
Save your file.
Then view the result using Microsoft Edge or any available web browser.
Send to my email.
Activity 3: Create your own web page design, any buttons, any topics will do: Example, website for
selling an item, website for advertisement..etc
This is how your average HTML page
Further Tags
Inside the <head> tag, there is one tag that is always included: <title>, but there are others that are just
as important:
<title>
This is where we insert the page name as it will appear at the top of the browser window or
tab.
<meta>
This is where information about the document is stored: character encoding, name (page
context), description.
Let’s try out a basic <head> section:
<head>
<title>My First Webpage</title>
<meta charset="UTF-8">
[SorSUmelestrellado] Page 3
HTM Lesson and Activity
<meta name="description" content="This field contains information about your page. It is usu
ally around two sentences long.">.
<meta name="author" content="Type your name here">
</header>
Adding Content
Next, we will make <body> tag.
The HTML <body> is where we add the content which is designed for viewing by human eyes.
This includes text, images, tables, forms and everything else that we see on the internet each
day.
How to Add HTML Headings To Your Web Page
In HTML, headings are written in the following elements:
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
As you might have guessed <h1> and <h2> should be used for the most important titles, while
the remaining tags should be used for sub-headings and less important text.
<h2> defines level-two headers such as section headers, <h3> level-three sub-headers, and so
on, down to <h6>.
<h1>Big and Important Header</h1>
<h2>Slightly Less Big Header</h2>
<h3>Sub-Header</h3>
Result:
Sample Heading
Let’s try it out. On a new line in the HTML editor, type:
<h1>Welcome to My Page</h1>
And hit save. We will save this file as “index.html” in a new folder called “my webpage.”
[SorSUmelestrellado] Page 4
HTM Lesson and Activity
How To Add Text In HTML
Adding text to our HTML page is simple using an element opened with the tag <p> which creates a new
paragraph. We place all of our regular text inside the element <p>.
When we write text in HTML, we also have a number of other elements we can use to control the text
or make it appear in a certain way.
Other Key Elements
They are as follows:
Element Meaning Purpose
<b> Bold Highlight important information
<strong> Strong Similarly to bold, to highlight key text
<i> Italic To denote text
<em> Emphasised Text Usually used as image captions
<mark> Marked Text Highlight the background of the text
<small> Small Text To shrink the text
<strike> Striked Out Text To place a horizontal line across the text
<u> Underlined Text Used for links or text highlights
<ins> Inserted Text Displayed with an underline to show an inserted text
<sub> Subscript Text Typographical stylistic choice
<sup> Superscript Text Another typographical presentation style
These tags must be opened and closed around the text in question.
Try This: On a new line in the HTML editor, type the following HTML code:
<p>Welcome to <em>my</em> brand new website. This site will be my <strong>new<strong> home on
the web.</p>
Don’t forget to hit save and then refresh the page in your browser to see the results.
References:
https://tutorialsclass.com/exercise/create-webpage-in-html-using-notepad/
https://notepad-plus-plus.org/
https://www.searchenginejournal.com/html-tags-attributes-seo/389503/#close
https://stuyhsdesign.wordpress.com/basic-html/structure-html-document/
https://www.makeuseof.com/tag/simple-html-code-learn-minutes/
[SorSUmelestrellado] Page 5
