Doug LLOYD: Entón nós gastamos about-- se miña matemática é certo, e eu creo que eu creo que ollando traseira-- pasamos uns 35 vídeos falando sobre varios aspectos do C, quizais un pouco máis, quizais un pouco menos. E nós non cobren todo en C, pero nós cubriron unha gran parte do lingua, a gran maioría da mesma, seguramente para usos comúns. Agora imos falar sobre outra lingua, HTML. E nós estamos indo para cubrir en que só un de vídeo. 

Pero iso será Aceptar. Isto vai realmente facer-se algo que vai se acostumar. Agora que ten a fundamentos dunha lingua, é realmente moi fácil para comezar a aprender outros. Entón, nós estamos indo para comezar ao paso un pouco para atrás e encubrir o básico diferenzas entre linguas e tipo de deixalo a el. Hai unha morea de realmente grande recursos en internet, o que imos comezar a dirixir vostede no sentido porque a Internet é un amplo repositorio de información. E así non é como vai estar perdendo necesariamente por non ter a información cuberto nun vídeo. Aínda será capaz de obter todo o que precisa e uso o coñecemento que xa construíuse por entender C para facer a curva de aprendizaxe para estes outras linguas, en realidade, unha morea máis planas. Eu prometer. 

Pero imos falar sobre unha linguaxe que é realmente fundamental para todo web A páxina, que é HTML. HTML é o Hyper Text Markup Language. HTML é unha linguaxe, pero é non unha linguaxe de programación. 

HTML non ten variables. Non ten lóxica ou funcións ou algo así. Non podemos facer calquera programación, por si só HTML. Ás veces vai escoitar a xente describen a como programadores HTML, que non é totalmente preciso. Non podemos escribir programas HTML. 

HTML é usado só para marcar texto. É chamado de linguaxe de reserva. E o que este does-- este markup-- nós usar etiquetas HTML e estes tags-- este markup-- semanticamente define a estrutura dunha páxina e fai que o texto que existe entre as etiquetas para seren interpretados por navegadores de xeitos diferentes. E quizais sexa mellor para explicar Deste xeito, por unha ilustración. 

Aquí está unha páxina HTML moi sinxelo, non un programa de HTML, de novo, unha páxina HTML. E sabemos que é unha A páxina HTML, porque temos delimitada todo con etiquetas HTML. Entón é iso que unha etiqueta HTML parece. É entre corchetes. E repare na parte superior temos HTML e no fondo, despois de que fixemos o que é aparentemente unha morea de outras HTML, temos ángulo do soporte de barra HTML. Entón que tipo de é o límite entre o que é HTML eo que non é. E, por suposto, convencionalmente, só como escribiu os seus programas C con extensións punto C, todos os seus arquivos HTML vai acabar con extensións HTML punto. Pero hai máis suceder aquí. Non só temos estas etiquetas HTML. Nós aparentemente teñen este cousa chamada unha marca de cabeza. Ben, ben, o que é iso? 

Ben, quizais é mellor distinguir a través dun corpo, corpo sendo o contido da páxina web. Entón, talvez a marca de cabeza define stuff que non está na ventá do navegador propio, pero é dalgunha forma importante para o noso A páxina web que está a ser procesado correctamente. Por exemplo, no interior da tag cabeza temos etiquetas de título. 

Entón título sendo Ola mundo, que realmente vai ser o que mostra-se na pestana en Chrome ou no safari ou Firefox-- o que queira que prefer-- navegador que é o que vai aparecer no título. E antes de que ía amosar tabs na súa xanela do navegador e só se pode ter unha páxina abrir nunha xanela do navegador nun momento. Entón iso vai ser o Título da miña páxina no separador ou a barra de fiestra do navegador, Ola mundo. E, a continuación, o contido do meu A páxina web será mundial, Ola. Entón, imos dar un ollo ao que algúns cousa como isto pode parecer. Esta é unha páxina HTML moi sinxelo. Entón, eu estou aquí no meu IDE e CS50 Eu ampliada un pouco. E eu estou indo só para abrir Ola dot HTML e amosar-lle que iso é moi fermoso o contido da páxina que vimos antes. Os meus etiquetas HTML, cabeza simple, etiquetas de título, corpo e así por diante. Teño recuado para ser limpo. 

