features

HTML + XHTML + CSS + Javascript: l'essentiel

Structure de la page

Code HTML: les tags de base

  1. 26.10 langage HTML, édition du code source de la page personnelle avec Notepad et Mozilla
    Exercice d'observation/évaluation d'un sujet en interaction avec un site web Why You Only Need to Test With 5 Users

  2. 09.11 suite HTML + Powerpoint

  3. 23.11 styles css + Travail de présentation d'un article avec Powerpoint

  4. 07.12 Styles css, positions d'éléments DIV : structure du discours (document XHTML) vs. présentation (css)
    HTML: h1, p, ul, li, div CSS: position

  5. 21.12 barres de navigations : navigation 1 et navigation 2
    Dreamweaver 1: environnement, layers, tables, barre de menus, behaviors Javascript

  6. 11.01 Suite tutorial javascript + layers: href="javascript:;" onMouseOver =" window.open('','','')" +

  7. 25.01 révision


adresse web : URL

racine du site perso

A l'unifr, les étudiants disposent d'un espace disque pour un site web personnel:

http://serveur/username/pub/

où serveur est un des trois serveurs

homeweb1.unifr.ch, homeweb2.unifr.ch ou homeweb3.unifr.ch

Si votre nom de login est entre les lettres:

A-D -> homeweb1 -> http://homeweb1.unifr.ch/cortisa/pub/

E-K -> homeweb2 -> http://homeweb2.unifr.ch/gnito/pub/

L-R -> homeweb3

S-Z -> homeweb4

P.ex. : le site web de l'utilisateur Inco Gnito est à l'adresse URL:

http://homeweb2.unifr.ch/gnito/pub/

où gnito est le username et homeweb2.unifr.ch le serveur web.

ou p.ex.: http://homeweb1.unifr.ch/cortisa/pub/

Le contenu "la racine" de votre site web se trouve dans le répertoire My Documents/Pub.

Pour Gnito: \\home\gnito\My Documents\Pub

La page d'accueil de votre site doit impérativement s'appeler index.htm

(et non pas welcome.html ni default.htm ...).

Cette page doit être créée dans votre répertoire "Pub" avec un éditeur de texte simple : Notepad. (>>accessoires)

Ouvrez Notepad maintenant et copiez/collez les bouts de code XHTML des pages suivantes.

Voici un exemple du contenu de votre dossier "Pub", créez un dossier images dans lequel vous rangerz les illustrations et par exemple un répertoire docs pour tous les documents Word, Powerpoint.

Attention: LES NOMS DE FICHIERS (pages html, images, documents) que vous allez créer ne doivent pas comporter de caractères spéciaux comme une lettre accentuée ou un espace entre deux mots.


HTML : squelette de la page

HTML : squelette HTML

Tous les tags xhtml doivent être en minuscules !
Copiez/collez tout le code ci-dessous dans Notepad.

<html>

<head>

<title>mon nom</title>

</head>

<body>

Je suis visible sur le web.

</body>

</html>


XHTML : squelette de la page

Attention: tous les guillemets à l'intérieur des tags xhtml doivent être verticaux " ( et non pas ” ) sinon la page ne sera pas interprétée du tout !!! En copiant collant du code depuis Powerpoint ou Word, les guillements seront probablemnt faux!!!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

<head>

<title>mon nom</title>

</head>

<body>

Je suis visible sur le web.

</body>

</html>


HTML : squelette body

XHTML : body

les tags xhtml img et br sont auto-terminés par un espace et une barre slash />

Copiez/collez tout le code ci-dessous dans Notepad et sauvez le fichier sous le nom index.htm dans la racine de votre site web perso, le répertoire Pub. Ensuite ouvrez Internet Explorer (ou Firefox) et allez à l'URL complète de votre site perso:

p.ex. http://homeweb1.unifr.ch/gnito/pub/ (mais pas à https://webdav1.unifr.ch/...!!!!) Le contenu de la page devrait s'afficher en commençant par "Je suis visible sur le web", le code source ci-dessous étant interprété et caché par le navigateur.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

