Tout d'abord, il faut savoir qu'absolument tous les sites qui tournent sur les internets ont une base HTML et CSS. Il s'agit d'un standard qui n'a pas de concurrent. Ce qui veux dire que si vous voulez coder un site internet, il faudra obligatoirement passer par du HTML et du CSS.
Pour programmer, il faut un logiciel de traitement de texte qui formate en «texte brute votre contenu». Il en exsite beaucoup certains sont propriétaires, d'autres libres ou encore open-source. Plus généralement ces logiciels sont appellés Environnement de développement ou IDE. Certains disposent d'options qui sont conçues pour faciliter le travail de programmation. L'autocomplétion ou l'affichage automatique du rendu de la page en sont des exemples.
Le HTML ou HyperText Markup Language est autant une extention de ficher qu'un langage de programmation. Il constitue la partie structurelle et contient tout le contenu informationnel de la page. Le fichier HTML peut fonctionner seul, il constitue d'une certaine manière la «page internet minimale». Tout fichier avec l'extention .html est donc une page internet. Le HTML fonctionne par un système de balisage. Toute balise ouverte doit être refermée et constitue un bloc de contenu. par exemple :
Le CSS ou Cascading Style Sheet est un langage de programmation qui tend à définir les styles d'une page internet. Ainsi les couleurs, typographies ou autres choix esthétiques sont définis dans le CSS. Le fichier CSS ne peut être utilisé que si il est utilisé par une page HTML.
Pour être affiché correctement les fichiers HTML et CSS doivent être ouvert avec le logiciel approprié. Il faut utiliser un navigateur web qui va interpréter le code pour l'afficher correctement à l'écran.
Pour réaliser un site il est souvent nécéssaire d'utiliser plusieurs fichiers. Ainsi un fichier HTML sera très souvent associé à un CSS voir à des images ou des typographies... Il est donc nécessaire d'organiser les fichiers de manière stricte afin que votre site puisse fonctionner au mieux une fois posté en ligne. Il faut donc respecter une organisation des contenus conventionnelle.
Le fichier index.html constitue par défaut le premier fichier ouvert par le navigateur. Si il n'est pas disponible une erreur peut apparaître dans votre navigateur, entrainant le non fonctionnemnt de votre site.
Attention à bien nommer vos fichiers. Il ne faut pas utliser de carractères spéciaux ni d'espaces (il vaut mieux éviter aussi d'uliser les majuscules). À vous de choisir le formatage de votre texte. Il faut trouver une sorte d'autamatisme d'écriture. Vos fichiers doivent absolument disposer d'une extention de fichier.
Carractères à proscrire absolument : ; . : ! ? / \ " # [ ] > < % * @ = & ^ ( )
En programmation un dossier est signifié par un «/» et un fichier doit impérativement comporter une extension (.jpg, .html, etc.). Le ciblage des fichiers se fait par rapport à la «racine» d'un dossier. En HTML la racine est définie par le dossier qui contient le fichier index.html. Ainsi, en reprenant l'arborescence montrée plus haut. l'image «img-1.png» pourra être affichée dans la page index.html en respectant le chemin suivant : images/img-1.png.
Le premier «p» entouré de chevrons ouverts et fermés ouvre la balise. Le «p» correspond à paragraphe. Il existe plusieurs identifiants de balises selon les usages.
Le second «p» précédé de «/» referme la balise.
Le contenu «class=""» indique que la balise dispose d'une classe. Elle sera utilisée lors de la création des CSS
Le texte «texte-courant» constitue le nom de la classe, il est possible de choisir ce nom selon vos envies. Il sera utilisé dans le CSS pour cibler exactement ce contenu. Il est donc important de choisir un nom explicite.
Il est intéressant de noter que les balises peuvent avoir plusieurs fonctions. Insertions d'images, mise en forme sommaire, structure, etc. À chaque balise est associée des propriétées par défaut.
Les balises sont aussi pensée pour être emboitées.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas rutrum odio sed orci aliquet, ac ultricies eros scelerisque. Morbi eget laoreet ex. Donec id magna eget ligula pellentesque rutrum. Fusce non lacus nec elit aliquet venenatis. Nam nulla dui, molestie a lacinia vitae, dignissim sit amet velit. Nam maximus porttitor.
Un lien hypertexte, est un lien qui permet de naviguer d'une page à une autre, d'une page à un autre fichier (image, texte, pdf, etc.). C'est un élément extrèmement important qui constitue une des carractéristiques principales du HTML. Il peut s'afficher comme suit :Texte du lien
Cette balise s'écrit :
Il est intéressant de noter qu'il est possible de faire un lien hypertexte au sein d'une même page et de cibler une partie spécifique de la page grâce à la définition d'un identifiant.
Une page html est constituée d'un header d'un body. Le header contient toutes les informations nécessaires à la bonne interprétation par le navigateur de la page. Alors que le body contient lui toutes les informations affichées sur la page : le contenu affiché qui concerne le lecteur.
Il est intéressant de noter que c'est dans la partie head que le fichier de styles CSS est lié au fichier html.
Une favicon est une icône informatique symbolisant un site web. Les navigateurs web peuvent utiliser la favicon dans la barre d'adresse, les signets, les onglets ou encore les autres raccourcis.
En local le site fonctionne par lui même sur votre propre ordinateur. Pas besoin d'internet, pas besoin de configurer un serveur. En ligne votre site sera visible par tout le monde. Il faudra cependant utiliser un logiciel de transfer de type FTP, un serveur d'hébergement et un nom de domaine. L'ensemble de ces éléments doit être paramétré afin d'assurer le bon fonctionnement de votre site.
La plupart du temps il est possible d'utliser les logiciels FTP (file transfer protocol) filezilla (libre) et cyberduck qui sont gratuit et les plus répandus. Il est aussi possible de passer en ligne de commande sans interface graphique pour les plus témerraires avec la commande ftp.
En ce qui concerne les hébergements, ils sont à choisir avec prudence. Ils sont pour la plupart payants.
Le pixel est souvent abrégé p ou px. Il est l'unité de base permettant de mesurer la définition d'une image numérique matricielle. Son nom provient de la locution anglaise picture element, qui signifie « élément d'image ». C'est une dimension absolue. Attention, car le nombre de pixels contenu dans un écran peut varier d'un ordinateur à un autre.
Le cadratin, en typographie, est une unité de mesure de longueur des espaces. Sa traduction anglaise em (de la lettre M) est utilisée comme symbole de l'unité. C'est une mesure relative à la taille de la typographie.M
« M » apparaît occuper moins d'espace que « W », « — » et « 00 », ces trois derniers groupes de caractères occupant quant à eux un cadratina. « M » équivaut en fait à un cadratin lorsque l'on compte aussi son approche.
Le pourcentage est une unité relative à l'élément supérieur. Ainsi si la balise fait width:50% la balise fera alors 50% de la largeur de son contenant.
Le viewport est une unité relative à la dimension de la fenetre de navigateur. Elle peut s'exprimer en vw ou viewport width qui correspond à la largeur, ou en vh ou viewport height qui correspond à la hauteur.
Le langage CSS constitue un langage de programmation qui définit les styles d'une page. La syntaxe n'est pas la même que le HTML.
Dans l'exemple précédent, la (ou les) balises «texte-courant» auront un style particulier : la taille de la typographie sera de 12px, la couleur de fond sera rouge et la couleur du texte sera jaune. La définition des styles CSS est contenue entre les deux accolades «{}» et chaque ligne de définition de styles est conclue par un «;».
En CSS il est possible de modifier les styles d'une balise (p, img, b, h1, etc.). Le ciblage de cette définition de style peut être :
Le ciblage direct aura pour effet d'affecter toutes les balises du même nom. L'identifiant quand à lui est unique, il ne peut être utilisé que sur une seule balise. Alors que la classe peut être utilisée sur plusieurs balises.
Il existe beaucoup de définitions CSS selon les envies ou les besoins. Il n'est pas necessaire ici de toutes les donner. Certains sites comme W3S et mozilla offrent une liste exhausive de toutes les propriétés CSS.
Les attributs HTML class et id sont des attributs dits globaux car on va pouvoir les ajouter dans la balise ouvrante de n'importe quel élément HTML. Ces deux attributs vont être principalement utilisés dans un but de mise en forme : ils vont nous servir à appliquer des styles CSS aux éléments qui vont les contenir.
Il sera effectivement très facilem de se resservir de ces deux attributs en CSS grâce aux sélecteurs associés .class et #id.
En html certaines balises sont agencés différemment. Certaines vont s'organiser les unes sous les autres (block). D'autres peuvent s'agencer les unes à la suite des autres (inline-block). Par défaut, certaines seront automatiquement en block comme par exemple les balises p, h1, h2, li, etc. D'autres seront automatiquement en inline-block a, span, textarea, etc. Il est bien sûr possible de changer ces valeurs par défaut en les définissant dans les styles CSS.
La définition CSS précédente pour effet de mettre en inline-block une balise paragraphe (qui est par défaut en block). La largeur du paragraphe est aussi défini à 200 pixels.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lobortis, magna nec auctor efficitur, metus dolor elementum erat, quis aliquam quam arcu at libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nam eget dapibus orci, at efficitur augue. Donec laoreet diam interdum nunc lobortis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lobortis, magna nec auctor efficitur, metus dolor elementum erat, quis aliquam quam arcu at libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nam eget dapibus orci, at efficitur augue. Donec laoreet diam interdum nunc lobortis.