¡Comienza a crear sitios web hoy mismo! No se requiere experiencia. | Aaron Craig | Skillshare
Buscar

Velocidad de reproducción


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

¡Comienza a crear sitios web hoy mismo! No se requiere experiencia.

teacher avatar Aaron Craig, Helping Everyone Learn the Best They Can

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Lecciones en esta clase

    • 1.

      1.1 Introducción de el curso

      1:02

    • 2.

      1.2 - por qué aprender HTML y CSS de cualquier manera

      0:53

    • 3.

      1.3 - estructura de la curso

      1:47

    • 4.

      2.1 - Qué es y no es lo

      3:43

    • 5.

      2.2 - HTML básico

      13:23

    • 6.

      2.3 - un poco más avanzado

      10:39

    • 7.

      2.4 - estructura necesaria

      5:08

    • 8.

      3.1 ¿Qué es la CSS?

      3:05

    • 9.

      3.2 con etiquetas HTML con estilo

      18:33

    • 10.

      3.3 identificaciones y clases

      7:54

    • 11.

      3.4 - algunas cosas de CSS

      2:41

    • 12.

      4.1 Recursos en línea estupendos

      3:43

    • 13.

      4.2 ¡Tu primer sitio web!

      3:02

    • 14.

      5.1 ¿Qué continuación?

      4:07

  • --
  • Nivel principiante
  • Nivel intermedio
  • Nivel avanzado
  • Todos los niveles

Generado por la comunidad

El nivel se determina según la opinión de la mayoría de los estudiantes que han dejado reseñas en esta clase. La recomendación del profesor o de la profesora se muestra hasta que se recopilen al menos 5 reseñas de estudiantes.

870

Estudiantes

--

Proyectos

Acerca de esta clase

Muchos creen que el desarrollo web es solo para neres, programadores o solo ¡Ninguno de esos son verdad!

Cualquier persona puede convertirse en un desarrollador web, y este curso se pondrá en mano. Si eres un principiante, alguien que nunca has programado antes, entonces este es el punto inicial perfecto. En este curso, vamos a abordar lo que son HTML y CSS y cómo usar ambos y cómo funcionan en conjunto para hacer sitios increíbles.

Construir sitios geniales no está fuera de tu habilidad, y tienes algún momento comienzo en algún lugar, ¡así que toma este curso!

Conoce a tu profesor(a)

Teacher Profile Image

Aaron Craig

Helping Everyone Learn the Best They Can

Profesor(a)

Hey there! My name's Aaron, and I love to teach, play, and make games. I've been teaching for several years, and developing video and physical games just as long.

I also love family time, movies, and web design.

Ver perfil completo

Habilidades relacionadas

Desarrollo Desarrollo web
Level: Beginner

Valoración de la clase

¿Se cumplieron las expectativas?
    ¡Superadas!
  • 0%
  • 0%
  • Un poco
  • 0%
  • No realmente
  • 0%

¿Por qué unirse a Skillshare?

Mira las galardonadas Skillshare Originals

Cada clase tiene lecciones cortas y proyectos prácticos

Tu membresía apoya a los profesores de Skillshare

Aprende desde cualquier lugar

Ve clases sobre la marcha con la aplicación de Skillshare. Progresa en línea o descarga las clases para verlas en el avión, el metro o donde sea que aprendas mejor.

Transcripciones

