Description de la page Web HTML CSS. Créer une page HTML dans le Bloc-notes : explications pour les nuls. Termes CSS de base

22.06.2020

Cours « Création de pages Web en utilisant le langage HTM L »

Sujet 1 : Démarrer avec HTML

Objectif du langage HTML

la toile -pages sont des fichiers spéciaux écrits en HTML ( Hyper Texte Balisage Langue - Langage Signalétique Hyper Text). Sous marquages fait référence à l'insertion dans le texte de codes spéciaux (balises) qui déterminent comment le document hypertexte final doit être affiché par un programme spécial - un navigateur.

Le langage HTML est destiné à créer des fichiers indépendants du système et ne décrit pas le format du document, mais décrit sa structure. Par exemple, s'il y a un titre dans le texte, alors le code HTML indique simplement que le fragment correspondant est un titre. Après avoir reçu un tel code, le programme de navigation décide lui-même quoi faire avec l'en-tête. Peut-être qu'il l'affichera dans une police plus grande ou l'alignera au centre de l'écran. Si ce texte est joué par un synthétiseur vocal, le synthétiseur utilisera ce code pour augmenter le volume et faire la pause nécessaire.

HTML est un langage informatique, en quelque sorte lié aux langages de programmation. Il comprend des règles assez strictes qui doivent être respectées pour obtenir les bons résultats.

Le langage HTML est apparu simultanément avec le service World Wide Web et s'est développé avec lui. C’est la base du World Wide Web et en même temps la raison de sa grande popularité.

HTML - déposer

Le fichier HTML est un fichier texte avec l'extension .htm ou . HTML La page Web est stockée sous forme de fichier HTML. Pour créer un fichier HTML, vous pouvez utiliser à la fois des éditeurs de texte simples, tels que le Bloc-notes ou Word Pad, et des éditeurs Web.

Structure des documents HTML

Un document HTML se compose d'un document principal et de balises de balisage, qui sont des ensembles de caractères ordinaires.

Tous les documents HTML ont une structure strictement définie. Le document doit commencer par une balise et se terminer par une balise de fermeture appropriée. Cette paire de balises indique au navigateur qu'il s'agit bien d'un document HTML.

Le document HTML se compose de sections d'en-tête et de corps du document, allant exactement dans cet ordre. La section des en-têtes est entourée de balises et et contient des informations sur le document dans son ensemble. En particulier, cette section doit contenir des balises et, entre lesquelles est placé le titre « officiel » du document.

Le texte du document lui-même se trouve dans le corps du document. Le corps du document est situé entre les balises et BODY >. En pratique, il est possible de déterminer l'emplacement de ces balises principales même en leur absence. Par conséquent, si les balises et , ainsi que les balises de fermeture correspondantes sont omises, le programme de navigation lui-même peut déterminer l'endroit où elles auraient dû se trouver. Néanmoins, lors de la création de pages Web, il n'est pas recommandé d'omettre ces balises.

Le document HTML valide le plus simple.

< HEAD >

< TITLE >Titre du document TITRE >

TÊTE >

< BODY >

CORPS >

Mots clésHTML

Le langage HTML se compose d'indicateurs de balisage spéciaux - des balises. Ils peuvent également être appelés commandes, instructions ou codes HTML.

Une balise est une instruction adressée au navigateur indiquant comment le texte doit être affiché. Toutes les balises commencent par un symbole inférieur à (). Cette paire de symboles est parfois appelée équerres. Après l'équerre d'ouverture vient mot-clé, définissant la balise.

Chaque balise HTML a un objectif particulier. La casse des lettres dans les noms de balises n'a pas d'importance : vous pouvez utiliser des lettres minuscules ou majuscules, bien qu'il soit courant d'utiliser des lettres majuscules pour distinguer les balises du texte normal du document.

Il existe deux types de balises : appariées et non appariées.

Balises appariées– ouverture et fermeture, semblables aux parenthèses dans une expression algébrique. Elles affectent le texte à partir du point où elles sont utilisées jusqu'au point où leur terminaison est indiquée (les balises fermantes commencent par une barre oblique (/).

Par exemple,< HTML >HTML >,P>, H3>

Les balises non appariées ont un effet unique là où elles apparaissent, il n'est donc pas nécessaire d'utiliser une balise de fermeture.

Par exemple,
, ,

La balise transporte des informations de service sur le site Web et n'est pas affichée sur l'écran du navigateur : il s'agit d'informations sur l'encodage de la page Web, sur l'auteur, ainsi qu'un ensemble de mots-clés de recherche qui affichent le contenu du site.

Exemple.

Exemple de création de tableau

D'après l'exemple, il est clair que la page utilise le codage Windows-1251 - le plus courant aujourd'hui, il vous suffit d'insérer cette balise sous cette forme sur votre page à chaque fois ; auteur de la page – Ivanov Ivan; Cette page est dédiée aux animaux.

Lorsqu'un document est affiché dans un navigateur, les balises elles-mêmes ne sont pas affichées, mais elles affectent la façon dont le document est affiché. Si par erreur une balise contient un mot-clé introuvable en HTML, la balise est entièrement ignorée.

Attributs des balises

Les balises d'ouverture peuvent souvent contenir des attributs qui affectent l'effet créé par la balise.

Les attributs sont des mots-clés supplémentaires séparés du mot-clé de balise et les uns des autres par des espaces.

Les attributs peuvent avoir des valeurs écrites après un signe égal (=). C'est toujours une bonne idée de mettre la valeur de l'attribut entre guillemets (simples ou doubles). Une chaîne entre guillemets ne doit pas contenir de guillemets. Vous pouvez omettre les guillemets pour les valeurs d'attribut composées uniquement des caractères suivants :

caractères de l'alphabet anglais;

périodes;
tirets (-).

Vous pouvez également omettre les guillemets pour les valeurs d'attribut constituées uniquement des caractères suivants (se référer au concept technique ):

caractères de l'alphabet anglais (A - Z, a - z)

chiffres (0 - 9)

périodes

tirets (-)

Ainsi, WIDTH=80 et ALIGN=CENTER sont des raccourcis légaux pour WIDTH="80" et ALIGN="CENTER" .
Les balises de fermeture ne contiennent pas d'attributs.

Exemples. POLICE >

commentaires

Tout comme tous les langages de programmation ont la possibilité d'ajouter des commentaires (des lignes de texte qui ne font pas partie du programme) dans un programme, le HTML aussi. Le commentaire commence par une balise spéciale. Un commentaire peut inclure n'importe quel caractère à l'exception du caractère supérieur à (>) et ne peut donc pas inclure de balises.

Le principe de l'héritage des balises

Balises de conteneur.
Nous savons déjà que les balises se composent pour la plupart de deux parties : l'ouverture (contenant également des attributs) et la fermeture, c'est-à-dire la « fin » de la balise. Les paramètres spécifiés dans la balise ne sont valables qu'entre son début et sa fin, c'est-à-dire uniquement à l'intérieur de la balise :

texte texte texte texte texte texte texte texte texte texte texte texte texte texte

texte texte texte texte texte texte texte texte texte texte texte texte texte texte

Les indentations à partir du bord gauche ne sont pas aléatoires : elles sont automatiquement définies par des programmes qui génèrent du code HTML pour en faciliter la lecture. Il suffit de comprendre que plus une balise est éloignée du bord gauche, plus elle est « profonde », plus le nombre de balises « seniors » pouvant agir sur elle est important.

Il convient également de noter que certains attributs des balises imbriquées peuvent également affecter les balises « senior » de niveau supérieur. Par exemple, cela est typique pour les tables imbriquées les unes dans les autres.
Si la taille du tableau interne est définie sur 100, alors le tableau externe ne peut pas avoir une taille inférieure à 100 pixels + épaisseur du cadre. Ainsi, la table imbriquée semble « étendre » celle dans laquelle elle est imbriquée. De plus, même s'il n'a pas de taille spécifiée et que la quantité de texte qu'il contient est importante, il agrandira le tableau « plus ancien » à la taille nécessaire pour afficher le nombre correspondant de lignes de texte. C'est ce qu'on appelle le « feedback ».

Travaux pratiques n°1

"Créer une page Web simple"

Objectif : apprendre à créer des pages Web dans l'éditeur de texte Notepad.

Instructions pour la mise en œuvre

Entrez la structure du document HTML ci-dessous :

À propos de nos petits frères.

Le contenu de la page Web sera publié ici

Enregistrez le fichier et nommez-le index.htm.

Ouvrez le fichier créé. Vous verrez à quoi ressemble le fichier que vous avez créé dans la fenêtre du navigateur.

Fermez votre navigateur.

Revenez au fichier que vous avez enregistré dans le Bloc-notes.

Apportez-y les modifications suivantes : au lieu des mots « Le contenu de la page Web sera publié ici », tapez ce qui suit : Ceci est ma première page .

En ligne< TITLE >indiquez : « Page d’accueil (votre nom et prénom). »

Enregistrez le fichier sous le nom de page 2.htm.

Visualisez le résultat dans un navigateur et, si nécessaire, modifiez le fichier à l'aide du Bloc-notes.

Sujet 2 : Balises HTML

Balises de formatage de texte physiques et logiques

Formatage de la police . Il existe un grand nombre d'éléments pour formater le texte. Vous pouvez formater le texte à l'aide d'éléments traditionnels : mettre en surbrillance des fragments en italique, en gras, sélectionner une police, une taille et une couleur de police, aligner des fragments de texte. Si l'auteur ne dispose pas d'options simples pour formater le texte, il peut recourir à des feuilles de style, qui élargissent considérablement les capacités de formatage du langage HTML.

Regardons de plus près les éléments standards du langage HTML qui permettent de formater du texte.

Police de caractère- Ce sont des tableaux permettant de remplacer le code par une image visible.
Chaque touche de votre clavier donne un code spécifique qui est reconnu par le système d'exploitation (système d'exploitation, dans la plupart des cas il s'agit de Windows ou Linux/Unix).
Ainsi, après avoir sélectionné une police spécifique, le système remplace le code reçu du clavier par l'image d'une lettre ou d'une icône correspondant dans la table des caractères de la police. Chaque police est un fichier. Un fichier contenant des images des lettres, chiffres et symboles attribués à chaque bouton. Installer une police signifie inclure un fichier contenant des tables de mappage supplémentaires dans le système. Les systèmes MS Windows utilisent généralement plusieurs polices fournies avec le système - à savoir :

Arial

Courrier Nouveau

Comic Sans

Times New Roman

Verdane

Chacune de ces polices est appropriée dans sa propre conception et son propre style. Le plus courant est Arial. 90 % de tous les visiteurs de votre future page possèdent toutes ces polices. Chaque police est un fichier indépendant dans le dossier Windows/fonts/ *.ttf. Comment donner à une police tel ou tel aspect en HTML ?
... POLICE > définition du type, de la taille et de la couleur de la police. Toutes ces caractéristiques sont définies à l'aide des attributs correspondants.

La taille absolue de la police est spécifiée par l'attribut si ze (size). Cet attribut peut prendre des valeurs de 1 à 7, la taille de police 1 étant la plus petite et la taille de police 7 la plus grande.
Exemples.

taille du texte 1
taille du texte 2
taille du texte 3
taille du texte 4
taille du texte 5

taille du texte 6
taille du texte 7

Si vous conduisez plus tranquillement, vous irez plus loin ONT >.
Les quatre premières tailles sont généralement utilisées dans la conception. Tout ce qui est plus haut est de mauvais goût et signe d'amateurisme, car cela prend trop de place et est difficile à lire. Certes, il existe également des applications pour des tailles plus grandes. Par exemple, dans la septième taille, vous pouvez écrire une lettrine (la première lettre du début d'un chapitre) : T e xte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte .
Entre autres choses, nous pouvons choisir la police elle-même utilisée pour afficher le texte. Ceci est fait par l'attribut face.

