[Música tocando] 

DAVID Malan J: Este é CS50 e este é o inicio da semana 7. Entón, benvido de volta. E ten que lembrar que no conxunto de problemas catro, houbo un pouco de unha cacería para algúns fabulosos premios polo cal despois de recuperar as fotos de equipo, tanto aquí como en New Haven, vostede foron desafiados a atopar o maior número de estes científicos da computación como podería. E nós temos un todo banda de submissões. Penso que ía compartir algunhas con vostedes aquí hoxe. 

E nós imos deixar todo isto en liña. Pero, en particular, eu quería chamar a súa atención a-- ben un, Sam estaba en moi poucos deles xeralmente pousando como este. Pero parece que a partir de esta mañá, o gañador foi un certo alguén chamado Ken con 24 do equipo capturado na cámara ou un pouco máis cando ter en conta varios funcionarios nas fotos. Retratado aquí é Ken próxima María en New Haven. 

Agora, Ken, porén, transforma fóra é un pouco de un caso de canto que aínda non aconteceu antes. Acontece que isto non ocorreu para me poñer en letras miúdas problema definir catro que di que os funcionarios son inelegíveis para os premios fabulosos porque Ken é, evidentemente, unha das os fotógrafos no noso equipo. Agora, co que dixo, el orixinalmente escribiu-me a dicir por favor, non publicar estas fotos en liña. Eu creo que en gran parte porque a maioría das fotos que este fotógrafo sacou ollar un pouco algo así. E semellantes. 

Pero Ken quere me tranquilizalo lo que é un bo fotógrafo, El é un profesional, el leva fotos que non son borradas, que son mellores en foco, e levou algúns dos nosos propios funcionarios. Pero en vez de recoñecer única Ken, o que pensamos en facer é percorrer a lista de alumnos reais que presentaron. E parece que Lance con 15 fotos dende esta mañá foi o noso gañador. 

E é aquí retratado con Lance Colton, con Skaz, comigo mesmo, e con Sam. Pero, a continuación, verifícase que a partir de 11:46, polo que só un pouco atrás, Eu volvín para o meu correo electrónico e atopou que tivo aínda máis unha presentación por un estudante chamado Bonnie cuxo correo electrónico dixo que só iso. Non imos mentir, eu son facendo iso durante a clase. E entón comezou a achegar só 14 fotos, un tímido de Lance de 15. 

Pero, en fotos de Bonnie, verifícase se out foron varios membros do equipo, Sam entre eles, entón o que nós pensamos que nós quere facer é recoñecer ambos. Así, ademais de obter o Dropbox espazo que todos os que participaron recibe, estas dúas seccións tamén recibir un bo xantar servidos por eles ea súa sección acasala esta semana que vén. E así que vai escoitar de nós, Tiro e Bonnie, sobre iso. Tan grande parabéns para eles. Agora, aqueles de vostedes que faría como o xantar de modo máis xeral sabe que o xantar CS50 en Cambridge e New Haven é hoxe. Ir ao web da barra de RSVP CS50. E agora unha palabra sobre os seminarios. Máis curricularly. Entón, nós estamos achegando o punto do semestre onde ten que comezar pensar sobre proxectos finais. E, de feito, en só un pouco, vai os chamados propostas pre ser debido. Así pre propostas destinadas a ser moi baixo impacto e realmente só unha oportunidade para vostede compoñer unha nota curta seu compañeiro de ensino para informar el ou ela o que está a pensar que Pode querer facer para o seu proxecto final. 

Agora, moitos estudantes acaban facendo web baseada proxectos finais. E, por suposto, somos só Agora, a semana pasada nesta e ademais de mergullo programación web. Non te preocupes se non teño absolutamente ningunha idea de como ía construír as ideas que pode que na súa mente. Isto é realmente só unha función de forza para pensar e falar co seu TF sobre iso. Pero, para axudar con iso, e con proxectos finais, en definitiva, sei que CS50 ten unha tradición de ofrecer seminarios. 

E estes son opcionais, mans, ou charla con base en oportunidades para saber máis sobre temas que son un pouco de axuda para o curso de currículo, pero aínda así marabilloso materiais para conducir proxectos finais. E así esta é a lista que é CS50 equipo aquí en New Haven veñen-se coa este ano sobre IOS programación, Android programación, desenvolvemento de xogos, e acios de máis ferramentas e linguaxes e técnicas. 

Polo tanto, manter un ollo no sitio web do CS50. E, mentres tanto, se desexa rexistrar o seu interese en calquera destes, ir rexistro barra de CS50. E nós imos logo seguir en canto á días e horarios de voos e locais e máis todo vai tudo-- transmitir e tamén está dispoñible baixo demanda despois se non pode realmente facer. Así, sen máis delongas, imos deixou a última vez con GET. 

E esta era como a mensaxe de que era dentro do sobre virtual, lembra, que pasou de router para router para router entre un navegador web e un web servidor. E esa mensaxe parecía un pouco algo así. Esta foi a mensaxe que máis arcano era, en realidade, dentro dun sobre escrito nunha folla de papel cuxo primeira liña di literalmente chegar barra. 

E, así como unha comprobación de sanidade, o que barra denotar? O que quere dicir cando barra solicitando un sitio web? Vostede solicitalo lo o tempo. A maioría dos calquera vez que visita un sitio web, en realidade, non escriba un nome de ficheiro. Probablemente só ir Facebook.com, introducir, gmail.com, ou semellantes. E o que barra representan? O ficheiro? Ou que páxina, especialmente? 

O índice, si. Entón, a páxina por defecto. Polo tanto, se non especificar un ficheiro nomear como nós imos comezar a ver, en realidade está só pedindo dáme a páxina estándar de Facebook ou me dar a miña caixa de entrada ou dar me a páxina estándar de noticias na páxina web da CNN ou similares. E a continuación, un servidor responde a esta mensaxe con algo como este, dicindo: si, eu falar HTTP versión 1.1. 

200, que é un estado código que nós, seres humanos raramente nunca ver porque é bo. Porque significa OK, a petición foi recibida e trata adecuadamente. E o tipo de contido aparentemente en resposta é, moitas veces, pero non sempre, texto. E especialmente, o HTML. E iso é, en realidade, onde miramos para hoxe. 

Entón, en realidade, eu estou indo a ir adiante e abrir un navegador. Vou usar Chrome, pode utilizar máis calquera navegador nas semanas por vir. En xeral, recomendamos Chrome porque é particularmente bo para os desenvolvedores de software. Ten unha morea de construída ferramentas que fan máis doado para desenvolver non só HTML e CSS, cousas que imos comezar a falar hoxe, pero tamén outras linguas tamén. 

