Cours Visual Basic .NET couleur

Site

Cours VB.net

2.50

Annexe:

HTLM

Qu'est ce que le HTML ?

Le HTML est un langage de description de document permettant d'écrire des pages Web grâce au balisage.

Le HTML (" HyperText Mark-Up Language " ou "langage de balisage d’hypertexte") est un langage de « marquage », de « structuration », de « balisage » dont le rôle est de formaliser l'écriture d'un document avec des balises de formatage. Les balises permettent d'indiquer la façon dont doit être présenté le document et les liens qu'il établit avec d'autres documents(d'ou le 'Hypertexte').

Retenir: 'représentation', 'lien'.

Depuis les débuts (1989) le HTML a évolué et en est à sa version 4.0

Le World Wide Web Consortium, abrégé W3C, est un consortium fondé en octobre 1994 pour promouvoir la compatibilité des technologies du World Wide Web telles que HTML XHTML XML RDF CSS PNG SVG SOAP..

Un document HTML (qui correspond à une page Web) est un fichier portant l'extension .htm ou .html .

Qu'est ce qu'une balise ?

Une balise est une "mot clé" comprise entre crochets < > qui possède un nom et parfois des attributs.

Presque toutes les balises doivent être ouvertes puis refermées. On retrouvera donc souvent une balise de début et une balise de fin. La balise de fin porte le même nom que la balise de début à l'exception du nom du la balise qui est précédé du signe /.

Exemple:

<titre> cours de HTML </titre>.

Le nom de la balise (contenu entre les crochets) n'est pas sensible à la casse, il peut être écrit indifféremment en majuscule ou en minuscule.

En HTML, les balises sont prédéfinies, on ne peut utiliser que celle qui sont définies par le W3C.

Comme on l'a dit, certaines balises n'ont pas besoin de balise de fin:

<PR> : saut de ligne: pas de balise de fin.

Un attribut est le nom d'une propriété de la balise souvent associé à une valeur, il est mis dans la balise d'ouverture après le nom de la balise:

Exemple:

<BODY bgcolor="#000000">
La balise BODY à un attribut 'bgcolor' a qui on donne la valeur 00000.

Il peut y avoir plusieurs balises intriquées, mais attention à l'ordre des balises de fin qui doivent être dans l'ordre inverse (première balise ouverte, dernière fermée).

<B><I>mon texte</I></B> est correcte.

<B><I>mon texte</B></I> est incorrecte.

Structure d'une page HTML:

Une page doit commencer par la balise <HTML>
et se terminer par </HTML>

Il doit impérativement il avoir 2 zones:

L'en-tête (ou HEAD)

<HEAD>

.........

</HEAD>

L'en-tête ne sera pas affichée.

Elle peut contenir le titre de la page, le type de caractère utilisé, la CSS (voir plus bas)...

Le corps (ou BODY)

<BODY>

.........

</BODY>

Seul le contenu du corps sera affiché.

Exemple complet:

<HTML>
<HEAD>
<TITLE>Cours HTML</TITLE>
</HEAD>

<BODY>
Cours HTML

Chapitre 1

</BODY>
</HTML>

Si je charge cette page dans Internet Explorer, je verrais:

Cours HTML

Chapitre 1

Jeux de caractère.

Pour être lisible par tous les systèmes d'exploitation, le jeux de caractère est initialement l'ascii standard sur 7 bits!!

Aussi il existe des caractères spéciaux pour les accentuées; Il commencent par &

`é`	`é`	`à`	`à`	`<`	`<`
`è`	`è`	`â`	`â`	`>`	`>`
`ê`	`ê`	`ù`	`ù`	`"`	`"`
`ë`	`ë`	`ç`	`ç`	`&`	`&`
`É`	`É`	`Ç`	`Ç`	` `	`espace insécable`

On peut aussi spécifier dans l'en-tête un jeux de caractère particulier:

<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" />

Ici de l'ascii étendu sur 8 bits.

