HTML

HTML 5
INTRODUCTION
WHAT THE FOLLOWING TERM MEAN:
Web server: a system on the internet

containing one or more web site
Web site: a collection of one or more web
pages
Web pages: single disk file with a single file
name
Home pages: first page in website
HTML-INTRODUCTION
With HTML you can create your own Web site.
HTML stands for Hyper Text Markup Language
HTML describes the structure of Web pages
using markup
HTML elements are the building blocks of
HTML pages
HTML elements are represented by tags
HTML tags label pieces of content such as
"heading", "paragraph", "table", and so on
Browsers do not display the HTML tags, but
use them to render the content of the page
HTML VERSIONS
Version Year
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014
WEB BROWSERS
Displays the document

Examples
Chrome, IE, Firefox, Safari
A SIMPLE HTML DOCUMENT
<!DOCTYPEhtml>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>

<p>My first paragraph.</p>
</body>
</html>
HTMLEDITORS
Write HTML Using Notepad or TextEdit

IDE can also be used
Example- Netbeans, Eclipse etc..
HTML TAGS
HTML tags are element names surrounded by

angle brackets:
<tagname>content goes here...</tagname>
comein pairslike <p> and </p>
start tagand end tag (with aforward
slash)
HTML tags are not case sensitive: <P> means
the same as <p>.
HTML PAGE STRUCTURE
HTMLBASIC EXAMPLES
<!DOCTYPEhtml>
<html>
<body>
<h1>My First Heading</h1>

<p>My first paragraph.</p>
</body>
</html>
HTML DOCUMENTS
All HTML documents must start with a

document type declaration:<!DOCTYPE
html>.
The HTML document itself begins
with<html>and ends with</html>.
The visible part of the HTML document is
between<body>and</body>.
HTML HEADINGS
HTML 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>
HTML PARAGRAPHS
HTML paragraphs are defined with

the<p>tag:
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<BR> TAG - INSERTING LINE BREAK
TODO write hello this is

a test to demo of line breakcontent
<HR> TAG - CREATING
HORIZONTAL LINE
<CENTER> TAG - CENTERING
THE CONTENT
HTML LINKS
HTML links are defined with the<a>tag:

Example
<a href="http://mcetonline.com/">This is a
link to college website</a>
HTML IMAGES
HTML images are defined with

the<img>tag.
The source file (src), alternative text (alt),
width, and height are provided as attributes:
Example
<img src="himage.jpg" alt="Mohandas
College" width="200" height="200>
EXERCISE
Make a link to open an image
HTMLATTRIBUTES
All HTML elements can haveattributes

Attributes provideadditional
informationabout an element
Attributes are always specified inthe start
tag
Attributes usually come in name/value pairs
like:name="value"
THE TITLE ATTRIBUTE
titleattribute is added to the<p>element.

The value of the title attribute will be
displayed as a tooltip when you mouse over
the paragraph:
Example
<ptitle="I'm a tooltip">
This is a paragraph.
</p>
THE HREF ATTRIBUTE
HTML links are defined with the<a>tag. The

link address is specified in thehrefattribute:
Example
<ahref=" http://mcetonline.com ">This is a
link</a>
SIZE ATTRIBUTES
HTML images are defined with
the<img>tag.
The filename of the source (src), and the
size of the image (widthandheight) are all
provided asattributes:
Example
<imgsrc=himage.jpg"width="104"height="1
42">
THE ALT ATTRIBUTE
Thealtattribute specifies an alternative text

to be used, when an image cannot be
displayed.
The value of the attribute can be read by
screen readers. This way, someone "listening"
to the webpage, e.g. a blind person, can
"hear" the element.
Example
<imgsrc=himage.jpg"alt=MCET"width="10
4"height="142">
HTMLSTYLES
Example
I am Red
I am Blue
I am Big
THE HTML STYLE ATTRIBUTE
The HTML style attribute has the

followingsyntax:
<tagname style="property:value;">
HTML BACKGROUND COLOR
Thebackground-colorproperty defines the

background color for an HTML element.
This example sets the background color for a
page to blue:
Example
<bodystyle="background-color:blue;">
<h1>This is a heading</h1>
</body>
HTMLCOLORS
n HTML, a color can be specified by using a

color name
Red
Orange
Yellow
Cyan
Blue
an RGB value, or a HEX value.
HTML supports140 standard color names.
HTML TEXT COLOR
Thecolorproperty defines the text color for

an HTML element:
Example
<h1style="color:blue;">This is a
heading</h1>
<pstyle="color:red;">This is a
paragraph.</p>
HTML FONTS
Thefont-familyproperty defines the font to

be used for an HTML element:
Example
<h1style="font-family:verdana;">This is a
heading</h1>
<pstyle="font-family:courier;">This is a
paragraph.</p>
HTML TEXT SIZE
Thefont-sizeproperty defines the text size

for an HTML element:
Example
<h1style="font-size:300%;">This is a
heading</h1>
<pstyle="font-size:160%;">This is a
paragraph.</p>
HTML TEXT ALIGNMENT
Thetext-alignproperty defines the

horizontal text alignment for an HTML
element:
Example
<h1style="text-align:center;">Centered
Heading</h1>
<pstyle="text-align:center;">Centered
paragraph.</p>
EXERCISE
Change the background color of your page to
black.
HTMLTEXT FORMATTING
Text Formatting
This text is bold
This text is italic
This issubscriptandsuperscript
HTML FORMATTING ELEMENTS
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Small text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text
EXAMPLE
<p>This text is normal.</p>
<p><b>This text is bold.</b></p>

