0% found this document useful (0 votes)

61 views52 pages

(Hypertext Markup Language) : Mr. Roilan B. Bunyi

HTML is the central core on which all Web pages are built. It uses tags to direct how a page is displayed in a browser. Some key HTML tags include paragraph (), heading (<h1>), bold (), emphasis (), and strong (). Creating a basic web page involves writing HTML code in a simple text editor like Notepad, saving the file with a .html or .htm extension, and viewing it in a web browser.

Uploaded by

Cojbnaiwf

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PPT, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

61 views52 pages

(Hypertext Markup Language) : Mr. Roilan B. Bunyi

Uploaded by

Cojbnaiwf

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PPT, PDF, TXT or read online on Scribd

You are on page 1/ 52

HTML

(Hypertext Markup
Language)

Mr. Roilan B. Bunyi

INSTRUCTOR
COLLEGE OF INFORMATION TECHNOLOGY, ENTERTAINMENT AND
COMMUNICATION, UBLC
Hyper Text Markup Language

• Objectives
– Define HTML
– Get to know the HTML language.
– Identify the main purpose of World Wide Web.
– Familiarize with the different version of HTML.
About HTML
• HTML (Hyper Text Markup Language) and its more
recent incarnation,
– XHTML HTML
• and its more recent incarnation, XHTML
(Extensible Hyper Text Markup Language) is the
central core on which all Web pages are built.
• Although there are new types of technology and coding
options, including PHP, ASP, XML and others,
traditional markup language is the place where "all
things Web" starts.
Hypertext Mark-up Language

• is the main markup language for web pages.

HTML elements are the basic building-blocks
of WebPages.
• is not a procedural programming language
like C, Fortran, Cobol, or Pascal
• Is a markup language that is used to format
text and information
• Created by Tim Berners-Lee in 1993
Hypertext Mark-up Language

• Contain mark-up tags

• Tags direct how page is to be displayed by
browser
• Can be created from a simple text editor
• File extension “.htm” or “.html”
• At this time the latest version of HTML is called
"HTML5" and it is coming into use.
• Each browser update seems to incorporate
more HTML5 capabilities.
HTML Tags
• HTML markup tags are usually called HTML tags.
– HTML tags are keywords (tag names) surrounded
by angle brackets like <html>
– HTML tags normally come in pairs like and

– 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
– Start and end tags are also called opening
tags and closing tags
<tagname>content</tagname>
HTML Elements
• In HTML, most elements are written with a start tag
(e.g. ) and an end tag (e.g. ), with the
content in between:
This is a paragraph.
• Web Browsers
– The purpose of a web browser (such as Google
Chrome, Internet Explorer, Firefox, Safari) is to
read HTML documents and display them as web
pages.
– The browser does not display the HTML tags,
but uses the tags to determine how the content
of the HTML page is to be presented/displayed
to the user:
HTML Authoring Tools

• Objectives
– Enumerate the common HTML
authoring tools.
– Analyze the function editors and
converters to web page designing.
HTML Authoring Tools

• HTML Editors
– Writing HTML and XHTML code can be done
simple word processor.
• But it is important to note the average code write
should never use a processor such as Word,
WordPerfect, OpenOffice, or similar.
– These "high end" word processors are too
smart and will try to insert their own formatting
codes.
HTML Editors
 The best software to use is also the most basic.
 NotePad is a perfectly suitable tool for writing HTML.
 Some programs that are specifically designed to create
Web pages, such as
 Dreamweaver, have special HTML writing functions
that allow you to create straight code.
 There are also programs such as HTMLKit that function
as "code insertion" programs where the user doesn't
necessarily write the code, but rather instructs the program
to insert blocks of HTML or XHTML.
 Even though these programs make writing code
easier, it is still necessary to know the code.
HTML Editors
• Write HTML Using Notepad or TextEdit
– HTML can be edited by using a professional
HTML editor like:
• Adobe Dreamweaver
• Microsoft Expression Web
• CoffeeCup HTML Editor
– However, for learning HTML we recommend a
text editor like Notepad (PC) or TextEdit (Mac).
– We believe using a simple text editor is a good
way to learn HTML.
Creating a Web Page

