INSTALLATION OF NOTEPAD+
Lesson 2: HTML
In this lesson we will learn how to code HTML, which is
the standard markup language used in creating web pages.
We will also be using Notepad++ as our HTML editor.
Objectives:
After studying this lesson, you
should be able to:
• use Notepad++;
• create an HTML document;
• and use essential HTML tags.
You do not need much in terms of specialized
software to start creating web pages. In fact, a
simple text editor such as Windows Notepad
can be used to code HTML. You can check your
progress and output using your web browser.
Specialized web development and design
software like Adobe Dreamweaver are
available and offer what-you-see-is-what-you-
get (WYSIWYG) HTML editing. However, for
this course we will be doing manual HTML
coding. This will give you a good grasp of what
HTML tags are and how they work.
Using Notepad++
While you can code HTML using Notepad, you can
benefit from a specialized text editor like Notepad+
+. The software has helpful features such as syntax
highlighting when working with programming,
scripting, and markup languages. Syntax
highlighting displays source code text in different
colors, allowing you to easily distinguish among
tags, content, and symbols. Notepad++ is free and
supports syntax highlighting for HTML and CSS.
The Notepad++ User Interface
Menu Bar Tool Bar
Document Working
Map Area
Save Zoom Out
Zoom In
Open
New
Basic
Operations
Creating a New
File
To create a new file, we can use three
methods:
1.Click File Menu > New
2.Use the Tool Bar > New File button
3.Press Ctrl+ N on the keyboard
Basic
Operations
Opening an Existing File
To open an existing file, we can use any
one of these methods:
1.Click File Menu > Open
2. Use the Tool Bar > Open File button
3. Press Ctrl+ O on the keyboard
Basic
Operations
Saving a File
To save the current document, choose any of
the following:
1. Click File Menu > Save
2. Use the Tool Bar > Save File button
3. Press Ctrl + S in the keyboard
Basic
Operations
Using Zoom In and Zoom Out
The size of display can be adjusted using
the zoom in and zoom out icon in the tool
bar.
Basic
Operations
Using Document Map
If your document becomes quite long, you
can use the document map button to navigate
your code easily.
Basic
Operations
Checking the Document in a Browser
If you want to see how your HTML document
will look like in a browser, you can s Run
in the menu and choose the browser of your
choice.
KEY BOARD SHORTCUTS
Notepad++ also supports keyboard shortcuts
HTML
HTML stands for
hypertext markup
language. It is used to
create web pages and s
responsible for their
content and structure.
HTML Tags
HTML Tags
Markup languages use tags to distinguish
elements within documents. These tags fell
browsers and other software how they
should process the content they contain.
HTM tags use angle brackets <>.
HTML Tags
Often, HTML tags come in pairs. An opening
tag <tag> and a closing tag </tag>
surround the element.
Take the paragraph tag, for example. All the
content that appear inside the <p> and </p>
tags are considered paragraph content.
Tags can also take in attributes. These
attributes modify the properties of tags.
Opening
Content Closing Tag
Tag
<h1 id=“title”>Save the whales
</h1> HTML
Element
Attribute
Value
Attribute
Name
Observe the following HTML code for a
basic document. It contains the essential
tags and content to create a simple web
page.
Document
will be
structure
d as:
Let’s find out the functions of the tags
used in the example
Try creating your first document. In
Notepad++, enter the following:
METADATA
HTML documents may contain metadata or
“data about data”. For web pages, this
data can be about a web page’s character
encoding, description, keywords, or the
author. These information's are found
within the <head> tags.
COMMENTS
Comments are portions of code meant to
be read by humans taking a look at your
code. In HTML, comments are designated
using the <!-- and -->tags. Anything that
appears in this tag will be ignored by the
browser when rendering your code.
Structuring Text
Content in HTML
You should structure your text content in a readable and
comprehensible way. Take a look at the web page below.
Can you make sense of the content easily?
HEADING
HEADING
One way to fix this is by using headings.
Heading tags are used to indicate that the
text is meant to serve as a title for the
page or a section of the page. They also
organize
content in terms of hierarchy. <h1> is used
for section titles and main headings. <h6>
is used for the least important heading.
• This is how it should look in the
browser:
PARAGRAPH
PARAGRAPH
The <p> tag will designate the
text content as paragraphs.
Each instance will display the text on a new
line as seen here:
LINE BREAKS
LINE BREAKS
You can insert line breaks within
the paragraph using <br> tag.
This is how it should look in the
browser.
Preformatted
Text
Preformatted Text
The browser will display the text enclosed in <pre> tags
as preformatted, including tabs, spaces and line breaks.
Preformatted Text
By default, the browser will also use a fixed-width
font like Courier New to display in the text
Text Formatting
You can use format portion of the text using these
tags
TAG FUNCTION EXAMPLE
<strong></ important important
strong>
<em></em> emphasis Emphasized
<del></del> deleted deleted
<sub></sub> subscript sub script
<sup></sup> superscript sub script
Text Formatting
You can use format portion of the text using these
tags
TAG FUNCTION EXAMPLE
<strong></ important important
strong>
<em></em> emphasis Emphasized
<del></del> deleted deleted
<sub></sub> subscript sub script
<sup></sup> superscript sub script
Text FormattingYou can use format portion of the text using the
TABLES
Tables
In HTML, you can also present information using
rows and columns. You need to use the table tag
to do this.
The entire table data must be enclosed using the
<table> tag.
Table rows are designated using <tr>.
Table headers are specified using <th> tag.
Table data or cells are identified using <td>.
Tables
Tables
This is how it should look in the browser
BORDER
Notice that this table does not have borders.
You can add border to make the table more
readable. Lets add the border attribute to the
<table> tag.
CELL PADDING
You may notice that the table looks bit tight. You
can also add some spacing around the cell
values by using the cellpadding attiribute to
the <table> tag.
Cellpadding attribute value
is in pixels. In this case, we
will be adding padding of
10 pixels around each cell
value. This is how should it
look in the browser:
CELL SPACING
You can also modify the spacing of the
cellspacing attribute. Let’s add the attribute
with the value of 20.
This is how should
it look in the
browser
OUTPUT TIME
