Daven Farnham: Hoxe, eu vou falar un pouco sobre HTML, HyperText Markup Language. Ve HTML en todas partes estes días. En realidade, se está a asistir a este vídeo nun navegador, está ver HTML agora. HTML non é unha linguaxe de programación, en vez diso, é unha linguaxe de marcación utilizada polo navegadores para procesar páxinas en internet. 

Entón pode preguntar, como exactamente está escribindo unha páxina web en HTML diferente de escribir un programa en unha programación linguaxe como C? Ben, C é unha lingua con rigorosa regras sintácticas que debe ser compilado antes de que poida ser executado. Se xa esqueceu de incluír un punto e coma ao final dunha instrución en seu código C, vostede sabe o que eu estou falando sobre en relación á sintaxe estrita. 

Os navegadores web, con todo, son un pouco máis perdoando cando se trata de HTML. Aínda que o seu HTML non é sintaticamente correcta, a súa páxina pode ser exhibida por un navegador, pero quizais Non mire como quere. Por iso, sempre é mellor seguir as regras. A mellor forma de ter unha intuición sobre como as cousas traballo é pasar por un exemplo. 

Entón o que temos aquí é un básico modelo para unha páxina web. Debe ter notado unha morea de cousas entre corchetes angulares. Ben, estas son só as etiquetas. Reservas basicamente informar navegadores web que, hey, algo está a benvida na súa dirección. Lembre, sempre que abrir unha tag, ten que pecha-lo, xa que son feito a usar. 

Así, por exemplo, eu abro unha sección de código aberto con corpo do soporte, preto do soporte. Eu, entón, engadir texto, neste caso, a miña primeira páxina web, a continuación, cando fun á pechar esta sección, eu uso case unha tag idéntica só que esta vez cun de barra antes corpo. En xeral, este é o formato que está vai utilizar sempre que está abrindo e pechando as etiquetas. Xuntos, unha etiqueta de apertura e unha etiqueta final compoñer o que se chama un elemento. 

Se ollar para a primeira liña, vai ver un punto de admiración seguido por Html DOCTYPE. Isto é realmente só dicindo o navegador que o ficheiro é unha páxina web escrito en HTML. A etiqueta HTML di esencialmente, Aí vén un pouco de HTML. Entón temos unha marca de cabeza con un título de etiqueta dentro dela. A marca de cabeza que pode pensar como comprendendo código HTML que vén para a maior parte da súa páxina web contido real. 

En xeral, se pon o título do seu páxina web aquí, aínda que existan algúns outras marcas que poden aparecer aquí tamén. A continuación, vén o corpo da súa páxina web, a carne real e os ósos do seu sitio. No noso exemplo, acabamos de poñer unha simple sentenza, a miña primeira páxina web, que, se corremos o noso sitio web, vai mirar algo algo así. A nosa páxina web non é moi raro, pero non se preocupe. Imos adornar-lo en breve. 

Entón o código HTML por riba, nós imos dar-lle un modelo básico para unha páxina web, Nada extravagante, só o esqueleto. Pero se eu estou creando unha páxina web, e se eu queira engadir un imaxe de, digamos, eu mesmo? Ben, eu podo facelo. Hai un par de formas de engadir imaxes para o seu sitio. Se a imaxe está na mesma carpeta que o ficheiro HTML, pode chamar ao imaxe vía camiño así. 

Abre cunha etiqueta de imaxe seguido por no atributo ALT no fonte da imaxe. O valor do atributo alt é só un texto alternativo no caso dun usuario non pode ver a imaxe. Alternativamente, tamén se pode chamar ao imaxes a través dun URL completa, como este. Agora, que o sitio realmente non existe, pero se houbese unha imaxe de me naquel enderezo, eu podería usar a URL de orixe para incluír súa imaxe no meu sitio. De calquera xeito, acaba cun moi sitio máis bonito, algo así. 

Ben, iso é moi legal, pero eu medio de querer algún texto aquí tamén. Entón imos engadir algo super sinxelo enriba do imaxe, como a cabeceira. Todo o que eu fixen ata agora é empregar a cabeceira tag, H1, e un salto de liña etiqueta, br. A etiqueta de cabeceira fai a fonte un pouco pouco maior e máis destacado. A etiqueta de salto de liña, por outra banda, é legal. Diferente da maioría das outras etiquetas, non ten unha etiqueta de apertura e salto de clausura, só a mostrada arriba. Xa que pausa non ten contido e é, polo tanto, un elemento baleiro. 

Os elementos baleiros como este, pode abrir e preto ao mesmo tempo simplemente por incluíndo unha barra na fin da declaración inicial. Entón agora o meu sitio parece algo algo así. Mellor, pero iso medio que se sente como unha rúa sen saída. Non hai outro lugar para ir máis alá desta páxina principal. Ben, imos arranxar isto incluíndo unha ligazón. 

O que vou facer aquí é usar un atributo indicado por un e facer o imaxe unha ligazón a, digamos, CS50 TV. Desta forma, sempre que alguén fai clic en min, seu navegador será dirixida para outro, probablemente máis útil, páxina web. Tiven que diminuír o tamaño do texto un pouco, porque a nosa páxina web é ficando cada vez máis avanzada. Pero espero que, aínda é clara. O meu sitio parece exactamente o mesmo só agora, cada vez que premer sobre a imaxe, meu navegador abrirá outro guía para a páxina web CS50.tv. 

Para rematar, imos dicir que eu estou indo ao estilo esta web máis tarde, usando CSS. CSS é o que se coñece como un follas de estilo en cascada. E, basicamente, ofrece un eficiente forma de editar e estilo bloques similares de código. Eu quero comezar a organizar o meu HTML facer máis doado para o estilo máis tarde. Aquí, montei dous tipos de identificadores para axudar a organizar o meu código. Eu usei o atributo ID dentro dun división, ou etiqueta div, e eu usei un Clase atributo dentro outra etiqueta div. 

Atributos id e class funcionan de forma semellante. A única diferenza é que só se pode ter un elemento, a identificación específica, pero calquera número de elementos pode compartir unha clase. Así, por exemplo, podo usar a clase imaxe varias veces, pero eu non podo crear outra división coa parte superior de identificación. Aínda que eu non teña ido para CSS, outra lingua de uso corrente xunto con HTML, xa que eu comezar styling meu código con CSS, podo usalos atributos de organización á influencia estética da miña páxina web. 

Todo dentro da primeira división terá stylings similares ou calquera outro grupo de grupo de HTML que na imaxe de clase han compartir un ollar semellante. Isto é moito máis fácil do que tentar editar e as imaxes ou bloques de estilo texto individualmente. 

Entón fomos ata o básico de como para facer unha páxina web con HTML. HTML ten unha morea de outros recursos tamén que, cando combinados con outras linguas como CSS e JavaScript, pode realmente facer as páxinas destacan. A mellor forma de sentirse cómodo co HTML é só para xogar con el, ver o que funciona eo que non funciona. 

O meu nome é Daven Farnham. Este é CS50. 

Así, por exemplo, podo usar a imaxe da clase - Non, hai tantos atributos. O meu nome é Daven Farnham. Este é CS 650. Quero dicir CSS. Este é CSS.