Exemples. Il s'agit d'une police arial de taille 3 ONT >
texte POLICE >
Comme vous pouvez le constater, ces deux attributs - taille et type de police - peuvent être placés dans n'importe quel ordre dans la balise :
Vous pouvez également utiliser l'attribut color. Le nom de la couleur est précisé soit par un nombre écrit en hexadécimal, par exemple color=”#ff 0000”, soit simplement par son nom écrit en anglais, par exemple, color=”red”. Exemples. Ceci est une police bleue FONT >
Il s'agit d'une police Arial de taille 3, de couleur bleue. POLICE >
La police peut également être : italique (italique), gras, soulignée, barrée, exposant, indice ou une combinaison de plusieurs de ces types. Ceci est réalisé respectivement avec les balises :
 texte Je >
texte B >
 texteU>
< S >texte S >
Texte SUP >
texte SUB >,
ainsi que leur combinaison, par exemple, texte U>B >
Mise en forme des paragraphes. Dans la plupart des documents conventionnels, les principales sections fonctionnelles sont en-têtes Et paragraphes. Les documents Web ne font pas exception. Pour désigner des paragraphes normaux en HTML, la balise est utilisée

…P > (Paragraphe). De plus, vous ne pouvez utiliser que la balise de début, puisque l'élément suivant

indique non seulement le début du paragraphe suivant, mais aussi la fin du précédent. Dans les cas où il est nécessaire d'indiquer la fin d'un paragraphe, vous pouvez également utiliser une balise de fin.
En plus de la balise de paragraphe, vous pouvez également utiliser l'attribut align :
align = « gauche » – alignement à gauche ;
align = "right" - alignement à droite ;
align =”center” - alignement central.
Exemple.

Chapitre 1P >

AnimationP >

page 3P >

HTML n'a aucun moyen de créer un retrait de paragraphe (« ligne rouge »), de sorte que le navigateur entre généralement une ligne vide entre les paragraphes pour rendre le texte lisible. Si vous devez passer à une nouvelle ligne sans créer de paragraphe, utilisez une seule balise
. Là où elle est placée, la ligne se termine et le texte restant est imprimé sur une nouvelle ligne. Cette balise est pratique à utiliser, par exemple, pour écrire des poèmes dans une colonne :
J'ai laissé tomber l'ours en peluche sur le sol
Ils ont arraché la patte de l'ours
Je ne le quitterai toujours pas,
Parce qu'il est bon.
Sur l'écran du navigateur, nous verrons un quatrain écrit de manière standard.

Un moyen important de créer des séparateurs dans le texte sont les règles à bandes horizontales, qui séparent visuellement les différentes parties du document les unes des autres. Une règle horizontale est créée avec une seule balise.. Avec son aide, il est très pratique de diviser la page en parties. Un certain nombre d'attributs sont autorisés dans une balise :

Alignement

aligner = « gauche »

aligner = "centrer"

aligner = « à droite »

aligner = « justifier »

Épaisseur et longueur du trait en pixels.

Taille = 3 (largeur en pixels)

largeur = 300 (longueur en pixels)

largeur = 100 % (longueur en pourcentage)

Couleur de la ligne

couleur = "rouge"

HTML prend en charge six niveaux de titres de documents internes. Ils sont étiquetés avec

… avant … .
Le titre du premier niveau est le plus grand et le titre du sixième niveau est le plus petit. Pour les titres, vous pouvez utiliser les attributs d’alignement à gauche, au centre et à droite.
Exemple. Le plus gros titre
Le plus petit en-tête

Animaux domestiques

Formatage logique du texte . Dans cette section, nous examinerons les balises qui, dans leur effet, sont très similaires aux balises qui définissent la taille, la couleur et le style de police. Cependant, la différence fondamentale est que ces balises décrivent en réalité les propriétés réelles du texte. Cela signifie que le texte peut apparaître différemment selon les navigateurs, mais un certain effet est garanti même si, pour une raison quelconque, il n'est pas possible d'appliquer des effets de police. Toutes ces balises sont appariées et affectent le texte placé entre les balises d'ouverture et de fermeture. La balise fermante est obligatoire.
La balise … est utilisée pour les citations, les titres de livres. Généralement affiché en italique.
Depuis que le langage HTML a été créé par des informaticiens, tout un groupe de balises est conçu pour représenter le texte des programmes informatiques et les résultats de l'interaction de l'utilisateur avec eux.
Étiqueter< CODE >... CODE > indique le code source d'un programme informatique, généralement affiché dans une police à espacement fixe (le plus souvent la police Courier), c'est-à-dire une police de taille fixe.
Étiqueter< KBD >... KBD > formate le texte qui doit être (ou a été) saisi à l'aide du clavier, généralement affiché en caractères gras à espacement fixe. Du clavier anglais - clavier
Exemple.

Pour démarrer Windows, tapez : gagner.
Code:
Pour démarrer Windows, tapez : gagner
La balise ... marque le texte comme échantillon. Utilisé pour marquer le texte sorti par les programmes. Affiché en police monospace.
Exemple.
C'est un texte normal
La balise ... est utilisée pour mettre en évidence les variables dans une liste de programmes. Généralement, ce texte est affiché en italique. De l'anglais var iable - variable.
Exemple.
UN, B, C
Code:
A , B , C var >

Étiqueter... EM > est utilisé pour mettre en évidence des éléments de texte (généralement en italique).
Étiqueter... STRONG > est utilisé pour faire ressortir plus fortement les éléments de texte (en gras).
Exemple.
C'est un texte normal
Et c'est du texte utilisant la balise.
Étant donné que l'accent sémantique est utilisé ici au lieu du design, il est recommandé d'utiliser ces balises au lieu des balises Et< B>.

Travaux pratiques n°2

"Mise en forme du texte sur une page Web"

Objectif : apprendre à formater la police et le texte d'une page Web.

Instructions pour la mise en œuvre

Dans l'élément< TITLE >indiquer le nom de la page « P/r No. 2 ».

Formatez le texte suivant selon les instructions (données en italique entre parenthèses) comme indiqué.

Animaux domestiques

(titreH 1)

(alignement au centre)

Chiens

(titreH 2)

(alignement au centre)

Sentinelles

(alignement à gauche, gras)

Chasse

(aligné à droite, gras)

Entraînement

(alignement au centre, italique gras)

Clubs Expositions Lieux

(alignement central, taille de police 10, couleur de police rouge, policeArial )

Poème

(couleur de police bleue, taille de police 6, alignement central)

je suis modeste dans la vie

Il n'y a pas besoin d'applaudissements

Mais comme je suis cool

Je regarde la coquille !

(alignement à gauche, taille de police 6)

Création de listes

Listes à puces. Une liste diffère du texte ordinaire en ce que l'utilisateur n'a pas besoin de penser à numéroter ses éléments : le programme se charge de cette tâche. Si la liste est complétée par de nouveaux éléments ou raccourcie, la numérotation est ajustée automatiquement. Dans le cas de listes non numérotées, le programme place des marqueurs devant chaque élément : cercles, rectangles, losanges ou autres images. En conséquence, la liste prend une forme lisible.

Balises de création de liste non ordonnée :

< LI >UL >
Étiqueter

est une sorte de cadre pour la liste. Il vous permet de séparer une liste d'une autre. Étiqueter
représente chaque élément.
Exemple.
Vue d'écran :
Balises pour créer une liste numérotée :< O L> < LI >OL >

Listes numérotées. La structure d'une liste numérotée est similaire à celle d'une liste non numérotée. La balise est utilisée uniquement pour le cadrage
. Chaque article est numéroté avec des chiffres arabes ou romains et des lettres de l'alphabet latin.

Exemple.

Élément de liste 1
Élément de liste 2
Élément de liste 3
OL>

Vue d'écran :

Élément de liste 1

Élément de liste 2

Élément de liste 3

La méthode de numérotation est spécifiée à l'aide de l'attribut type. Le tableau montre toutes les méthodes de numérotation :

Type de numérotation

Travaux pratiques n°3

"Création de listes numérotées et non numérotées"

Objectif : apprendre à créer des listes sur des pages Web.

Instructions de mise en œuvre :

1 . Créez une nouvelle page Web dans l'éditeur du Bloc-notes.

2. Dans l’élément, indiquez le nom de la page « P/r n°3 ».

3. Formatez le texte suivant selon les instructions (données en italique entre parenthèses) comme indiqué :

Le soleil devrait être :

(Taille de police 8, rouge,

alignement central)

1. Chaud.

2. Rond.

3. Jaune.

La neige devrait être :

(Taille de police 6, bleu,

alignement central)

B. Froid.

S. Fluffy.

(La police des deux listes est noire, taille 3).

Liens hypertextes
Types d'hyperliens. < A >... A > création d'un lien hypertexte.
L'attribut href est obligatoire dans cette balise. Sa valeur est l'URL vers laquelle pointe le lien. Le texte du lien est placé entre les balises< A >... Un >. Lorsqu'un document est affiché dans un navigateur, le texte du lien est généralement souligné et affiché en bleu. En cliquant sur un lien, vous accédez à l'URL spécifiée.

Il existe plusieurs types d'hyperliens.