<head>

<title>mon nom</title>

</head>

<body>

Je suis visible sur le web.<br />

<a href="http://www.google.com">Un lien vers Google, (ATTENTION aux guillemets verticaux!)</a>

<br /> Le tag br effectue un retour à la ligne, il est seul.

<a href="mapresentationpowerpoint.ppt">Un lien vers un fichier Powerpoint</a>

<br />

<img src="/images/tutu.jpg" alt="une image tutu.jpg, avec une référence relative vers le répertoire images" />

<p>Le tag p représente un paragraphe. </p>

<img src="http://zoo.com/beef.gif" alt="image beef.gi avec une référence absolue" />

<p>Je suis un paragraphe visible à la suite des images.</p>

<ul>

<li>un élément de liste</li>

<li>un autre élément de liste</li>

<li>encore un élément de liste</li>

</ul>

<h1> h1 (header 1) un titre de premier niveau </h1>

<h2> un titre h2 de deuxième niveau </h2>

<p>petite <strong>intro en gras important</strong>duction</p>

<p>autre <em>élément en italique emphase</em></p>

<!-- ceci est un commentaire dans le code qui ne s'affichera pas dans la page -->

</body>

</html>


CSS selectors

CSS : du style!

A l'intérieur des tags xhtml head ajoutez les tags style contenant tous les paramètres de style de la page.

Ajoutez le code depuis le tag style au tag de fermeture /style entre les tags head de votre page xhtml dans Notepad et sauvez-là. Voyez l'effet de cette modification dans le navigateur (rechargez "reload" simplement la page index.htm).

<head>

<title>mon nom</title>

<style type="text/css">

body { margin:0; background-color:pink } /* ceci est un commentaire */

a:link {

text-decoration:none;

font-weight : bold;

color: yellow;

background-color: navy

}

/* tous les liens de la page: pas de soulignement, en gras, un fond bleu et une couleur de texte jaune */

h1,h2 {

font-size: 90%;

color: #FFFF00

}

h2 { font-size: 80% }

/* attention à ouvrir et fermer les parenthèses accolades, aux points-vigules entre les paramètres, de même que les commentaires avec les étoiles et les barres de slash */

</style>

</head>

<body>

... je suis visible ...

</body>

</html>


CSS : plus de styles

Ajoutons quelques sélecteurs de style, sauvez votre page index.htm dans Notepad et rechargez votre navigateur pour voir l'effet de vos modifications.

<style type="text/css">

/* attention à ouvrir et fermer les parenthèses accolades, aux points-vigules entre les paramètres, de même que les commentaires avec les étoiles et les barres de slash */

body {

margin:0; /* pas de marge ni extérieure ni intérieure */

padding:0;

background-color: #FFAA8F

} /* ceci est un commentaire dans la feuille de style */

h1,h2 {

font: verdana, arial, sans-serif;

font-size: 130%;

color: #FFFF00

}

h2 { font-size: 110% }

p {

font-family: Verdana;

font-size: 24px;

}

a:link {

text-decoration:none;

font-weight : bold;

color: yellow;

background-color: navy

} /* les liens */

a:visited {

text-decoration:none;

border-top: 1px solid purple;

border-right: 4px solid purple;

color: purple

} /* les liens qui ont été visités une fois présenteront une bordure pourpre en-haut et à droite */

a:hover{

color: navy;

background-color: yellow

} /* liens réagissent avec la souris au-dessus d'eux */

</style>


div

Le tag XHML div permet de présenter des éléments d'une page dans une zone définie (p.ex. une colonne, un encadré, une barre de navigation). Remarquez les noms id uniques qui serviront à distinguer ces zones pour leur attribuer des styles différents, comme par exemple la position dans la page ou la couleur, etc. (pas de caractère spécial, ni d'espace pour les id)

<body>

<!-- gardez le contenu précédent de la page -->