E entón o que podo facer na miña IDE é só ver a páxina. E alí imos nós. O contido da páxina é o meu mundo, Ola, e eu non vexo nada in a partir das etiquetas cabeza alí. É só o contido do corpo. Mundo, Ola. E unha vez máis o corpo só dixo, mundo, Ola. A outra parte está falta. 

Entón, iso é realmente todo o que é. Esta é unha páxina HTML básico moi sinxelo. Agora eu teño a miña recuado para HTML ser moi bo e organizado, pero eu realmente non precisa. Podería facelo parecer moi feo. E iso aínda ía funcionar. Esta sería a mesma páxina web exacto. Acaba de se librar todo o espazo en branco. 

Como se constata, o espazo baleiro é de datos. E así, cando estamos enviando datos de emisor ao receptor, a partir do servidor ao cliente, os datos custa diñeiro. E así se librar de espazos en branco é realmente unha boa idea se é alguén que serve unha gran cantidade de contido web. É unha mala idea se está alguén que está a aprender este material e quere ter Lo moi ben organizado. Isto é moito máis fácil de analizar que iso. Pero é funcionalmente idéntico. 

O descenso e cousas así en realidade, non importa en HTML. Todo o que importa é marcas de apertura e pechando as etiquetas na orde correcta. Teña en conta o que pasou aquí, con todo. A cita nos dá unha forma de comunicar información extra sobre o que escribiu. A parte Ola, mundo foi interpretado como o título. E o mundo, Ola parte foi interpretado como o contido ou o que debería ser visible na miña páxina web. 

Hai máis de 100 destes diferentes etiquetas e lotes de grandes recursos en liña para atopalos. Nós imos falar sobre un algúns deles neste video, algúns do material realmente fundamental. Pero non imos falar sobre todo porque sería exhaustiva a facelo. 

Outra cousa que podes facer, con todo, é abrir ferramentas para desenvolvedores. E se se lembra de noso vídeo en HTTP, Expliquei como abrir ferramentas para desenvolvedores. En Chrome é xeralmente a tecla F12 para abrir a barra de ferramentas do creador. A continuación, no canto de escoller a rede guía, pode escoller a pestana Elementos. E se carga unha web páxina, vai realmente ver o HTML que crea a páxina web. E así pode aprender moito sobre HTML vendo os seus sitios favoritos e vendo como constrúen a varias pezas dos que lle gusta. Entón quizais haxa este legal estándar ou algo parecido. Como eles fan isto con HTML? Ben, pode simplemente abrir o seu creador ferramentas e pair sobre ese elemento para ver exactamente o que fai que sexa HTML. Entón, iso é realmente un boa forma de aprender HTML, e eu recomendo encarecidamente que facelo tanto para aprender HTML e tamén para aprender un pouco pouco sobre algunhas das opcións dispoñibles para ti en ferramentas de desenvolvemento, que certamente virá a cadra como comezar a facer web máis intensiva programación. 

Entón, imos dar un ollo a un par de etiquetas HTML comúns. E nós imos ir e dar un ollo a o que estes comandos tamén pode procesar por ollar para algúns ficheiros na miña IDE. Entón, aquí están tres marcas moi básicos para mellorar o aspecto visual do texto. Hai marcas B, I e U tags, etiquetas. E, respectivamente, o que fan é facer o texto entre eles en negra, cursiva, subliñado e. Entón imos ver o que iso sería como nunha páxina web real no meu IDE. 

Entón, aquí no meu IDE Eu teño un ficheiro chamado BIU dot HTML. BIU dot HTML só a ser negrita, cursiva, subliñado. Vou abrilo. 

E nós imos ver que aquí temos este texto está Tag B negra. Todo o texto está etiquetas de E cursiva. E este texto está U marcas subliñado. Que isto vai parecer? Ben unha vez máis, todo o que teño facer é pasar por riba aquí para o meu navegador, o meu navegador de ficheiros, prema en Preview, e iso é o que vén á tona. 

O texto entre a B Tag é de feito agora negra. O texto entre o I Tag é de feito agora cursiva. E o texto entre o U tags é realmente agora subliñado. Entón, iso é moi bo. Agora sabemos como facer texto mirar un pouco máis extravagante ou deseñar énfase a certas cousas. Outro par de etiquetas comúns aquí son marcas de parágrafo, marcas P, e cabeceira, que teño rendido aquí como HX. 

