Intégration Web

Vendredi 4 février 2011 5 04 /02 /Fév /2011 09:10

- Publié dans : Intégration Web - Communauté : Pause café pour les passionnés de com" et du web

La balise head et ses éléments base et link

Le HTML est un langage de balisage - ou de marquage - propre à l'édition de pages Web : les navigateurs interprètent les balises du HTML pour rendre le webdesign et les contenus éditoriaux, tels que vous les voyiez actuellement.

Au niveau de la conception web, on parle de WYSIWYG lorsque l'on construit un site dans l'aperçu final, mais un vrai professionnel lui va plutôt intervenir directement dans le code HTML.

La balise head est un cas particulier : elle ne reste rien transparaître du côté internaute, à par le titre de la page bien sûr. Obligation donc pour un intégrateur de bien la connaître.

La Balise head

La balise head est primordiale : elle est interprétée par les navigateurs et les moteurs de recherche, elle fournit des informations grâce à ses éléments enfants : <title>, <base />, <link />, <script>, <meta /> et <style>

L'élément <head> peut avoir les attributs suivants :

- xml:lang donne la langue de référence du document. Elle permet notamment d'apparaître dans la SERP Google si l'internaute a choisi le bouton "pages : France" pour xml:lang="fr"

- dir indique le sens de lecture. dir="ltr" (left to right) ou dir="rtl"

- profile a pour valeur une URL qui pointe vers un fichier de métadonnées. A priori les navigateurs ne prennent pas cet attribut en compte.

L'élement <base />

Cette balise a pour attribut obligatoire href="". L'URL fournie détermine l'adresse de base de tous les fichiers du site

Exemple :

pour <base href="www.web-creatif.net" />

un lien relatif dans la page vers images/toto.gif sera interprété comme lien absolu www.web-creatif.net/images/toto.gif

L'élément <link />

Cet élément crée l'importation virtuelle d'un document externe : virtuelle car le navigateur agira comme si le code du fichier externe était intégré à la page. La liaison est déterminée par les attributs rel, rev, type, href, hreflang, media, charset.

- rel="stylesheet" si le fichier externe est uen feuille de style

- rel="alternate" si le fichier est une page de rechange

- rel="alternate stylesheet" si le fichier est une feuille de style de remplacement

- rel="shortcut icon" pour créer une favicon, l'image de 16x16 qui s'affiche dans les onglets et les favoris

- rel="start" si le fichier cible est la page d'accueil

- rel="glossary" si le fichier contient les termes d'un glossaire

L'attribut type précise le contenu du fichier externe

- type="text/css" pour une feuille de style CSS

- type="text/javascript"

- type="images/x-icon" pour créer une icône

L'attribut href contient l'adresse relative ou absolue du fichier externe associé

Code pour lier une feuille de style

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

Pour le media écran : 
<link href="accueil.css" rel="stylesheet" type="text/css" media="screen" />



Pour le media imprimé :
<link href="accueil.css" rel="stylesheet" type="text/css" media="print"  />



Source : XHTML et CSS de Jean Engels

Plus
- Email
- Lien
- Imprimer

Par Sabrina ECHAPPE - Voir les 0 commentaires
Ecrire un commentaire

Mercredi 2 novembre 2011 3 02 /11 /Nov /2011 09:15

- Publié dans : Intégration Web - Communauté : Communication d'entreprise

Projet web : lexique et notions illustrées [diaporama]

Une publication dans le groupe facebook "pratiques du e-tourisme" et me voilà partie à écrire cet article.

Jean-Michel, du CDT Anjou, y pose une question faussement innocente (attention au piège !) :

"Petit quizz : Prendre en compte les utilisateurs dans la conception de son site web... (aucun joker disponible mais rien ne vous empêche d'appeler un ami) ;)"

a) Je le fais si j'ai le temps

b) Ca ne sert à rien

c) Utile mais pas indispensable

d) Indispensable si je veux qu'il soit utilisé par quelqu'un d'autre que moi

Ah la belle question, dont la réponse semble si évidente… Dans les faits, l'utilisateur final n'est pas toujours pris en compte en amont du projet.

Le projet web en quelques notions : préambule et sommaire

Je vous cite l'introduction du livre "conduite de projet web" aux éditions Eyrolles :

"Il suffit de « bien » développer un site pour que ce dernier soit une réussite". C'est une condition essentielle certes, mais non suffisante. Le succès d'un tel projet passe en effet par une approche multidisciplinaire. Ainsi est-il nécessaire pour toute personne souhaitant mettre en œuvre un site web de disposer de connaissances aussi bien dans le domaine de la gestion de projet que dans ceux de l'ergonomie, de l'hébergement, du référencement, de la promotion et de l'animation, de l'analyse d'audience et des aspects juridiques.

On le comprendra, un projet web nécessite une réflexion stratégique - et au minimum - une compréhension du lexique basique.
Voici le sommaire du powerpoint qui suit :