Développement méthodologique de travaux pratiques en informatique sur les thèmes "HTML Markup Language" et "Modern Web Technologies" (pour les collégiens).
Lors de la conduite de cours utilisant des données évolutions méthodologiques Pour créer des fichiers html et css, il est recommandé d'utiliser des fichiers réguliers éditeur de texte, qui prend en charge la coloration syntaxique pour les langages HTML et CSS, et inclut également de préférence la possibilité de travailler avec plusieurs fichiers en mode multipage.
Par exemple, Notepad++ (notepad-plus-plus.org) convient à Windows. Dans l'éditeur de texte Notepad++, pour renvoyer à la ligne de longues lignes, vous devez sélectionner Affichage -> Saut de ligne dans le menu. Notepad2 (flos-freeware.ch/notepad2.html) est également un très bon éditeur de texte. Cependant, il ne prend pas en charge les opérations sur plusieurs pages. La définition des sauts de ligne s'effectue à l'aide de la commande Affichage -> Word Wrap.
1. Document HTML. Paragraphes, sauts de ligne, alignement
1 Structure du document HTML
Le code source d'un document HTML est constitué de balises et de contenu.
Les balises peuvent avoir divers attributs avec des propriétés spécifiées. Dans les anciennes versions de la langue Attributs HTML utilisé pour concevoir le contenu : définition de la taille et de la couleur de la police, alignement du texte, définition des retraits, etc. De nos jours, le contenu d'un document HTML est généralement formaté à l'aide du langage CSS.
Tout document HTML comprend toujours des conteneurs HTML, Head et Body, qui sont imbriqués les uns dans les autres comme suit :
Tâche 1. Créez un fichier et donnez-lui la structure indiquée ci-dessus. Sauvegarde le.
Le conteneur de tête contient généralement un conteneur de titre dont le contenu est affiché dans le titre de la fenêtre du document.
Tâche 2. Ajouter un conteneur de titre au document :
Enregistrez le fichier et ouvrez-le dans votre navigateur. Recherchez le contenu du titre que vous avez saisi.
Le contenu du corps est affiché dans la fenêtre du navigateur.
La balise conteneur est utilisée pour baliser les paragraphes. Une seule balise b permet d'accéder à une nouvelle ligne sans créer de nouveau paragraphe, c'est à dire crée un saut de ligne.
Tâche 3. Ajoutez le contenu suivant au conteneur body :
L’émergence des ordinateurs personnels au début des années 70 (en parallèle avec l’évolution progressive des grands ordinateurs) est aujourd’hui considérée comme un coup révolutionnaire. L'ampleur de son influence sur la société humaine est comparée aux conséquences de l'invention de l'imprimerie.
Il existe déjà des millions et des milliards d’ordinateurs dans le monde.
Leur nombre ne cesse de croître régulièrement !
Sauvegarder. Actualisez le document dans votre navigateur. Notez combien de paragraphes vous voyez où se trouve le saut de ligne.
2 Alignement des paragraphes. style ancien
L'alignement des paragraphes est déterminé par les valeurs gauche (gauche), droite (droite), centre (centre) et justifier (justifié). Ces valeurs peuvent être attribuées à la propriété d'alignement, qui est valable pour de nombreuses balises.
Ainsi, par exemple, l'alignement centré des paragraphes peut être défini comme ceci :
Tâche 4. Pour les paragraphes créés précédemment, définissez l'alignement sur justifié (pour le premier paragraphe) et aligné à droite (pour le second).
Travaux pratiques sur HTML
Tâche n°1.
Création d'un fichier HTML de base
1. Créez un dossier personnel dans lequel vous enregistrerez tous les fichiers de votre site.
2. Cliquez sur clic-droit souris et sélectionnez « Nouveau » - « Fichier vide ».
3. Entrez le nom de fichier rasp.html.
4. Cliquez avec le bouton droit sur « Ouvrir avec » - « Tapis de souris »
5. Tapez un simple document HTML :
Fichier de didacticiel HTML
Horaire des cours du mercredi.
6. Enregistrez le document et fermez l'éditeur.
7. Ouvrez le document rasp.html double-cliquez souris et vérifiez le résultat.
Tâche n°2.
Contrôler le placement du texte sur l'écran
1. Suivez l'étape n°4 de la tâche précédente, pour le fichier rasp.html
2. Apportez des modifications au fichier rasp.html en plaçant les motsHoraire, cours, pour mercredi sur des lignes différentes.
Exemple:
Calendrier
Des classes
mercredi.
Ne soyez pas surpris si l'apparence de votre page Web n'a pas changé.
Tâche n°3.
Contrôler le placement du texte sur l'écran 2
1. Suivez l'étape n°4 de la première tâche, pour le fichier rasp.html
2. Apportez des modifications au fichier rasp.html :
Exemple:
Calendrier
Des classes
mercredi.
3. Enregistrez le texte avec vos modifications dans le fichier rasp.html.
4. Ouvrez le document rasp.html en double-cliquant et vérifiez le résultat.
Apparence les lignes devraient changer. Pourquoi le texte change-t-il ?
Tâche n°4.
Formatage du texte
Balise de saut de ligne
sépare une ligne du texte ou des graphiques suivants.
Balise de paragraphe
sépare également la ligne, mais ajoute également une ligne vide, qui visuellement
met en surbrillance un paragraphe.
Fichier de didacticiel HTML
Calendrier
Des classes
Pour mercredi.
3. Enregistrez le texte avec vos modifications dans le fichier rasp.html.
4. Ouvrez le document rasp.html en double-cliquant et vérifiez le résultat.
Tâche n°5.
Formatage du texte
1
. Apporter des modifications au fichier RASP.HTML
Fichier de didacticiel HTML
Calendrier
Des classes
mercredi.
3. Enregistrez le texte avec vos modifications dans le fichier rasp.html.
4. Ouvrez le document rasp.html en double-cliquant et vérifiez le résultat.
5. Répondez à la question : quelles balises sont utilisées pour définir les polices soulignées, italiques et grasses ?
Tâche n°6.
Définir la taille des caractères d'une page Web
Il existe deux manières de contrôler la taille du texte affiché par le navigateur :
utilisation de styles de titres,
Définissez la taille de police du document principal ou la taille de police actuelle.
Six balises de titre sont utilisées : from
avant
(la balise est double, c'est à dire qu'elle nécessite une fermeture).
Chaque balise possède un style spécifique qui lui est attribué par les paramètres du navigateur.
1
. Apporter des modifications au fichier RASP.HTML
Fichier de didacticiel HTML
Horaires des cours
mercredi.
3. Enregistrez le texte avec vos modifications dans le fichier rasp.html.
4. Ouvrez le document rasp.html en double-cliquant et vérifiez le résultat.
5. Remplacez la balise h1 par h2-h6 et voyez comment la taille du titre change.
Tâche n°7.
Définir la taille de police actuelle
Balise de police vous permet de définir la taille de la police actuelle à des endroits individuels du texte dans
varie de 1 à 7.
Fichier de didacticiel HTML
Horaires des cours
mercredi.
3. Enregistrez le texte avec vos modifications dans le fichier rasp.html.
4. Ouvrez le document rasp.html en double-cliquant et vérifiez le résultat.
5. Remplacez la taille de la police par d'autres et voyez comment la taille du texte change.
Tâche n°8.
Définir la couleur de la police
Étiqueter offre la possibilité de contrôler la police, la couleur et la taille du texte.
Pour changer la couleur de la police, vous pouvez l'utiliser dans une balise Attribut COULEUR=”X”. Au lieu de
“X" doit être remplacé nom anglais couleurs entre guillemets (« »), ou son hexadécimal
signification. Lors de la spécification de la couleur nombre hexadécimal il faut imaginer cette couleur
décomposé en trois composantes : rouge (R – Rouge), vert (G – Vert), bleu (B – bleu),
dont chacun a une valeur de 00 à FF. Dans ce cas, nous avons affaire à ce qu'on appelle
Format RVB.
Exemples d'écriture de texte en Format RVB sont présentés dans le tableau 1 :
1
. Apporter des modifications au fichier RASP.HTML
Fichier de didacticiel HTML
Calendrier
Cours pour mercredi.
3. Enregistrez le texte avec vos modifications dans le fichier rasp.html.
4. Ouvrez le document rasp.html en double-cliquant et vérifiez le résultat.
5. Changez la couleur en une autre et voyez le résultat de la balise de police.
Tâche n°9.
Alignez le texte horizontalement.
L'alignement du texte détermine son apparence et l'orientation des bords du paragraphe et peut être à gauche, à droite, centré ou justifié. La balise de paragraphe est généralement utilisée pour définir l'alignement du texte
avec l'attribut align, qui spécifie la méthode d'alignement. L'attribut align peut prendre les valeurs suivantes : gauche, droite, centre, justifieralignement à gauche, à droite, au centre et en largeur respectivement.1. Apportez des modifications au fichier RASP.HTML
Fichier de didacticiel HTML
Calendrier
cours le mercredi.
3. Enregistrez le texte avec vos modifications dans le fichier rasp.html.
4. Ouvrez le document rasp.html en double-cliquant et vérifiez le résultat.
Créez une page Web selon l'exemple suivant.
La couleur du texte est indiquée entre parenthèses. L'alignement du texte doit être présent.
Donnez un nom au fichierbiscuit.html
La capacité de formater correctement le code CSS est importante pour tout concepteur Web. Cette leçon est conçue pour les débutants qui font tout juste leurs premiers pas.
Introduction
Vous devez être extrêmement prudent lorsque vous travaillez avec CSS. Lorsque vous écrivez du code, vous devez maintenir une concentration extrême.
Cette leçon montrera un exemple de la façon de créer HTML simple page utilisant disposition des blocs(sans utiliser de tableaux). Nous apprendrons également comment placer les styles dans une feuille de style distincte.
Étape n°1 – Balisage et utilisation des balises
Le balisage HTML précède toujours les styles. Il ne sert à rien de se lancer dans CSS sans HTML entièrement préparé.
HTML est un langage de balisage hypertexte, en d'autres termes, HTML décrit la structure des informations textuelles d'une page. Avant de commencer à postuler Styles CSS, nous devons apprendre à appliquer les éléments de structure.
Lors de la construction du balisage, nous utilisons des « balises » entourées de crochets angulaires. Les balises sont utilisées pour définir quelque chose sur une page. CSS est utilisé ultérieurement pour déterminer où (dans le navigateur) le contenu d'une balise particulière est affiché.
Les balises les plus simples sur une page sont :
La plupart des balises et du contenu sont utilisés à l'intérieur de la balise
.Une balise très importante pour séparer et définir la structure est la
Utilisez n’importe quel éditeur d’images pour dessiner le croquis suivant :
Coder pour de ce modèle devrait ressembler à ceci :
Comme vous pouvez le voir, les balises div ont des identifiants. Nous en aurons besoin pour concevoir chaque cellule. L'ID est utilisé pour étiqueter la balise et lui donner un style unique. Alors que « classe » est utilisé pour répéter des éléments de conception.
En outre, l'exemple utilise un autre « wrapper » div qui « enveloppe » toutes les autres balises. Cela nous sera utile plus tard pour positionner notre page.
Dans la feuille de style, nous définissons les éléments de conception de la page. Vous pouvez créer une feuille de style interne ou externe. Dans cette leçon, nous utiliserons l'externe.
Si vous consultez votre page dans un navigateur maintenant, rien n'apparaîtra. C’est parce que nous n’avons donné aucune couleur ni forme à nos balises. Et comme notre CSS sera externe, la première chose à faire est de vous assurer que la page a un lien vers la feuille de style.
Ajoutez le code suivant entre
:
Étape #3 - Créer du CSS
La syntaxe CSS se compose d'un sélecteur, d'une propriété et d'une valeur. Un sélecteur est une balise qui doit être stylisée dans la conception, une propriété est le type d'attribut que vous souhaitez ajouter, une valeur est mesure quantitative propriétés.
Le sélecteur, en plus de la balise body, est écrit en CSS commençant par « # » ou « . ». "#" spécifie l'ID et "." (point) spécifie la classe du sélecteur. Il peut y avoir de nombreuses propriétés à l'intérieur d'un sélecteur et elles doivent toutes être entourées de ( ).
#sélecteur (
valeur de la propriété;
valeur de la propriété;
valeur de la propriété;
}
Nous devons styliser les balises suivantes en utilisant
CSS :
*corps
* emballage
* entête
* la navigation
*menu
* contenu
*bas de page
Propriétés et valeurs possibles en CSS :
La propriété « background » peut être une image ou une couleur, ou les deux. Pour afficher une image, la valeur doit être constituée du chemin d'accès à l'image. Un code hexadécimal est utilisé pour déterminer la couleur.
La propriété "color" permet de définir la couleur du sélecteur. Les valeurs sont écrites sous forme de code hexadécimal (exemple : #FFFFFF pour le blanc).
La propriété "font-family" permet de définir la police qui sera utilisée. La norme est d’inclure au moins 3 types de polices. Ceci est fait au cas où le navigateur ne pourrait pas afficher la première police, la seconde serait utilisée, etc. (exemple : Trébuchet MS, Arial, Times New Roman)
La propriété "font-size" spécifie la taille de la police et a une valeur en pixels.
La propriété "margin" permet de déterminer la position du sélecteur. Les valeurs précisent la distance entre les côtés du sélecteur et le bord de la fenêtre du navigateur dans l'ordre suivant : haut, gauche, bas, droite. Si nous devons centrer la page, nous écrivons "0px auto 0px". La spécification des quatre côtés est facultative.
La propriété "width" spécifie la largeur souhaitée en pixels de n'importe quel sélecteur.
La propriété "hauteur" est la hauteur en pixels.
La propriété "float" nous permet de positionner les éléments au sein des sélecteurs, dans la plupart des cas à droite ou à gauche.
Pour Création CSS fichier, ouvrez votre éditeur de texte préféré et enregistrez nouveau document comme style.css dans le dossier des pages du site. Ajoutez le code suivant :
Corps (
arrière-plan : #f3f2f3 ;
couleur : #000000 ;
famille de polices : Trebuchet MS, Arial, Times New Roman ;
taille de police : 12 px ;
}
#emballage (
arrière-plan : #FFFFFF ;
marge : 60px automatique ;
largeur : 900 px ;
hauteur : 1024px ;
}
#entête (
arrière-plan : #838283 ;
hauteur : 200px ;
largeur : 900 px ;
}
#la navigation (
arrière-plan : #a2a2a2 ;
largeur : 900 px ;
hauteur : 20px ;
}
#menu (
arrière-plan : #333333 ;
flotteur : gauche ;
largeur : 200 px ;
hauteur : 624 px ;
}
#contenu (
arrière-plan : #d2d0d2 ;
largeur : 900 px ;
hauteur : 624 px ;
}
#bas de page (
arrière-plan : #838283 ;
hauteur : 180px ;
largeur : 900 px ;
}
Conclusion
Tu as réussi l'école jeune combattant CSS et stylisé tous les sélecteurs en utilisant les propriétés ci-dessus.
J'espère que vous avez apprécié la leçon ! J'attends avec impatience vos retours et suggestions.
Reg.ru : domaines et hébergement
Le plus grand registraire et fournisseur d'hébergement en Russie.
Plus de 2 millions de noms de domaine en service.
Promotion, messagerie de domaine, solutions d'affaires.
Plus de 700 000 clients dans le monde ont déjà fait leur choix.
* Passez la souris pour suspendre le défilement.
Retour avant
30 bonnes pratiques CSS pour les débutants
CSS est un langage utilisé à un moment donné par presque tous les développeurs. Même si nous le tenons parfois pour acquis, il s’agit néanmoins d’un outil puissant et doté de nombreuses applications nuancées qui peuvent aider (ou entraver) une bonne conception. ce processus). Ci-dessous, 30 bonnes recommandations, qui vous aidera à écrire du code correct et compétent, en évitant de nombreuses erreurs courantes.
1. Rendre la lecture facile
La lisibilité aisée de votre fichier CSS est très importante, même si de nombreuses personnes sous-estiment ce point. Une bonne lisibilité vous permet de simplifier votre travail à l'avenir, avec le support du site, puisque vous trouverez les éléments dont vous avez besoin plusieurs fois plus rapidement. N'oubliez pas non plus que votre dossier devra peut-être être examiné et corrigé par quelqu'un d'autre.
La note
Lors de l'écriture de fichiers CSS, la plupart des développeurs se répartissent en deux groupes, deux extrêmes.
Groupe 1: Tout en une seule ligne
SomeDiv ( arrière-plan : rouge ; remplissage : 2em ; bordure : 1px noir uni ; )
Groupe 2 : Chaque style a une ligne distincte
SomeDiv ( arrière-plan : rouge ; remplissage : 2em ; bordure : 1px noir uni ; )
En fait, les deux pratiques sont plutôt bonnes, même si les désaccords entre les représentants de ces groupes ne sont pas rares ! Gardez simplement à l’esprit que vous devez choisir l’option que vous aimez examiner. C'est tout.
La note
2. Rendre le tout entier
En plus de rendre votre code plus lisible, rendez-le plus cohérent. Vous devriez commencer à développer votre propre « sous-langage » CSS qui vous permettra d'adhérer à un style de dénomination spécifique. Manger une certaine quantité de des classes que je crée presque toujours, et je leur donne à chaque fois les mêmes noms. Par exemple, j'utilise .caption-droite pour aligner les images à droite.
Demandez-vous si vous utiliserez des tirets et souligne dans vos noms et identifiants de classe, et dans quels cas vous le feriez. Lorsque vous commencez à créer vos propres normes CSS, vous vous rapprochez beaucoup plus du statut de professionnel CSS.
3. Commencez avec un cadre
Beaucoup de gens pensent que vous ne devriez pas utiliser de frameworks CSS, mais je pense que si quelqu'un prenait le temps de créer un programme capable d'accélérer le processus de développement, alors pourquoi réinventer la roue ? Je sais que les frameworks ne doivent pas être utilisés partout, mais dans de nombreux cas, leur utilisation est tout à fait justifiée.
De nombreux concepteurs créent leurs propres frameworks au fur et à mesure qu'ils travaillent, et c'est également une excellente idée pour maintenir la cohérence du code entre les projets.
La note
Je ne suis pas d'accord. Les frameworks CSS sont une chose indispensable, mais seulement pour quelques-uns, pour ceux qui savent bien les utiliser.
"Il s'agit moins de réinventer la roue que de comprendre son fonctionnement."
Si vous commencez tout juste à comprendre les feuilles de style en cascade, je vous recommande de rester à l'écart de divers frameworks pendant au moins un an. Sinon, vous vous confondrez simplement. Apprenez d'abord CSS, puis optimisez votre travail avec ce langage.
La note
4. Utilisez la remise à zéro
La plupart des frameworks CSS ont un annuleur de style intégré, mais si vous n'avez pas l'intention de l'utiliser, vous pouvez recourir à d'autres annuleurs. La réinitialisation des styles vous permet d'éviter de nombreux problèmes d'affichage inégal dans différents navigateurs, en définissant des paramètres clairs pour la taille des polices, les titres, les marges externes et internes, etc. Cette « remise à zéro » permet d’obtenir le même affichage dans tous les navigateurs.
Voici des liens vers certaines des réinitialisations les plus populaires : MeyerWeb, la réinitialisation des développeurs de Yahoo. Alternativement, vous pouvez créer votre propre « annulateur », en utilisant ce qui suit comme base.
5. Structurez vos fichiers de style de haut en bas
Il est toujours judicieux de structurer votre fichier CSS afin que vous puissiez trouver rapidement le morceau de code dont vous avez besoin. Je recommande d'utiliser une approche descendante, qui consiste à créer votre feuille de style dans l'ordre dans lequel les styles sont appliqués sur la page. Par exemple:
1. Classes générales (body, a, p, h1, etc.) 2. #header 3. #nav-menu 4. #main-content
N'oubliez pas d'ajouter des commentaires dans chaque section !
/****** contenu principal *********/ les styles vont ici... /****** pied de page *********/ les styles vont ici...
6. Éléments de groupe
Souvent, les éléments peuvent avoir des styles communs qui se chevauchent. Au lieu de réécrire le code existant, il est préférable de simplement regrouper les éléments. Par exemple, vos titres h1, h2 Et h3 peut avoir la même police et la même couleur :
H1, h2, h3 (famille de polices : tahoma, couleur : #333)
7. Créez d'abord un balisage HTML
De nombreux développeurs créent le fichier CSS en parallèle avec la création du balisage HTML. Cela semble logique, mais vous pouvez quand même gagner beaucoup de temps si vous comprenez d'abord le HTML et ensuite les styles. Cette approche vous permet de considérer la page dans son ensemble, de réfléchir à l'endroit où appliquer quels styles et d'obtenir un fichier de style descendant plus cohérent.
8. Appliquer plusieurs classes à un élément si nécessaire
Parfois, il est préférable d'appliquer plusieurs classes à un élément à la fois. Disons que vous avez un conteneur divà qui tu veux demander Flotter à droite, et tu as déjà un cours .droite dans votre fichier de styles, ce qui aligne tout correctement. Vous pouvez simplement ajouter une autre classe à votre conteneur div:
Vous pouvez ajouter autant de classes que nécessaire, en les séparant par des espaces.
La note
Soyez très prudent lorsque vous utilisez des noms comme gauche Et droite. Imaginez que vous deviez soudainement aligner un conteneur vers la gauche. Dans ce cas, vous devez revenir dans le code HTML et modifier le nom de la classe, le tout afin de modifier l'apparence visuelle de la page. Ce n’est pas sémantique. N'oubliez pas : HTML est destiné au balisage, CSS est destiné à la présentation visuelle.
Si vous avez besoin de modifications HTML pour modifier la mise en page de la page, vous faites quelque chose de mal !
9. Utilisez la bonne balise Doctype
Les éléments appartenant aux deux types comprennent :
Portée, a, fort, em, img, br, entrée, abbr, acronyme
Les éléments de bloc comprennent :
Div, h1...h6, p, ul, li, table, blockquote, pré, formulaire
13. Organiser les propriétés par ordre alphabétique
Utiliser un tel système d’agencement des propriétés vous permettra de gagner beaucoup de temps lors de la recherche du bien souhaité.
#barbe à papa ( couleur : #fff ; flotteur : gauche ; poids de la police : hauteur : 200 px ; marge : 0 ; remplissage : 0 ; largeur : 150 px ; )
La note
Eh .., sacrifiez la vitesse pour une lisibilité légèrement améliorée.. Voyez par vous-même..
La note
14. Utilisez des compresseurs CSS
Les compresseurs CSS vous aident à réduire considérablement la taille de votre fichier de feuille de style en supprimant les sauts de ligne inutiles et en combinant des éléments. Tout cela permet à votre site de se charger plus rapidement. CSS Optimizer et CSS Compressor sont deux excellents services en ligne pour effectuer de telles tâches.
En plus de réduire la taille du fichier, vous obtenez naturellement une détérioration significative de sa lisibilité, il n'est donc plus prévu d'utiliser de tels services lorsque vous apportez des modifications aux styles.
15. Utiliser des classes génériques
Vous remarquerez bientôt qu’il existe des styles que vous utilisez encore et encore. Au lieu d'ajouter ce style à chaque ID, vous pouvez créer des classes génériques et les ajouter aux ID d'autres classes CSS (voir recommandation n°8 dans cet article).
Par exemple, j'ai remarqué que j'utilise Flotter à droite Et flottant:gauche encore et encore dans mes créations. J'ajoute juste des cours .gauche Et .droiteà mon fichier de style et appliquez-le aux éléments.
Gauche (flottant :gauche) .droite (flottant :droite)
De cette façon, tu n'es pas obligé d'écrire tout le temps flottant:gauche pour tous les éléments auxquels cette propriété doit être appliquée.
16. Utilisez « Marge : 0 auto » pour centrer le motif
De nombreuses personnes qui découvrent CSS ne comprennent pas pourquoi elles ne peuvent pas simplement utiliser flotteur : centre pour obtenir un effet de centrage pour les éléments de bloc. Si seulement c'était si simple! Malheureusement, vous devez procéder comme ceci :
Marge : 0 automatique ; /* 0 - pour le haut et le bas ; auto - pour gauche et droite */
17. Ne mettez pas tout dans un DIV
Il est souvent tentant de faire quelque chose comme :
Texte du titre
Cela peut sembler une très bonne solution, mais cela commencera à encombrer votre fichier de styles. Au lieu de cela, faites simple :
En-tête
Et déjà pour le tag h1 vous pouvez définir n’importe quel design dont vous avez besoin.
18. Utilisez Firebug
Vous avez aimé le matériel et souhaitez me remercier ?
Partagez simplement avec vos amis et collègues !