Paragraphe, saut de ligne, commentaire:

<p>..</p> permettent de définir un paragraphe.

En effet, La gestion des fins de lignes est laissée au logiciel de navigation. Comme on ne connaît pas lors de la rédaction les dimensions de la fenêtre dans laquelle les documents seront visionnés, il faut donc indiquer explicitement chaque nouveau paragraphe.

<br> permet de faire un saut de ligne. Lorsque vous écrivez du texte dans une page web, il y a un retour automatique à la ligne lorsque le texte atteint le bord droit de l'écran. Avec <br>, vous pourrez faire des sauts de ligne quand vous voulez. Ici il n'y a pas de balise de fin.

: Ces balises permettent de commenter votre code. Le texte compris entre ces balises ne sera pas affiché.

Mise en forme: gras, italique, souligné, centré (hors feuille de style).

<b> et </b> : écrit le texte en gras.

<i> et </i> : écrit du texte en italique. en gras.

<u> et </u> : souligne du texte; un texte souligné peut être confondu avec un lien et ça peut être gênant.

<center> et </center> : centre le texte par rapport à l'écran.

Exemple:
<B>Texte en gras</B> <BR>
<I>Texte en italique</I> <BR>
<U>Texte souligné</U> <BR>
<CENTER>Texte centré</CENTER> <BR>

Donnera:

Texte en gras
Texte en italique
Texte souligné
Texte centré

Mise en forme: les couleurs (hors feuille de style):

La balise FONT et l'attribut color= permettent de modifier la couleur du texte.

<FONT color="red">Rouge</FONT>

