Escolar Documentos
Profissional Documentos
Cultura Documentos
HTML
HTML is a plain-text file that can be created using a text
editor like Notepad.
o HTML stands for Hypertext Mark-up Language
o When creating HTML files for the web, make sure you
save them as .html or they wont work.
o HTML elements are the building blocks of HTML pages
And also elements are represented by tags
o Define tags <html><body> <head>.etc
o Allow to embed other scripting languages to
manipulate design layout, text and graphics
2
HTML
The <!DOCTYPE html> declaration defines this document
to be HTML5
3
HTML (Hypertext Markup
Language)
Example HTML code:
<HTML>
<head>
<title>Hello World</title>
</head>
<body bgcolor = #000000>
<font color = #ffffff>
<H1>Hello World</H1>
</font>
</body>
</HTML>
4
HTML
Common features
Tables
Frame
Form
Color
Links
Paragraphs
Attributes
Image map
Character Set
Meta tags
Images, Hyperlink, etc
5
HTML Elements
An HTML element usually consists of a start tag
and end tag, with the content inserted in between:
<tagname>Content goes here...</tagname>
The HTML element is everything from the start tag to the
end tag:
<p>My first paragraph.</p>
6
Example
<html>
<body>
</body>
</html>
7
HTML Attributes
Size Attributes
HTML images are defined with the <img> tag.
The filename of the source (src), and the size of the image
(width and height) are all provided as attributes:
Title Attribute
It is added to the <p> element. The value of the title attribute will be
displayed as a tooltip when you mouse over the paragraph:
<p title="I'm a tooltip">
This is a paragraph.
</p>
Href Attribute
HTML links are defined with the <a> tag. The link address is specified in
the href attribute:
8
HTML Headings
Headings are defined with the <h1> to
<h6> tags.
<h1> defines the most important heading.
<h6> defines the least important heading.
Example:
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
9
HTML Style
Setting the style of an HTML element, can be
done with the style attribute.
The HTML style attribute has the
following syntax:
<tagname style="property:value;">
Example:
I am Red
I am Blue
I am Big
10
HTML Background Color
The background-color property defines the
background color for an HTML element.
This example sets the background color for a
page to powderblue:
Example
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
11
HTML Text Color & Fonts
The color property defines the text color for an HTML
element:
Example
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
12
HTML Text Size & Alignments
The font-size property defines the text size for an HTML
element:
Example
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
13
HTML Text Formatting
Text formatting tags modify the text between the
opening tag and the closing tag
Example
<b>Hello</b> makes Hello bold
<b></b> bold
<i></i> italicized
<u></u> underlined
<sup></sup> Samplesuperscript
<sub></sub> Samplesubscript
<strong></strong> strong
<em></em> emphasized
<pre></pre> Preformatted text
<blockquote></blockquote> Quoted text block
<del></del> Deleted text strike through
14
HTML Images
In HTML, images are defined with the <img> tag. The
<img> tag is empty, it contains attributes only, and does
not have a closing tag.
The src attribute specifies the URL (web address) of
the image:
15
HTML Images
Example
<!DOCTYPE html>
<html>
<head>
<style>
img {
width:100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5
Icon" style="width:128px;height:128px;">
<img src="html5.gif" alt="HTML5
Icon" width="128" height="128">
</body>
</html>
16
Reference
http://www.w3schools.com/html
17