E eu estou indo a ir adiante e ir a-- Eu estou indo a controlar ou prema co botón dereito clic en calquera lugar nunha páxina web. E eu estou indo a ir a Inspect Element. E eu vou axustar meu pantalla só un pouquiño aquí. Déixeme pasar isto para o fondo. Polo tanto, este é o que se chama Inspector de Chrome. Entón, iso é como unha depuración ferramenta embutida no Chrome. 

Todos vostedes xa teñen esta se estivo utilizando o Chrome. E iso permite que vexa o que está pasando por baixo do capuz dalgunha páxina web. Entón, imos realmente ter un ollar para isto como segue. Ten xeito máis recursos e nos preocupa hoxe. Pero hai esas guías para aquí. Elementos, rede, fontes, liña do tempo, e algunhas outras cousas. Eu estou indo a facer clic en Rede por un momento. 

E é un pouco esmagadora a primeira vista aquí. Pero o que eu vou facer é deixar me simplifica-lo un pouco. Vou chamar o gravación de luz, co que é vermello. E eu vou dicir preservar rexistro. E este é só un pouco cousa que eu descubrir co paso do tempo que vai gardar todo o que acontece no navegador. E agora eu estou indo a ir para http://facebook.com. 

De feito, imos facer www para unha boa medida, slash. Intro. Así, un URL que moitos podes visitar. E agora web de Facebook A páxina xorde na parte superior. E, a continuación, unha morea de material voou na parte inferior. E, de feito, parece que cando visita Facebook.com, non está só facendo unha solicitude HTTP, verifícase que vai Facebook.com envía 41 destes sobres, cada un co seu propio solicitude get, segundo se indica, ben que por detrás da pantalla aquí, na parte inferior da pantalla, isto indica que, en realidade, o meu navegador fixo 41 solicitudes. 

E en total, trasladou 861 kilobytes e levou por algún motivo ata oito segundo para descargar todo isto. Entón, iso é realmente un pouco raro que o sitio de Facebook que levaría por moito tempo, pero que así sexa neste caso. Agora, todo isto realmente non me importa sobre, excepto para a solicitude de nivel superior. Entón imos para este aquí e déixeme afastar por un momento. 

E déixeme facer zoom sobre o tema. Entón o que eu fixen na esquerda, aínda hai moita cousa a suceder aquí é que destaque Facebook.com e despois notar que eu estou rodando abaixo, desprazamento para abaixo, rolando a abaixo, para solicitar cabeceiras. E vai ver que Chrome está amosando me esencialmente o contido interno da solicitude que eu fixen. Non é formatear completamente na mesma xeito, pero teña en conta hai mención de entrar, notar hai mención do anfitrión, Facebook.com, o camiño, ou barra, que é o ficheiro que se solicite. 

E entón se eu rolar backup, nós imos realmente ver que Facebook devolto para min é todo eses cabeceiras. Entón, dentro dese sobre virtual de feito, hai unha morea de pares de valores clave. Unha palabra, un colonos, e, a continuación, un valor. Nunha palabra, unha coma, e un valor. Estes son chamados as cabeceiras. E non hai forma máis detalles aquí que que realmente se preocupan agora. 

Pero esta é a segunda último alí en baixo, notar, que o servidor da Facebook.com, de feito dixo vén aquí un texto HTML. Entón, todo isto é para dicir que cando pedir un web páxina dun navegador para un servidor, que servidor responde con un sobre da súa propia no interior dos cales é texto. Noutras palabras, o HTML. Formato Markup Language. Que é outra lingua que presentamos hoxe que o ser humano ou ordenadores xerar a fin de aplicar páxinas web. 

En concreto, imos ollar para iso. Vou agora volver para o sitio de Facebook. E eu vou só control clic ou prema co botón dereito e faga clic en Ver código fonte da páxina. E mesmo se non usar Chrome, IE pode facelo, Firefox pode facelo, Safari pode facelo, aínda que o menú opcións pode parecer un pouco diferente. E este é o código HTML que Mark e empresa en Facebook escribiu. 

E colectivamente, esa linguaxe aquí aplica o azul e branco da páxina que vimos hai pouco. Agora, iso é un pouco esmagadora. Pero se miramos cara arriba na parte superior esquerda, estamos comezará a ver algúns patróns. Parece que hai unha morea destes soporte de ángulo aberto e despois hai este HTML contrasinal. Aquí está outro aberto soporte de ángulo e cabeza. 

Aquí está, se desprace e para abaixo e para abaixo, eu son indo a ir adiante e tratar para buscar algo. Hai camiño á dereita aquí é o órgano de apoio aberto. E lembrar da última tempo que propuxemos que a páxina web máis simple que un ser humano pode escribir pode parecer un pouco algo así. Abrir tag HTML, cabeza aberta tag, tag title aberto, entón o título pechado, cabeza pechada, aberta tag corpo, texto, corpo pechado, HTML pechado. 

Pero unha pausa aquí por un momento. Este código, mesmo se ten nunca escribiu que antes pero aínda non entendo moi ben o que está pasando, parece moi bo. Correcto, é moi limpo. É moi estilisticamente agradable. Unha morea de recuar e espazo en branco. Facebook é non é. Entón, por que é tan Facebook peor que eu en escribir HTML? Aparentemente. 

Correcto, iso é como un fóra de cinco para o estilo. Hai unha razón convincente para que estes cantos cortados. Todo ben, entón eles non queren facer máis doado para que poida lelo. Así, en certo sentido, son ofuscar-lo, tipo de codificación que polo menos tan esteticamente que é máis difícil para Myspace para ir e iniciar o seu páxina de inicio eo HTML para el. Acontece que con programas con todo, incluíndo o cromo, podemos limpar iso super fácil. Por iso, non é ben iso é como a razón. O que máis podería ser a causa. Si. Si, dados os custos de espazo en branco. Que queres dicir? Si, exactamente. Se preme a tecla Tab moito ou o barra de espazo, considerar as implicacións. Así, cada tecla no teclado é unha [Inaudível] representado como un byte. 

Entón supoño que Mark ou calquera dos devs estes días chega a barra de espazo só unha vez nesta páxina HTML que representa a páxina de Facebook. E o Facebook ten unha morea de usuarios nos días de hoxe. Entón, supoña que a páxina de Facebook é visitado por mil millóns de persoas hoxe. E alguén en Facebook ten preme a barra de espazo só unha vez. 

Entón, un byte adicional, mil millóns de solicitudes, canto máis datos son Facebook a transferencia a través de internet porque alguén bateu o barra de espazo no teclado? Mil millóns de bytes, ou un gigabyte de os datos están sendo enviados desde servidores de Facebook para persoas en todo o mundo sen unha boa razón. Agora, iso é só un espazo. 

Imaxina se realmente limpar este cousa e recuado el e engadiu unha morea de espazo en branco e caracteres de tabulación e espazos, Acaba gastando gigabytes, se non terra bytes máis espazo. E tan super común no mundo real de desenvolvemento web é para apoucar o seu código. E nós imos finalmente ver como pode facelo. 