• Objectives
– Create a simple web page using text editor.
– Understand the HTML template.
– Learn the basic HTML commands.
– Identify the different attributes of a BODY tag.
– Learn to use the proper way to write the BODY
tag.
– Familiarize with the attributes of body tags and
its uses.
Creating a Web Page
• Getting Started
– To get started with you Web project you need to
set up your site with the proper structure.
– Site structure is very simple. Your project has
• a "root folder" that contains all of the files
associated with the site.
– Inside the root folder (which, by the way,
can have any name you wish, it doesn't
have to be called "root") will be sub
folders for specific types of files.
Creating a Web Page

• While the HTML Web pages

will be "loose" in the root
folder, all the images will be in
an image folder, PDF files in a
PDF folder, and so on.
• The diagram on the right
illustrates a standard Web site
structure with three HTML
pages and two sub folders.
Step 1: Open Notepad

1. To open Notepad in Windows 7 or earlier:

2. Click Start (bottom left on your screen).
Click All Programs. Click Accessories.
Click Notepad.
3. To open Notepad in Windows 8 or later:
4. Open the Start Screen (the window symbol
at the bottom left on your screen).
Type Notepad.
Step 2: Write Some HTML
• Write or copy some HTML into Notepad.
<html>
<body>

<h1>My First Heading</h1>

My first paragraph.

</body>
</html>
Step 2: Write Some HTML
Step 3: Save the HTML Page

1. Save the file on your computer.

2. Select File -> Save as in the
Notepad menu.
3. When saving an HTML file, use
either the .htm or the .html file
extension. There is no difference, it
is entirely up to you.
Step 4: View HTML Page in
Your Browser

• Double-click your saved HTML file, and

the result will look much like this:
Creating a Web Page

• Once you have your site set up on your computer

with a root folder and the necessary sub folders you
can start to build your first Web page.
• This will probably be your home page. Unless
instructed otherwise, your home page will have one
of these names:
– index.htm
– index.html
– default.htm
– default.html
HTML Page Structure
• Below is a visualization of an HTML page
structure:
<html>
<body>
<h1>This a heading</h1>
This is a paragraph.
This is another paragraph.
</body>
</html>
Basic HTML Tags
• Structure of all HTML documents:
1. <html> “Here begins an HTML document.”
• The html element helps identify a file as an HTML
document.
2. <head> “Here begins the header.”
• The header contains elements that apply to the
overall document.
• For example, it might contain elements that are
designed for search engines to process or elements
that change the overall appearance of the webpage.
However, elements in the header do not display
directly as normal webpage content.
Basic HTML Tags
3. <title> “Here begins the document title.” (Must be in the
header)
– If you view the file simple.html in your browser, along
the top of your browser window you should see the
words, “A Simple Webpage”. These words appear
because of the title element.
• Titles might not seem important at first glance, but they’re
actually quite useful. For example, if a search engine
displays your page in a list of search results, it will
probably display the title as your page’s title. If you
omit the title element, the search engine will make up one
for you. This is Not a Good Thing.
Basic HTML Tags

4. <body> “Here begins the body.”

– The body is where you put text and
elements to be displayed in the main browser
window.
– The reason that the words “This is a simple
webpage” appear when you display
simple.html is because you placed them in the
body.
Add some text to your
web page!

Welcome to my Page!
I am _____________________.
A BS_______ from University of
Batangas.
And I love creating web pages! =)
BODY tag Attributes - 
• Adding and Formatting Text
• You will start by adding a
paragraph tag to the body of
your Web page. The code is
illustrated on the right.
• Paragraphs are one of the
elements that HTML is
designed to identify. Notice
that paragraphs are specified
with the p tag, .
• 
• 
• 
•

• These tags change the alignment of the

text inside your web page.
The Tree

I think that I shall never see,

a poem as lovely as a tree.
A tree whose hungry mouth is pressed
Against the Earth’s sweet flowing breast.
BODY tag Attributes -

• The closing part of a container tag always has

a forward leaning slash, /, to it.
– This slash is what tells the browser that the
use of the tag has ended and is closed.
• Let's format your text a little bit by adding
some simple bold to the first few words of the
paragraph.
BODY tag Attributes -

• The tag is used when you want to start a new

