Conception d'un site Web : langage XHTML et CSS

Résumé du document

XHTML : c'est l'abréviation de eXtensible HyperText Markup Language. C'est avec XHTML, que vous créerez le contenu de votre site Web. Il contient des instructions indiquant, par exemple, "Ceci est mon titre, ceci est mon menu etc...".

CSS : c'est l'abréviation de Cascading Style Sheets ("Feuille de style en cascade"). Ce langage nous sert uniquement à présenter la page Web. C'est en CSS que l'on dira : "Mes titres sont en rouge et sont soulignés, mon texte est dans la police Arial, mon nom est centré, mon menu a un fond blanc..." etc (...)

Extraits

[...] relative : positionnement relatif. Le positionnement absolu Dans le code CSS, il faut taper : position:absolute; Mais ça ne suffit pas où on veut que le block soit positionné sur la page. Pour faire cela, on va réutiliser 4 propriétés CSS que vous commencez certainement à bien connaître : left : position par rapport à la gauche de la page. right : position par rapport à la droite de la page. top : position par rapport au haut de la page. [...]

[...] Vous devez obligatoirement la mettre à l'intérieur d'un paragraphe, Les titres En XHTML , on a le droit d'utiliser 6 niveaux de titres différents. : signifie "titre très important". En général, on s'en sert pour afficher le titre de la page en haut. : signifie "titre important". Utilisez-les par exemple pour organiser vos paragraphes et leur donner un titre. : pareil, c'est un titre un peu moins important (on peut dire un "sous-titre" si vous voulez) : titre encore moins important. : titre pas important. [...]

[...] Ah ben oui, quelle question stupide . Appliquer le même style aux liens actifs et focus Code : CSS a:focus a:actif, Appliquer le même style aux liens actifs et focus { background-color: #FFCC66; } Quand la page a déjà été vue . Le pseudo-format qui nous intéresse s'appelle :visited (qui signifie "visité"). Code : CSS a:visited Quand le visiteur a déjà vu la page concernée { text-decoration: line-through; } a:focus Quand le visiteur sélectionne le lien { background-color: #FFCC66; } a:hover Quand le visiteur pointe sur le lien { text-decoration: underline; color: green ; } a Lien normal { text-decoration: none; color: red; font-style: italic; } Première lettre et première ligne En CSS, il est possible de modifier automatiquement l'apparence de la première lettre et de la première ligne du texte contenu dans une balise. [...]

[...] C'est bien beau de dire qu'on insère une image, mais encore faut-il indiquer laquelle. On fera ça avec un attribut : Ici, l'attribut est et il a pour valeur "Soleil.jpg". Cela indique que l'image que l'on veut insérer s'appelle "Soleil.jpg" tout simplement. Plus de précisions Les noms des balises et attributs s'écrivent toujours en minuscules (ex. : « img, src") Les valeurs des attributs peuvent contenir des majuscules "Soleil.jpg") S'il y a des attributs dans une balise fonctionnant par paire, on ne les met que dans la balise ouvrante. [...]

[...] Types de balises En XHTML, on distingue 2 types de balises : Les balises de type inline : ce sont des balises que l'on utilise à l'intérieur d'un paragraphe. C'est le cas notamment des balises etc . Les balises de type bloc : ces balises servent à structurer la page en plusieurs "blocs". La première qu'on a appris, c'est la balise , mais il y a aussi les balises de titre Vous ne devez PAS mettre de titre ou de citation longue à l'intérieur d'un paragraphe. Chacune de ces balises constitue un bloc séparé. [...]