éléments, et bien d'autres.
Les éléments sont identifiés par l'utilisation de moins-que et supérieur à chevrons, < >. entourant le nom de l'élément. Ainsi, un élément ressemblera à ce qui suit:
L'utilisation de moins-que et supérieur à crochets entourant un élément crée ce qui est connu comme une étiquette. Mots-clés se produisent le plus souvent par paires de balises d'ouverture et de fermeture.
Le contenu qui se trouve entre les balises d'ouverture et de fermeture est le contenu de cet élément. Un lien d'ancrage, par exemple, aura une balise d'ouverture de et une étiquette de clôture . Ce qui tombe entre ces deux balises sera le contenu du lien d'ancrage.
Ainsi, les balises d'ancrage sera un peu comme ceci:
Les attributs
Les attributs sont des propriétés utilisées pour fournir des informations supplémentaires sur un élément. Les attributs les plus courants comprennent l'attribut d'identification, qui identifie un élément; l'attribut de classe, qui classe un élément; l'attribut src, qui spécifie une source de contenu intégrable; et l'attribut href, qui fournit une référence de lien hypertexte vers une ressource liée.
Les attributs sont définis dans la balise d'ouverture, après le nom d'un élément. attributs comprennent généralement un nom et une valeur. Le format de ces attributs se compose du nom d'attribut suivi d'un signe égal et une valeur d'attribut entre guillemets. un exemple, élément comprenant un attribut href ressemblerait à ce qui suit:
Termes communs HTML Demo
HTML syntaxe décrite comprenant un élément, attribut, et la balise
Configuration de la structure du document HTML
Les documents HTML sont des documents en texte brut enregistrés avec une extension de fichier .html plutôt qu'une extension de fichier .txt. Pour commencer HTML d'écriture, vous devez d'abord un éditeur de texte brut que vous êtes à l'aise avec. Malheureusement, cela ne comprend pas Microsoft Word ou Pages, comme ce sont des éditeurs de texte riches. Deux des éditeurs de texte en clair les plus populaires pour HTML et CSS d'écriture sont Texte Dreamweaver et Sublime. alternatives gratuites également Notepad ++ pour Windows et pour Mac TextWrangler.
Tout le contenu visible dans la page web va tomber dans le
élément. Une rupture d'une structure de document HTML typique ressemble à ceci:
HTML Structure de document Demo
Lorsqu'un élément est placé à l'intérieur d'un autre élément, également connu sous le nom imbriqué, il est une bonne idée de retrait de cet élément pour maintenir la structure du document bien organisé et lisible. à la fois dans le code précédent, la
et éléments sont imbriqués et en retrait, à l'intérieur du élément. Le motif de l'indentation pour des éléments se poursuit en tant que nouveaux éléments sont ajoutés à l'intérieur du et éléments.
Éléments de fermeture automatique
Dans l'exemple précédent, la élément avait une seule étiquette et ne comprend pas une balise de fermeture. Ne craignez rien, ce fut intentionnel. Tous les éléments sont constitués de balises d'ouverture et de fermeture. Certains éléments reçoivent simplement leur contenu ou le comportement d'attributs dans une balise unique. le élément est un de ces éléments. Le contenu de la précédente élément est associé avec l'utilisation de l'attribut charset et la valeur. D'autres éléments de fermeture automatique communs incluent
code de validation
Peu importe avec quel soin nous lors de l'écriture de notre code, nous allons inévitablement faire des erreurs. Heureusement, lors de l'écriture HTML et CSS, nous avons validateurs pour vérifier notre travail. Le W3C a construit les deux validateurs HTML et CSS qui analyse le code des erreurs. Notre code ne valider que l'aide à rendre correctement sur tous les navigateurs, mais nous aide également à enseigner les meilleures pratiques pour l'écriture de code.
En pratique
Ouvrons notre éditeur de texte, créez un nouveau fichier nommé index.html. et l'enregistrer dans un endroit que nous ne l'oublierons pas. Je vais créer un dossier sur mon bureau nommé « conférence Style- » et enregistrez ce fichier là; ne hésitez pas à faire la même chose.
À l'intérieur de
élément, ajoutons et éléments. le <meta> élément doit inclure l'attribut approprié charset et de la valeur, alors que le <title> élément doit contenir le titre de la page-disons « Styles de conférence. »</p>
<p>À l'intérieur de <body> élément, ajoutons <h1> et <p> éléments. le <h1> élément devrait inclure la rubrique que nous voulons inclure-Utilisons « Styles Conférence » à nouveau et la <p> élément devrait inclure un paragraphe simple pour présenter notre conférence.</p><p>Maintenant, il est temps de voir comment nous avons fait! Allons-y trouver notre fichier index.html (le mien est dans le dossier « styles conférence » sur mon bureau). Double-cliquez sur ce fichier ou en faisant glisser dans un navigateur Web ouvrira ses portes pour nous de passer en revue.</p>
<p>Nous allons changer de vitesse un peu, se déplaçant loin de HTML, et jeter un oeil à CSS. Rappelez-vous, HTML définira le contenu et la structure de nos pages web, alors que CSS définira le style visuel et l'apparence de nos pages web.</p>
<h2>Comprendre les termes communs CSS</h2>
<p>En plus des termes HTML, il y a quelques termes CSS commun, vous voulez vous familiariser avec. Ces termes comprennent sélecteurs. Propriétés. et les valeurs. Comme la terminologie HTML, plus vous travaillez avec CSS, plus ces termes deviendront une seconde nature.</p>
<p>Sélecteurs cibler généralement une valeur d'attribut, par exemple un identifiant ou une classe, ou cibler le type d'élément, tel que <h1> ou <p> .</p>
<p>Au sein de CSS, les sélecteurs sont suivis avec des accolades, <>. qui englobent les styles à appliquer à l'élément sélectionné. Le sélecteur vise tous ici <p> éléments.</p>
<h3>Propriétés</h3>
<p>Une fois qu'un élément est sélectionné, une propriété détermine les styles qui seront appliquées à cet élément. Les noms de propriété tombent après un sélecteur, dans les accolades, <>. et précédant immédiatement deux points. Il existe de nombreuses propriétés que nous pouvons utiliser, comme arrière-plan. Couleur. taille de police. la taille. et la largeur. et de nouvelles propriétés sont souvent ajoutées. Dans le code suivant, nous définissons les propriétés de couleur et de taille de police à appliquer à tous <p> éléments.</p>
<p>Jusqu'à présent, nous avons sélectionné un élément avec un sélecteur et déterminé quel style que nous aimerions appliquer une propriété. Maintenant, nous pouvons déterminer le comportement de cette propriété avec une valeur. Les valeurs peuvent être identifiées comme étant le texte entre les deux points. et virgule;. Ici, nous choisissons tous <p> éléments et en définissant la valeur de la propriété de couleur à l'orange et la valeur de la propriété de taille de police à 16 pixels.</p>
<p>Il est une pratique courante à des paires de propriétés et valeur dans indent les accolades. Comme avec HTML, ces renfoncements aident à garder notre code organisé et lisible.</p>
<p>CSS syntaxe décrite comprenant un sélecteur, les propriétés et les valeurs</p>
<p>Connaissant quelques termes communs et la syntaxe générale du CSS est un bon début, mais nous avons quelques éléments à apprendre avant de sauter trop profond. , Nous avons besoin précisément de jeter un oeil de plus près comment fonctionnent les sélecteurs dans les CSS.</p>
<h2>Travailler avec Selectors</h2>
<p>Selectors, comme mentionné précédemment, indiquent quels éléments HTML sont coiffés. Il est important de comprendre comment utiliser les sélecteurs et comment ils peuvent être mis à profit. La première étape est de se familiariser avec les différents types de sélecteurs. Nous allons commencer par sélecteurs les plus courants: le type. classe. et sélecteurs d'ID.</p>
<h3>Type Selectors</h3>
<p>De type sélecteurs cible éléments par leur type d'élément. Par exemple, si nous voulions cibler tous les éléments de division, <div>. nous utiliserions un sélecteur de type de div. Le code suivant montre un sélecteur de type pour les éléments de division, ainsi que le code HTML correspondant sélectionne.</p>
<h3>Selectors supplémentaires</h3>
<p>Selectors sont extrêmement puissants, et les sélecteurs décrits ici sont sélecteurs les plus courants que nous allons rencontrer. Ces sélecteurs sont également que le début. De nombreux sélecteurs plus avancés existent et sont facilement disponibles. Lorsque vous vous sentez à l'aise avec ces sélecteurs, ne pas avoir peur de regarder dans certains des sélecteurs plus avancés.</p>
<p>Très bien, tout commence à se réunir. Nous ajoutons des éléments à une page dans notre HTML, et nous pouvons alors sélectionner les éléments et appliquer des styles CSS pour les utiliser. Maintenant, nous allons relier les points entre notre HTML et CSS, et obtenir ces deux langues de travail ensemble.</p>
<h2>CSS référençant</h2>
<h4>Autres options pour ajouter CSS</h4>
<p>Pour créer notre feuille de style CSS externe, nous voulons utiliser notre éditeur de texte de votre choix à nouveau pour créer un nouveau fichier texte avec une extension de fichier Css. Notre fichier CSS doit être enregistré dans le même dossier ou un sous-dossier, où notre fichier HTML est situé.</p>
<p>au sein de la <head> élément du document HTML, le <link> élément est utilisé pour définir la relation entre le fichier HTML et le fichier CSS. Parce que nous sommes un lien vers CSS, nous utilisons l'attribut rel avec une valeur de feuille de style pour préciser leur relation. En outre, le href (ou référence de lien hypertexte) attribut est utilisé pour identifier l'emplacement ou le chemin, du fichier CSS.</p>
<p>Prenons l'exemple suivant d'un document HTML <head> élément qui fait référence à une seule feuille de style externe.</p>
<p>Pour que le CSS pour rendre correctement, le chemin de la valeur de l'attribut href doit directement en corrélation avec où notre fichier CSS est enregistré. Dans l'exemple précédent, le fichier main.css est stocké dans le même emplacement que le fichier HTML, également connu sous le répertoire racine.</p>
<p>Si notre fichier CSS est dans un sous-répertoire ou sous-dossier, la valeur de l'attribut href doit établir une corrélation entre cette voie en conséquence. Par exemple, si notre fichier main.css ont été stockés dans un sous-répertoire nommé feuilles de style. la valeur de l'attribut href serait stylesheets / main.css. en utilisant une barre oblique pour indiquer le déplacement dans un sous-répertoire.</p>
<h2>En utilisant Remet CSS</h2>
<p>Il y a un tas de différentes réinitialisations disponibles à utiliser, qui ont toutes leurs propres fortes. L'un des réinitialisations les plus populaires est la remise à zéro de Eric Meyer. qui a été adapté pour inclure des styles pour les nouveaux éléments de HTML5.</p>
<p>Si vous vous sentez un peu plus aventureux, il y a aussi Normalize.css. créé par Nicolas Gallagher. Normalize.css ne se concentre pas sur l'utilisation d'un disque remis à zéro pour tous les éléments communs, mais plutôt sur la définition de styles communs pour ces éléments. Elle exige une meilleure compréhension des CSS, ainsi que la conscience de ce que vous souhaitez que vos styles soient.</p>
<h4>Compatibilité multi-navigateur - Test</h4>
<p>Dans l'ensemble il y a une poignée de choses à être à l'affût lors de l'écriture CSS. Les bonnes nouvelles sont que tout est possible, et avec un peu de patience, nous allons le tout.</p>
<h2>En pratique</h2>
<p>En utilisant notre éditeur de texte, nous allons créer un nouveau fichier nommé main.css et enregistrez-le dans le dossier « stylesheets` » nous venons de créer.</p>
<p>Avec notre fichier main.css commence à prendre forme, nous allons connecter à notre fichier index.html. Ouverture du fichier index.html dans notre éditeur de texte, ajoutons la <link> élément dans notre <head> élément, juste après la <title> élément.</p>
<p>Parce que nous allons référence à une feuille de style dans le <link> élément, ajoutons l'attribut relation, rel. avec une valeur de feuille de style.</p>
<p>Nous voulons également inclure une référence de lien hypertexte, en utilisant l'attribut href, à notre fichier main.css. Rappelez-vous, notre fichier main.css est enregistré dans le dossier « feuilles de style », qui se trouve dans le dossier « actifs ». Par conséquent, la valeur de l'attribut href, qui est le chemin à notre fichier main.css, doit être actifs / stylesheets / main.css.</p>
<p>Il est temps de vérifier notre travail et voir si notre HTML et CSS deviennent le long. Maintenant, notre ouverture fichier index.html (ou rafraîchir la page si elle est déjà ouvert) dans un navigateur Web devrait afficher des résultats légèrement différents qu'auparavant.</p>
<h3>Démo - Source Code</h3>
<p>Jusqu'ici tout va bien! Nous avons pris quelques grandes étapes dans cette leçon.</p>
<p>Il suffit de penser, vous savez maintenant les bases du HTML et CSS. Alors que nous continuons et vous passez plus de temps à écrire HTML et CSS, vous deviendrez beaucoup plus à l'aise avec les deux langues.</p>
<p>Pour rappel, jusqu'à présent, nous avons couvert les éléments suivants:</p>
<ul>
<li>La différence entre HTML et CSS</li>
<li>Se familiariser avec les éléments HTML, les balises et les attributs</li>
<li>La mise en place de la structure de votre première page web</li>
<li>Se familiariser avec les sélecteurs CSS, propriétés et valeurs</li>
<li>Travailler avec les sélecteurs CSS</li>
<li>Référençant CSS dans votre code HTML</li>
<li>La valeur de remises à zéro CSS</li>
</ul>
<p>Maintenant, nous allons regarder de plus près au HTML et d'apprendre un peu plus sur la sémantique.</p>
<h2>Ressources - Liens</h2>
<h2>En savoir plus HTML - CSS ou d'étude Autres sujets</h2>
<p>Choisissez votre sujet d'intérêt ci-dessous et je recommanderai un cours que je crois fournira la meilleure occasion d'apprentissage pour vous.</p>
<h3>Choisissez votre sujet d'intérêt:</h3>
<h3>Vos recommandations du cours:</h3>
<p>Sélectionnez une rubrique ci-dessus pour afficher vos recommandations de cours.</p>
<p>En fonction de votre intérêt pour les affaires - Opérations Je recommande de vérifier les cours Treehouse suivants:</p>
<h2>Apprenez à code HTML - CSS du Livre</h2>
<p><div style="text-align:center;"><img src="http://images-on-off.com/images/e1/buildingyourfirstwebpagelearntocodehtmlc-dd8d2a3a.png" title="Création de votre première page Web - Apprenez à code HTML - CSS (page)" alt="Création de votre première page Web - Apprenez à code HTML - CSS" /></div></p>
<p>Acheter Apprenez à code HTML - CSS</p>
<h3>Vous recherchez Advanced HTML - CSS leçons?</h3>
<p><div style="text-align:center;"><img src="http://images-on-off.com/images/e1/buildingyourfirstwebpagelearntocodehtmlc-2593a8ec.jpg" title="Création de votre première page Web - Apprenez à code HTML - CSS (page)" alt="Création de votre première page Web - Apprenez à code HTML - CSS" /></div></p>
<p>Checkout ces leçons HTML et CSS avancées pour un regard plus profond sur la conception et le développement front-end, parfait pour tout développeur de concepteur ou front-end qui cherchent à compléter leurs compétences.</p>
<h3>Joignez-vous à la lettre d'information</h3>
<p>Pour rester à jour et apprendre quand de nouveaux cours et les leçons sont affichés, s'il vous plaît vous inscrire à la Newsletter gratuite-spam.</p>
<h4>Articles Liés</h4>
<ul>
<li>
<p><a href="/articles/construction-formulaires-apprenez-a-code-html-css.php">Construction Formulaires - Apprenez à code HTML - CSS</a></p>
</li>
<li>
<p><a href="/articles/creation-de-listes-apprenez-a-code-html-css.php">Création de listes - Apprenez à code HTML - CSS</a></p>
</li>
<li>
<p><a href="/articles/tutoriel-html-apprendre-a-concevoir-un-site-web-en.php">Tutoriel HTML - Apprendre à concevoir un site Web en utilisant HTML ()</a></p>
</li>
</ul>
</div>
<div class="extra">
<div class="info"><a href="/articles/l-amour-idees-de-coupon-idee-cadeau.php">Précédent</a> ◈ <a href="/articles/examen-de-comment-faire-de-l-argent-dechirer.php">Suivant</a></div>
<div class="clear"></div>
</div>
</article>
</div>
</div>
</div>
</div>
<div id="sidebar" class="col-1-3">
<div class="wrap-col">
<div class="box">
<div class="content">
<div class="box">
<div class="content">
</div>
</div> </div>
</div>
</div>
</div>
</section>
<footer>
<div class="wrap-footer pominodiko">
<div class="row">
<div class="col-1-1">
<div class="wrap-col">
<div class="box">
<div class="content">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="copyright">
<p>© Copyright 2016 - 2025</p>
<!--LiveInternet counter--><script type="text/javascript">
document.write("<a href='//www.liveinternet.ru/click' "+
"target=_blank><img src='//counter.yadro.ru/hit?t50.6;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+
";"+Math.random()+
"' alt='' title='LiveInternet' "+
"border='0' width='31' height='31'><\/a>")
</script><!--/LiveInternet-->
</div>
</footer></div>
</body>
</html>