Externe (lier une page Web avec des documents qui n'appartiennent pas à ce site Web).

Interne (lier des documents au sein d'un même site Web).

Chemin absolu. Si le lien hypertexte est externe, alors l'URL complète du document est indiquée, également appelée de manière absolue.
Exemple. Microsoft A >
Le principal inconvénient d'un chemin absolu est que lors du déplacement de fichiers vers un autre serveur sur Internet, tous les hyperliens doivent être modifiés.

Chemin relatif. Si l'hyperlien est interne, seule la partie de l'URL qui diffère entre les deux documents liés (ce qu'on appelle chemin relatif), par exemple, si deux documents se trouvent dans le même dossier, il suffit alors d'indiquer le nom du fichier vers lequel pointe le lien hypertexte.
Si les documents se trouvent dans des dossiers différents, alors le nom du dossier est indiqué en premier, puis le nom du fichier vers lequel pointe le lien hypertexte.

Exemples. Ma page personnelleA >
Course longue distanceA >
Il est plus pratique d'utiliser des liens internes, car dans ce cas, lors du déplacement d'un site Web vers un autre serveur, vous n'avez pas besoin de modifier des documents individuels.

Ancres. Les liens hypertextes peuvent pointer vers un emplacement spécifique au sein d'une page si vous insérez d'abord ancre. Anchor utilise également des balises et A >, mais au lieu d'avoir un attribut href, il nécessite un attribut name. La valeur de cet attribut est nom de l'ancre. Il ne peut être constitué que de lettres latines, de chiffres et ne doit pas contenir d'espaces.
Pour créer un lien vers une ancre installée, vous devez inclure le nom de l'ancre à la fin de l'URL après le nom du document, séparé par le symbole « # ».

Spécifier une adresse postale dans un lien hypertexte . Lorsqu'un lien hypertexte est utilisé pour spécifier une adresse e-mail, sa sélection ne vous amène pas à un nouveau document, mais lance le programme de messagerie de votre ordinateur pour envoyer un message au destinataire spécifié. Généralement, un tel lien est placé à la fin de la page pour permettre le contact avec le webmaster ou l'auteur de la page, par exemple : Ivanov AlexeïA >

Exemple.

Liens et ancresTITRE >
TÊTE >

De nouvelles versions des programmes du système d'exploitation standard et de nouveaux pilotes peuvent être trouvés sur le site Web de l'entreprise.
Microsoft A >

Et maintenant vous pouvez passer à ma page personnelleA >

Comment contacter l'auteur est décrit dans
fin de cette page
C'est ici que se trouve le contenu principal de la page
adresse »>Adresse e-mailA >
CORPS >
HTML >

Travaux pratiques n°4

"Créer des hyperliens"

Tâche 1. Création d'un lien hypertexte simple.

Objectif : apprendre à lier deux documents HTML à l'aide d'hyperliens.

Instructions de mise en œuvre :

Créez deux pages Web dans l'éditeur du Bloc-notes. Appelez une page 1.htm, la deuxième page 2.htm. Enregistrez les deux pages dans un dossier appelé site. Veuillez noter que les noms de dossiers et de pages doivent être en anglais et commencer par une lettre minuscule.

Dans l'élément, indiquez le nom de la page « P/r No. 4. Tâche 1 ».

Vers la page 2

Vers la page 1

Ouvrez la première page de votre navigateur et assurez-vous que les deux hyperliens fonctionnent correctement.

Tâche 2. Création de liens hypertexte.

Objectif : apprendre à lier trois documents HTML à l'aide d'hyperliens.

Vous pouvez terminer la deuxième tâche si vous avez terminé avec succès la tâche 1.

Créez une troisième page page 3.htm.

Sur la page page 3.htm, créez des hyperliens pour accéder aux pages page 1.htm et page 2.htm.

Sur les pages page 1.htm et page 2.htm, ajoutez un lien hypertexte pour accéder à la page 3.htm.

Ouvrez la première page de votre navigateur et assurez-vous que vous pouvez désormais passer de n'importe quelle page à l'une des trois pages créées.

Tâche 3. Couleur des hyperliens.

Objectif : apprendre à déterminer la couleur des hyperliens.

Vous pouvez terminer la tâche si vous avez terminé avec succès la tâche 2.

Sur les pages page 1.htm , page 2.htm et page 3.htm dans la balise, définissez la couleur des hyperliens :

Ouvrez la première page de votre navigateur et, en suivant les liens de page en page, assurez-vous que la couleur des hyperliens est correctement définie.

Dessins surla toile -page.

Les illustrations (dessins, photographies) jouent un rôle essentiel dans la conception des pages Web. Les images elles-mêmes sont stockées dans des fichiers séparés en dehors du document HTML, mais sont restituées en interne par le navigateur. Une seule balise est utilisée pour cela.< IMG >. Un attribut obligatoire de cette balise est l'attribut src, dont la valeur est le chemin d'accès au fichier contenant le dessin ou la photographie,

Si l'image se trouve dans le même dossier que la page Web, alors le chemin est simplement le nom du fichier, par exemple : . Si l'image se trouve dans un autre dossier, alors ce dossier doit être précisé, par exemple : . Si l'image est sur un autre site, alors le chemin est écrit en entier :
.

Dans la balise Vous pouvez également utiliser des attributs tels que :
height , width – définissez la hauteur et la largeur de la zone dans laquelle le dessin est affiché. Si un seul de ces attributs est spécifié, la deuxième taille est définie dans la proportion appropriée. Mais vous devez vous rappeler que la mise à l'échelle dégrade la qualité de l'image. La taille de l'image est mesurée en pixels ou en pourcentages, par exemple : , bordure – définit l'épaisseur du cadre autour de l'image (en pixels). Cet attribut ne peut pas être défini car, par défaut, il y a toujours un cadre autour de l'image. Mais si vous voulez le supprimer, alors définir la valeur de l'attribut border à zéro,
bordercolor – définit la couleur de la bordure autour de l'image, par exemple :
< IMG src="picture.gif" border="3" bordercolor="#CC0000">
Dans notre exemple, la couleur de la bordure est rouge et, bien entendu, l'attribut de bordure (épaisseur du cadre) ne doit pas être égal à zéro si vous souhaitez voir une bordure autour de l'image,
aligner – aligner l'image par rapport à d'autres objets :
l'image sera pressée contre le bord gauche de l'écran et le texte circulera autour d'elle vers la droite,
L'image est à droite, le texte est à gauche.

Le texte peut également être situé en bas de l'image (c'est la valeur par défaut) - (1), au milieu - (2) et en haut - (3) :
(1) -
(2) -
(3) -

vspace - définit la distance entre le texte et l'image (verticale) :
,
hspace - définit la distance entre le texte et l'image (horizontalement) :

< imgsrc=" pr1. png" hspace="30">
La distance est spécifiée en pixels.

Utiliser une balise vous pouvez utiliser des images dans des hyperliens, insérer des images dans des tableaux, résoudre des problèmes de conception...

Travaux pratiques n°5

"Utiliser une image comme lien hypertexte"

Objectif : apprendre à utiliser une image comme lien hypertexte.

Sur les pages page 1.htm, page 2.htm et page 3.htm, utilisez des images au lieu de liens hypertexte textuels. Pour ça:

ouvrez le dossier spécifié par le professeur (le dossier contient des fichiers avec des images de boutons colorés), insérez une image d'un bouton bleu sur la première page et créez un hyperlien pour accéder à la deuxième page :

Insérez vous-même l'image d'un bouton orange pour passer de la première page à la troisième ;

Définissez la bordure des deux images sur 2 ;

Ouvrez la première page de votre navigateur et, en suivant les liens de page en page, assurez-vous que les boutons fonctionnent correctement.

Insérez vous-même des images de boutons sur les pages 2.htm et la page 3.htm et définissez les hyperliens correspondants.

Ouvrez la première page de votre navigateur et, en suivant les liens de page en page, assurez-vous que les boutons de toutes les pages fonctionnent correctement.

Texte alternatif. La page Web peut être affichée par un navigateur qui n'a pas la capacité d'afficher des images. Les utilisateurs désactivent souvent l'affichage des images pour accélérer l'acceptation des documents. Dans les deux cas, il est conseillé de donner la possibilité de découvrir ce qui est montré sur l'image si cela n'est pas visible. Pour cela, utilisez le texte alternatif spécifié dans la balise< IMG>Attribut alt (ou title), cet attribut affiche le texte à l'emplacement de l'image pendant son chargement. Par exemple:

Utiliser une image comme arrière-plan . Si vous souhaitez utiliser une image comme fond de page (« fond d'écran »), utilisez alors cet attribut dans la balise indiquant l'adresse de l'image. Par exemple:

Cadres

Placer plusieurs documents sur une seule page Web. Le langage HTML permet de diviser la fenêtre du navigateur en plusieurs parties et d'afficher un document distinct dans chacune d'elles. De telles zones sont appelées cadres.
En quoi la structure d'un document HTML contenant des frames diffère-t-elle d'un document HTML classique ? Un tel document ne contient pas de section de corps de document et ne contient aucun texte. Au lieu de cela, il contient une description des cadres et des noms des documents chargés dans des zones individuelles.
< FRAMESET >... FRAMESET > descriptions des balises des cadres.
Entre les balises< FRAMESET >...FRAMESET > contient une description de la taille et de l'ordre de placement des zones dans la fenêtre du navigateur, et spécifie également les documents qui doivent être chargés dans chacune de ces zones.
La balise doit contenir un attribut cols ou rows obligatoire qui spécifie comment la fenêtre sera divisée. Les valeurs de ces attributs déterminent la hauteur (ou la largeur) des zones de fenêtre. Ils sont spécifiés séparés par des virgules en pixels ou en pourcentages. Vous pouvez utiliser le symbole astérisque (*) comme dernier paramètre. Tout l'espace libre est alloué à un tel cadre.
Lors de l'utilisation de l'attribut cols, la fenêtre est divisée en zones par des lignes verticales, et lors de l'utilisation de l'attribut rows, des lignes horizontales, par exemple,
,
Si ces deux attributs sont définis, une grille de sous-zones est créée dans la fenêtre, par exemple :

jeu de cadres >
De ce fait, l’écran est divisé en quatre sous-zones : deux horizontales et deux verticales. De plus, c'est la troisième valeur de l'attribut Lignes vous permet d'allouer de l'espace sur l'écran pour une sous-zone verticale.

< FRAM E>- une seule balise imbriquée dans une balise doit contenir un attribut src obligatoire identifiant le document qui sera chargé dans la zone séparée, par ex.
Exemple.

tête >
Page avec titre de barre de navigation >

jeu de cadres >
HTML >
UN

Qualité des documents HTML.

La nature créative de la création de documents HTML s'apparente à celle de la programmation, il est donc possible de commettre des erreurs qui peuvent rendre difficile, voire impossible, la lecture du document créé sur Internet. De plus, la grande variété d'ordinateurs connectés à Internet rend impossible de prédire à l'avance exactement à quoi ressemblera un document sur l'écran d'un utilisateur particulier.

Les pages Web sont destinées à un public général, vous devez donc garder ces fonctionnalités à l'esprit lors de la préparation de documents HTML. Pour créer un bon document HTML, vous devez suivre quelques règles assez simples.

3. Pour qu'un document HTML soit accessible au public le plus large possible, il doit être « en retard » sur les derniers développements dans le développement du langage HTML. Les dernières innovations ne sont pas toujours immédiatement mises en œuvre dans les navigateurs, et les nouvelles versions mettent du temps à atteindre la majorité des utilisateurs. Les documents utilisant les dernières innovations ne sont accessibles qu'à un public limité.

4. Une erreur que commettent souvent les débutants est d’abuser des éléments de conception, en particulier des différentes couleurs et polices. Une telle page aura au mieux l’air criarde. Dans le pire des cas, le texte peut ne pas être du tout lisible sur des ordinateurs dotés de jeux de couleurs non standard ou ne disposant pas des polices requises.

5. Vous ne devez pas abuser des images graphiques et des fichiers multimédias. Avec une abondance de tels objets, la page peut prendre beaucoup de temps à se charger et le lecteur peut s'en désintéresser avant même d'avoir eu la chance de lire quoi que ce soit.

6. Étant donné que la création de documents HTML est similaire à la programmation, le processus de recherche et de correction des erreurs, appelé débogage en programmation, est également nécessaire lors de la création d'une page Web. La plupart, sinon la totalité, des erreurs commises peuvent être détectées avant que la page ne soit mise à la disposition des lecteurs extérieurs. Les erreurs qui doivent être corrigées incluent également les erreurs grammaticales et les fautes de frappe.

7. Les frames sont un moyen très puissant, mais aussi très dangereux, de concevoir des pages Web. Beaucoup plus de pages Web infructueuses ont été créées à l'aide de frames que de pages Web réussies. Le seul critère pour une utilisation correcte des cadres est la commodité de l'utilisateur. Si, grâce aux cadres, la page devient bien plus belle, mais un peu moins pratique, vous devez abandonner les cadres sans hésiter. Cela ne provoquera rien d’autre qu’irriter les lecteurs.

8. Les gens apprécient les soins et l’attention. Placer les informations les plus importantes en haut de la page leur permet d'optimiser le temps passé à télécharger le document. Accompagner les illustrations d'un texte alternatif n'est pas très compliqué, mais c'est très apprécié. La présence d'un grand nombre d'hyperliens utiles sur une page aide non seulement les gens à naviguer de manière fructueuse sur Internet, mais les encourage également à revenir à maintes reprises sur la page qui leur a fourni une telle opportunité.

Travaux pratiques n°6
"Placer plusieurs documents sur une seule page Web"

Objectif : apprendre à créer des cadres dans l'éditeur de texte du Bloc-notes.
Instructions de mise en œuvre :

Ouvrez l'éditeur de texte Bloc-notes.

Créez une nouvelle page Web qui devrait ressembler à ceci dans le navigateur :

Dans l’élément, indiquez le nom de la page « P/r n°6 ».

Affichez la page Web créée dans une fenêtre de navigateur.

Apportez-y les modifications suivantes : dans l'attribut Lignes changer les deux premières valeurs, supprimez la troisième valeur.

Enregistrez vos modifications.

Visualisez le résultat dans un navigateur. Qu'est ce qui a changé?

Annulez les modifications et revenez à l'état d'origine de la page Web.

Affichez la page Web dans une fenêtre de navigateur.

Éléments de théorie de l'infographie

Modèle de couleur.

L'image peut être en noir et blanc, en demi-teintes (nuances d'une même couleur) et en couleur. Cependant, une image couleur, selon son objectif, peut se trouver dans une palette de couleurs différente. La palette RVB est utilisée dans les écrans d'ordinateur, c'est-à-dire pour les images qui seront visualisées sur le moniteur. La palette CMJN est utilisée lors de la création d'images destinées à l'impression.

Le modèle de couleur le plus courant est appelé RVB Rouge, Vert, Bleu, d'après les noms des trois couleurs de base utilisées pour former toutes les autres. Le modèle de couleur RVB est généralement illustré par une image sous la forme de trois cercles qui se croisent. Au centre de l’intersection, ces trois couleurs totalisent le blanc. L'intersection par paires de cercles adjacents donne des couleurs supplémentaires : jaune, cyan, violet.

Le modèle RVB comporte trois canaux : rouge, vert et bleu, c'est-à-dire que RVB est un modèle de couleur à trois canaux.

Chacune des trois composantes de couleur RVB peut prendre l'une des 256 valeurs - de l'intensité maximale (255,2555,255 - blanc) à l'intensité nulle (0,0,0 - noir), c'est-à-dire Absolument n'importe quelle couleur et nuance de couleur peut être obtenue en combinant le rouge, le vert et le bleu dans diverses proportions.

Afin de créer une composition de couleurs harmonieuse, vous devez connaître les caractéristiques de la couleur. Ces caractéristiques sont naturellement nombreuses, nous ne considérerons que les principales.

Caractéristiques de couleur

L'un des schémas de couleurs caractérisant les propriétés naturelles de toute nuance est le schéma HSV (teinte, saturation, luminosité).

Le ton de teinte est l’un des points de la roue chromatique, le plus brillant et le plus saturé.

La saturation est le rapport entre la couleur principale et le gris de même luminosité.

Valeur de luminosité – la luminosité globale de la couleur (positions extrêmes – noir et ton le plus brillant)

Travaux pratiques n°6

"Travailler avec le modèle de couleurs RVB"

Tâche 1. Définir la couleur dans le formatRVB

Objectif : apprendre à déterminer la couleur au format RVB.

Instructions de mise en œuvre :

Lancez l'éditeur graphique Paint (Démarrer - Programmes - Accessoires)

Déterminez quelle couleur est écrite dans le modèle RVB et remplissez le tableau :

Pour cela, exécutez la commande Palette – Changer de palette. Dans la boîte de dialogue Modifier la palette, cliquez sur le bouton Définir la couleur, entrez des valeurs numériques pour les couleurs dans les zones de texte situées sous la zone de couleur. La plage valide pour chaque bloc est de 0 à 255, 0 étant le plus sombre et 255 le plus clair.

Tâche 2. Mélanger des couleurs de différentes intensités dans un éditeur graphique Peinture

Objectif : apprendre à travailler avec des couleurs de différentes intensités dans un éditeur graphique simple.

Instructions de mise en œuvre :

Déterminez quelle couleur sera obtenue en mélangeant deux couleurs d'intensité maximale (255) :

rouge et vert;

vert et bleu;

rouge et bleu.

Déterminez quelle couleur sera obtenue en mélangeant deux couleurs de demi-intensité (127) :

rouge et vert;

vert et bleu;

rouge et bleu.

vert et bleu

rouge et bleu

intensité maximale

demi-intensité

Tâche 3. Dessiner avec une couleur donnée dans un éditeur graphiquePeinture .

Objectif : apprendre à identifier la couleur.

Mode d'emploi:

Dans un nouveau fichier, dessinez les formes géométriques suivantes de la couleur donnée :

Carré(205, 44, 100);

Rectangle(0, 230, 69);

Cercle(30, 30, 30);

Ovale(200, 100, 20) ;

Triangle(10, 10, 10);

Trapèze (50, 50, 250).

Schémas de couleurs

Connaissant les particularités de perception de chaque couleur et combinaisons de couleurs, vous pouvez créer un certain nombre de schémas prêts à l'emploi. Chacun de ces schémas, lorsqu’il prend vie, sonne différemment et apporte une certaine ambiance à la composition.

Si l'on souhaite obtenir une combinaison harmonieuse de couleurs, alors on peut en prendre plusieurs proches, situées les unes après les autres sur la roue chromatique. Par exemple, jaune et jaune-vert.

Pour créer du contraste, choisissez des couleurs opposées, situées l'une en face de l'autre. Ces couleurs sont dites complémentaires. Utilisés côte à côte, ils se rendent mutuellement plus lumineux et plus vivants. Les paires jaune – violet, magenta – vert sont des exemples de couleurs complémentaires.

En plus d’utiliser des couleurs côte à côte, vous pouvez essayer d’utiliser les mêmes couleurs mais avec des degrés de saturation différents.

Cependant, la source la plus fiable et la plus inépuisable de combinaisons de couleurs est la nature. L'homme en fait partie, et rien ne plaît plus à ses yeux que l'harmonie de la tendresse et de la beauté naturelles.

Couleurs prestigieuses : or, argent, gris foncé, noir. Leur tâche est de transmettre solidité, confiance, stabilité et valeur élevée.

Couleurs pastel : délicates, beiges, roses, bleutées - féminines, douces, relaxantes.

Couleurs « saines » : de la psychologie américaine - propreté, santé, confiance, famille (jaune-vert avec ajout de noir).

Colorants naturels : proches des composants naturels biologiques et naturels.

Les « vergetures » comme option d'utilisation de la couleur sont généralement des nuances tonales d'une couleur et comme accent – une couleur plus active

Il vaut mieux s'en tenir à une recette qui a fait ses preuves : utiliser un minimum de couleurs, mais choisir les couleurs elles-mêmes pour qu'elles soient les plus contrastées possible. La principale exigence concernant une paire de couleurs pour l'arrière-plan et le texte est un contraste suffisant entre elles, nécessaire à une lecture confortable.

Palette sûre.

Il ne faut pas oublier que le créateur de la page Web n'a pas la moindre idée du modèle d'ordinateur et des programmes sur lesquels son travail sera visualisé. Il ne sait pas si son « arbre vert » deviendra rouge ou orange sur les écrans des utilisateurs.

Par conséquent, tous les programmes populaires de visualisation de pages Web (navigateurs) sont préconfigurés sur une certaine palette fixe. Cette palette ne comporte pas 256 couleurs, mais seulement 216. Cela est dû au fait que tous les ordinateurs ne peuvent pas reproduire 256 couleurs.

Cette palette fixe, qui définit rigidement les indices d'encodage des 216 couleurs, est appelée palette sécurisée.

Graphiques raster

La base de la représentation raster des graphiques est un pixel (point) indiquant sa couleur. Pour décrire, par exemple, une ellipse rouge sur fond blanc, il faut indiquer la couleur de chaque point, de l'ellipse et du fond. L'image est représentée par un grand nombre de points : plus il y en a, plus l'image est visuellement meilleure et plus la taille du fichier est grande.

La représentation raster est généralement utilisée pour les images de type photographique comportant beaucoup de détails ou d'ombrages. La mise à l'échelle de ces images dans n'importe quelle direction dégrade généralement la qualité.

Graphiques vectoriels

La représentation vectorielle consiste à décrire les éléments de l'image avec des courbes mathématiques, indiquant leurs couleurs et leur occupation. Une ellipse rouge sur fond blanc sera décrite par seulement deux formules mathématiques : un rectangle et une ellipse des couleurs, tailles et emplacements correspondants. Évidemment, une telle description prendra beaucoup moins de place que dans le cas de graphiques raster. Un autre avantage est une mise à l'échelle de haute qualité dans toutes les directions.

Le choix du format raster ou vectoriel dépend des buts et objectifs du travail avec l'image. Si une précision photographique des couleurs est nécessaire, un raster est préférable. Il est plus pratique de présenter des logos, des diagrammes et des éléments de conception au format vectoriel.

Formats de fichiers graphiques pour Internet

GIF et JPEG sont deux des formats graphiques les plus populaires qui sont devenus de facto des standards d'utilisation sur le Web.

Les photos sont mieux enregistrées au format JPEG et les illustrations au format GIF

Optimisation graphique.

Pour les pages Web, la question de la taille des photos est très importante.

La toute première étape de l'optimisation consiste à mettre en valeur l'essentiel d'une photographie, en écartant tout le reste et en se concentrant sur l'élément illustré. Ceci est réalisé grâce à l'opération de recadrage et à la recherche de la partie la plus expressive qui transmet le sens de la photographie. Après cette opération, vous pouvez déjà optimiser l'image pour obtenir la plus petite taille. Mais avec la taille des photos, vous devez respecter un certain compromis : ne pas les rendre trop petites. Et ne les rendez pas trop énormes. En règle générale, une photo mesure 250 x 300 pixels et occupe environ 6 à 10 Ko. Cela ne signifie pas que toutes les photographies doivent avoir la même taille, mais la surface de la photographie doit lui être équivalente. Ainsi, par exemple, un fichier d'une taille de 45,93 Ko avec une vitesse de téléchargement de 28,8 Ko par seconde sera téléchargé sur le navigateur en 17 secondes.

"Placer des graphiques sur une page Web"

Tâche 1. Conception des couleursla toile -pages.

Objectif : apprendre à créer un arrière-plan coloré pour une page Web, à utiliser des polices de couleurs différentes et à placer des lignes horizontales sur la page.

Instructions de mise en œuvre :

Créez une nouvelle page Web dans l'éditeur du Bloc-notes.

Dans l’élément, indiquez le nom de la page « P/r No. 8. Tâche 1 ».

Dans l'élément initial, utilisez l'attribut approprié pour définir la couleur d'arrière-plan de la page sur noir.

Écrivez « Bonne nuit » en blanc. Alignez-le au milieu de la page. Taille de police 12.

Insérez une ligne rouge horizontale.

Faites une inscription jaune « Des rêves agréables ». Alignez-le au milieu de la page. Taille de police 8.

Insérez une ligne bleue horizontale de 10 pixels d'épaisseur, 50 % de la largeur de l'écran et alignée au centre.

Tâche 2. Placer des graphiques sur une page Web.

Objectif : apprendre à placer des images graphiques sur une page Web.

Instructions de mise en œuvre :

Créez une nouvelle page Web dans l'éditeur du Bloc-notes.

Dans l'élément, indiquez le nom de la page « P/r No. 8. Tâche 2 ».

Si vous ne spécifiez pas la couleur de la page dans la balise, alors l'arrière-plan sera blanc par défaut.

Placez un dessin d'une épée de football sur la page. Le fichier nommé football .gif se trouve dans le dossier spécifié par l'enseignant. Pour placer une image vous devrez préciser le chemin du fichier dans l'élément . Pour simplifier la description du chemin d'accès à ce fichier graphique, copiez ce fichier dans le même dossier dans lequel la page Web sera enregistrée. L’élément ressemblera alors à ceci :

Si le fichier ne se trouve pas dans le même dossier que la page Web, vous devez alors spécifier le chemin relatif de ce fichier.

Légendez le dessin du ballon de football en utilisant l'attribut alt (titre).

Créez une bordure de 2 px de large autour de l'image.

Au-dessus de l'image, placez le titre « Monde du Football » dans la plus grande taille possible et alignez-le au centre de la page.

Sujet 4. Balises HTML. les tables

C création et formatage de tableaux
Spécification des lignes et des cellules du tableau. Un tableau est l’un des moyens les plus pratiques de présenter de grandes quantités de données. Le langage HTML possède de riches capacités pour créer différents types de tableaux.
Lors de la création de tableaux, le principe d'imbrication est utilisé : à l'intérieur de l'élément principal du tableau

Exemple (tableau composé de deux lignes et colonnes).

Capitale de l'Etat
Russie Moscou
France Paris
TABLEAU >
Voici à quoi cela ressemble à l'écran :

Numéro de téléphone

Petrova A.I.

Smirnov V.P.

Définissez la largeur du cadre de la table. À l'aide de l'attribut border, vous pouvez définir la largeur de la bordure du tableau en pixels, par exemple :

Vous pouvez rendre les bords du tableau invisibles ; pour cela, la largeur du cadre du tableau doit être définie sur 0, par exemple :

Réglage de la largeur et de la hauteur de la table . La largeur et la hauteur du tableau peuvent être définies exactement en pixels ou en pourcentage de la largeur de la page dans la fenêtre du navigateur. Il existe des attributs standards :
largeur – largeur ;
hauteur – hauteur.
Par exemple, si nous devons spécifier un tableau d'une certaine taille, par exemple 500 pixels de large, alors nous préciserons :

Si nous voulons obtenir un tableau qui s'adapte à toute la largeur de l'écran, sans nous soucier de la résolution du moniteur de la personne qui consultera notre page Web, nous définirons la largeur de la page à 100 %.

Voici à quoi cela ressemble à l'écran :

Numéro de téléphone

Petrova A.I.

Smirnov V.P.

Si nous avons besoin d'une hauteur de ligne plus grande, par exemple 300 pixels, nous spécifierons un attribut supplémentaire :

Définition de la couleur d'arrière-plan et de la couleur des cellules du tableau . La couleur d'arrière-plan peut être définie pour l'ensemble du tableau ; il existe un attribut bgcolor pour cela. La valeur de cet attribut peut être soit un mot anglais, tel que red, soit un code hexadécimal, tel que #FF0000.
Par exemple, si dans le tout premier tableau que nous avons créé, nous devons définir un fond argenté, alors nous préciserons :

Voici à quoi cela ressemble à l'écran :

Numéro de téléphone

Petrova A.I.

Smirnov V.P.

Vous pouvez définir la couleur des cellules du tableau séparément. Dans ce cas, l'attribut bgcolor est placé à l'intérieur de l'élément

Par exemple,

Capitale de l'Etat
Or>RussieJaune>Moscou
Marron>FranceOrange>Paris
TABLEAU >

Voici à quoi cela ressemble à l'écran :

Alignement des données dans les cellules du tableau.
Il existe un ensemble d'attributs conçus pour aligner les données dans les cellules du tableau. L'attribut align vous permet d'aligner les données dans les cellules horizontalement. Il prend les valeurs suivantes :
Gauche – alignement à gauche ;
Droite – alignement vers la droite ;
Centre - alignement central.
L'attribut valign vous permet d'aligner le texte verticalement. Les valeurs peuvent être les suivantes :
Haut – alignement sur le bord supérieur de la cellule ;
Alignement milieu-centre ;
Ligne de base – alignement sur la première ligne
Exemple.

Alignement horizontalB >TD >

Centré
gauche> Gauche
Droite

Alignement verticalB >TD >
valign=top > Le long du bord supérieur de TD >

TD centré >

Le long du bord inférieur TD >
TR >
TABLEAU >
En conséquence, nous obtiendrons le tableau suivant : Alignement horizontal

Centré

Gauche

Droite

Aligner par
verticales

Le long du bord supérieur

Centré

Le long du bord inférieur

< table width =500 border =3>

Performance académique

N/N Nom de famille Classe scolaire

Travaux pratiques n°9
"Créer et formater un tableau"

Objectif : apprendre à créer et formater des tableaux simples dans l'éditeur de texte Notepad.
Instructions de mise en œuvre :

Créez une nouvelle page Web qui devrait ressembler à ceci dans le navigateur :

Nom de famille

Numéro de téléphone

Petrova A.I.

31-74-16

Smirnov V.P.

46-29-89

La couleur de fond de la table est argentée, la largeur du cadre de la table est de 1.

Dans l’élément, indiquez le nom de la page « P/r n°14 ».

Affichez la page Web créée dans une fenêtre de navigateur.

Revenez au fichier que vous avez enregistré dans le Bloc-notes.
Apportez-y des modifications pour que la page Web dans le navigateur ressemble à ceci :

Annuaire

Nom de famille

Numéro de téléphone

Petrova A.I.

31-74-16

Smirnov V.P.

46-29-89

La couleur de fond des cellules de la première ligne est vert clair, la couleur de fond des cellules des lignes restantes est argentée, la largeur du cadre du tableau est de 5.

Affichez la page Web dans une fenêtre de navigateur.

Enregistrez vos modifications.

Fusionner des lignes ou des colonnes dans une cellule .

Lors de la création de tableaux complexes, il peut être nécessaire de combiner (fusionner) plusieurs lignes ou colonnes dans une seule cellule. Il existe des attributs pour cela : colspan - indique le nombre de colonnes combinées dans une cellule (par défaut = 1), rowspan - indique le nombre de lignes combinées dans une cellule (par défaut = 1). Exemples:

La seule différence entre cette construction de table est l'apparition du paramètre rowspan="2", dont le numéro correspond au nombre de "sous-lignes", c'est-à-dire littéralement combien de lignes sont fusionnées dans une cellule. Si dans un tableau symétrique nous lisons de gauche à droite, alors la même chose se produit ici, mais pourquoi dans le code y a-t-il une cellule avec le chiffre trois devant la cellule avec deux ? Tout est très simple - littéralement le code de la première ligne signifie "cellule contenant le 1 donné", "cellule contenant le 3 donné, composée de DEUX sous-chaînes", le code de la deuxième ligne signifie "cellule contenant le 2 donné". Comme on peut le constater, physiquement la cellule 3 appartient à la PREMIÈRE rangée !

Si nous avons des cellules combinées horizontalement, alors au lieu de la balise rowspan, nous utilisons la balise colspan, naturellement, dans la cellule qui occupe la zone de plusieurs colonnes). Par exemple:

1
2	3

Travaux pratiques n°10
"Fusionner des lignes ou des colonnes dans des cellules de tableau"

Objectif : apprendre à créer des tableaux complexes dans l'éditeur de texte Notepad.
Instructions de mise en œuvre :

Ouvrez l'éditeur de texte Bloc-notes.

Créez une nouvelle page Web qui devrait ressembler à ceci dans le navigateur :

Performance académique

p/p

Nom de famille

École

Classe

Qualités de chimie

1 p/an

2 p/an

Ivanov

Petrov

Sidorov

La couleur de fond de la première ligne du tableau est aigue-marine, la largeur du tableau est de 500, la largeur du cadre du tableau est de 3.

Dans l’élément, indiquez le nom de la page « P/r n°10 ».

Affichez la page Web créée dans une fenêtre de navigateur.

Revenez au fichier que vous avez enregistré dans le Bloc-notes.

Balisage d'une page Web à l'aide d'un tableau. Il est pratique de baliser une page Web à l'aide d'un tableau. Différentes options de marquage sont possibles. Examinons quelques-uns d'entre eux.
Première option. La mise en page s'effectue en utilisant une largeur de page plein écran, quelle que soit la résolution de l'écran (largeur = « 1000 % »). Dans ce cas, il est pratique de créer un tableau composé de deux lignes et de deux colonnes. La ligne du haut sera réservée au titre de la page, la colonne de gauche sera réservée au menu du site Web. Avec cette disposition, la page occupera toujours tout l'écran, quelle que soit la résolution d'écran du visiteur (Fig. 4.12).

Riz. 4.12. Un exemple de balisage de page Web. Première option

Les inconvénients d'un tel balisage incluent la « flottabilité » du contenu de la page, c'est-à-dire que lorsque la résolution de l'écran est réduite, le contenu doit s'insérer dans un cadre plus étroit, donc le texte « glisse » vers le bas. Pour éviter que cela ne se produise, vous devez sélectionner une taille de tableau fixe, le tableau restera alors inchangé quelle que soit la résolution d'écran.

Deuxième option. La mise en page se fait à l'aide d'un tableau de 760 pixels de large aligné au centre de l'écran. Dans ce cas, un visiteur dont la résolution d'écran est de 800 x 600 pixels verra une page sur presque toute la largeur de l'écran, et un visiteur dont la résolution d'écran est de 1024 x 768 ou plus verra un tableau de 760 pixels de large au centre de l'écran et des champs blancs au centre de l'écran. côtés de celui-ci.

Dans ce cas, il est pratique de créer un tableau composé de trois lignes et d’une colonne. La ligne du haut sera réservée au titre de la page, la deuxième ligne sera réservée au menu du site Web et la troisième ligne directement au contenu du site (Fig. 4.13).

Riz. 4.13. Un exemple de balisage de page Web. Deuxième option

S'il est nécessaire de placer des illustrations, des photographies, etc. à l'intérieur du texte de la page, dans ce cas, des tableaux sont également utilisés. Dans l'exemple ci-dessous, un tableau composé de deux lignes et trois colonnes est inséré dans la deuxième cellule de la deuxième ligne. Les images sont insérées dans les première et troisième cellules de la première ligne et le titre de la page est inséré dans la deuxième cellule de la première ligne. Le texte est saisi dans toutes les cellules de la deuxième ligne (Fig. 4.14).

Riz. 4.14. Un exemple de balisage de page Web. Troisième option

Thème 5. Travail final « Création d'un site Web sur un sujet donné dans le Notepad TR »

Les étudiants à la maison développent et rédigent un projet de site Web sur papier sous forme de travail créatif, puis le mettent en œuvre en classe à l'aide du langage HTML.

_____________________________________________________________________________

Le cours a été développé sur la base du livre de I. Smirnova « Les débuts de la conception Web ».

En général, j'estimerais le temps nécessaire à l'apprentissage de base du HTML entre 2 et 8 heures, le reste est facultatif. Et bien sûr, le temps nécessaire pour étudier dépend de l’intérêt. Je recommande de le diviser en 20 à 30 minutes sur plusieurs jours.

Tu est prêt? Alors allons-y!

Nous n'avons PAS besoin d'une connexion Internet pour créer une page HTML.

Nous aurons besoin de 1) Sélectionnez un éditeur de texte. Pour la première fois, le Bloc-notes suffit (nous n'avons besoin que de la commande Enregistrer sous)

Si vous souhaitez commencer immédiatement à programmer dans des éditeurs de texte spécialisés, faites attention à :
1) pour Windows
NotePad++ (télécharger ou)
Saisissez (télécharger)