Estes comandos P, estas etiquetas de párrafo romper o seu texto en parágrafos. Non é suficiente só prema Intro e deixar espazos, porque un ordenador vai só para facer o que diga a el para facer e ignora branco espazo para a maior parte. Polo tanto, non podemos simplemente premer Intro e esperamos que o noso ordenador interpretar que queremos para iniciar un novo parágrafo. Temos que dicir moito explicitamente esta é un paragraph-- este é another-- poñendo cada un nun conxunto de etiquetas P. 

E tamén temos estas opcións para H tags, estas etiquetas de cabeceira. Temos seis niveis diferentes de cabeceiras, un, dous, tres, catro, cinco e seis, que son progresivamente maior e máis grande cabeceiras. E quedan pequenas e cada vez menores e menores. Polo tanto, temos unha cabeceira de nivel superior, unha segunda cabeceira de nivel, etc., e así por diante. 

Imos dar un ollo a algúns quizais Marcas P e algunhas etiquetas de cabeceira na acción nunha páxina web. Entón, aquí no meu IDE Eu teño un arquivo chamado HTML punto PH, PH sendo parágrafos e etiquetas de cabeceira. Abre iso. Hai moita cousa a suceder aquí porque eu coloque algúns Lorem ipsum, só texto aleatorio aquí. Entón, eu vou reducir un pouco porque hai tanta cousa suceder. Pero teña en conta que eu teño no propio top aquí eu teño un H1, un nivel un, tag de cabeceira. Entón eu teño un parágrafo, que é só unha banda de aleatorio Lorem texto-- ipsum-- só o nivel de enchido estándar en texto. Entón, eu teño dous parágrafos dentro dese unha cabeceira de nivel e, a continuación, para abaixo abaixo I ten unha cabeceira de nivel dous aquí na liña 24, un segundo nivel de cabeceira, e outros dous parágrafos. Ben, o que fai este ollar como se eu velo na miña vista previa? Vexamos. 

Entón, teña en conta que o primeira cabeceira nivel aquí é en realidade un pouco maior do que o segundo nivel de cabeceira. Entón usamos tags H1. E teña en conta que as etiquetas P permítennos para romper as cousas en parágrafos. Se tivésemos que librar destas marcas P e, de feito, só tes que poñer Entra e Devolucións entre o que esperabamos que diferir números, todos irían só bater xuntos e non tería ese parágrafo agradable separación co espazo arriba e abaixo. E iso é o que n etiquetas e etiquetas de cabeceira son comunmente usados ​​para facer deseñar atención partes da nosa páxina web desa forma. 

A continuación están algunhas etiquetas que usan para construír listas da nosa páxina web. Polo tanto, temos desordenada lists-- ULs-- que son só listas con viñetas, ordenados lista que están numbered-- OLs-- e dentro dunha das un dos que necesitamos ter conxuntos de como indicar elementos de lista, LI. E así temos aberto tag UL e poñemos elementos dentro dela. E entón, cando estamos a facer que podemos pechar a marca UL. 

E do mesmo xeito que podemos estar unha lista ordenada ou numerada e poñer os elementos da lista dentro diso. Entón, imos dar un ollo nun par de listas eo que eles ían renda como en CS50 IDE. Entón, eu teño aquí na miña IDE un ficheiro chamado listas dot HTML. Imos dar un ollo. 

E noten aquí eu teño unha desordenada lista con cinco cousas nel. E entón eu teño unha lista ordenada, e Eu mudei a marca un pouco, non? Eu xa dixen inicio é igual a seis. Acontece cunha lista Eu pedín pode establecer o punto de partida onde queira Eu want-- por defecto, será um-- só engadindo esta chamada atributo na miña tag OL. E así esta lista será comezar a contar ás seis. Así, os elementos desta lista numerada debe ser de seis, sete, oito, nove, dez, porque hai cinco elementos na lista, en oposición a un, dous, tres, catro, cinco, que sería o caso se tivese dito OL sen especificar o atributo de inicio. 

