>> DOUG LLOYD: Donc nous avons passé about-- si mon calcul est bon,
et je pense que la recherche back-- je pense nous avons passé environ 35 vidéos parler
sur divers aspects de C, peut-être un peu plus, peut-être un peu moins.
Et nous ne couvrons pas tout en C, mais nous
couvert une grande partie de la langue, la grande majorité de celui-ci,
certainement pour les utilisations courantes.
Maintenant, nous allons parler environ une autre langue, HTML.
Et nous allons couvrir en une seule vidéo.
>> Mais ça va être OK.
Cela va effectivement devenir quelque chose que vous allez obtenir habituer.
Maintenant que vous avez le fondamentaux d'une langue,
il est en fait assez facile pour commencer l'apprentissage d'autres.
Donc, nous allons commencer à l'étape un peu en arrière
et gommer la base différences entre ces langues
et une sorte de vous laisser.
Il ya beaucoup de très grande ressources sur l'Internet, qui
nous allons commencer à vous diriger vers parce que l'Internet est
un vaste dépôt d'informations.
Et donc il est pas comme vous aurez être perdre nécessairement
de ne pas avoir l'information recouvert d'une vidéo.
Vous serez toujours en mesure d'obtenir tout ce dont vous avez besoin et l'utilisation
la connaissance que vous avez déjà construit par la compréhension C
pour rendre la courbe d'apprentissage pour ces d'autres langues en fait beaucoup plus plat.
Je promets.
>> Mais parlons une langue qui est vraiment fondamental pour chaque web
page, ce qui est HTML.
HTML est l'Hyper Text Markup Language.
HTML est un langage mais il est pas un langage de programmation.
>> HTML ne possède pas les variables.
Il ne possède pas de logique ou fonctions ou quelque chose comme ça.
Nous ne pouvons pas faire tout programmation en soi dans HTML.
Parfois, vous entendrez les gens se décrivent
en tant que programmeurs HTML, qui est pas entièrement exacte.
Nous ne pouvons pas écrire des programmes HTML.
>> HTML est simplement utilisée pour marquer le texte.
Il a appelé un langage de balisage.
Et ce que cela does-- cette markup-- nous utilisons les balises HTML et ces tags--
ce markup-- sémantiquement définit la structure d'une page
et provoque le texte brut qui existe entre les balises doivent être interprétées
par les navigateurs de différentes manières.
Et peut-être il est préférable d'expliquer cette façon d'une illustration par.
>> Voici une page HTML très simple, pas un programme d'HTML, de nouveau, une page HTML.
Et nous savons qu'il est un Page HTML parce que nous avons
délimitée tout avec des balises HTML.
Voilà donc ce que d'une balise HTML ressemble.
Il est entre crochets.
Et remarquez au sommet, nous avons HTML et tout en bas,
après que nous avons fait ce qui est apparemment beaucoup d'autres HTML,
nous avons équerre slash HTML.
Donc, ce genre de est la frontière entre ce qui est et ce que HTML est pas.
Et bien sûr, de façon classique, juste comme vous avez écrit tous vos programmes C
avec des extensions point C, tous vos fichiers HTML
se terminera avec les extensions HTML points.
Mais il ya plus de choses ici.
Nous ne disposons pas juste ces balises HTML.
Nous avons apparemment, cela chose appelé un tag de la tête.
Eh bien, OK, ce qui est qui?
>> Eh bien peut-être qu'il est préférable de distinguer par l'intermédiaire d'un corps,
corps étant le contenu de la page Web.
Alors peut-être l'étiquette de tête définit des trucs qui ne figure pas dans la bonne fenêtre de navigateur,
mais est en quelque sorte important pour notre page web étant rendu correctement.
Par exemple, à l'intérieur de la tête tag nous avons balises de titre.
>> Donc titre étant Bonjour tout le monde, qui va vraiment être ce que
apparaît dans l'onglet dans Google Chrome ou en safari ou Firefox--
quel que soit le navigateur que vous prefer-- qui est ce qui va apparaître dans le titre.
Et avant cela montrerait onglets dans votre fenêtre du navigateur
et vous ne pouvez avoir une page ouvrir dans une fenêtre de navigateur à la fois.
Donc cela va être le titre de ma page dans l'onglet
ou la barre de la fenêtre du navigateur, bonjour monde.
Et puis le contenu de mon page web sera monde, bonjour.
Donc, nous allons jeter un oeil à ce que certains chose comme cela pourrait ressembler.
Ceci est une page HTML très simple.
Donc, je suis ici dans mon IDE et CS50 Je l'ai zoomé un peu.
Et je vais juste ouvrir bonjour dot HTML
et vous montrer que cela est assez bien le contenu de la page que nous avons vu auparavant.
Mes simples balises HTML, la tête, les balises de titre, le corps et ainsi de suite.
Je suis en retrait pour être propre.
>> Et puis ce que je peux faire dans mon IDE est juste un aperçu de la page.
Et là nous allons.
Le contenu de ma page est monde, bonjour, et je ne vois rien
depuis les balises head là.
Il est juste le contenu du corps.
Monde, bonjour.
Et de nouveau le corps juste dit, monde, bonjour.
L'autre partie est manquante.
>> Voilà donc vraiment tout ce qu'il est.
Ceci est une page HTML de base très simple.
Maintenant, je suis en retrait à mon HTML être vraiment agréable et organisée,
mais je ne dois pas fait.
Je pourrais faire joli laid.
Et ce serait encore travailler.
Ce serait la même page Web exacte.
Je viens débarrassé de tout l'espace blanc.
>> Comme il se trouve, l'espace blanc est données.
Et donc quand nous envoyons les données à partir de l'émetteur au récepteur, à partir du serveur
au client, les données coûte de l'argent.
Et ainsi se débarrasser d'espaces est effectivement une bonne idée
si vous êtes quelqu'un qui sert beaucoup de contenu web.
Il est une mauvaise idée si vous êtes quelqu'un qui est d'apprendre ce genre de choses
et vous voulez avoir joliment organisé.
Cela est beaucoup plus facile à analyser que cela.
Mais il est fonctionnellement identique.
>> L'indentation et des trucs comme ça n'a pas réellement d'importance en HTML.
Tout ce qui importe est balises d'ouverture et fermeture des balises dans l'ordre correct.
Remarquez ce qui est arrivé ici, cependant.
Le balisage nous donne un moyen de communiquer des informations supplémentaires
à propos de ce que nous avons écrit.
La partie Bonjour tout le monde était interprétée comme le titre.
Et le monde, bonjour partie était interprété comme le contenu
ou ce qui devrait être visible sur ma page web.
>> Il ya plus de 100 de ces différents balises et beaucoup de grandes ressources
en ligne pour les trouver.
Nous allons parler d'un peu d'entre eux dans cette vidéo, certains
des trucs vraiment fondamentale.
Mais on ne va pas parler à propos de tout cela parce qu'il
serait exhaustive de le faire.
>> Une autre chose que vous pouvez faire, cependant, est ouvert jusqu'à des outils de développement.
Et si vous vous souvenez de notre vidéo sur HTTP,
Je lui ai expliqué comment ouvrir en place des outils de développement.
Dans Chrome, il est généralement la touche F12 d'ouvrir la barre d'outils de développeur.
Alors, au lieu de choisir le réseau onglet, vous pouvez choisir l'onglet Eléments.
Et si vous chargez un web page, vous aurez en fait
voir le HTML qui crée cette page web.
Et si vous pouvez en apprendre beaucoup sur HTML en regardant vos sites préférés
et de voir comment ils construisent la divers morceaux de ceux qui vous plaisent.
Alors peut-être il ya ce cool motif ou quelque chose comme ça.
Comment font-ils avec HTML?
Eh bien, vous pouvez juste ouvrir votre développeur outils et survolez cet élément
et de voir exactement ce que HTML rend.
Voilà donc une très bonne façon d'apprendre le HTML,
et je recommande fortement que vous le faites à la fois d'apprendre le HTML
et aussi pour en apprendre un peu peu de certaines des options
disponibles dans outils de développement, qui
va certainement venir dans maniable comme vous commencez à faire plus intensive web
la programmation.
>> Donc, nous allons jeter un oeil à un couple de balises HTML courantes.
Et nous allons sauter et jeter un oeil à ce que ces balises seront également rendre
comme en regardant certains fichiers dans mon IDE.
Voici donc trois balises très basiques pour peaufiner l'aspect visuel du texte.
Il ya des balises B, I, balises et les balises de U.
Et, respectivement, ce qu'ils font est rendre le texte entre elles en gras,
italiques, et soulignement.
Voyons donc ce que cela aura l'air comme sur une page Web réelle dans mon IDE.
>> Donc, ici, dans mon IDE je ai une fichier appelé BIU dot HTML.
BIU dot HTML juste être gras, italique, soulignement.
Je vais l'ouvrir.
>> Et nous verrons qu'ici je avoir ce texte est balises B gras.
Ce texte est balises I italique.
Et ce texte est balises U souligné.
Qu'est-ce que cela va ressembler?
Eh bien encore une fois, tout ce que je dois à faire est d'aller sur ici
à mon navigateur, mon navigateur de fichier, cliquez sur Aperçu, et ceci est ce qui arrive.
>> Le texte entre le B balises est en effet désormais gras.
Le texte entre le je balises est en effet désormais en italique.
Et le texte en U entre le balises est en effet désormais soulignés.
Voilà donc assez bonne.
Nous savons maintenant comment faire du texte regarder un peu plus de fantaisie
ou de dessiner l'accent sur certaines choses.
Un autre couple de balises communes voici Les balises de paragraphe, les balises P, et en-tête,
que je suis ici en tant que rendis HX.
>> Ces balises P, ces balises de paragraphe, briser votre texte en plusieurs paragraphes.
Il ne suffit pas de simplement appuyez sur Entrée et laisser des espaces,
parce qu'un ordinateur ne va faire ce que vous lui demandez de faire
et elle ignore blanc espace pour la plupart.
Donc, nous ne pouvons pas appuyer simplement sur Enter et attendre notre ordinateur
à interpréter ce que nous voulons pour commencer un nouveau paragraphe.
Nous devons dire très explicitement cette est un paragraph-- cela est another--
en enfermant chacun dans un ensemble de P tags.
>> Et nous avons aussi ces options pour les balises H, ces balises d'en-tête.
Nous avons six niveaux différents des en-têtes, un, deux, trois,
quatre, cinq, six, qui sont progressivement plus en plus grand
des en-têtes.
Et ils deviennent plus petits et plus en plus petits et plus petits.
Donc, nous avons un en-tête de niveau supérieur, un deuxième en-tête de niveau, et ainsi de suite, et ainsi de suite.
>> Jetons un oeil à quelques-uns peut-être Balises P et certaines balises d'en-tête
en action sur une page web.
Donc, ici, dans mon IDE je dois un fichier appelé PH dot HTML, pH étant paragraphes
et les balises d'en-tête.
Ouvrez cela.
Il ya beaucoup qui se passe ici parce que je l'ai mis quelques lorem
ipsum, un texte aléatoire juste ici.
Donc, je vais effectuer un zoom arrière un peu parce qu'il ya tellement de choses.
Mais remarquez que je dois à la très haut ici, je dois un H1, un niveau un,
tête tag.
Ensuite, je dois un paragraphe, qui est juste un tas de hasard text-- lorem ipsum--
tout défaut de remplissage standard dans le texte.
Je dois donc deux paragraphes à l'intérieur de cette niveau un en-tête, puis en bas, je
avoir un titre de niveau deux ici à la ligne 24, une deuxième tête de niveau, et deux autres
paragraphes.
Eh bien ce que cela ressemble si je vois dans mon aperçu?
Voyons.
>> Donc remarquer que le premier en-tête de niveau ici
est effectivement un peu plus que la deuxième tête de niveau.
Nous avons donc utilisé balises H1.
Et notez que les étiquettes de P nous permettent pour briser les choses en paragraphes.
Si nous avions obtenu débarrasser de ces balises P et effectivement il suffit de mettre Ouvre ou retours
entre ce que nous espérions être les différents paragraphes,
ils seraient tous simplement claquer ensemble et il ne serait pas avoir cette belle paragraphe
la séparation avec l'espace ci-dessus et ci-dessous.
Et est donc ce que le paragraphe et les balises d'en-tête
sont couramment utilisés pour faire dessiner attention aux portions de notre page Web
de cette façon.
>> Next up sont des balises que nous utilisons de construire des listes sur notre page web.
Donc, nous avons non ordonnée lists-- ULs-- qui sont juste
des listes à puces, commandés liste qui sont numbered--
OLs-- et à l'intérieur de l'une des l'un de ceux que nous devons avoir
ensembles de façon à indiquer les éléments de liste, LI.
Et donc nous avons ouvert étiquette UL et nous mettons éléments à l'intérieur de celui-ci.
Et puis, quand nous aurons fini avec cela, nous pouvons fermer la balise UL.
>> Et de même que nous pouvons avoir une liste ordonnée ou numérotée
et de mettre des éléments de liste à l'intérieur de cela.
Donc, nous allons jeter un coup d'oeil à un couple de listes
et ce qu'ils rendre aussi sur CS50 IDE.
Je dois donc ici dans mon IDE un fichier appelé listes parsèment HTML.
Nous allons jeter un coup d'oeil.
>> Et remarquez ici, je dois un non ordonnée liste avec cinq choses en elle.
Et puis je dois une liste ordonnée et Je l'ai changé l'étiquette un peu,
droit?
Je l'ai dit début égale six.
Il se trouve avec une liste que je commandé peut définir le point de départ où
Je want-- par défaut, il sera One-- en ajoutant juste ce soi-disant attribut
à ma balise OL.
Et si cette liste sera commencer à compter à six.
Ainsi, les éléments de cette liste numérotée devrait être de six, sept, huit, neuf, dix,
car il ya cinq éléments dans la liste, par opposition à une,
deux, trois, quatre, cinq, dont ce serait le cas si je l'avais dit OL
sans préciser l'attribut de démarrage.
>> Nous allons donc Aperçu de cet afin que vous puissiez avoir une idée de ce qui se passe ici.
Et là nous allons.
Il ya ma liste.
Les cinq premiers éléments sont les listes à puces ou à puces.
Et les cinq éléments suivants sont une liste ordonnée séparée
à partir de six.
Voilà donc comment nous pouvons construire des listes en utilisant le HTML.
Une autre chose que vous pourriez voulez faire avec HTML
est de construire un tableau de les informations de lignes et de colonnes
de présenter des informations dans un notamment organisé chemin.
Pour ce faire avec le langage HTML, nous pouvons avoir un définition de la table en commençant parenthèse ouverte
table.
Et puis à l'intérieur de cette table, nous pourraient avoir un ensemble de lignes, les balises TR
pour indiquer chaque rangée.
Et puis balises TD aller à l'intérieur des balises TR pour spécifier une colonne dans une rangée.
>> Pourquoi est-il appelé TD et non TC?
Eh bien, TD signifie données de la table.
Habituellement, vous vous mettez vos informations là-bas.
Voilà pourquoi il est TD et non TC.
Il est un peu déroutant.
>> Donc, vous avez balises de table et à l'intérieur de vos balises table
vous avez un certain nombre de lignes, TR.
Et à l'intérieur de chaque ligne que vous avez TDS pour le nombre de colonnes
que vous voulez avoir dans cette ligne particulière.
Jetons un oeil à un très tableau simple plus dans CS50 IDE.
>> Je dois donc ici un fichier appelé tableau dot HTML.
Ayons un regard sur à quoi ça ressemble.
Il ya beaucoup de choses ici, mais si vous remarquez que je dois une table ouverte.
Je commence la définition avec table.
Et puis, dans ma première rangée je apparemment avoir quatre colonnes, une, deux, trois,
quatre.
Et puis je suis fait avec cette ligne.
>> Puis-je commencer une autre rangée et faire deux, quatre, six, huit.
Terminez cette ligne.
Effectuer une autre rangée, trois, six, neuf, 12.
Et puis une dernière rangée, quatre, huit, 12, et même si elle est
un peu de couper la parole, 16.
>> Je finis cette ligne.
Je finis la table.
Et puis je suis fait avec mon HTML.
Qu'est-ce que cela ressemble?
Eh bien, il est vraiment pas grand chose à voir.
Je l'ai clairement organisé mes informations de façon un peu plus organisée.
Mais il est pas super joli ici.
Et nous allons faire face à que lorsque nous parlons de CSS.
Nous nous pencherons sur cette idée de ce que nous faisons pour faire un table--
peut-être formater un peu mieux?
Mais je dois encore quatre rangées, dont chacun comporte quatre colonnes,
et vraiment ce que cela représente est un très simple multiplication quatre par quatre
table.
>> Juste un peu plus de balises que nous allons parler.
Parlons de la concept d'un formulaire HTML.
Donc, vous avez peut-être vu dans le contexte de la connexion à une page Web.
Habituellement, vous tapez votre nom d'utilisateur.
Vous tapez votre mot de passe, et vous êtes bon pour aller.
Ce serait le début d'un formulaire.
>> Sauter par-dessus un deuxième div.
Nous avons également des entrées qui sorte de tenir à l'intérieur de formes.
Ce sont ces éléments que vous êtes réellement en tapant dans,
ou les boutons radio vous êtes cochant ou le chèque
boîtes que vous cochant.
Donc, ceux-ci vont à l'intérieur de formes.
Et ils comprennent essentiellement chaque ligne de la forme
si votre formulaire est bien formatée.
Puis, il ya cette notion de une div, qui n'a pas vraiment
tenir dans une catégorie particulière des étiquettes comme celles que je l'ai
été fait précédemment.
Il juste une sorte de délimite la début de certains division-- arbitraire
div-- de la page.
Il n'y a pas rupture visuelle.
Il ya pas de ligne.
Ça ne se déclenche pas comme un morceau séparé automatiquement.
Vous auriez à le dénommer cette façon de faire cela.
>> Il juste une sorte de dit que je veux un morceau de l'espace sur ma page web,
et je vais juste appeler il cette division de ma page.
Nous pouvons mettre des choses à l'intérieur des divs, et en fait,
quand nous avons la tête sur IDE dans un second, nous allons
vois que je mettre mon former à l'intérieur d'un div.
>> Je dois donc ici dans mon IDE un fichier appelé div forme dot HTML.
Ouvrons le haut.
Notez que comme je le disais, div est une sorte de arbitraire.
Droit?
Il n'a pas vraiment rien dire.
Je dois donc arbitraire première division de ma page.
Et puis à la place d'un autre div plus tard, à partir de la ligne de huit,
Je dois cette forme.
Et à l'intérieur de la forme je dois une nombre d'entrées, les champs du formulaire.
Je dois donc un champ dont le nom est A-- qui ne veut rien dire
maintenant-- droit qui, apparemment, prend texte, une autre qui
prend un mot de passe, un autre qui est une radio bouton, un autre qui est une case à cocher,
et un autre qui est un bouton Envoyer.
Eh bien, qu'est ce que cela tout fait ressembler?
Eh bien, nous allons jeter un coup d'oeil.
Nous allons ouvrir dans notre fenêtre de prévisualisation.
Remarquez que ce arbitraire il ya d'abord division--
pas de séparation visuelle ici.
Il n'a pas vraiment faire quelque chose, non?
>> Et puis je dois ma forme.
Et je ne fais pas de formatage spécial.
Donc, la forme est juste un grande ligne d'informations.
Si je l'avais formaté ma forme différente, Je pourrais avoir ligne par ligne par ligne.
Mais je ne fais pas de style.
Encore une fois, nous ne parlons pas ici CSS.
Nous parlons simplement de HTML.
>> Eh bien dans mon sous forme de texte, je peux bien-- rappeler que les formes de type text
afin que je puisse mettre mon nom.
Et dans mon mot de passe Je peut taper mon mot de passe.
Et parce que ce domaine est de type mot de passe,
vous ne savez pas ce que mon mot de passe.
Il est tous les points.
>> Je peux aussi choisir de cocher une bouton radio ou cocher une case à cocher.
Ou je pourrais présenter ma forme.
Et je ne fais rien, donc quand je soumets ma forme,
la page est actualisée tout simplement.
Mais je pourrais peut-être configurer mon Bouton Soumettre pour faire autre chose.
Et nous verrons ce que nous pouvons faire avec que, dans un avenir vidéo sur PHP.
Mais cela construit une très forme simple que nous
peut utiliser pour avoir les utilisateurs interagissent et soumettre des informations sur notre site web.
>> Un dernier commentaire avant que nous passer à quelques autres balises
sont à jeter un oeil à ce entrée tag une fois de plus.
Notez que je l'ai souligné les extrémités de l'étiquette en rouge.
Chaque autre balise que nous avons vu jusqu'à présent a eu un début et une fin, une ouverture
tag et une balise de fermeture.
>> Mais une balise d'entrée ne fonctionne pas.
Il n'y a pas de texte qui va entre les balises d'entrée.
Toutes les informations nous avons l'intention de transmettre
est liée dans le cadre du attributs de cette entrée.
Notez que nous avons le nom d'entrée est égal à x.
Type équivaut y.
Voilà tous vraiment le informations dont nous avons besoin.
>> Ceci est appelé une étiquette auto de clôture.
Il ne nécessite pas une ouverture et une Fermer parce que toutes les informations
est contenu à l'intérieur du tag et ses attributs.
Donc, parfois, vous verrez cela, aussi.
Donc juste être conscient que si vous avez un tag qui est entièrement autonome,
il ouvre et se ferme avec l'équerre ouverte sur la gauche
et l'angle de barre support sur la droite.
Nous allons voir un autre de ces en ce moment avec des étiquettes d'image ainsi.
>> Avant de parler des images, nous besoin de parler de liens hypertextes.
Si nous voulons que notre page Web pour être interactive et nous déplacer,
il serait agréable de pouvoir à cliquer sur un de ces
ce qui a généralement été un lien bleu.
Ceci est en fait la façon dont nous construisons un lien hypertexte dans notre page web.
Et curieusement il ya une autre balise HTML
appelé lien, ce qui est un lien hypertexte.
A représente ici l'ancre, et Voilà comment nous indiquons un lien hypertexte.
>> A href égale moyens d'aller à x page web X. Et tout
entre l'ouvrir un tag et la clôture Un tag
est ce que ça va être souligné que texte bleu qui ressemble à un lien
que nous sommes familiers.
Ci-dessous, que nous avons une balise d'image, qui est une auto balise de fermeture pour l'affichage
une image située au X. Et vous pourriez être en mesure de changer
en précisant que l'image largeur et la hauteur
et d'autres attributs que Dot Dot Dot il.
>> Au bas ici nous avons un très intéressant
recherche tag qui n'a pas avoir une balise de fermeture.
Il est point d'exclamation DOCTYPE html.
Donc, HTML a été autour depuis le début des années 1990 pour la création de pages Web,
et il est parti subi plusieurs révisions depuis lors.
Plus récemment, en 2014 il a subi une révision
appelé HTML5 qui est maintenant le courant sorte de standard de facto de HTML.
>> Pour indiquer que notre site web les pages sont écrites en utilisant HTML5,
voilà comment nous partons.
Il peut être omis mais ce que, fondamentalement,
signifie que vous ne pouvez pas utiliser des balises que sont les balises HTML5, ces nouvelles balises.
Donc, nous commençons toujours éteint si nous sommes en utilisant HTML5.
Et toutes les balises dont nous avons parlé précédemment ne sont pas les balises HTML5.
Mais cela indiquerait que Balises HTML5 seront présents.
Et nous avons donc exclamation DOCTYPE HTML, qui
est au tout début de notre Fichier HTML, puis après ce point
nous avons fait notre HTML ouverte étiqueter et à partir de là.
>> Le dernier est une balise de commentaire, ce qui est légèrement différente, aussi.
Il commence avec un angle support exclamation tableau de bord
tableau de bord, mais pas de support de fermeture.
Dans entre ces deux éléments là-bas est l'endroit où vous écrivez vos commentaires.
Et nous allons jeter un oeil à images et les commentaires et les liens CS50 IDE.
>> Je dois donc ici un fichier appelé l'image lien dot HTML que je vais ouvrir.
Et remarquez que je ai un couple de commentaires ici dans mes commentaires HTML.
Ainsi, tout comme en C et autres langages de programmation,
HTML tout en étant un langage de balisage a la capacité d'avoir des commentaires.
Et donc je suis apparemment aller placer une photo de Rick Astley
quelque part entre cette div tag, cette division arbitraire.
Apparemment, ce fichier est situé à Rick dot JPEG, qui
si nous nous dirigeons en arrière sur mon arbre de fichier pour une seconde,
est un fichier qui existe dans le répertoire courant.
Voilà donc OK.
Je peux le référencer.
>> Ensuite, je peux avoir des liens internes.
Donc remarquer sur la ligne 11 ici mon href est bonjour dot HTML.
Alors que se réfère juste bonjour dot HTML qui existe dans le répertoire courant.
Et je peux aussi avoir externe liens par spécifiant simplement HTTPS
pour indiquer que je ne parle pas sur un fichier dans mon répertoire courant.
Je veux parler d'un fichier qui existe quelque part sur Internet, que je dois
à demander à l'aide du protocole HTTP.
>> Donc, nous allons jeter un oeil à ce que cette page pourrait ressembler
et soyez prêt pour une photo de Rick Astley à apparaître sur votre écran.
Je vais donc Aperçu de cet.
Il ya de Rick Astley à la très haut dans ce arbitraire
Division je le mets au sommet.
Et puis en bas, je avoir mes liens, non?
>> Je dois un lien vers bonjour dot HTML.
Et si je clique, je reçois déplacé vers cette page
que nous sommes très familiers avec de le début de notre programme.
Si je saute cette page ouverte à nouveau, si je Lien de l'image pop ouvrir une fois de plus,
Je peux aussi aller à l'extérieur sur le site de CS50.
Et là, nous see-- je vais rétrécir un peu ici--
nous allons voir le site web de sorte de CS50 de intégré dans le milieu de notre page.
Donc, je suis en mesure de faire un interne lien ainsi que d'un lien externe.
>> La dernière règle avec HTML nous allons parler ici
est que votre HTML doit être bien formé.
En C, nous avons beaucoup parlé les différents syntaxe des choses.
Dans la syntaxe HTML vraiment tourne autour de tags.
Chaque tag vous ouvrez doit être fermé.
Et en fait, chaque tag que vous ouvrez devrait être fermé dans l'ordre inverse.
>> Donc, si vous ouvrez un tag bold, italic une tag, puis une balise soulignement
à faire tous les trois à un ensemble particulier de texte,
vous devez les fermer dans l'ordre inverse.
Donc, si vous avez ouvert gras, italique, souligné, vous
vouloir fermer souligné, italique, gras.
Ce type d'encapsulation est ce que maintient HTML agréable et organisée.
>> Contrairement à C, cependant, les erreurs de syntaxe ne sera pas effectivement paralyser votre HTML éventuellement.
Votre code HTML peut-être pas bien formé, mais serait encore travailler.
Et ainsi de ces erreurs peut trier de la glissière par.
Il est à vous pour être vraiment vigilant.
Parfois, ils vont échouer, mais Parfois, vous pouvez sortir avec elle.
>> Il peut être un très tâche difficile, cependant,
de garder trace du moment où vous avez ouvert une étiquette, quand vous l'avez fermé,
d'autant plus que votre code HTML fichiers deviennent de plus en plus grande.
Vous voulez de l'aide.
Et il ya en ligne outils de validateur que vous
peut utiliser pour avoir un oeil à votre site Web page et voir si elle est bien formée HTML.
Et vous devriez certainement jetez un oeil à ceux
et de commencer à les utiliser comme vous commencer à faire un peu de travail avec le HTML,
écriture de code HTML, juste pour que vous obtenez quelques bonnes habitudes sur l'organisation
votre code HTML dans le bon sens et bon style et faire en sorte
que vous ne faites pas tout ce qui pourrait créer une erreur de syntaxe
pourrait vous causer un peu de un problème sur la route.
>> Je suis Doug Lloyd.
Ceci est CS50.