Pero hoxe, imos comezar a escribir código que é realmente lido por nós seres humanos. Acontece, porén, se volver a esta ferramenta en Chrome Inspect Element, anteriormente, estabamos na guía Rede. Acontece que se vai para o guía elementos, o que realmente ver Chrome é moi impreso versión HTML que mesmo. Entón, nós temos deobfuscated-lo. Por iso, non é páreo para un ordenador. E agora pode realmente clic arredor e comezar para ver a xerarquía que é unha páxina web. Entón imos realmente facelo. Eu estou indo a ir adiante e abrir-se en meu Mac un programa chamado de edición de texto. E lembrar que este é só un programa super texto simple. Windows ten notepad.exe. E eu vou Verbatim escriba o seguinte. Doc tipo HTML, soporte aberto HTML, pechou soporte HTML, temos a cabeza da páxina aquí, fin da cabeceira da páxina aquí, un título como, Ola mundo. 

E, a continuación, para abaixo aquí, cómpre o corpo da páxina web. Corpo pechado. E, a continuación, aquí, Ola mundo. Todo ben. Entón escribimos unha páxina web super rápido. Vou gardalo como hello.html no meu escritorio. Meu Mac vai reclamar, pensando que, agarde un minuto, este é un ficheiro de texto, facer quere chamalo .txt? Pero non, quero usar HTML punto. 

E entón o que é bo se eu basta con premer dúas veces neste ficheiro, hello.html, aquí vai a miña páxina web. Desafortunadamente, eu son o única persoa no mundo que se pode visitar esta páxina agora. Porque onde ela vive aparentemente? É o meu Mac, non? Que é inútil. Como ninguén nesta sala moito menos en internet realmente visitar esta páxina. Entón, hoxe, necesitamos introducir outro elemento. 

E para facelo, eu vou dalle abrir cloud 9. Entón cloud 9 é, por suposto, un nube serviço-- baseado CS50 IDE-- Isto ten todos os nosos espazos de traballo correndo en algún lugar en internet. E isto significa que todos os ficheiros son accesibles ao público xa. Entón, imos seguir adiante e facelo. Eu estou indo a ir adiante e crear un novo ficheiro NCS50IDE. Vou gardalo como antes como hello.html e prema Gardar. E agora só para aforrar tempo, eu vou para ir adiante e copiar e pegar este código no canto de escriba-lo de novo. E salvalo. E entón agora eu teño un ficheiro chamado hello.html. Pero como é que realmente abrilo como unha páxina web? Ben, resulta que o construído en para CS50 IDE non só é un compilador como clang e un depurador como o GDB e acios de outros programas, hai realmente unha pleno dereito servidor web rodando dentro CS50 IDE. 

Todos vostedes, é dicir, ter o seu propio servidor web. E un servidor web é só unha peza de software cuxo propósito na vida é para servir páxinas web. Para escoitar as peticións de navegadores e responder con pequenos sobres virtuais dentro do cal é a contido que escribín. Polo tanto, este servidor web é fonte realmente libre e aberto. Onde código aberto significa só software que alguén ten escrito que todos podemos realmente ver e descargar e mesmo cambiar o código fonte. E é chamado Apache. 

E nós fixemos un pouco máis fácil usar en CS50IDE chamándoo 50 Apache. Para que poida realmente comprender o seguinte. Eu vou dicir Apache 50 principio. E entón eu só vou dicir punto. E vemos algúns un pouco mensaxe dicindo arcano configuración de Apache documento [? grupo?] a casa, ubuntu, calquera que sexa, barra de espazo de traballo. Iniciando o servidor web Apache 2 con éxito. 

Entón, longa historia curta, I ter só apertou un botón e virou-se en un servidor web que é agora escoitando en internet na porta TCP 80 nun enderezo específico. E el di aquí, e iso vai cambiar en base no seu nome de usuario e outros factores, pero agora entender se eu premer isto, IDE50 dot jharvard e así e por iso, entender que todo este tempo Para os últimos semanas, pode que reparou que o seu propio nome de usuario incorpórase no lado superior dereito esquina da CS50IDE. 

E iso, en realidade, foi todo isto cronometrar a dirección en que pode visitar os seus ficheiros a través da web. Ata agora, non importaba, porque en C, normalmente queren que as cousas funcionan nun terminal, non na web. Pero hoxe, comezamos escribir código baseado na web que queremos accesible en URLs públicas. Entón o que eu vou facer é premer nese URL. 

E teña en conta que eu vexo un moi índice feo, unha listaxe de directorio, pero o arquivo salta en ti probablemente? Hello.html. Isto é porque eu salvei o ficheiro na miña zona de traballo. E o que eu dixen a Apache servidor web é ollar no directorio do espazo de traballo de David. E deixe que ninguén no mundo ver eses arquivos. 

E, de feito, se eu agora prema o hello.html, Vexo dentro desta guía exactamente ese ficheiro. Agora conta, nube 9 de obra algo un pouco útil para nós. Dentro CS50 IDE, teña en conta que hai de súpeto, unha barra de enderezos. Porque aínda que esteamos usando Chrome para visitar CS50IDE, dentro CS50IDE é a súa propia versión dun navegador web agora. E así, en vez de complicar as cousas, como tal, Eu estou indo a ir adiante e só copiar este URL. Eu estou indo a ir adiante e só abrir a miña propia fiestra Chrome. Non hai ningunha máxica aquí, non CS50IDE. Eu só vou para pegar literalmente Harvard miña URL e J prema Intro. E listo, agora e en teoría, todo en internet, se eu tivera configurado Permisos de forma adecuada, podes visitar este ficheiro. E agora, se eu dixo hello.html, listo, hai é a miña páxina web incrible decepcionante. Entón imos facer unha comprobación de sanidade rápida. Por mor de todo isto é conceptual set up. E nós realmente non teño realmente vostede ensinou como escribir HTML per se. Calquera preguntas ata agora sobre o que está pasou? Si. O CS50 posúe estas páxinas web? En que sentido? Boa pregunta. Entón CS50 é propietaria CS50.io. Temos de feito comprou o nome de dominio. E pola natureza de vós rexistrando en CS50IDE, obter todo o que se chama un subdominio. 

Entón IDE50-Malan, ou IDE50-Rob.CS50.io, ese é o seu enderezo único dentro o noso nome de dominio. Así, para os fins de curso, ten o seu propio enderezo único. Pero nós simplificamos as cousas por mercar o dominio de nivel superior, CS50 dot E / e, a continuación, todo o mundo é dentro de que, por así dicir. E nós imos voltar a iso en un par de semanas, probablemente, especialmente no proxecto final tempo, cando algúns de vostedes Pode querer obter os seus propios nomes de dominio. En realidade, é relativamente simple. Todo ben. Entón, imos agora facelo. Vou volver CS50IDE, onde meu arquivo agora, hello.html, non é tan interesante. Gustaríame facer algo un pouco mellor do que iso. Entón, eu vou facer algo coma isto. Déixeme paragraphs.html aberto. Polo tanto, este é un ficheiro que escribín con antelación. Na parte superior de que, como sempre temos comentarios. Pero, en HTML, comentarios mirar un pouco diferente. Na liña de tres e liña 14, que vexa a sintaxe para iniciar un comentario e acabar con un comentario. 