HTML <I> AND <EM> ELEMENTS
The HTML <i> element defines italic text,

without any extra importance.
Example
<i>This text is italic</i>
The HTML<em>element
definesemphasizedtext, with added
semantic importance.
Example
<em>This text is emphasized</em>
HTML <SUB> ELEMENT
The HTML <sub> element defines subscripted

text.
Example
<p>This is <sub>subscripted</sub> text.</p>
HTMLQUOTATION AND CITATION ELEMENTS
HTML <q> for Short Quotations

Example
<p>WWF's goal is to:<q>Build a future where
people live in harmony with nature.</q></p>
HTML <blockquote> for Quotations
The HTML<blockquote>element defines a
section that is quoted from another source.
EXAMPLE
<p>Here is a quote from WWF's website:</p>

<blockquotecite="http://www.worldwildlife.
org/who/index.html">
For 50 years, WWF has been protecting the
future of nature.
The world's leading conservation
organization,
WWF works in 100 countries and is supported
by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>
HTML <ABBR> FOR ABBREVIATIONS
The HTML<abbr>element defines an

abbreviation or an acronym.
Example
<p>The<abbrtitle="World Health
Organization">WHO</abbr>was founded in
1948.</p>
HTML <ADDRESS> FOR CONTACT INFORMATION
Example
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
HTMLCOMPUTER CODE ELEMENTS
<!DOCTYPE html>
<html>
<body>
<p>Some programming code:</p>
<code>
var x = 5;<br>
var y = 6;<br>
document.getElementById("demo").innerHTML = x + y;
</code>
</body>
</html>
HTML <VAR> FOR VARIABLES
Example
Einstein
wrote:<var>E</var>=<var>m</var><var>c</
var><sup>2</sup>.
The HTML<kbd>element defines keyboard
input:
Example
<kbd>File | Open...</kbd>
HTML COMMENT TAGS
Example


HTMLSTYLES - CSS
Styling HTML with CSS

CSSstands forCascadingStyleSheets.
CSS can be added to HTML elements in 3 ways:
Inline- by using the style attribute in HTML elements
Internal- by using a <style> element in the <head>
section
External- by using an external CSS file
INLINE CSS
An inline CSS is used to apply a unique style

to a single HTML element.
An inline CSS uses the style attribute of an
HTML element.
This example sets the text color of the <h1>
element to blue:
Example
<h1style="color:blue;">This is a Blue
Heading</h1>
INTERNAL CSS
An internal CSS is used to define a style for a single HTML page.
An internal CSS is defined in the <head> section of an HTML page, within
a <style> element:
Example
<!DOCTYPEhtml>
<html>
<head>
<style>
body{background-color:powderblue;}
h1{color:blue;}
p{color:red;}
</style>
</head>
<body>
</body>
</html>
EXTERNAL CSS
An external style sheet is used to define the

style for many HTML pages.
With an external style sheet, you can
change the look of an entire web site, by
changing one file!
EXAMPLE
<!DOCTYPEhtml>
<html>
<head>
<linkrel="stylesheet"href="styles.css">
</head>
<body>
</body>
</html>
An external style sheet can be written in any text
editor. The file must not contain any HTML code,
and must be saved with a .css extension.
Here is how the "styles.css" looks:
body{
background-color:powderblue;
}
h1{
color:blue;
}
p{
color:red;
}
CSS FONTS
The CSScolorproperty defines the text color

to be used.
The CSSfont-familyproperty defines the
font to be used.
The CSSfont-sizeproperty defines the text
size to be used.
CSS BORDER
CSS Border
The CSSborderproperty defines a border
around an HTML element:
Example
p{
border:1px solid powderblue;
}
CSS PADDING
The CSSpaddingproperty defines a padding

(space) between the text and the border:
Example
p{
padding:30px;
}
CSS MARGIN
The CSSmarginproperty defines a margin

(space) outside the border:
Example
p{
margin:50px;
}
THE ID ATTRIBUTE
To define a specific style for one special

element, add an id attribute to the element:
<p id="p01">I am different.</p>
then define a style for the element with the
specific id:
Example
#p01{
color:blue;
}

HTML

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

HTML

Transféré par

Droits d'auteur :

Formats disponibles

HTML 5

Web server: a system on the internet

HTML 2.0 1995

HTML 3.2 1997

HTML 4.01 1999

Displays the document

<h1>My First Heading</h1>

Write HTML Using Notepad or TextEdit

HTML tags are element names surrounded by

<h1>My First Heading</h1>

All HTML documents must start with a

HTML headings are defined with

HTML paragraphs are defined with

TODO write hello this is

HTML links are defined with the<a>tag:

HTML images are defined with

All HTML elements can haveattributes

titleattribute is added to the<p>element.

HTML links are defined with the<a>tag. The

Thealtattribute specifies an alternative text

The HTML style attribute has the

Thebackground-colorproperty defines the

n HTML, a color can be specified by using a

Thecolorproperty defines the text color for

Thefont-familyproperty defines the font to

Thefont-sizeproperty defines the text size

Thetext-alignproperty defines the

<p><b>This text is bold.</b></p>

The HTML <i> element defines italic text,

The HTML <sub> element defines subscripted

HTML <q> for Short Quotations

<p>Here is a quote from WWF's website:</p>

The HTML<abbr>element defines an

<p>Some programming code:</p>

<!-- Remember to add more information here

Styling HTML with CSS

An inline CSS is used to apply a unique style

An external style sheet is used to define the

The CSScolorproperty defines the text color

The CSSpaddingproperty defines a padding

The CSSmarginproperty defines a margin

To define a specific style for one special

Vous aimerez peut-être aussi