Lesson 1.1

Click to edit Master title style
Getting Started with

Hypertext Markup
Language
Prepared by: Ms. Joserie M. Mirabeles
1
At the end of the lesson, we should be able to:

• Identify the structure of a basic HTML document.
• Write an HTML document.
• Appreciate the basic processes in creating HTML
documents.
2 2
HTML
Click Editors
to edit Master title style
To write HTML documents.

Notepad – the default text editor
for Windows.
TextEdit – the default text editor
for Mac.
Notepad++ - a free source code
editor for use with Microsoft
Windows. Supports editing and
allow working with multiple
open files in a single window.
3 3
Notepad
Notepad++
4 4
Notepad++
Click Environment
TITLE BAR
MENU BAR
TAB
BAR
TOOL BAR
LINE
NUMBER
TEXT AREA
STATUSB 5 5
AR
Notepad++
Click Environment
To download Notepad++ v7.5.8 for free, go to

this website:
https://notepad-plusplus.org/download/
v7.5.8.html
6 6
Notepad++
Click Environment
1. Title Bar – shows the file name

and file type of the current file.
Also used to show the file
location.
2. Tab Bar – gives access to all open
files.
3. Line Number – identifies the
location of a line of codes.
4. Text Area – working space where
the codes are typed in.
7 7
HTML
Click Editors
5. Status Bar – identifies the location of the cursor.
6. Menu Bar – has the commands that can be used in Notepad+

+.
7. Tool Bar – contains commonly used commands when editing

a file.
8 8
Basic
Click Commands
1. Open a file
We can use the tab bar or the tool bar.
The newly opened file has its own tab bar.
9 9
Basic
Click Commands
2. Save a file
To save an HTML file, include the file type as we enter its file
name.
We can use the tab bar or the tool bar.
Or simply Ctrl + S. 1010

Basic
Click Commands
3. Run a file
To launch web pages, choose the run menu, then choose your
preferred browser.
Or simply press F5.

Note: We must save our work after applying changes to our codes
before we load or run our file in a web browser.
1111
Basic
Click Commands
4. Close a file
Choose the Close command from the File Menu.
Or simply click the Close button from its tab.
1212
Basic
Click Commands
5. Exit Notepad++
Exiting notepad++ only closes the program. This means that the
program is opened.
1313
HTML
File
HTML is a document that tells a computer how to display a
web page.
The document itself is a plain text file with a special tags or
codes.
The file name extension of an HTML file is .htm or .html
1414
Structure
A typical HTML document has the following structure:
1515
Structure
Document declaration tag:

<!DOCTYPE html> - not actually an HTML tag. It is an
instruction to the web browser about what version of HTML the
page is written.
It begins with <html> and ends with </html>
<head> and </head> tag contains the header information about
the document.
Between<body> and </body> tag is the visible content of the
HTML document.
1616
Elements and Tags
HTML codes like html, body, head are called elements.

Elements
The building blocks of web page that are represented by tags.
Has 2 tags: opening tag or starting tag and closing tag or end tag.
Tags
Often referred to as elements.
These tags are enclosed in angle brackets: <tag name>
Note: HTML tags are not case sensitive. However, w3c

recommended to use lowercase tags. 1717
Elements and Tags
Container tags – tags having their corresponding closing tags.

Example: <tagname> Content </tagname>
<body> Sample Text </body>
Tags Description
<!DOCTYPE html> It defines the document type and HTML version.
<body> It contains the web page content that will be displayed on the
browser window.
<head> It contains the document’s header information.
<html> It encloses the complete HTML document.
<title> It specifies a title for the document and displays it on the title
bar of the browser window. 1818
Elements and Tags
Remember:
1. The codes are indented.
Press the Tab key, not pressing the space bar four times.
2. The codes are not on one (1) line.
Difficult to figure out where the code ends and content begins.
3. The opening and closing tags of an element must be at the same
level.
Easy for us to see that we have closed code.
Help us differentiate between a code and a content.
1919
Attributes
Elements can contain attributes.
Attributes
Provide additional information about the content/s of an element.
The attributes should be added in the opening tag of the element.
It is made up on 2 parts: attribute name and value, separated by an equal sign
Syntax: <opening tag attribute name = “value”> Content </closing tag>
Example:
Bgcolor
It describes more about the body element.
Specifies the background color for the web page. 2020
Deprecated Tags and
Click to edit Master title style Attributes
Deprecated
Refers to tags and attributes that are not anymore recommended by
W3C to be used.
Been replaced by newer and better tags and attributes.
Future browser version may also stop supporting these deprecated
items.
Example:
Bgcolor attribute is a deprecated attribute. It can be replaced by using CSS.
Syntax: body{ background-color: pink; }
2121
Thank You 
22

Lesson 1.1

Uploaded by

Document Information

Original Description:

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

Lesson 1.1

Uploaded by

Copyright:

Available Formats

Click to edit Master title style

Getting Started with

At the end of the lesson, we should be able to:

To write HTML documents.

To download Notepad++ v7.5.8 for free, go to

1. Title Bar – shows the file name

5. Status Bar – identifies the location of the cursor.

6. Menu Bar – has the commands that can be used in Notepad+

7. Tool Bar – contains commonly used commands when editing

The newly opened file has its own tab bar.

We can use the tab bar or the tool bar.

Or simply Ctrl + S. 1010

Or simply press F5.

Or simply click the Close button from its tab.

A typical HTML document has the following structure:

Document declaration tag:

HTML codes like html, body, head are called elements.

Note: HTML tags are not case sensitive. However, w3c

Container tags – tags having their corresponding closing tags.

<!DOCTYPE html> It defines the document type and HTML version.

<head> It contains the document’s header information.

<html> It encloses the complete HTML document.

You might also like