JONALYN G.
EBRON
HTML
Hypertext Mark Up Language
Course Overview
• With HTML you can create your own Web site.
• This lesson teaches you everything about HTML.
• HTML is easy to learn - You will enjoy it.
HTML
HTML Basic
Hypertext Mark Up Language
HTML Introduction
What is HTML?
HTML
What is HTML?
HTML is a language for describing web pages.
• HTML stands for Hyper Text Markup Language
• HTML is not a programming language, it is a
markup language
• A markup language is a set of markup tags
• HTML uses mark up tags to describe web pages
HTML
HTML Tags
HTML markup tags are usually called HTML
• HTML tags are keywords surrounded by angle
brackets like <html>
• HTML tags normally come in pairs like <b> and
</b>
• The first tag in a pair is the start tag, the
second tag is the end tag
• Start and end tags are also called opening tags
and closing tags
HTML
HTML Documents = Web Pages
• HTML documents describe web pages
• HTML documents contain HTML tags and plain text
• HTML documents are also called web pages
The purpose of a web browser (like Internet Explorer or
Firefox) is to read HTML documents and display them as
web pages. The browser does not display the HTML tags,
but uses the tags to interpret the content of the page.
HTML
HTML Documents = Web Pages
The purpose of a web browser
(like Internet Explorer or Firefox)
is to read HTML documents and
display them as web pages. The
browser does not display the
HTML tags, but uses the tags to
interpret the content of the page:
• html> and </html> describes the web page
• body> and </body> is the visible page content
• <h1> and </h1> is displayed as a heading
•<p> and </p> is displayed as a paragraph
HTML
HTML - Getting Started
heading
describes the Visible page
web page content
paragraph
You need any tools to learn HTML. Editing HTML
• HTML editor • Notepad
• Web server • Dreamweaver
• Web site • FrontPage
HTML
HTM or HTML Extension?
When you save an HTML file, you can use
either the .htm or the .html extension. We
use .htm in our examples. It is a habit from the
past, when the software only allowed three
letters in file extensions. With new software it
is perfectly safe to use .html.
HTML
HTML Headings
HTML headings are defined with the <h1> to <h6> tags
Tags Your result
Font size = 7, bold text
Font size = 6, bold text
Font size = 5, bold
Font size = 4, bold, italic
Font size = 3
Font size = 2, italics
Default size = 3
HTML
HTML Paragraphs
HTML paragraphs are defined with the <p> tag.
paragraph
HTML
HTML Links
HTML links are defined with the <a> tag.
links
HTML
HTML Images
HTML images are defined with the <img> tag.
Image
The name and the
size of the image
are provided as
attributes.
HTML
HTML Elements
HTML documents are defined by HTML elements.
An HTML element is everything from the
start tag to the end tag:
Start tag * Element content End tag *
<p> This is a paragraph </p>
<a href="[Link]" > This is a link </a>
<br> </br>
* The start tag is often called the opening tag. The end tag is often
called the closing tag.
HTML
HTML Element Syntax
•An HTML element starts with a start tag / opening tag
•An HTML element ends with an end tag / closing tag
•The element content is everything between the start
and the end tag
•Some HTML elements have empty content
•Empty elements are closed in the start tag
•Most HTML elements can have attributes
HTML
HTML Font
<html>
element <html>
<body>
<body>
element <p>This is my first paragraph</p>
</body>
<p>
element </html>
The example above contains 3 HTML elements.
HTML
HTML Font Tag
Font
size
Font
tags
Font
face
Font
color
HTML
HTML Advance
Hypertext Mark Up Language
HTML Layout
Using Tables
• HTML tables to format the layout of an HTML page.
• A part of this page is formatted with two columns.
• As you can see on this page, there is a left column
and a right column.
• An HTML <table> is used to divide a part of this
Web page into two columns.
• No matter how much text you add to this page,
it will stay inside its column borders.
HTML
HTML Tables
• Tables are defined with the <table> tag.
• It is divided into rows (<tr> tag), and each
row is divided into data cells <td> tag)
• <td> stands for "table data," which is the content
of a data cell.
• A data cell can contain text, images, lists,
paragraphs, forms, horizontal rules, tables, etc.
• Headings in a table are defined with the <th> tag.
HTML
HTML Layout
Everywhere on the Web you will find pages that are formatted like
newspaper pages using HTML columns.
borders
cellpadding
Table
Tags
width
HTML
HTML Table
Table border
Headings
Data cells
Rows tag
HTML
HTML Frame
Each HTML document is called a frame, and each frame is
independent of the others.
The Frameset Tag
•The <frameset> tag defines how to divide the
window into frames
•Each frameset defines a set of rows or columns
•The values of the rows/columns indicate the amount of
screen area each row/column will occupy
The Frame Tag
• The <frame> tag defines what HTML document to put into
each frame
HTML
HTML Frame
With frames, you can display more than one
Web page in the same browser window.
Frame
width
Frame
src
Frameset
cols
Vertical
HTML
HTML Frame
Frame
set Row
Frame
Src
Horizontal
HTML
HTML Scripts
Add scripts to HTML pages to make them more dynamic
and interactive. A script is defined with the <script> tag.
Script
tags
Note that you will
have to use the type
attribute to specify
the scripting
language.
HTML
HTML Attributes
HTML tags can have attributes. The special
attributes for each tag are listed under each
tag description. The attributes listed here are
the core and language attributes that are
standard for all tags (with a few exceptions):
HTML
HTML Attributes
Core Attributes
Not valid in base, head, html, meta, param, script, style,
and title elements.
Attribute Value Description
class class_rule or style_rule The class of the element
id id_name A unique id for the element
style style_definition An inline style definition
title tooltip_text A text to display in a tool tip
HTML
HTML Attributes
Language Attributes
Not valid in base, br, frame, frameset, hr,
iframe, param, and script elements.
Attribute Value Description
dir ltr | rtl Sets the text direction
lang language_code Sets the language code
HTML
HTML Attributes
Keyboard Attributes
Not valid in base, br, frame, frameset, hr,
iframe, param, and script elements.
Attribute Value Description
accesskey character Sets a keyboard
shortcut to access an
element
tabindex number Sets the tab order of
an element
HTML
HTML Form
HTML Forms are used to select different kinds of user
input.
Forms
• A form is an area that can contain form elements.
• Form elements are elements that allow the user
to enter information (like text fields, textarea fields,
drop-down menus, radio buttons, checkboxes,
etc.) in a form.
• A form is defined with the <form>
tag.
HTML
HTML Form
Input
•The most used form tag is the <input> tag.
•The type of input is specified with the type attribute.
•The most commonly used input types are explained
below.
HTML
HTML Form
Text Fields
Text fields are used when you want the user to type letters,
numbers, etc. in a form.
Radio Buttons
•The most commonly used input types are Text fields, when
you want the user to type letters, numbers, etc. in a form.
•The type of input is specified with the type attribute.
Check Box
Checkboxes are used when you want the user to select
one or more options of a limited number of choices.
HTML
HTML Form
HTML Forms are used to select different kinds of user input.
form
Input
type =
text
Input
type =
submit
HTML
HTML Form
Form
action
Input type
= text
Input type
= submit
Input type
= reset
HTML