line, but don't want to start a new paragraph.
• The tag forces a line break wherever you place
it. It is similar to single spacing in a document.
• The tag has no closing tag.
Horizontal Rule - <hr>
• The <hr> element is used for horizontal rules that
act as dividers between sections, like this:
• The horizontal rule does not have a closing tag. It
takes attributes such as align and width. For
instance:
Try it Out!
Nesting Tags

• Nesting tags refers to the order in which the

opening and closing parts of tags appear
when multiple tags are applied to a single
segment of text or another object.
• For instance, a portion of text can be both bold
and in italics. Proper nesting of the strong and
emphasis tags would look like this:
This is bold and
italics
• The strong tag is on the "outside" while the emphasis
tag is on the "inside" and the text is in the middle.
• You could also make the tags nest thusly:
This is bold and italics

• Font sizes are specified 1 through 7 with 1 as the

smallest and 7 the largest.
• Size 3 is the default size. That is the size that is
"normal" for most browsers under most
circumstances.
• You can experiment with the font sizes by
changing the value using 1 through 7.
• Remember, actual font size will depend on many
factors, including the size of the monitor screen.
Advanced Text Formatting

• Another way to format text is by using color.

• Color can be specified by using names, such as
red, blue, or ForestGreen.
• They can also be defined using their RGB (Red,
Green, Blue) values. The most common way for
colors to be specified on the Web is by their
hexadecimal values.
• Examples of each method are below.
a. This is red specified as a
color name.
b. This is red specified
as an RGB value.
c. This is red specified in
hexadecimal.
Advanced Text Formatting
• Color and the Web
– Color plays an important part of Web page
design.
– It can be used for decorative purposes, such
as to make something look stylish or flashy, or
it can be used to indicate an action or
function.
– For instance, the links on these pages are
blue, and that makes them easier to identify.
Advanced Text Formatting
• Color can be applied to text, backgrounds, and
certain kinds of borders.
• It is important to understand both the benefits
and pitfalls that color can present. While a Web
page with a black background and gray letters
may look sophisticated, it will be difficult to read .
HTML COLORS
 Colors are displayed combining RED, GREEN, and
BLUE light.
 Color Values - CSS colors are defined using a
hexadecimal (hex) notation for the combination of
Red, Green, and Blue color values (RGB). The lowest
value that can be given to one of the light sources is 0
(hex 00). The highest value is 255 (hex FF).
 Hex values are written as 3 double digit numbers,
starting with a # sign.
HTML COLORS : COLOR EXAMPLES
Color Color HEX Color RGB
#000000 rgb(0,0,0)
#FF0000 rgb(255,0,0)
#00FF00 rgb(0,255,0)
#0000FF rgb(0,0,255)
#FFFF00 rgb(255,255,0)
#00FFFF rgb(0,255,255)
#FF00FF rgb(255,0,255)
#C0C0C0 rgb(192,192,192)
#FFFFFF rgb(255,255,255)
COLORS
 Some years ago, when computers supported max
256 different colors, a list of 216 "Web Safe Colors"
was suggested as a Web standard, reserving 40 fixed
system colors.
 This is not important now, since most computers can
display millions of different colors, but the choice is
left to you.
 Color Names Supported by All Browsers - 140 color
names are defined in the HTML and CSS color
specification (17 standard colors plus 123 more).
TEXT (FOREGROUND) COLOR

 Here’s how to change the text color:

'Good day, Little Red-Cap,' said he.


'Thank you kindly, wolf.'

BACKGROUND COLOR

 To change the background color of a

element, you just need to use a different
property in the style attribute: the
background property.
 If you apply the background to the body
element, this changes the background color
of the entire web page.
1 option
st

<html>
<head>
<title>A Simple Webpage</title>
</head>
<body bgcolor = “yellow">
This is a simple webpage.
And I mean really simple.
</body>
</html>
2ND OPTION
<html>
<head>
<title>A Simple Webpage</title>
</head>
<body style="background: yellow">
This is a simple webpage.
And I mean really simple.
</body>
</html>
CHANGING THE BACKGROUND &
COLOR
 Text and Background Color

There's a yellow rose in Texas, That I am
going to see, 
Nobody else could miss her, Not half as much as
me. 
She cried so when I left her, It like to broke my
heart, 
And if I ever find her, We nevermore will part.
 

HTML TIP: USE LOWERCASE TAGS