Entón imos ver iso para que pode obter un sentido para o que está a suceder aquí. E alí imos nós. Non é a miña lista. Os primeiros elementos son cinco listas desordenadas ou con viñetas. E os próximos cinco elementos son unha lista ordenada separado desde seis. Entón é así que podemos construír listas usando HTML. Outra cousa que pode queren facer con HTML é construír unha táboa de información de liñas e columnas para presentar a información nunha particularmente organizada camiño. Para iso con HTML, podemos ter unha definición de táboa comezando soporte aberto táboa. E, a continuación, dentro dese marco que pode ter un conxunto de liñas, etiquetas TR para indicar cada liña. E entón as etiquetas TD ir a dentro de etiquetas de TR para especificar unha columna dentro dunha liña. 

Por que se chama TD e non TC? Ben, TD representa datos da táboa. Normalmente, está poñendo súa información alí. Entón é por iso que é TD e non TC. É un pouco confuso. 

Entón tes marcas de táboa e dentro das súas etiquetas de mesa ten un número de liñas, TRS. E dentro de cada liña que ten TDS ao número de columnas que quere ter nesta liña particular. Imos dar un ollo a un moi tabela sobre en CS50 IDE. 

Entón, eu teño aquí un arquivo chamada táboa de puntos HTML. Imos dar un ollo o que parece. Hai moita cousa a suceder aquí, pero se notar que eu teño unha táboa aberta. Estou empezando a definición de táboa. E entón, na miña primeira liña I aparentemente ten catro columnas, un, dous, tres, catro. E entón eu estou feito con esa liña. 

Entón eu comezo outra liña e facer dous, catro, seis, oito. Termine esa liña. Fai outra liña, tres, seis, nove, 12. E entón unha última liña, catro, oito, 12, e que sexa un pouco de corte aquí, 16. 

Eu rematar esa liña. Eu rematar a mesa. E entón eu estou feito con meu HTML. O que isto parece? Ben, non é realmente moi para ver. Eu claramente organizado miñas información dunha forma un pouco máis organizado. Pero non é super fermosa aquí. E nós estamos indo a xestionar que, cando falamos de CSS. Imos revisar esa idea de o que podemos facer para facer un mesa-- quizais formato-lo un pouco mellor? Pero eu teño catro liñas, cada un dos cales ten catro columnas, e realmente o que iso equivale a unha moi sinxelo catro por catro multiplicación táboa. 

Só algunhas marcas que imos falar. Imos falar sobre o concepto dun formulario HTML. Entón podes ver iso no contexto sesión nunha páxina web. Normalmente insire o teu nome de usuario. Escribe o seu contrasinal, e está preparado para ir. Iso sería o inicio dun formulario. 

Pulando Div un segundo. Tamén temos as entradas que tipo de caber dentro formas. Estes son os elementos que en realidade está escribindo en, ou os botóns de radio que está sinalando, ou o cheque caixas que está pasando á praza. Entón, estas ir a dentro de formas. E comprenden basicamente cada liña do formulario o formulario está formatado ben. Entón hai ese concepto de un div, que realmente non caber nunha determinada categoría de etiquetas como os que eu feito anteriormente. É só unha especie de demarca o comezando dalgúns division-- arbitraria div-- da páxina. Non hai ningunha ruptura visual. Non hai ningunha liña. Non é definido como un todo peza separada automaticamente. Vostede tería que denominalo lo que forma de facelo. 

É só unha especie de di que quero un anaco de espazo na miña páxina web, e eu estou indo só para chamar A división da miña páxina. Podemos poñer cousas dentro de divs, e de feito, cando cabeza para IDE nun segundo, imos ver que eu estou poñendo miña formar dentro dunha div. 

Entón, eu teño aquí na miña IDE un ficheiro chamado div forma dot HTML. Imos abrilo. Teña en conta que, como dixen, div é unha especie de arbitrario. Non? Realmente non significa nada. Entón, eu teño unha arbitraria primeira división da miña páxina. E, a continuación, no canto doutra div máis tarde, comezando na liña oito, Teño este formulario. E dentro do formulario Eu teño un número de entradas, os campos do formulario. Entón, eu teño un campo cuxo nome é A-- que realmente non significa nada agora-- certo que, ao parecer, leva o texto, outro que toma un contrasinal, outro que é unha Radio botón, outra que é unha caixa de selección, e outro que é un botón Enviar. Ben, o que o fai todo realmente se parece? Ben, imos dar un ollo. Imos abrilo na nosa fiestra de visualización. Teña en conta que esta arbitraria primeiro division-- hai ningunha separación visual aquí. Realmente non facer nada, non? 