2) pour Mac et Linux
Éditeur Bluefish (télécharger)

Leur différence avec les éditeurs de texte classiques réside principalement dans le fait qu'ils effectuent une indentation automatique, ! Ils permettent d'enregistrer le fichier dans un encodage différent (attention, vous rencontrerez cela dans le futur), et de colorer les balises de différentes couleurs, comme le code en bas de la leçon. Dans un éditeur classique, ce sera la même couleur.

2) N'importe quel navigateur Internet, par ex. Internet Explorer pour Windows ou Safari pour Mac OS X et iOS. Oui, oui, tu peux aussi Mozilla, Google Chrome, Opéra, Yandex Et Mail navigateurs, etc.

Commençons par créer une page HTML1) créez un dossier html sur le bureau. Nous ferons cela pour garantir que les leçons sont structurées et contenues en un seul endroit.

2) Nous créons notre fichier dans un éditeur de texte, par exemple Notepad. Plus loin Enregistrer sous.

Il est préférable de sélectionner l'encodage UTF-8, puis de sélectionner tous les types de fichiers et sélectionnez le nom du fichier avec .html à la fin, par exemple index.html

Nous sélectionnons notre html comme répertoire (dossier) où le sauvegarder
Cliquez sur sauvegarder. Prêt!

Une question fréquemment posée est que l'extension du fichier n'est pas visible. Prenons-le dans l'ordre