Pero ningunha das cousas en entre as cuestións funcionalmente. É só unha nota a un humano que está pasando aquí. E así como a sanidade rápida comprobar, se eu rolar para abaixo, o que é o novo obvia tag que introducimos? As etiquetas, de momento, vimos son abertos soporte HTML, cabeza, título, e corpo. Pero o que é obviamente novo agora? 

Si, entón p. A etiqueta p ou parágrafo tag. E entón eu só prestado algún defecto Texto en latín para constituír meus parágrafos. Porque o que eu quería demostrar é o xeito no que pode representan parágrafos de texto en HTML. E entón o que está empezando a pasar aquí é que xa existe un nivel de desenvolvemento. E deixe-me ir adiante e facelo. Déixeme primeiro desactive Apache. E eu vou dicir a el para comezar a si mesmo novo dentro de fonte de hoxe sete m directorio. Así que eu teño acceso a todo. 

E agora, se eu volver esta listaxe de directorio, notar que vexo todos os ficheiros a partir de hoxe. E vai ver no xogo seguinte problema, imos darlle instrucións para facer exactamente isto. Se eu abrir paragraphs.html, isto pode ben coma unha linguaxe de programación para ti, se non falar ou ler en latín. Pero esta é só tres parágrafos de texto que son marcados en HTML. 

E teña en conta o parágrafo pausas entre eles. Porque xira para fóra, e aínda que pode estar inclinado a facer iso, Tendo en conta que, no mundo real, se quere poñer liña pausas entre as cousas, pode simplemente facelo e bateu Gardar. E agora, se eu volver cargar aquí, aviso que todo só borra xuntos en só unha burbulla de texto. Como o HTML é unha especie de linguaxe mudo. 

Foi creado para ser usado en tales dun xeito que o navegador só facer explicitamente o que diga a el para facer. Polo tanto, se non dicilo déame un novo parágrafo non vai ver un novo parágrafo. E, de feito, o que a navegador fará o é que prema Intro, digamos que unha e outra vez e de novo, movendo-se deste xeito texto abaixo na pantalla e, a continuación, gardar e, a continuación, actualizar, o navegador vai a desmoronar todo este espazo baleiro en só un único espazo en branco, visible. Todo ben. Entón esa é a marca de parágrafo. E entón cal é o estándar que está a desenvolver aquí? Ben, parece ser o caso de que HTML é todo sobre como iniciar un tag e rematando a etiqueta. E o que é unha marca? Ben, é só unha peza de sintaxe. Abrir soporte, unha palabra clave, soporte pechado, é unha etiqueta. Ou comezar tag. E entón cando está feito expresarse, como no que fixo o parágrafo fai así dicir contrario. Pero o contrario non é moi cara atrás. 

Simplemente prefixar a mesma marca de nomear cunha barra coma este. Todo ben. Entón, non todo o que emocionante. E, de feito, non estamos facendo o web todo o que máis interesante. E se eu queira facer cousas maiores e ousada? Así, verifícase que aquí está un exemplo en headings.html, onde no meu corpo, Eu teño unha etiqueta H1, H2, H3, catro, cinco ou seis, os cales parecen bastante misterioso. Pero se eu for abrir este exemplo, imos dar un ollo. Headings.html. 

Entón navegadores por defecto pode darlle texto que é grande e valente de tamaños diferentes. H1 é grande. H6 é menor e, a continuación todo o máis no medio. Entón, iso é interesante, pero aínda non é realmente a web sei. E se queremos que teño algo así como unha lista. . Entón aquí está unha lista con viñetas de tres dos cuartos de Harvard. 

Como vai facer sobre iso? Ben, bótalle un ollo list.html. E aquí vemos unha pouco de funkiness pero imos considerar o que está pasando. Así, segundo o que acaba de ver, UL significa lista desordenada. Lista desordenada significa só marcadores. Non hai números. Hai tamén unha cousa chamada lista, que é un OL na etiqueta ordenada. Logo LI, elemento da lista é todo o que iso significa. 

E así automaticamente números de todo para ti. Pero, de novo, todo o meu recuar e espazo en branco é só por min. O seu navegador non é realmente vai importar. Así, aínda que non podía facelo, só para quedar claro, Non debe mesmo aínda O navegador aínda poder comprende-lo moi ben. Estou batendo na miña recarga navegador, estou facendo clic recarga e ningún cambio está a suceder porque o seu navegador aínda facendo exactamente o que eu diga a el para facer. 

Todo ben. Entón, todo isto non é máis que texto. Agora imos facer algo máis interesante. Eu estou indo a ir adiante e prestar algún deste HTML. Eu estou indo a ir adiante e crear un novo ficheiro aquí. E nós imos chamar este rick.html. Temos desproporcionalmente algo usado chamado un rolo Rick neste clase este ano, eu non sei, só sucedeu organismos. 

E agora ten fóra de control. Entón, eu estou indo só para ir con el. E se eu for a Google Imaxes e Rick Astley. Se non sabe por que facemos iso, só tes que ler sobre Wikipedia. Cada vez que fai clic no enlace, Alguén está rindo en algún lugar. E deixe-me ir alí ahead-- imos, imos ver esta imaxe. 

Polo tanto, temos aquí un imaxe en Imaxes de Google. E imos supor que este é razoablemente en todas partes en Internet. Entón, eu vou asumir que é OK para min para realmente poñer isto na miña páxina web. Eu estou indo a ir adiante e copiar URL da imaxe. E agora, se eu volver a Nube 9, imos ver o que podo facer aquí. Entón aquí é só unha páxina web. Este é Rick Astley, haha, Vou agora volver para o meu navegador, actualizar e interesante. 

Onde está Rick? Entón deixe-me ver o que pasou. En realidade, eu vou finxir que eu non fixen iso. [Inaudível] poñelas aquí. Nós imos voltar a iso nun momento. Entón aquí está rick.html. Entón iso non é Rick Astley. Entón non é que podemos realmente engadir el aquí. Este é Rick Astley. Vou dicir-me dar unha imaxe cuxo fonte é a URL só copiados, o que aparentemente é un feliz aniversario unha cousa ou outra. 

