Daven FARNHAM: Avui en dia, vaig a parlar una mica sobre HTML, HyperText Markup Language. Vostè veu HTML a tot arreu aquests dies. De fet, si estàs veient això vídeo en un navegador, tens veure HTML a hores d'ara. HTML no és un llenguatge de programació, més aviat, és un llenguatge de marques utilitzat per navegadors web per fer les pàgines a l'Internet. 

Així que vostè pot preguntar, com és exactament està escrivint una pàgina web en HTML diferent d'escriure un programa en una programació llenguatge com C? Bé, C és un llenguatge amb molt estricte regles sintàctiques que necessita ser compilat abans que pugui funcionar. Si alguna vegada t'has oblidat d'incloure una punt i coma al final d'una sentència en el codi C, ja saps el que estic parlant sobre pel que fa a la sintaxi estricta. 

Navegadors web, però, són una mica més perdonar quan es tracta d'HTML. Fins i tot si el seu HTML no és sintàcticament correcta, la pàgina pot estar encara mostrat per un navegador, però pot ser que No miri com es pretenia. Per tant, sempre és millor seguir les regles. La millor manera d'aconseguir una intuïció sobre com funcionen les coses és anar a través d'un exemple. 

Així que el que tenim aquí és un bàsic avantprojecte per a una pàgina web. Vostè probablement ha notat un munt de coses entre parèntesis angulars. Bé, aquests són només etiquetes. Etiquetes bàsicament informen els navegadors web que, bé, alguna cosa està arribant a la seva manera. Recordeu, però, cada vegada que s'obre un etiqueta, cal tancar quan estigui fet d'usar-lo. 

Així, per exemple, obro una secció de codi obert amb cos de suport, claudàtor de tancament. Després afegir una mica de text, en aquest cas, el meu primera pàgina web, llavors quan vaig anar a tanca aquesta secció, utilitzo gairebé una etiqueta idèntica excepte que aquesta vegada amb una barra diagonal abans de cos. En general, aquest és el format que està utilitzarà cada vegada que va a obrir i el tancament de les etiquetes. En conjunt, una etiqueta oberta i una etiqueta de tancament compondre el que s'anomena un element. 

Si ens fixem en la primera línia, se li veure un signe d'exclamació seguit de DOCTYPE html. Això és realment només comptant seu navegador que l'arxiu és una pàgina web escrit en HTML. El tag HTML essencialment diu, aquí ve una mica d'HTML. Llavors tenim una etiqueta del cap amb una etiqueta de títol al seu interior. L'etiqueta del cap es pot pensar en com que comprèn un codi HTML que ve de la major part de la seva web la pàgina de contingut real. 

En general, es posa el títol de la seva pàgina web aquí, encara que hi ha alguns altres etiquetes que poden aparèixer aquí també. Després ve el cos de la seva pàgina web, l' carn real i els ossos del seu lloc web. En el nostre exemple, acabem de posar un senzill frase, la meva primera pàgina web, que, si ens quedem sense el nostre lloc, es veurà una mica d'alguna cosa com això. La nostra pàgina web no és massa estrany, però no et preocupis. Anem a donar-li sabor aviat. 

Així que l'HTML anterior, li donarem una molt plantilla bàsica per a una pàgina web, res especial, només l'esquelet. Però si estic creant una pàgina web, Què passa si vull afegir un foto de, per exemple, a mi mateix? Bé, jo puc fer això. Hi ha un parell de maneres de afegir imatges al seu lloc. Si la imatge està en la mateixa carpeta que seu arxiu HTML, es pot enllaçar amb el imatge a través del camí com aquest. 

