Transcription
1. Introduction HTML: Si vous voulez en savoir plus sur
le HTML, au point où vous pouvez créer votre propre site Web simple en moins de 30 minutes si
vous êtes au bon endroit. Et la meilleure chose
à ce sujet, c'est que vous
n'avez même pas besoin d'
installer quoi que ce soit. Vous pouvez suivre
ce cours en utilisant des éditeurs de textes
en ligne
facilement disponibles. Et nous allons les jeter un coup d'
œil dans une seconde. Mais d'abord, qu'est-ce que le HTML ? Html signifie Hypertext
Markup Language. À quoi sert-il ? Vous pouvez vous demander si son DML garantit le bon formatage
des textes et images pour votre navigateur
Internet. Gardez à l'esprit que le HTML n'est pas un langage de programmation et que le sentiment d'avoir de la logique
et des conditions, il est simplement utilisé pour afficher du texte et des images
pour la plupart. Mais cela à lui seul le rend très
crucial pour le développement Web. Parce qu'est-ce qu'un site Web
sans texte ni images, n'est-ce pas ? Les trois principales sections de
ce cours sont donc qu'est-ce que le HTML ? Ce que nous avons déjà fait l'objet d'une syntaxe de
base pour
nous assurer de bien comprendre comment HTML a écrit. Et enfin, créer une page Web. Commençons donc. Le ferons-nous ?
2. Créez votre première page Web !: Jetons donc un coup d'
œil à la façon dont nous pouvons créer notre propre fichier HTML pour cela, disons vers le
bureau ou partout où vous choisissez de créer votre fichier
HTML. Je vais juste créer un
nouveau fichier et le nommer HTML. Ensuite, à l'intérieur de ce
fichier, cliquez avec le bouton droit sur Nouveau. Ensuite, nous allons
cliquer sur Document texte. Nous devrions voir créer de nouveaux
documents. Maintenant, pour afficher l'
extension de notre fichier, nous allons cliquer sur Afficher le clic gauche sur cette case qui indique les extensions de nom de
fichier. Cela nous permet de voir l'
extension de notre fichier. Dans ce cas, c'est ddy. Nous voulons qu'il s'agisse d'un fichier HTML. Donc, ce que nous allons faire, c'est changer
ce dx jour en HTML. Cela nous
avertira que nous
modifions l'extension du
nom de fichier. Nous cliquons sur Oui. Et maintenant, changeons le nom de notre fichier
en index, par exemple. Maintenant, nos fonds devraient
avoir une icône de navigateur vers moins montrer l'âge de
Microsoft, mais je préfère le
remplacer par Google Chrome. Double-cliquez
dessus et ouvrons-le. Bien sûr, il a l'air noir. C'est parce que nous n'avons
rien ajouté à l'ancien fichier HTML. Pour ajouter des éléments à notre fichier, nous allons cliquer avec le bouton droit de la souris, puis l'ouvrir avec un éditeur de texte. J'ai du code Visual Studio. Si vous n'avez pas d'éditeur de texte, vous pouvez simplement utiliser la note
par défaut,
mais commencer à écrire votre code. Mais cela ne
semble pas très pratique. Au lieu de cela, nous allons
écrire notre code et notre magnifique éditeur de texte
en ligne. Et une fois que nous aurons terminé, nous copierons
le fichier HTML total que nous avons créé ici. Ça semble assez juste.
Commençons. Allons sur notre navigateur
et saisissons dans l'onglet URL, W3 schools.com slash client. Double-cliquez sur Essayer l'éditeur
frontend. Ensuite, nous supprimerons ce code. Nous avons maintenant une
toile vierge avec laquelle travailler. Alors, comment fonctionne le HTML ? Il semblait, pour la plupart, constitué de balises qui
nous permettent d'embellir notre texte. Sinon, nous pourrions simplement
taper librement sans aucune balise et cela
affichera toujours nos textes
sur la page Web. Par exemple, mon premier site Web. Cliquons sur Exécuter. Oh, vous voyez, je tape simplement la nouvelle ligne
dans le code source, mais cela ne l'a pas montré dans le produit final
ou dans le navigateur. C'est ici que les tags
viennent et jouent. balises indiquent à votre navigateur d'afficher les choses
d'une manière spécifique. Voyons maintenant comment nous pouvons utiliser balises pour structurer nos textes et les placer où nous le voulons. Nous avons donc tapé bonjour. Ensuite, une nouvelle ligne qui dit «
C'est mon premier site web ». faut donc dire qu'
il y a
un saut de ligne en haut et qu'il y a une déchirure. Pour ce faire, nous utiliserons des
balises pour être plus spécifiques, la balise BR, qui
signifie saut de ligne. Nous allons donc
avoir Hello, puis BR. Lançons notre code. Et au fait, je n'ai pas besoin de
placer la pile dans une nouvelle ligne, je pourrais la placer à côté de ça, et cela
aurait toujours le même effet. La balise BR ici indique donc au
navigateur de commencer une nouvelle ligne. Disons maintenant, par exemple, que notre texte ne serait pas gras. Nous allons simplement utiliser le tag p, qui signifie Bolt. Par exemple, j'ai
remarqué que j'ai ouvert mon tag p ici et je devais le fermer ici. Sinon, il aurait mis en gras tous les textes qui
viennent après. Par exemple, si nous
avions plus de texte après, c'est mon premier site Web, nous n'avons pas fermé la balise en gras. C'est ce que nous allons obtenir. Donc, un code HTML, parfois nous avons une balise d'ouverture
, puis une balise de fermeture. C'est pour dire à
notre navigateur, hé, ne faites ce balisage que pour
ces textes spécifiques. Maintenant, lorsque nous ajoutons
la balise de fermeture, notre navigateur comprend exactement
quels textes doivent être gras. Et c'est à peu près
comme ça que ça fonctionne en général. Vous n'avez qu'une balise qui
fait quelque chose, puis vous insérez le texte entre celui-ci sur lequel vous souhaitez
que la
balise fonctionne. Par exemple, je
voulais créer une liste. Je regarde juste des listes HTML
sur Internet. Ensuite, choisissons les premiers résultats
de recherche. Par exemple. Nous pouvons copier ce texte et le
coller dans notre fichier. Nous avons maintenant une liste
dans notre fichier HTML. Nous pouvons modifier À vos propres besoins. Par exemple, nous pouvons
changer le café Apple et
le personnaliser et le prendre comme modèle, puis ajuster À ou besoins. Cela fonctionne maintenant parce que notre
fichier possède une extension HTML, mais dans un scénario réel, nous devons ajouter des balises en haut
de notre code pour spécifier qu'il s'agit
bien d'un fichier HTML. La première étape que nous devons
ajouter est donc la balise DOCTYPE. Nous allons donc entrer dans une nouvelle ligne et
laisser de la place à l'attaque. Chien. Bien sûr, cela ne
nécessite pas la fermeture des balises. Ce n'est pas vraiment une balise, c'est plutôt comme une inflammation pour notre navigateur qu'il s'
agit bien d'un code HTML. Maintenant, après la
balise DOCTYPE, la balise HTML apparaît. Il s'agit d'une balise qui
indique au navigateur que tout ce
qu'il contient est un code HTML. Et maintenant, à l'intérieur de la
balise HTML se trouvent les deux balises principales. C'est la tête et le corps. C'est donc là que commence la tête et c'est ce que la tête. De même, c'est
là que le corps commence. Et c'est là que le corps et la balise body sont en effet
le corps de notre page Web. Il contient la plupart des
contenus que nous voyons sur la page Web. Pour rendre notre code
plus structuré, déplacons notre code
vers la balise body. Ensuite, pour le rendre plus structuré, je vais simplement mettre
tout cela en surbrillance et appuyer sur Tab. Examinons maintenant les principales balises que nous utilisons par défaut dans n'importe quelle
page Web que nous créons. Le premier est la
métabalise, la section de tête. Pour afficher correctement une
page HTML, un navigateur Web doit savoir
quel jeu de caractères utiliser. Il s'agit du
jeu de caractères standard
par défaut utilisé en UTF-8. La prochaine métabalise que nous voulons examiner est la balise d'affichage. Cela rend
notre page Web plus réactive en définissant la
largeur sur la largeur de l'appareil. Il permet à beaucoup de
sites Web de modifier sa taille tout en
conservant la lisibilité. Ainsi, par exemple, un téléphone
a généralement un écran
plus petit qu'un ordinateur portable. Ces balises
Meta permettent au téléphone visualiser cette page Web
sans problème. Maintenant, après ces
étiquettes métalliques vient l'étiquette de titre. La balise titre également. Je l'ai intitulé donne un titre à notre page
Web. Laissez-moi vous montrer de quoi
je parle. Si je copie ce code
et que je l'ouvre avec bloc-notes et que je colle mon code
ici, puis je l'ouvre. Comme vous pouvez le voir, le titre
ici est le nom du fichier. Nous voulons modifier ce titre. Pour ce faire, nous
utiliserons la balise titre. Revenons donc à notre code. Ouvrez-le avec le bloc-notes. Créons donc un nouveau
titre pour notre page Web. Maintenant que nous avons fini
notre titre, nous le fermons. Maintenant, lançons ça et
voyons à quoi ça ressemble. Comme vous pouvez le voir, il
affiche le titre ici. Revenons donc
à notre éditeur de texte. Je vais coller
le titre ici, et c'est à peu près tout
pour l'étiquette principale. Jetons un coup d'œil à
la section du corps. Ici, nous pouvons mettre tout le
contenu de notre salaire. Tout d'abord, jetons
un coup d'œil à la balise H1. Nous allons donc taper. Il s'
agit d'un titre important, le plus grand pour être plus spécifique, nous avons six niveaux de titres, allant de H1 à H6. H1 est le niveau de titre le plus élevé et le plus grand en
termes de taille de police. Il est six, c'est
le plus bas et le plus petit en
termes de taille de police, il est très peu probable que vous les utilisiez
toutes, mais jetons-y un coup d'œil
rapidement. Maintenant, l'une des
balises les plus courantes que vous utiliserez et le corps est la balise p
ou la balise de paragraphe, comme son nom l'indique, c'est une balise dans laquelle vous
pouvez écrire vos paragraphes. Nous allons donc jeter un coup d'œil. C'est à ça que ça ressemble. Entre les deux, nous avons
basé notre graphique produit. Remplissons maintenant notre balise p
avec un paragraphe aléatoire. Pour cela, je vais simplement Google
un document Wikipédia aléatoire. Ensuite, je vais coller mon paragraphe
ici. Ou vous savez quoi ? Je vais en fait le
déplacer en dessous de la liste. Nous pouvons ajouter de nouvelles lignes ou
espaces dans le code source, mais le navigateur l'
ignore car chaque mot ne possède qu'un seul espace. Et les lignes ne se cassent pas à moins que vous indiquiez
explicitement à l'aide de la balise PR. Ok, donc nous allons enlever tout ce gâchis, car
laissez-moi juste récupérer ça. Par exemple,
ajoutons une nouvelle ligne ici. Vous voulez peut-être une autre ligne. Et si vous remarquez que ces éléments B sont des éléments ne nécessitent pas
de balise de fermeture. C'est ce qu'on appelle un élément vide, évitez l'élément est un élément. le modèle de contenu ne lui permet
jamais d' avoir du contenu en
aucune circonstance. Si nous voulons forcer
nos textes à être représentés comme nous les
écrivons dans le code source. Nous pouvons utiliser la balise p
au lieu de la balise p. Par exemple. Voyons à quoi ça ressemble. Bien sûr, ça ressemble à un gâchis. Cela pourrait
être utile pour afficher texte du
code là où les
lignes et les espaces comptent. Comme vous pouvez le voir, cela
ressemble à un gâchis, mais c'est plus approprié pour
afficher le code. Je suppose que c'est
l'un de ses cas d'utilisation. Maintenant que nous savons
comment structurer
nos textes HTML à l'aide de
sauts de ligne et de paragraphes. Jetons un coup d'œil à la façon dont nous pouvons
coiffer nos textes en utilisant du HTML. Gardez à l'esprit que certains d'entre eux ne
sont pas utilisés autant nos jours, car le CSS est
certainement le style Delta, le document HTML pour nous. Mais nous pouvons quand même les jeter un
coup d'œil, le premier
que nous avons déjà vu est la balise audacieuse, par exemple ici. Il y a aussi un italique. Il y a également le tag UE
pour la tâche sous-jacente. Il y a aussi l'
étiquette de mise en valeur et la balise forte. Ils sont identiques à l'
italique et à l'ampoule. Ok, alors
retirons cette pile. Nous pouvons séparer
les sections de notre page Web à l'aide de la
règle horizontale ou de la balise HR Par exemple, séparons
ces deux sections. Nous pouvons créer des liens dans notre document HTML à l'aide de
l'ancre de la balise a. Bon, créons donc un lien hypertexte à la
fin de notre paragraphe. À l'intérieur de H ref ou de la référence
hypertexte, nous placerons le lien vers
lequel nous voulons emmener l'utilisateur. Je vais utiliser le lien
Wikipédia ici. Et maintenant, entre ces deux-là, je vais écrire
le texte que nous voulons. Il s'agit des textes sur lesquels l'
utilisateur peut cliquer. Maintenant, cliquons sur Exécuter. Maintenant, je ne vais pas cliquer dessus car
cela
va l'ouvrir la même page et
cela va
ruiner tout notre code ici. Maintenant, si je
clique dessus, il va l'ouvrir
sur la même page. Oh, d'accord. Je pensais qu'il allait s'
ouvrir. D'accord. Ce n'est pas mal. Mais de toute façon, nous voulons l'
ouvrir dans un nouvel onglet lorsque
nous cliquons dessus, c' est
ce que l'
attribut cible entre en jeu. C'est ainsi que nous utilisons
l'attribut cible pour ouvrir notre lien dans un nouvel onglet. Ainsi, après le mot lien, cible est égale à un trait de soulignement, vide. Maintenant, ouvrons notre
code et cliquons dessus. Comme vous pouvez le constater, il s'ouvre dans un nouvel onglet. Maintenant,
c'est beaucoup mieux. Voyons maintenant
comment ajouter une image à notre document HTML. Donc, c'est simplement à
ça que ça ressemble. Vous pouvez utiliser cette option en supposant que l'image est enregistrée
dans le même dossier, votre fichier HTML est enregistré. Sinon, vous pouvez utiliser un lien, mais il n'est pas très recommandé d'utiliser un lien vers une
image car il peut ne pas être aussi beau qu' une image déjà
téléchargée sur votre PC. , si nous cherchons
un pack de cartes aléatoires sur Internet exemple, si nous cherchons
un pack de cartes aléatoires sur Internet. Et choisissons
cela par exemple. Prenons cette URL
et collez-la ici. Lançons notre code. Le cas échéant, nous pouvons
ajouter une balise alt. Cela servira de description pour le visualiseur que l'
image ne charge pas. Pour une raison quelconque, vous pouvez
écrire une petite description. D'accord ? Bien sûr,
cela ne va pas s'afficher car l'image est parfaitement
chargée. Découpons donc ce lien, par
exemple, et
voyons s'il fonctionne. Comme vous pouvez le voir, parce qu'
il n'avait pas l'air. Ajoutons une nouvelle ligne ici. D'accord ? Donc, parce que nous avons
corrompu le lien, il utilise la balise alt. Ramenons donc
le lien complet. Nous pouvons également contrôler
la largeur et la hauteur de l'
image si nous le souhaitons. Sinon, il utilisera
la taille par défaut. Par exemple, nous
pouvons ajouter ici la largeur. Donnons une valeur
de 500, par exemple. Nous pouvons également ajouter une image de magasin
d'eau à l'aide de l'attribut bordure. Nous ajouterons une bordure égale à cinq. Par exemple. Voici donc comment ajouter
une image à l'aide d'un lien. Que faire si nous voulons ajouter
une image à partir de notre PC ? Tout d'abord, nous ne pouvons pas utiliser un éditeur de texte
en ligne pour cela. Et nous devons avoir une image dans le même dossier
que notre fichier HTML. J'ai donc une image ici
qui dit corp dot PNG. Je vais copier le collage
dans tous les dossiers HTML. D'accord ? Alors maintenant, copions
ce fichier HTML de code. Ouvrez-le avec le bloc-notes. Et ensuite, pour la source MH, au lieu de ce lien, je vais utiliser la voiture. C'est une image que j'ai
créée à titre d'exemple. Maintenant, ouvrons-le et
voyons à quoi il ressemble. Comme vous pouvez le voir sur les images. Et c'est l'un des avantages de
l'
utilisation d' un éditeur de texte
désinstallé sur le bureau. Il vous permet de
charger les images depuis votre PC en même temps que
bien d'autres choses. Ok, donc la prochaine chose que nous
voulons examiner est moins importante, pour la plupart, il y a
deux types de listes, les listes non ordonnées, les listes ordonnées. Il existe un troisième type
appelé liste de description. Nous allons y jeter un
coup d'œil dans une seconde. Mais pour l'instant, c'est à quoi ressemble des listes
non ordonnées. Voici à quoi ressemblent
les listes ordonnées. Remarquez qu'ils sont presque identiques à l'exception de la balise
qui les contient. listes non ordonnées comportent une balise UL. Le U signifie « non ordonné », et le L représente une liste
moins ordonnée. J'ai une étiquette OL. Le O signifie ordonné. Le L signifie liste. Jetons donc un coup d'œil à
la liste des descriptions. Le titre de notre description figure sur
l'onglet d t, ce qui peut signifier le titre de
la description. Et en dessous,
avec la balise DD, nous écririons la
description de l'article. Nous pourrions en fait
rendre ces titres audacieux pour les rendre plus
attrayants. Mais cela ne va pas vraiment le
rendre assez attrayant. Afin de rendre notre
site Web magnifique. Nous avons besoin de CSS pour cela, mais c'est un sujet
pour une autre vidéo. De plus, nous pourrions
créer des listes imbriquées, c'est-à-dire une liste à l'intérieur d'une liste. Jetons un coup d'œil. Il s'agit donc notre liste habituelle et nous
ajouterons un autre côté
inférieur à celui-ci. J'ai oublié de fermer la liste. Maintenant, je vais
supprimer le statut parce qu'ils
occupent trop de place. Cela signifie maintenant que
le clavier est les éléments d'équilibre et les
trois éléments situés en dessous, ou les éléments enfants, parce que nous conservons
notre structure de code, nous pouvons facilement le
dire en regardant le code indiquant qu'il s'agit de l'élément parent et il
s'agit de l'élément enfant. Mais si quelqu'un veut ignorer ces espacements, ce que vous pourriez, en passant, le navigateur
lirait très bien votre code. Toutefois, si vous deviez
lire votre code plus tard ou si quelqu'un d'autre
veut lire votre code, il aura du
mal à le faire. Donc, le code de quelqu'un
devait ressembler à ça. Ça va ressembler exactement
à celui-ci, mais c'est très difficile à lire. Cela fonctionnerait
très bien comme vous pouvez le voir. Cependant, il n'est pas très lisible et il est considéré comme
une mauvaise pratique. Maintenant, enfin, jetons un
coup d'œil aux tables. Nous pouvons utiliser des tables pour organiser
les données en lignes et en colonnes. Les tables utilisent la balise table. À l'intérieur de la balise table,
nous écrirons tout ce que la table inclut,
des barres à la colonne. Créons donc un rôle pour cela. Nous utiliserons la balise TR, ce qui signifie bande de rangée. À l'intérieur des lignes du tableau, nous allons créer les balises TH, ce qui signifie les balises d'en-tête de table. Maintenant, lançons notre code et
voyons à quoi ils ressemblent. Vous savez quoi ? Je vais prendre cela en haut
de ma page Web. Nous allons maintenant créer
une autre ligne de table. Pour ce faire, nous l'utiliserons. Mais au lieu de th,
nous utiliserons TD cette fois-ci parce qu'il ne s'agit
que de données régulières. La TD représente donc les données
de table et le th
signifie en-tête de table. Maintenant, modifions les valeurs par
rapport à leurs prix. Par exemple. Il affiche
des informations comme il se doit, mais cela semble vraiment très basique et pas si agréable
visuellement. Nous pouvons styliser notre table à
l'aide des attributs de table intégrés. Donc, chaque fois que nous allons faire,
nous allons mélanger une table. Un tableau est une ligne séparant
les lignes et les colonnes. Ajoutons donc cela en utilisant
les attributs de bordure. Nous pourrions porter ce nombre à cinq ou dix, par exemple. Mais ce que cela va faire, c'est seulement augmenter la largeur de
la bordure extérieure. Une autre chose que nous
pourrions faire pour afficher notre tableau et une
question plus formelle est l'utilisation de attribut de remplissage des cellules et d'
espacement des cellules. Nous pourrions également essayer l'attribut d'espacement des
cellules. Peut-être que dix, c'est un peu trop. Essayons cinq. Même ça, c'est trop. Peut-être que deux sont les meilleurs. Une autre chose que nous pourrions
faire est de nous assurer que le nombre de lignes et de
colonnes correspond. Donc, si nous devions supprimer l'une ou l'
autre des cellules, cela aurait l'air désordonné. Donc, si nous supprimons cette cellule, par
exemple, une autre chose vous pourriez faire est
de s'étendre sur deux colonnes. Par exemple, pour la souris, nous pouvons la faire s'étendre sur deux. Maintenant, il a l'air désordonné car il prend les colonnes
de l'écran. Nous pourrions donc soit nous débarrasser de l'écran, soit ajouter une
cellule de plus dans la rangée située sous eux. Alors ici, ajoutons une cellule et pouvons
lui donner 7$, par exemple. Donc maintenant, disons que la
souris pourrait maintenant le prix de 5$ ou 7$, alors que l'écran n'
a qu'un seul prix, qui est de 100$, mais il
ne dit pas le prix. Donc peut-être que le spectateur ne
comprend pas ce que cela signifie de se déplacer qui créera
une cellule indiquant le prix. Mais maintenant, comme les lignes et les
colonnes ne correspondent pas,
cela semble désordonné. Nous allons créer une
cellule fantôme sur la ligne au-dessus de celle-ci. Nous avons donc créé une cellule
et l'avons laissée vide. Nous pouvons élargir notre tableau simplement en copiant,
en visitant ces éléments. Donnons maintenant des prix
différents. Par exemple, vous pouvez
dire que cela semble bien, mais les prix du clavier
sont décalés vers la gauche. Nous voulons qu'ils soient centrés. Pour cela, nous pouvons utiliser
l'attribut style. C'est donc la cellule dans laquelle le prix et le style du clavier. Nous allons maintenant copier ceci dans
toutes les cellules présentes. Les valeurs du clavier, le prix du
clavier, je suis désolé. Ok, c'est plutôt comme ça. Maintenant, c'est beaucoup mieux, mais il répète le
mot prix plusieurs fois. N'est-ce pas une façon de couvrir le
prix sur trois rangées ? Nous pourrions le faire simplement en
utilisant l'attribut rowspan. Nous allons diviser trois rangées. C'est donc le prix de vente. Vous voulez une rangée de trois rangées. Maintenant que nous dépensons tous 23, allons nous débarrasser de
ces éléments de prix. Il a l'air un peu plus
minimaliste maintenant. Nous pouvons maintenant copier ce code et l'
insérer dans notre fichier HTML. Allons-le et
voyons à quoi
ça ressemble . Nous avons encore une chose. Changeons plutôt l'image pour
avoir des dessins animés PNG. Puisque ce n'est pas une reine appelée
unimodal, c'est un carton rouge. D'accord. C'est donc à peu près tout. Vous avez créé votre
toute première page Web. J'espère que cette
montre a valu la peine et j'espère qu'elle vous
a donné une compréhension
générale des fondamentaux du HTML. Merci beaucoup d'avoir regardé.
Naser Jamal, Computer Engineer
