Daven FARNHAM: Hoy en día, voy a hablar un poco sobre HTML, HyperText Markup Language. Usted ve HTML en todas partes estos días. De hecho, si estás viendo esto vídeo en un navegador, tienes ver HTML en estos momentos. HTML no es un lenguaje de programación, más bien, es un lenguaje de marcas utilizado por navegadores web para hacer las páginas en el Internet. 

Así que usted puede preguntar, ¿cómo es exactamente está escribiendo una página web en HTML diferente de escribir un programa en una programación lenguaje como C? Bueno, C es un lenguaje con muy estricto reglas sintácticas que necesita ser compilado antes de que pueda funcionar. Si alguna vez te has olvidado de incluir una punto y coma al final de una sentencia en el código C, ya sabes lo que estoy hablando sobre en lo que respecta a la sintaxis estricta. 

Navegadores Web, sin embargo, son un poco más perdonar cuando se trata de HTML. Incluso si su HTML no es sintácticamente correcta, la página puede estar todavía mostrado por un navegador, pero puede ser que No mire como se pretendía. Por lo tanto, siempre es mejor seguir las reglas. La mejor manera de conseguir una intuición acerca de cómo funcionan las cosas es ir a través de un ejemplo. 

Así que lo que tenemos aquí es un básico anteproyecto para una página web. Usted probablemente ha notado un montón de cosas entre paréntesis angulares. Bueno, esos son sólo etiquetas. Etiquetas básicamente informan los navegadores web que, bueno, algo está llegando a su manera. Recuerde, sin embargo, cada vez que se abre un etiqueta, es necesario cerrarlo una vez que esté hecho de usarlo. 

Así, por ejemplo, abro una sección de código abierto con cuerpo de soporte, corchete de cierre. Luego agregar un poco de texto, en este caso, mi primera página web, entonces cuando fui a cerrar esta sección, utilizo casi una etiqueta idéntica excepto que esta vez con una barra diagonal antes de cuerpo. En general, este es el formato que está va a utilizar cada vez que va a abrir y el cierre de las etiquetas. En conjunto, una etiqueta abierta y una etiqueta de cierre componer lo que se llama un elemento. 

Si nos fijamos en la primera línea, se le ver un signo de exclamación seguido de DOCTYPE html. Esto es realmente sólo contando su navegador que el archivo es una página web escrito en HTML. El tag HTML esencialmente dice, aquí viene algo de HTML. Entonces tenemos una etiqueta de la cabeza con una etiqueta de título en su interior. La etiqueta de la cabeza se puede pensar en como que comprende un código HTML que viene de la mayor parte de su web la página de contenido real. 

En general, se pone el título de su página web aquí, aunque hay algunos otras etiquetas que pueden aparecer aquí también. Luego viene el cuerpo de su página web, la carne real y los huesos de su sitio web. En nuestro ejemplo, acabamos de poner un sencillo frase, mi primera página web, que, si nos quedamos sin nuestro sitio, se verá un poco de algo como esto. Nuestra página web no es demasiado raro, pero no te preocupes. Vamos a darle sabor pronto. 

Así que el HTML anterior, le daremos una muy plantilla básica para una página web, nada especial, sólo el esqueleto. Pero si estoy creando una página web, ¿qué pasa si quiero agregar un foto de, por ejemplo, a mí mismo? Bueno, yo puedo hacer eso. Hay un par de maneras de añadir imágenes a su sitio. Si la imagen está en la misma carpeta que su archivo HTML, se puede enlazar con el imagen a través del camino como éste. 

Usted abre con una etiqueta de imagen seguido por en el atributo Alt en el fuente de la imagen. El valor del atributo Alt es sólo un texto alternativo en caso de que un usuario no puede ver la imagen. Alternativamente, también puede enlazar a imágenes a través de una dirección URL completa, les gusta esto. Ahora, ese sitio web en realidad no existe, pero si había una imagen de yo en esa dirección, podría usar la dirección de origen para incluir su imagen en mi página web. De cualquier manera, usted termina con una gran sitio más bonito, algo como esto. 

Bueno, eso es muy bueno, pero yo tipo de querer algún texto aquí también. Así que vamos a añadir algo super sencillo por encima de la imagen, al igual que la cabecera. Todo lo que he hecho hasta ahora es utilizar el encabezado etiqueta, H1, y un salto de línea de etiquetas, br. La etiqueta de cabecera hace que el tipo de letra un poco poco más grande y más prominente. La etiqueta de salto de línea, por otra parte, es una especie de fresco. A diferencia de la mayoría de las otras etiquetas, que no tiene una etiqueta de apertura y cierre de descanso, justo El que se muestra arriba. Esto se debe a rotura no tiene contenido y por lo tanto es, un elemento vacío. 

Los elementos vacíos como este, puede abrir y cierran simultáneamente simplemente incluye una barra diagonal en el final de la declaración inicial. Así que ahora mi sitio web se ve un poco algo como esto. Mejor, pero es como que se siente como un callejón sin salida. No hay otro lugar para ir a un lado desde esta página principal. Bueno, vamos a arreglar eso por incluyendo un enlace. 

Lo que voy a hacer aquí es utilizar un atribuir denotado por A y hacer el imagen un enlace a, digamos, CS50 TV. De esta manera, cada vez que alguien hace clic en mí, su navegador será dirigido a otra, probablemente más , la página web de utilidad. He tenido que reducir al mínimo el tamaño de la texto un poco porque nuestra página web es cada vez más avanzada. Pero es de esperar, sigue siendo clara. Mi sitio web se ve exactamente lo mismo sólo ahora, cada vez que haga clic en la imagen, mi navegador se abrirá otro ficha de la página web CS50.tv. 

Por último, vamos a decir que voy a estilo este sitio web después usando CSS. CSS es lo que se conoce como hoja de estilos en cascada. Y proporciona básicamente una eficiente forma de editar y estilo bloques similares de código. Quiero empezar a organizar mi código HTML para hacen que sea más fácil de peinar después. Aquí, he creado dos tipos diferentes de identificadores para ayudar a organizar mi código. He usado el atributo ID dentro de una división o etiqueta div, y he usado un Atributo de clase en el interior otra etiqueta div. 

Atributos id y class funcionar de manera similar. La única diferencia es que sólo puede tener un elemento, el ID específico, pero cualquier número de elementos puede compartir una clase. Así, por ejemplo, puedo usar la clase imagen varias veces, pero no puedo crear otra división con la parte superior de identificación. Aunque no he entrado en CSS, otro idioma de uso común junto con HTML, una vez que empiezo un estilo mi código con CSS, puedo usar estos atributos de organización a la influencia la estética de mi página web. 

Todo dentro de la primera división tendrá estilismos similares o cualquier otro grupo de grupo de HTML que en el imagen de clase compartirá un aspecto similar. Esto es mucho más fácil que tratar de editar y las imágenes o bloques de estilo texto individualmente. 

Así que nos fuimos a través de los fundamentos de cómo para hacer una página web con HTML. HTML tiene un montón de otras características también que cuando se combina con otros idiomas como CSS y JavaScript, puede realmente hacen que las páginas se destacan. La mejor manera de sentirse cómodo con HTML es simplemente perder el tiempo con él, ver lo que funciona y lo que no. 

Mi nombre es Daven Farnham. Este es CS50. 

Así, por ejemplo, puedo usar la imagen de la clase - No, hay tantos atributos. Mi nombre es Daven Farnham. Este es CS 650. Quiero decir CSS. Este es CSS.