<!-- ajoutez les tags div ci-dessous à votre page index.htm -->

<div id="colonnedegauche">

contenu de la colonne gauche

</div>

<div id="grandframededroite">

<div id="navigation">

contenu de la barre de navigation <br />

<em>le contenu est fait de tags html et de texte...</em>

</div>

<div id="colonne_a_droite">

contenu de la colonne droite

</div>

</div>

<!-- fin des tag div -->

<!-- gardez le contenu précédent de la page -->

</body>


div : le style

Il faut maintenant définir les propriétés de style pour chacun des div id.

Dans le head de votre page, entre les tags HTML style, insérez le code ci-dessous entre les style existants:

Notez le "dièse"# (touches alt gr + 3) avant chaque nom d'id.

<style type="text/css">

/* n'effacez pas les autres attributs de styles */

div#colonnedegauche {

}

div#grandframededroite {

}

div#navigation {

}

div#colonne_a_droite {

}

/* gardez les autres styles */

</style>


div : tous les styles

Nous placerons plus tard tous les style de cette page index.htm dans une feuille de style séparée.

Pour l'instant, on peut changer les attributs un à un et voir l'effet dans un navigateur.

Comparez aussi la présentation dans Explorer à celle dans un autre navigateur comme Firefox.

<style type="text/css">

/* attention à ouvrir et fermer les parenthèses accolades, aux points-vigules entre

les paramètres, de même que les commentaires avec les étoiles et les barres de slash

*/

html { width: 100% }

body {

font-family: arial, sans-serif;

font-size: 90%;

margin:0;

padding:0;

background-color: #999999

} /* ceci est un commentaire dans la feuille de style */

h1,h2 {

font-family: verdana, arial, sans-serif;

font-size: 130%;

color: #dcdcdc;

}

h2 {

font-size: 110%;

border: 1px solid #bcbcbc; /* bordure de 1px autour des titres de niveau 2 */

padding: 5px /* marge intérieure de 5 pixels */

}

p {

font-family: Verdana;

font-size: 100%;

margin: 0 0 5px 0;

/* distances du tag paragraphe : dessus droite dessous gauche,

ici 5 pixels au-dessous */

}

a:link { /* les liens */

text-decoration:none;

font-weight : bold;

color: yellow;

background-color: navy

}

a:visited {

/* les liens qui ont été visités une fois présenteront

une bordure pourpre en-haut et à droite */

text-decoration:none;

border-top: 1px solid purple;

border-right: 4px solid purple;

color: purple

}

a:hover{

color: navy;

background-color: yellow

} /* liens réagissent avec la souris au-dessus d'eux */

div#colonnedegauche {

border:1px dotted yellow;

position: absolute;

top: 0; left: 0; width:20%;

background: silver;

margin:0;

padding:4px;

}

div#grandframededroite {

position:absolute;

top: 0; left: 20%; right: 0; width:79%;

margin:0;

padding:0;

}

div#navigation {

width:99%;

margin:0;

padding:4px;

border:1px dashed #ff88ff;

background: gray;

}

div#colonne_a_droite {

border-top:1px none blue;

border-left:1px solid blue;

width:99%;

margin:0;

padding:20px 4px;

overflow: visible;

background: #999999;

}

div#colonnedegauche ul { /* attributs de style pour les listes et liens spécifiques à la colonne de gauche */

margin:1px 0 0 5px;

padding:0;

}

div#colonnedegauche li {

list-style-type: none;

margin:0;

padding:0;

}

div#colonnedegauche a {

text-decoration:none;

}

</style>


CSS link vers feuille de style

Type topic text here.

<head>

<title>mon nom</title>

<link type="text/css" rel="stylesheet" href="monstyle.css" />

<!-- commentaire: cette unique ligne remplace tous les attributs de styles précédents qu'il faut copier dans une feuille de style séparée (Notepad) et sauvegarder dans Pub, au même niveau de la page index.htm p.ex. avec le nom monstyle.css -->

</head>