Ici on a utilisé le nom de la couleur (il est reconnu par le navigateur); on aurait pu aussi utiliser le code de la couleur (l'intensité des 3 couleurs fondamentales est en hexadécimal: précédé de #)

<FONT color="#FF0000">Rouge</FONT>

Il y a longtemps quand on avait des moniteurs affichant 256 couleurs, il existait une liste nommé 'web-safe colors ' contenant 216 couleurs qui étaient des couleurs 'sures'; mais maintenant cela est obsolète avec les moniteurs actuels.

On peut aussi modifier la couleur du fond en ajoutant l'attribut bgcolor (Back Ground Color) à BODY.

Ici on a un fond bleu.

Exemple complet:

<HTML>
<HEAD>
<TITLE>Test couleur</TITLE>
</HEAD>

<BODY bgcolor="#00000FF">
<FONT color="#000000">texte noir sur fond bleu</font>

</BODY>
</HTML>

Mise en forme: taille du texte et police de caractère, titre (hors feuille de style):

face est un attribut permettant de modifier la font, le nom de la font est entre "":

<FONT face="Verdana">Texte en Verdana</FONT>

On peut indiquer 2 noms séparés d'une virgule, si la première font n'est pas présente sur l'ordinateur, on utilisa la seconde.

<FONT face="Arial, Times New Roman"

size est un attribut permettant de modifier la taille des caractères:

<FONT size=5 >Taille 5</FONT>

La taille va de 1 à 7.

On peut indiquer une taille relative à la taille par défaut. (qui est de 3, pas sur!!)

<FONT size="+2" >Taille 5</FONT>

On peut combiner font et taille.

<FONT size=5 face="Verdana">Taille 5 en Verdana</FONT>

H1....H6 permettent d'afficher avec les attributs de titres prédéfinis (il y en a 6)

<H1>Titre de type 1</H1>
<H2>Titre de type 2</H2>
Le titre 1 est le plus gros.

Mise en forme: alignement (hors feuille de style):

Grâce à la balise P et l'attribut align= , on peut aligner le texte à droite au centre, à gauche, ou justifier le texte.

<P align="right">texte aligné à droite</P> <BR>
<P align="center">texte aligné au centre</P> <BR>
<P align="left">texte aligné à gauche</P> <BR>
<P align="justify">texte justifié </P>

Les listes:

La balise UL permet de définir une liste de lignes, l'attribut type= permet de choisir le symbole de début de ligne.

LI permet d'ajouter les lignes à la liste:

<LI>Ligne 1</LI>

Exemple 1 Liste avec disque plein (par défaut)
<UL type="disc">
<LI>Ligne 1</LI>
<LI>Ligne 2</LI>
<LI>Ligne 3</LI>
</UL>

A la place de "disk" on peut mettre "circle" (disque vide) ou "square" (carré).

Enfin existe les listes numérotée balise OL au lieu de UL.

Les images:

Chargeons MonImage.gif.

L'attribut scr= permet de donner le nom de l'image.

Il peut y avoir des attributs à IMG

On peut ainsi indiquer l'épaisseur du bord, la largeur et la hauteur de l'image et, si l'image n'est pas trouvée, le texte à afficher à la place de l'image.

hspace et vspace permettent de déterminer les espaces, en pixels, entre l'image et le texte autour (hspace horizontalement et vspace verticalement).

On peut aligner l'image à droite, à gauche, en haut, en bas.

<IMG src=Maphoto.gif  align=left>
Je suis un homme de...

Ici image à gauche, texte à droite.

On peut positionner MonImage.gif au centre.

Pour mettre une image comme fond d'écran, il faut utiliser l'attribut background de la balise <BODY>.

Les images sont des GIF (animés parfois) ou des JPEG.

Les liens:

Pour avoir un lien hypertexte sautant à la page sommaire.

<A href="sommaire.html">Voir page sommaire</A>

Pour sauter vers un autre site:

<A href="http://www.Lesite.com">Lien vers le site externe</A>

On peut créer une étiquette, une sorte de borne invisible dans la page.

<A NAME="sommaire"></A>

Pour créer un lien vers cette etiquette:

<A HREF="#sommaire">Sommaire</A>

Un lien sur une image sautant à Mapage.html:

Des liens sur une portion d'image:

'la zone sensible est un rectangle défini par les coordonnées de 2 coins.

'la zone sensible est un cercle défini par les coordonnées de 2 coins.

'la zone sensible est un polygone défini par les coordonnées des 2 points.

'zone sans lien

</MAP>

Les Tableaux:

Permet d'afficher des grilles.

TR permet une ligne, TD une cellule dans la ligne.

<TABLE border=1>
<TR>
<TD>Celulle 1</TD>
<TD>Celulle 2</TD>
</TR>
<TR>
<TD>Celulle 3</TD>
<TD>Celulle 4</TD>
</TR>
</TABLE>

Attribut:

Border

pour spécifier l'épaisseur de la bordure extérieure.

cellpading: pour spécifier l'espace entre bordures et contenu des cellules
cellspacing: pour spécifier l'épaisseur des bordures entre cellules

width=80%

Avec l'attribut border=0, le tableau devient invisible mais permet une mise en page; c'est la seule manière de faire de la mise en page en HTML.

On peut aussi indiquer la taille des cellules en pixels ou en pourcentage de la largeur.

On peut

mettre un fond de couleur grâce à bgcolor.

Fusionner des colonnes grâce à colspan.

Fusionner des lignes grâce à rowspan.

Préciser l'alignement avec align.

Les Formulaires:

Créer une zone de saisie de texte, un label indiquant: Entrez votre nom et un bouton renvoyant le nom dans un mail à l'adresse philippe@moi.com.

<FORM action="mailto: philippe@moi.com" method="post" enctype="text/plain">
Entrez votre nom : <INPUT type="text" name="nom">
<BR><BR>
<INPUT type="submit" value="Envoyer" name="submit">
</FORM>

Les Cadres ou 'Frames':

Pour mettre des cadres dans une page, il faut avoir une balise FRAMSET avec ses attributs et des balises FRAME pour chaque cadre, l'attribut scr= indique la page HTML à charger dans le cadre.

</FRAMESET>

Les cadres peuvent avoir d'autres attributs:



frameborder

Indique si le cadre doit être séparé des autres cadres (1 pour oui —valeur par défaut, 0 pour non)

Si on clique sur un lien dans un cadre, la nouvelle page s'affiche dans le cadre courrant. Pour afficher la page appelée dans un autre cadre, il f aut écrire:

<A href="pageIndex.html" target=cadreprincipale>Index</A>

Les Feuilles de style ou CSS.

Plutôt que de définir la mise en forme pour chaque élément affiché dans BODY, il est préférable de définir des styles dans une feuille de style et ensuite d'utiliser ces styles dans BODY.

La feuille de style ou CSS (Cascading Style Sheets) peut être placée dans HEAD:

ou dans un fichier (d'extension .css) séparé, dans ce cas HEAD contient le lien

Exemple de contenu de la feuille de style:

H1 { color : red } signifie que les titres 1 seront en rouge.

H1 est le sélecteur puis entre {} se trouve la déclaration qui comporte une propriété et une valeur.

H1, P { color : red } 'titre 1 et paragraphe en rouge.
P { margin-left : 1cm ; 'paragraphe en italique avec une marge de 1cm à gauche.
text-style : italic }

EM {color : green} la balise 'Mise en valeur' affiche en vert.

Exemple de mise en forme:

font-family : Arial;

font-size : x-small;
font-size : 18pt;
font-size : 150%;

text-align : center;

text-decoration : underline line-through;

text-transform : uppercase;

color : red;                        'nom de couleur en anglais voir la liste des couleurs X11 pour le Web
color : #fd4a88;                'en hexadécimal
color : rgb(125,32,98);      'en rgb et décimal

p { color: rgba(255,0,0,0.5) } /* 0.5 opacity, semi-transparent */

background-color : blue;

margin-top: 1em   'hauteur d'un caractère
margin-bottom: 2ex 'hauteur de 2 x
margin-left: 10px      '10 pixel
margin-right: 3cm    '3 centimettres

border-style : solid;

Valeur possible : none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset

border-width : thin; border-width : 3px

Valeurs possibles : thin, medium, thick ou bien une longueur.

border-color : red;

Les classes:

Création d'une classe 'rouge' dans la CSS

.rouge { color: red }
(tous ce qui est indiqué 'rouge sera en rouge)

Dans BODY, utilisation de la classe rouge:

<H2 class=rouge>Un titre rouge</H2>

Création d'une classe 'entete' pour les paragraphes dans la CSS

P.entete { font-style: italic }

Dans BODY, utilisation de la classe 'entete'.

<P class=entete>Ceci est le paragraphe d'entête...

Utilisation de contexte:

La balise EM SI elle est dans un titre de type H2 affichera le texte en vert.

H2 EM {color : green}

Modifier la couleur des liens:

A:link { color : fushia; }
A:visited { color : olive; }
A:active { color : green; }

Notion de Cascade:

Il peut y avoir dans HEAD les références de plusieurs feuilles de style, si les CSS touchent aux mêmes éléments , c'est la dernière CSS qui impose sa valeur.

Si une propriété n'est pas défini , c'est la valeur de l'élément parent qui est prises, ou la valeur de l'élément initial ou par défaut.

Comment écrire une page en html?

A- Avec une éditeur de texte comme NotePad.

Dans ce cas il faut écrire la totalité du code, les crochets, les balises...

C'est fastidieux!!

B- Avec un éditeur HTML.

Comme DreamWeaver, FrontPage, Webexpert, NamoWeb..

Dans ce cas, on tape le texte, on ajoute la mise en forme avec des outils; on voit directement l'aspect qu'aura la page, on ne voit pas les balises. On n'a pas besoin de connaître le langage HTML.

Comment visualiser une page en html?

A- Avec une éditeur de texte comme NotePad.

Dans ce cas on voit le code HTML, les crochets, les balises...

B- Avec un navigateur WEB .

Comme Internet Explorer, FireFox.

On voit la page sans les balises avec l'aspect habituel des pages du Web.