La possibilité de voir les extensions de fichiers peut aider à déterminer avec précision le type de fichier et donne la possibilité de le faire manuellement (avec la commande Renommer) changez non seulement l'extension, mais aussi le type de fichier (par exemple, de txt à html)

Ce n'est PAS à quoi cela devrait ressembler : photo, document texte, jeu
Voici à quoi cela devrait ressembler : photo.jpg; document texte.txt ; jeu.exe

Mais si vos noms de fichiers ressemblent toujours à la première option (SANS, par exemple, .txt ; jpg ; .exe à la fin des noms de fichiers), procédez comme suit :

Regardons les paramètres des fichiers et des dossiers :

Pour Win XP Ouvrez n'importe quel dossier - Outils (en haut du panneau) - Options des dossiers - Affichage - Masquer les extensions des fichiers enregistrés (décochez) - Appliquer

Pour Win 7, ouvrez n'importe quel dossier - Organiser - Options de fichier et de recherche - Afficher - Masquer les extensions pour les types de fichiers enregistrés (décocher) - Appliquer

Pour Mac OS Cliquez sur le bureau - Finder - Préférences - Avancé - cochez la case Afficher toutes les extensions de fichiers - Appliquer

3) collez-y l'intégralité du code (avec les commentaires) ci-dessous :

