Scribd
Upload
4 views

CoursLangageHTML_ENGLISH

Uploaded by

amine mansouri
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
4 views

CoursLangageHTML_ENGLISH

Uploaded by

amine mansouri
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 53

HTML

Web Office
Module language

1
2

HTML
HTML (HyperText Markup Language): it
appeared in 1991 when the Web was
launched.
Its role is to manage and organize the
content. It is therefore in HTML that you
will write what must be displayed on the
page:
text, links, images… You will say for
example: “This is my title, this is my
menu, here is the main text of the page,
here is an image to display, etc. ".
3

basic structure
<HTML> <HEAD> ... </HEAD>
<BODY> ... </BODY> </HTML>
4

<HTML>
</HTML>
Between these two tags, two zones are
defined:
the header , specified by the <HEAD>
and </HEAD> commands,
as well as the body , delimited by:
<BODY> and </BODY>.
5

The header
We generally only put one piece of
information, the Title of the document
which will be displayed at the top of
the browser window
The Title is indicated between the tags
<TITLE> and </TITLE>
Example
<TITLE>This is the Title</TITLE>.
6

The body
We put the whole document to be
displayed (text, definition of images,
etc.)
Noticed:
 Note the existence of a comment tag, which
can be used anywhere in HTML documents,
defined as follows:
 <!-- This is a comment -->.
7

General structure of an
HTML page
<HTML>
<HEAD>
<TITLE>Document title</TITLE>
</HEAD>
<BODY> ... ... </BODY>
</HTML>
Summary
<HTML> This is the start of an HTML-like document.

</HTML> This is the end of an HTML-like document.


<HEAD> This is the start of the header area (prologue
to the actual document containing information
for the browser).

</HEAD> This is the end of the header area.


<TITLE> This is the start of the Page Title.
</TITLE> This is the end of the Page Title.
<BODY> This is the start of the actual document.

</BODY> This is the end of the document itself.


8
9

Text processing
Elementary tags
Colors
The titles
Special characters
Elementary tags
Bold [Bold] <B>...</B> Beginning and
end of zone in
bold
Italics [italic] <I>...</I> Beginning and
end of zone in
italics
Character size [Font size] <FONT Start and end of
SIZE=?>...</FONT> zone with this
size

character [Font color] <FONT COLOR="#$$$$$ Start and end of


color $"></FONT> zone in color

New line [Line break] <BR> Go to the line


Comments [Comments] <!-- *** --> Do not display
Paragraph [Paragraph] <p> Start of a new
paragraph
Centering [Center] <CENTER></CENTER> Center
10
1
1

Example1
<HTML>
<HEAD>
<TITLE> Document title</TITLE>
</HEAD>
<BODY> plain text<BR>
<B>bold text</B><BR>
<STRONG>bold text</STRONG><BR>
<I>text in italics</I><BR>
<EM>text in italics</EM><BR>
<B><I>bold and italic text</I></B><BR>
<FONT SIZE=5>text</FONT>
<FONT COLOR="#0000FF">in blue</FONT>
<!--It's over-->
</BODY>
</HTML>
1
2

Noticed
Itis not uncommon to use several tags
for the same text element. Care must be
taken to nest them well. So <B><I> ...
</I></B> is fine and <B><I> ...
</B></I> might get you in trouble.
The size in <FONT SIZE=?> can be
specified with a number from 1 to 7. The
default value is 3
1
3

Colors in HTML
Each color element (Red, Green or Blue)
is coded in HTML on 8 bit in hexadecimal,
i.e. from 00 to FF (from 0 to 255) Thus FF
for red, FF for Green and FF for Blue, gives
White
Some basic color codes
Blue #0000FF
Green #00FF00
White #FFFFFF
Purple #8000FF
Red #FF0000
YELLOW #FFFF00
Black #000000

14
1
5