E agora eu vou pechar a etiqueta como este. Entón, iso é rompe super longa. Pero teña en conta que todo o que eu teño feito imaxe soporte está aberto, fonte cun atributo deste. E é realmente unha longa URL. E ao final, entender iso. Barra Por que foi que eu fixen soporte angular no canto de, como calquera outra etiqueta, tendo un soporte aberto, IMG, soporte pechado? Só un palpite, aínda que non teñen ningunha familiaridade con HTML antes. 

Así é como se pecha a orde, senón porque non realmente facer intuitiva sentido facer algo un pouco máis verbose preto imaxe como? Si. Si. Só semanticamente, non hai ningún sentido de a partir dunha imaxe e rematando unha imaxe, é alí ou non é. Polo tanto, non ten sentido deixar un oco para calquera outra cousa dentro dunha imaxe. Vostede simplemente non pode facelo. E así a sintaxe xeralmente sería só para facer a barra no interior da etiqueta de apertura ou a marca de comezo e a continuación, bateu en Gardar. 

Entón, se eu agora recargar esta imaxe, agora Eu teño unha boa páxina web cociñar aquí. E nós certamente podería realmente irritar as persoas por incorporación no canto como unha ligazón de YouTube. E, de feito, en calquera momento xa pasou a YouTube, e deixoume realmente accidentalmente Rick roll-me aquí. Entón Rick roll. Entón rick roll-- Eu estou indo a ir aquí. 

[Música tocando] 

OK, unha persoa que lle gustaba. Entón, observe todo este tempo, se prema na ligazón Compartir, ten naturalmente obter a URL que realmente pode incorporar nun correo electrónico ou nunha imaxe forense ou nun conxunto de problemas ou nunha corredías. E agora, se eu premer en vez de incorporación, notar que todo este tempo, este material foi alí. Eu estou indo a ir adiante e copiar este. 

E só así podemos velo mellor, eu son indo pegalo no meu editor de textos. Teña en conta que isto que YouTube está a dicir. Cada vez que visitar un Vídeo de YouTube, se quere incorporar o vídeo no seu A páxina web, coller iso. Polo tanto, este é un Tag HTML chamado un iframe. Ou un en liña cadro. Por iso, tamén parece un pouco máis complexo do que todos os outros. Así, verifícase que a imaxe tag e, ao parecer, a etiqueta iframe tomar o que son chamados atributos. 

E este é outro peza de sintaxe en HTML. En adición á reserva de nome, nome da marca do soporte aberto, é posible controlar o comportamento da etiqueta por ter unha morea de atributo é igual ao valor. Atributo é igual ao valor. E así, por exemplo, YouTube está nos dicindo se quere o ancho deste vídeo ser de 420 píxeles ea altura para ser 315 píxeles, que é como expresalo en HTML. 

A fonte do vídeo vai ser que URL longo YouTube e, a continuación, algunhas outras cousas como marco de fronteira é cero, de xeito que probablemente significa que hai ningunha bordo ao redor da cousa. Permitir pantalla enteira, probablemente, significa que o usuario pode premer no botón e realmente de pantalla completa do vídeo. Entón, se eu realmente quero ser impresionante aquí en Rick dot HTML, en vez de usar a etiqueta de imaxe, deixe- me eliminar que, no canto pega este. E agora recargar. E agora aquí imos nós de novo. Todo ben, iso é o suficiente. Todo ben, entón eu vou tentar difícil non facelo de novo. Entón, cales son algúns dos temas aquí? Entón, HTML, tan feo como estas páxinas web son, en realidade é moi sinxelo. Non é unha linguaxe de programación. Non ten funcións. Non ten tirantes. Non ten condicións. Todo o que ten é decenas de diferentes etiquetas, cada unha das cales ten cero ou máis atributos. E, de feito, o que é divertido sobre HTML que comeza a mergullo é que é auto aprendizaxe moito. 

Só é preciso un entendemento do cadro xeral da HTML. ¿Que é unha etiqueta, o que é un atributo, como realmente configurar unha páxina web deste xeito. E todo o demais é realmente o resultado de mirar para arriba nunha referencia en liña ou buscando como facer algunhas técnica ou, como vimos, mirando na fonte de Facebook código, mirando para un sitio que lle gusta no seu código fonte e a comprensión de como os desenvolvedores alí realmente puxo as cousas. 

Entón o que podemos facer imaxes tamén. E, de feito, nós fixémolo dun momento atrás. Deixe-me ir adiante e só amosar-lle. Aquí está o código de exemplo. Se queres ver gato mal humor. Entón, teña en conta que podo ter unha etiqueta de imaxe aquí. E eu teño un comentario anterior. Eu teño unha alternativa texto para a accesibilidade. Entón, alguén que está a usar unha pantalla lector, por razóns de vista a continuación, pode realmente ter o seu NVDA dicir gato mal humor. Porque se eles non poden ver a imaxe, eles pode, polo menos, teñen o seu ordenador dicirlles verbalmente o que é. E a fonte deste arquivo é cat.jpeg. Entón, en realidade, se realmente quería obter intelixente, o que eu podería ter done-- Eu prometer non ir Rick Astley, para Eu estou indo a Google para un gato no seu lugar. E se eu for a Google Images aquí, e nós imos asumir que esta é unha imaxe do meu gato. 

Supoña que teño control premendo ou á dereita clic sobre este, accidentalmente asustado. E eu vou cat.jpeg para salvar o meu escritorio. Deixe-me agora voltar cloud 9. Lembre que aquí, podo ir subir arquivos locais. E se eu incorporarse este arquivo, cat.jpeg, aviso que eu poida arrastralo lo e soltalo en cloud 9 e vai berrar comigo aquí. 

Porque xa recibe un ficheiro cat.jpeg, pero é super doado de coller unha foto que ten toma a partir de Facebook ou Flickr ou similares e, de feito, arrastre e solte-o en cloud 9 e, a continuación, facelo parte do seu propio persoal web ou problema definir sete ou oito anos, como veremos en breve. E entón cando finalmente visitar aquel gato, supoñendo que eu baixei ese mesmo gato, aviso isso-- que era encantador. 

O que ves é algo así como este cara aquí. Entón os ficheiros que referencia dentro dunha páxina web poden ser locais no seu propio conta ou remoto nalgún outro servidor como no caso do Rick Foto Astley algo atrás. Entón, onde o que else-- máis podemos facer aquí? Entón imos dar un ollo ao seguinte. Vostede sabe o que é legal? 

Temos está a facer ata agora páxinas web moi estáticos. Quero apimentado as cousas do seguinte xeito. Eu quero facer o meu propio buscador. Entón, para facer un buscador, imos dalle comezar a facelo. Eu estou indo a ir adiante e crear un novo ficheiro chamado search.html. E nós temos prefabed versións en liña. Whoops. Non pega na súa fiestra de terminal. Prefab versións en liña. E eu vou comezar como segue. Entón aquí está o inicio un arquivo chamado search.html. Vou gardalo no directorio de orixe de hoxe. Vou chamar ese Search. De feito, imos facelo mellor. CS50 Investigación e realmente marca-lo. E agora, eu vou dicir algo así como H1 CS50 Search. E, a continuación, para abaixo aquí, H2 pronto. E só para recapitular, H1 e H2 significa que, respectivamente? 