Titre de ma page

4) ouvrez le fichier. Vous pouvez choisir un autre navigateur pour ouvrir ce fichier, pour cela faites un clic droit sur notre fichier index.html - Pour ouvrir avec et sélectionnez un navigateur dans la liste, par exemple Internet Explorer, Google Chrome, Mozilla, Yandex Browser, etc.

Par conséquent, lorsque vous ouvrez le fichier index.html résultant dans votre navigateur Internet, vous devriez voir une page comme celle-ci :

Image 1.

Sur Figure 1 nous voyons comment le navigateur affiche votre page en conséquence. Le texte des éléments suivants est surligné en rouge :

Le nom de votre première page

Titre de ma page

Ceci est ma première page Web!

Dans le code présenté ci-dessous, vous pouvez voir le minimum de base d'un document HTML. Il est impératif de l’apprendre et de ne pas confondre balises ouvrantes et fermantes.

La balise head met en évidence l’en-tête du document. Il contient des éléments principalement liés à l'aide au navigateur pour traiter les éléments de votre page (titre, mots-clés, paternité, etc.). Nous parlerons spécifiquement de son contenu plus tard.

La balise title représente le titre de la page. C'est la seule balise contenue dans head qui est affichée sur la page. Ce que vous saisissez après la balise d'ouverture et avant la balise de fermeture sera le titre de votre page sur Internet

Titre de la page

La balise body désigne le corps de la page. Ce que vous entrez après les balises body d'ouverture et de fermeture sera le contenu de votre page

Titre de la page

N'importe quel titre
Juste un SMS

Texte dans un paragraphe. Il commencera sur une nouvelle ligne et se terminera par la balise fermante

Autre texte

Presque toutes les balises HTML sont des balises d'ouverture et de fermeture (une exception est la balise img, qui indique l'insertion d'une image).

Titre de la page

Permettez-moi de vous rappeler encore une fois qu'il est important de ne pas oublier d'écrire des balises de fermeture pour tous les autres types de balises, sinon le navigateur ne comprendra pas exactement où vous vouliez terminer tel ou tel élément. Comme ci-dessous :

Je souhaite surligner le texte en gras, mais celui-ci est déjà italique

Nous avons volontairement oublié la balise fermante b après le mot en gras. En conséquence, le navigateur a affiché ce qui suit

Je souhaite surligner le texte en gras, mais celui-ci est déjà italique

Comme vous pouvez le constater, le texte sera surligné en gras jusqu'à la fin, et celui qui était censé être en italique sera à la fois en gras et en italique. Donc sois prudent!

5) Si vous souhaitez modifier quelque chose dans votre fichier index.html (et il est désormais ouvert par défaut uniquement dans le navigateur), cliquez avec le bouton droit sur notre fichier index.html - sélectionnez Pour ouvrir avec et dans la liste nous sélectionnons un éditeur de texte, ce sera soit Bloc-notes, ou un autre éditeur de texte que vous avez installé.

En gros, j'ai expliqué les bases. Jusqu'à présent, la page HTML semble assez simple, mais dans les leçons suivantes, je vous parlerai en détail de ces éléments et d'autres ainsi que de leur objectif - nous insérerons des images, créerons des liens et bien d'autres choses intéressantes)

Toutes nos félicitations!
N'est-ce pas difficile ?)

Comme le langage de balisage hypertexte. HTML n'est pas un langage de programmation, c'est un langage de balisage de site Web.

Tous les navigateurs peuvent convertir ce balisage dans un format convivial.

Ce langage utilise des commandes spéciales appelées balises. Chaque balise a sa propre fonction. Il existe un grand nombre de balises. Idéalement, vous devez tout apprendre. Mais pour un développeur novice, des connaissances de base suffisent amplement.

Commandes HTML de base

La liste des commandes HTML est très longue. Mais il n’y en a pas beaucoup de principaux. Pour commencer à écrire du code, vous avez besoin d'un éditeur. Vous pouvez utiliser le Bloc-notes. Il est recommandé d'utiliser Notepad++. Il ressemble à ça.

L'avantage est que dans les éditeurs spéciaux, les balises sont mises en évidence dans une certaine couleur, selon la catégorie. Les commandes pour créer un site Web HTML dans le Bloc-notes ou tout autre programme sont les mêmes. Le langage utilisé est le même partout. L'environnement de développement n'est qu'un outil.

HTML a des balises fermantes et non fermantes. Dans cette langue également, il y a le concept d'imbrication. Chaque objet du code est un élément. Un élément a une balise d'ouverture, une balise de fermeture et un contenu. De plus, la balise possède ses propres attributs supplémentaires avec leurs propres valeurs.

Sur la figure, vous pouvez voir deux balises et . N'oubliez pas que l'ouverture et la fermeture s'écrivent de la même manière, mais seul le « / » diffère. Si la balise n'est pas fermée, le gestionnaire considérera tout le reste comme une continuation de cet élément particulier. Il est très important. Surtout dans les liens. Nous les examinerons un peu plus loin.

La balise est obligatoire. Il faut toujours qu’il soit écrit. Mais il n'est pas nécessaire de le fermer. Selon les normes, c'est nécessaire, mais si vous ne le fermez pas, cela fonctionnera toujours.

Ces commandes HTML constituent le cadre de la page. Ils sont obligatoires. Ils ferment également.

Le nom des balises correspond à la signification. Tête - tête. Cette section indique le service et les informations importantes qui ne sont pas visibles. La section corps est le corps du document. Voici le contenu qui est affiché à l'utilisateur. Essayez de fermer les balises immédiatement pour éviter toute confusion plus tard.

La section service indique :

titre du document;
fichiers de styles ;
fichiers de scripts ;
balises méta ;
instructions pour les moteurs de recherche ;
instructions pour robots;
toute autre information pouvant être utilisée par les programmeurs mais pas par les utilisateurs.

Le fichier de style est connecté comme ceci :

Le fichier script est le suivant :

Le texte doit avoir un titre. Nous l'indiquons ainsi :

Titre de la page

Ce texte apparaîtra dans le titre de l'onglet du navigateur. Ce titre est également affiché dans les résultats des moteurs de recherche.

Balises pour le formatage du texte

Le texte doit être placé dans la balise paragraphe. Il est noté . Vous pouvez également utiliser String pour le texte.

Vous pouvez formater le texte comme dans Word :

italique
vignette
texte barré
texte souligné

Le texte peut être stylisé. Nous les examinerons à la fin, après avoir passé en revue d’autres éléments.

Utiliser les en-têtes

Il existe d'autres commandes HTML importantes. Pour créer des sites Web, des en-têtes sont requis. Ils sont indiqués à l’aide de la balise First Level Heading. Il existe des niveaux de 1 à 6. Il est important de comprendre que les titres doivent être imbriqués.

Un exemple dans la figure.

Gardez à l’esprit qu’il est recommandé de n’utiliser qu’un seul en-tête h1. Dans ce cas, il doit correspondre à la balise. Bien sûr, vous pouvez spécifier 200 rubriques h1, mais vous serez alors pénalisé par les moteurs de recherche.

Utiliser des images

Les images font partie intégrante des pages Web. L'exemple montre comment insérer une photo.

Comme vous pouvez le voir, l'exemple montre en détail ce qu'on appelle et comment.

Utiliser des liens

Si vous apprenez les commandes HTML, vous devez simplement connaître la balise de lien. C'est l'un des éléments les plus importants qui composent

Dans l’exemple ci-dessus, vous pouvez voir qu’à la place du texte du lien, il y a une image. Autrement dit, vous pouvez mettre à la fois du texte et une image.

Utiliser des tableaux

Les tableaux sont également très souvent utilisés. Initialement, ils étaient destinés à présenter les informations sous une forme pratique. Mais ensuite, les concepteurs de mise en page les ont utilisés pour placer divers éléments de page.

Le tableau est créé comme suit :

Texte de cellule	Texte de cellule
Texte de cellule	Texte de cellule

L'attribut width spécifie la largeur du tableau. Cela peut être en pourcentage ou en pixels. Bordure spécifie l'épaisseur de la bordure.

La structure est spécifiée comme suit. La balise tr est une chaîne. Étiquetez la cellule td. Et tous ensemble, c'est une table.

La table peut être alignée. Pour cela, utilisez l'attribut align, qui peut prendre trois valeurs : Left, Center, Right. Un exemple d'utilisation est donné ci-dessous.

Ces commandes HTML (largeur et alignement) fonctionnent également pour d'autres éléments. L'épaisseur du cadre est également indiquée pour les images.

Utiliser des listes

À l'aide de commandes HTML, vous pouvez créer différents types de listes. Presque exactement la même chose que dans l'éditeur Word.

Dans le langage HTML, il y a des listes ordonnées et non ordonnées. Un exemple d'une telle liste.

D'abord

Deuxième

Troisième

Le résultat sera comme ceci :

D'abord
Deuxième
Troisième

Type de liste	Code HTML
En forme de cercle
En forme de cercle
Avec marqueurs carrés

Les listes ordonnées sont créées exactement de la même manière, mais au lieu de

Ici, vous pouvez également définir le type d'affichage de la liste :

"1" - Chiffres arabes 1, 2, 3...
"UN"- les lettres majuscules A, B, C...
"un"- les lettres minuscules a, b, c...
"JE"- grands chiffres romains I, II, III...
"je"- les petits chiffres romains i, ii, iii...

Les chiffres arabes sont affichés en standard.

Comme il s'agit de listes numérotées, elles possèdent un attribut start qui spécifie la valeur de départ de la liste. Par exemple, vous pouvez afficher une liste à partir du 10ème ou du 20ème jour.

Les commandes HTML pour un site sont assez variées, mais elles suivent toutes des styles. Les styles peuvent être spécifiés sous forme de fichier dans la section head:, ou vous pouvez écrire immédiatement un style prêt à l'emploi.

Notez qu'il existe une différence entre ces définitions de style. Le fichier de style peut être spécifié sur toutes les pages du site. Dès que vous y apporterez des modifications, cette mise à jour affectera l’ensemble du site dans son ensemble. Si vous spécifiez des styles sur une page spécifique, les modifications et l'utilisation de ces classes se feront uniquement dans ce fichier. Vos réglages n’iront pas au-delà.

Imaginez que vous ayez 20 pages HTML et que vous décidiez d’agrandir l’en-tête de 2 pixels. Si vous avez tout dans le fichier de styles, il vous suffit d'y apporter des modifications. Si tout est individuel, alors les 20 pages devront être mises à jour.

Vous ne pouvez spécifier que pour une seule page comme suit.

: HTML - langage de balisage hypertexte (ou langage de balisage hypertexte).

Alors apprenons à mieux le connaître.

