5 Étapes pour comprendre le code html de base

HTML est l`abréviation de HyperText Markup. C`est du charabia pour quelque chose qui rend le texte brut bien paraître. Il est le « code » qui se cache derrière chaque page Web. Même celui-ci. Et, de façon surprenante, il est en fait assez simple.

Les enseignements du code HTML de base peuvent (presque) être répartis dans deux disciplines dominantes tout: style a.k.a manipuler l`apparence, et référant, a.k.a marquage et pointant vers les emplacements des, et dans les documents. HTML ne peut pas faire quelque chose de plus compliqué que de dessiner une table, ou la création d`images, et on ne va pas couper en PHP ou Java.

Pourtant, HTML est encore loin des sentiers battus pour votre Joe moyen. Il est la magie, et aucun de votre entreprise. Mon objectif aujourd`hui est de vous donner quelques-uns des blocs de construction HTML au cours de quelques minutes. Vous ne serez pas un programmeur pour l`instant, mais vous serez en mesure de parcourir la source d`une page Web, comprendre et saisir cette image que Flickr tente si difficile de garder de vous.

Première étape - Le concept de Mots clés

Comme dit précédemment, le code HTML de base manipule un document texte pour appliquer le style et la référence. Il le fait en appliquant des « balises. Une étiquette ne fait rien de plus que d`indiquer une position ou d`une sélection du document, et en spécifiant le type de magie qui doit être fait.

Ce, et seulement cela partie du document est affectée.lt;/tag-exemple-1GT;

Quelque chose vient de se passer, précédent cette partie du document

L`exemple 1 montre une phrase qui est encapsulé par deux balises, un commencer- et balise de fin. Tout entre est affecté. Des exemples très communs sont rendre le texte en gras, cursive, ou la création d`un lien. La balise de fin est identique à la balise de début, mais elle est précédée entre crochets par une barre oblique (/).

L`exemple 2 montre une étiquette qui fonctionne seul et (sans doute) ne avoir besoin à fermer. Bien que non requis, il est parfois aussi écrit mettre l`accent sur ce même attribut. balises Loner n`affectent pas « partie » du document, mais signifient la magie locale, les choses qui se passent « entre ». Des exemples courants sont les sauts de ligne et les sauts de paragraphe.

Remarque: pour les balises Loner, , , et tout cela veut dire la même chose.

Ceci, et seulement cette partie du document est affectée.

Parfois, les balises permettent d`attributs supplémentaires à fournir. Des exemples courants sont la police et la couleur de texte, ou largeur de l`image, la taille et la source. Dans ces cas, le nom de la balise est suivi d`un espace et un certain nombre d`attribut avec une valeur, encore une fois séparés par des espaces. La valeur est la partie variable de cette formule. Notez que la balise de fin reste le même, quels que soient les attributs.

Nous allons passer en revue quelques balises communes dans les prochaines étapes.

Deuxième étape - La parcellisation de HTML, TÊTE & CORPS

Les balises HTML, la tête et le corps sont un document HTML quelle chambre, cuisine et salle de séjour sont à une maison. Ces balises encapsulant morceler les grandes parties d`un document.

• indique simplement l`utilisation du code HTML. Ils montrent dans chaque page Web, généralement au début et à la fin, et embrassent pratiquement tous les autres codes, y compris les deux suivantes.
• marquer le « bâtiment administratif ». Ceux-ci encapsuler le titre, et permettre à certains scripts. En général, à la tête très (sans jeu de mots) du document, c`est là que vous n`avez pas besoin d`être.
• est situé au-dessous des balises HEAD, et fait la majeure partie du document. Cette partie raconte l`histoire de ce qui se fait sur montrant votre page Web. Vivre ici sont les textes, images, liens, et quoi que ce soit à peu près, vous pouvez voir dans votre navigateur. C`est là que nous jouons. Les balises suivantes se produisent tous dans la partie du corps d`un document HTML.

Troisième étape - Parce que , & Vous donne le sentiment Jolie

Nous avons déjà dit HTML est un langage de balisage. Cela signifie autant que rendre le texte assez sentir. Rappelez-vous, HTML remonte à quand le Web était une expérience très texte-y. En outre, l`Internet aurait été beaucoup trop lent pour soutenir YouTube. Voici quelques-unes des balises jolie rendant les plus courantes.

• rend votre texte audacieux
• vous fait écrire dans cursive
• soulignements ce que vous venez d`écrire

Vous serez ravis de savoir que ceux-ci travaillent également dans la section des commentaires. Ne pas en abuser, cependant.

• frappe la pause, ce qui vous continuez sur une nouvelle ligne
• indique un paragraphe, créant ainsi une grande pause supplémentaire

Celles-ci vous permettent de structurer le document, car une rupture réelle ne signifie rien dans un document HTML.