Si, tan grande e valente, e non tan grande, pero aínda negra. Entón, se eu gardar este e pasar por riba aquí, imos ver search.html arquivo. Todo ben, e este é direita-- [inaudível]. Espera. David é confuso. Oh, está alí. David é un idiota. Aceptar. Entón é iso. Así, busca CS50 pronto. Entón, agora, imos sintetizar o que fixemos a semana pasada. 

Cando falamos sobre a mecánica de nivel máis baixo de HTTP. E esas novas ideas HTML, que é só esta linguaxe de reserva, onde dicir un navegador exactamente o que facer e aplicar o noso propio buscador. Entón, en vez de só dicindo pronto, eu son vai introducir algo chamado tag form. E deste xeito, eu vou ter algo como un campo de entrada. 

E o nome de esta entrada campo, eu vou chamalo P. E o tipo de campo de entrada Eu vou dicir non é máis que "texto". E un campo de texto, como veremos ver, non é máis que unha caixa de texto. E por iso non sente aquí para ter algo dentro del neste momento. E polo que estou indo simplemente para pechar a etiqueta que barra dereita na marca propia. E entón eu vou ten outra entrada. Tipo de entrada é igual a enviar. E entón eu vou pechar un regalo tamén. 

E agora eu vou volver aquí. E xa vemos, aínda que moi feo, eu teño ten os comezos de miña propia páxina de busca aquí. De feito, déixeme probar limpar iso un pouco. Acontece que o entrada aquí, podo ter outro atributo chamado espazo reservado. E eu podería ver algo como palabras clave, ou, máis especificamente, consulta a q. 

E teña en conta, agora, eu teño este tipo de texto gris que desaparece tan Así que eu comezar a escribir, pero pode ser algo xa viu noutras páxinas web. Realmente non me gusta do botón Enviar. Entón, eu estou indo realmente para dar a Botón enviar un valor de investigación. E agora, se eu actualizar, teña en conta que meu botón pasa a ser o nome de busca. Vostede sabe, eu realmente non como logotipo aquí. Entón xerador Google Font. 

Quero apimentado este aínda máis. Investigación de xeito CS50. Déixeme crear o meu propio logotipo. Isto parece bo. Entón, agora déixeme gardar esta as-- imos alí. Onde é que vai? Non. Aceptar. Perdeu. Gardar como. Navegadores estúpido. Stand by, imos solucionar isto dunha vez por todas. Alí imos nós. Todo ben. Desculpe. Día de descanso. Agora, este é funky. Saír da pantalla enteira. Todo ben. 

Agora, como unha normal, persoa, gardar imaxe como. Logo.gif. Agora eu estou indo a ir a CS50IDE e Vou coller o logotipo, Vou arrastralo ata meu directorio de orixe sete, arquivo xa existe, eu estou ben con iso. Entón, eu estou indo a substitúe-lo porque eu xa tiña. E agora como fago para librar diso? 

Imos adiante aquí e facer fonte de imaxe é igual a logo.gif. Peche esa. Salva. E agora, se eu volver á miña investigación páxina, agora está mirando moi bo. Todo ben, polo que non ten ben feito nada útil. De feito, déixeme probar a buscar para un gato e ver que pasa. Cats. Droga. Non só traballar, aparentemente. Entón, cal é a peza clave o que falta aquí? 

Seguro, mesmo se non sabe nada de HTML, Comece marcando o formulario de teléfono e eu dixen a el como obter entradas, dáme unha caixa de texto e un botón de enviar, o anaco aparentemente falta? Supoña que queremos realmente chegar esta cousa funciona correctamente. O que necesitamos facer? Temos unha necesidade de aplicar o back-end base de datos ou o buscador propio, e que vai levar un todo moito tempo, a verdade. 

Entón lembre o que fixemos a última vez. Entón, se buscar algo en Google e con antelación desactivado, recall, procura instantánea. Entón deixe-me apagar isto de xeito que este realmente compórtase como un navegador de escola máis vello, se eu agora buscar algo como gatos, recordar que a URL parece. É moi enigmática. Pero incorporado alí, recall, é a procura barra. Punto de interrogação q é igual a gatos. 

E iso paréceme dar- unha morea de resultados de busca. Entón vostede sabe o que eu vou facer? Eu estou indo a prestar Google por só un minuto. Vou pasar por riba aquí e eu vou dicir que esta forma de acción ou destino, por así dicir, debe ser literalmente Google. E o método que eu quería para uso será chegar. 

Entón, o que é acción? A acción é estrañamente nomeado, pero iso só quere dicir que está indo a xestionar a acción desta forma? Cando prema en Buscar, onde Se o resultado ir? E se eu agora volver á miña forma aquí e recargar miña páxina web e agora buscar algo como o can, teña en conta agora Teño re aplicado Google. Non? 

Se eu queira buscar algo máis, traballa para non só os cans, el tamén funciona para gatos. Tamén traballa para CS50. E ben, este é só baixo whelming, non é? Todo ben, pero realmente funciona. Entón, o que está realmente a suceder? Entón eu ensinei meu navegador, utilizando HTML, para ter a entrada do usuario e realmente enviar esta entrada para un servidor remoto mediante HTTP. 

E por meu navegador entende HTTP, realmente construír a URL para que o Eu acabar máis no meu navegador, teña en conta o que pasa cando eu procurei para o can. Se eu faga clic en Buscar, teña en conta que a URL cambia como eu pretendía google.com/search~~V a consulta é igual a can. E iso é porque a forma sabe, porque o método é obter, simplemente anexo-lo para a URL alí. 

Agora, estas páxinas web aínda son feos. Entón, imos introducir outra peza de sintaxe, se podemos hoxe. E iso é algo coñecido como follas de estilo en cascada. Entón deixe-me dar un ollo este exemplo aquí e mira se é que podemos inferir o que está pasando. Este é CSS0.html. E é aí onde as cousas estar un pouco feo. Porque, desgraciadamente, no mundo da web, HTML por si só non pode facer todo. E por iso, se quere estilizar súa páxina web, realmente precisa concentrarse no estética dunha forma diferente. Entón, aquí, eu teño o corpo do meu sitio principal no interior do cal é unha gran div. E un div só significa división. Entón, é como un parágrafo, pero non ten a mesma semántica dun parágrafo de texto. 

Isto só significa que o navegador, vén aquí unha gran rexión rectangular da miña web páxina, quero tratar con isto especialmente. Agora, liña 21 é onde que comeza div. E só dar un palpite. ¿Que é o efecto da liña 21 no resto do contido da páxina? Centralizando-a. Iso é todo. Entón, nós non vimos unha forma de de feito, a centragem texto. 