Vostè obre amb una etiqueta d'imatge seguit per a l'atribut Alt al font de la imatge. El valor de l'atribut Alt és només un text alternatiu en cas que un usuari no pot veure la imatge. Alternativament, també pot enllaçar a imatges a través d'una adreça URL completa, els agrada. Ara, aquest lloc web en realitat no existeix, però si hi havia una imatge de jo en aquesta direcció, heu l'adreça d'origen per incloure la seva imatge a la pàgina web. De qualsevol manera, vostè acaba amb una gran lloc més bonic, alguna cosa com això. 

Bé, això és molt bo, però jo tipus de voler algun text aquí també. Així que anem a afegir alguna cosa super senzill per sobre de la imatge, igual que la capçalera. Tot el que he fet fins ara és utilitzar la capçalera etiqueta, H1, i un salt de línia d'etiquetes, br. L'etiqueta de capçalera fa que el tipus de lletra una mica mica més gran i més prominent. L'etiqueta de salt de línia, d'altra banda, és una mena de fresc. A diferència de la majoria de les altres etiquetes, que no té una etiqueta d'obertura i tancament de descans, just El que es mostra a dalt. Això es deu a trencament no té contingut i per tant és un element buit. 

Els elements buits com aquest, pot obrir i tanquen simultàniament simplement inclou una barra diagonal al final de la declaració inicial. Així que ara el meu lloc web es veu una mica alguna cosa com això. Millor, però és com que se sent com un carreró sense sortida. No hi ha un altre lloc per anar a un costat des d'aquesta pàgina principal. Bé, anem a arreglar això per incloent un enllaç. 

El que vaig a fer aquí és utilitzar un atribuir denotat per A i fer el imatge un enllaç a, diguem, CS50 TV. D'aquesta manera, cada vegada que algú fa clic en mi, el seu navegador serà dirigit a una altra, probablement més , La pàgina web d'utilitat. He hagut de reduir al mínim la mida de la text una mica perquè la nostra pàgina web és cada vegada més avançada. Però és d'esperar, segueix sent clara. El meu lloc web es veu exactament el mateix només ara, cada vegada que feu clic a la imatge, el meu navegador s'obrirà un altre fitxa de la pàgina web CS50.tv. 

Finalment, direm que vaig a estil aquest lloc web després utilitzant CSS. CSS és el que es coneix com full d'estils en cascada. I proporciona bàsicament una eficient forma d'editar i estil blocs similars de codi. Vull començar a organitzar el meu codi HTML per fan que sigui més fàcil de pentinar després. Aquí, he creat dos tipus diferents de identificadors per ajudar a organitzar el meu codi. He fet servir l'atribut ID dins d'una divisió o etiqueta div, i he fet servir un Atribut de classe a l'interior altra etiqueta div. 

Atributs id i class funcionar de manera similar. L'única diferència és que només pot tenir un element, l'ID específic, però qualsevol nombre d'elements pot compartir una classe. Així, per exemple, puc utilitzar la classe imatge diverses vegades, però no puc crear una altra divisió amb la part superior d'identificació. Encara que no he entrat en CSS, altre idioma d'ús comú juntament amb HTML, un cop que començo un estil el meu codi amb CSS, puc fer servir aquests atributs d'organització a la influència l'estètica de la meva pàgina web. 

Tot dins de la primera divisió tindrà estilismes similars o qualsevol un altre grup de grup d'HTML que al imatge de classe compartirà un aspecte similar. Això és molt més fàcil que tractar d'editar i les imatges o blocs d'estil text individualment. 

Així que ens vam anar a través dels fonaments de com per fer una pàgina web amb HTML. HTML té un munt d'altres característiques també que quan es combina amb altres idiomes com CSS i JavaScript, pot realment fan que les pàgines es destaquen. La millor manera de sentir-se còmode amb HTML és simplement perdre el temps amb ell, veure el que funciona i el que no. 

El meu nom és Daven Farnham. Aquest és CS50. 

Així, per exemple, puc fer servir la imatge de la classe - No, hi ha tants atributs. El meu nom és Daven Farnham. Aquest és CS 650. Vull dir CSS. Aquest és CSS.