vous permet de manipuler un tas d`autres choses avec le texte, en utilisant des attributs tels que la taille, le visage et la couleur.

Un exemple idéal serait Smurfs.

• à
  vous permettent de dessiner rapidement différents en-têtes de taille. H1 est le plus grand et le plus petit H7. Ceux que nous utilisons dans les articles MakeUseOf sont habituellement environ H3.

De nos jours, le balisage est souvent conservé dans un séparé CSS fichier. Les chiffres de style précis sont expliqués à l`extérieur, et il faut que la partie « marque » du document pour les appliquer. Cela se fait à l`aide div Mots clés. Par exemple,

cherchera une headermakeuseof classe dans le fichier CSS. Nous ne discuterons pas en détail.

Video: TUTO CSS - #1 Les bases

Quatrième étape - Images embarqué avec

Les images sont devenues usuelles sur les pages HTML, et pourtant il y a un morceau de code derrière. le est l`un des deux balises que nous allons discuter en détail, car il est quelque chose que vous serez en mesure d`utiliser. Il suffit de penser de ces sites Web ennuyeux qui ne vous permettent pas de télécharger des images sur votre bureau (je vous regarde, Flickr). La prochaine fois, allez à la source et de saisir la source vous-même.

Voici quelques-unes des les attributs utilisé conjointement avec l`onglet IMG.

• src = » http://site.com/image.jpg/ »

Très important. L`attribut source spécifie l`emplacement d`une image. C`est vrai, une image est jamais vraiment rendu dans une page Web, mais obtient tiré à partir d`une source externe. Une fois que vous avez cette adresse, vous avez l`image.

Parfois, seule une partie de l`URL est affichée. L`URL réelle dépendra de l`emplacement du fichier HTML. Ceci est appelé une adresse relative, ce qui contraste avec une adresse absolue. un exemple de http://site.com/dir1/dir2/dir3/page.html peut afficher une valeur de « image.jpg » lorsque l`image est situé dans le même répertoire que la page Web. Dans cet exemple, l`adresse complète serait http://site.com/dir1/dir2/dir3/image.jpg.

Si vous rencontrez une adresse relative de « DIR4 / image.jpg », l`image sera situé dans http://site.com/dir1/dir2/dir3/dir4/image.jpg

De même, « ../image.jpg » vous fera revenir en arrière un répertoire, « ../../image.jpg » deux répertoires, et ainsi de suite.

• hauteur = » 200" width = » 50% »

Ces balises définissent la taille de l`image est affiché. Il ne dit rien de la taille réelle de l`image. Les tailles peuvent être ajoutés en pixels (où 200 et 200px sont une seule et même) ou pour cent. Avec seulement la hauteur ou largeur spécifiée, l`autre change en conséquence. En utilisant les deux balises vous permet de « étirer ».

• alt = » nom alternatif ou un commentaire »

La balise alt spécifie le texte affiché en plus de la souris, ou lorsqu`une image ne se charge pas. Plus précisément, ce sont ce que XKCD utilise pour ces drôles après coup.

L`utilisation correcte serait, par exemple

Cinquième étape - les liens sont faits avec une étiquette

Celui-ci pourrait être encore plus important que la balise IMG. Un tag vous permet de marquer un point dans un document et un lien vers des documents, des images, des fichiers et même des ancres dans d`autres sites HTML. Voici les attributs les plus communs.

• href = » // makeuseof.com »

L`un des attributs les plus communs, le texte écrit. Vous pouvez créer des liens en définissant l`adresse Web et l`encapsulation dudit « texte d`ancre. Les liens peuvent également être utilisés dans la section des commentaires, à condition que vous ne liez pas du spam ou de contenu inapproprié.

• name = » Neverwhere »

Utilisé conjointement avec l`attribut name, la balise créera un point d`ancrage. Vous pouvez utiliser ce point d`ancrage pour un lien vers l`intérieur de la même page, ou même sur le web. On peut créer un lien vers un point d`ancrage à l`aide d`une URL relative ou absolue, respectivement, ou.

En conclusion

Ceci est la partie où je l`avoue, nous avons seulement brossés la surface du code HTML de base. Ce que nous avons vu aujourd`hui vous permettra de parcourir et de comprendre une grande partie des sites web simples. Allez-y, essayez. Vous trouverez certainement quelques balises que vous ne savez pas, mais c`est là où Google est très pratique. Si vous êtes prêt, il y a beaucoup plus d`informations où que viennent, et vous pouvez tout trouver en ligne.

Si vous cherchez quelque chose de très spécifique, comme une image, un fichier audio ou un lien, il n`y a pas besoin de lire toute la page HTML. Appuyez sur Ctrl + F et la recherche pour les fichiers ou les balises pertinentes. Vous savez ce que vous cherchez maintenant, et surtout quand vous l`avez trouvé.

Qu`est-ce que tu penses? Votre première ou la dernière rencontre avec HTML? Faites-nous savoir ce que vous pensez dans la section commentaires ci-dessous, et ne pas avoir peur d`essayer une partie du code de balisage!