DAVEN FARNHAM: Aujourd'hui, je vais parler un peu de HTML, HyperText Markup Language. Vous voyez HTML partout de nos jours. En fait, si vous regardez ce vidéo dans un navigateur, vous êtes voir HTML moment. HTML n'est pas un langage de programmation, c'est plutôt un langage de balisage utilisé par navigateurs web d'afficher des pages sur l'internet. 

Donc, vous demandez peut-être comment exactement est écrit une page web en HTML différente d'écrire un programme dans une programmation langage comme C? Eh bien, C est un langage très stricte règles syntaxiques qui doivent être compilé avant de pouvoir courir. Si vous avez déjà oublié d'inclure une virgule à la fin d'une instruction dans votre code C, vous savez de quoi je parle sur en ce qui concerne la syntaxe stricte. 

navigateurs Web cependant, sont un peu plus pardonner quand il s'agit de HTML. Même si votre HTML n'est pas syntaxiquement correcte, votre page peut encore être affiché par un navigateur, mais il pourrait regardez pas comme vous le souhaitez. Donc, il est toujours préférable de suivre les règles. La meilleure façon d'obtenir une intuition sur la façon dont les choses fonctionnent est de passer par un exemple. 

Donc, ce que nous avons ici est une base modèle pour une page Web. Vous avez probablement remarqué beaucoup de choses entre les chevrons. Eh bien, ce ne sont que des étiquettes. Balises informent essentiellement les navigateurs Web que, hé, quelque chose est sur votre route. Rappelez-vous cependant, chaque fois que vous ouvrez un tag, vous devez fermer une fois que vous êtes fait de l'utiliser. 

Ainsi, par exemple, j'ouvre une section de code avec ouvert corps de support, ferme la parenthèse. Je puis ajouter un peu de texte, dans ce cas, mon première page web, alors quand je suis allé à fermer cette partie, j'utilise presque une tag identique sauf que cette fois avec un barre oblique avant le corps. En général, c'est le format que vous êtes allez utiliser chaque fois que vous ouvrez et les balises de fermeture. Ensemble, une balise d'ouverture et une balise de fin composer ce qu'on appelle un élément. 

Si vous regardez la première ligne, vous aurez voir un point d'exclamation suivi d' DOCTYPE html. C'est vraiment juste dit de votre navigateur que le fichier est une page web écrit en HTML. La balise HTML dit en substance, voici le HTML. Ensuite, nous avons une étiquette de tête avec une balise de titre à l'intérieur. L'étiquette de la tête que vous pouvez penser que comprenant un code HTML qui vient de la majeure partie de votre page Web de contenu réel. 

En général, vous mettez le titre de votre page web ici, mais il y en a d'autres balises qui peuvent apparaître ici aussi. Ensuite vient le corps de votre page Web, la viande réelle et les os de votre site web. Dans notre exemple, nous venons de mettre simple phrase, ma première page Web, qui, si nous gérons notre site, se penchera un petit quelque chose de ce genre. Notre page web n'est pas trop étrange, mais ne vous inquiétez pas. Nous allons embellir bientôt. 

Donc le code HTML ci-dessus, nous allons vous donner un très modèle de base pour une page Web, rien d'extraordinaire, juste le squelette. Mais si je crée une page web, si je veux ajouter une image, disons, de moi-même? Eh bien, je peux le faire. Il ya deux façons de ajouter des images à votre site. Si l'image est dans le même dossier que votre fichier HTML, vous pouvez créer un lien vers le image via le chemin comme ceci. 

Vous ouvrez avec une balise d'image suivie par dans l'attribut Alt dans le la source de l'image. La valeur de l'attribut alt est quelques-uns texte alternatif au cas où un utilisateur ne peut pas voir l'image. Sinon, vous pouvez également créer un lien vers images via une URL complète, comme cela. Maintenant, il n'existe pas vraiment ce site, mais s'il y avait une photo de moi à cette adresse, je pourrais utiliser l'URL de la source à inclure son image sur mon site. Quoi qu'il en soit, vous vous retrouvez avec beaucoup site plus joli, quelque chose comme ça. 