Example 2
<HTML>
<HEAD>
<TITLE> Document title </TITLE>
</HEAD>
<BODY>plain text<BR>
<B>bold text</B><BR>
<STRONG>bold text</STRONG><BR>
<I>text in italics</I><BR>
<EM>text in italics</EM><BR>
<B><I>bold and italic text</I></B><BR>
<FONT SIZE=5>text</FONT>
<FONT COLOR="#0000FF">in blue</FONT><BR>
<FONT COLOR="#00FF00">in Green</FONT><BR>
<FONT COLOR="#FFFFFF">in white</FONT><BR>
<FONT COLOR="#8000FF">in purple</FONT><BR>
<FONT COLOR="#FF0000">in red</FONT><BR>
<FONT COLOR="#FFFF00">in yellow</FONT><BR>
<FONT COLOR="#000000">in black</FONT><BR>
</BODY>
</HTML>
1
6

The titles
To give a size to the characters of a title
in a text with a line break at the end, use
the tag <Hn></Hn>
Where n can take a value between 1 and
6 (in descending order of size)
1
7

Example 3
<HTML>
<HEAD>
<TITLE> Document title</TITLE>
</HEAD>
<BODY>plain text<BR>
<B><I><H1>bold and italic text and
H1</H1></I></B>
<B><I><H2>bold and italic text and
H2</H2></I></B>
<B><I><H3>bold and italic text and
H3</H3></I></B>
<B><I><H4>bold and italic text and
H4</H4></I></B>
<B><I><H5>bold and italic text and
H5</H5></I></B>
<B><I><H6>bold and italic text and
H6</H6></I></B>
</BODY>
</HTML>
1
8

Special characters
Browsers do not recognize special
characters. Fortunately, each character
has an abbreviation (ENTITY) allowing it to
be coded.
Here is some example
Space &nbsp;

© &copy;

< &lt;

> &gt;

É &eacute;

È &egrave;

19
2
0

Lists
numbered lists
bulleted lists
2
1

numbered lists
A numbered list is delimited by the <OL>
and </OL> tags between which each
element of the list is preceded by the
<LI> tag .
2
2

Example 4
<HTML>
<HEAD>
<TITLE> Document title
</TITLE>
</HEAD>
<BODY>plain text<BR>
<OL>
<LI> element 1,
<LI> element 2,
<LI> element 3.
</OL>
</BODY>
</HTML>
2
3

bulleted lists
An unnumbered list is delimited by the
<UL> and </UL> tags between which
each element of the list is preceded by
the <LI> tag .
2
4

Example 5
<HTML>
<HEAD>
<TITLE> Document title
</TITLE>
</HEAD>
<BODY>plain text<BR>
<UL>
<LI> element 1,
<LI> element 2,
<LI> element 3.
</UL>
</BODY>
</HTML>
2
5

Noticed
Notethat it is possible to nest lists of the
same type or of different types
2
6

Example 6
<HTML>
<HEAD>
<TITLE> Document title
</TITLE>
</HEAD>
<BODY>plain text<BR>
<UL>
<LI> element 1,
<OL>
<LI>sub-element 1A,
<LI>sub-element 1B.
</OL>
<LI> element 2,
<OL>
<LI>sub-element 2A,
<LI>sub-element 2B.
</OL>
<LI> element 3.
</UL>
</BODY>
</HTML>
2
7

List of definitions
Itis possible to define special lists,
allowing to make glossaries, by using the
tags <DL> and </DL> to frame the list,
<DT> to specify an element and <DD>
to indicate its definition.
2
8

Example 7
<HTML>
<HEAD>
<TITLE> Document title
</TITLE>
</HEAD>
<BODY>plain text<BR>
<DL>
<DT>HTML<DD>HyperText Markup language
<DT>HTTP<DD>HyperText Transfer Protocol
</DL>
</BODY>
</HTML>
Attributes
Type="type" UL & OL Specifies the
appearance of element
markers
Start="number" OL starts numbering at the
specified value.

Value="number" LI specifies the number of


the item.

29
Type of lists
<UL type="disc"> Full round chips
<UL type="circle"> hollow round chips
<UL type="square"> Square chips
<OL type=1> (1,2,3)
<OL type=a> (a,b,c)
<OL type=A> (A,B,C)
<OL type=i> (i,ii,iii)
<OL type=I> (I,II,III)
30
3
1

Example 8
<HTML>
<HEAD>
<TITLE> Document title
</TITLE>
</HEAD>
<BODY>plain text<BR>
<OL Type=a>
<LI> element 1,
<LI> element 2,
<LI> element 3.
</OL>
</BODY>
</HTML>
3
2