En realidade, o meu buscador, A diferenza de Google real, foi todo xustificado á esquerda. E agora na liña 21, eu digo, hey navegador, crear unha división da páxina. Dáme un gran, rectángulo invisible. É así que eu quero pensar sobre a páxina web. E entón estilizar lo deste xeito. Dentro destas citas, agora, é unha segunda lingua que presentou hoxe chamados de follas de estilo en cascada. Afortunadamente, iso tampouco é unha linguaxe de programación, Polo tanto, é moi limitada na súa sintaxe, pero tamén moi limitado na súa funcionalidade Tendo en conta que é todo sobre HTML marcando-se os datos da páxina web ea estrutura dunha páxina web. CSS é xeralmente sobre o última milla, a estética, obter o tamaño ea cor eo colocación exactamente correcto nunha páxina web. E, de feito, está formada con pares de valores clave. 

A propiedade como esta, texto aliñar, seguido de dous puntos, seguido polo valor de dita propiedade, que, neste caso, é o centro. E agora observa-lo pode aninhar isto. Se eu quería que todo o que Eu destacou a ser central, é por iso que eu teño liña 21 e a liña correspondente 31. Pero supoñamos agora quero dicir John Harvard, Benvido ao meu páxina principal. 

Copyright symbol John Harvard. E supoña que quero o primeiro de esas liñas a ser moi grande. 36 píxeles. Entón, iso é un tamaño decente. E eu quería que o seu peso de ser ousado. Pero, a continuación, a continuación que, Quero texto menor. E a continuación diso, quero texto aínda menor. Desculpe. Hoxe parece un día de descanso. 

Entón, agora, o que estou facendo para expresar iso? Aquí na liña 22 é un embutido div ou div aniñada, se quere. Tamén ten a súa propia marca de estilo. Eu especificar un tamaño de fonte de 36. Eu especificar espesor da fonte de negra. Aquí embaixo, eu só especificar 24 píxeles. E, finalmente, na liña 28, eu especificar 12. Entón, así como unha comprobación de sanidade rápida e como unha lectura humana presente, que as palabras na pantalla son realmente vai ser valente? As liñas son realmente valente? 

Só John Harvard. Non? Porque así como liña 22 di hey navegador, aquí é unha división da páxina. Fai-lle o tamaño da fonte de 36 puntos. Faga o peso negra. Así que chegar ao tag final correspondente ou etiqueta pechada na liña 24, Isto significa que, hey navegador, deixar de facer todo o que está facendo. E noten que ser claro, aínda que A liña 22 ten todos estes atributos como estilo, cando pechar a etiqueta na liña 24, só mencionar o nome do tag. 

Non repetir o estilo de texto ou calquera cousa que está dentro destas citas. E por iso, se eu ollar para iso agora no meu navegador, imos dar un ollar para o resultado final. Deixe-me ir fronte a este ficheiro, que é CSS 0. E aínda é moi sinxelo, pero quedando moi interesante. Pero resulta que hai outras cousas que podo facer aquí, e correndo o risco de facer esta completamente hediondo, notar aquí que, na miña corpo da miña páxina web, Podo facer algo divertido como bg ou cor de fondo. 

E rápido, o que é a súa cor favorita? Verde oín. Todo ben. Entón, agora, se eu acertar recargar agora, temos unha páxina web verde. Todo ben, entón iso non é malo. E agora, se eu queira facelo realmente legal, podo facer a cor do meu texto incluso vermello. Entón imos ver o que iso parece. Agora que está mirando moi bo. E aquí debaixo, se realmente quere xogar con alguén ou se quere ser unha desas persoas que tenta inducilo a visitar un sitio páxina porque enganado Google en pensar que hai un grupo enteiro de palabras clave como-- veremos, actualizar. Para onde foi? E non nos TI. Todo ben. Entón eu digo isto como un aparte, nós imos falar sobre isto nalgunhas semanas cando falamos de seguridade, se realmente acios enteiros de embutir palabras clave nunha páxina web, aínda que eles non son visibles para un humano, alguén como Google, por suposto, Aínda pode realmente atopar este. Todo ben, entón iso é moi hedionda moi rapidamente. 

E, de feito, non é todo que moi diferente da miña propia web páxina como estudante de graduación, que Comecei buscando en torno a atopar versións anteriores dos meus vellos sitios. Foi moi malo. En realidade, eu penso un pouco antes da clase. Pero hai peor aí. Este, ao parecer, era meu páxina principal de volta en 1996. Ao parecer, eu penso que era apropiado para pedir á xente o seu nome Antes de que puidesen realmente ver a miña páxina web. 

E entón eu mostre a eles algo estúpido, probablemente. Vou cavar-se máis para a próxima vez. Pero, por agora, imos considerada un pouco de deseño. Nós falamos sobre estilo. E esta páxina, ata agora, e máis todo o que escribín é moi limpo estilisticamente. Pero o que dicir de deseño? Así, hai unha morea de redundancia en que eu veño facendo aquí. 

Eu mencionar a palabra cor en un par de lugares. Eu mencionar o tamaño da fonte en un par de lugares e valente nun par de lugares. E, fundamentalmente, son co mesturando-se dúas linguas. Teño HTML cos meus etiquetas e miña atributos e, a continuación, de súpeto, entre comiñas, eu teño a segunda lingua hoxe chamado CSS, que á súa vez, é só estes pares de valores clave ou esas propiedades separados por dous puntos. 

Acontece que moi como en C onde nós Pode comezar a fatorar algún código en arquivos de cabeceira, para que poidamos facer o mesmo en HTML. E un paso que é como segue. Teña en conta que esta versión, é CSS1.html Estruturalmente a mesma páxina web exacto. Entón, eu teño unha morea enteiro de divs, pero esta vez, eu teño se librar do invólucro div como vai ver. 

E eu dei estes tres divs superior, media e inferior, IDs exclusivos. Isto é bo, porque por dando esas divisións dos identificadores únicos de páxina, I pode referencia a eles noutro lugar. Onde? Ben, deixe-me rolar para arriba. E, de momento, a calquera hora nós miramos á cabeza dunha páxina web, o que é a única etiqueta que tivemos en o xefe dunha páxina web? Un pouco máis alto. Só o título ata agora. Pero resulta que hai algunhas outras cousas pode pór alí, un dos que se chama tag estilo. Entón, hai pouco, nós miramos nun atributo de estilo. Acontece aí é unha marca de estilo. Pertence no interior da o xefe dunha páxina web. E agora entender o que estou facendo. Teño dentro deste tag estilo a continuación. Estou literalmente mencionando na liña 20 do nome dunha marca que quero para estilizar. 