E entón eu teño a miña forma. E eu non facer calquera formato especial. Entón, o xeito é só un gran liña de información. Se eu tivese formato miña forma diferente, Podería telo liña por liña por liña. Pero eu non facer calquera estilo. De novo, non estamos falando de CSS aquí. Estamos só a falar de HTML. 

Ben, na miña forma de texto que podo type-- lembre que as formas de tipo de texto para que eu poida poñer o meu nome. E na miña contrasinal I pode escribir o meu contrasinal. E por ese campo é do tipo contrasinal vostede non sabe o que o meu contrasinal está. É todos os puntos. 

Eu tamén pode optar por marcar fóra un botón de opción ou sinalar fora dunha lista. Ou eu podería enviar o meu formulario. E eu non fixen nada, entón cando enviar a miña forma, a páxina só refresca. Pero eu quizais puidese configurar o meu Submit para facer outra cousa. E imos ver o que podemos facer con en que un vídeo no futuro PHP. Pero iso crea unha moi formulario sinxelo que pode usar para que os usuarios interactúan e enviar información a nosa web. 

Un último comentario antes de nós pasar algunhas outras etiquetas están a dar un ollo neste tag entrada unha vez máis. Repare que eu teño en destaque os extremos da etiqueta en vermello. Cada outra etiqueta que vimos ata agora tivo un comezo e un fin, unha apertura tag e unha etiqueta de peche. 

Pero unha marca de entrada non. Non hai ningún texto que vai entre as etiquetas de entrada. Toda a información estamos pretendendo transmitir está ligada como parte do atributos dese insumo. Observe temos o nome de entrada é igual a x. Tipo iguala y. Isto é realmente todo o información que necesitamos. 

Iso é chamado de etiqueta de peche automático. Non require un oco e un preto, porque toda a información está contida no interior da tag e os seus atributos. Entón, ás veces vai ver iso tamén. Entón, só tes que ser consciente de que se ten un tag que é totalmente autosuficiente, abre e pecha-se con o soporte de ángulo aberto na esquerda eo ángulo de corte soporte á dereita. Veremos máis un deses agora con etiquetas de imaxe tamén. 

Antes de falar sobre as imaxes, nós Necesitamos falar sobre hyperlinks. Se queremos que a nosa páxina web para ser interactiva e moverse en torno a nós, sería bo poder a facer clic nun deses o que foi tipicamente unha ligazón azul. Esta é realmente a forma na que construímos un hipervínculo a nosa páxina web. E, curiosamente hai outra etiqueta HTML chamado enlace, que non é un Ligazón. Un aquí inserir unha referencia, e é así que indican un hipervínculo. 

Un href é igual x medios ir páxina web X. E todo entre o aberto Unha etiqueta ea estreita A etiqueta é o que vai ser que subliñou texto azul que se parece unha ligazón que estamos familiarizados. Abaixo diso temos unha etiqueta de imaxe, que é unha auto peche tag para amosar unha imaxe situada en X. E pode ser capaz de cambiar aquela imaxe especificando ancho e alto e outros atributos que dot dot dot alí. 

Na parte inferior aquí temos un moi interesante mirando tag que non fai ter unha etiqueta de peche. É exclamación HTML punto DOCTYPE. Entón HTML foi en torno desde o principios de 1990 para a construción de páxinas web, e se foi sometido varias revisións desde entón. Máis recentemente, en 2014 foi sometido a unha revisión chamado HTML5, que agora é a cadea tipo de patrón de feito HTML. 

Para indicar que a nosa web páxinas están escritas usando HTML5, isto é coma nós comezar. Pode ser omitido, pero o que, basicamente, medios é que non pode usar calquera das marcas que son as etiquetas HTML5, estas novas etiquetas. Entón, sempre comezar se estamos usando HTML5. E todas as marcas xa falamos sobre anteriormente non son etiquetas HTML5. Pero iso indica que Etiquetas de HTML5 estará presente. E por iso temos de exclamación DOCTYPE HTML, que é ao comezo da nosa Ficheiro HTML, e logo despois dese punto nós realmente temos o noso HTML aberto marcar e proceder a partir de aí. 