Eh bien, c'est assez cool, mais je sorte de vouloir un peu de texte ici. Donc, nous allons juste ajouter quelque chose super simple au-dessus du image, comme l'en-tête. Tout ce que j'ai fait jusqu'ici est d'utiliser l'en-tête tag, H1, et un saut de ligne tag, br. La balise d'en-tête fait la police un peu peu plus grand et plus important. La balise de saut de ligne, sur l'autre part, est plutôt cool. Contrairement à la plupart des autres balises, vous n'avez pas une balise d'ouverture et de clôture pause, juste celui indiqué ci-dessus. C'est parce que la rupture n'a pas de contenu et est donc un élément vide. 

Les éléments vides de ce genre, vous pouvez ouvrir et près simultanément par simple y compris une barre oblique à la fin de la déclaration initiale. Alors maintenant, mon site est un peu quelque chose comme ça. Mieux, mais il se sent type de comme une impasse. Il n'y a nulle part ailleurs où aller à part à partir de cette page. Eh bien, nous allons résoudre ce problème en y compris un lien. 

Ce que je vais faire ici est d'utiliser un attribuer notée A et faire le l'image un lien vers, disons, CS50 TV. De cette façon, chaque fois que quelqu'un clique sur moi, leur navigateur seront dirigés vers l'autre, probablement plus utile, page Web. J'ai dû réduire la taille de la texte un peu parce que notre page web est obtenir plus avancé. Mais j'espère, c'est toujours clair. Mon site est exactement la même que maintenant, chaque fois que je clique sur l'image, mon navigateur va ouvrir une autre onglet pour la page web CS50.tv. 

Enfin, disons que je vais le style l'utilisation de ce site Web plus tard CSS. CSS est ce qui est connu en tant que feuille de style en cascade. Et il prévoit essentiellement un système efficace moyen d'éditer et de style blocs similaires de code. Je veux commencer à organiser mon HTML rendre plus facile à coiffer la suite. Ici, j'ai mis en place deux types de identificateurs pour aider à organiser mon code. J'ai utilisé l'attribut ID dans un division, ou balise div, et je l'ai utilisé une L'attribut de classe à l'intérieur une autre balise div. 

Attributs id et class travailler de façon similaire. La seule différence est que vous ne pouvez avoir un élément, l'ID spécifique, mais un nombre quelconque d'éléments peuvent partager une classe. Ainsi, par exemple, je peux utiliser la classe image plusieurs fois, mais je ne peux pas créer une autre division avec le haut de ID. Bien que je ne suis pas allé en CSS, une autre langue couramment utilisée aux côtés de HTML, une fois que je commence style mon code CSS, je peux utiliser ces caractéristiques organisationnelles à l'influence l'esthétique de ma page web. 

Tout dans le top de la division aura Stylings similaires ou tout autre groupe de groupe de HTML I dans le image classe partagera un aspect similaire. C'est beaucoup plus facile que d'essayer de modifier et des images ou des blocs de type texte individuellement. 

Donc nous sommes allés sur les bases de la façon de faire une page web avec HTML. HTML a un tas d'autres fonctionnalités trop que lorsqu'il est associé à d'autres langues comme CSS et JavaScript peuvent vraiment font pages se détachent. La meilleure façon de se familiariser avec HTML est juste pour s'amuser avec elle, voir ce qui fonctionne et ce qui ne fonctionne pas. 

Mon nom est Daven Farnham. C'est CS50. 

Ainsi, par exemple, je peux utiliser l'image de la classe - Non, il ya tellement de nombreux attributs. Mon nom est Daven Farnham. C'est CS 650. Je veux dire CSS. C'est CSS.