Introducción a HTML: construye un sitio de portafolios

1. Avance: En esta clase introductoria, estaremos haciendo un sitio web de portafolio de cuatro páginas con algunos de los aspectos más comunes un portafolio en línea que puede ser utilizado para una plétora de diferentes materias y profesiones. Vamos a desglosar qué contenido se necesita en cada página y cómo eso se traduce a nuestro código HTML. Al final de nuestra clase, tendremos un sitio web de cuatro páginas en el que se puede hacer clics con una página de inicio, una página de trabajo, y sobre página, y una página de contacto. Si no has escrito una línea de HTML o si necesitas un HTML de actualización, esta clase es perfecta para ti. Estaremos cubriendo HTML desde el principio, por lo que no se necesita ningún conocimiento previo. Ya sea que estés en un Mac o PC, todos son bienvenidos. Me aseguraré de guiarte a través de todos los pasos para conseguirnos desde la instalación de un editor de texto hasta guardar nuestros archivos y hasta aprender los conceptos básicos del HTML. No nos volveremos demasiado locos con una jerga de computadora de moda, pero me aseguraré de resaltar terminología importante que debes saber y cómo solucionar tu propio trabajo y encontrar respuestas a preguntas comunes cuando termine esta clase. 2. ¡Te damos la bienvenida a la clase!: Oh hola. No te vi ahí. No me importa. Apenas estaba haciendo un poco tarde leyendo sobre uno de mis temas favoritos, la Computadora Personal. Pero ya que estás aquí ahora, déjame guardar esto y empecemos a hablar HTML. En esta clase introductoria, vamos a estar construyendo un portafolio en línea de cuatro páginas. El sitio será HTML solo lo que significa que los bonitos estilos y colores van a venir en un día posterior, pero en esta clase, vamos a construir una base fuerte y robusta la cual te presentará el maravilloso impresionante mundo de HTML. Al final de nuestra clase, vamos a tener esta página web de cuatro páginas en la que se puede hacer clics con una página de inicio, una página de trabajo, una página sobre, y una página de contacto. Hablaremos un poco de los elementos comunes que estarán en cada una de estas páginas y cómo puedes usarlos para hacer tu propia página web de portafolio. Vamos a estar haciendo el sitio para Jon Arbuckle. Entonces, hablemos de cómo empezamos. 3. Cómo definir nuestro contenido del proyecto: A lo largo de este curso, crearemos HTML para un sitio web de portafolio de cuatro páginas, con algunos de los aspectos más comunes a un portafolio en línea que puede ser utilizado para una plétora de diferentes materias y profesiones. Vamos a desglosar qué contenido se necesita en cada página y cómo eso se traduce en código HTML. Encuentro que es mejor al crear un nuevo sitio tener una idea, algún contenido, y una dirección para lo que estamos construyendo, que podamos trabajar hacia una meta. Vamos a construir nuestro sitio web para que un cliente ficticio lo use como base para copia y estructura. Por lo que hoy, nuestro cliente es John Arbuckle. Estas son algunas cosas que sabemos de John. Es dibujante. Es dueño de un gato y un perro, y John se ha unido a muchas redes sociales para conocer conexiones profesionales y personales. John ha venido a nosotros porque quiere un portafolio en línea para exhibir su trabajo de ilustración y quiere ampliar su alcance social brindando alguna información sobre sí mismo y sus redes sociales. El primero que vamos a querer hacer es averiguar qué páginas necesitarán para nuestro sitio. Lo haremos creando un simple mapa del sitio. Si no has visto un mapa del sitio antes, está bien. Se ve un poco así. Cada cuadro representa una página en el sitio. Entonces, puedes ver que tienen una página de inicio, y sobre página o página de qué es nueva, y algunas otras páginas debajo de esas páginas. El mapa del sitio nos ayudará a guiarnos a medida que construimos nuestro sitio para asegurarnos de que tenemos todas nuestras páginas cubiertas. Se puede crear un mapa del sitio en un programa de diagramación como en el Amigraph o en Photoshop, o incluso con un bolígrafo y un papel. Para este sitio, vamos a configurar una muestra usando Gliffy. Este es Gliffy.com y sólo nos va a dar una manera rápida de empezar a dibujar. Entonces, vamos a empezar a dibujar ahora y va a cargar esto. Entonces, lo primero que vamos a querer en nuestro sitio es una página de inicio. Entonces, arrastraremos esto hasta aquí y diremos a casa. También vamos a necesitar una página para mostrar todo el trabajo de John, por las cosas para las que la gente va a querer contratarlo y así tendremos una página de trabajo. A continuación, vamos a querer compartir un poco sobre la personalidad de John, y un poco más sobre cómo es como persona. Entonces, haremos una página sobre. Por último, si a la gente le gusta John y su trabajo, vamos a tener una forma de que la gente se ponga en contacto con él, así que vamos a querer tener una página de contacto. Agarremos esta pequeña herramienta aquí para hacer una conexión con cada uno, y la página de contacto. Eso es un poco desigual y a veces no me preocupo por eso. Entonces, ahí vamos. Nuestro mapa del sitio está todo listo. Estas serán las cuatro páginas que construiremos para el sitio web de portafolio de John. A continuación, vamos a definir qué contenido va a estar en cada página, y lo haremos creando un esquema de contenido. Por contenido, estoy hablando de cosas como texto, imágenes, y videos o lo que sea que vaya a aparecer en las cuatro páginas del sitio. Voy a abrir un editor de texto para hacer esto. Pero de nuevo, si solo quieres agarrar un trozo de papel y un bolígrafo o cualquier bloc de notas que te guste, cualquier cosa que funcione mejor para ti. Entonces, claro que voy a necesitar esa página principal que mencionamos, y la página principal va a servir de bienvenida a los visitantes y un rápido escaparate de características del portafolio de John. Vamos a necesitar lo que vamos a llamar contenido de héroe, y el contenido del héroe va a tener algo como un breve lanzamiento de elevador o un veloz liner que la gente que venga al sitio sabrá de qué se trata. Entonces, en este caso, Jon Arbuckle, ilustrador y autor freelance. Y entonces también vamos a tener algún tipo de imagen grande, tal vez de un cómic o tal vez de otra cosa que describa a John. Una forma que a través de lo visual con el pitch del elevador, realmente logramos que los usuarios sepan de inmediato de qué se trata el sitio porque la gente valora su tiempo. Entonces, hagámosles saber de inmediato qué es. A continuación, vamos a querer tener una sección sobre los cómics web de John. Entonces, tal vez sólo tengamos un título y una descripción del texto para que la gente sepa que John escribe cómics. También tendremos un enlace allí para conocer más sobre los cómics. Y así no es como deletreas los cómics, así que arreglémoslo. Oye, ahí vamos. John también le gusta mucho el poker y tiene un CD de póquer a la venta, así que vamos a querer una imagen de eso, un nombre del CD, y un enlace a Amazon para comprar, para asegurarnos de que todos puedan conseguir su solución de poker. También querremos que los visitantes sepan que John está en Twitter, así que vamos a tener un enlace a la página de Twitter de John. También vamos a querer mostrar un testimonio de cliente, que la gente sepa que John es realmente impresionante para trabajar con. Entonces, mantendremos este dentro del Dr. Luiz Wilson sobre cómo es trabajar con John, y también vamos a querer tener ahí un enlace llamado a la acción. Entonces, algo así como, “Contrata a un John para que tu retrato de mascota necesite. Ponte en contacto”. También vamos a querer lo que llamo contenido de encabezado, y el contenido de encabezado son cosas como el logotipo y la navegación del sitio. El contenido del encabezado va a aparecer en cada página porque siempre queremos que la gente sepa en qué sitio están, y siempre queremos darle a la gente una forma de llegar a otras páginas a lo largo del sitio. Entonces, eso sostendrá nuestra navegación por el sitio. Similar a nuestro contenido de encabezado, vamos al contenido de pie de página, y eso aparecerá al final de cada página. En este caso, vamos a tener información de copyright sobre el contenido del sitio. A continuación se encuentra la página de trabajo, y en la página de trabajo, también vamos a incluir ese contenido de encabezado y pie de página, y también vamos a tener el título de la página, en este caso, funciona. Aquí es donde vamos a mostrar los cómics de la web de John. En este caso, tiene dos cómics que quiere mostrar en el sitio, las Crónicas Lasagna y Cat Town, y cada uno de esos tendrá una imagen, probablemente como el primer fotograma de un cómic para mostrar a los usuarios cómo es, y también vinculado al sitio externo de donde viven esos cómics. John no sólo hace cómics, así que también hace retratos. Entonces, queremos asegurarnos de que la gente sepa de eso. Entonces, incluiremos un ejemplo de dos retratos que ha hecho por sus clientes. Por último, no podemos olvidarnos de las mermeladas de John, así que asegurémonos de mantener ahí su CD que es lo mejor de Johnny Arps, junto con la imagen del CD, y un enlace para comprarlo en Amazon. A continuación, tenemos la página sobre y nuevamente tendremos el contenido del encabezado, el contenido del pie de página, otra página titulada, esta vez sobre. Pongamos ahí una imagen de John para que la gente sepa que es un chico de aspecto amistoso. Tendremos un par de párrafos de texto describiendo a John, algo acogedor y feliz, un poco sobre tal vez sus aficiones y su proceso a la hora de crear retratos y comentarios. Incluyamos también una lista de habilidades y servicios profesionales que ofrece John. Por último, tendremos nuestra página de contacto. Nuevamente, el contenido de encabezado o pie de página, el contenido del título de la página. Tendremos la dirección de correo electrónico de John, para que la gente pueda ponerse en contacto con él, y también vamos a mantener una lista de enlaces aquí a la presencia de John en redes sociales, gente pueda seguirlo o como él o cualquier otra cosa que la gente lo hace en Internet con las redes sociales de la gente en estos días. Se puede ver la estructura aquí no solo funcionará para el portafolio de John Arbuckle específicamente, sino de casi todos los profesionales, aunque no tengas CDs de póquer. Entonces, si quieres intentar usar tu información personal en lugar de John's durante esta clase, hazlo totalmente. Si te gusta seguir más de cerca lo que estoy haciendo en el video entonces usa los archivos de clase aquí y luego más adelante podrías probar algo en tu propia información. 4. Reunamos nuestras herramientas: Un editor de texto es un tipo de programa que se utiliza para editar archivos de texto plano. Podemos escribir HTML con cualquier editor de texto por ahí. Entonces, si solo quisiéramos seguir adelante y usar algo como Bloc de notas, y guardarlo como documento HTML, podríamos. También hay lo que se conoce como editores HTML. Los editores HTML son de manera similar editores de texto pero agregan funcionalidad extra. La funcionalidad que agregan es específica de cosas como desarrollo Web con cosas como resaltado de sintaxis, atajos de teclado, autocompletado, y más. Tienes muchas opciones de los editores de HTML por ahí, y te sugiero después de esta clase, que las revises, a ver si hay unas que te gusten más que otras. Algunas son pagadas, otras son gratuitas. Muchos de ellos tienen pruebas gratuitas, así que echa un vistazo antes de pagarlas. Para este curso, recomiendo comenzar con Sublime Text 2. mí me gusta mucho Sublime Text porque se puede descargar y evaluar de forma gratuita y también, está disponible para Mac y PC. Se trata de Texto Sublime 2. Actualmente también tienen una versión de Sublime Text 3, pero eso está en Beta. Entonces, sigamos adelante y solo usemos 2 por ahora, y luego vas a querer elegir en función del sistema operativo que estés usando. Ocurre que estoy usando OSX, así que voy a dar clic en eso, y la descarga sigue adelante y comienza. Cuando esté hecho, abrimos eso e instalamos. Una vez descargado, quieres abrir eso y luego en este caso, estoy en un Mac, así que solo arrastramos eso a mi carpeta de aplicaciones para instalarlo. deben seguir instrucciones de instalación similares en un PC. Lo siguiente que necesitaremos en cuanto a herramientas para el desarrollo Web es, un navegador moderno. A pesar de que puedes usar cualquier navegador, recomiendo encarecidamente usar Google Chrome. Estaré usando Chrome en esta clase, así que si quieres seguir con exactitud, recomiendo descargar esa. Tiene algunas grandes herramientas que podemos usar mientras creamos nuestro HTML. Otro gran navegador es Firefox. Entonces, si te gustaría también darle un tiro a Firefox, eso tiene cosas similares, características realmente agregadas como Chrome tiene, pero voy a estar usando Chrome para el resto de esta clase. Si no te gusta ninguno de esos, siéntete libre de usar Opera, Safari o Internet Explorer, y solo tal vez tengas que hacer algunos googles extra para encontrar algunas herramientas para usar. Lo último que vamos a necesitar para empezar en esta clase es, vamos a crear una carpeta para guardar todos nuestros archivos de clase. No queremos ver cosas por todo el lugar y perderlas a todas. Entonces, asegurémonos de que mantengamos las cosas bien y organizadas. Entonces, por ahora, solo voy a hacer esto en mi escritorio, y lo voy a llamar jon-arbuckle-site. Si quieres guardarlo en tu escritorio, puedes hacerlo. Otros lugares comunes estarían en tus documentos, o si tienes una carpeta de sitios, esos son probablemente lugares más apropiados para conservarla. Por ahora mismo, durante esta clase, lo mantendré en el escritorio y luego lo trasladaré a un lugar más apropiado después. Te darás cuenta de que nombré a mi sitio jon-arbuckle-site. Realmente me gusta usar guiones para separadores de palabras. Otras personas usan espacios o guiones bajos. Los espacios se pueden poner un poco difíciles porque a veces, los navegadores o tu sistema operativo pueden leer eso gracioso. Si alguna vez has visto esos como por ciento 20 en URLs, eso puede suceder. Otras cosas, a otras personas les gusta usar guiones bajos. Los subrayados son bastante geniales. A veces me cuesta leerlos porque se ven como un espacio. Entonces, por eso, para mis convenciones de nomenclatura, suelo usar guiones, y guardo las cosas en minúsculas. Si algo te funciona mejor, sin duda hazlo, pero te recomendaría apegarte a una sintaxis cuando estás nombrando cosas. Eso solo mantiene las cosas un poco más organizadas, y si alguna vez trabajaste con alguien más, podrás decir cuál es tu convención de nomenclatura para que sigan eso. Entonces, todo el mundo estará trabajando en la misma página. Después de crear esta carpeta para guardar todos mis archivos, voy a abrir eso, y una cosa que sé que voy a tener en mi sitio van a ser algunas imágenes. Entonces, voy a seguir adelante y también hacer otra carpeta para imágenes. Voy a llamar a esta carpeta img. Yo lo llamo img porque es un poco más corto que escribir la palabra completa para imágenes y todavía es realmente fácil leer lo que es eso. Si ves img, sabrás que estoy hablando de imágenes. Probablemente no le llamaré nada complicado. Si lo nombra yo, alguien podría no saber qué es eso. Si le dices algo como Fotos Go Here, eso es realmente largo, y no quieres escribir eso todo el tiempo. Entonces, es agradable mantener tu nombre de carpeta corto y dulce pero también para asegurarte de que sea legible para ti y para otras personas para que sepas fácilmente qué va dentro de esa carpeta. En este punto, si crees que tendrás videos en tu sitio, también puedes hacer una carpeta para videos. Entonces, para ahí, puedo llamar a videos. Si sabías que querías incluir un PDF, tal vez quieras hacer una carpeta para PDF o para otro tipo de medios, todas estas son sugerencias posibles. Ahora mismo, sólo voy a tener imágenes. Entonces, dentro de mi carpeta jon-arbuckle-site, voy a tener nuestra carpeta img images. Entonces, eso concluye nuestra primera lección. Después de esto, vas a querer seguir adelante y crear el inscrito tu Sitio Web que contenga las páginas que van a conformar tu portafolio, crear un esquema de contenido para el texto y los medios que aparecerán en cada página. Recuerda, si quieres intentar hacer un sitio para ti mismo en lugar de Jon Arbuckle, ve totalmente por él o prueba ambos al mismo tiempo, con lo que te sientas más cómodo. También quiero reunir activos para el proyecto. Esto incluye todas las palabras, imágenes, videos, cualquier cosa por el estilo que te gustaría incluir en nuestro sitio de portafolio. Por último, vamos a querer descargar todo el software y las aplicaciones necesarias para crear nuestras páginas HTML. Entonces, una vez que lo tengamos todo hecho, solo podemos seguir adelante y empezar a escribir HTML. Una vez que hayas terminado con todo eso, empecemos la lección dos. 5. ¿Qué es HTML?: ¿ Qué es HTML? Bueno, HTML significa lenguaje de marcado de texto hiper. HTML es el principal lenguaje de marcado para crear páginas Web que se muestran en nuestros navegadores Web. la misma manera que algunos de nosotros leemos inglés o español, es de la misma manera que los navegadores pueden leer y descifrar el lenguaje del HTML. HTML se originó con Tim Berners-Lee sobre el CERN como una forma de que la investigación comparta papeles e información entre sí. Ahora podemos hacer eso y todos los videos de gatos que alguna vez podríamos soñar. HTML a menudo se empareja con cosas como JavaScript y CSS, o hojas de estilo en cascada, con el fin de hacer una experiencia web completa, aplicación web, página web en Internet. Entonces, HTML es la base de nuestras páginas y lo que usaremos para crear todos nuestros sitios. El tipo de lo que llamaremos reglas de HTML está definido por la especificación HTML. La especificación HTML es creada por el W3C. W3C es un grupo de personas inteligentes que le dicen a los navegadores cómo deben estar leyendo HTML. Entonces, la especificación HTNL 4 es algo de lo que podría haber oído hablar y se convirtió en una recomendación en 1999, hace bastante tiempo, pero se ha mantenido fuerte y verdadera. Básicamente, dice, cada elemento cómo debería leerlo el navegador. Podría haber escuchado algo llamado HTML5. HTML 5 es una especie del nuevo borrador de HTML 4. Agrega algunos elementos nuevos y nuevos significados para esos elementos. HTML 5 está lleno de cosas realmente geniales que construyen encima de la base fuerte que HTML 4 nos dio. Algo a tener en cuenta es que HTML 5 actualmente no está finalizado. Entonces, si estás echando un vistazo al sitio HTML 5 aquí, verás que se trata de un trabajo en curso. Check out el borrador del editor en su lugar. Entonces, si seguimos adelante y miramos el borrador HTML para esto. Entonces, esta es la página para el borrador de HTML 5 y notarás que aquí está en rojo diciéndote que, “Cuidado, esto es sólo un borrador”, lo que significa que no es definitivo y que las cosas podrían cambiar. Entonces, lo que esto significa es que algo que un elemento puede significar ahora, en un año, alguien puede decidir que debe ser algo diferente hasta que se convierta en un documento finalizado. La buena noticia es que aprender las cosas que aprenderemos como parte de HTML 4 nunca será un desperdicio. Todo lo que estaremos cubriendo en HTML 4 también está incluido en HTML 5, lo que significa que debes aprender todos los elementos que estaremos discutiendo y luego aún podrás usarlos si decides usar HTML 5 o cuando se convierta en un documento finalizado. El HTML es parte de lo que comúnmente denominamos desarrollo front-end. Si buscas desarrollo front-end, encontrarás algunas respuestas diferentes para lo que eso significa exactamente. Muchas veces, verás front-ends emparejados con cosas como HTML, que estaremos hablando hoy, CSS y JavaScript, y se puede ver eso en algunas de estas imágenes handy-dandy que la gente hace por ahí. También puedes ver que a veces nos referimos a eso como marcado, estilo y funcionalidad o contenido, presentación y comportamiento. Entonces, estas son cosas de las que generalmente se habla a la hora de hacer el front-end de un sitio web, y el front-end como mencionado se basa en el marcado HTML que estaremos creando. Entonces, ¿qué aspecto tiene el HTML? Bueno, una de las cosas que realmente tiene el HTML es que somos capaces ver la fuente de cualquier sitio web por ahí y ver cómo es su HTML. Entonces, lo que eso significa es, lo llamamos el código fuente HTML o fuente de la página y eso es lo que compone el contenido o HTML de un sitio web y podemos ver esto por casi cualquier cosa. Entonces, por aquí en HuffPost Celebrity, si quisiéramos ver una fuente de esta página, podríamos yendo a “Ver”, “Desarrollador”, “Ver Fuente”. Cuando haga clic en eso, verás que aparece este código y en este momento, podría parecer un poco confuso, pero verás que se trata de código HTML. Podemos hacer esto para otros sitios, como, stuffonmycat.com. Podemos decir: “¿Me pregunto cuál es el código fuente de esto? Entonces, de nuevo podemos ir a “Ver”, “Desarrollador”, “Ver fuente” en Chrome, que también es un Comando-Opción-U para un atajo. Se puede ver esto definitivamente es un poco difícil de leer. El código es una especie de minimizado juntos, por lo que realmente no podemos ver los espacios, pero este es código HTML. O si pinchamos sobre Reddit, podríamos ver lo mismo para Reddit. Entonces, de nuevo, si estoy usando un Mac en Chrome, puedo hacer Comando-Opción-U y ver la fuente, y de nuevo, aquí está la fuente para eso. Puedo seguir adelante y abrir cualquiera de estas páginas como un Baby liger jugando con su mamá adoptiva. Sí, por favor. Entonces, aquí, puedo navegar por las fotos o puedo ser como, “Wow, me pregunto de dónde sacaron estas fotos. Déjame seguir adelante y mirar la fuente”. Entonces,” Ver”, “Desarrollador”, “Ver fuente”. Y aquí, podemos ver que este está empezando a ser el HTML para la página. También tenemos una herramienta llamada Inspector Web, y cómo usamos eso es haciendo clic derecho en tu control, haciendo clic en “Elemento”, y verás que aparece este menú contextual, y verás aquí mismo, dice, “Inspeccionar Elemento”. Entonces, voy a seguir adelante y elegir eso y luego verás que aparece este marco. Lo que hace este marco es que nos muestra todo el HTML en la página al igual que cuando vimos fuente, pero podemos ir por y expandir y colapsar estas secciones y echar un vistazo a lo que se está escribiendo HTML para obtener esto elemento en la página que estamos viendo. Si estás usando Firefox, hay una herramienta similar. Entonces, aquí estoy en Firefox, y lo mismo, y puedo controlar o hacer clic derecho, y de nuevo, verás inspeccionar elemento. Entonces verás aquí un navegador muy similar, un poco diferente Chrome, este es gris oscuro, pero además de eso, puedes ver que este es el HTML que se está escribiendo para escribir esto y se destaca con este línea poco punteada. Si estás usando algo como Safari o Internet Explorer, esos también tienen herramientas de desarrollador para que los uses, y si no, de nuevo, aquí está Firefox, y luego aquí, está en Chrome. En el siguiente video, vamos a echar un vistazo más profundo a lo que significa exactamente todo este HTML y ver cómo realmente lo está leyendo el navegador. 6. Etiquetas HTML y elementos comunes: En la última lección, echamos un vistazo a cómo podemos ver la fuente. Hagamos eso de nuevo aquí mismo, así que este es Jennlukas.com y este es mi sitio y verás que hay una imagen grande, algunos textos, y más texto, un formulario de contacto, y unas cuantas columnas llenas de enlaces, y tú también verá la información de derechos de autor en el área de pie de página. Veamos la fuente para esto, algunos de ellos podrían parecer galimatías ahora mismo, y algunos de ellos en realidad pueden parecer bastante legibles. Podrían ver cosas como este desarrollador de front-end alto, afinado, aficionado a los estándares, y decir: “Espera eso me parece familiar, lo vi aquí Hola, afinado, a los standards-lovin', desarrollador front-end”. que veas que empiezan a coincidir, podrías notar que este texto está intercalado entre este tipo de corchetes con más palabras en ellos. Estas son las que llamamos etiquetas, las etiquetas describen nuestro contenido de documentos. Hablemos un poco de las etiquetas HTML, las etiquetas HTML suelen venir en pares y tienen una etiqueta de apertura y cierre. También a veces se llama una etiqueta de inicio y una de fin. El inicio es un corchete de ángulo abierto con el nombre de la etiqueta seguido del corchete de ángulo de cierre. El tag de cierre es un soporte en ángulo abierto y después tenemos la adición de una barra inclinada junto con el mismo nombre de etiqueta que la abertura, seguido de nuevo por ese corchete de ángulos de cierre. Entonces puedes ver aquí, apertura, nombre de etiqueta, algún contenido entre él y luego un nombre de etiqueta de cierre, y por supuesto vamos a reemplazar esa palabra nombre de etiqueta por etiquetas HTML reales. Reemplazaremos el nombre de la etiqueta para obtener elementos HTML reales. Los elementos HTML se refieren a la etiqueta de apertura y cierre y también al texto contenido entre las etiquetas. En este ejemplo, estamos mostrando una etiqueta p, p es para párrafo. Por lo que las etiquetas p conservarán cualquier párrafo de texto que tengamos en todo nuestro sitio. A continuación, veremos el H1, y H1 es sinónimo de rumbo nivel uno, y el H1 es el encabezamiento más importante de nuestra página. Echaremos un vistazo más profundo a los encabezados un poco más adelante. Por último, verás algunas cosas ahí abajo y tenemos una UL y dentro de ella hay algunos elementos LI. esto lo llamamos anidación, las LI están anidadas dentro de la UL, y UL representa lista desordenada, y la lista desordenada contiene un montón de otros elementos llamados el LI, que significa elemento de lista. Esos son elementos de lista contenidos dentro de la misma lista desordenada, así que si tenías dos elementos de lista en una lista, entonces verás dos elementos de LI como lo que vemos aquí. Si tuvieras cinco o 10 o 20, simplemente seguirías listando esa cantidad de LIs con el contenido para cada uno de esos ítems de la lista. También echaremos un vistazo a la lista y otros tipos de listas además de una lista desordenada un poco más adelante. También tenemos elementos vacíos o a veces llamados elementos independientes, como la etiqueta BR, que significa Break, la etiqueta de ruptura se utiliza para saltos de línea duros dentro de nuestro texto. También tenemos una etiqueta de imagen que es un elemento vacío, y lo verás en el segundo ejemplo, donde dice img, que significa una imagen. Estos se llaman elementos vacíos porque no hay nada como texto u otro contenido dentro de ellos, así que a diferencia de tener una etiqueta de apertura y una etiqueta de cierre, solo tenemos una etiqueta de apertura y eso es todo lo que necesitamos. Estaremos echando un vistazo mayor a la etiqueta de imagen y ese texto que va junto con ella en la siguiente sección, spoiler, se llaman atributos. 7. Atributos HTML: En la última lección, vimos la etiqueta de la imagen y vimos algún tipo de texto adicional además de solo nuestro nombre de etiqueta. Esos son lo que llamamos atributos HTML. Cuando se utilizan, los atributos siempre se especifican en la etiqueta de apertura. El atributo proporciona información adicional sobre la etiqueta que estamos utilizando en nuestro documento. El formato para ello se ve así, tagname, space, el nombre del atributo que estamos definiendo en signo igual, y luego el valor para el atributo dentro de comillas. Después tendrás tu contenido regular entre esos dos y tu nombre de etiqueta de cierre. En este ejemplo de imagen, verás que en realidad tenemos dos atributos para este elemento. Contamos con SRC y ALT. SRC significa fuente, por lo que verás fuente igual y luego lo que parece una URL para tal vez una página web que realmente verás al final de la URL it says.jpg. Lo que esto está haciendo, es apuntar a un archivo en Internet que es la fuente de la imagen. SRC significa fuente, y aquí es donde definimos dónde debe buscar nuestro navegador la imagen que debe mostrar dentro de nuestro navegador Chrome. En este caso, estamos diciendo ir al lindo sitio de sobrecarga y tomar una foto de este famoso animal 018.jpg y mostrarlo en nuestro sitio. ALT es para alt, y el alt es texto alternativo. Texto alternativo sirve para algunos propósitos aquí. Para empezar, si la imagen no se carga, este texto es lo que se mostrará. Esto en realidad está apuntando a una imagen de Calcetines Clinton el gato. Entonces, lo que sucede aquí es que si por alguna razón la imagen no se muestra, el navegador mostrará Socks Clinton. ¿ Por qué no se mostrará una imagen? Hay un par de razones, es posible que dondequiera que estés buscando pudiera mover el archivo, tal vez tuviste un tipografía en el nombre, también a veces los visitantes de tu sitio pueden estar usando lectores de pantalla. Las personas con discapacidad visual suelen utilizar lectores de pantalla para leer el texto de nuestro sitio porque es posible que no puedan ver las imágenes que estás deseando mostrar. En este caso, dejamos que nuestros visitantes que están utilizando lectores de pantalla puedan saber que la imagen realmente está mostrando una imagen de Socks Clinton. El texto Alt también puede ser de búsqueda lo cual es importante, y el Alt es un atributo requerido para incluir en su etiqueta de imagen. Entonces, recuerda, hablamos de la especificación HTML y del W3C. Bueno, el W3C que surge con las reglas de HTML dijo que por cada etiqueta de imagen que tienes también tienes que tener la fuente para decir palabra es, un Alt para proporcionar texto alternativo. Puedes dejar el texto alt en blanco para que solo pudiera decir, Alt es igual a cita cita, y eso seguirá siendo HTML válido, pero si necesita un texto para decirle a los usuarios qué es que es importante poner eso. Bueno, entonces ahora, hemos cubierto un poco mejor intro a los elementos HTML y un poco sobre los atributos y tenemos suficiente información para empezar. Abramos nuestro editor HTML, y empecemos a escribir algo de HTML. 8. Estructura de la página HTML: Entonces, estamos listos para empezar a escribir nuestro HTML. Entonces, para empezar, queremos seguir adelante y abrir Sublime Text 2, nuestro editor HTML. Entonces, eso está en mis aplicaciones y voy a seguir adelante y abrir eso. Ahora, una vez que tengamos esto abierto, veremos que tenemos una pantalla prácticamente en blanco, o una para la línea uno, y podemos seguir adelante y empezar a escribir. El primero que aparece en nuestra página es lo que se llama el doctype. Lo escribes así, abrir corchetes, exclamación, doctype, espacio HTML, cerrar corchetes. Una sintaxis simple requiere que se declare un doctype para que cuando un navegador se encuentre como archivo, esté seguro de renderizar correctamente en el modo estándar adecuado. Entonces, vas a querer incluir este doctype en la parte superior de cada una de tus páginas. Aquí las buenas noticias. En HTML5, presentamos este nuevo tipo de doctype, que es lo que vemos aquí y es realmente corto y dulce. Si echas un vistazo a cómo solían ser las cosas, solía ser un poco más loco. Aquí hay algunos ejemplos de cómo se han visto los doctypes en el pasado. Verás uno aquí y luego bajando, aquí te dejamos algunos otros ejemplos. Se puede ver que solía ser mucho más texto de lo que estamos escribiendo ahora, pero ahora podemos salirnos con la suya escribiendo sólo esta línea. Entonces, cuando un navegador se encuentre con este archivo, verá este doctype y sabrá qué tipo de HTML le está sirviendo. A continuación, es nuestro elemento html. El elemento html representa la raíz de nuestro documento HTML. Al igual que muchos de nuestros otros elementos , también tiene una etiqueta de cierre. Entonces, voy a seguir adelante y escribir eso ahora mismo, para que no llegue a cerrarlo más tarde. Después de cuando abro una etiqueta, es la mejor práctica cerrarla, que no te olvides y dejes texto abierto. El doctype es un ejemplo de una de nuestras etiquetas independientes, donde no necesita una etiqueta de cierre. El elemento HTML siempre debe tener un atributo con él también. Ese atributo es el atributo lang. El lang atributos especifica el lenguaje primario para el contenido de nuestro elemento. Por ejemplo, podemos hacer lang="en”. Eso significa que vamos a estar sirviendo inglés, puedes hacer cosas como fr para francés y mucho más. Si necesitas una lista de otros códigos de país, es una forma sencilla de búsqueda en Google para simplemente buscar códigos de país HTML y obtendrás una lista completa de posibilidades. Después de nuestro elemento HTML, vamos a tener con el elemento head. De nuevo, voy a seguir adelante y cerrar eso, así que recuerdo abrir y cerrar el elemento de cabeza. El elemento de cabecera va a representar una colección de metadatos para nuestro documento. Cosas como títulos de página o referencias de hojas de estilo, eso es lo que va a ir dentro de nuestra cabeza. Las cosas que escribimos al frente de nuestro documento no se van a ver en nuestro navegador chrome. Después de eso, tendremos el elemento corporal y eso tiene una etiqueta de cuerpo de apertura y una etiqueta de cuerpo de cierre. El cuerpo sostiene el contenido principal de nuestro documento, así que cualquier cosa que escribamos en el cuerpo ya sea esto o cosas reales legibles como esta es una frase, esto es lo que va a aparecer dentro de nuestro navegador web. Cualquier cosa dentro del cuerpo se imprimirá en la página. Una vez que creas documentos como este, la buena noticia es que puedes especie de guardarlo como shell en tu computadora local y usar esto como básicamente una copia y pega y tenerlo como shell reutilizable para todos tus documentos HTML. En este punto, nuestro expediente aún no se guarda y soy un gran firme creyente de ahorrar a menudo. Hay algunas formas diferentes en las que puedes guardar tu documento. Una es ir a Archivo, Guardar. A la otra manera, como se puede ver aquí en el lado derecho, eso muestra son atajo para Guardar. Por lo tanto, Command S en un Mac o Control S en un PC guardará tu documento. Vas a hacer esto a menudo. No hay nada que apeste más que cuando estás escribiendo mucho código y luego de repente pasa algo como una computadora se estrella o un gato camina por tu teclado y elimina todo el asunto. Por lo tanto, las mejores prácticas son guardar tus archivos a menudo. Entonces, voy a seguir adelante y ahorrar. Ahora, se me va a pedir que lo guarde como nombre de archivo específico porque aún no lo hemos guardado. Voy a navegar a mi carpeta jon-arbuckle-site que está en mi escritorio y justo aquí, voy a cambiar esto, asegurarme de que sigas adelante y cambies esto. Se va a por defecto a la primera línea de tu documento, que es ese doctype html. No queremos guardarlo así. Entonces, quieres cambiar esto, para que diga class.html. The.html es realmente importante porque eso es lo que va a definir esto como un archivo HTML. Al igual que tenemos a.mp3 para archivo de música or.psd para archivo photoshop or.txt para texto, .html dice lo que estamos escribiendo aquí es un archivo HTML. Entonces, entonces voy a dar clic en Guardar y estamos todos guardados. Ahora, se puede ver que pasó algo más tipo de locura. Nosotros de repente conseguimos este rosa fluorescente y siempre es un ajuste impresionante que tengo que solo hace las cosas los colores de AB cuando guardo cosas. De lo que esto es, es un tema en Sublime Text y esto es lo que llamamos Resaltado de sintaxis. Entonces, como hablamos antes, hay un poco de diferencia entre un editor HTML y un editor de texto. En este editor HTML, lo que hace es reconocer esto como archivo a.html porque así lo guardamos. Entonces, empezará a resaltar elementos y nombres de etiquetas que reconoce. Entonces, sabe que si la cabeza y el cuerpo html son cosas comunes y lo sabe, que es un elemento, por lo que se vuelve rosa. Cualquier atributo ahora estará en este verde brillante y cualquier valor de atributo está en este color amarillo. Si estos colores fluorescentes brillantes no son tu taza de té, también puedes cambiar eso en Sublime Text. Tienen una sección de Preferencias, bajo Esquema de colores y puedes seguir adelante y echar un vistazo a algunas diferentes que tienen. A lo mejor ese es más de tu estilo. En realidad soy un gran fan de este rosa brillante, me hace feliz, así que lo voy a dejar en eso. Pero si te gustaría algo más, siéntete libre de revisar eso. Entonces, ahora estamos todos listos con nuestro archivo guardado y este es el shell para el resto del HTML que estaremos escribiendo. En y en el siguiente video, vamos a echar un vistazo más de cerca a nuestro elemento principal. 9. El elemento <head>: Entonces, una de las primeras cosas que documentaré es nuestro elemento de cabeza y el elemento de cabecera representa una colección de metadatos para el documento que estamos escribiendo. Lo que ponemos en la cabeza no se va a ver en el navegador Chrome pero sí brindan información adicional a nuestro documento. Una de las cosas que podemos poner dentro del elemento de cabeza es nuestro título. Entonces, empezamos a escribir título y el título de esta página va a ser Portafolio de John Arbuckle. Entonces como la mayoría de nuestros elementos, tenemos que cerrarlo. Entonces, para decir que este título ha terminado, vamos adelante y cerramos la etiqueta. Entonces, cualquier cosa entre la etiqueta de título, este contenido será nuestro título. Ustedes podrían haber notado que algo empezó a pasar cuando escribí esto, ¿verdad? Si sigo adelante y elimino eso y empiezo con mi etiqueta de apertura, de repente consigo este popup ahora. Esto comenzó a suceder después de que guardé como a.html. Una de las otras cosas que tienen los editores HTML es la capacidad de ofrecer autocompletado. El programa empieza a buscar formas llenar este texto y está buscando un elemento. Entonces, si empiezo a escribir t, va a enumerar todos los elementos que posiblemente podría escribir aquí al principio con una t En este caso una vez que haya empezado a escribir título, se puede ver título aparece. Si golpeo “Enter” en este momento, automáticamente llenará eso por mí y también cerrará el final de la etiqueta. La auto-finalización es una característica súper útil. Te ahorra escribir y también recuerda cerrar etiquetas para ti cuando te puedas olvidar. A veces puede ser un poco difícil que esto suceda mientras primero estás aprendiendo algo y así si no quieres autocompletar, puedes apagarlo. Voy a apagarlo por ahora y lo voy a hacer dirigiéndome a mis preferencias. Sublime Text tiene algo llamado Configuración de usuario y aquí, el tuyo probablemente esté en blanco en este momento. Estos son algunos ajustes que he añadido a la mente. Lo que querrás hacer es agregar este texto. Entonces, lo que vas a hacer es escribir “auto_complete”: y luego en lugar de verdadero, vamos a escribir falso y luego voy a guardar esto. También puedes establecer cosas como tu esquema de colores está aquí, tu tamaño de fuente está aquí, word rap, hay un montón de preferencias que puedes establecer para satisfacer tus necesidades de Sublime Text. Si te interesa ver qué más puedes hacer, solo quieres ir, no google eso, solo google “sublime text 2 preferencias”. Da click sobre la documentación y tienen todo un montón de información sobre su configuración. Si hay algo que estés buscando, como decir no podías recordar cuál era la preferencia por autocompletar, solo puedes google “sublime text 2 auto complete”, aquí vamos. Busca eso, haz click en eso y ahora verás aquí mismo, te dirá cómo deshabilitar auto completado. Lo bonito de esto es que una vez que sabes qué buscar, hace mucho más fácil tu búsqueda en Google. Entonces, en cualquier momento que te estés preguntando si el texto sublime puede hacerlo, solo haz una búsqueda rápida de “texto sublime 2" y luego lo que sea que estés buscando. No olvides guardar tus preferencias cuando termines con ellas. Archivo, Guardar o Ctrl+S o comando S para el acceso directo. Ahora, cuando regrese aquí y empiezo a escribir, auto complete ahora está apagado y así que ahora depende de mí recordar qué hacer. Entonces, echemos un vistazo a esto en acción y volveremos a mi sitio en Jennlukas.com, y si sigo adelante y veo la fuente para esto, entonces Desarrollador, View Source, puedes ver que esa cosa debería empezar a parecer un poco más familiar. verás que tenemos este doctype html y luego tenemos el elemento de cabeza y el elemento de cabeza de cierre aquí abajo. Entonces, estas son todas las cosas que he puesto dentro del elemento principal de mi sitio. Ya verás que ahí tenemos ese título. Entonces, título Jenn Lukas Front-end Development, y como dijimos cuando volvemos aquí, eso no está escrito en ninguna parte hasta esta página pero donde está escrito está arriba en esta área de tabuladores. Verás Jenn Lukas Front-end Development, ese valor se recibe de nuestra etiqueta de título y luego se muestra en la pestaña. El otro lugar en el que viene nuestra etiqueta de título es en los resultados de búsqueda. Entonces, si voy a buscar a Jonn Lukas, verás a Jenn Lukas Front-end Development. Ese valor está siendo tomado de la etiqueta de título del HTML para esa página. Entonces, tus resultados de búsqueda en el título de tu pestaña dependerán de que esa etiqueta de título se esté llenando. Si volvemos a la fuente, verás que hay algo más por aquí y ese es este meta charset es igual a UTF-8. Esa metaetiqueta se utiliza junto con el atributo charset para definir la codificación de caracteres utilizada por el documento. Entonces, vamos a querer agregar eso a nuestros sitios también. La codificación de caracteres define qué tipo de caracteres estamos usando en nuestras palabras dentro de nuestro documento HTML. UTF-8 es la forma más utilizada de representar texto unicode en páginas web. Si quieres aprender más sobre esto, recomiendo consultar las codificaciones de caracteres para principiantes en w3.org. Va realmente en profundidad sobre qué tipo de cosas maneja la codificación de caracteres y cómo puede afectar a tus páginas. Si crees que no necesitas tanto detalle, solo recuerda incluirlo en todas tus páginas. El meta tag con el atributo charset y la etiqueta title son las dos cosas requeridas que pones en tu elemento de cabeza. Pero hay otras cosas que puedes ponerlo ahí también. Si volvemos a mirar la fuente de jennlukas.com, verás que definitivamente hay algunos otros datos aquí. Entonces, una cosa que tenemos es otra meta etiqueta, en este caso el atributo aquí es nombre y el valor es descripción. En la descripción, tenemos otro contenido de atributo. Contenido dice Desarrolladores front-end, ponente, escritor y consultoría. Notarás que esto aparece en mis resultados de Google. Front-end Desarrollador, ponente, escritor y consultoría. Entonces, ese es un lugar donde puede aparecer tu meta-descripción. El meta tag con el nombre del atributo y el valor de las palabras clave está emparejado con el contenido. Este contenido es una lista de valores separados por comas para palabras clave que estás esperando ayuden a tu indexación de motores de búsqueda. Cualquiera de ustedes que hayan hecho cualquier SEO podría saber que Google tiene una fórmula muy secreta por lo que nadie está exactamente seguro de cuánto esto ayuda a su resultado de motor de búsqueda pero ciertamente no puede doler. Entonces, ahí están las palabras clave meta name. Meta name viewport comienza a entrar en cosas que necesitamos para diseño responsive y el tamaño de tu pantalla cuando se carga en otros dispositivos. El siguiente que vemos aquí es la etiqueta de enlace y verás icono de atajo con este image.ico y favicon.ico es un enlace a nuestro favicon. El favicon es este pequeño avatar que aparece en las pestañas de tus páginas. Entonces, Google tiene uno aquí, este es el favicon para Google. Aquí está el de Jenn Lukas. Si fui a un sitio como cabeza de pez de perro, verás que tienen un favicon aquí también como tal vez es como una taza de cerveza e incluso en un sitio como jello.com, verás uno ahí. Si alguna vez no especificas tu favicon, solo vas a conseguir ese pequeño ícono del documento predeterminado que veremos un poco más adelante. También puedes especificar cosas como los iconos de apple touch y eso es para cuando estás en un dispositivo móvil Apple y guardas una página web en tu teléfono, eso es lo que aparecerá para el ícono ahí. Entonces, puedes ver que si bien no se muestra exactamente dentro de nuestro navegador normal Chrome, los metadatos de nuestro documento pueden proporcionar muchas cosas útiles. En el siguiente video, echemos un vistazo a las cosas que sí aparecen en medio de nuestra página y eso está en nuestro elemento corporal. 10. El elemento <body>: En el último video, hablamos de nuestro elemento de cabeza y de lo que no aparece en nuestra página. Ahora, hablemos de lo que hace, eso es cualquier cosa que escribimos dentro de los elementos del cuerpo. Entonces, cualquier cosa que escribamos entre nuestra etiqueta de cuerpo de apertura y cierre aparecerá en nuestras páginas. Si echamos un vistazo atrás a johnlucas.com, verás que cualquier cosa que esté en la etiqueta del cuerpo se imprime dentro del área del navegador. Echemos un vistazo a otro sitio. Esto es thesuperest.com. Vamos a utilizar de nuevo ese elemento inspeccionar. Cuando miramos aquí abajo, ahora podemos ver, también vemos el cuerpo y la cabeza. Entonces, si colapso eso por un minuto, y miro el elemento de cabeza, veremos algunas cosas de las que aprendimos en el último video, como el título y las metaetiquetas. Entonces, vemos cuando volamos sobre el cuerpo, toda la sección aquí arriba se resaltó azul, porque esa es toda la información dentro de nuestro elemento corporal. Si volteé eso abierto para poder ver lo que hay dentro, todo en el cuerpo se está imprimiendo en la página. Entonces, de nuevo, recordemos podemos inspeccionar los elementos, y ver que todas estas cosas viven dentro del cuerpo, para luego ser impresas en la página. Cualquier cosa en el elemento de cabeza no se imprime en esta página. Entonces, cualquier cosa que escribimos en nuestro esquema de contenido, vamos a querer escribir dentro de nuestro elemento corporal porque eso es lo que se imprimirá en la página. Entonces, sigamos adelante y abramos eso de nuevo. Entonces, aquí está el esquema de contenido otra vez. Sabemos que vamos a querer que Andres Arbuckle, un ilustrador y autor freelance aparezca en nuestra página. Entonces, los voy a copiar desde aquí. Puede hacer clic en Editar, Copiar, o el atajo para los teclados es el comando C en un Mac, o bien controlar C en un PC. Entonces, voy a copiar, y voy a volver aquí, y tú haces Editar, Pegar. El atajo para Pegar es el control V o el comando V, así que pega. Parece que se me olvidó el yo así que vamos a escribir eso de nuevo ahí dentro. Sabemos que cualquier otra cosa que queramos en nuestra página, aquí es donde vamos a escribirla. Entonces, voy a guardar esto ahora, Archivo, Guardar. Entonces, en nuestro siguiente video, veremos cómo se ve esto una vez que lo abramos en nuestro navegador. 11. Cómo crear y tener una vista previa de nuestra primera página: Tenemos algo de texto en nuestra página, y sigamos adelante y guardemos de nuevo este documento. Se puede decir que un archivo no es seguro si en la pestaña, se ve este pequeño círculo aquí arriba. Si sigo adelante y hago archivo save, ese círculo cambiará a la X. Así, class.HTML se guarda, pero ahora queremos seguir adelante y verlo en un navegador. Es una buena práctica mirar nuestros archivos en un navegador a menudo para asegurarnos de que las cosas se vean como esperamos. Entonces, voy a presionar el class.HTML en mi computadora, que está en mi carpeta jon-arbuckle-site y class.HTML, y hacer doble clic en él para abrirlo. Entonces, aquí está, abierto en Chrome. Nuestra primera página web HTML, o al menos el inicio de la misma. Entonces, este es class.HTML, y ahora vemos, “Soy Jon Arbuckle, un ilustrador independiente y autor”, dentro de nuestro navegador. Aquí se está imprimiendo cualquier cosa en la etiqueta del cuerpo. Tenemos nuestro título aquí arriba, y podemos ver la fuente, y ver todo lo que hemos estado escribiendo dentro de Sublime Text. Entonces, ahora quiero algo más de copia en esta página. Yo quiero ver otras cosas que podemos poner dentro de la etiqueta del cuerpo. A veces, tal vez no estás seguro de que todos tus derechos de autor estén lejos, y así algunas personas usan lo que se llama Lorem Ipsum. Lorem Ipsum es básicamente texto de marcador de posición griego para que utilicemos dentro de nuestro documento para imprimir algunos textos sin que tengas que escribir cosas como esta. Es un poco más legible. Entonces, hay un montón de diferentes Lorem Ipsum por ahí. Si echamos un vistazo a los generadores Lorem Ipsum, así que el resultado máximo es 56 generador único Lorem Ipsum. Entonces, como se puede decir, hay un montón de ellos, 101. Entonces, hay muchas cosas en internet. Echemos un vistazo a algunas de las que tenemos, Cupcake Ipsum, esa es una buena. Picksum, Lorizzle, Samuel L. Ipsum, Fillerati, Bacon Ipsum, Atún Ipsum, Veggie Ipsum, y Queso. Entonces, estoy vendido en Cheese Ipsum, así que vamos con eso por ahora. Entonces, aquí está Cheese Ipsum. A todos les encanta un poco de queso, esa no es la verdad o qué? Digamos cuántos párrafos, y vamos a dar clic en Generar Queso. Entonces, ya verás aquí. Tenemos alguna copia y algún texto que podemos copiar y pegar en nuestro documento. Esto sólo nos dará algún texto para usar. Entonces, no nos colgamos de escribir textos, y luego solo sacamos nuestros derechos de autor por ahí para ver cómo se ve. Entonces, voy a guardar esto otra vez. Voy a volver a la pestaña del navegador, y luego puedo refrescar la página haciendo clic aquí, o Comando, o Control R. Ahora, como pueden ver, toda la copia que acabo de escribir ahora está impresa en la página. Algo se ve un poco apagado, ¿verdad? Todo aquí está revuelto. Si expando y colapso la ventana del navegador, puedes ver que básicamente el texto está encajando en cualquier espacio que tenga. tanto que cuando lo miramos en nuestro editor HTML, está formateado, para que sea mucho más fácil de leer con espacios. Es realmente importante señalar que dentro de HTML, no lee espacios en blanco. El único espacio en blanco que se leerá es un espacio, que es el espacio que necesitamos para separar las palabras. Pero, no importa si haces esto, y tienes un montón de espacios ahí. Cuando guardo esto y refresco, todavía sólo va a tener un espacio aquí. Los espacios en blanco serán ignorados por el navegador y esa es otra de las razones por las que usamos el formato HTML para separar nuestros elementos semánticos. Entonces, hagámoslo con la copia que tenemos. Bueno, primero, vamos a deshacernos de lo no dibujado nuestro [inaudible] por ahora, y sólo tener tal vez un rumbo para todo este queso. Entonces, Lista de quesos que me encantan, este va a ser el encabezamiento de nuestra página. Aprendimos un poco sobre un ejemplo de encabezamiento en nuestro video anterior, y ese fue el elemento H1. El elemento H1 es el encabezado más importante de la página, y lo escribes haciendo un corchete abierto, H1, cierre corchete. Después, pasa al final de la sentencia, y vamos a querer poner la etiqueta de cierre. Entonces,, y ahora tenemos un encabezamiento para nuestra página. Avanzando, se trata de un montón de textos de párrafo. Sé que antes, echamos un vistazo a algo que puede marcar párrafos. Lo miramos brevemente, así que quizá no recuerden qué era. ¿ Qué pasa aunque si puedes recordar lo que fue? ¿ Y si pensamos que tal vez es párrafo, pero no estamos realmente seguros, o se llamaba para? No estoy seguro. Una de las cosas que me gusta hacer es a menudo referirme a un sitio de referencia. Uno de los sitios que realmente me gusta usar es un sitio llamado htmldog.com. No, no está lleno de un montón de lindos perros adorables, solo uno en el logo, pero es un sitio web de referencia realmente bueno. Sugiero encarecidamente marcar esto y volver a ello, solo mira las etiquetas comunes que usarás. Verás en el lado izquierdo esta sección de referencias, y luego este enlace aquí para las etiquetas HTML. Entonces, sigamos adelante y comprobemos eso. Lo que podemos hacer es entonces escanear la página para ver qué elementos HTML están disponibles para nosotros y cómo igualar el contenido que tenemos. Entonces, hay alguna estructura, y ya hemos visto algunas de estas antes como el HTML, la cabeza, el cuerpo. Todos esos deberían ser familiares o DOCTYPE y meta. Hemos visto esto, eso está bajo la metainformación. Pero, lo que queremos en este momento son elementos que se utilizan para el texto. Verás el primer elemento listado aquí es una etiqueta P. Eso probablemente debería despertar la memoria de antes, donde la etiqueta P es cómo hacemos referencia a un párrafo. En caso de que te olvides, solo tienes que hacer clic en él, y luego verás la etiqueta HTML P, y nos deja saber que es para un párrafo. Entonces más adelante, nos darán un ejemplo aquí abajo. Lo increíble de escribir HTML es que normalmente escribes historia sobre una computadora. Voy a suponer que lo podrías hacer en un pedazo de papel una máquina de escribir, pero si quieres proceso, lo vas a querer dentro de la computadora. Lo que está bien de eso es básicamente, siempre y cuando tengas una conexión a internet, entonces Google está al alcance de tu mano. Entonces, puedes comprobar todo el tiempo para asegurarte de que estás recordando la sintaxis adecuada para escribir cosas. Eventualmente, estoy seguro de que memoriza todo esto. Pero no es una competencia, y no es nada que tengas que memorizar justo al principio porque tienes las herramientas de inmediato para poder buscar cualquier cosa que puedas olvidar. No te preocupes por buscar demasiado en Google, nadie lo sabrá, y aunque lo hiciéramos, nadie juzgaría. Entonces, en cualquier momento que tal vez estés en una pérdida por lo que es la etiqueta, solo ven a htmldoc.com o puedes hacer una búsqueda en Google como etiqueta de párrafo html, y de inmediato, puedes empezar incluso a verlo dentro los resultados de búsqueda de su título etiquetas. Entonces, ahora que sabemos que escribimos una etiqueta de párrafo solo con la letra P, sigamos adelante y cambiemos esto. Añadamos una etiqueta de párrafo alrededor de todos estos párrafos de texto: <p> etiqueta, </p> etiqueta, <p> etiqueta, </p> etiqueta. Hagamos eso por ahora. Puedo eliminar esto para este ejemplo, y así ahora, tenemos esto. Vamos a guardar tres párrafos y un encabezamiento. Vamos a refrescarnos y ver cómo se ve esto ahora. Oye, mira eso. Eso es mucho más fácil de leer, ¿verdad? Entonces, ahora verás en cuanto agregamos esos elementos alrededor de nuestro texto, de repente, el formato comenzó a suceder. Estos trozos de texto se separaron unos de otros. También notarás que el nivel de título uno se volvió más audaz y más grande que el resto del texto de la página. Entonces por defecto, un navegador se encontrará en H1, y dirá: “Eso es importante. Hagámoslo audaz y más grande que otro texto”. Para el párrafo el texto va a ser un tamaño legible relativamente normal. Ahora, a medida que expandamos y colapsamos el navegador, todavía cabrá en línea de izquierda a derecha, pero tenemos estos saltos de línea entre cada una de nuestras etiquetas de párrafo. Estos descansos suceden después de lo que llamamos elementos de bloque. Cosas como H1 y P, eso es lo que llamamos un elemento de bloque. Lo que eso significa esencialmente es que toman su propio trozo de línea, y luego habrá un espacio después antes de otro elemento. Echaremos un vistazo a los elementos a nivel de bloque más en profundidad un poco más adelante. Pero por ahora, vamos a terminar esta lección creando este nuevo archivo HTML. Agregando estructura innecesaria a la página. Adelante y agrega algunos metadatos si quieres intentar agregar algunas de esas otras cosas como palabras clave o descripciones. Adelante, y haz eso también, luego agrega algunos elementos HTML al cuerpo. Intenta agregar un encabezado, tal vez algunos párrafos más, y luego una vez que hayas terminado con eso, guárdelo y previsualizarlo dentro de un navegador. Vuelve a la lección tres, y empezaremos a buscar más a fondo los encabezamientos y otros elementos para nuestras páginas. 12. Convierte nuestro contenido en lenguaje de marcas HTML: Hemos aprendido un poco sobre lo que necesitamos para escribir la estructura de documentos para nuestras páginas HTML, y aprendimos un poco sobre la etiqueta de encabezado y la etiqueta de párrafo. A continuación, vamos a aprender a hacer coincidir los tipos de contenido con nuestros elementos HTML. Entonces, hicimos un esquema de contenido, y lo que queremos hacer es mirar eso, y especie de ver qué elementos HTML podemos usar para obtener el contenido que tenemos en nuestra página. Entonces, por ejemplo, echemos un vistazo a nuestra página de inicio. Sabemos que vamos a querer llamarlo la página de inicio, y la página de inicio probablemente aparecerá dentro de nuestra etiqueta de título. En ocasiones, lo que me gusta hacer es simplemente imprimir un pedazo de papel y justo abajo justo al lado, qué elemento va a estar en HTML. A veces, cuando haces esto, se necesita un poco de presión para mirarlo con un editor HTML, pero haz lo que funcione para ti. Siguiente cosa en nuestra página, tenemos el Contenido de Héroe. Tenemos el encabezamiento que dice: “Soy Jon Arbuckle, ilustrador y autor freelance”, y sabemos que ese va a ser el encabezamiento principal de nuestra página. En nuestra página de inicio, esto le va a decir a todos lo que hace Jon, y por qué existe este sitio. Entonces, considero que es el rubro más importante de nuestra página. Entonces, vamos a llamar a eso un H1, como lo que vimos antes. También vamos a tener una gran imagen de un cómic. Entonces, vamos a usar la etiqueta de imagen para eso, que es img. El siguiente apartado son los cómics web de Jon. Entonces, vamos a tener un rumbo y una descripción para eso, ¿no? Entonces, tal vez en esta descripción, probablemente tengamos un rumbo. En este caso, va a ser el segundo rubro más importante porque no es el más importante, así que eso va a ser un h2, y vamos a tener texto. Entonces, van a ser algunas etiquetas de párrafo. Vamos a tener un enlace para conocer más sobre los cómics. Realmente no hemos mirado los enlaces todavía. Entonces, si realmente no estoy seguro de lo que sería un enlace, ahora quiero volver al sitio HTML doc, y ver si puedo encontrar algo que parezca sería el elemento para hacer un enlace. Entonces, mirando aquí atrás a este sitio de referencia, ¿recuerdas? Tenemos la metainformación, algún texto, y luego por suerte veo aquí enlaces, y estos realmente no tienen mucho sentido para mí en este momento. Pero si hago clic en esta etiqueta A, veo etiquetas HTML A, Ancla. Principalmente, utilice el texto del hipervínculo. El enlace realizado a otra página, o parte de una página, o cualquier otra ubicación en la web. Bueno, hey genial, eso es exactamente lo que busco. Entonces, no exactamente seguro de qué es todavía una etiqueta A, pero déjame marcarlo por ahora que esto va a ser un A. No te preocupes si parece confuso, vamos a ir en profundidad a lo que estos significan en videos posteriores. Entonces, para la siguiente sección, esto debería parecer un poco familiar en imagen. Ya sabemos qué es eso. El nombre del CD, eso probablemente va a ser un encabezamiento, también. Entonces, también lo llamaremos H2 por ahora, y otra cosa de la que acabamos de aprender. Entonces, diremos, la cuenta de Twitter de un Jon va a ser enlazada a su página de Twitter, eso también será una A para un enlace. Un testimonio de cliente. Entonces, testimonial de clientes, yo también estoy un poco inseguro al respecto. Volvamos a este sitio de documentos HTML, y echemos un vistazo a esto, y sé que no es una lista. No es una imagen de un objeto. No es una cola en una forma, pero es texto. Volvamos a la sección de texto. P, H1, Fuerte, em, abbr. Esto no suena bien. Espera, mira blockquote, ese tipo de suena como lo que estamos buscando, ¿verdad? ocasiones, en inglés llano, coincidirá exactamente con lo que estamos buscando un HTML. Blockquote - una gran cotización. Oye, perfecto. Entonces, por ahora, voy a escribir blockquote. Eso lo cubriremos un poco más tarde. El logo va a ser una imagen. Digamos, la navegación es un poco complicada. Sabemos que esos son enlaces. Entonces, definitivamente necesitamos una A, pero volvamos a eso más adelante, y entonces la información de copyright va a ser un párrafo. Entonces, esto definitivamente está arriba en el aire, y lo cubriremos, pero tenemos nuestros elementos básicos para el contenido que hemos delineado. Entonces, repasemos estos elementos y lo que realmente significan en nuestros próximos videos, empezando por encabezamientos. 13. Elementos de encabezado (H1-H6): De momento, hemos echado un vistazo a un tipo de rumbo y ese es el H1. Sabemos que el H1 es el encabezamiento más importante de la página y sólo puede haber uno por página. Sabemos que el H1 es el encabezamiento más importante de la página y realmente solo debería haber uno por página. Hay otros niveles de encabezamientos, también aunque porque probablemente vamos a tener más de un nivel de rubro. Ahí está H1 a H6, eso significa que hay un H2, un H3, un H4, un H5. Aquí es cuando empiezo a ponerme realmente paranoico sobre lo alto que escribo y un H6. Perdón. Aquí te presentamos nuestros niveles de rumbo, H1 a H6. H1 es más importante, H6 es menos importante. No hay H7. No estoy seguro de quién una vez se sentó en una habitación y decidió que debían subir hasta seis niveles de encabezamientos pero alguien sí. Entonces, H7 no existe, pero H1 a través de H6 sí. Examinemos un poco más sobre los encabezamientos. Entonces, si solo abrimos un archivo del bloc de notas, hablemos un poco más de encabezados. Piensa en encabezamientos como lo harías un esquema de un papel escolar o un esquema para un currículum. Digamos que tenemos un currículum. Entonces, vamos a hacer el currículum de Jon Arbuckle. ¿ Cuál es lo más importante que hay en el currículum de Jon Arbuckle? Bueno, el nombre de Jon Arbuckle porque sin él cómo sabrías de quién era el currículum. Entonces, el rubro más importante o nuestro H1 sería Jon Arbuckle. Después de eso, ¿qué más va en currículums? Bueno, qué tal su objetivo. Entonces, estamos terminando en fin porque ese es el siguiente nivel abajo y diremos, el objetivo, y eso va a ser un H2. Pongámoslos entre paréntesis después, un poco más fácil de leer. ¿ Qué más va en un currículum? En el mismo nivel objetivos, probablemente tengamos experiencia, educación, contacto. Todos estos son H2 porque son el mismo nivel de importancia que el otro y el segundo nivel más importante de rumbo. Bajo objetivo, probablemente vas a tener algunos textos, así que probablemente no tengamos ningún otro encabezamiento bajo eso. Bajo experiencia, probablemente vayas a querer enumerar todos los trabajos que ha tenido Jon. Entonces digamos, que Jon ha trabajado en The Daily Chronicle y luego, describiremos después de eso las fechas que trabajó ahí, sus responsabilidades laborales, por lo que Daily Chronicle también es un rubro. En este caso, eso será rumbo nivel tres. También solía trabajar en el US Bizarre Weekly y lo llamaremos otro H3 porque está en el mismo nivel que este otro trabajo en The Daily Chronicle, y también será el rumbo a otras cosas como su descripción de lo que hizo en el US Bizarre Weekly. Seguro que fue muy raro. En educación, vamos a enumerar dónde fue a la universidad y diremos que fue a la Universidad de Indiana y eso es un H3. Entonces después de eso, eso también es un rubro porque describiremos lo que allí estudió así como los años que estuvo allí. Entonces para el contacto, tal vez queremos tener un rumbo telefónico, así que eso es un H3 y una dirección postal también estará en H3. A lo mejor se especializó en la Universidad de Indiana. Entonces, necesitamos algunos encabezamientos más para describir sus mayores. Entonces, digamos que se especializó en ilustración y música. Esos van a ser encabezamientos adicionales debajo de él porque describirán un poco más sus estudios bajo eso. Entonces, esos van a ser de H4's Si tenemos más niveles de rumbo que este, ahí es donde bajaríamos a H5s y H6 s. así que tal vez bajo música, quiere describir cada clase que tomó, eso probablemente sería raro poner en un currículum pero eso podría ser un H5. Entonces, se puede ver que así es un poco como funcionan los encabezamientos. Esbozos muy similares que hemos tenido, así que solo piénsalos así cuando estés creando tus encabezados para tu página. Entonces, si volvemos aquí y apenas empezamos a añadir en algún texto, en este caso tenemos listas de quesos que me encantan. Entonces, tal vez en cambio cambiemos esto a, lista de alimentos que amo y luego voy a hacer otro rubro que diga, postres, y también voy a querer hablar de bocadillos. Ese recibe una exclamación y aquí quiero enumerar los postres que me gustan y hablar un poco de ellos. A lo mejor digo, tarta de lima llave y luego tal vez tenga un párrafo sobre por qué me encanta el pastel de lima clave. Entonces, me encanta KLP porque es jodidamente delicioso. Buena historia. Si vamos a tener un rumbo, probablemente queramos otro, así que vamos a añadir otro postre. También me encantan las golosinas krispy de arroz y tengo un párrafo. Es la mejor manera de usar mantequilla, solo tres ingredientes. Este es el tipo de copia que escribo. Entonces, lo mismo va para los bocadillos. Entonces, bocadillos, podemos escribir un poco bajo bocadillos como, puré de papas. ¿ El puré de papas es un refrigerio? Probablemente no. No es así como se deletrean las papas. Hagámoslo bien y tal vez en su lugar quiero hacer papas y hablaré de ello. A mí me gustan el puré, me gustan tater totted, etc. Así que como pueden ver, aquí hay otro ejemplo de cómo usaríamos encabezados en nuestra página. Si tuviéramos otra, quizá quiero hablar de toppings y podría decir, toppings salados y entonces tal vez tener un párrafo describiendo los toppings salados me gustan en tater tots, como ketchup, mostaza y luego tal vez coberturas dulces. Tengo que confesarte bien ahora mismo, realidad nunca como toppings dulces en mis tots de tater. Pero digamos que sí, tal vez quiero ponerles salsa de manzana o tal vez quiero ponerle jarabe de chocolate en eso. Suena completamente apetitoso. La salsa de manzana probablemente sería bastante buena. De acuerdo, entonces hay algunos ejemplos de los encabezamientos que tenemos. De nuevo, los escribía ahora mismo solo para que pudiéramos ver ese contorno, pero realmente están en el mismo nivel de anidación. Entonces, nos gustaría volver a poner esos fuera. Entonces, solo voy a limpiar un poco esto, y voy a ahorrar y luego quiero previsualizar esa copia de seguridad. Entonces, abramos de nuevo nuestro archivo class.HTML, se puede abrir en el navegador y ahora se puede ver aquí están mis encabezados y se puede ver que el H1 fue el más grande, luego el H2, luego el H3 y luego bajamos al H4, el H5 y el H6. Por lo que por defecto, el navegador los hará más pequeños, el encabezado de nivel inferior te dejará ir. Eso es todo para los encabezamientos en este momento. Nuestra página se ve un poco aburrida. Entonces, en el siguiente video, hablemos de cómo agregamos imágenes. 14. La etiqueta de imagen y las rutas de archivo absolutas o relativas: Entonces, podría recordarse cuando miramos imágenes antes, que las imágenes eran un elemento independiente, lo que significa que no tienen etiqueta de cierre. Pero sí tienen algunos atributos requeridos. Entonces, para empezar, hacemos nuestro corchete abierto, y luego para la imagen, escribimos IMG. Entonces, vamos a hacer clic en el espacio, y luego vamos a empezar a escribir los temas de nuestro atributo. Nuestro primer atributo va a ser la fuente. El origen nos va a decir dónde vive nuestra imagen. Entonces, src=” "y lo rellenaremos con el valor de dónde está la ruta del archivo a nuestra imagen. El otro que necesitamos es el atributo alt y el alt se cargará si por alguna razón la imagen no se puede cargar o le dirá a los lectores de pantalla de qué es la imagen. Entonces, vamos a encontrar una imagen para usar en nuestro sitio. Voy a seguir adelante y me gustaría poner una imagen de un perezoso porque los perezosos son adorables. Entonces, voy adelante y doy clic sobre las etiquetas de imagen de google image. No estoy buscando Perezoso de Los Goonies aunque sí disfruto mucho de Los Goonies. Busco a uno de estos chicos adorables. Entonces, voy a encontrar la URL de la imagen para eso haciendo clic en ver imagen y luego cuando eso se cargue voy a copiar la URL aquí arriba que termina en dot JPEG. Ese va a ser el archivo de imagen para lo que voy a usar dentro de la fuente. Entonces, voy a seleccionar eso todo y hacer copia de archivo o control C o comando C. Entonces, voy a volver a Sublime Text 2. Voy a encontrar mi etiqueta de imagen y pasar a ese atributo fuente y luego en el valor, voy a pegar. Entonces, voy a pegar esa URL que termina en dot JPEG y esa es la ruta a nuestro archivo de imagen. Un error común que he visto a veces es pegar la URL para la imagen fuera de la comilla doble y eso no funcionará. Cuando lo estés pegando solo asegúrate de que esté entre la cotización para que actúe como el valor para el atributo. Entonces, este valor aquí es a lo que nos referimos como la ruta absoluta del archivo. Está apuntando a dónde vive esta imagen en Internet. esto lo llamamos nuestra ruta de archivo absoluta porque hace la ubicación absoluta de donde vive la imagen. Entonces, vive en http://static.ddmcdn.com/gif/2-_sloth_in_bowl.jpg y terminando en ese punto JPEG diciendo: “Si pones esta URL en una ventana del navegador, encontrarás esta imagen viviendo ahí. Siguiente paso, también tenemos que añadir o alt texto que cualquiera que no pueda ver la imagen sepa que es perezoso. Yehey, perezoso. Queremos guardar eso y luego veamos cómo se ve dentro de nuestro navegador. Otra forma en que podemos ver nuestro archivo además de hacer doble clic es haciendo clic en el archivo abierto desde dentro de nuestro navegador Chrome. Entonces, ahora tenemos abierto nuestro expediente de clase y oye, ¡mira! Ahí está nuestra perezosa. Nuestra página es un poco más brillante y más feliz. Pero ¿qué tal si quieres una imagen que sea local a la computadora y no en Internet? Bueno, ya sea podemos guardar esta imagen en este momento nuestra carpeta del sitio en nuestras imágenes y usar eso como referencia. O si estás siguiendo junto con los archivos de clase, verás que en la carpeta de imágenes ya tenemos siete imágenes para elegir. Entonces, incluamos este arbuckle-bio.jpg en nuestro sitio. Por lo tanto, una manera fácil de ver dónde se encuentran nuestros archivos es viendo la barra lateral. Entonces, en View, Sidebar, Show Sidebar dentro de Sublime Text, vamos a conseguir un panel de ventana adicional y eso nos permitirá ver con qué archivos estamos trabajando. Entonces, ahora mismo vemos class.html y esa es la pestaña que está abierta. Pero ¿y si queremos ver los otros archivos y carpetas que hay en nuestro sitio de Jon Arbuckle? Podemos hacer esto simplemente agarrando nuestra carpeta y vamos a arrastrarla directamente a esa barra lateral. Entonces, haz clic y arrastra y ahora verás que estas carpetas aparecen como ocurrió. Entonces, veremos el sitio de Jon Arbuckle y veremos class.html y ese es el archivo en el que estamos trabajando aquí. Entonces, somos capaces de ver fácilmente todas las imágenes que se encuentran dentro de nuestra carpeta de imágenes. Déjame pasar por esto una vez más contigo. Otra forma en que puedes conseguir que la barra lateral se abra en tu Sublime Text es con solo hacer clic en Archivo, Abrir y navegar a tu carpeta, así que el sitio de Jon Arbuckle. Después, al hacer clic en Abrir , automáticamente te mostrará la carpeta con todos los archivos. Sublime Text 2 hace esta cosa extraña donde abre dos ventanas así que simplemente cierra la otra y asegúrate de que estás trabajando dentro de tus archivos de clase. Entonces, ahora podemos ver que tenemos nuestro class.html de nuevo. Voy a abrir eso y ya verás cuando haga doble clic en él, aparece aquí y en la barra lateral. Si solo hago clic una vez, entonces Sublime Text 2 me dará una vista previa rápida. Pero tan pronto como escriba aquí o haga doble clic, en realidad lo abrirá como una pestaña. Entonces, a medida que escribo, entonces abre el archivo. Esta es solo una forma en la que puedes navegar rápidamente por tus archivos sin abrirlos realmente. Pero, asegúrate de haber hecho doble clic y tener tu class.html de nuevo abierto. Entonces, ahora agreguemos nuestra imagen a la página. Vamos a duplicar la etiqueta de imagen porque queremos guardar nuestro ejemplo de ruta de archivo absoluta. Entonces, de nuevo vamos a escribir img source = "alt=” y luego cerrar nuestra etiqueta. Entonces, sabemos que queremos llegar a nuestro archivo logo.png que está dentro de nuestra carpeta de imágenes. Pero, ¿cómo exactamente llegamos ahí? En nuestro ejemplo de ruta de archivo absoluto, teníamos la URL que terminó en pereza en bowl dot JPEG. Entonces, sabemos que queremos incluir el tipo de referencia de imagen al mismo. Entonces, sabemos que vamos a necesitar logo.png aquí con seguridad. Entonces, intentemos agregar ese logo.png porque ese es el nombre de nuestro archivo de imagen. Por supuesto, vamos a agregar texto alt también así que lo llamaremos logo por ahora. Entonces, vamos a guardar este archivo y ver qué sucede cuando lo abrimos en nuestro navegador. Entonces, he refrescado la página y me voy a desplazar hacia abajo y como pueden ver, tenemos la pereza de nuestra ruta absoluta de archivo pero por aquí con nuestra ruta de archivo relativa, nada apareciendo. Tenemos este icono de imagen rota que nos indica que la imagen no tiene la ruta de archivo correcta a la misma. Entonces, pasamos el logo.png aquí, no sale nada. Se puede ver si hago la misma acción encima de la ruta absoluta del archivo, obtenemos una pequeña vista previa de la imagen de pereza. Pero aquí no tenemos nada. Entonces, algo anda mal. Entonces, echemos otro vistazo a cómo podemos conseguir que aparezca nuestro logo.png. Entonces, tenemos que averiguar dónde es relativo el archivo con nuestro archivo class.html. Aquí estamos en el archivo class.html y este archivo está en la misma raíz que la carpeta de imagen. Entonces, esencialmente lo que tenemos que hacer es decirle al navegador que estamos en class.html ahora mismo pero necesitamos entrar en la carpeta de imágenes y luego una vez que estemos dentro de la carpeta de imágenes. Vamos a estar buscando un archivo llamado logo.png. Entonces, lo haremos escribiendo IMG porque queremos entrar a esa carpeta con imagen y luego ir dentro de una carpeta. Utilizamos el carácter de barra inclinada. Esto dice encontrar la carpeta de la imagen luego la barra dice ir dentro de ella y luego decimos buscar logo.png. Guardemos esto, volvamos a nuestro navegador y demos una actualización. Oye, mira ahí está nuestro logo. Entonces, así es como atravesamos nuestras rutas de archivo y capaces de conseguir en la página nuestras imágenes relativas a nuestro documento. Entonces, así es como entramos a una carpeta pero ¿y si tenemos que volver a subir y encontrar un archivo? Bueno, para esta siguiente parte solo quiero que sigas como hago esto y no lo copies y pegues esto en tus archivos. Pero lo que voy a hacer es hacer una nueva carpeta y esta nueva carpeta va a contener nuestro archivo class.html. Entonces justo en Sublime Text, puedo hacer clic en Nueva carpeta y solo voy a nombrarla clase. Entonces, ahora como puedes ver tenemos una nueva carpeta de clase en nuestra carpeta del sitio Jon Arbuckle. Voy a cerrar el archivo con el que estaba trabajando, abrir mi ventana del Finder. Por ahora, solo para mostrarte, voy a arrastrar el archivo class.html a la carpeta de clases. Voy a reabrir ese archivo y mostrar el archivo class.html que ahora vive dentro de esto. Abriremos esto en el navegador. Ahora, nos desplazamos hacia abajo y se puede ver que nuestra trayectoria de imagen se rompe de nuevo. Nuestro camino de imagen se rompe de nuevo porque volvamos a visitar nuestra fuente. Esencialmente estamos buscando una carpeta de imágenes con un archivo PNG de logotipo dentro de ella dentro de nuestra carpeta de clase. Porque recuerda que es relativo a dónde está nuestro expediente. Entonces, nuestro archivo class.html dice: “Bueno, ¿dónde hay una carpeta de imágenes aquí?” Y no es porque sea un nivel arriba. Entonces, tenemos que hacer es averiguar cómo podemos llegar de la copia de seguridad HTML de clase a la ruta de la carpeta del sitio Jon Arbuckle y luego volver a la carpeta de imágenes para encontrar el logo.png. Entonces, podemos hacer esto también dentro de Sublime Text y dentro de nuestro archivo HTML. Lo que tenemos que hacer es volver a subir un nivel. Para subir un nivel, escribimos dot slash y eso dice desde donde estoy class.html, subimos un nivel, luego buscamos una carpeta de imágenes y luego encontramos el archivo logo.png. Entonces, vamos a guardar esto. Vuelve a un navegador, refresca y oye mira ahí está de nuevo. Nuestra ruta absoluta del archivo está tardando un poco más en cargarse pero eso aparecerá momentáneamente. Oye, mira ahí está. Entonces, ahora tenemos ambos archivos en nuestra página otra vez y lo hemos hecho correcto haciendo la barra de puntos de punto para ir al nivel superior y encontrar la imagen correcta. Si te anidaron unas cuantas carpetas en profundidad, puedes seguir subiendo niveles por solo - solo sigues escribiendo barra de punto punto. Entonces, ahora mismo esto subiría uno, dos, tres, cuatro niveles si fuéramos cuatro carpetas profundas. Por supuesto, no lo estamos, así que vamos a deshacernos de eso. Entonces, así es como atravesamos nuestros archivos obtenemos rutas de archivo relativas. Ahora mismo, vamos a volver a poner todo de nuevo a cómo era y mover nuestro archivo class.html de nuevo a la raíz para que podamos volver a cómo se organizaban las cosas antes. Cuando muevo archivos así, quiero asegurarme de que estoy trabajando en los archivos correctos en Sublime Text. Entonces, ahora mismo en realidad sigue mirando el archivo class.html que estaba en una carpeta de clase la cual ya no existe. Entonces, quiero asegurarme de que cierro eso, no guardes y abras de nuevo mi archivo real. Entonces, así es como obtenemos imágenes en nuestras páginas con rutas de archivo absolutas y relativas. En el siguiente video, echemos un vistazo a los elementos de lista y veamos cómo podemos empezar a agregar diferentes tipos de listas a nuestra página. 15. Elementos de lista: Entonces, a continuación estamos viendo List Elements. Yo sólo voy a eliminar algunos de estos párrafos para darnos un poco más de espacio y así una lista que tenemos, que vimos un poco antes fue la Lista Desordenada la cual escribimos escribiendo <UL> y luego vamos a asegurarnos de cerrarla por también poniendo la etiqueta de cierre de la </UL>. Por lo tanto, UL es para Artículos de Lista Desordenados y podemos usar Lista Desordenada para una variedad de cosas diferentes. mejor, si estuviéramos cocinando una receta y necesitábamos conseguir ingredientes, Unorder List sería genial para los ingredientes porque si vamos a ir de compras de alimentos, No importa exactamente el orden que lo compramos y siempre y cuando acabemos de conseguir todo en la lista. Entonces, uno de nuestros ejemplos podría ser algo así como lo que necesitaríamos para hornear. Entonces, digamos que necesitamos algo como harina, azúcar, y chips de chocolate. Entonces, si guardamos esto ahora mismo y lo previsualizamos en nuestro navegador actualizaremos la página y luego veremos allí harina, azúcar, y papas fritas de chocolate pero todos están sentados en la misma línea que el uno del otro. Entonces, esencialmente no están apareciendo realmente como List Items tanto como son solo texto de párrafo. Siempre que usamos una Lista Desordenada o cualquier otro tipo de Tipo de Lista, no podemos simplemente poner el contenedor de una UL. También necesitamos incluir un elemento LI. El elemento LI significa Elemento de Lista y separa cada Elemento que pertenece a la Lista. En este caso, la Lista Desordenada. Hacemos eso escribiendo <Ll> y luego de nuevo tendremos nuestra etiqueta de cierre para un. Vamos a cortar este texto una harina y lo vamos a pegar dentro de la LI para comercializar como un LI Item. Haremos lo mismo por el azúcar y también rodearemos las papas fritas de chocolate porque ese es el tercer elemento de lista en nuestra lista. Deshaznos del espacio aquí y luego vamos a guardar de nuevo este archivo y ver ahora cómo se ve esto dentro de nuestro navegador. Vamos a refrescar la página y ahora como puedes ver esto se ve bastante diferente. De repente tenemos ahora una lista con viñetas de tres Elementos de Lista Desordenados. Entonces, harina, azúcar, chips de chocolate y por defecto si estás usando una Lista Desordenada el navegador agregará este punto o bala a cada uno de nuestros Artículos de Lista. Lista Los elementos también pueden contener otros tipos de texto, además de solo texto plano podemos realmente poner Elementos HTML dentro de él. Entonces, si quisiéramos poner un montón de textos de párrafo con dentro de un Elemento de Lista podríamos. Entonces, tenemos una etiqueta anidada dentro de nuestra LI, anidada dentro de nuestra UL y podemos escribir un párrafo aquí como comprar harina de trigo integral y podemos cerrar eso y si queríamos esto es HTML totalmente semántico así así así que puedes tener un par de párrafos que describen cada Elemento de la Lista. Otra cosa a destacar es que no se puede simplemente poner un párrafo dentro de una UL. Siempre tiene que ser un UL seguido de un LI y cualquier otro texto adicional dentro de ese para tener un Elemento de Lista válido. Entonces, volvamos a poner nuestro texto a cómo era y recordemos ahorrar porque es importante ahorrar a menudo, pero y si la orden sí importaba. ¿ Y si no quisiéramos sólo una Lista Desordenada, sino que quisiéramos una Lista Ordenada. Bueno, podemos hacer eso con un OL. Los OLS se parecían exactamente a una UL excepto que vamos a usar OL, pero dentro tendremos Lista de elementos de nuevo. Siempre un OL con LIs anidados en su interior. Una de las razones por las que podríamos querer una Lista Ordenada es si en realidad estamos hablando de las direcciones para hornear algo. Entonces, ahí es donde el orden de las operaciones es más importante por lo que vamos a querer usar una Lista Ordenada para algo así como, verter una taza de harina en un tazón, mezclar el azúcar, comer los chips de chocolate porque esto es un receta realmente legítima. Realmente no creo que nadie deba seguir esto en casa, pero finjamos que los pasos son importantes aquí y así que sería una Lista Ordenada. Vamos a guardar eso y veamos en un navegador. Entonces, puedes ver para una Lista Ordenada por defecto el del navegador, pone números frente a ella. Entonces, uno, dos, tres frente a cada paso a diferencia de la Lista con viñetas en la Lista Desordenada. Tenemos un tipo más de lista que cubriremos y eso es un poco diferente y esa es la Lista de Definición. Definición Lista está marcada con un DL. No tenemos Artículos de Lista dentro de estos aunque. Para la lista de definiciones en realidad vamos a definir un Término de Definición y una Descripción de Definición. Entonces, nuestro Término de Definición podría ser algo así como plátano y luego vamos a querer hacer la Descripción de Definición. Entonces, para el plátano podemos decir que la Definición es algo así como una deliciosa fruta amarilla y luego vamos a cerrar esa definición cerrándola con una etiqueta. Añadamos otro término. Entonces, si queremos tener múltiples términos dentro de nuestras Listas, entonces digamos que esta es una lista de frutas. Vamos a definir qué es un kiwi con el DT y luego también tenemos que darle una Descripción, así que en el DD vamos a escribir algo sobre Kiwis así que algo así como fruta verde rara con fuzz y sabor atractivo y luego vamos a cerrar esa Definición. Voy a ampliar un poco esto, porque iba a la siguiente línea por lo que no teníamos suficiente espacio y después de eso tenemos una Lista de Definiciones terminada. Entonces, veamos cómo se ve esto dentro de nuestro navegador. Vamos a guardar nuestro archivo y luego nos refrescaremos y aquí puedes ver que es un poco diferente. En nuestra Lista de Definiciones, nuestro término es a la izquierda y luego la Descripción de Definición está sangrada a la derecha. Por lo tanto, estos son los valores predeterminados del navegador para mostrar una Lista de Definiciones dentro de la pantalla. Parece que no sé deletrear delicioso, así que arreglémoslo y con eso está todo listo nuestra Lista de Definiciones. En la siguiente lección echaremos un vistazo a lo que hace de Internet una de las mejores cosas que hay y que es Links. Entonces, vuelve para el siguiente video. 16. Enlaces: Hasta ahora, realmente acabamos de tener contenido estático en una página, pero lo que hace que el HTML sea diferente a otros lenguajes de marcado como SGML es la característica para hipertexto y documentos interactivos discretos. Un enlace es una conexión de una página a otra y son súper impresionantes. Entonces, como cuando estamos viendo un video de YouTube y termina, y es como, has visto este lindo video de gato aquí hay un enlace a otro lindo video de gato y estás como, esto es increíble o cuando escribes una nueva historia y haces clic en un enlace para otra nueva historia. Enlaces son cómo nos movemos. Entonces, hablemos un poco de cómo hacemos enlaces. Esencialmente tiene dos extremos; un ancla y luego también tiene una dirección. Entonces, cómo escribimos una etiqueta de enlace es esencialmente estamos escribiendo una etiqueta de ancla. Entonces, desplazémonos hacia abajo y busquemos algo de espacio, y para poder escribir nuestra etiqueta ancla, vamos a escribir A para ancla y luego la siguiente parte que es súper importante es el atributo href. El atributo href es la dirección para donde queremos que vaya el enlace. El valor para eso es esencialmente la fuente de la URL que queremos que visiten nuestros visitantes después de que hagan clic en este enlace. Entonces, dentro puedes escribir algún texto como “click aquí” y luego vamos a cerrar nuestra etiqueta de anclaje con el cierre A. Dentro de nuestra href, vamos a poner esa URL de donde debe ir la página. Esa podría ser una página en nuestro sitio o podría ser una página externa, así que tal vez algo como cuteoverload.com es donde queremos enviar a nuestros visitantes. Entonces, vamos a guardar esto y ver cómo se ve esto dentro de nuestra página. Entonces, vamos a darle una vieja actualización y ahora podemos ver que tenemos un enlace de “click aquí”, entonces ¿por qué no? Vamos a dar click aquí. Entonces, voy a dar clic en ese enlace y cuando lo haga, estaré llevando a cuteoverload.com y puedo ver rápidamente que esa fue una decisión muy inteligente porque mira todo lo lindo que hay en esta página. ¿ Es un conejillo de indias merino? Eso es bastante bueno. Mira a ese leoncito. ¿Eso es un gato león? No sé qué es eso pero se está comiendo una jirafa y lo disfruto bastante y miro al elefante. De acuerdo, ahora me estoy distrayendo oficialmente, así que volvamos a nuestras etiquetas de enlace. Entonces, ahí está nuestra etiqueta de enlace click aqui y debo decir que click aqui es terrible link text tener. Es terrible porque click aquí quiero decir cometí ese error en internet antes, ¿no? Entonces, cuando estamos escribiendo descriptores de enlace queremos asegurarnos de que sea texto más claro. Entonces algo así como, “ver animales adorables”, y luego sé que cuando haga clic en ese enlace me van a llevar a adorables animales. Entonces, esto es mucho mejor enlazar texto que apuntará a linda sobrecarga y dejarle más claro a tus visitantes a dónde irán cuando hagan clic en ese enlace. Eso envuelve nuestros anclajes. Entonces, echemos un vistazo a las cotizaciones de bloque en nuestro próximo video. 17. Blockquote: En nuestro esquema de contenido, hablamos de incluir una cotización de uno de los clientes de Jon. Para ello, vamos a utilizar el elemento blockquote. El elemento blockquote representa una sección codificada de texto. Entonces, busquemos algo de espacio para poner esto. Hacemos esto escribiendo corchete abierto, libro de bloques, corchete cerrado, y luego por supuesto, tenemos que cerrar nuestra etiqueta. Entonces, pongamos una cotización aquí. Entonces, voy a poner una cita aquí de uno de mis letristas favoritos y escribiré : “Despierta por la mañana, sintiéndome como P Diddy”. Sólo blockquotes realmente profundas van a nuestro sitio hoy en día amigos. Entonces, esencialmente, cuando miramos este texto, no es sólo texto plano. Esto en realidad es un párrafo porque Kesha sólo escribe párrafos muy inteligentes en sus letras. Entonces, rodeemos nuestro texto por un párrafo. Entonces, ahora nuestro párrafo está anidado dentro de nuestro blockquote. Vamos a previsualizar esto en el navegador, y ya verás aquí está. Aquí está nuestra blockquote y por defecto del navegador, se va a sangrar desde el lado izquierdo de nuestra página para representar que es una pieza de texto citado. A blockquote también se le conoce como un elemento de bloque. Hasta el momento, realmente hemos estado usando muchos elementos de bloque en nuestra página, y elementos de bloque que puedes distinguir por el salto de línea dura después de cada elemento, así que ese es ese espacio en blanco entre nuestros elementos. En el siguiente video, vamos a hablar de elementos en línea, que también van a ser partes de nuestras páginas web. 18. Elementos en línea: Hasta el momento, hemos utilizado principalmente elementos a nivel de bloque, y los elementos a nivel de bloque tienen un espacio en blanco después de cada vez que están en la página. No obstante, los textos dentro de un encabezamiento de párrafo u otros elementos a nivel de bloque también se pueden marcar de diversas maneras. Entonces, tal vez queremos agregar énfasis o resaltar texto, bueno, podemos hacerlo dentro de cosas como nuestros párrafos o nuestros elementos de bloque en una página. Entonces un ejemplo de un elemento en línea es el elemento ABBR o una abreviatura. Entonces si usas una abreviatura, en realidad ya una vez, y eso es para Q y pastel. Dijimos, me encanta KLP porque es jodidamente delicioso. Entonces digamos a la gente qué es eso cuál es una abreviatura dentro de nuestro texto. Entonces lo que podemos hacer con un elemento en línea es ponerlo dentro de un elemento de nivel de bloque. Entonces vamos a escribir la etiqueta ABBR y luego cerrarla con una etiqueta ABBR de cierre y eso dice que KLP es una abreviatura por lo que verás que este elemento en línea está anidado dentro del párrafo. También podemos agregar un atributo a nuestros elementos ABBR y vamos a agregar el atributo title. El atributo title es diferente a la etiqueta title en que está describiendo el ABBR y no viene con ese texto de tabulación en nuestra página. Entonces el título aquí va a ser lo que significa esa abreviatura que es Q, I y pastel. Esto le dice a los motores de búsqueda y a los lectores de pantalla qué es KLP, y también cuando guardamos y previsualizamos en el navegador verás que podremos verlo en otra zona. Entonces ahora mismo se ve casi igual, pero si tomamos nuestro ratón y pasamos el rato, se puede ver que en realidad ahora obtenemos un consejo de herramienta que dice el atributo title de nuestra etiqueta ABBR que dice, Key lime pastel. Por lo que el ABBR es un elemento en línea y verás que después no hay un salto de línea dura. Simplemente aparece justo en línea con el resto del texto. Entonces eso es lo que se conoce como un elemento en línea. Hay otros elementos en línea que podemos usar, HTML nos proporciona dos maneras de tener énfasis en nuestro texto. Una de las formas es a través de la etiqueta M. Podemos agregar énfasis ordinario poniendo la etiqueta M alrededor del bloque de texto. En este caso, hagamos hincapié en la mozzarella porque merece ser enfatizada. Otro nivel de énfasis es el fuerte énfasis. Podemos agregar eso a nuestra página mediante el uso de la etiqueta strong. Entonces nos divertiremos hacer como ser texto fuerte aquí. Todos estos elementos en línea están anidados dentro de nuestro párrafo y cuando nos refrescamos y desplazamos hacia abajo para comprobar que se puede ver que por defecto el énfasis se renderiza en cursiva y nuestra etiqueta fuerte es en realidad por defecto perno renderizado. Por lo que estos son algunos ejemplos de los elementos en línea que tenemos. También hay otros elementos en línea por ahí, recuerda que puedes echar un vistazo a ese sitio de doc HTML y ver qué más hay. Entonces si echamos un vistazo a nuestra sección de texto aquí puedes ver algunas de las cosas que acabamos de discutir como la etiqueta fuerte o la etiqueta M. Algunas otras cosas aquí son elementos en línea al igual que la etiqueta DFN o la etiqueta delete. También hemos mirado otro elemento en línea, la derecha el elemento de enlace. Entonces en cualquier momento que tengamos un enlace en nuestra página ese es otro elemento en línea donde no es un nivel de bloque. Podemos agregar un enlace dentro de nuestro texto de párrafo así no necesita estar solo. Entonces si quisiéramos hacer de algo como la sonrisa cursi un enlace, podemos hacerlo. Simplemente ponemos nuestro cursor justo en ese texto y luego alrededor del texto que queremos estar en enlace, vamos a escribir nuestra etiqueta A. Entonces A href igual y luego vamos a tener nuestro valor de atributo, lo pondremos después, cerraremos primero nuestra etiqueta y luego volveremos y donde quiera que esto vaya, puede ir. Entonces digamos que queremos una sonrisa cursi 2.2. Hagamos cheese.com Seguro que es un sitio encantador que te hará sonreir sobre el queso. Entonces, así podemos agregar un enlace en línea a nuestro texto de párrafo y ahora puedes ver el enlace aparece y no hay saltos de línea antes o después porque es un elemento en línea. También notarás que aquí hay una diferencia de color, si los enlaces han sido visitados aparece como morado por defecto y si aún no hemos hecho clic en un enlace aparece como azul. Por lo que eso envuelve enlaces. En nuestro próximo video vamos a hablar entidades HTML y cómo agregarlas a nuestra página. 19. Entidades HTML: En ocasiones necesitamos más que textos planos dentro de nuestros documentos HTML. Los caracteres reservados en HTML deben ser reemplazados por entidades de carácter. Entonces, cosas como símbolos de copyright o marcas comerciales, para eso estaremos usando entidades HTML. Veamos algunos ejemplos de esto. Vamos a hacer un nuevo párrafo aquí para usarlo como ejemplo para las entidades. Entonces, sólo diremos que este es nuestro párrafo de la entidad. Y luego, intentemos agregar una entidad. Cómo se escribe una entidad en una página sigue la misma sintaxis. Siempre empieza con un ampersand, y luego vamos a escribir el nombre de la entidad. En este caso, vamos a escribir copia para los derechos de autor, y luego termina con punto y coma. Entonces, ampersand, copia, punto y coma. Guardémoslo, actualicemos, y ahí se puede ver que está nuestro símbolo de derechos de autor. Esa es una entidad HTML. Es bastante guay. Y hay un montón entero ahí fuera que podemos escribir. Podemos hacer otra, si queremos poner una entidad de centavo ahí podemos, ampersand centavo punto y coma. O que tal si queremos poner Euros podemos hacer ampersand, Euro, punto y coma. Si cuando quieres una marca que sería ampersand, comercio, punto y coma. Algunas de ellas son bastante fáciles de leer o adivinar y luego podemos ver cuando refrescamos la página ahí están todos. Pero, ¿qué pasa si queremos un ampersand? Bueno, podemos hacer eso también, hacemos ampersand, amp, punto y coma, y ahora mira hay un ampersand bastante en nuestra página. No te preocupes, no necesitas memorizar todos estos, si haces una búsqueda de entidades HTML, encontrarás muchas referencias a todas las entidades que puedes usar por ahí. Aquí hay un sitio que muestra un montón y como puedes ver hay bastantes de ellos. Entonces, no te preocupes por memorizarlos, en cualquier momento que estés buscando una entidad solo haz una búsqueda rápida en Google por ella y podrás encontrarla. Probablemente memorizarás algunos que usan más que otros, pero si alguna vez olvidas, solo hace una búsqueda rápida de un copyright de entidad HTML, y probablemente obtendrás como 3.7 millones resultados en las interwebs sobre cómo para decirte que hagas eso. Entonces, no te preocupes si te olvidas. En el siguiente video, echemos un vistazo al formato de código y a algunas mejores prácticas. 20. Formateo de código: Entonces, hablamos un poco sobre el espacio en blanco y el formato de código, pero solo quiero revisar algunas mejores prácticas. Es realmente importante que mantengamos nuestro código agradable y limpio. Esto te ahorrará dolores de cabeza si vuelves a tu código en una semana o un año y no lo recuerdas exactamente. También ahorrará dolores de cabeza si trabajas dentro de un equipo. Es mejor si todos pueden ponerse de acuerdo sobre cómo formatear su código. Técnicamente, porque se ignoran los espacios en blanco, podrías escribir tu código HTML así. Básicamente podría ser un descuidado como quieras y el navegador te arreglará eso para ti. No obstante, es realmente difícil leer eso. Por lo tanto, siempre manténgase a especie de agradable interlineado que hace que sea fácil para usted analizar. También verás Sublime Text tiene aquí lo que llaman un minimapa y el minimapa te permite navegar por tus textos, así que si estás buscando una pieza específica de HTML que has escrito. este momento nuestro documento es bastante corto por lo que podría no ser necesario, pero si tu proyecto se hace largo, es posible que quieras usarlo. Por ahora sin embargo, podemos hacer ocultar minimapa y entonces eso no bloqueará ningún inmueble en nuestra esquina. Otra cosa que queremos evitar es lo que se llama sopa de etiqueta. Entonces, podemos escribir h1 en minúsculas como hicimos o podemos escribirlo en mayúsculas. Esto también será leído por el navegador. También podrías hacer algo realmente genial como esto, T mayúscula, minúscula I, T mayúscula, mayúscula L. Se obtiene el punto. Esto si quieres volver a vivir 1996 días de hackers y quieres ser cero cool, pero en realidad no es muy cool en absoluto. Entonces, este será HTML válido que se puede leer pero solo duele los ojos mirar. Entonces, recomiendo no hacer esto. Es realmente agradable mantener tu código limpio y ordenado. Entonces, volvamos a poner eso de nuevo en minúsculas. Entonces cada vez que trabajes con un equipo, puedes llegar a un documento de formato de cómo todos deberían estar escribiendo su HTML. Es realmente buena práctica seguir y te mantendrá limpio y honesto con tu código. Otra herramienta que tenemos a nuestra disposición son los comentarios HTML. Entonces, digamos que aquí queríamos escribir una pequeña nota a nuestro yo. Y si quisiera añadir más desiertos más adelante y no quisiera olvidar. Voy a escribir una nota que diga: “No olvides añadir más desiertos”. Genial. El problema es que sin embargo, cualquier cosa que escribamos en nuestro cuerpo se imprimirá en la página. Entonces, si refresco aquí entonces, claro, vamos a ver esa nota que me escribí a la página. Entonces, ¿cómo podemos evitar que eso suceda? Bueno, podemos usar comentarios HTML. Entonces, para los comentarios HTML se ven así, exclamación de corchetes abiertos, guión , guión, y luego al final del comentario vamos a hacer otro guión doble y el corchete de cierre. Se puede ver Sublime Text está haciendo ese color gris para hacernos saber que es un comentario. Ahora, cuando guardo y voy al navegador, está oculto a la vista. Por lo tanto, los comentarios HTML pueden ser realmente súper útiles. Algo que quiero señalar sin embargo es solo porque no lo podemos ver en esta vista del navegador aquí no significa que no esté en tu fuente. Entonces, si alguien fuera a ver tu fuente, mira ahí está nuestro comentario. Te digo esto porque no quiero que escribas nada como, “Odio a mi jefe”. En tus comentarios porque definitivamente es posible que alguien pueda verlo. Entonces, recuerda eso. A pesar de que los comentarios HTML no se imprimirán en la página, aún es posible que alguien pueda ver lo que estás escribiendo ahí. Los comentarios HTML pueden ser súper útiles solo para hacer un seguimiento de cualquier cosa que queramos. Entonces, tal vez en las notas de clase quiero decir cuál es esta sección. Entonces, aquí aprendimos sobre los encabezamientos. Entonces, aquí hay un comentario HTML que dice, “Encabezados”. Entonces, aquí abajo leeré los comentarios y éste dirá imágenes porque aquí es donde aprendimos sobre las imágenes. Puedo copiar y pegar esto para que sea un poco más sencillo para mí escribir. Entonces, por aquí aprendimos sobre blockquotes. Entonces, voy a cambiar el texto a blockquotes. Aquí aprendimos sobre los enlaces. Entonces, permítanme agregar en este epígrafe para los enlaces. Aquí estaba nuestro párrafo y nuestro ejemplo de elemento en línea. Tenemos nuestras listas desordenadas, nuestras listas ordenadas, y nuestra lista de definiciones. Entonces, esos son comentarios HTML y algunas notas sobre el formato de código. Entonces, solo recuerda, siempre trata de mantener tu código agradable y ordenado, usa tus pestañas para sangrar y mostrar anidar, y asegúrate de hacer todas las letras minúsculas para que sea un poco más fácil de leer. Hemos aprendido mucho en estos últimos videos y creo que ahora estamos listos para volver a nuestro esquema de contenido y empezar a traducir nuestro contenido a HTML para nuestra página de inicio. 21. Cómo marcar nuestro sitio de inicio: Vamos a salir de nuestro archivo class.html por ahora para hacer nuestra página de inicio. Entonces, vamos a seleccionar Archivo, Nuevo Archivo, y vamos a hacer un nuevo documento desde el que trabajar. Vamos a agregar en nuestro shell HTML, que puedas copiar y pegar eso si quieres, pero por ahora, hagámoslo desde cero. Entonces, necesitamos nuestro doctype HTML, y esa es una etiqueta independiente. Siguiente es nuestro elemento HTML, y no olvides que vamos a poner ahí ese atributo Lang y ponerlo en inglés. Vamos a cerrar nuestra etiqueta HTML porque todo estará anidado dentro de eso. Siguiente arriba es nuestro elemento principal. Recuerda, nuestra cabeza sostiene todos nuestros metadatos para nuestra página. Después de eso, nuestro elemento corporal. El elemento del cuerpo guarda todo el contenido que se mostrará en pantalla. Vamos a guardar nuestro archivo, y para la página de inicio de todos nuestros sitios, en realidad vamos a nombrar este index.html. El archivo HTML índice es lo que buscará el servidor web cuando vayan a la raíz de su documento HTML. Index.html indica que esta es la página de inicio, y la primera página que se debe cargar cuando los visitantes acuden a su sitio. Entonces, lo guardaremos y notarás que una vez que Sublime Text sepa que se trata de un archivo HTML, empezará a hacer resaltado de sintaxis coloreada basado en etiquetas HTML. Abramos de nuevo nuestro esquema de contenido, y echemos un vistazo a lo que tenemos para nuestra página principal. Entonces, sabemos que vamos a querer que la etiqueta de título en la etiqueta de título debe decir la información para lo que es esta página de inicio, que entra en nuestro elemento de cabeza porque son metadatos. Agregaremos nuestra etiqueta de título, y luego ahí dentro, escribiremos lo que queremos aparecer, que será El Portafolio de Jon Arbuckle. No olvides lo otro necesario que necesitamos en nuestra cabeza, es una meta etiqueta con el atributo set de autos. Vamos a poner eso a UTF 8. Guardemos esto, porque recuerden siempre queremos ahorrar a menudo. A continuación, vamos a empezar a agregar el contenido a nuestro cuerpo, así que si previsualizamos esto ahora, claro, nada estará en la página porque aún no hemos puesto nada en nuestro elemento corporal, pero veremos nuestra etiqueta de título mostrada dentro en la pestaña del navegador. Además, nunca pusimos un ícono favorito, así que aquí está ese ícono del documento predeterminado que mencioné antes. Empecemos a agregar cosas al cuerpo de la página para que en realidad aparezca en el navegador. Contamos con nuestro pitch elevador el cual actuará como nuestro H1. Voy a copiar ese texto, luego voy a crear el elemento H1. Voy a pegar el texto y luego voy a cerrar el elemento H1 y ahora, tenemos nuestro encabezado Nivel 1 para nuestra página. Será el rubro más importante que se mostrará en nuestra página. Si comprobamos eso, ahí vamos, y recordamos por defecto se vuelve más grande y más audaz que el resto del texto de nuestra página. Se podría notar que el apóstrofe en I'm en realidad está mostrando como una cita rizada que es lo que queremos. Eso está pasando porque lo copiamos y lo pegamos de un documento de Word. No obstante, si solo estuvieras escribiendo texto dentro de este editor, te darás cuenta de que cuando haga el I apóstrofo M y refresco la página. Entonces resulta que ese no es el apóstrofo rizado que realmente queremos. Jason Santa Maria tiene un gran artículo al respecto: “No seas tonto tú inteligente”, y todo se trata de asegurarte de que realmente estás usando cita rizada, y no describir cosas como pulgadas o pies. Entonces, ¿cómo nos aseguramos de que eso suceda? Bueno, podemos volver a usar nuestras entidades HTML de las que conocemos. En realidad hay una entidad HTML para esto y es ' y eso significa cita individual derecha. Entonces, cuando caigamos en esa entidad HTML, verás que ahora está corregida a la cita rizada correcta. A continuación, vamos a querer incluir esa gran imagen que describimos. En este caso, Jon aún no está seguro de lo que quiere poner ahí. Sabemos que vamos a necesitar la etiqueta de imagen con la fuente y todos los atributos. Pero, ¿cuál va a ser el valor en nuestra fuente? Bueno, aún no estamos seguros, entonces, ¿qué hacemos por no estar seguros. Bueno, recuerda que hablamos antes del texto de Lorem Ipsum, y que había generadores Lorem Ipsum que podemos usar. También está básicamente el equivalente para Lorem Ipsum de imágenes. Mi favorito es, placekitten.com. Aquí está placekitten y lo que haces es agarrar esta URL que aparece aquí, placekitten.com/200/300. Vamos a copiarlo, y vamos a caer eso en nuestro valor fuente. El 200 y 300 significa ancho y altura, para que puedas ajustarlos al tamaño que necesites. Aquí te mostramos 200 píxeles de ancho y 300 píxeles de alto. Queremos que esto sea más una imagen vertical, cambiemos eso a un 1000 para el ancho y ha sido refresco, oh, mira, hay una carita de gato. Puedes una especie de ajustar esto a lo que estás buscando, y básicamente solo pone un marcador de posición de una imagen de gatito para ti. Ahí vamos, Si los gatos no son lo tuyo, hay muchos otros servicios por ahí también que puedes usar. Uno de ellos es, nicenice.jpg, el servicio de marcador de posición Vanilla Ice, o son Fill Murray, que es imágenes de Bill Murray. También puedes consultar placebear si te gustan más los osos que los gatos. También hay uno más simple, aquí está el dummyimage.com, y eso sólo nos da una imagen con las dimensiones escritas arriba. Esto podría ser un poco más clasista para algunas cosas que estás buscando, tal vez no tanto divertido, pero probablemente más justo al grano, tal vez, mejor para los entregables del cliente, dependiendo de tu cliente. Entonces, ajustemos esto aquí. Entonces 900 por 300, y luego el 0001 y fff son para los colores, así que 000 significa negro y el fff es blanco para el texto que está sentado en la parte superior. Entonces, ahí vamos, ahora mismo tenemos nuestra H1, tenemos nuestra imagen de héroe. No estamos exactamente seguros en qué va a estar. Entonces, por ahora, solo estamos usando esta imagen de marcador de posición. Esa imagen que establecemos con una ruta de archivo absoluta. A continuación, queremos poner algo de información sobre los cómics web de Jon. Queremos un poco de descripción para asegurarse de que sepan que Jon efectivamente escribe cómics web. Entonces, los cómics web, si pensamos de nuevo a nuestro esquema, es el encabezado de segundo nivel bajo que Jon Arbuckle hace trabajo freelance así que hagamos otro rubro, esta vez un H2 y ponerlo en Web Comics, entonces vamos a quieren agregar ese texto descriptivo del que hablamos cuál estará en una etiqueta de párrafo. Para el párrafo, sólo vamos a escribir un texto bastante sencillo aquí. Siempre podemos volver atrás y ajustarnos. Esta vez, vamos a decir, seguir junto con las aventuras comiendo de Jon sobre en las Crónicas de Lasaña. Este texto por sí solo hace mucho bien. Queremos que la gente realmente aprenda más. Entonces, asegurémonos de incluir aquí un enlace. El enlace irá a nuestra página de trabajo. Eso lo pondremos un poco más adelante y vamos a hacer que el texto enlazado diga algo descriptivo, porque recuerden queremos que la gente sepa a dónde van a ir y así sólo les haremos decir, ver los cómics de Jon. También queremos hablar de la muy prominente carrera musical de Jon. Entonces, pongamos otro rubro porque eso vivirá bajo lo que haga, y eso va a ser en H2 con el texto de la música. Si nos referimos de nuevo a nuestro esquema, podemos ver que queríamos hablar sus populares CDs a la venta e incluir una imagen del mismo. Entonces, agreguemos nuestra etiqueta de imagen con nuestro atributo fuente y nuestro atributo alt, y averigüemos qué imagen queremos. Bueno, vamos a querer que esto, pokeaholic.jpg image aparezca. Entonces, recuerda porque estamos vinculando a una imagen dentro de nuestro propio sitio, vamos a usar una URL relativa en lugar de una ruta absoluta. Entonces, vamos a entrar a la carpeta de imágenes. Entonces, lo hacemos escribiendo img, porque está en el mismo nivel que nuestro index.html. Después, para entrar a la carpeta escribiremos barra, y luego escribiremos el nombre del archivo que es polkaholic.jpg. Para cualquiera que no pueda ver esto, queremos asegurarnos de que proporcionamos texto alternativo, pudiéramos escribir algo así como polkaholic ahí. En realidad no vamos a necesitar eso en este ejemplo y he aquí por qué. En el siguiente rubro, nuestro encabezado H3, porque está anidado debajo de nuestro esquema musical, vamos a escribir polkaholic. Entonces, si en realidad pusiéramos texto alt diría, polkaholic, polkaholic. Entonces, solo mantengamos ese texto dentro del H3. Ahora que la gente sabe que hay un CD, claro, van a querer comprarlo. Entonces, pongamos un enlace al CD en Amazon.com. Entonces, ponemos nuestro texto de anclaje por el CD, y no te olvides de configurar tu href a la URL que quieras ir. A continuación, queremos tratar de poner en marcha las redes sociales de Jon. Entonces, asegurémonos de que la gente sepa que está en Twitter y que pueden seguirlo allí. Ese será otro nivel de partida dos porque está anidado bajo nuestro encabezamiento de nivel superior. Entonces, siendo h2 Jon en Twitter, vamos a poner aquí algún texto de párrafo que ojalá consiga que la gente quiera mantenerse al día con la última música e ilustraciones de Jon. Entonces, vamos a tener un enlace a la página de Twitter de Jon. Entonces, algo así como twitter.com/jonarbs. No sé si esa es una cuenta de Twitter real. Si lo es, espero que sea bueno. Entonces, pondremos el @jonarbs para el texto del enlace porque eso indicará a la gente que este es el perfil de Twitter con el que los estamos vinculando. A continuación, vamos a querer incluir ese testimonio de cliente. Entonces, la doctora Liz Wilson fue lo suficientemente amable como para escribir algunas palabras amables sobre Jon. Entonces, vamos a querer incluir eso, y ¿cómo incluimos las cotizaciones? Con el elemento blockquote. Entonces, vamos a escribir blockquote aquí. Voy a subir eso para que lo veas un poco más. Abrimos y cerramos nuestras etiquetas, y ahí vamos a pegar en ese texto dentro de una etiqueta de párrafo. Wan el 'de quién es 'en las siguientes líneas, así que en realidad vamos a hacer dos párrafos dentro de esta cotización de bloque. Entonces, el primer párrafo es el texto real y el segundo párrafo es quien lo dijo. Ahora recuerda, hablamos antes de las citas rizadas. Entonces, volvamos atrás y asegurémonos de que los limpiamos agregando las entidades HTML adecuadas para que aparezca correctamente. Aquí, tenemos una cotización doble que es muy similar a la cotización simple. Simplemente vamos a cambiar un poco a esta entidad. Entonces, en lugar de decir escribir comilla simple, queremos aquí es ampersand, y luego L para Izquierda, D para doble, y luego el quo otra vez para cita. Entonces, ldquo se deja cita doble. Entonces, para la cotización de cierre, necesitaremos rdquo para cotización doble derecha. Vamos a querer copiar ese rsquo para por aquí para asegurarnos de que todo se muestre correctamente, y luego en realidad hay una entidad más que tenemos en esta página. Esto debería ser un guión em. Hay algunas lecturas interesantes sobre em guiones versos en guiones y qué usarlos, si quieres aprender más sobre eso. Pero por ahora, solo hagamos de esto un mdash para que en el &mdash con un punto y coma, y ahora nuestra cotización de bloque está establecida. Después de que la gente lea este blockquote, probablemente van a querer contratar a Jon, ¿verdad? Entonces, asegurémonos de poner algún texto de párrafo gente contrate a Jon para las necesidades de retratos de mascotas, y ahora queremos hacer que ese 'texto de ponerse en contacto ', un enlace para ir realmente a la página de contacto de nuestro sitio. Entonces, lo envolveremos con la etiqueta ancla pero estableceremos la href más adelante una vez que realmente tengamos una página de contacto a la que enlazarla. A continuación, vamos a querer nuestra información de pie de página. Para nuestro pie de página, sólo vamos a tener un poco de texto de copyright. Entonces, algo así como todo el contenido copyright Jon A. 2014 y luego cerrar el párrafo. A lo mejor queremos agregar la entidad de copyright para que podamos hacerlo escribiendo © y nuestro contenido de pie de página está establecido. El último que necesitamos es ese contenido de encabezado que incluya un logotipo, que va a ser una imagen y luego un montón de navegación del sitio así, una lista de enlaces a otras páginas de nuestro sitio. Volvamos a subir a la cima aquí, y aquí es donde voy a empezar a añadir en mis comentarios HTML. Entonces, aquí está la información de mi encabezado. Sólo voy a marcar eso. Este es el contenido de la página por aquí, así que voy a marcar eso. Nuevamente, cuando vuelva a esta página más adelante, esto me facilitará encontrar la información que busco y recordar, donde está todo ese contenido. Entonces, aquí está mi información de pie de página debajo de eso. Es sólo una herramienta para mantener las cosas organizadas. Entonces, de vuelta a nuestro encabezado, sabemos que queremos los logotipos que van a ser imagen. Entonces, hacemos img source igual, y luego nuestro logo se encuentra en nuestra carpeta de imágenes. Entonces, vamos a decir, entra a la carpeta de imágenes, así que de nuevo eso es img, barra para entrar, logo.png. Entonces vamos a querer establecer aquí el texto todo y el texto todo será Jon Arbuckle porque ese es el texto que aparece dentro de nuestro logo. Entonces, queremos que la gente sepa que eso es lo que dice, si acaso no ven eso. A continuación, necesitamos esa lista de enlaces para ir a las otras tres páginas de nuestro sitio porque siempre queremos que la gente pueda llegar a la obra, a la página Acerca y a la de Contacto. Entonces, algo que me gusta hacer a veces en averiguar cómo quiero marcar las cosas en HTML, es una especie de decirlo en voz alta. Entonces, sé que estos son enlaces y estoy diciendo aquí son tres enlaces que tenemos. Si estoy diciendo la palabra link, sé que voy a necesitar una etiqueta de ancla. Eso es genial. ¿Qué más dije sin embargo? Dije, vamos a necesitar una lista de enlaces. Ah, listas, así que esas son familiares. Cuando hablamos de lista de navegación, esa es en realidad otra lista desordenada. Entonces, podemos hacer el mark up nuestra lista de enlaces está usando lista desordenada. Entonces lo haremos escribiendo ul. Vamos a cerrar eso y luego vamos a querer que esos enlaces vivan dentro de nuestro ul, pero qué necesitamos dentro de un ul, necesitamos nuestros elementos li para representar cada ítem. Sabemos que tenemos tres páginas por lo que vamos a necesitar tres enlaces aquí. Entonces dentro de todos estos elementos de la lista, estará la etiqueta de enlace que enlaza con la página del sitio. Entonces, el primero será nuestra página de trabajo, nuestro segundo enlace irá a nuestra página sobre, y nuestro último enlace irá a nuestra página de contacto. Ahora, por supuesto, aún no hemos creado estos por lo que volveremos y rellenaremos esos valores de href en cuanto se creen esas páginas. Démosle una actualización a eso. Oye, hemos escuchado mucho contenido pasando aquí. Tenemos nuestro logo, tenemos nuestra lista de enlaces, tenemos nuestra h1, que dice para quién es este sitio y de qué se trata, tenemos una imagen marcador de posición la cual será nuestra imagen de héroe, que agarrará atenciones de visitantes, tenemos una serie de h2s, sub contenido para bajo nuestro encabezado principal. Entonces, tenemos cómics, tenemos un párrafo, tenemos un enlace para ver los cómics de Jon, tenemos un h2 de música, tenemos otra etiqueta de imagen con una URL relativa, tenemos un h3 porque eso es un encabezado anidado bajo música, tenemos un enlace para comprar el CD en otra página web, volvemos a nuestra h2 porque Jon en Twitter está al mismo nivel que nuestras otras categorías, tenemos un párrafo para describirlo y un enlace, tenemos nuestra cotización en bloque con dos párrafos dentro de la misma. También estamos usando entidades HTML para asegurarnos de que nuestros curlicues se vean bien. Tenemos un párrafo adicional y dentro de eso, tenemos nuestro enlace en línea para ponernos en contacto, cual enlazará a nuestra página de contacto. Por último, tenemos nuestro párrafo de pie de página. El párrafo de pie de página tiene algún texto así como nuestra entidad de copyright. Ahora, nuestra página principal es semántica e impresionante y lista para salir. Entonces, eso termina la Lección tres. Creamos una nueva página y index.html para guardar nuestra página de inicio en, agregamos nuevo bloque en elementos en línea, seguimos nuestro contenido fuera de línea para asegurarnos de que todo nuestro contenido estuviera marcado correctamente para nuestro html, nosotros también siguió buenas prácticas de formato. Entonces, asegúrate de tomarte el tiempo ahora para volver atrás y arreglar algo de eso si tal vez estabas escribiendo un poco rápido. Nos pasa a todos pero tómese el tiempo, asegúrate de que las cosas estén bien y limpias, guárdalo, asegúrate de que se vea bien en el navegador, y luego la siguiente lección, veremos nuestras otras tres páginas, y asegurarnos de que podamos obtener toda esa copia del contenido a los elementos html. 22. Identifica los tipos de contenido restantes como elementos HTML: Entonces, ahora que tenemos la página de inicio bajo nuestro cinturón, pasemos a nuestras tres páginas restantes. A continuación, tenemos nuestra página de trabajo. Aquí, tenemos el esquema de contenido que hicimos para nuestra página de trabajo. Entonces, empecemos a poner eso en Sublime Text. Abriremos copia de seguridad de Sublime Text, y ahora mismo tenemos nuestro archivo class.html y nuestro archivo index.html, pero vamos a necesitar una página para nuestra página de trabajo. Ya sea haga clic derecho o Control haga clic y haga Nuevo Archivo o podemos hacer Archivo, Nuevo Archivo. Aquí, estamos establecidos con nuestro nuevo archivo. Ahora, mencioné antes la idea de ahorrar tiempo copiando y pegando, y sin duda podemos hacerlo con nuestro archivo anterior. Entonces, si volvemos a nuestra página de índice para nuestra página principal, una de las cosas que podemos hacer es alterar el texto aquí dentro para trabajar en nuestras otras páginas. Iremos a Selección y luego Seleccionaremos Todo. El atajo de teclado para esto es Comando A o Control A y ahora notarás que todo está resaltado. Vamos a editar, copiar, y luego vamos a entrar en nuestro nuevo archivo que aún no hemos hecho nada y pegamos. Genial. Entonces, ahora todo nuestro código se copia aquí. Lo que queremos hacer ahora es hacer ajustes por lo que en realidad es para nuestra página de trabajo. Entonces primero, sigamos adelante y guardemos esto para que no perdamos ninguno de nuestros avances, y lo llamaremos work.html. Asegúrate de que estás ahorrando dentro de tu jon-arbuckle-site. Deberías ver tu archivo de clase de indexación ya ahí y haz clic en Guardar. Entonces ahora, tenemos que trabajar el archivo HTML guardar, pero tiene todo nuestro contenido desde la página principal. Entonces, ¿qué sabemos que necesitamos en una página de trabajo? Bueno, tenemos algún contenido que es diferente a nuestra página principal, pero tenemos dos cosas que son iguales. Ese es el contenido del encabezado y el contenido del pie de página. Entonces, lo que vamos a hacer es ver que tenemos estos comentarios handy-dandy que nos dicen que este es el encabezado, aquí está el contenido de la página, y aquí está nuestro pie de página. Entonces, en realidad sabemos que queremos mantener el encabezado y el pie de página, y así lo que haremos a continuación es simplemente eliminar todo el contenido que hay en el contenido de nuestra página. Entonces, selecciónela y luego eliminarla. Entonces verás que tenemos nuestra información de encabezado desde la primera página o información de pie de página desde la primera página y ahora todo lo que necesitas hacer es poner el contenido personalizado para nuestro contenido de página en el medio. Esta es una forma realmente fácil de crear todo el resto de tus páginas. Hay algo más aunque eso falta, y eso es que tenemos que actualizar el título. Entonces, eliminemos esto. Ahora lo que tenemos aquí es esencialmente el shell para el resto de nuestras páginas. Empecemos a crear nuestro otro contenido. Esta es la página de trabajo, ya no la página principal, así que digamos “Trabaja”. Entonces aún hacemos saber a la gente que es el portafolio de Jon Arbuckle, así que “Trabaja: La cartera de Jon Arbuckle”, o “Trabaja - La cartera de Jon Arbuckle”. La gente aún sabrá que estamos mirando el portafolio, pero eso es específicamente que estamos en la página de trabajo. Entonces, nuestro título ya ha sido actualizado. Bajemos al contenido de nuestra página. En el contenido de nuestra página, vamos a querer escribir HTML que sea específico de nuestra página de trabajo. Entonces, volviendo a nuestro esquema de contenido, hemos hecho el título de la página, pero también necesitamos algo más. Necesitamos el h1, ¿verdad? Entonces, hagamos h1, y el encabezado de esta página también se llama “Trabajo”. A continuación, queremos hablar de los cómics de la Web que tiene Jon. Entonces, si recordamos nuestros contornos de rubro, dijimos que este era nuestro h1, lo que significa que los cómics web estarán en h2. Vemos que hay algunas otras cosas en el mismo nivel que los cómics web bajo nuestro trabajo, ¿no? Entonces, Retratos y Música estarán en el mismo nivel, por lo que esos también serán h2s. Entonces, dentro de los cómics Web, tenemos dos tipos diferentes de cómics con información debajo de eso, así que hagamos esos h3s. También tenemos un título de un CD, así que vamos a hacer eso en h3 también porque es el encabezamiento de la otra información sobre el CD. Entonces, volvamos a Sublime Text, y vamos a trabajar con nuestra sección de cómics Web. Entonces, tenemos nuestro encabezado de segundo nivel, el h2, y eso se llamará “Web Comics”. Entonces los h3s serán el título de los cómics, por lo que el primero es las “Crónicas de Lasaña”. También queremos tener una imagen de las Crónicas de Lasaña y un enlace a un sitio externo para ello. Entonces, vamos a incluir la imagen aquí, así img src es igual y la imagen para Lasagna Chronicles está de nuevo en nuestra carpeta Image, lasagna-chronicles.jpg. Entra dentro de nuestra carpeta Imagen. Para entrar en ella, el /lasagna-chronicles.jpg. Entonces vamos a querer vincular a la gente para que vaya a la URL fuera del sitio para el Comic Web de Lasagna Chronicles, así que haremos una etiqueta de ancla. Digamos que eso vive en algo como lasagnachronicles.com. Queremos un texto de llamada a la acción que describa hacia dónde va la gente, así que algo así como, “Lee las Crónicas de Lasaña”. Entonces vamos a seguir este mismo formato para el próximo Web Comic, que es Cat Town. Entonces, h3, Cat Town. Simplemente mueve esto un poco hacia abajo para que podamos ver un poco mejor. Vamos a tener nuestra etiqueta de imagen otra vez, así que img src equivale a “img/cat-town.jpg”. Olvidé el texto alt, así que vamos a asegurarnos de que tengamos el alt, que estará en blanco. Entonces de nuevo, queremos el enlace al sitio, así que tal vez cattowncomic.biz, Read Cat Town. Está bien. Por lo que ahora, nuestra Web Comics está configurada. El siguiente apartado bajo la obra de Jon son sus retratos. Entonces, eso entra en el encabezado de segundo nivel porque está anidado bajo Trabajo, entonces Retratos. Entonces para los Retratos, solo vamos a tener dos imágenes, una de gato y otra de perro para que la gente sepa que los retratos están disponibles. Entonces, volveremos a hacer la etiqueta de imagen, así img src es igual, y tendremos el texto alt, y diremos retrato de gato, cat-portrait.jpg, pero algo ya está mal aquí, ¿no? Cuando acabo de hacer cat-portrait.jpg, va a estar buscando eso en el mismo nivel. Entonces recuerda, tenemos que entrar a nuestra carpeta de imágenes, así image/. Entonces solo puedo copiar y pegar esto si quiero, así que Editar, Copiar, Editar, Pegar. Puedo actualizar esto para que solo diga “retrato de perro”. Es un buen atajo de tomar para que no tengamos que escribir todo. Entonces ahora, tenemos nuestros retratos aquí. El siguiente apartado de nuestro esquema de contenido fue nuestra Música. Entonces, agreguemos otro h2 porque está en el mismo nivel que Retratos y Web Comics. Todos son tan importantes bajo Trabajo. Entonces, Música, h2 y el nombre del CD es “Lo mejor de Jonny Arbs” así que ese va a ser otro título. Este es otro rubro porque si el caso que Jon escribe más música, tiene una larga lista de diferentes CDs que tenía y la descripción de ellos, por lo que podría terminar teniendo más h3s eventualmente tan pronto como nos agrade con más de sus genio de la polka. Entonces, tenemos Lo Mejor de Jonny Arbs. Vamos a querer la imagen del CD y el link para comprar en Amazon. Entonces otra vez, usaremos nuestra etiqueta de imagen, y ese es el CD de Polkaholic, así que img/polkaholic.jpg. El alt aquí va a ser Polkaholic. También nos olvidamos de poner nuestro texto alt por aquí, así que digamos algo así como “Retrato de un gato” y “Retrato de un perro”. Está bien. Perdón, de vuelta a nuestra música, y luego de nuevo nuestro enlace a Amazon. Entonces, a href=” http://amazon.com/polkaholic”. Ahí dentro, vamos a decir, “Compra este CD”. Ese será el texto de enlace que la gente verá y cuando vea “Comprar este CD”, podrán hacer click en él y conseguir este genio musical. Entonces, eso es todo para nuestra página de trabajo, y se puede ver que termina con nuestro contenido adicional, que ya teníamos cuando copiamos y pegamos. Entonces, vamos a guardar este archivo y ver cómo se ve en nuestro navegador. Aquí está nuestra página de trabajo. Entonces de nuevo, tenemos nuestro logotipo y nuestros enlaces de navegación, entonces tenemos nuestro título de trabajo. Tenemos la sección de cómics web y primero, aprendemos un poco sobre las Crónicas de Lasaña junto con el enlace para leer las Crónicas de Lasaña. Tenemos Cat Town con nuestra imagen del Cat Town y nuestro enlace para leer Cat Town. Tenemos la sección de retratos para que podamos ver tenemos el retrato de gato y el retrato de perro para que sepamos que esos están disponibles y parte del trabajo de Jon. Tenemos la sección de música con The Best of Jonny Arbs viviendo bajo eso y ese es el CD polkaholic y el link para comprar el CD en Amazon. Después terminamos con nuestro contenido de pie de página. Entonces, ahora que nuestra página de trabajo está hecha, sigamos adelante y hagamos nuestra página Acerca. Vamos a hacer “Archivo”, “Nuevo Archivo” y de nuevo, podemos copiar y pegar de nuestros otros proyectos si queremos o podemos escribir cosas para poder decir doctype html y luego necesitaremos nuestro elemento HTML con nuestro “lang” atributo. Cerraremos eso, nuestro elemento de “cabeza” para contener nuestros metadatos, nuestro elemento de “cuerpo” para sostener nuestra copia para la página. Necesitaremos los metaelementos para definirlo como utf-8. Necesitaremos una etiqueta de título para nuestra página, en este caso, vamos a decir “Acerca de” y luego queremos seguir con la sintaxis que estamos usando para los otros títulos así que vamos a decir “El Portafolio de Jon Arbuckle” y vamos a colocar que ahí dentro. Voy a guardar mi archivo y vamos a guardarlo es about.html y guardarlo me va a volver a conseguir esta sintaxis de color para poder asegurarme de que estoy escribiendo las cosas correctamente. Ahora, vamos a entrar en nuestra sección de cuerpos. Entonces, recuerda, vamos a querer tener nuestro contenido de cabecera. Puedo agarrar todo esto desde aquí y decir “Editar”, “Copiar”, “Editar”, “Pegar”, la información de Contenido de la Página, y voy a querer terminar con el pie de página que también voy a copiar y pegar desde esta otra página para asegurarme de que es lo mismo. Todo conjunto. Ahora, agreguemos nuestro Acerca del contenido. Volviendo a nuestro esquema de contenido, ya hemos hecho nuestro contenido de encabezado y nuestro contenido de pie de página. Hemos actualizado el título de la página pero ahora, hagámoslo también el h1 de la página. Entonces, <h1> Acerca de. A lo mejor quieres decir “Sobre Jon”. Entonces vamos a querer incluir una imagen de Jon, un par de párrafos que describen a Jon, y algunas de sus habilidades y servicios profesionales que se ofrecen dentro de una lista. Tenemos la imagen de Jon con nuestra etiqueta img. Eso lo haremos con el archivo arbuckle-bio.jpg, así img/arbuckle-bio.jpg, entonces vamos a tener algunos párrafos sobre Jon. No estoy realmente seguro de qué va a ser esto todavía así, por ahora, sólo voy a usar el generador Lorem Ipsum. Te acordarás que puedo hacer eso solo buscando generador lorem ipsum y solo voy a agarrar de aquí que es el Lipsum y dirán que generan cinco párrafos, eso es mucho, solo voy a hacer dos párrafos. Entonces voy a seleccionar todo esto, “Editar”, “Copiar”, volver a mi texto Sublime y “Editar”, “Pegar”. Eso es mucho texto. Vamos a sangrar esto para que coincida con la sangría del resto de nuestro documento. Entonces agreguemos las etiquetas de párrafo alrededor de esta copia. Entonces, abriendo etiqueta p y luego vamos a cerrar la etiqueta p. Lo mismo aquí abajo, cerca. Después de eso, vamos a tener esa lista de cosas que Jon ofrece por sus servicios. A lo mejor queremos agregar un encabezamiento para esta lista porque si apenas empezamos a poner los ítems de la lista, gente puede no saber cuál es esta lista. Entonces, vamos a añadir un encabezamiento. Ahora mismo, estamos en un h1 y aún no hemos tenido un h2 en la página así que vamos hacer h2 y luego decir “Servicios Profesionales”, y cerrar el h2. Ahora, en este caso, los elementos de la lista de Jon para su lista de servicios básicamente no están clasificados uno sobre otro por lo que podemos usar una lista desordenada. Entonces, abre nuestro ul y luego asegúrate de cerrarlo y luego recuerda, necesitamos nuestros ítems de lista. A lo mejor algo como “Dibujo”, “Ilustraciones”, “Acuarelas ”, “Bodas”, para su banda cuando quieren tocar bodas o tal vez hace caricaturas allí también. Estos son algunos ejemplos de los servicios profesionales que ofrece. Si quieres agregar algunos elementos de lista más, sin duda puedes agregar tantos como quieras así que siéntete libre de hacerlo. “ Clases de baile”, “Consultoría Sudoku”. Esos son los servicios profesionales de Tom y eso es todo en nuestra página Acerca. Entonces, vamos a guardarlo y ver cómo se ve. Ahora, vemos nuestra página Acerca. Entonces, de nuevo, tenemos nuestro encabezado pero ahora tenemos nuestro h1 es Sobre Jon. Tenemos esta imagen de Jon luciendo feliz y acogedora. Este texto de Marcador de posición en este momento será para su biografía. Algo así como “Hola, soy Jon. Llevo trabajando en ilustración desde 1965. Me encanta hacer retratos de animales y me gusta tocar mi acordeón con mi canción de polka”, etcétera. Toda esta copia podría estar entrando aquí. Entonces tenemos un rumbo, nuestros Servicios Profesionales está en h2 y ese rubro es para esta lista desordenada aquí, muchos de ellos tengo que escribir. Pero este rubro es para aquí y tenemos una lista desordenada con seis elementos de lista en ella. Recuerda, siempre podemos usar a nuestro Inspector para ver cómo están las cosas. Echemos un vistazo a eso. Podemos ver que esta es una imagen, que tenemos una lista desordenada. Puedo abrir eso y ver cada uno de estos como un elemento de lista. Entonces a la vista de eso, tenemos un enlace de anclaje. Aquí está nuestro h1 para Acerca de Jon. Bajando, aquí está nuestra imagen y resalta al pasar el rato sobre ella. Aquí tienes un párrafo. Yo puedo ser como, “me pregunto qué es esto”. Recuerda, podemos hacer click directamente sobre él, Inspeccionar elemento, y podemos ver que estos son “LI"s dentro de la ul que escribimos. Párrafo, el fin de nuestro cuerpo y el fin de nuestro HTML. Esas son algunas de las formas en que querrías usar el Inspector para ver cómo están las cosas en una página en tu sitio web o en los sitios web de otras personas. Tenemos una página más para ir y esa es nuestra página de Contacto. Hagamos un nuevo archivo. “ Archivo”, “Archivo Nuevo”. Empezaríamos a guardar esto desde el principio en cuanto lo abriéramos. Podemos decir contact.html, asegúrate de que lo estamos guardando en el lugar adecuado. Voy a utilizar la página Acerca de como modelo para esto así que voy a “Selección”, “Seleccionar todo”. Voy a copiar esto y voy a pegarlo. Recuerda, quiero actualizar las cosas dentro Page Content todo el camino hasta pie de página así que pondré mi cursor ahí y luego, mientras mantengo presionado Shift, seleccionaré aquí abajo el cual seleccionará el texto entre esos dos lugares, y luego solo voy a dar clic en Eliminar. También quiero actualizar nuestra etiqueta de título. En lugar de decir “Acerca de Jon”, supongo que diremos “Contacta a Jon”. A continuación, vamos a querer poner aquí la información de contacto. Para la página Contacto de Jon, vamos a tener nuestra h1 como su contacto, dirección de correo electrónico de Jon, y una lista de enlaces a su presencia en redes sociales. Esta va a ser una página bastante básica. Tendremos nuestro h1 que dice “Contacta a Jon”. Entonces vamos a tener un poco de texto de párrafo para describir lo que estás haciendo. Algo así como, “A Jon le encantará saber de ti”. Envíale un correo electrónico a jon@jonarbs.com. Ahora, para el jon@jonarbs.com, en realidad queremos que ustedes puedan hacer clic en eso para enviar un e-mail, estoy seguro que ustedes ya han visto esto en Internet antes. ¿Cómo hacemos eso? ¿ Cómo hacemos otras cosas cuando tenemos que pinchar sobre ellas? Utilizamos un enlace de anclaje. Pongamos un enlace de ancla alrededor de eso. Entonces, a href= "”, este es nuestro texto de enlace. Cerremos ese ancla alrededor de eso. Abre eso para ver eso. Para hacer un enlace de correo electrónico en lugar de enlazar a un sitio web, lo que vamos a hacer es escribir “mailto:” y luego la dirección de correo electrónico de donde te gustaría que se dirija el enlace. Esto se enviará por correo a jon@jonarbs.com. Si encuentras que estás recibiendo mucho spam de alguien como este en tu sitio, es posible que quieras buscar algo como woohoo.com que ofrece formularios de contacto y también solo validación para que intentes evitar el spam. Pero por ahora, mantengámoslo así. Entonces también queremos tener los enlaces de Jon en redes sociales. Entonces, hagamos otro rubro porque vamos a hacer una lista de enlaces y queremos que la gente sepa cuál es esa lista. Vamos a decir “En otro lugar en las Interwebs”, y eso serán enlaces a Jon en otro lugar en las interwebs. Entonces, vamos a volver a usar esa lista desordenada. Vamos a tener un elemento de lista y vamos a tener un enlace a Jon en otro lugar. Entonces, esto irá a su página de Twitter, twitter.com/jonarbs, y pongamos una cita de cierre aquí en jonarbs. A lo mejor Jon también tiene una página de Facebook, así que vamos a conseguirle un enlace en Facebook, /jonarbs. A lo mejor diremos algo como el de Jon, vamos a usar una entidad ahí, lo que rsquo para la cita de solteros derecha, página de Facebook Fan de Jon. Cierra el enlace y luego también recuerda cerrar el Li. Entonces tal vez Jon también está en Pinterest porque le gusta anclar su obra de arte. Entonces, diremos pinterest.com/jonarbs, así Jon en Pinterest, y luego cerraremos ese elemento de la lista. Entonces, están sus enlaces a redes sociales en otros lugares en las interwebs. Guardemos esto y luego veamos cómo se ve nuestra página Contacto. Ahí está, corto y dulce pero exactamente lo que la gente necesita en una página de Contacto. Entonces, tenemos nuestro encabezado de nuevo, nuestro h1 para contactar a Jon, un poco de texto de párrafo con nuestro enlace en línea señalando a su dirección de correo electrónico, verás “mailto jon@jonarbs.com”. Si hago click en eso, verás que abrirá mi programa de correo. No uso el correo muy a menudo en este equipo así que cancela fuera de eso. Entonces tenemos Elsewhere on the Interwebs que, en este esbozo de contenido, vive bajo Contacto Jon, y tenemos su Twitter, su Facebook, y su página de Pinterest. Después terminamos con nuestro pie de página. Entonces, ahí lo tienes, el HTML para cuatro páginas de nuestro portafolio. Nos vemos bastante bien en este momento pero en realidad podemos llegar de una página a otra sin abrir el archivo por separado. Entonces, en el siguiente video, hablaremos de cómo vincular las páginas juntas. 23. Conecta páginas separadas: Entonces, ahora tenemos las cuatro de nuestras páginas pero no hay forma de llegar de una página a otra. Entonces, vamos a querer volver a nuestra navegación y agregar el valor apropiado para donde deberían ir esos enlaces de texto. Entonces, empecemos por donde la última vez que lo dejamos cuál fue con nuestra página de contacto. En nuestra página de contacto, para poder llegar a nuestra página de trabajo, necesitamos poder encontrar el archivo work.html. Entonces, nuestros valores href aquí siguen la misma lógica que hicieron nuestras fuentes de imagen. Podemos o bien poner un valor absoluto o relativo. Entonces, aquí abajo, cuando enlazamos a Twitter, ese es un camino absoluto a la cuenta de Twitter de John Arbs en twitter.com. Vimos lo mismo cuando hicimos imágenes. Comienzan con el HTTP y luego hacen la dirección completa de donde se encuentra el archivo o enlace. En este caso, vamos a querer usar URL relativas porque vamos a una página dentro de nuestro propio sitio. Entonces, al igual que nos vincularíamos a una imagen, vamos a enlazar al archivo the.html, en este caso, para que uno se vincule al archivo work.html. Debido a que la página de contacto está en los mismos niveles de trabajo, no necesitamos subir un nivel o en una carpeta. Está en el mismo. Entonces a diferencia de entrar en algo como pages/work.html, estamos en el mismo nivel por lo que sólo podemos ir a work.html. Lo mismo para about.html y contact.html. Guardemos esto. Ahora, si volvemos a subir nuestra página de contactos, verás que el trabajo sobre en contacto ahora están enlazados y lo podemos decir a partir de los subrayados y el color. Entonces, si queremos ir a la página de trabajo podemos dar click en “trabajar” si queremos ir a la página Acerca de arriba tenemos un problema que no agregamos en el texto para esto todavía. Vamos a tocar el botón “Atrás” ahora mismo y desde la página de contacto donde sí agregamos los enlaces correctos y haremos clic en “Acerca de” y eso nos lleva a la página sobre. Por supuesto que ya estaban en la página de contacto. Entonces, ese está todo listo. Entonces, el trabajo sobre y el contacto ya están en pero nos falta otra página. ¿ Verdad? ¿Qué pasa con la página de inicio. A veces la gente podría querer volver a donde empezaron. Tenemos dos opciones aquí una, podríamos añadir otro enlace en nuestra lista de enlaces para casa. La otra opción que verás con bastante frecuencia es hacer del logotipo un enlace a la página de inicio. Entonces, hagámoslo en su lugar. Vamos a volver a nuestra página de contacto y queremos esencialmente hacer de esta imagen un enlace. Recuerda a veces es fácil si decimos en voz alta qué es lo que estamos tratando de hacer. Entonces, quiero hacer de la imagen un enlace igual que cualquier otro enlace donde pongamos texto dentro de ella también podemos poner una imagen dentro de una etiqueta ancla. Entonces, vamos a rodear esta imagen la cual estará actuando como el enlace para la página de inicio la vamos a rodear con una etiqueta de ancla. Entonces, un href igual a encerrar que ahora vamos cerrarlo al final y ahora esto hace este enlace de imagen y ¿a dónde queremos que vaya esto? A la página de inicio y cuál es nuestra página de inicio? Index.html. Entonces, justo aquí vamos a enlazar a eso vamos a guardar esto volver a nuestro navegador y ahora verás cuando el cursor sobre esto cambia a este puntero indicando que es un enlace. Entonces, cuando hago click en esto estoy de vuelta en la página de inicio. Todavía no hemos actualizado la página de inicio por lo que verás esto se queda como cursor porque aún no es un enlace pero si volvemos nuestra página de contacto ahora tiene todos los enlaces correctos. Entonces, ¿qué podemos hacer? Bueno, simplemente podemos copiar toda nuestra sección de encabezado y reemplazarla en todas nuestras páginas. Entonces, editar pegar. Esa es una página de nuestro sobre vamos a guardar eso. Vayamos a nuestra página de trabajo y hagamos lo mismo reemplazar toda esta sección de encabezados. puede ver lo fácil que es encontrar lo que estamos buscando debido a nuestros comentarios HTML. Guarda eso, vuelve a nuestra página de inicio y solo para revisar una vez más recuerda envolvimos un ancla alrededor de nuestra imagen porque podemos hacer de eso un enlace. Hicimos eso un enlace a index.html y luego agregamos en las rutas relativas correctas para estas páginas; así, work.html, about.html, y contacts.html. Aquí puedes ver por qué el nombre inteligente como Work, About, and Contact para nuestras páginas hizo realmente fácil recordar las páginas a las que estábamos enlazando sin tener que revisar nada en nuestro panel lateral. Entonces, ahora todas nuestras páginas tienen enlaces. En realidad teníamos unos cuantos más, en esta página de inicio, ¿no? Ver los comentarios de Jon? Eso va a ir a la página work.html. Entonces, vamos a guardar eso, y creo que ya estamos todos arreglados con esto. Arriba, no, una más. Recuerda que queremos contratar a Jon y vamos a contratar a Jon. Vamos a enviarlos a la página de contacto para ponernos en contacto. Entonces, vamos a que esto vaya a contact.html. Ahora archivo-guardar. Está bien. Entonces, ahora estamos en nuestra página de contacto, y ahora mira. No importa a qué página vaya, tenemos un sitio totalmente clicable. De vuelta a la página principal, podemos bajar aquí y decir ver los cómics de Jon. Sí. Se puede ver cuando vamos a la página de trabajo, ahí los cómics de Jon. Si volvía a la página de inicio y realmente quisiera solo ponerme en contacto con Jon, podría ponerme en contacto en la página de contacto, y sé que puedo enviarle un correo electrónico o encontrarlo en internet. Entonces, ahora tenemos nuestro sitio web de portafolio de cuatro páginas totalmente clicable. Aprendimos mucho sobre nuestro html en nuestras páginas en esta lección. Completamos el resto de nuestras páginas marcando nuestro contenido en base a nuestro esquema de contenido. Se puede ver cómo crear ese contorno de contenido en el principio realmente dictaba hacia dónde vamos. Con la ayuda del mapa del sitio y el contenido teníamos una dirección, teníamos un objetivo. A veces puede ser realmente desalentador cuando simplemente estás mirando un nuevo archivo y diciendo : “No sé qué poner en esta página”. Si tienes esa sensación, agarra un trozo de papel, agarra un bolígrafo, abre algún tipo de programa informático, abre TextEditor, abre Photoshop, abre uno de muchos archivos, y simplemente empieza a escribir información que conoces que quieras estar en tu Sitio Web. Es un gran lugar para empezar y luego te da un objetivo a lograr. Cuando empieces a mirar tu contenido, puedes visitar sitios como HTML Dog y averiguar qué tipo de elementos estarás queriendo marcar tu contenido. Por lo tanto, asegúrate de haber completado tus cuatro páginas. Agrega todo el contenido en. Si estás usando tu propio contenido, asegúrate de que también lo estás marcando. Entonces, por último, agrega enlaces para que sea un sitios totalmente clicables y nadie se queda atascado en un callejón sin salida dentro de tu Sitio Web. Sólo nos queda una lección para ir. Repasemos algunas cosas como la solución de problemas y los próximos pasos. 24. Resolución de problemas: este momento, todo en nuestro sitio funciona genial y eso es increíble. No obstante, odio ser portador de malas noticias pero eso no siempre va a pasar. Te vas a tropezar con errores y bloqueos y es importante cubrir algunas formas de solucionarlo. La primera forma es agarrar a un compañero, a veces tener los ojos separados en un proyecto que has estado mirando desde hace tiempo realmente puede ayudar. tipográficos en documentos HTML pueden arrojar muchos errores y así que a veces solo alguien mirando por encima de tu hombro y diciendo: “Oh mira te olvidaste de cerrar una etiqueta” es realmente útil. A veces, no siempre tenemos eso y por mucho que desearía que mis gatos me ayudaran a solucionar problemas, no lo hacen. Entonces, en cambio tenemos que buscar otras formas de hacerlo, voy a volver a uno de nuestros documentos, nuestra Página de Contacto y sólo voy a hacer algo aquí como olvidar cerrar esta etiqueta 'a'. Cuando estás escribiendo muy rápido, eso pasa mucho, así que, definitivamente es posible que te encuentres con algo como esto. Voy a guardar este archivo y luego lo voy a volver a previsualizar en nuestro navegador. Cuando refresco esta página de inmediato, puedo ver que aquí hay algún contenido roto. Lo que voy a hacer primero es inspeccionarlo y decir: “Oye, ¿qué es eso?”. Puedo perforar y ver eso justo después de esta fuente de imagen, está apareciendo esta pequeña imagen la cual no se supone que debe. Entonces, para mí esto identifica que el problema viene justo después de nuestro logotipo de imagen, eso me permite volver atrás y luego decir, 'logo de imagen' y luego puedo decir: “Oh mira eso, me olvidé de cerrarlo”. Otra forma en que pude identificar que como el problema es a través la sintaxis de color de nuestro editor HTML, así, como podemos ver, todos nuestros elementos suelen ser un corchete abierto blanco y luego un nombre de pestaña rosa. Si vengo aquí abajo, puedo ver que esta 'a' en realidad está en blanco, demostrándome que no se está renderizando como la etiqueta adecuada. Esa es otra forma de identificar que tengo un problema en esta vecindad general, y luego normalmente puedo ver, “Oh, mira, me olvidé de cerrarlo”. Entonces, yo puedo hacer eso. Hablamos de esto un poco antes, pero a veces nos olvidaremos de o cerrar una cita, algo así sucede a menudo y se puede ver que todos mis atributos son verdes, pero veo que éste es amarillo, entonces, que identificará que en algún lugar entre aquí y aquí algo salió mal. Cuando es verde, todo estaba bien, cuando es amarillo, en algún lugar, algo salió mal. Una forma en que puedo averiguar qué está mal es simplemente pasar y decir, fuente es igual a cita, aquí está lo mío, “Oh, mira me falta una cita”. A veces, simplemente no lo puedes ver y me parece que es mejor en ese punto, solo reescribe todo el asunto, así que, solo reescribirlo de nuevo, fuente es igual, asegúrate de escribir tu forma de shell al principio así, tienes toda tu citas y luego vuelve a poner tu texto aquí para image.logo.png. Sólo tienes que deshacer eso para volver a ponerlo, y arreglemos la cotización. Si eso no funciona, también tenemos el validador W3, el validador W3 es impresionante. Ponemos nuestro código y va y comprueba si hay errores. Entonces, eliminemos eso y le demos un error, lo que voy a hacer es guardar esto. Voy a seleccionar todo y luego puedes marcar esta página, pero si lo olvidas solo busca, validador W3. Voy a dar click en ese primero, el W3C Markup Validation y luego puedes validar por URI, eso significa que puedes poner aquí una dirección web. Puedes subir tu archivo, o simplemente vamos a hacer validarlo por entrada directa. Aquí, voy a pegar todo mi código y luego voy a hacer clic en 'checar'. Tengo este rojo en la parte superior lo que me dice que algo anda mal y dice que hay seis errores encontrados. Si te desplazas un poco por la página, Te va a dar tus errores. Entonces, errores, salida seis errores y dice: “Línea 13, Columna 52: No hay espacio entre atributos Y yo digo: “¡Ja! ¿Qué es eso?” Yo miro esto, y tal vez eso no me tiene sentido exactamente, pero lo sé, ahora que busco la línea 13 así que, si vuelvo a mi editor de texto. Suficiente línea 13 Ya he identificado dónde está el problema que hace más fácil averiguar que me falta esa cita. Entonces, una vez que me di cuenta de que tengo eso fijo, puedo volver a guardar mi documento, voy a Control-A o Comando-A para seleccionar todo, Comando-C, Control-C y ahora quiero volver a ejecutar esto. Entonces, lo que puedo hacer es, seleccionar todo esto, pegar mi nuevo código en y luego está esta revalidación por aquí y oye, ahora todo está bien. Te darás cuenta de que en realidad decía seis errores en el último, eso es porque una vez que tienes un error puede hacer una serie de otros errores. Entonces, lo mejor es empezar por el primero, averiguar ese fuera y ver si eso lo arregla todo. Aquí hay dos advertencias, puedes ignorar las advertencias por ahora, eso tiene que ver con usar el tipo de doc HTML5 que estamos usando. Los validadores son manera realmente útil de ver cualquier problema en su código. Si las cosas alguna vez se ponen realmente mal, a veces lo que me gusta hacer es hacer un nuevo archivo. Entonces, aquí hay un archivo nuevo y lo seleccionaré todo, lo muevo ahí y luego volveré a mi viejo archivo, esto va a parecer muy tedioso pero lo que hago es básicamente simplemente empezar a ir de una línea a la vez. Entonces, guardo esto, vuelvo a mi navegador y digo: “Está bien, luce bien”. Entonces pongo en la siguiente línea y digo: “Está bien, sigue luciendo bien”. Así que básicamente vas hasta que puedas identificar específicamente dónde está el problema, eso es una especie de último recurso pero a veces lo vas a necesitar. La buena noticia es, es que cuanto más y más tiempo escribas HTML, más fácil será para ti identificar los problemas comunes o problemas comunes con los que podrías encontrarte, cosas como errores tipográficos, cosas como atributos no citados, cosas como olvidar cerrar una etiqueta. Nos pasan a todos y como que pasan bastante. Por suerte tenemos estas herramientas y te prometo que cuanto más y más escribas esto, más fácil será. Te recomiendo encarecidamente que el W3C busque más cosas si alguna vez buscas información como el validador W3 y también un recurso de confianza muy bueno para encontrar información sobre HTML. De alguna manera puede ser un poco seco y aburrido, pero es un recurso realmente bueno tener así que asegúrate de marcar eso. Voy a volver a ajustar nuestra página de contacto a lo que era, copiando todo esto y ahorrando. Entonces, ahora tenemos un sitio web pero si nota la única forma de ver este sitio web es en su propio equipo. Pero parte del resplandor de la web es poder guardar nuestras páginas con otras personas, para poder compartir, vamos a necesitar subir nuestro contenido y lo cubriremos en el siguiente video. 25. Cómo cargar contenido a un servidor web: Entonces, para poder subir tus páginas a la web, vas a necesitar alojamiento web. Hay muchos servicios de hospedaje web por ahí. Básicamente, lo que esto hace, es que es una computadora que guarda todos tus archivos, luego servirla a Internet. Eso ha sido demasiado tiempo explicando esto. Si quieres ir en profundidad, simplemente puedes hacer una búsqueda de alojamiento web para enterarte un poco más. Pero, sí quiero que conozcas las partes necesarias de lo que necesitarás. Por lo tanto, necesitarás un servicio de hospedaje web. Algunas son más caras que otras, mucho de eso se basa en cuántos visitantes tienes a tu sitio. También puedes echar un vistazo a las reseñas de diferentes hosting, esa es una muy buena para comprobar antes de decidir cuál vas a usar. Entonces, solo haz una búsqueda de opiniones. Podemos ver qué tiene que decir Techcrunch, y éste está revisando ReviewSignal, que aparentemente nos dice un poco sobre la comparación del alojamiento web, así que esa es una opción. Una vez que decidas qué hosting quieres, vas a registrarte para obtener una cuenta, y luego también vas a necesitar un nombre de dominio. Entonces, el nombre de dominio es algo así como techcrunch.com es el nombre de dominio, jennlukas.com es el nombre de dominio. Vas a decidir qué nombre de dominio quieres. También te vas a asegurar que esté disponible. Domize.com es un sitio que puedes usar, así que si quería registrar jonarbs. Lo buscará y dirá jonarbs azul, así que jonarbs está disponible. Entonces, necesitas registrar tu nombre de dominio. También tienes opciones de dónde puedes registrar tu nombre de dominio. Entonces, básicamente, se quiere buscar un registro de URL. Por lo tanto, puedes buscar el registro de URL y encontrar un lugar. Hay muchas características diferentes, así que asegúrate de hacer tu investigación antes de decidirte por una. Una vez que tienes una URL y una vez que tienes hosting web, lo siguiente que quieres hacer es conseguir tus archivos desde tu computadora hasta tu host web. Eso se hace a través de un programa FTP o protocolo de transferencia de archivos. Entonces, uso un programa llamado Transmitir y Transmitir está en el Mac, pero ciertamente hay muchos programas FTP por ahí también. Ustedes notando un patrón, hay muchas opciones que tienen. Esencialmente, lo que vas a hacer es que vas a configurar tu información FTP, y eso lo obtendrás de tu hosting web cuando te registres en eso. Entonces, pondrás tu servidor, tu nombre de usuario, tu contraseña. Después, una vez que te conectes a tu servidor, podrás arrastrar tu carpeta del sitio desde tu escritorio, o desde tu computadora dondequiera que la hayas guardado, a tu información FTP. Una vez que todo eso termine, si alguien va a tu URL que has registrado como jonarbs.com, buscará un archivo index.html en tu host web. Cuando lo encuentre, entonces lo mostrará a los usuarios en su página. Muchos de esos hosting web y registro de nombres de dominio ofrecen mucha atención al cliente. También recomiendo investigar eso porque si alguna vez te encuentras con problemas, es genial tener un número de teléfono al que puedas llamar o un correo electrónico o un chat en vivo. Preguntaremos a alguien cómo ayudar y muchas veces están realmente dispuestos a hacerlo. Entonces, así es como obtienes tu contenido de tu computadora a tu sitio. Por último, hablemos un poco de los próximos pasos después de eso. 26. Próximos pasos: Entonces ahora tenemos un sitio de portafolio de cuatro páginas y todo el HTML es semántico. Nosotros lo hemos validado. Nos hemos asegurado de que todo esté bien, y eso empieza como nuestra base para construir un sitio web completo. Entonces en este momento tenemos todo el contenido en la página y eso es genial. No importa el tamaño de pantalla que tengas, se ajustará a tu pantalla, siempre y cuando las imágenes no se desborden, y es realmente fácil para la gente leer lo que está pasando aquí. Tenemos que aprender las cosas sosas para poder llegar a las cosas más bonitas sin embargo. Entonces, después de tener tu HTML, vas a querer aplicar estilos. Vas a querer colores, tamaños de texto imágenes de fondo. Probablemente vas a agregar ancho a las cosas. Va a ser realmente impresionante. Te lo prometo. Por lo que el siguiente paso es aprender CSS o Hojas de Estilo en Cascada. Hojas de estilo en cascada son la capa de presentación de tu sitio web. Un muy buen ejemplo de cómo CSS puede afectar a tu página web está en el sitio web CSS Zen Garden. CSS Zen Garden se basó en el concepto de que hay un archivo HTML, y todos agarran ese archivo HTML pero luego enviaron diferentes archivos CSS al sitio. Entonces si revisamos la vista todos los diseños, así que aquí te dejamos un sitio web y está en el CSS Zen Garden, y puedes ver que tiene contenido y, medida que te desplazas, el fondo se mantiene fijo. Es bastante guay. Echemos un vistazo por aquí. Esto se ve muy diferente, ¿verdad? Entonces aquí hay otro ejemplo. Enfriar. Aquí hay otro sitio web, y aquí hay uno más. Los tres se ven mucho diferentes, ¿verdad? Esto es lo que es impresionante. Si vemos la fuente de todos estos, son todos iguales menos un pequeño cambio de JavaScript aquí, que tiene que ver con cargar las fuentes. La idea del CSS Zen Garden es que todo el HTML en la página sea el mismo en todos los sitios. Entonces ya verás aquí, tenemos echando basura a una roa oscura y lúgubre, echando basura al camino oscuro y lúgubre. Todos los HTML para estas páginas son iguales. Pero puedes ver con CSS, puedes hacer que tu sitio web luzca como quieras. Pero con todas estas páginas tienen en común es que tienen una fuerte base semántica con el HTML que se escribió. Bueno, eso termina nuestra intro al HTML. Espero que te divirtieras mucho. Ciertamente lo hice. Creo que HTML es muy divertido, y espero que sigas con él. Acompáñame la próxima vez en mi intro de seguimiento a clase CSS, y avísame de lo que estás haciendo. No puedo esperar a verte en Internet.