Example 9
<HTML>
<HEAD>
<TITLE> Document title
</TITLE>
</HEAD>
<BODY>plain text<BR>
<UL Type=circle>
<LI> element 1,
<LI> element 2,
<LI> element 3.
</UL>
</BODY>
</HTML>
3
3

Table
Thanks to the <table border> tag with a
grid. The contents of each cell are entered
line by line.
The <tr> tag determines the lines
The <td> tag contains cell contents.
The <th> tag the title
3
4

Example 10
<HTML>
<HEAD>
<TITLE> Document title</TITLE>
</HEAD>
<BODY>table with border<BR>
<table border>
<tr>
<th> Title1 </th>
<th> Title2 </th>
<th> Title3 </th>
</tr>
<tr>
<td> line 1, Column1</td>
<td> row1, column2</td>
<td> line 1, column3 </td>
</tr>
<tr>
<td> line 2, Column1</td>
<td> line 2, Column2</td>
<td> line 2, Column3 </td>
</tr>
</table>
</BODY>
</HTML>
3
5

Column formatting
The <colgroup> tag defines the same
column width or a different width.
For the same column width, the with
parameter defines the width and the
span parameter defines the number of
columns.
3
6

Example 11
<HTML>
<HEAD>
<TITLE> Document title</TITLE>
</HEAD>
<BODY>table with border, with 3 columns of size 150<BR>
<table border>
<colgroup width=150 span=3>
</colgroup>
<tr>
<th> Title1 </th>
<th> Title2 </th>
<th> Title3 </th>
</tr>
<tr>
<td> line 1, Column1</td>
<td> row1, column2</td>
<td> line 1, column3 </td>
</tr>
<tr>
<td> line 2, Column1</td>
<td> line 2, Column2</td>
<td> line 2, Column3 </td>
</tr>
</table>
</BODY>
</HTML>
3
7
Table with different size
column
The<col> tag with the width
parameter is used to define the size of
each column of a table
3
8

Example
<HTML>
12
<HEAD>
<TITLE> Document title</TITLE>
</HEAD>
<BODY>table with border, with column widths 90, 140 and 250<BR>
<table border>
<colgroup>
<col width =90>
<col width =140>
<col width =250>
</colgroup>
<tr>
<th> Title1 </th>
<th> Title2 </th>
<th> Title3 </th>
</tr>
<tr>
<td> line 1, Column1</td>
<td> row1, column2</td>
<td> line 1, column3 </td>
</tr>
<tr>
<td> line 2, Column1</td>
<td> line 2, Column2</td>
<td> line 2, Column3 </td>
</tr>
</table>
</BODY>
</HTML>
3
9

table title
The <caption> tag is used to add a title to a
table.
The align parameter aligns the title at the top
(top), in the bottom (bottom) on the left (left) or
on the right (right) of the table.
4
0
Example 13
<HTML>
<HEAD>
<TITLE> Document title </TITLE>
</HEAD>
<BODY>table <BR>
<table border>
< colgroup >
<col width =90>
<col width =140>
<col width =250>
</colgroup>
<caption align =top>table 1 </caption>
<tr>
<th> Title1 </th>
<th> Title2 </th>
<th> Title3 </th>
</tr>
</table>
</BODY>
</HTML>
4
1

Example 14
<HTML>
<HEAD>
<TITLE> Document title </TITLE>
</HEAD>
<BODY>table <BR>
<table border>
<colgroup>
<col width =90>
<col width =140>
<col width =250>
</colgroup>
<caption align = bottom > Table 2 </caption>
<tr>
<th> Title1 </th>
<th> Title2 </th>
<th> Title3 </th>
</tr>
</table>
</BODY>
</HTML>
4
2

Example 15
<HTML>
<HEAD>
<TITLE> Document title </TITLE>
</HEAD>
<BODY>table <BR>
<table border>
<colgroup>
<col width =90>
<col width =140>
<col width =250>
</colgroup>
<caption align = left> Table 3 </caption>
<tr>
<th> Title1 </th>
<th> Title2 </th>
<th> Title3 </th>
</tr>
</table>
</BODY>
</HTML>
4
3