Entón eu teño chaveta aberta e pechou chaveta. Entón similares en espírito á C, pero De novo, isto non é unha función, este é só un detalle sintático aquí. E despois, claro, digo o navegador, hey navegador, facer todo o corpo da páxina ter un aliñamento do texto do centro. E entón isto está dicindo o seguinte. Hey navegador, se ve unha páxina HTML elemento ou etiqueta na páxina que ten un identificador único de arriba, de xeito que o símbolo de hash aquí significa só idea orixinal de arriba, vai adiante e facer o seu tamaño de fonte 36 eo seu peso negra. 

Hey navegador, un elemento cuxa ID é medio, facelo 24 píxeles. E hey navegador, se ve unha idea de fondo, facelo 12 píxeles. O efecto no extremo é o sam. Se eu entrar en CSS 1, o A páxina parece o mesmo. Pero estamos un paso na dirección un deseño un pouco mellor. Déixame volver aquí para CSS2 para ver o que máis eu fixen. 

Agora, a páxina é realmente, realmente limpo. En realidade, eu podo atender a todas as o contido dunha páxina aquí. Pero o novo tag teño introducido, obviamente? Facer a conexión. E non é o mellor nome para un tag, porque non é unha ligazón cara que a coñecemos, pero iso significa unha ligazón nalgún outro ficheiro. Este é tipo de como afiado incluír en C. 

Esta é o xeito en HTML para dicir hey navegador, ir buscar o contido de o ficheiro chamado css2.css. A relación, para min, é que é unha folla de estilo. E, de feito, é iso que a do S de en CSS medios. Isto é unha folla de estilo. É só o arquivo de texto que contén unha morea de propiedade. É unha morea de estilos que quere aplicar a unha páxina. 

E así esta é, ao parecer, referíndose a un segundo ficheiro. E se eu abrir ese, CSS2.css, entender que todo o que eu fixen é copiar e pegar todo desta con esta imaxe. E agora, aínda que nunca codificado isto antes, considerar só co sombreiro enxeñaría proverbial en, por que iso é unha mellor deseño probablemente? Factoring para fóra aquelas propiedades CSS, poñer-los no seu propio arquivo. Aínda que resolveu este problema como hai cinco minutos na primeira versión. 

Non teña mellorado o páxina estilisticamente, este é só mellor proxecto nalgún sentido. Por que pensas? Si. Máis flexible como? Si. Entón, se quere ir para atrás e cambiar as cousas, agora, ten un lugar onde pode cambiar as cousas. E, de feito, para algo como conxunto de problemas de sete, onde imos aplicar un web de negociación de accións, que terá un todo grupo de páxinas. E sería realmente irritante se decide, hm, Realmente non me gusta de 24 píxeles, quero que sexa 28 píxeles ou lixeiramente maior. E entón ten que facer un global de localizar e substituír ou abrir todos os ficheiros do seu sitio simplemente para realmente cambiar un valor. Ao fatorar estes estilos nun lugar central Agora podes abrir un arquivo de texto en CS50IDE en calquera programa, mudalo, garda-lo, e feito. Vostede propagada aqueles cambios en todos os lugares. E que sería a mesma nun ficheiro punto h ben. Así dúbidas, polo tanto, medida sobre esta sintaxe? Todo ben, entón temos feito todo o que parece excepto realmente aplicar hyperlinks. E entón imos ir adiante e facelo. Deixe-me ir adiante e crear un novo ficheiro aquí. Vou chamalo link.html, introduza o código de hoxe. 

E eu vou facer aberto soporte tipo doc html. Como un aparte, esa cousa no top, esta declaración de tipo doc, é a única que é estraño co signo de admiración. Vostede só ten que facelo alí e significa que estamos a usar HTML versión 5. Versións anteriores de linguaxe tivo moito máis tempo cadeas que necesitas para poñer alí. Entón, aquí está un exemplo chamado enlace. 

Eu teño un corpo de miña páxina web aquí. E aquí, a é igual a href digamos HTTP://www.disney.com e meu sitio favorito, imos dicir. Todo ben, entón un moi , Páxina agradable inocuo. Se eu agora vai meu directorio list aquí e abrir link.html, debemos amiga texto. 

E, de feito, este é o lugar onde o H en HTTP vén. Protocolo de transferencia de hipertexto é sobre a transferencia de texto que ten hiperlinks a outros recursos. E, de feito, aquí é o familiar, se retro, azul enlace que, se premendo, vai realmente me levar a Disney.com. Agora, oh, que está saíndo en breve. Todo ben, entón agora, cales son algúns das implicacións disto? 

E, francamente, o mundo comeza para obter un pouco máis familiar e tamén un pouco máis asustado pero tamén un pouco máis auto defendíbel unha vez que comezar para entender isto. Porque as probabilidades son, algúns de vós, se ir a través da súa carpeta de spam de Gmail ou mesmo súa caixa de entrada, probablemente obtido algún tipo de correo-e que está lle pedindo para cambiar a súa password quizais ou que comprobar súas credenciais PayPal ou outros adornos. 

E, de feito, pode recibir algo que di como, prema aquí para axustar o teu contrasinal PayPal. E agora, repare, se Isto non é Disney.com pero como badplace.com e actualizar, teña en conta que o texto aquí puidese dicir calquera cousa que sexa. E, de feito, este é só palabras. Por que non podo realmente ser super mal intencionado e dicir http://www.paypal.com. 

Prema aquí axustar o teu PayPal contrasinal e agora recargar. Isto parece moi lexítimo, non? Quero dicir, eu non prema unha mensaxe que só di iso. Pero teña en conta a dicotomía aquí. Di www.paypal.com, e, de feito, agarde un minuto, sabemos que quere a s para a seguridade. Entón, agora, ir www.paypal.com HTTPS, pero se nunca fixo iso antes, Non adquira o hábito de paira sobre pequenos enlaces aquí. E é difícil ver na pantalla existe, e non é todo o que máis fácil aquí. Pero ata aquí en o pequeno recuncho fai o navegador realmente dicirlle que imos para badplace.com en vez de Paypal.com. Agora, a onde estamos indo con iso? Todos os exemplos que fixemos hoxe, temos codificado e ingresaran manual. A web é incrible desinteressante cando duro codificar súas páxinas web para que o contido é estático e nunca cambiar. Por suposto, todo o noso sitios favoritos hoxe, se é o Gmail ou Twitter ou Facebook ou calquera número de outros son dinámicas. Están cambiando en resposta á entrada do usuario así como os resultados de busca de Google. 

E así o mércores, o que facemos é deixamos HTML e CSS introdución detrás de nós e nós tomamos por certo que agora coñecela e introducimos unha nova linguaxe de programación chamado PHP, que lle gusta C, vai dar o poder de realmente crear programas que se xeran saída. Neste caso, imos empregar PHP para xerar dinamicamente web páxinas usando esta nova linguaxe. Entón, máis sobre iso o mércores. Velo entón. 

[Música tocando]