Tout d’abord, créez un fichier sur votre ordinateur avec n’importe quel nom et extension.html (le titre doit être en anglais- par exemple index.html). Pour créer un tel fichier, créez un document texte ordinaire ("Démarrer" - "Tous les programmes" - "Accessoires" - "Bloc-notes") Et enregistrer ("Fichier" - "Enregistrer sous") n'importe où en entrant le nom et l'extension (il arrive que lorsque vous saisissez une extension, le Bloc-notes l'enregistre toujours sous forme de fichier texte, mais nous avons besoin d'un fichier Web. Pour ce faire, avant d'enregistrer, sélectionnez le type de fichier - "Tous les fichiers (*.*)").

Ce n’est pas un prérequis (puisque vous pouvez changer le nom de la première page dans les paramètres du serveur), mais une règle de savoir-vivre. Le nom de la première page est de préférence index (index.html), puisque le serveur, en y accédant, produit un fichier du même nom - index.

Une fois enregistrée correctement, l'icône du fichier doit se transformer en icône du navigateur (Internet Explorer par défaut).

Ouvrez maintenant ce fichier à l'aide du Bloc-notes et copiez-y le code suivant.

Ceci est la première page Web!

Enregistrez et ouvrez dans un navigateur.

Félicitations, vous venez de créer votre première page Web.

Texte « Ceci est la première page Web ! » Vous pouvez le remplacer par n'importe quel autre, par exemple : « Ceci est ma première page Web !!! » enregistrez, mettez à jour le navigateur et admirez le résultat.

Mais notre page n'a pas de titre.

Nous devons résoudre ce problème - nous corrigerons un peu le code, ou plutôt nous y ajouterons un "Site Head" à l'aide de balises et .

Première page Ceci est ma première page Web !!!

Enregistrez, mettez à jour, admirez. Notre page a désormais un titre.

La toute première balise est (cette balise est appariée, c'est-à-dire que la balise de fermeture est obligatoire) - elle est utilisée comme un conteneur à l'intérieur duquel se trouve tout le contenu de la page (texte, images, etc.). Bien que cette balise ( et ) soit facultative, son utilisation démontre les bonnes manières. Par conséquent, je vous conseille de l'utiliser.

La balise suivante est . Il s'agit également d'une balise appariée ( et ). Cette balise n'est pas affichée sur la page (sauf pour le titre), mais il est nécessaire d'indiquer des paramètres supplémentaires de la page - description de la page (utilisée par les moteurs de recherche), mots-clés (utilisés par les moteurs de recherche), styles, scripts, titre, etc.

Balise - une balise appariée ( et ) est requise pour indiquer le titre de la page. De plus, cette balise doit être placée uniquement à l’intérieur de la balise !

Et la dernière balise de notre code est . Également une balise appariée ( et ), à l'intérieur de laquelle se trouve toute la partie visible du site, c'est-à-dire textes, images, liens, informations générales que vous souhaitez placer sur le site.

Dans la prochaine leçon, nous parlerons des types de balises et des règles pour les écrire.

Avant de commencer notre parcours à travers les leçons de création de sites Web HTML et CSS, il est important de comprendre les différences entre les deux langages, la syntaxe de chaque langage et une terminologie de base.

HTML (HyperText Markup Language) définit la structure du contenu et sa signification, en définissant le contenu tel que les titres, les paragraphes ou les images. CSS (Cascading Style Sheets) est un langage de présentation créé pour styliser l'apparence du contenu, en utilisant, par exemple, des polices ou des couleurs.

Ces deux langages – HTML et CSS – sont indépendants l’un de l’autre et devraient le rester. CSS ne doit pas être écrit dans un document HTML et vice versa. En règle générale, HTML représentera toujours le contenu et CSS définira toujours le style.

Avec cette compréhension de la différence entre HTML et CSS, examinons le HTML plus en détail.

Avant de commencer à travailler avec HTML, vous rencontrerez probablement des termes nouveaux et souvent étranges. Vous vous familiariserez avec chacun d'eux au fil du temps, mais pour l'instant, vous devriez commencer par les trois termes HTML de base : éléments, balises et attributs.

Les éléments spécifient comment définir la structure et le contenu des objets sur une page. Certains des éléments couramment utilisés incluent plusieurs niveaux de titres (définis comme des éléments de à ) et de paragraphes (définis comme

); Vous pouvez inclure des éléments dans la liste . . . et plein d'autres.

Les éléments sont identifiés par des crochets angulaires entourant le nom de l'élément. L'élément ressemblera donc à ceci :

Mots clés

Ajout de crochets angulaires< и >crée ce qu'on appelle une balise autour de l'élément. Les balises apparaissent le plus souvent par paires de balises d’ouverture et de fermeture.

La balise d'ouverture marque le début de l'élément. Il se compose du symbole ; Par exemple, .

La balise fermante marque la fin de l'élément. Il est constitué d'un symbole< с последующей косой чертой и именем элемента и завершается символом >; Par exemple, .

Le contenu qui apparaît entre les balises d'ouverture et de fermeture est le contenu de cet élément. Le lien, par exemple, aura une balise d'ouverture et balise de fermeture. Ce qui se trouve entre ces deux balises sera le contenu du lien.

Ainsi, les balises de lien ressembleront à ceci :

...

Les attributs sont des propriétés utilisées pour fournir des informations supplémentaires sur un élément. Les attributs les plus courants incluent l'attribut id, qui identifie l'élément ; l'attribut class, qui classe l'élément ; l'attribut src, qui spécifie la source du contenu intégré ; et un attribut href, qui spécifie un lien vers la ressource associée.

Les attributs sont définis dans la balise d'ouverture après le nom de l'élément. En général, les attributs incluent un nom et une valeur. Le format de ces attributs se compose du nom de l'attribut suivi d'un signe égal, suivi de la valeur de l'attribut entre guillemets. Par exemple, élément avec l'attribut href ressemblera à ceci :

Shay Howe

Démonstration des termes HTML de base

Ce code affichera le texte « Shay Howe » sur une page Web et, lorsqu'il cliquera sur ce texte, l'utilisateur accédera à http://shayhowe.com. L'élément de lien est déclaré à l'aide d'une balise d'ouverture et balise de fermeture couvrant le texte, ainsi que l'attribut et la valeur de l'adresse du lien déclarée via href="http://shayhowe.com" dans la balise d'ouverture.

Riz. 1.01. La syntaxe HTML sous forme de plan comprend un élément, un attribut et une balise

Maintenant que vous savez ce que sont les éléments, balises et attributs HTML, jetons un coup d'œil à notre première page Web. Si quelque chose semble nouveau ici, ne vous inquiétez pas, nous le détaillerons au fur et à mesure.

Les documents HTML sont de simples documents texte enregistrés avec l'extension .html plutôt que .txt. Pour commencer à écrire du HTML, vous avez d’abord besoin d’un éditeur de texte que vous êtes à l’aise avec. Malheureusement, cela n'inclut pas Microsoft Word ou Pages, car ce sont des éditeurs complexes. Les deux éditeurs de texte les plus populaires pour écrire du HTML et du CSS sont Dreamweaver et Sublime Text. Les alternatives gratuites incluent également Notepad++ pour Windows et TextWrangler pour Mac.

Tous les documents HTML contiennent une structure obligatoire qui inclut les déclarations et éléments suivants : , et .

La déclaration de type de document ou se trouve au tout début d'un document HTML et indique aux navigateurs quelle version de HTML est utilisée. Puisque nous utiliserons la dernière version de HTML, notre type de document sera simplement . Vient ensuite un élément indiquant le début du document.

En interne, l'élément définit le haut du document, y compris diverses métadonnées (informations accompagnant la page). Le contenu à l'intérieur de l'élément n'est pas affiché sur la page Web elle-même. Au lieu de cela, il peut inclure le titre du document (qui apparaît dans la barre de titre de la fenêtre du navigateur), des liens vers des fichiers externes ou toute autre métadonnée utile.

Tout le contenu visible de la page Web sera contenu dans l'élément. La structure d'un document HTML typique ressemble à ceci :

Bonjour le monde! Bonjour le monde!

Ceci est une page Web.

Ce code affiche le document, en commençant par la déclaration du type de document, , puis immédiatement suivi du . A l'intérieur il y a des éléments et . L'élément contient l'encodage de la page via la balise et le titre du document via l'élément. Un élément comprend un titre via l'élément et un paragraphe de texte via le . Étant donné que le titre et le paragraphe sont imbriqués dans l’élément, ils sont visibles sur la page Web.

Lorsqu'un élément se trouve à l'intérieur d'un autre élément, également appelé imbriqué, c'est une bonne idée de l'indenter pour que la structure du document reste bien organisée et lisible. Dans le code précédent, les deux éléments sont à la fois imbriqués et décalés dans le . La structure d'indentation des éléments se poursuit avec de nouveaux éléments ajoutés à l'intérieur de et .

Dans l'exemple précédent, l'élément était la seule balise à ne pas inclure de balise de fermeture. Ne vous inquiétez pas, cela a été fait intentionnellement. Tous les éléments ne sont pas constitués de balises d’ouverture et de fermeture. Certains éléments reçoivent simplement du contenu ou un comportement via des attributs au sein d'une seule balise. est l'un de ces éléments. Le contenu de l'élément dans l'exemple est attribué à l'aide de l'attribut charset et d'une valeur. D'autres éléments typiques à fermeture automatique comprennent :

La structure suivante, réalisée à l'aide d'une déclaration de type de document et des éléments , et , est assez courante. Nous souhaitons que cette structure de document reste pratique car nous l'utiliserons souvent lors de la création de nouveaux documents HTML.

Peu importe le soin avec lequel nous écrivons notre code, les erreurs sont inévitables. Heureusement, lorsque nous écrivons du HTML et du CSS, nous disposons de validateurs pour vérifier notre travail. Le W3C propose des validateurs HTML et CSS qui analysent le code à la recherche d'erreurs. La révision de notre code l'aide non seulement à s'afficher correctement dans tous les navigateurs, mais aide également à enseigner les meilleures pratiques lors de l'écriture de code.

En tant que concepteurs Web et développeurs front-end, nous avons le luxe d'assister à un certain nombre de grandes conférences dédiées à notre métier. Nous allons organiser notre propre Conférence sur les Styles et créer un site Internet à cet effet au cours des prochaines leçons. Comme ça!

Passons un peu à la vitesse supérieure du HTML et jetons un coup d'œil au CSS. N'oubliez pas que HTML définit le contenu et la structure de nos pages Web, tandis que CSS définit leur style visuel et leur apparence.

En plus des termes HTML, vous devrez vous familiariser avec certains termes CSS de base. Ces termes incluent les sélecteurs, les propriétés et les valeurs. Tout comme avec la terminologie HTML, plus vous travaillez avec CSS, plus ces termes deviennent une seconde nature.

Lorsque vous ajoutez des éléments à une page Web, ils peuvent être stylisés à l'aide de CSS. Un sélecteur détermine le ou les éléments HTML auxquels cibler et appliquer des styles (tels que la couleur, la taille et la position). Les sélecteurs peuvent inclure une combinaison de différentes métriques pour sélectionner des éléments uniques, en fonction du degré de précision que nous souhaitons. Par exemple, nous souhaitons sélectionner chaque paragraphe d'une page ou sélectionner un seul paragraphe spécifique.

Les sélecteurs sont généralement associés à une valeur d'attribut, telle qu'un identifiant ou une valeur de classe, ou à un nom d'élément, tel que ou .

En CSS, les sélecteurs sont combinés avec des accolades (), qui entourent les styles appliqués à l'élément sélectionné. Ce sélecteur cible tous les éléments

P (...)

Une fois un élément sélectionné, la propriété détermine les styles qui lui seront appliqués. Les noms de propriétés viennent après le sélecteur, entre accolades () et juste avant les deux points. Il existe de nombreuses propriétés que nous pouvons utiliser, telles que l'arrière-plan, la couleur, la taille de la police, la hauteur et la largeur, ainsi que d'autres propriétés couramment ajoutées. Dans le code suivant, nous définissons les propriétés de couleur et de taille de police qui s'appliquent à tous les éléments.

P ( couleur : ... ; taille de police : ... ; )

Jusqu'à présent, nous avons uniquement sélectionné un élément via un sélecteur et déterminé le style que nous souhaitons lui appliquer via les propriétés. Nous pouvons maintenant définir le comportement de cette propriété via une valeur. Les valeurs peuvent être spécifiées sous forme de texte entre deux points et un point-virgule. Ci-dessous nous sélectionnons tous les éléments

Et définissez la valeur de la propriété color sur orange et la valeur de la propriété font-size sur 16 pixels.

P ( couleur : orange ; taille de police : 16px ; )

Pour tester cela, en CSS, notre ensemble de règles commence par un sélecteur, suivi immédiatement d'accolades. Ces accolades contiennent des déclarations constituées de paires de propriétés et de valeurs. Chaque déclaration commence par une propriété, suivie de deux points, de la valeur de la propriété et enfin d'un point-virgule.

Une pratique courante consiste à déplacer des paires de propriétés et de valeurs entre accolades. Comme avec HTML, l'indentation aide à garder notre code organisé et clair.

Riz. 1.03. La structure de la syntaxe CSS comprend un sélecteur, des propriétés et des valeurs

Connaître quelques termes de base et la syntaxe CSS générale est un bon début, mais nous avons encore quelques points à aborder avant de plonger dans les profondeurs. En particulier, nous devons examiner de plus près le fonctionnement des sélecteurs en CSS.

Les sélecteurs, comme mentionné précédemment, indiquent quels éléments HTML seront stylés. Il est important de bien comprendre comment utiliser les sélecteurs et comment ils fonctionnent. La première étape consiste à se familiariser avec les différents types de sélecteurs. Nous commencerons par les sélecteurs les plus élémentaires : les sélecteurs de type, de classe et d'identifiant.

Les sélecteurs de type ciblent les éléments par leur type. Par exemple, si nous voulons cibler tous les éléments, nous devons utiliser le sélecteur div. Le code suivant montre le sélecteur de type pour les éléments, ainsi que le code HTML correspondant.

Div (...)

... ...

Les classes vous permettent de sélectionner un élément en fonction de la valeur de l'attribut de classe. Les sélecteurs de classe sont un peu plus spécifiques que les sélecteurs de type car ils sélectionnent un groupe spécifique d'éléments plutôt que tous les éléments du même type.

Les classes vous permettent d'appliquer simultanément les mêmes styles à différents éléments en utilisant la même valeur d'attribut de classe pour plusieurs éléments.

En CSS, les classes sont représentées par un point de début suivi de la valeur de l'attribut class. Le sélecteur de classe ci-dessous sélectionne tous les éléments contenant la valeur de l'attribut de classe génial, y compris les éléments et

Génial(...)

...

Les identifiants sont encore plus précis que les classes car ils ne ciblent qu'un seul élément unique à la fois. Tout comme les sélecteurs de classe utilisent la valeur de l'attribut class, les identifiants utilisent la valeur de l'attribut id comme sélecteur.

Quel que soit le type d'élément affiché, la valeur de l'attribut id ne peut être utilisée qu'une seule fois sur une page. Si des identifiants sont présents, ils doivent alors être réservés aux éléments importants.

En CSS, les identifiants sont représentés par un symbole dièse devant, suivi de la valeur de l'attribut id. Ici, l'id sélectionnera uniquement l'élément contenant l'attribut id avec la valeur shayhowe .

#shayhowe (...)

...

Les sélecteurs sont des éléments extrêmement puissants et ceux décrits ci-dessus font partie des sélecteurs les plus courants que nous rencontrons. Ces sélecteurs ne sont que le début. Il existe de nombreux sélecteurs avancés disponibles et ils sont facilement disponibles. Une fois que vous êtes à l’aise avec eux, n’ayez pas peur de consulter certains des plus avancés.

Bon, commençons à tout mettre en place. Nous ajoutons des éléments à la page dans notre code HTML, puis nous pouvons sélectionner ces éléments et les styliser à l'aide de CSS. Relions maintenant les points entre HTML et CSS pour que les deux langages fonctionnent ensemble.

Pour que notre CSS communique avec notre HTML, nous devons pointer vers le fichier CSS du HTML. Une bonne pratique consiste à inclure tous nos styles dans un seul fichier externe, pointé dans un élément de notre document HTML. L'utilisation d'un CSS externe nous permet d'appliquer les mêmes styles sur tout le site et d'y apporter des modifications rapidement.

D'autres options pour incorporer CSS incluent l'utilisation de styles internes et en ligne. Vous pouvez rencontrer ces options dans la réalité, mais elles sont généralement mal vues car elles rendent la mise à jour des sites lourde et fastidieuse.

Pour créer notre feuille de style externe, nous souhaitons à nouveau utiliser l'éditeur de texte de notre choix pour créer un nouveau fichier texte avec une extension .css. Notre fichier CSS doit être enregistré dans le même dossier ou sous-dossier que notre fichier HTML.

À l'intérieur de l'élément, l'élément est utilisé, qui définit la relation entre les fichiers HTML et CSS. Puisque nous établissons un lien vers CSS, nous utilisons l'attribut rel avec une valeur de feuille de style pour indiquer leur relation. De plus, l'attribut href est utilisé pour indiquer l'emplacement ou le chemin du fichier CSS.

Dans l'exemple de document HTML suivant, l'élément pointe vers une feuille de style externe.

Pour que CSS s'affiche correctement, la valeur du chemin de l'attribut href doit correspondre directement à l'emplacement de stockage du fichier CSS. Dans l'exemple précédent, le fichier main.css est stocké au même emplacement que le fichier HTML, également appelé dossier racine.

Si le fichier CSS se trouve dans un sous-dossier, la valeur de l'attribut href doit correspondre à ce chemin. Par exemple, si notre fichier main.css était enregistré dans un sous-dossier nommé stylesheets, alors la valeur de l'attribut href serait stylesheets/main.css. Cela utilise une barre oblique (ou barre oblique) pour indiquer le déplacement vers un sous-dossier.

En ce moment nos pages commencent à prendre vie, lentement mais sûrement. Nous n'avons pas encore approfondi le CSS, mais vous avez peut-être remarqué que certains éléments ont des styles que nous n'avons pas déclarés dans notre CSS. C'est le navigateur qui impose ses propres styles préférés sur ces éléments. Heureusement, nous pouvons réécrire ces styles assez facilement, ce que nous ferons ensuite en utilisant une réinitialisation CSS.

Chaque navigateur possède ses propres styles par défaut pour divers éléments. La façon dont Google Chrome affiche les titres, les paragraphes, les listes, etc. peut différer de la façon dont Internet Explorer le fait. Pour garantir la compatibilité entre navigateurs, la réinitialisation CSS est devenue largement utilisée.

Une réinitialisation CSS prend tous les éléments HTML de base avec un style donné et fournit un style cohérent sur tous les navigateurs. Ces réinitialisations impliquent généralement la suppression des dimensions, du remplissage, des marges ou des styles supplémentaires qui réduisent ces valeurs. Étant donné que la cascade CSS fonctionne de haut en bas (vous le découvrirez bientôt), notre réinitialisation devrait être tout en haut de notre style. Cela garantit que ces styles sont lus en premier et que tous les différents navigateurs fonctionnent à partir d'un point de référence commun.

Il existe de nombreuses réinitialisations CSS différentes disponibles, chacune ayant ses propres atouts. L'une des plus populaires d'Eric Meyer, sa réinitialisation CSS est adaptée pour inclure de nouveaux éléments HTML5.

Si vous vous sentez un peu aventureux, il existe également Normalize.css créé par Nicholas Gallagher. Normalize.css ne se concentre pas sur l'utilisation d'une réinitialisation matérielle pour tous les éléments principaux, mais plutôt sur la définition de styles communs pour ces éléments. Cela nécessite une compréhension plus approfondie du CSS, ainsi qu'une connaissance de ce que vous aimeriez obtenir à partir des styles.

Comme mentionné précédemment, différents navigateurs affichent les éléments différemment. Il est important de reconnaître l’importance de la compatibilité et des tests entre navigateurs. Les sites ne doivent pas être exactement identiques dans tous les navigateurs, mais doivent être proches. Les navigateurs que vous souhaitez prendre en charge et dans quelle mesure sont une décision que vous devrez prendre en fonction de ce qui convient le mieux à votre site.

Il y a plusieurs choses à prendre en compte lors de l'écriture de CSS. La bonne nouvelle est que vous pouvez tout faire et qu’il suffit d’un peu de patience pour le maîtriser.

Revenons là où nous nous sommes arrêtés pour la dernière fois sur notre site de conférence et voyons comment nous pouvons ajouter du CSS.

Dans notre dossier styles-conference, créons un nouveau dossier appelé actifs. C'est ici que nous stockerons toutes les ressources de notre site Web, telles que les styles, les images, les vidéos, etc. Pour nos styles, ajoutons un autre dossier de feuilles de style dans le dossier des ressources.
À l'aide d'un éditeur de texte, créons un nouveau fichier appelé main.css et enregistrons-le dans le dossier des feuilles de style que nous venons de créer.

En visualisant le fichier index.html dans le navigateur, nous pouvons voir que les éléments et

Contient déjà le style par défaut. En particulier, ils ont une taille de police et un espace uniques autour d’eux. Grâce à la réinitialisation d'Eric Meyer, nous pouvons adoucir ces styles, permettant à chacun d'eux de repartir de la même base. Pour ce faire, jetez un œil à son site Web, copiez le code et collez-le en haut de notre fichier main.css.

/* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126 Licence : aucune (domaine public) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronyme, adresse, gros, citer, code, del, dfn, em, img, ins, kbd, q, s, samp, petit, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, jj, ol, ul, li, champs, formulaire, étiquette, légende, tableau, légende, tbody, tfoot, thead, tr, th, td, article, de côté, toile, détails, intégrer, figure, figcaption, pied de page, en-tête, hgroup, menu, navigation, sortie, ruby, section, résumé, heure, marque, audio, vidéo (marge : 0 ; remplissage : 0 ; bordure : 0 ; taille de police : 100 % ; police : hériter ; alignement vertical : ligne de base ; ) /* Réinitialisation du rôle d'affichage HTML5 pour les anciens navigateurs */ article, apart, détails, figcaption, figure, footer, header, hgroup, menu, nav, section ( display: block; ) body ( line-height: 1; ) ol, ul ( style de liste : aucun ; ) blockquote, q ( guillemets : aucun ; ) blockquote : avant, blockquote : après, q : avant, q : après ( contenu : " » ; contenu : aucun ; ) table ( bordure- effondrement : effondrement ; espacement des bordures : 0 ; )

Notre fichier main.css commence à prendre forme, connectons-le donc au fichier index.html. Ouvrez index.html dans un éditeur de texte et ajoutez un élément à , juste après l'élément.
Puisque nous pointons vers des styles via l'élément, ajoutez un attribut rel avec la valeur stylesheet .

Nous inclurons également un lien vers notre fichier main.css en utilisant l'attribut href. N'oubliez pas que notre fichier main.css est enregistré dans le dossier stylesheets, qui se trouve dans le dossier assets. Ainsi, la valeur de l'attribut href, qui est le chemin d'accès à notre fichier main.css, devrait être actifs/stylesheets/main.css.

Conférence sur les styles

Il est temps de vérifier notre travail et de voir comment nos HTML et CSS fonctionnent ensemble. L'ouverture du fichier index.html (ou l'actualisation de la page si elle est déjà ouverte) dans le navigateur devrait afficher un résultat légèrement différent qu'auparavant.

Riz. 1.04. Notre site Styles Conference avec réinitialisation CSS

Ci-dessous, vous pouvez consulter le site Web de Styles Conference dans son état actuel, ainsi que télécharger le code source actuel du site.

Alors tout va bien! Nous avons franchi de grandes étapes dans ce tutoriel.

Pensez-y, vous connaissez maintenant les bases du HTML et du CSS. Au fur et à mesure que nous continuons et que vous passez plus de temps à écrire du HTML et du CSS, vous deviendrez beaucoup plus à l'aise avec ces deux langages.

Pour récapituler, nous avons couvert les points suivants :

Différence entre HTML et CSS.
Introduction aux éléments, balises et attributs HTML.
Mise en place de la structure de votre première page Web.
Introduction aux sélecteurs, propriétés et valeurs CSS.
Travailler avec des sélecteurs CSS.
Pointeur vers CSS à partir de HTML.
L'importance de la réinitialisation CSS.

Examinons maintenant de plus près le HTML et familiarisons-nous un peu avec la sémantique.

Termes HTML courants via Scripting Master
Termes et définitions CSS via des sites Web impressionnants
Outils CSS : réinitialiser CSS via Eric Meyer

Avoir des questions?

Nom

E-mail *

Message *

Signaler une faute de frappe

Texte qui sera envoyé à nos rédacteurs :

Votre commentaire (facultatif) :

Envoyer