Example 16
<HTML>
<HEAD>
<TITLE> Document title </TITLE>
</HEAD>
<BODY>table <BR>
<table border>
<colgroup>
<col width =90>
<col width =140>
<col width =250>
</colgroup>
<caption align =right> Table 4 </caption>
<tr>
<th> Title1 </th>
<th> Title2 </th>
<th> Title3 </th>
</tr>
</table>
</BODY>
</HTML>
4 Background color and
4
column content
alignment
bgcolor parameter of the <col> tag is
used to define the background color of a
column.
The align parameter of the <col> tag
allows the writing to be aligned to the left
(left), to the right (right) or to center
(center)
4
5

Example 17
<HTML>
<HEAD>
<TITLE> Document title </TITLE>
</HEAD>
<BODY>table with border, with column widths 90, 140 and 250<BR>
<table border>
<colgroup>
<col width =90>
<col width =140>
<col width =250>
</colgroup>
<tr>
<th> Title1 </th>
<th> Title2 </th>
<th> Title3 </th>
</tr>
<tr>
<td bgcolor =#8FFFE5> row 1, Column1</td>
<td align =right> row1, column2</td>
<td align =center> row 1, column3 </td>
</tr>
<tr>
<td bgcolor =#8FFFE5> row 2, Column1</td>
<td align =right> row 2, Column2</td>
<td align =center> row 2, column3 </td>
</tr>
</table>
</BODY>
</HTML>
4
6

Merge table cell


The colspan command is used to
indicate the number of columns over
which the cell spans.
The rowspan command lets you specify
the number of rows the cell spans.
4
7

Example 18
<HTML>
<HEAD>
<TITLE> Document title </TITLE>
</HEAD>
<BODY>
<table border>
<tr>
<th colspan =3> Cells can span
multiple columns </th>
</tr>
<tr>
<td> Cell 1</td>
<td> Cell 2</td>
<td> Cell 3</td>
</tr>
</table>
</BODY>
</HTML>
4
8

Example 19
<HTML>
<HEAD>
<TITLE> Document title </TITLE>
</HEAD>
<BODY>
<table border>
<tr>
<th rowspan =4>cell in 4 rows</th>
<td> Contained 1</td>
</tr>
<tr>
<td>Contained 2</td>
</tr>
<tr>
<td>Contained 3</td>
</tr>
<tr>
<td>Contained 4</td>
</tr>
</table>
</BODY>
</HTML>
4
9

Hypertext links
HTML (Hyper Text Markup Language )
is a hypertext (and hypergraphic )
language which allows by clicking on a
generally underlined word (or an
image) to go to:
 another place in the document.
 another HTML file located on the
computer.
 another computer located on the web.
Thissystem of hypertext allows page
to page and constitute the essence of
HTML documents.
5
0

The links
The syntax of these links between
several pages is:
<A HREF="URL or address">...</A>
There are mainly two types of links,
namely:
 Local links;
 External links.
5
1

local link
The classic organization, and more than
recommended, of a Web site consists in
grouping together all the elements of this one
(htm files, images, ...) in the same directory.
We can thus easily "transport" the site to
present it on another computer and load it on
a server. The link address will then simply
be : file.html
Example :
 In the text editor, we create two HTML files.
 the 1.html file: <A HREF=" 2.HTML"> Go to
document 2 </A>
 file 2.htm: <A HREF=" 1.HTML"> Return to
document 1 </A>
5
2

External link
Any computer located on the Internet has
an address or a URL (UNIVERSAL
Resource Locator). HTML provides access
to all machines and all resources on the
Net. As long as you are somewhat familiar
with the Internet, these are addresses of
the type:
 http://server/path.../file
 ftp://server/path.../file
 mailto:user@host
5
3

Anchors
Links can also point to a specific location in
the same document or another file. This is
called anchors or pointers.
Anchor
 <A NAME="***">...</A> We name the target ***
Link to an anchor in the same page
 <A HREF="#***">...</A> Link to target *** when
it is on the same page
Link to an anchor in another page
 <A HREF="URL#***">...</A> Link to target ***
when it is on another page

You might also like