Bases de la conception Web (HTML et CSS)
HTML est l'abréviation de Hyper Text Markup Language .
CSS est l'abréviation de Cascading Style Sheets .
Le HTML est en fait utilisé pour créer la page Web et le contenu qu'elle contient, comme les images et l'écriture.
CSS est utilisé pour concevoir la page Web et indiquer à l'écriture et aux images d'être à un certain endroit, comme une image en haut de la page, une autre au centre, etc.
"Tout ce qui se trouve sur Internet peut être modifié, supprimé ou ajouté simplement avec l'utilisation de HTML et CSS! Même sur instructables.com!"
La meilleure chose est...
Tout ce dont vous avez besoin, c'est d'un ordinateur!
Commençons donc notre voyage dans la conception web ...
Étape 1: De quoi est fait un site Web?
Faites un clic droit sur une zone vide de la page Web.
Cliquez sur afficher la source de la page
Cela ouvrira une nouvelle fenêtre ou un onglet en fonction de vos paramètres affichant le code HTML sur lequel le site Web s'exécute.
REMARQUE: certains sites Web comme instructables, google, youtube, etc. utilisent beaucoup de Javascript dans leur codage, alors n'ayez pas peur ... après avoir lu cet instructable, vous pourrez facilement comprendre ce que sont le HTML et CSS et les balises fondamentales .
Étape 2: HTML, qu'est-ce que c'est?
HTML comme je l'ai déjà dit est
Langage Signalétique Hyper Text...
Tout en HTML fonctionne par l'utilisation de 'Tags', les Tags sont des éléments dans un document HTML qui donnent des commandes à l'écriture ou aux images ou aux fichiers audio ou vidéo quoi faire, où les placer etc. dans un site web ...
En HTML, les balises ont toujours "<" avant et ">" après la balise ...
ex- (Cette balise met le texte en gras)
Tous les documents HTML commencent et se terminent par
Ces balises indiquent aux navigateurs que ce fichier est une page Web et pas seulement un fichier texte ordinaire ...
Étape 3: De quoi avez-vous besoin?
Pour commencer à créer des pages Web, il vous suffit de:
Un éditeur de mots. ..comme bloc-notes.
De nombreuses personnes qui créent des sites Web utilisent des programmes comme «Dreanweaver» et «Microsoft Frontpage» car ils facilitent la création de sites Web et aident au codage.
Mais la meilleure façon d'apprendre le HTML est d'utiliser les bases ... Bloc-notes et puis une fois que vous avez appris les bases, vous pouvez passer aux programmes d'édition ...
Étape 4: Structure de base d'un document HTML
Tous les documents HTML ont une balise "Tête" et "Corps" ...
Tous les documents HTML ont donc une structure similaire à celle-ci ...
(Démarrage du document html)
(Démarrage de la balise de tête)
(Fin de la balise head)
(Démarrage de la balise body)
(Fin de la balise body)
(Fin du document html)
REMARQUE: les balises HTML ne sont pas sensibles à la casse, cela signifie que peu importe si vous les écrivez en majuscules ou en minuscules ...
Chaque balise HTML, a une balise d' ouverture et une fermeture, et tout contenu entre ces balises, donne à ce contenu la propriété des commandes de balise ... ex: ... (Ceci est pour mettre le texte en gras)
Certaines balises HTML ont la balise d'ouverture et de fermeture dans la même balise ... ex:
(C'est pour casser la ligne)
Tout ce qui se trouve dans les balises body est directement affiché sur la page Web et tout ce qu'il y a dans les balises head, ils définissent et donnent des informations sur la page Web qui ne sont pas visibles lorsque vous affichez la page dans un navigateur Web.
Étape 5: balises de titre HTML
En HTML, il y a 6 ensembles de balises utilisées pour les titres ...
Ces balises vont toutes dans les balises du corps ...
Ceci est la plus grande rubrique
Ceci est la plus petite rubrique
REMARQUE: la plupart des gens font une erreur en utilisant ces balises pour agrandir ou réduire le texte, et cela ne devrait pas être fait, car les moteurs de recherche définissent la page par ces en-têtes pour savoir quelles parties de la page sont quoi ... et juste l'utiliser pour la taille de la police ne donnerait pas une bonne définition de la page par les moteurs de recherche ...
Étape 6: Éléments de texte (balises) en HTML
En HTML, il y a environ 5 balises qui définissent le texte dans la page Web.
Ces balises vont dans la section corps du document HTML.
Tout ici sera présenté comme un nouveau paragraphe
Cela ajoute un saut de ligne (c'est comme appuyer sur "Entrée" sur le clavier pendant la frappe)
Cela ajoute une ligne où qu'elle soit placée dans le document (règle horizontale)
Tout ici sera affiché tel qu'il est tapé ... tous les espaces et "Entrer" lorsque nous tapons seront affichés sur la page Web
Les balises les plus courantes sont les et
balises car elles sont utilisées dans presque toutes les pages Web ...
La balise pre est idéale si vous êtes paresseux et que vous souhaitez simplement que les espaces et les entrées soient comme vous le feriez au lieu d'ajouter les autres éléments de texte, mais il sera alors difficile pour les navigateurs et les moteurs de recherche d'analyser votre page ...
Étape 7: styles logiques pour le texte en HTML
Ces éléments vont à nouveau dans les balises du corps car ils définissent le texte qui est affiché sur la page Web ...
Il existe 3 principaux styles logiques pour le texte en HTML .... Text in here is emphasized
Text in here is strong
Computer code is put in here
La balise d'accentuation rend juste le texte en italique, mais un peu plus courbé que la police italique normale ...
La balise forte rend le texte en gras, mais le rend également un peu plus proche, car l'espacement des lettres est réduit.
La balise de code définit le code informatique qui doit être affiché sur la page Web, il a une police différente et l'espacement et la taille de la police sont petits ...
Étape 8: styles physiques pour le texte en HTML
Il n'y a que 2 styles physiques courants utilisés pour le texte de nos jours en HTML ....
Ces balises sont également insérées dans la partie corps du document. This text is bold
Ce texte est en italique
Ces balises sont très très courantes car tout le monde les utilise même dans des programmes d'édition de texte comme Microsoft Word ...
La balise en gras rend le texte plus épais et plus large et un peu plus long ...
La balise italique fait plier le texte un peu à droite.
Étape 9: Ajout d'images en HTML
C'est l'une des choses les plus simples à faire en HTML ...
Cette balise est également insérée dans la section corps du document ...
La balise ci-dessus ajoute une image à votre page ... et si vous souhaitez l'aligner, il vous suffit d'ajouter:
align="right"
align="letf"
align="center" / Ajoutez l'un ou l'autre juste après avoir fermé les guillemets et avant le signe supérieur à
Remarque: l'image que vous ajoutez doit se trouver dans le même dossier que celui dans lequel votre document HTML est enregistré, sinon vous devez spécifier le chemin du fichier vers l'image ...
Étape 10: listes en HTML
En HTML, il existe 2 types de listes:
1) Puces ou non ordonnées
2) Numéroté ou commandé
Celles-ci vont à nouveau dans la partie corps du document.
Chaque élément de la liste est spécifié avec le
First list item
Second list item
Third list item
First list item
Second list item
Third list item
First list item
Second list item
Third list item
First list item
Second list item
Third list item
First list item
Second list item
Third list item
First list item
Second list item
Third list item
First list item
Second list item
Third list item
First list item
Second list item
Third list item
First list item
Second list item
Third list item
First list item
Second list item
Third list item
First list item
Second list item
Third list item
First list item
Second list item
Third list item
First list item
Second list item
Third list item
First list item
Second list item
Third list item
First list item
Second list item
Third list item
First list item
Second list item
Third list item
First list item
Second list item
Third list item
First list item
Second list item
Third list item
First list item
Second list item
Third list item
First list item
Second list item
Third list item
First list item
Second list item
Third list item
First list item
Second list item
Third list item
First list item
Second list item
Third list item
First list item
Second list item
Third list item
First list item
Second list item
Third list item
First list item
Second list item
Third list item
First list item
Second list item
Third list item
First list item
Second list item
Third list item
First list item
Second list item
Third list item
First list item
Second list item
Third list item
Le premier est une liste ordonnée qui montre la liste avec des nombres de 1, 2, 3 et ainsi de suite ...
Le second est une liste non ordonnée qui montre la liste avec des puces ...
Étape 11: Liens en HTML
En HTML, il existe 3 principaux types de liens,
1) Lien ordinaire, pour créer un lien vers un autre site Web en ligne ou pour créer un lien vers une autre page Web sur votre ordinateur.
2) Lien d'images, pour utiliser une image elle-même comme lien cliquable.
3) Lien Mailto, pour créer un lien qui ouvre un client de messagerie.
Ces balises vont également dans la balise body du document
Un lien ordinaire: Jump to Google
Un lien d'image:
Un lien mailto:
Send email définit une ancre, elle est utilisée dans tous les liens et liens en ligne car elle crée une ancre partout où elle est insérée dans le code.
La propriété "href" / dans la balise indique à l'ancre de créer un lien vers le site Web ou une autre ancre elle-même dans certains cas ...
Étape 12: lien d'ancrage en HTML
Avez-vous vu ces sites Web sympas qui ont un index reliant différentes parties de leur page? comme Wikipedia?
//en.wikipedia.org/wiki/HTML (Regardez la partie contenu)
Pour les fabriquer, nous utilisons les balises d'ancrage et relions 2 balises d'ancrage ensemble,
Ces balises sont également utilisées dans la partie corps du document ... Step 5
Jump to step 5
La première balise indique que le texte Étape 5 est ancré au document avec le nom de "Étape 5"
La deuxième balise est la balise de lien qui fait du texte "Aller à l'étape 5" un lien qui renvoie à l'ancre de l'étape 5 que nous avons créée auparavant ...
L'utilisation de cette balise est absolument nécessaire pour les sites Web qui contiennent de nombreuses informations comme Wikipedia :)
Étape 13: Tableaux en HTML
Les tableaux se composent de 3 choses ... ou plus comme 3 balises ...
Les balises tr ajoutent une ligne à la table (Table Row)
Les balises td ajoutent des cellules au tableau (Description du tableau)
Jetez un œil aux images pour mieux comprendre le fonctionnement des tableaux ... car les tableaux sont l'une des parties les plus difficiles en HTML ...
Étape 14: cadres et IFrames en HTML
Les cadres et les IFrames sont la même chose, car ils sont utilisés pour afficher une page Web dans une boîte semblable à une autre page Web ....
IFrame est utilisé lorsque vous n'avez qu'une seule page Web que vous souhaitez afficher sur votre page Web dans une petite boîte ...
Cela montrera www.google.com dans un petit cadre dans votre site Web ...
Les cadres sont toujours à l'intérieur des balises et car ces balises regroupent les cadres ... faites exactement la même chose que mais ils sont utilisés lorsque vous avez plus d'un cadre (page Web) que vous souhaitez afficher et sont regroupés par balises ... Combien de cadres que vous insérez, ceux-ci sont affichés dans la même fenêtre de navigateur et ils sont divisés également ...
Lorsque vous utilisez des cadres, vous ne pouvez pas utiliser les balises, tout ce que vous pouvez faire est donc d'afficher plus d'une page Web dans une fenêtre de navigateur ... L'ajout de balises arrêtera le fonctionnement des balises
Un moyen facile de se rappeler qui est lequel, iframe est pour des images simples car "I Frame" sonne comme "Independent Frame" /
Ces balises ne sont pas très courantes dans la plupart des sites Web ... mais certains sites Web utilisent encore ces balises ...
Étape 15: Entités communes HTML
En HTML, si vous souhaitez insérer du texte comme © etc., vous utilisez souvent des entités HTML pour afficher les symboles afin qu'ils ne soient pas mélangés avec des balises dans le document.
Toutes les entités commencent par un signe & ... < = <(Moins que le symbole) > => (Supérieur au symbole) © = © (symbole de copyright) = (Espace insécable) (HTML supprime tous les espaces supplémentaires que vous ajoutez dans votre écriture, donc dans un
si vous avez 10 espaces, seulement 1 espace sera vu car le reste est supprimé ... si vous voulez que tous ceux-ci soient vus alors vous ajoutez l'entité à votre
tag et cela ajoutera 1 espace permanent à votre
étiquette...
Il y a 2 façons d'écrire une entité, l'une avec le code de caractère comme les 2 premiers exemples, et l'autre avec le code numérique, comme le troisième exemple ... (Les entités numériques ont "#" devant elles)
Ces entités sont essentielles si vous voulez que votre document HTML affiche tout comme vous le souhaitez et ne pas mélanger etc. avec les balises ...
Étape 16: Tags de devis et de Blockquote
Ces deux balises sont utilisées pour afficher les citations ...
le Quotation La balise est utilisée pour afficher de courtes citations.
La balise Quotation est utilisée pour afficher de longues citations
La balise ajoute des guillemets avant et après son contenu ("Contenu")
le Quotation la balise sépare le texte de ce qui l'entoure en le transformant en bloc et en l'indentant un peu, comme nous le faisons dans les essais pour bloquer les longues citations dans un paragraphe différent
CE TEXTE A ÉTÉ COTÉ PAR BLOC (Ceci est un bloc-citation)
La balise est assez utile car elle indente le contenu, mais la balise n'est pas très utile car nous pourrions simplement ajouter des citations nous-mêmes, mais cela rend le texte plus organisé ...
Étape 17: Titre de la page Web en HTML
Pour une modification, cette balise est ajoutée dans la section du document, cette balise indique quel est le titre de votre document, c'est ce qui apparaîtra sur l'onglet ou le titre de la page de votre page web .... regardez les images pour mieux comprendre.
THIS IS THE TITLE OF THE PAGE!
Ce n'est pas un élément facultatif d'une page Web, chaque page Web doit avoir un titre, sinon le nom du fichier sera affiché sous forme de vignette ...
Étape 18: balises Meta en HTML
Ceci est un autre élément principal ...
Il donne une description de ce qu'est votre site sur Internet.
La première balise est une balise META de description et le contenu décrit votre site Web ...
La deuxième balise est une balise META de mot clé et le contenu donne des mots clés sur votre site Web ...
Il existe d'autres balises META là-bas utilisées pour différentes choses comme "méta auteur", etc., mais ce sont les plus courantes ...
REMARQUE: Les moteurs de recherche et les logiciels de classement de sites Web recherchent la balise META pour comprendre en quoi consiste le site Web et à quelle catégorie appartient-il ...
Étape 19: CSS, qu'est-ce que c'est?
CSS, comme je l'ai déjà dit, signifie feuilles de style en cascade
Ces styles que nous appliquons décident comment afficher et placer les éléments HTML.
Il existe 3 façons d'appliquer des styles à notre document HTML:
1) Feuille de style externe
2) Feuille de style interne
3) Styles intégrés
CSS a été introduit parce que HTML a été créé uniquement pour noter les informations avec des balises comme
etc...
CSS était censé donner à HTML tous les styles dont il avait besoin ...
Les commandes en CSS sont appelées "règles" comme les "balises" dans les documents HTML ...
Étape 20: Syntaxe en CSS
Chaque règle CSS contient 2 parties,
1) Sélecteur (Chaque règle ne peut avoir qu'un seul sélecteur)
2) Déclaration (chaque règle peut avoir plus d'une déclaration)
Le sélecteur est la balise HTML réelle que vous souhaitez styliser et modifier, donc si vous voulez changer l'apparence d'un
tag, puis
Sélecteur = h1
Déclaration = couleur: violet poids de la police: gras
(Ces déclarations sont utilisées si vous voulez faire quoi que ce soit contenu dans le tag pour être de couleur violette et être vu en gras)
Dans les déclarations, la première partie est la propriété, "propriété CSS" (couleur, poids de la police) et la deuxième partie est la "valeur" (violet, gras)Étape 21: Ajout de commentaires en CSS
Dans les déclarations, la première partie est la propriété, "propriété CSS" (couleur, poids de la police) et la deuxième partie est la "valeur" (violet, gras)
Étape 21: Ajout de commentaires en CSS
Si votre fichier CSS contient beaucoup de règles, alors pour rendre la règle plus claire, vous pouvez utiliser des commentaires pour écrire tout ce que vous voulez et il ne sera pas affiché ou interrompra les règles CSS ...
/*commentaire*/
Voici comment un commentaire est ajouté en CSS, beaucoup plus simple qu'en HTML ( )
Vous pouvez saisir ce que font certaines règles si vous n'êtes pas sûr, puis vous pouvez le rechercher en ligne, puis ajouter un commentaire indiquant ce que fait cette règle spécifique ...
Étape 22: ID CSS et règles de classe
Disons que vous voulez créer une boîte à droite de votre page où vous pouvez insérer du texte ... alors vous devrez créer votre propre balise et la définir via CSS pour qu'elle le fasse ....
Nous utilisons des sélecteurs ID et CLASS pour faire le travail pour nous ...
Nous les utilisons comme ceci:
Fichier HTML
This content goes into the box on the right hand side of the page
This content goes into the box on the right hand side of the page
Fichier CSS
#
MYFIRSTDIVID
{
float:right;
height:100px;
width:100px;
border: 2px solid black;
} MYFIRSTDIVID
{
float:right;
height:100px;
width:100px;
border: 2px solid black;
} Pour styliser les identifiants div que vous faites, vous utilisez le signe "#" dans le fichier CSS ...
Pour styliser les classes div que vous créez, vous utilisez un "." (point) dans le fichier CSS
Les ID sont utilisés lorsque vous le faites comme une balise complètement différente comme dans l'exemple ci-dessus, mais les CLASSES sont utilisées lorsque vous souhaitez styliser des choses à l'intérieur d'une autre balise, comme
Fichier HTML
This text is styled by div class...
This text is styled by div class...Fichier CSS
.MYFIRSTDIVCLASS
{
font-style:italic;
font-weight:bold;
font-color:yellow;
} Les classes sont donc utilisées lorsque vous avez la classe div spécifique dans une autre balise HTML (à l'exclusion des balises HTML, Body et Head)
Les éléments prédéfinis comme (h2, p, h1, br, em, i, b etc ...) sont édités à l'aide de la fonction de classe div car ils sont répétés beaucoup de fois dans le document, et donc il doit s'agir d'un div de classe ...
Les identifiants Div sont utilisés lorsque vous allez utiliser l'élément styles une seule fois dans le document HTML ...
Étape 23: 3 types de feuilles de style ...
Si vous utilisez une feuille de style externe pour CSS, vous devrez lier la feuille de style au document HTML dans la balise head à l'aide de
L'attribut "href" doit avoir le nom de fichier de votre fichier CSS .... et tous les fichiers CSS externes doivent se terminer par le type de fichier ".css"
Les fichiers CSS ne doivent contenir aucune balise HTML comme
etc...
Si vous utilisez une feuille de style interne, vous écrivez ce qui suit dans les balises head:
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Le xxxxxxxx doit contenir tout ce que contient votre feuille de style externe ... il doit donc contenir toutes les règles ...
Si vous utilisez un style en ligne, vous devrez effectuer les opérations suivantes:
Si vous souhaitez styliser le
tag avec un style en ligne,
Ensuite, vous devez ajouter un attribut "style" et toutes vos règles y vont ...
Ceci est un titre.
REMARQUE: les styles en ligne doivent être utilisés le moins possible car CSS a été créé de manière à ce qu'il n'y ait pas de style dans le document HTML, donc s'il y a des styles en ligne partout dans votre document, alors c'est un gaspillage car votre document HTML contient du style. ..Étape 24: Styles de texte CSS
Il existe quelques styles de texte que vous pouvez attribuer aux textes dans toutes les balises ...
Couleur du texte:
ex: p {color:black;)
p {color:#000000;)
Les exemples ci-dessus feront apparaître tout le texte des balises de paragraphe en noir.
Décoration de texte:
ex: p {text-decoration:none;}
p {text-decoration:underline;)
Le premier exemple supprimera les soulignements, les surlignages, etc. et fera apparaître le texte normalement ... ceci est utile si vous ne voulez pas que les liens aient un soulignement ...
Le deuxième exemple ajoute un soulignement à n'importe quel texte du
Ce texte est souligné
Mots clés.Retrait du texte:
ex:
p {text-indent:30px;) Cela mettra en retrait la première ligne du
tag de 30 px ...
Transformation de texte:
ex: p {text-transform:uppercase;)
Cela rendra tout le texte
Ce texte est en majuscule
balises majuscules.Étape 25: styles de police en CSS
Si vous souhaitez changer la police du texte dans une balise, vous utilisez le sélecteur de famille de polices ...
ex: p {font-family:Arial;}
p {font-family:Verdana;}
Dans le premier exemple, tout le texte du les tags seront dans Arial ...
Dans le deuxième exemple, tout le texte du les tags seront à Verdana ...
Style de police:
ex: p {font-style:italic;}
p {font-style:oblique;}
Dans le premier exemple, le texte du les tags seront en italique ...
Dans le deuxième exemple, le texte du les balises seront en oblique (la police oblique est très similaire à la police en italique)
Taille de police :
ex: p {font-size:16px;}
p {font-size:1em;}
Dans le premier et le deuxième exemple, la taille de la police dans le balises est 16px ...
1em = 16px
"em" a été introduit en raison d'un problème de redimensionnement avec Internet Explorer.
Étape 26: style d'arrière-plan CSS
Votre arrière-plan peut avoir une image ou simplement une couleur comme arrière-plan ...
Donnez une couleur à votre fond:
ex: body {background-color:#000000;}
body {background-color:black;}
Les deux exemples donnent à votre arrière-plan une couleur noire
Définissez une image comme arrière-plan:
ex: body {background-image:url( animals.jpg );}
L'exemple ci-dessus définira l'image "animals.jpg" comme arrière-plan et la répétera autant de fois que nécessaire pour s'adapter à l'arrière-plan ...
Étape 27: Examen, résumé et finition
Dans cet instructable, j'ai couvert le sujet de HTML 4.01 et non de HTML 5.0 car il est toujours en cours de développement et de nombreuses balises sont encore en cours de modification, de suppression, etc. J'ai donc décidé de vous enseigner le HTML 4.01 plus stable.
J'ai couvert CSS 3.0 car c'est la dernière version et est assez stable ...
Si vous avez des questions, alors postez-les dans les commentaires, je serai heureux de clarifier vos doutes ...
Si vous allez réellement créer un site Web, une fois que vous l'avez fait, postez un commentaire avec le code :) J'aimerais voir quelles sortes de sites Web sympas vous créez!
J'ai appris le HTML sur quelques sites Web et à l'école ...
//htmldog.com/
//www.littlewebhut.com/
//www.w3.org/
//www.htmlgoodies.com/
w3.org est leur site Web comme mentionné ci-dessus
Et ensuite?
- Maintenant que vous connaissez les bases du HTML et du CSS, vous pouvez rechercher en ligne des tutoriels plus avancés (YouTube a de très bons tutoriels) .Une fois que vous pensez maîtriser ces langues, vous pouvez aller de l'avant et demander une certification ... et puis une fois que vous êtes certifié, vous pouvez créer vos propres sites Web et gagner votre vie ... si vous devenez concepteur de sites Web ... appelons-le "webmaster" ...
- Commencez à apprendre Javascript ou un autre langage de script pour rendre votre site Web plus interactif
- Commencez à apprendre AJAX, PHP etc ... pour commencer à collecter des informations auprès des utilisateurs, comme les connexions etc ...
- Optez pour le C, C ++, Java plus dur et plus avancé ou d'autres langages de programmation puissants pour devenir un concepteur de programme et pas seulement un concepteur de sites Web.
Pièces jointes