1. 1.1 Introducción de el curso: Saludos y bienvenidos. Mi nombre es Aaron Craig y voy a ser tu instructor para este curso para principiantes absolutos a HTML y CSS. Este curso está dirigido a personas que siempre han querido hacer un sitio web pero no sabían muy bien por dónde empezar. O estaban demasiado intimidados por el proceso de aprender a codificar o la tecnología detrás de él. Te voy a decir que puedes ser desarrollador web y estoy aquí para ayudarte en ese camino. Vamos a estar cubriendo los conceptos básicos de HTML y CSS paso a paso, cómo funciona, cómo armarlo y cómo diseñar tu primer sitio web. Si sabes codificar, puedes tomar este curso, pero va a ir muy lento y solo va a ser un refresco para ti, pero si no sabes codificar o crees que conoces a alguien que suena como este curso sería bueno por, te animo a compartirlo con ellos, sácalo ahí porque todos pueden ser desarrolladores web si quieren y creo que esto va a ser un gran curso para ellos y para ti. Con eso dicho, hablemos de por qué HTML y CSS siguen siendo relevantes hoy en el próximo video. 2. 1.2 - por qué aprender HTML y CSS de cualquier manera: Por lo que en este día y edad, puede que no parezca necesario aprender HTML y CSS. Probablemente hayas visto anuncios de Squarespace y Wix y WordPress, arrastrar y soltar, construirlo tú mismo. No se requiere experiencia de codificación en absoluto, y algunos de esos pueden funcionar. Puedes hacer algunos sitios web bastante bonitos con esos, pero la cosa es que cada sitio web en Internet utiliza HTML y CSS como su columna vertebral. El modo en que se entrega puede verse muy diferente dependiendo de la tecnología que se esté utilizando, pero sigue siendo HTML y CSS, razón por la cual creo firmemente que es esencial que cada desarrollador web tenga un agarre en él y que es lo que este curso va a hacer por ti. Vamos a cubrir lo básico y te voy a dar los recursos para seguir aprendiendo después de este curso para convertirte en el mejor desarrollador web que puedas. Ahora en el siguiente video, hablemos de cómo se estructura este curso y de la mejor manera para que lo saquen al máximo. 3. 1.3 - estructura de la curso: Este curso está diseñado para ser un curso de codificación de seguimiento. Eso significa que voy a estar escribiendo lo que estoy diciendo y explicándolo a medida que vamos. Pero deberías tenerme arriba al costado de un segundo monitor o en tu monitor primario y estar codificando junto a mí. Si no lo estás, no estarás obteniendo lo que necesitas para salir de este curso. Podrás ver un 1000 tutoriales sobre cómo lanzar una jabalina. Pero hasta que estés fuera en el campo probándolo, todo es conocimiento de cabeza, no práctico. Lo mismo viene para aprender idiomas y codificar en general. Tienes que estar haciéndolo tú mismo. Estar haciendo el sitio web como lo hacemos nosotros también y estarás mucho mejor. Como estás viendo, si tienes alguna pregunta, siéntete libre de hacerlas. Recuerda, este curso está dirigido a principiantes. Si te encuentras con un problema o un problema, o no estás seguro de algo, no vas a ser el único así que pregúntalo y haremos todo lo posible para responderlo. Conforme vamos adelante, si te estás preguntando, hmm, me pregunto si esto podría hacer eso, pausar el video y probarlo. Esa es otra gran manera de aprender y estarás mucho mejor para ello. Al final de ese rastro de conejo, conocerás nuevos conocimientos de si algo funciona o no, y eso es genial. Ahora voy a estar usando Visual Studio Code, una pieza de software que es libre y de código abierto para todos en cualquier plataforma. Puedes usar eso o algo más. Realmente no importa. Te voy a mostrar cómo hacer un archivo HTML cargado y ver los cambios que has hecho a medida que avanzas. Todo lo que hagamos en este curso va a ser independiente de software y plataforma así que usa lo que sea que estés cómodo y estarás bien para ir. Ahora con todo eso fuera del camino, estamos listos para sumergirnos en mirar qué es HTML y cómo funciona. Estoy súper emocionado. Espero que tú también lo estés, y te veré en el siguiente apartado. 4. 2.1 - Qué es y no es lo: El primero que quiero cubrir es qué es el HTML y cómo se diferencia de los lenguajes de programación tradicionales, de los que podrías haber oído hablar y quizá no tengas. HTML significa Lenguaje de marcado de hipertexto. Se trata de un lenguaje de diseño alrededor las etiquetas que luego pones información entre esas etiquetas o atributos asignados, a los que llegaremos. Hypertext Markup Language es la base de cada sitio web, y por eso es realmente importante, porque es lo que realmente vas a ver. Ahora, es un lenguaje basado en etiquetas, lo que significa que si queremos introducir, digamos, un párrafo o un encabezamiento, entonces en realidad le damos una etiqueta que, una etiqueta se vería como esta h1, y luego ponemos información entre ella, y eso es lo que diría. Esto es solo HTML, bien aquí, todos los diferentes tipos de HTML que vamos a estar cubriendo en el próximo par de videos, y se ve así. Este es el encabezamiento que tienes aquí, aquí tienes un párrafo que es sólo un texto e imagen de video, una lista, tablas, un formulario. Todo esto es una página HTML pura, no hay nada más dentro de aquí. Se puede decir que no se ve muy bien, y eso es porque no tenemos ningún estilo, que es lo que es CSS, que vamos a cubrir más adelante. Lo que hacemos en este momento no va a quedar muy bonito porque el estilo que diseña cómo se ve y se siente todo y se mueve y el diseño de la misma, que todo va a venir después. Ahora mismo, solo acostumbrate a que se vea así. Simplemente todo va directo hacia abajo, no hay mucho para ello, no hay mucho color, así es como es, y eso está bien. Eso es básicamente lo que es HTML. Ahora, lo que no es HTML es un lenguaje de programación. Entonces aquí hay un proyecto que tengo. Este es un proyecto C-sharp, también construyendo un sitio web, pero esto es más del código back-end del lado del servidor, que no se preocupan por ello. Pero básicamente lo que eso significa es todo esto aquí, variables, funciones, si las declaraciones else, listas, estructuras de datos; todo ese tipo de cosas, si has oído hablar de alguna de ellas, no se aplica al HTML. Cualquier cosa que veas aquí mismo, no vamos a estar haciendo con HTML porque no es un lenguaje de programación. No estamos creando un programa para hacer un sitio web. El sitio web está definido por etiquetas y por estilos que vamos a aprender a configurar. Entonces eso es lo que es HTML, y eso es lo que no es HTML. Entonces no es un lenguaje de programación, es un lenguaje de diseño que es realmente bonito porque si solo te estás metiendo en la codificación, HTML y CSS son un lenguaje fantástico para empezar porque son bastante simples, pero puedes crear las cosas bien lejos y puedes tener las cosas empiecen a lucir bien con bastante rapidez una vez que aprendas lo que estás haciendo. Entonces es genial para principiantes, en mi opinión, sólo en general porque a muchos principiantes les gusta ver resultados; solía ser uno de ellos cuando empecé. Yo quería hacer las cosas, quería ver que sucedieran las cosas de inmediato. Lenguajes de programación mucho más difíciles, pero HTML, CSS, y se llega a estar construyendo un sitio web todo el tiempo y es realmente genial. Entonces eso es lo que es HTML y lo que no es HTML. En el siguiente video, vamos a empezar a abordar algo de esta sintaxis y la voy a explicar, y vamos a hacer sólo un sitio web HTML básico a medida que avanzamos. 5. 2.2 - HTML básico: Lo primero que vas a necesitar para empezar a hacer tu sitio web es el archivo del sitio web. Sea cual sea el software que estés usando, probablemente podrás hacer eso dentro de ahí si lo deseas solo haciendo New File y eligiendo HTML. Pero si lo estás haciendo de una manera anticuada con como bloc de notas o algo así. Puedes en cualquier lugar de tu navegador hacer clic derecho y decir, Nuevo y necesita ser solo un documento de texto. No puede ser un documento de palabra. Puede ser como un bloc de notas, pero no puede ser nada más que un simple documento viejo. Le das un nombre llamado índice y luego cambias la extensión from.txt o lo que fuera, to.HTML. Podría decir que eso va a volverse inestable, está bien. Da clic en “Ok”, luego tienes tu primera página web lista para salir. Va a estar en blanco ahora mismo. Podemos abrirla, ver que no hay nada ahí, está bien. Pero es un archivo de sitio web que será abierto por los navegadores y sabrá que es un sitio web que está listo para ser leído. Lo que vamos a hacer es llenarlo de información. Para hacer eso, estaré usando Visual Studio Code, pero puedes usar cualquier cosa que te guste si te sientes cómodo con otra cosa o no quieres usar lo que estoy usando por alguna razón, está bien. Incluso puedes ir a la vieja escuela y abrirla en Bloc de notas o Editor de texto y hacer todo a mano. Yo no lo alentaría, pero definitivamente se puede. La forma de ver su archivo mientras está editando es simplemente navegar a donde sea que esté su archivo, haga doble clic en él. Ahora mismo está vacío porque no tenemos nada dentro de ella. Pero cada vez que hagas un cambio, solo puedes guardar tu código y luego entrar y presionar “F5" y automáticamente volverá a cargar eso en el navegador de tu elección. Estoy usando Firefox, pero puedes seguir y cualquier navegador que estés usando y lo hará exactamente igual. Empecemos con alguna sintaxis básica. Ahora, hay una estructura que siguen todos los archivos HTML y es necesaria para publicar en línea. Pero por ahora mismo, vamos a saltarlo y vamos a cubrir eso al final. Eso se debe a que la estructura necesaria en realidad está llena de algunos tokens y etiquetas bastante avanzados y sintaxis y no quiero pantanearte con eso sin siquiera conocer lo básico. Vamos a empezar súper simple. El primero que vamos a cubrir es la etiqueta de cabecera. Vamos a empezar esto presionando Shift e Left en la tecla coma para abrir un corchete y si estás usando código, puedes ver aquí que te da todas las opciones y vamos a cubrir algunas de estas, pero no todos ellos porque no los necesitamos todos para todo lo que hacemos. Voy a cubrir lo básico. Vamos a empezar con un rumbo y tenemos h1 comedero h6, que significa rumbo uno a rumbo seis. Voy a seguir adelante y teclear h1 y luego cerrar ese soporte con turno y punto. Aquí puedes ver que mi auto completa eso, pero si no lo hace, lo que tienes que hacer es entonces poner otro soporte que se abra y luego seguido una barra inversa y luego esa misma etiqueta y que cerrará la etiqueta. Cada etiqueta HTML, bueno, casi todas las etiquetas HTML van a seguir esta estructura exactamente igual. Hay algunos que difieren, pero en su mayor parte, esto es lo que hay que hacer. Lo abres con corchetes, pones la etiqueta que quieres dentro de ella y la etiqueta es lo que estamos llamando como sea que escribamos dentro de ahí. Hay etiquetas predefinidas como encabezado e imagen y video y luego hay etiquetas que puedes, si realmente querías crearte a ti mismo y luego establecer cómo se ven y se sienten y qué se supone que deben hacer. Por ahora, sólo vamos a estar usando los que están predefinidos en cada navegador, en todas partes. Encabezarse es uno genial para empezar. Un encabezado, como su nombre lo indica, es algo que pones en la parte superior de un artículo, una imagen, video, algo que estás introduciendo. Tienen tamaños de texto predefinidos y se ve en todo tu sitio web, que es para lo que son realmente útiles. encabezamiento 1 es algo que utilizarías para el encabezado de la página. No usarías rumbo uno todo el tiempo. Utilizas, bueno, supongo que el número más pequeño aquí, uno y eso te dará el tamaño de fuente más grande. Si digo, bienvenido a mi página y guardo esto, voy a seguir adelante y dar click, ve a vivir aquí abajo. Eso va a abrir mi página web y se actualizará auto. Se puede ver que este es el encabezamiento uno y ese es un rubro bastante grande. Podrás aumentar el tamaño con CSS más adelante, de lo que hablaremos. Pero esto es por defecto y esto es lo que usarías para introducir básicamente toda tu página. Entonces de ahí en adelante si tenías artículos, tal vez uses un encabezado más pequeño, h2. Entonces llama a este título del artículo, lo guardaré, vuelve a esto, refresca y luego puedes ver que título de mi artículo es un poco más pequeño y así sucesivamente y así sucesivamente. Cada uno de estos encabezamientos va a verse un poco diferente. Si entramos, podemos teclear cada uno y puedes tener una sensación de cómo se ven y el tamaño que tienen. Ahora, con CSS más adelante, podrás personalizar todo esto completamente a tu gusto, lo cual es genial. Algunos de estos encabezamientos se ponen bastante pequeños, como el de la rúbrica 6, personalmente nunca he usado el epígrafe 6 o 5. Normalmente me apego a uno y luego a dos y tres dependiendo de lo que esté haciendo. Pero puedes ver que tienes muchas opciones aquí, ten eso en cuenta. Esa es la estructura básica de las etiquetas HTML. Lo abres, pones algo en el medio, normalmente texto y luego lo cierras. Sólo porque quiero mostrarte cómo romper esa regla de inmediato, te voy a mostrar una que no sigue eso y esa es la etiqueta de la imagen. Si abrimos esto, notarás que HTML y realmente la programación y los codificadores en general son realmente, realmente perezosos. No escriben nombres completos para casi nada. Cuando estás buscando algo la mayoría de las veces va a ser o abreviado como imagen, IMG o va a tener un nombre diferente que te diga lo que hace, que a en realidad se llama ancla, que es un enlace a otra página web. Si escribiste como link aquí, esto es algo aquí, pero así no es como enlaza a otra página web, es algo completamente diferente. Hay algunas cosas que necesitas saber y eso es lo que vamos a cubrir. Pero primero volvamos a la imagen, IMG. Si cerramos eso, se puede ver que no hay corchetes de cierre que automáticamente se llene aquí y eso se debe a que una imagen es una etiqueta cerrada autocontenida. No tienes que tener nada ahí dentro. Entonces la imagen en realidad usa algo llamado atributos. Los atributos son cosas que estableces sobre esa etiqueta. Una imagen y un enlace y un video y varias otras etiquetas necesitarán tener información que establezcas para que sepa qué hacer. Porque en este momento tenemos una etiqueta de imagen, pero no tenemos imagen que usar. Adelante y abramos esto y busquemos una imagen. Una de las cosas que me gustan son los juegos. Vamos a buscar videojuegos, vamos a imágenes, y solo podemos agarrar uno. Voy a seguir adelante y agarrar algo, éste se ve genial. Ahora, los derechos de autor se avisan muy rápidamente, no puedes simplemente ir en línea agarrando imágenes y arrojarlas a un sitio web que haces, eso sería una infracción de derechos de autor, muy gran cosa, no hagas eso. Si estás buscando imágenes para tu página web, hay muchos lugares geniales para conseguirlas. Incluiré algunas fuentes de recursos al final de este curso, revísalo por ahí. Pero no te limites a robar imágenes. Por lo que estamos haciendo ahora mismo, está bien porque no voy a poner esto en línea, no voy a ganar dinero con ello y nada de eso, está todo bien. Cuando encuentras una imagen que te guste, puedes descargarla, puedes descargarla directamente o puedes copiar ubicación de imagen y luego desde ahí podemos usarla en nuestra página web. Volvamos a entrar y vamos a escribir, dentro de los corchetes aquí, SRC que significa fuente, luego vamos a escribir iguales y luego dentro de comillas, vamos a pegar todo eso que acabamos de copiar. Algunos de ellos van a ser realmente largos, algunos de ellos serían cortos, solo depende de la URL. Si tuviéramos una imagen local, que te voy a mostrar cómo hacer eso más adelante para un video, entonces sólo te vincularías a eso aquí. Pero ahora mismo, esto es todo lo que necesitamos para que una imagen se muestre en nuestra página web. Voy a guardar eso, volver aquí, refrescar nuestra página y se puede ver que eso ya está ahí. Tenemos encabezados, tenemos una imagen y estamos empezando a llegar a algún lugar, lo cual es impresionante. Ahora, vamos a cubrir algunas de las otras etiquetas que probablemente estés usando todo el tiempo. Una de esas va a ser una etiqueta de párrafo y esa va a ser sólo p. Una etiqueta de párrafo es donde pones la mayor parte de tu texto. Si tuvieras un artículo, tu texto estaría dentro de aquí, si tuvieras un título para una imagen, entonces si fuera largo, probablemente querrías ponerlo dentro de su propia etiqueta de párrafo, cosas así. Dentro de aquí, solo pones texto. Este es un texto que estoy escribiendo, lo guardaré, regresaré, refresco. Aquí abajo se puede ver que no es audaz, no está cursiva, no hay nada especial en ello. Es solo fuente básica por defecto y eso es lo que es el párrafo, así que eso es genial. Echemos un vistazo a la etiqueta de ancla, algo que empezar es realmente un intuitivo pero esencial para hacer sitios web. El tag de ancla, se puede pensar en ello como está anclando a otro lugar en Internet y se está aguantando ahí y se llega a decirle a dónde se está vinculando. Cuando haces eso con un atributo llamado href y esto significa referencia de hipertexto.Esto va a estar apuntando a otro sitio web. Vamos a abrir cotizaciones y puedes elegir cualquier sitio web que quieras aquí. Voy a elegir Google y lo que hay que recordar es que se quiere poner el prefijo para toda la página web también, lo que significa que se va a querer tener el HTTP o HTTPS. No todos los sitios web lo necesitan, pero algunos lo hacen para estar seguros, siempre incluirlo. Vamos a decir HTTPS://y luego www.google.com y cerrar la etiqueta de anclaje. Ya verás aquí que tiene una etiqueta de cierre como de costumbre y luego necesitamos realmente poner en el enlace en el que puedan hacer click. Como buena práctica, quieres que tus usuarios sepan a dónde los estás dirigiendo. Escribiría en Google, guardaría esto y refrescaría mi página. Se puede ver que hay algún estilo predeterminado para los enlaces. Cambia tu icono a una mano y aparece como subrayado y morado. Si hago clic en esto, me voy a Google. Voy a volver atrás y eso es una buena práctica, le dice a tu usuario exactamente a dónde vas. Ahora, podrías con la misma facilidad escribir algo llamado Facebook y si recargamos, ahora parece que este es un enlace a Facebook, pero no lo es. Por lo tanto, no rompas la confianza de tus usuarios mediante el uso de enlaces malos para llevarlos a otro lugar. Eso es realmente mala práctica y todo el mundo se va a molestar mucho por ello y la gente no se quedará en tu sitio web, solo ten eso en cuenta, esa es sintaxis HTML básica. Hay un poco más que vamos a cubrir en el siguiente video con HTML avanzado porque hay algunas etiquetas que requieren más atributos. Hay algunas etiquetas que son un poco raras que vamos a cubrir y lo vamos a hacer a continuación. Pero esto es lo básico, si tienes esto, puedes jugar y hacer un sitio web básico. Tienes encabezados, imágenes, párrafos y enlaces, cosas que necesitas para ponerte en marcha en cualquier sitio web que quieras construir. Lo que vamos a cubrir a continuación es una sintaxis HTML más avanzada donde las etiquetas y atributos son un poco más confusas y definitivamente requiere algunas explicaciones si estás empezando. 6. 2.3 - un poco más avanzado: La primera etiqueta nueva a la que quiero presentarte es la etiqueta de lista, pero la etiqueta de lista no puede ir sola y no se llama lista. En cambio, hay dos listas que se pueden tener. Se tiene una lista ordenada la cual significa OL, estas son cosas donde necesitan estar en orden, y el estilo correspondiente va a mostrar que están ordenados, echemos un vistazo a lo que eso significa. En primer lugar, cerramos la etiqueta y presionamos “Enter”, ahora la mía hace auto sangría, cual es realmente fabuloso, si no lo hace recomendaría sangrar unos 3-5 espacios cada línea para que sepas que esta es una nueva línea que es dentro de esta etiqueta. Dentro de esta etiqueta, necesitamos poner elementos de lista, cosas que necesitan ir en orden. Una lista ordenada, como dije, para hacer eso, necesitamos poner en LI, que significa elemento de lista, y tiene que estar dentro de un OL, UL o un elemento de menú, ahora mismo, sólo vamos a cubrir OL y UL. UL significa listas desordenadas, que vamos a hacer a continuación, elemento de lista, lo cerramos y ahora necesitamos poner algún texto dentro de ella. ¿ Qué queremos poner dentro de una lista ordenada? Bueno, puedes hacer lo que quieras, voy a subir aquí y voy a añadir un título que diga mejores juegos de la historia, ahora mi lista tiene un título y es una lista ordenada porque los estoy poniendo en un ranking, voy a decir Zelda, Voy a presionar “Enter” y abrir otro LI, y luego voy a decir Mario, voy a añadir un LI más y luego Final Fantasy luego guardarlo. Vamos a volver a nuestra página web, presiona “F5" para recargarlo, desplázate hacia abajo, ahora puedes ver que tengo mi encabezado, sabemos usar esos, y tenemos nuestra lista que en realidad tiene números al lado de ella. Ese es el estilo predeterminado para las listas ordenadas, y por eso es realmente importante asegurarse de que use OL y UL correctamente. UL sólo va a ser un punto a su lado, que vamos a hacer ahora mismo. Hagamos otro rubro y llamemos a esto alimentos que me gustan. No necesita estar en ningún orden, es sólo una lista. Vamos a decir UL y luego abrirla y necesitamos poner en lista artículos, me gusta la sandía, elemento de lista, me gusta la pizza y otro elemento de lista, me gusta la soda. Guardemos eso, ábrelo. Aquí puedes ver que ahora no importa el orden en el que estén, voy a volar esto para que podamos verlo. Tenemos una lista ordenada primero y después tenemos una lista desordenada. Tendrás que usar esos como te parezca, y por supuesto, cuando lleguemos a CSS, podrás cambiar todo eso con solo unas pocas líneas de código. Ahora estamos empezando a meternos en etiquetas más avanzadas, puedes ver que algunas etiquetas necesitas anidarse así. Un elemento de lista por sí mismo fuera de una etiqueta no va a hacer mucho. Si ponemos LI dentro de aquí y decimos: “Hola”. Bueno, va a estar ahí, pero va a aparecer como un elemento de lista desordenado por defecto, y simplemente se ve muy extraño, y yo recomendaría que nunca hagas eso. Algunas etiquetas necesitan ser anidadas, es como funcionan, y en esa línea, echemos un vistazo a una etiqueta bastante importante que tiene algunos atributos extraños que no son intuitivos, te voy a mostrar cómo funcionan, pero son realmente esenciales para casi todos los sitios web si quieres que la gente pueda interactuar contigo, y esa es la etiqueta de formulario. Este en realidad tiene un nombre que tiene sentido, es una forma, lo abrimos, entramos en una nueva línea. Ahora dentro de aquí, solo podemos escribir texto y aparecerá así; nombre, guarde eso, volveremos. Bueno, ahora mismo, el nombre aparece en la parte inferior. Ahora bien, no parece que aquí haya nada especial, pero algo está pasando dentro de esta sección. HTML, el sitio web sabe que es una forma, más adelante, no en este curso, pero cuando se quiere aceptar entrada del usuario usando ya sea PHP, C-sharp, JavaScript, otra cosa más adelante para habilitar ese tipo de funcionalidad, tu página web va a saber que este es el lugar donde lo van a aceptar. El modo en que puedes hacer eso visualmente es usando otra etiqueta llamada input. El input es cómo obtienes la entrada del usuario, esto va a crear una caja en la que pueden escribir. Ahora hay algunos atributos que son muy importantes para la entrada, vamos a decir que uno de ellos es el tipo. El tipo que queremos va a ser texto, voy a dar click en eso y me tipea en texto, lo cual es genial. Ahora, tenemos que darle un nombre también, este cuadro de formulario en el que pueden escribir, vamos a dar un nombre y vamos a llamarlo Nombre. Voy a poner en otra etiqueta llamada break tag, que es BR, que uno no tiene etiqueta de cierre porque todo lo que hace es Inserta un break, básicamente una nueva línea, básicamente algún espacio entre tus elementos aquí así que que hay espacio entre un elemento y otro. Si entramos aquí, abrimos esto, ahora podemos ver que hay un lugar para que tecleemos, puedo escribir mi nombre. Si comienzas a escribir algo que has escrito en cuatro, autocompletar desde tu navegador podría aparecer y ser muy útil, y ese es un cuadro de formulario. adelante y agreguemos algo más y en realidad hagamos como un formulario bonito, digamos que este era un formulario que en tu sitio web la gente podría llenar para unirse a una lista de correos electrónicos. Una de las cosas que querrás sería un e-maill, pondremos en correo electrónico y luego necesitamos escribir entrada, hacer otra etiqueta. Esta vez va a ser una etiqueta de email y el nombre va a ser email, poner otro descanso ahí, de lo contrario, todos estos elementos van a estar realmente unidos y eso no queremos. Uno más que podemos tener dentro de aquí es un botón de radio. Un botón de radio son esos pequeños círculos en los que puedes hacer clic para tener diferentes opciones. Déjame mostrarte lo que es para que puedas entenderlo. Hagamos nueva etiqueta de entrada, esta vez le vamos a dar un tipo de radio. Aquí el nombre va a ser, digamos en lugar de una lista de correo electrónico, estaban ordenando una camisa o algún tipo de artículo ponible que tenga una talla, vamos a decir nombre igual a talla. Tenemos que darle un valor, porque este valor va a aparecer justo al lado del botón. El valor aquí será pequeño. Una propiedad que podemos establecer que no requiere poner en nuestro propio texto se llama Checked, podemos decir que este botón va a empezar comprobado, vamos a poner pequeño justo como un texto justo al lado de esto. Al final de nuestra etiqueta de entrada, agrega pequeño, no dentro de ella, entonces podemos volver y podemos mirar y ver que el botón de entrada, el botón de radio, está justo ahí y dice pequeño justo al lado. Podemos agregar en unos pocos más, si copio esto, podría pegarlo. Ahora podemos cambiar el valor a decir medio, deshacernos de este icono comprobado y cambiar el texto a medio, guardarlo, recargar y ahora tenemos dos opciones. Los botones de radio son cosas que solo se pueden hacer clic, solo se puede seleccionar uno de ellos, lo cual puede ser muy útil cuando solo pueden elegir uno, también tienes cosas como casillas de verificación y menús desplegables, que somos no los voy a cubrir todos porque solo hay demasiado, pero al final de este curso, te voy a referir a algunos recursos realmente grandiosos los cuales actuarán como un índice o galería que solo puedes buscar si alguna vez quisiste para hacer una casilla de verificación en lugar de un botón de opción. Tendrá documentación, ejemplos, código, todo porque no quiero intentar cubrir cada etiqueta que alguna vez podrías hacer. Tardaría demasiado tiempo y, en mi opinión, sería inútil porque a pesar de que llevo años diseñando sitios web, sigo usando esos recursos para buscar cómo hacer las cosas, no tengo todo memorizado y no espero que lo hagas memorizar cualquier cosa tampoco. Bueno, no nada más que no todo. Hay algunas cosas que definitivamente querrás tener en cuenta porque las usamos con tanta frecuencia, pero otras cosas, es posible que no las necesites todo el tiempo, y eso está totalmente bien. Esas son algunas de las etiquetas más complicadas, como dije, hay mucho más, pero para lo que quiero cubrir, esto es suficiente. Este es un HTML básico que te permite cubrir tu sitio web con información, imágenes, cosas así, todo esto es realmente útil. Está en sitios web, por todo internet, probablemente en cada sitio web excepto quizá las listas porque esas son un ítem un poco más de nicho, pero están por todas partes. Esto es lo que necesitas para empezar, y eso es todo lo que quería cubrir. Lo último para HTML sin embargo, va a ser la estructura necesaria, que mencioné cuando iniciamos la sección HTML. Ahora quiero cubrir en el siguiente video porque lo necesitas si realmente vas a poner tu sitio web en línea, si no lo tienes, estarás en muchos problemas. Sí, creo que esa es una buena razón para asegurarte de que lo pongas ahí. En el siguiente video, vamos a cubrir la estructura necesaria que tienes dentro de tu documento HTML. 7. 2.4 - estructura necesaria: Ahora necesitamos abordar la estructura necesaria para que su sitio web tenga para que su navegador web o cualquier navegador lo interprete correctamente como un sitio web. La información que vamos a estar abordando realmente no va a alterar el aspecto o la sensación de tu sitio web. Vamos a incluir un título para tu página el cual lo hará, y eso es realmente importante, pero mucha de esta información no es para el diseño. En cambio es para el navegador, es para el motor de búsqueda, es para la meta información que las cosas necesitan saber de tu página, pero la página en sí no va a cambiar. Dicho eso, sigue siendo realmente importante. Si no tienes esto, tu sitio web no va a funcionar correctamente. Podría ni siquiera funcionar en absoluto porque tu navegador no va a saber qué tipo de archivo es este. En la parte superior, vamos a presionar Entrar un par de veces y darnos un poco de espacio para trabajar. Lo primero que hay que poner ahí es el tipo de documento que es, y por supuesto esto se hace dentro de etiquetas. Abre un nuevo y un corchete izquierdo hacer signo de exclamación, DOCTYPE todas las mayúsculas. Entonces tenemos que decirle que va a ser un tipo de documento de HTML y luego cerrar la etiqueta. Eso tiene que ser lo primero en cada página que tengas. Eso es esencial. Si no tienes eso, tu navegador web no sabrá que es un sitio web y no sabrá qué hacer. Bueno, puede que no se sepa. Algunos podrían resolverlo, pero si no lo tienes, te vas a tropezar con problemas, así que asegúrate de que esté ahí. Lo siguiente va a ser la raíz de tu página web. Esa es en realidad la etiqueta HTML en sí. HTML, cierra eso. Ahora bien, esto tiene que ir al fondo, porque todo lo que hay dentro de nuestro sitio web necesita estar encerrado dentro de HTML. Voy a cortar esto, desplácese hasta el fondo, y pegarlo aquí. Ahora, todo lo que hemos hecho está entre estas etiquetas HTML, lo cual es esencial porque todo el código ahora dentro de esas etiquetas es HTML. El siguiente es la cabeza. Entonces vamos a abrir esto y tipear cabeza. Esto no tiene etiqueta abierta y de cierre. Vamos a presionar Enter porque vamos a poner un poco de información dentro de aquí. lo primero que queremos poner como título, por lo que el título que queremos utilizar va a ser el título de nuestra página web. Escribiremos título y luego pondremos lo que quieras dentro de aquí. Voy a guardar mi primer sitio web. Guarda esto, entra en nuestra página web. Entonces puedes ver que tabulador ahora tiene ese título que queremos. Es así como cambias el título, y puedes tener un título diferente para cada página que tenga tu sitio web, aunque probablemente quieras mantenerlo consistente. Si tienes un sitio web llamado Facebook, entonces tal vez quieras mantener a Facebook como el título principal para todo. Pero entonces si son como en Messenger, podrías hacer como una barra o un guión y decir Messenger, así que sería Facebook dash messenger mientras estás en Messenger. Entiendes la idea, pero mantén el título consistente y fácil de leer porque eso es realmente importante para la usabilidad. Hay más información que podemos poner dentro de aquí. Hay metaetiquetas, en realidad podemos teclear meta. Esto es cosas como palabras clave e información del navegador. No vamos a cubrirlo ahora mismo porque no es esencial y quiero mantenerlo desnudo huesos. Pero esto es algo que te animo a que busques, y asegúrate de que entiendes para cuando publiques tu sitio web. Cosas como la optimización de motores de búsqueda, van a usar palabras clave y frases clave, y pones esa información dentro de la metaetiqueta, dentro de la etiqueta de cabeza. Impresionante. En realidad, lo último es el cuerpo. Vamos a abrir esta etiqueta, teclear cuerpo, cerrarlo. Entonces necesitamos tomar esa etiqueta de cierre, cortarla, y ponerla todo el camino hacia abajo antes de HTML, y entonces nuestro sitio web es para todos los propósitos intensivos, completo. Ahora tenemos toda la estructura necesaria para hacer nuestro sitio web legible para navegadores web y visualizable a través de dispositivos. Ahora bien, si abrimos esto, refrescarlo. Nada va a haber cambiado. Nada se va a ver diferente. Pero ahora tu navegador podrá leerlo correctamente y no tendrás ningún problema de mostrarlo por todo el lugar. Eso es muy importante. Eso es HTML en pocas palabras. Ya sabes usarlo, qué hacer con él. Lo siguiente que vamos a cubrir es cómo diseñarlo, que va a ser nuestro CSS. Te vas a convertir en un maestro de hacer que tu sitio web luzca como tú lo quieres, justo como tú lo quieres. Se ajustará a tu cada victoria. lo vamos a cubrir a continuación. 8. 3.1 ¿Qué es la CSS?: Ahora, es hora de entrar en CSS. CSS es sinónimo de Hojas de Estilo en Cascada. La cascada es una forma de describir cómo funcionan y cómo se ven. Porque cómo se juega la sintaxis básica es que le das un tipo, o una etiqueta, o un ID, o una clase o algo para apuntar y luego le dices que cambie muchos atributos al respecto. Vamos a ir a fondo en estos más adelante. Pero solo quiero tomarme un momento para hablar de lo que es CSS y cómo es diferente del HTML. Probablemente destaca la diferencia enseguida. Realmente no hay etiquetas dentro de aquí. Estás apuntando a las etiquetas, pero no ves ningún corchetes angulares aquí. No le estás dando una etiqueta P y llenándola de texto. CSS es sólo para estilizar. Ahora, CSS puede recorrer un camino muy largo en ese estilo. En realidad existe un sistema de cuadrícula que puedes implementar, que está mucho más allá del alcance de esta clase, por cómo tus contenidos deben colocarse tanto en dispositivos grandes como en dispositivos móviles. Hay animaciones que puedes hacer, que al final de esta sección, te voy a mostrar algunas animaciones CSS realmente geniales que están ahí fuera en la naturaleza, solo para despertar tu imaginación. CSS puede hacer mucho, pero su función principal es tomar el HTML en el que has codificado dispuso y diseñarlo de una manera específica. Se pueden cambiar cosas como colores, rotación, traseros, animación. Realmente cualquier cosa que se te ocurra, CSS puede apuntarlo, cambiarlo, y hacerlo exactamente de la manera que quieras. Ahora bien, no es fácil cuando digo que puedes hacerlo de la manera que quieras, es cierto, pero a veces puede ser complicado porque hay ajustes por defecto que tienen las etiquetas HTML. Al igual que se supone que algunas etiquetas ocupan toda una línea, algunas no lo son. Cuando cambias esa propiedad, pueden pasar cosas raras y requiere mucho retocar, pero puedes hacerlo. Te garantizo que puedes hacer que tu sitio web luzca exactamente de la manera que quieras. Sólo va a tomar algo de práctica y algo de paciencia. Pero esa es la diferencia entre CSS y HTML. Para uno tienen nombres diferentes. Para dos, uno de ellos es un lenguaje basado en etiquetas y uno de ellos es más un lenguaje de diseño en cascada. Por lo que van en tándem. Los usas juntos porque CSS sin HTML, bueno, no hay mucho que puedas hacer esto un poco, pero realmente no puedes hacer mucho. HTML sin CSS. Sí, claro, está ahí. Es informativo, supongo, pero nadie quiere mirarlo por mucho tiempo. Necesitan ir juntos y cuando lo hacen, son perfectos. Lo que vamos a hacer primero en el siguiente video es empezar a segmentar etiquetas como puedes ver aquí mismo y te voy a mostrar cómo podemos cambiar algunos atributos de etiquetas específicas para que se vean y hagan lo que queramos. 9. 3.2 con etiquetas HTML con estilo: Como dije, CSS sin HTML no es tan útil. Eso significa que vamos a necesitar HTML y en lugar de codificar otro sitio web, sólo voy a tomar lo que hicimos la última vez. Si quieres seguir adelante y escribir un poco más de HTML, te animo a que practiques eso tanto como puedas y luego regreses cuando estés listo con eso. Dicho eso, no voy a hacerlo, sólo voy a tomar exactamente lo que hemos hecho. Voy a copiar eso, pegarlo dentro de aquí. Entonces en Mía, voy a abrir esa carpeta porque así funciona. Ahí está mi código HTML. Ahora un archivo CSS tiene una extensión of.css. Si tienes un TextPad haces un archivo ahí dentro. Si estás usando algún software, hazlo como sea que lo hagas. Aquí, voy a dar clic en Nuevo archivo. El nombre tradicional es site.css. Ahora, los nombres CSS pueden variar salvajemente. Puedes tenerlo llamado estilo, estilos, puedes tener una página CSS para cada página de tu sitio web, que si es grande, no recomendaría, más pequeño estaría bien. Pero tradicionalmente se llama site.css. Ahora lo primero que tenemos que hacer es realmente vincular nuestro CSS a nuestro HTML. Donde hacemos eso está dentro de la cabeza. Ahora esto va a ser un enlace. Ahora miramos esto muy brevemente. Realmente no hablamos de ello, pero ahora vamos a usar esta etiqueta. Vamos a enlazar a nuestra página CSS. Afortunadamente, nuestra página CSS en realidad está justo aquí, por lo que vincularse a ella va a ser bastante fácil. Si lo tienes arriba en una carpeta o un par de carpetas fuera, entonces necesitas usar algunos puntos, puntos y una barra. A lo que se ve eso es algo así y dentro de lo que te voy a mostrar en tan solo un segundo, eso significa una carpeta arriba. Si necesitas subir una carpeta, así es como lo haces. De lo contrario, deberías poder hacerlo así. Hay un par de atributos para link. El primero es rel. Eso significa la relación. La relación para este enlace va a ser hoja de estilo, porque hay muchas cosas a las que se puede enlazar. El tipo va a ser específicamente text/css, porque ese es el archivo que vamos a estar usando aquí. Entonces usamos href. De nuevo, hemos visto eso en la etiqueta de anclaje y le damos el nombre de nuestro archivo CSS, por lo que el nuestro se llama site.css, luego cerramos eso y lo guardamos. Entonces estamos bien para ir. Voy a seguir adelante y abrir esto y asegurarme de que tenemos el mismo sitio web, todo parece igual. Impresionante. Ahora, lo que vamos a hacer es en nuestra página CSS, vamos a apuntar primero a las etiquetas construidas que tenemos. Eso se debe a que esas son las más fáciles de entender y de escaparse. Si miramos la estructura, una de las etiquetas que tenemos es en realidad la etiqueta del cuerpo. Esta etiqueta de cuerpo encapsula todo. Si quieres cambiar el fondo de tu sitio web, la forma en que lo haces es apuntando al cuerpo. Todo lo que tenemos que hacer es escribir en nombre de ese cuerpo de etiqueta y luego necesitamos hacer lo que yo llamo llaves. Esto va a ser turno, y esto va a ser a la derecha de la letra P, va a ser un corsé rizado abierto y a veces se va a completar. Si no se completa, entonces haz turno y el siguiente más y hará unos corchetes rizados abiertos y cerrados. Estos se ven todo el tiempo en programación. Para CSS, todo el estilo que vamos a cambiar para el cuerpo ahora está entre estos dos corchetes rizados. Para usar CSS, lo abrimos así y luego así es como se ve la sintaxis. Pones en el estilo, el atributo que estás queriendo darle estilo. En este caso, vamos a cambiar el color. Vamos a decir color de fondo, luego usamos para hacer un colon, que es desplazar a la derecha de la L, colon y luego darle un color. Voy a decir que acaba de leer. Ahora también puedes ver aquí que tiene el valor x de ese color y código VS y muchos otros editores. También puedes elegir entre colores RGB. Si sostengo esto, puedo cambiarlo. Ahora yo también puedo ir ahora mismo, pero tú sí. Al final de un atributo de una propiedad, pones un punto y coma. Lo mismo, simplemente no hay turno. Así es como lo estilizas. Ese es el estilo predeterminado. Voy a guardar esto y abrimos nuestra página web. Mi CSS se ha aplicado automáticamente y se ha aplicado un rojo muy brillante a toda esta página. Ahora, los elementos formados no son rojos porque ya tienen un estilo específico adherido a ellos. Pero todo lo demás ahora es rojo. Ahora ese rojo es muy brillante. En el código VS, puedo pasar el cursor sobre el color y luego puedo cambiarlo. Voy a bajarlo a un rojo mucho más oscuro, guárdalo. Ahí vamos. Eso es un poco más fácil a los ojos creo. Así es como apuntas a una etiqueta. Ahora, miramos muchas etiquetas dentro de aquí. Cualquiera de estas etiquetas está en juego. Pero lo que hay que recordar es que todos ellos serán cambiados, así que h_3, tenemos un par de estas etiquetas dentro de aquí. Vamos a entrar y cambiar una de estas etiquetas h_3; h_3, abrir y cerrar los corchetes rizados. No queremos cambiar el color de fondo, porque sí tiene un color de fondo, pero en cambio, cambiemos el color de la fuente. Para hacer eso, no es color de fuente, en realidad es solo color, así que color y cambiemos esto a blanco. Yo lo guardaré. Ahora cada partida es ahora blanca, cada partida tres. Eso es realmente importante recordar. Porque si cambias una etiqueta, cuando uses esa etiqueta en cualquiera de tus sitios que esté usando esta página CSS, todas ellas cambiarán. A veces eso es bueno. Es posible que desee que todos sus encabezados tengan el blanco como color primario. Si ese es el caso, puedes hacer algo con comas. Dentro de aquí, podríamos agregar una coma y luego podemos aplicar este estilo a otra cosa. Si dijera h_1, h_2, h_4, h_5, y h_6, guarde eso. Ya se puede ver que todos mis rubros tienen blanco, lo cual es genial. Pero si por alguna razón no queríamos que uno de estos encabezamientos tuviera blanco, no hay manera de cambiar eso porque hemos aplicado esto a cada encabezado de cada página de todo nuestro sitio web. Eso es realmente importante recordar. Por ahora, vamos a mantener eso igual. Te mostraré cómo cambiar eso en el próximo par de videos cuando apuntemos a etiquetas y elementos más específicos. Tenemos etiquetas aquí. Hemos cambiado el color de fondo y el color, cosas que probablemente vas a hacer todo el tiempo para encajar en línea con el tema de color que elijas para tu sitio web. Pero CSS puede cambiar mucho más que solo, supongo, el estilo de un elemento. También puede cambiar la forma en que un elemento realmente se comporta en la página. Si vamos y miramos esto, se puede ver que cada uno de estos encabezamientos, e incluso como este párrafo, hay toneladas de espacio por aquí a la derecha. No hay razón para que no puedan estar por aquí, excepto que el estilo incorporado dice el párrafo, el enlace, todas esas cosas esas están en su propia línea. Ocupan toda una sección. En realidad podemos ver eso si entramos y cambiamos algo sobre nuestros encabezamientos. Podemos cambiar lo que se llama text-align y hacer un colon y luego decimos centro, poner un punto y coma al final. Esa puntuacion es muy importante. Si entramos, puedes ver ahora que están centrados a lo largo de toda la página. Eso se debe a que en esencia van de la misma izquierda a la derecha y retomando todo ese tramo. Esto se parece más a una herramienta de encabezado. Creo que eso tiene mucho más sentido tenerlos centrados. Eso es genial. Pero y si no quisiéramos que retomaran toda la página y quisiéramos que estuvieran más en línea. Bueno, eso viene en juego con algo llamado display. El primero que haremos es teclear display y luego dos puntos. Ahora hay muchas opciones. Estas opciones son confusas cuando estás empezando. Si solo quieres darle estilo y no cambiar la funcionalidad real de las etiquetas, entonces no me metería con la pantalla, pero eventualmente vas a necesitar hacerlo, así que ten esto en el fondo de tu mente. El display es cómo se alinean los elementos en la página. Hay elementos que son elementos de bloque. Los elementos de bloque son, bueno, son bloques. Ocupa una sección entera, generalmente toda una fila de la página. Así es como funcionan. Hay elementos que son bloque en línea. Estos elementos ocupan un bloque, pero no ocupan toda la página. Ahora se puede ver que todos nuestros encabezamientos, bueno, ocupan cierta cantidad de espacio y luego no ocupan más de lo que necesitan. Eso tiene sentido. Ya tienes eso. Eso significa que nuestra imagen puede estar allá también, lo cual es genial. Ahora, hay algunas otras opciones también. A algunas de ellas les gusta inline-flex. No me preocuparía por ahora. Tablas Flexbox, cosas así. Eso tiene que ver con la grilla CSS, que es realmente poderosa. Pero de nuevo, no quiero hablar de eso ahora porque ese es un marco completo que CSS ha estado construyendo desde hace el último par de años, que una vez que te vuelves más avanzado, definitivamente miras, pero por ahora, podemos hacer bloque, podemos hacer inline-block, también podríamos hacer ninguno, por lo que básicamente desaparece por completo. Ahora se ha ido. También puedes hacer heredar, lo cual es confuso si es el único del que estás heredando, puedes pensar en que aquí hay una jerarquía y ahí es donde entra la parte en cascada. Porque si fuera a decir el Epígrafe 2 hereda del Epígrafe 1, entonces todo lo que hago al Epígrafe 1 heredaría del Epígrafe 2. Pero esa herencia es un poco más allá de lo que quiero cubrir ahora mismo, pero quería mostrártelo porque creo que eso es realmente importante. A la última etiqueta mostrada que te quiero mostrar se le acaba de llamar en línea. Aquí en línea va a hacer exactamente lo mismo que hacíamos antes, pero ahora ni siquiera va a ser un elemento de bloque. Al mirarlo, no puede verse igual, pero sí tiene diferentes propiedades de visualización. Estas propiedades de visualización, son como realmente vas a alinear los elementos aquí, así que si quisiéramos dividir nuestra página como en dos filas, entonces necesitaríamos cambiar nuestros encabezados de nivel de bloque a bloque en línea o en línea, lo contrario no seríamos capaces de tener nada lado a lado. Display es realmente potente y puede llegar a ser confuso bastante rápido, así que ten eso en cuenta y juega con él. Pero no te frustres porque puede ser difícil ejecutar exactamente de la manera que quieras. Pero también hay tonos y tonos de otras propiedades. Voy a tratar de cubrir algunos aquí, fuego rápido, pero sólo sé que hay tantas propiedades CSS y formas de usarlo que no puedo cubrirlas todas. Pero de nuevo, te mostraré algunos recursos al final de este curso que son realmente fantásticos, sobre todo para CSS, porque hay realmente grandes sitios web por ahí dedicados a usar CSS y es realmente fantástico y muy útil. Te animo a revisar esos. Hagamos fuego rápido. Hablemos de relleno. Hagamos h1 y hagamos un color de fondo en esto y vamos a cambiar esto a azul. Abramos eso. Ahora tenemos un color de fondo azul brillante para nuestro rubro. Se puede ver de lo que estoy hablando, de lo que ese display todo el camino de izquierda a derecha. Ahora, dos propiedades importantes son el relleno y el margen. relleno es el espacio interior de este fondo color. Si entramos y cambiamos el relleno, podemos cambiar el relleno con píxeles, así que vamos a darle 50 píxeles, así que decimos 50px. Voy a guardar eso, y luego tengo que cambiar este azul. Incluso me está lastimando los ojos. Vamos a bajarlo. Se puede ver que ahora todo el espacio dentro de ese encabezado, ese es el relleno que se asocia a ese elemento. Cada elemento tiene una cantidad de espacio a su alrededor, margen y relleno. El relleno está dentro de ese elemento, por lo que hay cuatro elementos para el relleno. Puedes hacer relleno, izquierdo, superior, derecho e inferior, y cada uno puedes controlar individualmente o simplemente puedes ponerlos todos como lo hicimos antes. Si solo quisiéramos que el fondo de relleno fuera de 50 píxeles, podríamos hacer eso y eso es exactamente lo que se vería ahí mismo. Ahora vamos a deshacernos del relleno y vamos al margen. Al igual que el relleno, hay parte superior izquierda, derecha, e inferior alrededor de los elementos, pero el margen es el espacio alrededor del elemento real en relación con los demás. Si entro y dicho margen, 50 píxeles, se puede ver que el color de fondo no se ha expandido, pero el espacio alrededor de estos elementos y su relación con la parte superior de la página es ahora mucho espacio a su alrededor. El margen es ese espacio que no se ocupa por el color de fondo ahí e incluso en estos bordes se puede ver que no está cerca, tan cerca como lo estaba antes. Margen, relleno, dos cosas muy importantes de las que hablar. Ahora, otra, bajemos y vayamos a la imagen. Cosas que puedes ajustar son el ancho y la altura, y esto no es solo con imágenes, sino esto ll ser lo más fácil de ver aquí. Si dijera ancho 25 por ciento, nuestra imagen ahora está ocupando cerca del 25 por ciento de nuestra pantalla. Esto se puede ver si entro al índice y copio esta imagen, y la pego tres veces más. Se puede ver ahora que ocupa justo alrededor de 25 por ciento. Hay algo de pantalla y algo de relleno en el cuerpo mismo. Se puede ver que incluso con los elementos de fondo de nuestro rumbo, hay algo de espacio a la izquierda y a la derecha, lo que no podemos hacer 25 por ciento en todo el camino. Pero te da la idea de que ahora esta imagen ocupa el 25 por ciento de nuestra página. Eso se puede cambiar con el porcentaje o si tienes una altura específica que quieres que sea, puedes hacerlo en píxeles. Si quisiéramos que nuestra imagen tuviera 250 píxeles de ancho, podríamos hacerlo ahí mismo. Si quisiéramos que fueran 1000 pixeles de altura, podríamos hacer eso también. Obviamente distorsiona la imagen, no de gran aspecto, pero puedes hacer eso, por lo que tienes control total sobre cómo se ve eso. Vamos a entrar y voy a añadir un ancho del 50 por ciento, así que eso lo hace bastante grande y una cosa realmente genial que puedes agregar aquí dentro, CSS puede hacer, como he dicho, sobre cualquier cosa que quieras. Una de ellas cuando se trata de imágenes es el radio de borde, por lo que puedes agregar, me dieron un efecto de redondeo, que creo que se ve muy bien. Se ve realmente bien en un montón de sitios web diferentes de característica moderna de solo redondear todas tus imágenes. Puedes hacer eso si quieres. Esa es una genial de tener. A partir de ahí, podría seguir yendo y viniendo, como he dicho. Pero esto es lo básico de la misma. Si estás usando un IDE, que espero que estés al aprender CSS porque realmente ayuda. Todo lo que tienes que hacer es escribir una letra, así que si escribí una, pude ver todas las CSS que empiezan con un. todas estas propiedades las puedo ver ahí mismo. Si quisiera mirar t, lo mismo. Cosas como el tamaño de fuente, se puede cambiar eso por supuesto, así que podríamos cambiar este tamaño de fuente de cada encabezado para ser de 50 píxeles, entonces no se ven muy diferentes, pero aún así lo están, así que hay eso. Te animo a jugar, ver qué puedes encontrar cuando se trata de CSS, y a ver qué puedes descubrir, hay toneladas de cosas que puedes hacer. De lo siguiente que vamos a cubrir, y así solo están hablando más de estilos porque podemos hacerlo para siempre. Vamos a hablar de cómo apuntar a elementos específicos, tanto de uno a la vez como en grupos. 10. 3.3 identificaciones y clases: Ahora que ya sabes apuntar a las etiquetas, puedes hacer mucho. Hay mucho que puedes cambiar, pero a veces no quieres cambiar mucho. A veces solo quieres cambiar un poco. Ahí es donde entran en juego las identificaciones y las clases. Ambos son atributos que puedes aplicar a cualquier etiqueta HTML. Vamos a entrar en este párrafo aquí mismo, y dentro de la etiqueta de párrafo, ábrelo con un espacio, y pongamos ID, y pulsemos “Enter”. Aquí podemos escribir un nombre. Este nombre puede ser lo que quieras, pero te animo a que tenga sentido. Si es solo alguna cadena de letras y números, sí, funcionará pero para tener buenas prácticas de codificación, quieres convertirlo en un nombre significativo. Esto sería como párrafo de introducción. También te animo a usar la convención de nomenclatura CSS, que es la separación por un guión y realmente no hay mayúsculas en absoluto. Voy a guardar eso. Ahora tenemos una etiqueta ID asociada a este párrafo. Eso no hace nada por sí mismo. Aquí está el texto, pero nos permite entrar y cambiar manualmente esta etiqueta contra todo lo demás. Para mostrarte que eso es cierto, vamos a añadir una segunda etiqueta realmente rápido. Voy a poner en, soy más texto. Ahora tenemos dos textos, dos párrafos, y sólo vamos a apuntar a uno de ellos. Voy a entrar al sitio, al CSS, y voy a decir símbolo de libra o hashtag, así es como apuntan los identificadores. Entonces libra símbolo y luego pon el nombre que pones ahí dentro. Intro párrafo, ábrelo y ciérrelo igual que normalmente hacemos, y luego vamos a darle otro color. Digamos que el color es igual al morado. Abramos eso. Ahora ese color es morado. Solo estamos apuntando a ese color. Ahora, apenas se puede leer eso así que en su lugar, creo que lo que haremos es cambiar el color de fondo a morado. O cambiémoslo a aqua, ese es un color más bonito. Se puede decir que este es un elemento de nivel de bloque, y ahora tiene un fondo de aqua, y éste no. Eso es una identificación. ID que solo usas en un elemento. Entonces si quisiera entrar y cambiar este párrafo por algo, no entraría y diría, intro párrafo. Ahora, va a funcionar, pero es realmente, realmente mala práctica. Se supone que las identificaciones en sí mismas son para un solo elemento y eso es todo, nada más. Pero si quieres más de un elemento, que lo harás mucho del tiempo, querrás usar una clase. Eso es lo que vamos a hacer ahora mismo. Vamos a entrar y digamos que esta lista ordenada tenía una clase. Diremos clase y la abriremos y le daremos un nombre. Le daremos un nombre de lista. Bajaremos aquí a la UL y diremos, clase igual a lista también. Porque las clases pueden estar en tantos elementos como quieras. De hecho, puedes combinar estos y tener muchos, muchos que quieras. Añadamos una segunda aquí solo para mostrarte que podemos tener múltiples clases. Voy a decir, fresco fondo. Esta lista ordenada tiene una clase de lista y fondo fresco. Este de aquí abajo sólo tiene lista. Ahora, para acceder a la lista, haces un punto. Voy a decir, lista. Entonces ese es el primero. Entonces voy a hacer period.cool-background, cambiará cada uno de estos a su vez. El primero es nuestra lista. Vamos a seguir adelante y subir el tamaño de la fuente a 25 píxeles. Entonces podemos echar un vistazo a las listas, y son mucho más grandes en tamaño de fuente. Eso es genial. Ahora, ¿qué pasa con el fresco fondo? Bueno, esta es una lista por lo que se puede aplicar a múltiples elementos, y podemos tener que sea algo específico. Entonces cambiemos el color de fondo a aguamarina. Ese es un nombre que suena genial. punto y coma al final de eso. Ahora que uno tiene el fondo, y también se puede ver que es un elemento de nivel de bloque. Cuando comienzas a construir sitios web más grandes, lo que vas a querer hacer es compartimentar tus clases y los efectos que tienen. Esto es avanzado, pero sí quiero hablar de esto porque si empiezas a hacer tu CSS así, entonces estarás mucho mejor que tratar de cambiarlo más adelante. Dentro de nuestra página web, si tuviéramos varios elementos que quisiéramos ser de un elemento de fondo fresco, pero también tienen otras cosas como, eran fuente grande, pero no queríamos que todos fueran así. Entonces lo que quisiéramos hacer es hacer una clase como fondo fresco, y ajusta sólo el color de fondo. Entonces tenemos esta clase de antecedentes en la que podemos entrar y realmente podemos aplicar a todo. Si este elemento, la etiqueta de ancla, queríamos que fuera un fondo fresco, entonces podríamos hacer eso. Se puede ver que no es una etiqueta a nivel de bloque, pero ahora tiene ese fondo fresco. Si queremos que sea una fuente más grande, entonces en lugar de cambiar la clase de fondo cool para tener una fuente grande, podríamos simplemente agregar esa clase de lista porque en este momento solo está aumentando el tamaño de la fuente, y luego tiene una fuente grande. No tienes que hacer una clase por cada estilo único que estás aplicando, pero puede ser muy útil poner ciertos estilos en una clase y luego aplicar múltiples clases a tus elementos. Eso es sólo algo a tener en cuenta. Si puedes aprender a hacer tu CSS así, creo que estarás mucho mejor en el camino porque es más fácil de manejar, es más fácil de editar, y es mucho más fácil de leer también si tienes nombres descriptivos en tus clases. Pero así es como puedes apuntar a elementos específicos con identificadores y elementos generales, pero no toda la etiqueta con clases. Clases y etiquetas, te vas a encontrar usando todo el tiempo en todas partes. Asegúrate de recordar cómo acceder a ellos con el hashtag y el periodo, y entonces estarás bien para ir. Lo último que quiero mostrarte son solo algunas animaciones de alrededor de la web que usan CSS y algunas de las cosas realmente geniales que puedes hacer para inspirarte a salir y aprenderlas. Porque una vez que conoces los conceptos básicos de CSS, como lo haces, puedes salir por ahí y copiar el CSS de alguien, y diseccionarlo, y leerlo, y averiguar exactamente cómo funciona, y luego tirarlo en tu sitio web. Esa es una de las cosas realmente geniales de Internet es que hay tantas cosas geniales por ahí que la gente está lista para simplemente compartir y darte, y todo lo que tienes que hacer es aprender cómo funcionan para poder ponerlas en tu propia página web. Echemos un vistazo a algunos de esos siguientes. 11. 3.4 - algunas cosas de CSS: Muy bien, estas son algunas cosas que se hicieron con CSS puro. La mayoría de ellos están dentro de aquí, el Codepen.io, que si comienzas a buscar preguntas y ejemplos, probablemente terminarías aquí. Es una cosa realmente, realmente genial que permite a la gente simplemente poner su código fuera y se puede ver en ejemplos y se puede copiar. Ahora todos los ejemplos que te voy a mostrar son con HTML y CSS, no hay JavaScript, no hay nada más. Parte de la CSS es extensa, como ésta tiene más de 1,000 líneas, pero podrías copiarla y pegarla y tenerla funcionando en tu página web con solo hacer eso. Este es el CSS de los Avengers, realmente cool, el Hulk gruñe y la pantalla se sacude. Es realmente, realmente aseado. Entonces tienes unas animaciones firma realmente cool. Si hago clic en este botón Replay, dibuja esa firma, que es realmente genial. Tienes al dinosaurio Chrome siendo animado corriendo por ahí. Eso es bastante aseado. Tienes un robot ambulante que se mueve alrededor del eje z. Eso es bastante genial, todo hecho con CSS. Tienes un personaje animado completamente hecho con CSS. Aquí hay una animación de carga que se ve realmente genial. Entonces aquí hay un tercero apps para Google ahora. Todo esto se hace con CSS, solo animaciones, fotograma clave, cosas así. Cosas que puedes aprender ahora que conoces los fundamentos de CSS, definitivamente puedes hacer esto. Hacerlo desde cero, eso es mucho más difícil. Incluso me cuesta mucho hacer animaciones porque no soy un experto en ellas. Pero lo que puedo hacer es Control A, Control C, ponerlo en mi proyecto si me encanta y tú también puedes. Simplemente tienes que copiar también el HTML y luego puedes diseccionarlo y averiguar exactamente cómo funciona. Eso es algo realmente cool CSS. Espero que eso te inspire y te muestre el poder de lo que CSS puede hacer. Es un lenguaje de estilo, pero también hace más que eso. Hay tanto que CSS puede hacer, es vasto, es amplio. No te intimides, te desafies y te animes, porque puedes aprender esto, puedes hacerlo y puedes ponerlo en tu propia página web sin tener que hacerlo desde cero porque hay tantas cosas por ahí que solo puedes encontrar. Lo que quiero hacer en la siguiente sección es darte algunos recursos para aprender CSS y HTML más allá lo que te he mostrado y para desafiarte por el proyecto para este curso de hacer tu primer sitio web. 12. 4.1 Recursos en línea estupendos: Hablemos de algunos de los recursos que querrás utilizar a la hora construir tus sitios web y solo en general para la investigación. El primario que te voy a recomendar es W3Schools.com. Este es un sitio web que he utilizado innumerables veces como referencia y como go-to para aprender a hacer ciertas cosas. W3Schools.com enseña toneladas de cosas diferentes, pero también tienen un amplio conocimiento en HTML y en CSS. Lo realmente genial de esto es que todo de lo que hablan tiene un botón “Pruébalo”. Puedes hacer clic en él, abrirlo, y en realidad puedes cambiar el código por aquí para ver exactamente qué cambiaría por aquí. Es realmente genial, es interactivo, es minucioso, y es completamente gratuito. Se puede ir y aprender HTML, CSS, y luego se puede pasar y aprender mucho más si se quiere. Definitivamente echa un vistazo. El siguiente es Code Academy. Tienen muchas clases para que tomes. Si quieres algo más profundo en CSS, lo cual recomiendo mucho porque esto solo se suponía que te daría una pequeña muestra de lo que puedes hacer, entonces puedes entrar y puedes tomar su curso gratis aquí. Ahora aprenderás CSS, las mismas cosas que estábamos aprendiendo mucho más en profundidad y es realmente útil. Es realmente genial. Otro CSS que es un poco más avanzado es CSS-tricks. En aquí tienen un lugar donde publican artículos. Puedes unirte a su comunidad, puedes mirar las preguntas que la gente ha hecho, y es muy útil si estás buscando cómo hacer algo que tal vez muchas otras personas han hecho. Ahí vas a tener ejemplos por los que puedes pasar, jugar con el código, todas esas cosas. Es realmente genial, muy servicial. Este definitivamente es más avanzado. Si quieres leer o puedes leer mucho, CSS-tricks es realmente genial y tiene algunas cosas realmente impresionantes. Hay toneladas y toneladas de más cosas que puedes usar también para aprender. Pero estos son los que yo recomendaría. El último que recomendaría es cuando busques algo, lo que harás es frases tu pregunta lo más específica posible. Si estuviéramos intentando alinear nuestra imagen y solo supiéramos que queríamos que se alineara de cierta manera, quisiéramos decir el lenguaje que estamos usando, por lo que “CSS line up image a la derecha”. De lo que vas a estar buscando, bueno, aquí tienes un buen sitio web CSS-tricks. Pero otra que vas a encontrar todo el tiempo es “Stack Overflow”. Este es un lugar al que puedes ir a hacer preguntas y obtener respuestas por parte de profesionales, personas que llevan mucho tiempo trabajando en estas cosas. La mayoría de las veces vas a encontrar que estas preguntas tienen realmente buenas respuestas minuciosas con código con el que puedes ir y jugar. Tienen pilas, que es lo que llaman como su comunidad para todo. Tienen HTML, CSS y luego tienen mucho más que solo tecnología, así tienen vida, bueno, realmente cualquier cosa que se te ocurra, hay una pila donde puedes hacer preguntas y la gente puede responder. Ese también es realmente genial, “Stack Overflow”. Te recomiendo encarecidamente que lo uses cuando lo estás buscando. Simplemente haz preguntas lo más específicas posible para obtener la mejor respuesta que puedas. Esos son algunos de los recursos que te animo mucho a usar y los vas a necesitar para el próximo video, porque te voy a desafiar para que construyas tu primer sitio web sin ninguna ayuda de mi parte. 13. 4.2 ¡Tu primer sitio web!: Lo que hemos hecho hasta ahora es aprendido los fundamentos de HTML, CSS y luego te di varios recursos realmente buenos que nuevamente te animo a usar. Ahora, lo que quiero que hagas es hacer tu primer sitio web. Nosotros hemos hecho un poco aquí. No llamaría a esto un sitio web digno de publicar. Nunca se suponía que lo fuera, se supone que te enseñara. Quiero que tomes estas habilidades, el HTML y el CSS que has aprendido y vayas a hacer un sitio web sobre algo que te gusta. El genial de esto es que puede ser cualquier cosa que quieras y puedes hacerlo como quieras. Si solo quieres llenar tu página web con imágenes y tener subtextos debajo, genial, ve por ello. Va a ser como una galería de fotos. Si quieres encontrar muchos videos y ponerlos de lado a lado y tenerlos todos auto play tan pronto como se cargue la página, gran sobrecarga de información, pero aún así realmente genial. Ve por ello. Si quieres tener un sitio web realmente minimalista con solo un encabezado, tres párrafos y una foto, hazlo. Alinearlo, colorearlo, temarlo, hacer que se vea impresionante. Toma lo que hemos aprendido. Puedes descargar todo este código fuente que he hecho, aunque realmente no hay tanto. Puedes tomarlo si quieres pero te animo a usar esos recursos una y otra vez porque yo también los uso. Ve y haz un sitio web. Cuando termines, subirlo y compártelo con la comunidad aquí. Muéstranos lo que has hecho. Muéstranos cómo lo has hecho. Yo lo quiero ver. Otros quieren verlo y ser alentados también. Ahora bien, no tengas enormes expectativas para tu primer sitio web. No va a ser, bueno, podría ser, pero probablemente no va a ser algo impresionante y sorprendente y para revolucionar internet. Va a ser un poco drogadicto, podría tener algunos colores raros. Las cosas podrían no funcionar exactamente a la perfección, y eso está bien. No hace falta. Lo que estás haciendo ahora es poner en práctica lo que acabas de gastar aprendiendo. Porque si no haces eso, no te convertirás en desarrollador web. Te puedo decir como hecho, igual que con cualquier cosa que estés aprendiendo, si no vas a hacerlo y lo pones en práctica una y otra vez, no se pegará. Realmente no lo aprenderás. Puedes ver un 1000 tutoriales y tener un montón de conocimientos de cabeza y conocer cada etiqueta individual. Pero si no lo pones en práctica, no vas a ser desarrollador web. Este es mi reto para ustedes. Haz una página web sobre algo que te guste. Publaselo, y compártelo con nosotros aquí. Cuando hagas eso, terminarás. Tendrás tu primer sitio web y puedes llamarte desarrollador web. Espero con ansias ver lo que tienes. Estoy realmente emocionada. Cuando termines con eso, salta a la siguiente sección donde solo tengo un video para felicitarte y a dónde señalarte para ir en el futuro. 14. 5.1 ¿Qué continuación?: Enhorabuena y camino a seguir. Ya has hecho tu página web. Ojalá lo hayas compartido, y solo quiero decir que ahora eres desarrollador web. Ahora bien, este es el primer paso en un largo viaje. Todavía queda mucho por hacer. Pero, porque lo has hecho tan lejos, sé que puedes hacerlo el resto del camino. Estos son algunos sitios web que son realmente buenos y hacen mucho para mostrar el poder de internet y lo que puedes hacer a medida que crezcas y aprendes. Hay un montón de cosas realmente geniales que puedes hacer cuando se trata de interactividad, temas, colores, toneladas y toneladas de cosas realmente geniales. Estos sitios web lo muestran. Si solo haces una búsqueda de sitios web increíbles en línea entonces encontrarás algo como esto, y todo esto no se está haciendo solo con HTML y CSS. Lo que eso significa es que una vez que te sientes cómodo con eso, es hora de dar el siguiente paso, y el siguiente gran paso es JavaScript. Si buscamos W3Schools JavaScript, esto surgirá. JavaScript va a ser cómo haces que tu sitio web sea realmente interactivo. Este es un gran lugar para aprender si solo quieres seguir adelante y empezar, y luego desde JavaScript, querrás aprender algo para el back-end si quieres hacer un diseño de pila completa. Lo que eso significa es mayoría de los sitios web tienen algo que almacena información en el back-end llamado el servidor. Esto sería como lenguajes de programación reales como C-sharp, Ruby, PHP, algo así. Eso es código que toma la información de un sitio web, como una lista de correo electrónico o un formulario de contacto o algo así, luego procesarla, paraluego procesarla,la guarda en una base de datos, envía un correo electrónico, te envía un mensaje de texto, algo así. Si quieres meterte en eso, entonces te animo a ir a aprender un PHP, C-sharp, recoger uno de esos idiomas y simplemente empezar a trabajar con él. Es muy diferente a lo que has hecho aquí, pero es realmente poderoso. JavaScript es como uno de esos lenguajes, excepto que está diseñado para el front end o, supongo que front-end es como lo llamaríamos. Toma la información con la que quieres trabajar en esa página y hace algo justo entonces y allá. Aquí te mostramos un ejemplo que muestra la fecha y la hora. Este es un botón que tiene funcionalidad que obtiene la fecha y hora y luego lo publica dentro de aquí. JavaScript, mucho de ello en realidad solo está modificando HTML o CSS que ya has puesto en tu sitio web. JavaScript puede cambiar el CSS de un elemento, puede encontrar un ID o clase específica y ocultarlo o agregarlo, cosas así. Es realmente potente, puedes hacer juegos completos con él si quieres que salga así, o puedes integrarlo a tu sitio web para agregar mucha funcionalidad. Cosas como efecto hovering, cosas como animaciones en clics o rastreando el ratón, cosas así, que no puedes hacer solo con HTML y CSS. Después de haber hecho esto, después de haber hecho tu sitio web, sigue practicando, sigue codificando, sigue haciendo sitios web. Hazlos para tus amigos, hazlos para más temas sobre lo que amas, hazlos para tu empresa, hazlos para tu escuela, lo que sea. Sigue haciendo sitios web, y como estás haciendo eso, sigue aprendiendo. Aprende JavaScript, aprende C-sharp, aprende Python, aprende PHP, escoge algo y ve a aprenderlo. Hay mucho más por aprender, tanto más por crear, pero puedes hacerlo porque lo has hecho tan lejos, puedes seguir adelante. Eso es lo que tengo para ti, ese es el curso. Enhorabuena, camino a seguir. Una vez más, espero que lo hayan disfrutado. Me lo he pasado muy bien enseñando esto, y lo he pasado muy bien interactuando contigo. Muchas gracias por acompañarme, y como me gusta decir, diviértete haciendo grandes webs, y volveré a hablar contigo más tarde.