Lecture 2A HTML

1
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
The <html> element is the root element of an HTML page
The <head> element contains meta information about the

document
The <title> element specifies a title for the document
The <body> element contains the visible page content
The <h1> element defines a large heading
The <p> element defines a paragraph
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>
Start tag Element content End tag

<h1> My First Heading </h1>
<p> My first </p>
paragraph.
<br> Empty elements do not have an
end tag, such as the <br> element
(which indicates a line break).
6
Example
<html>
<body>
<h1>My First Heading</h1>

<p>My first paragraph.</p>
</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:
<img src="w3schools.jpg" width="104" height="142">
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:
<a href="http://www.w3schools.com">This is a link</a>
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>
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>
The font-family property defines the font to be used for

an HTML element:
Example
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">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>
The text-align property defines the horizontal text

alignment for an HTML element:
Example
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered 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:
<img src="url" alt="some_text" style="width:width;height:height;">
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
See for Tutorials and other Codes
17

Lecture 2A HTML

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Lecture 2A HTML

Caricato da

Copyright:

Formati disponibili

1

The <html> element is the root element of an HTML page

The <head> element contains meta information about the

The <title> element specifies a title for the document

The <body> element contains the visible page content

The <h1> element defines a large heading

The <p> element defines a paragraph

Start tag Element content End tag

<h1>My First Heading</h1>

<img src="w3schools.jpg" width="104" height="142">

<a href="http://www.w3schools.com">This is a link</a>

The font-family property defines the font to be used for

The text-align property defines the horizontal text

<img src="url" alt="some_text" style="width:width;height:height;">

See for Tutorials and other Codes

Potrebbero piacerti anche