A última é unha etiqueta de comentario, que parece un pouco diferente, tamén. Ela comeza con ángulo soporte de exclamación trazo guión, pero non paréntese de peche. Entre estes dous elementos alí é onde escribir os seus comentarios. E imos dar un ollo en imaxes e comentarios e ligazóns CS50 IDE. 

Entón, eu teño aquí un arquivo chamado ligazón á imaxe dot HTML que vou abrir. E repare que eu teño un par de comenta aquí nos meus comentarios HTML. Así como en C e outro linguaxes de programación, HTML só por ser unha linguaxe de reserva ten a capacidade de ter comentarios. E polo que estou parecer vai poñer unha foto de Rick Astley algures entre esta div tag, esa división arbitraria. Ao parecer, o ficheiro é situado no Rick punto JPEG, que dirixirse ao miña árbore de ficheiros a un segundo, é un arquivo que existe en o directorio actual. Entón, iso é OK. Podo facer referencia a ela. 

Entón eu podo ter conexións internas. Entón, observe na liña 11 aquí meu href é Ola dot HTML. De xeito que só se refire a Ola dot HTML que hai no directorio actual. E eu tamén pode ter externo conexións por só especificando HTTPS para indicar que eu non estou falando sobre un arquivo no meu directorio actual. Estou falando sobre un arquivo que existe nalgún lugar en internet, o que eu teño para solicitar, mediante o protocolo HTTP. 

Entón, imos dar un ollo ao que Nesta páxina pode parecer e prepare-se a unha imaxe de Rick Astley para aparecer na súa pantalla. Entón, eu vou ver iso. Hai Rick Astley no moi superior neste arbitraria división eu poñelas na parte superior. E, a continuación, para abaixo abaixo I teño as miñas conexións, non? 

Teño unha ligazón a Ola dot HTML. E se eu premer en que, eu recibín transferida esta páxina que estamos moi familiarizados coa dende o inicio do noso programa. Se eu aparecer esta páxina aberta de novo, se eu pop ligazón á imaxe abrir unha vez máis, Eu tamén pode ir externamente para o sitio web do CS50. E alí nós see-- vou zoom out algo aqui-- veremos do CS50 tipo de sitio web incorporado no medio da nosa páxina. Entón, eu era capaz de facer un interno vincular, así como un enlace externo. 

A última regra con HTML que imos falar aquí é que o HTML debe ser ben formado. En C, falamos moito sobre A sintaxe de moitas cousas. HTML a sintaxis realmente xira en torno a etiquetas. Cada etiqueta abre debe ser pechado. E, de feito, cada etiqueta abre deben ser pechados por orde inversa. 

Entón, se abrir unha etiqueta en negriña, cursiva unha tag, e entón unha etiqueta subliñado para facer todos os tres para un especial conxunto de texto, ten que pecha-los en orde inversa. Entón, se abriu valente, cursiva, subliñado, vostede quere pechar subliñado, cursiva, negriña. Este tipo de encapsulamento é o que mantén HTML agradable e organizado. 

A diferenza de C, porén, erros de sintaxe non vai de feito, prexudicar o seu HTML, posiblemente. Seu HTML pode non ser así formado, pero que aínda funcionan. E así estes erros Pode clasificar de foto. É ata a realmente ser vixiante. Ás veces, eles van fallar, pero ás veces pode comezar afastado con el. 

Pode ser un realmente tarefa difícil, porén, manter o control de cando abriu unha etiqueta, cando pechou-a, especialmente como o seu HTML arquivos queda maior e máis grande. Vai querer axuda. E hai en liña ferramentas de validación que pode usar para ter un ollar para o seu web páxina e ver se está ben formado HTML. E ten que definitivamente Bótalle un ollo os e comezar a usalos como comezar a facer un traballo con HTML, escribir HTML, só para que obteña uns bos hábitos sobre a organización o seu HTML nun bo camiño e bo estilo e certificando- que non está facendo todo o que podería crear un erro de sintaxe que faría que un pouco de un problema no camiño. 

Eu son Doug Lloyd. Este é CS50.