Transcripciones
1. Aprende a codificar la descripción básica de sitios de sitios básicos: bienvenido a codificar sitios web básicos con HTML y CSS para niños y principiantes. Este curso es para cualquier niño o principiante sin experiencia previa en codificación. Si puedes escribir una frase completa, entonces puedes aprender esto. HTML y CSS es utilizado por cada sitio web. En cada video, cubriré un tema diferente, y en el camino habrá algunos cuestionarios y retos de codificación para practicar lo que aprendas al final de este curso habrá construido este ejemplo. Página web. Mi nombre es Kevin Kennedy, y soy el creador de diseño de producto online dot com. Te invito a inscribirte el día para toda la vida acceso a estos videos y te veré y la primera lección.
2. Requisitos de curso: Yo a todos y bienvenidos a los requisitos del curso. Solo hay unas cuantas cosas rápidas que necesitamos repasar antes de empezar. El primero es, debes asegurarte de que tienes un navegador Web actualizado. Te recomendaría conseguir Google Chrome, que puedes descargar gratis en el enlace de tu pantalla. Una vez que tengas Chrome o tu navegador Web deseado jalado hacia arriba, vamos a seguir adelante y teclear J s been dot com ahora, Después de que se cargue, verás que en realidad ya tenemos algún código HTML en el lado izquierdo aquí. Entonces lo que queremos hacer es seleccionarlo todo y presionar la tecla delete. Después de eso, vamos a seguir adelante y teclear o nombrar en el lado izquierdo y asegurarnos de que realmente
emita en el lado derecho. Ahora bien, si todo parece estar funcionando bien y tu nombre aparece en el lado derecho, entonces estamos todos listos y listos para irnos. Os veré chicos en la siguiente lección o nos sumergimos justo en la historia del HTML
3. Descripción de HTML: todos y bienvenidos a la visión general HTML. Las computadoras usaban lenguajes igual que las personas. De hecho, hay más de 200 lenguajes de programación por ahí. Entonces, ¿qué es HTML? Bueno, HTML significa lenguaje de marcado de hipertexto. HTML es la forma en que las computadoras se comunican con Internet. hipertexto es el proceso de vincular objetos entre sí. Entonces cuando se hace clic en un objeto, su llevado al siguiente objeto. Ahora echemos un vistazo más de cerca a cómo se construye realmente el correo electrónico hte. El HTML consiste en una serie de etiquetas diferentes, que vamos a cubrir en este curso. La mayoría de las etiquetas tienen un principio y un impuesto de cierre, Así que a estas alturas puede que te estés preguntando quién en realidad se le ocurre esto. Bueno, HTML en realidad es creado por el W tres C o un grupo de personas que trabajan en conjunto para desarrollar estándares para la Web. Ahora que ya saben lo que realmente representa HTML, vamos a hacer un quiz muy corto y luego los veo en la siguiente lección donde
vamos a empezar a escribir la estructura HTML básica
4. Estructura básica de HTML: todos. Y bienvenidos de nuevo en este curso, vamos a cubrir la estructura HTML básica que utiliza cada sitio web. Por lo que antes de empezar, queremos asegurarnos de que solo tengamos las cosas necesarias abiertas y Jaspin. Entonces si ves aquí, si tienes alguna de estas otras pestañas abiertas, queremos cerrarlas. Entonces todo lo que deberíamos haber seleccionado es el botón HTML en el botón de salida, y luego vamos a seguir adelante y eliminar nuestro nombre. Entonces lo primero que tenemos que hacer es decirle al dedo del ordenador realmente leer HTML. Entonces vamos a empezar escribiendo el símbolo de menos arena seguido de un signo de exclamación. Y vamos a escribir la palabra tipo doc en todos los mayúsculas, seguido de un espacio en HTML y minúsculas, seguido del símbolo de los ralladores Dan. Entonces esto es algo que se requiere en la parte superior de cada documento HTML. Entonces ahora que le dijimos a la computadora que leyera HTML, necesitamos decirle dónde va a leer el HTML. Entonces para ello, vamos a crear una etiqueta que sólo tiene la palabra HTML en ella. Entonces vamos a empezar creando nuestra etiqueta de apertura y luego usando el
símbolo Ford Slash . Vamos a crear una etiqueta de cierre y yo voy a seguir adelante y sólo devolver esto para que esté en una línea separada, así que la siguiente etiqueta que queremos escribir va a ser la cabeza tachuelas. Ahora se va a sustituir la etiqueta de cabeza. Todo lo que no queremos dedo del pie realmente exhibir en nuestra página web. Pero queremos que nuestro navegador Web lo sepa. Entonces vamos a seguir adelante y devolver esto a otra línea y dentro de la etiqueta de cabeza, vamos a crear la etiqueta de título. Ahora. El tag del título va a ser reemplazado el título de nuestra página web. Entonces para este ejemplo, vamos a crear un sitio web para el chip de chocolate chunky Cookie Dass Co. Entonces sigamos adelante y apretados eso en la etiqueta del título. Ahora, si me alejo el zoom, notarás que el título de nuestra empresa en realidad no se está mostrando en la página de salida y eso en realidad es algo bueno. Eso es lo que queremos porque la etiqueta de título en realidad está destinada a mostrar el título de su sitio web aquí arriba en la pestaña del navegador Web. Por lo que sólo queremos mirar aquí arriba y asegurarnos de que todo sea correcto. Ahora voy a acercar de nuevo a nuestro código HTML que vamos a poner un retorno después de la
etiqueta de cabeza . Ahora, vamos a crear la etiqueta del cuerpo. Ahora, la etiqueta body es donde se va a colocar todo el código HTML que realmente queremos
mostrar en nuestro sitio web ahora, dentro de la etiqueta body. También queremos crear la etiqueta de pie de página. Ahora, la etiqueta de pie de página es la etiqueta que vamos a usar para colocar todas las cosas que queremos estar en la parte inferior de nuestro sitio web o en el pie de página. Ahora tenemos la estructura HTML básica que deberá utilizar para crear cualquier sitio web. Pero antes de pasar a la siguiente lección, quiero mostrarles una cosa más rápida. Ahora bien, si te das cuenta aquí cuando elimino la etiqueta de cuerpo el tema Mel en realidad se puso rojo. Ahora vemos alguna vez el tema, Mel poniéndose rojo. Eso en realidad significa que no tenemos aire en algún lugar dentro de nuestro código HTML. Ahora, típicamente, esto sucede por un error tipográfico o porque escribimos mal u olvidamos poner en nuestra etiqueta final . Entonces si notan aquí cuando escribo cuerpo de nuevo en el letrero de aire rojo en realidad desaparece y todo vuelve a la normalidad, eso es todo para esta lección, y los veré en el siguiente video.
5. Etiquetas de marv: todo el mundo. Y bienvenido de nuevo. Y esta lección rápida vamos a hablar de las etiquetas de knave. Las etiquetas de knave representan la navegación principal de la página. Ahora, todo lo que tenemos que hacer es ir adelante y golpear retorno tras cuerpo, y vamos a seguir adelante y entrar a la tack de solloza. Ahora, eventualmente, en realidad
vamos a colocar enlaces etiqueta de navegación privilegiada. Pero por ahora, sólo lo
vamos a dejar en paz. Vamos a seguir adelante y en realidad crear el primer texto en su página. Entonces los veré chicos y nuestra próxima lección.
6. H1 a etiquetas de encabezado H6: todos y bienvenidos de nuevo. Y esta lección vamos a cubrir las etiquetas de encabezamiento, sin etiquetas de encabezamiento o cómo creamos titulares similares a periódicos o probablemente sitios web que has visto en Internet. Por lo que la etiqueta de encabezamiento se define mediante el uso de la letra H y luego un número uno a seis. Ahora, si usamos H, uno va a crear el más grande, dirigiéndose hasta el número seis, que va a crear el encabezado más pequeño. Entonces sigamos adelante y escribamos esto y echemos un vistazo a lo que hace. Entonces si tocamos retorno después de la etiqueta de navegación, queremos escribir cada una seguida de la etiqueta H de cierre. Ahora sigamos adelante y en realidad escribamos el nombre de nuestra empresa dentro de la etiqueta H one. Entonces si te das cuenta aquí del lado derecho, debería estar fuera poniendo el nombre que acabamos de escribir. Entonces sigamos adelante y escribamos un ejemplo cada etiqueta de seis para mostrar la diferencia de tamaño. Entonces si te das cuenta aquí, etiqueta
H six es mucho más pequeña que H una etiqueta, así que haremos un ejemplo más, y sigamos adelante y escribamos una etiqueta H cuatro para ver qué tan grande es esa. Entonces si te das cuenta aquí, la etiqueta de cuatro años está entre el tamaño del H uno y los seis años. Exactamente lo que esperábamos. Ahora, al escribir nuestro documento HTML, podemos usar las etiquetas H. Estamos encabezando etiquetas tanto como queramos. Pero la clave a recordar es que queremos usar las etiquetas H one para nuestros artículos más importantes y las etiquetas H six para los artículos menos importantes. Entonces ahora que hemos visto la diferencia que las etiquetas H pueden crear, sigamos adelante y eliminemos estos dos ejemplos. Y luego vamos a crear en realidad cuatro encabezamientos diferentes para nuestro sitio web de ejemplo. Entonces sigamos adelante y creemos la etiqueta de los tres años que la vamos a resaltar. Vamos a copiarlo y pegarlo tres veces más. Entonces vamos a volver al 1er 1 recreado vamos a empezar a mecanografiar todos los
ingredientes naturales , luego un 2do 1 Vamos a escribir en instrucciones que la 3ra 1 Vamos a escribir en información
nutricional y luego en la 4ta 1 estamos va a crear cuando masa de galletas gratis de por vida. Eso es todo para esta lección. Gracias por mirar, y los veré en la siguiente lección.
7. Etiquetas de párrafos: todo el mundo. Entonces bienvenido de nuevo. En este episodio, vamos a cubrir la etiqueta de párrafo para definir la etiqueta de párrafo. Todo lo que tenemos que usar es la letra P. Y queremos usar la etiqueta de párrafo para cada párrafo individual o contenido corporal que
creamos . Entonces vamos a seguir adelante y añadir Ah, slogan toe nuestra página web. Entonces bajo la etiqueta H one, vamos a golpear retorno, y luego vamos a crear la etiqueta P, seguida de la etiqueta de cierre ahí, y vamos a seguir adelante y escribir el eslogan de nuestra empresa. Entonces tecleemos la mejor masa de galletas troceada de chocolate del mundo. ¿ Y sabes qué? Adelante y pongamos esto entre comillas. Ya que es nuestro eslogan. Ahora, al escribir nuestro código HTML, queremos recordar usar la etiqueta de párrafo cada vez que queremos dividir o crear diferentes secciones de contenido. Y cada vez que hacemos esto, el navegador va a publicar automáticamente espacio entre párrafos. Entonces voy a seguir adelante y copiar esta línea aquí y pegarla un par de veces. Tan sólo un ejemplo de espectáculo. Por lo que se puede ver en el lado derecho aquí realmente hay espacio entre los párrafos. En tanto que si fuera a copiar el texto dentro de la línea, se va a seguir añadiendo al párrafo. Ahora, voy a seguir adelante y deshacer esto. En realidad, vamos a seguir adelante y resaltar todo esto y eliminarlo si seguiste y
bajemos al pie o etiqueta aquí y vamos a resaltar entre nuestras etiquetas que devuelve, iban a crear de nuevo la etiqueta de párrafo. Y ahora vamos a escribir alguna copia corporal dentro de nuestro pie o etiqueta. Por lo que queremos colocar ahí el símbolo del copyright. Así que vamos a seguir adelante y abrir una nueva pestaña con Google y vamos a buscar símbolo de copyright y entonces realmente vamos a resaltar esto y simplemente copiarlo justo en nuestro código. Y entonces solo vamos a llenar aquí alguna información más sobre nuestra empresa. Entonces si miramos nuestra página web aquí en el lado derecho, se
puede ver que estamos empezando a conseguir las secciones principales de nuestra página web ahora más adelante en este curso, realidad
comenzaremos a darle estilo y hacer más separación de cada sección por color y algunas otras cosas. Pero por ahora, Vamos a seguir adelante y hacer un reto de codificación rápida para practicar lo que hemos aprendido hasta ahora. Entonces los veré chicos en la siguiente lección.
8. Crear un descanso de línea: ahora. En la lección anterior, cubrí cómo puedes crear diferentes párrafos simplemente creando etiquetas de párrafo MAWR. Pero en algunos escenarios, quizá
queramos que el texto de la misma línea o párrafo esté en una línea diferente. Entonces para hacer esto, solo
tenemos que crear la etiqueta de salto de línea o B R. Y la etiqueta de salto de línea es una de las pocas etiquetas en HTML que no tiene etiqueta de cierre. Entonces todo lo que vamos a hacer es después de la palabra galleta aquí y nuestro título. Vamos a colocar a BR y te darás cuenta aquí del lado derecho que esto en realidad empujó las palabras Doe Co a la siguiente línea. Ahora podríamos haber creado exactamente este mismo efecto poniendo una etiqueta H one abajo y creando las palabras Doe Co. Dentro de eso. Pero hay algunos beneficios que obtenemos de usar para ser nuestra etiqueta. Para empezar, usar la etiqueta BR es mucho mejor porque crea una ruptura en el contenido sin decirle la computadora que es contenido diferente. Entonces lo que quiero decir es, si realmente hubiéramos creado dos etiquetas H una o etiquetas de párrafo diferentes, entonces nuestra computadora va a interpretar el código de que esos textos no son relevantes o no pertenecen juntos. Pero en nuestro escenario, sí
pertenecen juntos y realmente una de las otras razones principales por las que viene de mano la etiqueta BR es si decidimos más adelante que no queremos que una línea rompa su debilitamiento. Simplemente elimina la etiqueta BR sin tener que preocuparse por eliminar otras etiquetas o toda otra línea de código. Entonces eso es todo para esta lección y la siguiente lección vamos a cubrir cómo agregar enlaces a nuestra página web. Los veré en el próximo video.
9. Agregar un enlace: todos y bienvenidos a añadir una fuga en esta sección. Vamos a añadir enlaces a nuestra sección de navegación. Entonces sigamos adelante y empecemos golpeando. Regresa ahora entre las etiquetas de navegación para crear una etiqueta de enlace. Vamos a usar la letra A. Así que sigamos adelante y apretémoslo. Y entonces podemos seguir adelante y poner nuestro título de enlace dentro de la etiqueta de enlace. Ahora, si miras por aquí en el lado de salida, notarás que el texto no parece ser diferente a todo el otro texto de
una página . Y eso es porque necesitamos poner el enlace tu l dentro de la etiqueta de enlace. Entonces después de la primera a, pongamos un espacio y luego apretemos un treff y luego igualemos, seguido de citas. Ahora H ref significa referencia de hipertexto, que significa que cualquier enlace que coloquemos dentro de esas comillas es donde nos
llevará nuestro enlace . Entonces ahora si miramos el lado derecho notaremos que nuestro ratón cambia porque
en realidad tenemos un enlace aquí. Ahora sigamos adelante y pinchemos sobre él y veamos qué pasa. Ahora Todo parece desaparecer. Bueno, eso es porque no tenemos una u R L dentro de nuestro link tag toe realmente nos llevan a. Entonces si seguimos adelante y hacemos clic dos veces en la etiqueta de salida, todo debería volver a aparecer. Ahora hay algunas cosas diferentes que podemos colocar como enlaces dentro de nuestro a treff. Una de las cosas que podemos hacer es simplemente colocar el símbolo hashtag como marcador de posición, lo que significa que al hacer clic en el enlace y no pasará nada. Entonces ahora sigamos adelante y pinchemos en eso, y notamos que no pasa nada. Y así, en algunos escenarios como este ya estaban en la página principal, eso sería un buen uso de la misma,
por lo que nadie va a ninguna parte. Ahora. Sigamos adelante y copiemos aquí todo nuestro enlace tres veces más, y luego llenemos el resto de nuestra navegación. Entonces el 2do 1 vamos a escribir sobre el 3er 1 vamos a escribir contacto y el cuarto y último vamos a escribir compra. Entonces ahora si
miramos, aquí tenemos todos estos enlaces diferentes y se pueden hacer clic, pero no nos hemos estado llevando a ninguna parte ahora porque este es un curso de principiante. No voy a ir demasiado lejos en todas las diferentes cosas con las que podemos enlazar. Y en este curso en realidad no vamos a crear cuatro páginas diferentes y tenerlas todas enlazadas entre sí. Pero sí quiero mostrarles un par de cosas más rápidas que debilitan hacen con enlaces. Entonces lo primero que podemos hacer es crear un enlace a un
sitio web externo o diferente . Entonces si golpeamos el espacio después de la H ref en las comillas aquí, sigamos adelante y escribamos Target igual y luego subrayamos Blank. Ahora queremos seguir adelante e ir dentro de cotizaciones de balsa Rh. Vamos a escribir http Colin para un slash ford slash google dot com. Entonces la razón por la que ponemos este objetivo aquí con las palabras subrayado Blank entre comillas es que le va a decir al navegador que abra una nueva pestaña cuando pinchemos en el enlace. Entonces sigamos adelante y pinchemos ahora en la pestaña sobre, y debería abrir un nuevo enlace y llevarnos a Google, y parece que todo funcionó. Ahora sigamos adelante y cerremos esta etiqueta de Google y luego vamos a eliminar todo esto . Recrea nuestro enlace de etiqueta hash ahí, para que no nos lleve a ninguna parte ahora. Otra cosa a la que también podemos vincular es que podemos colocar enlaces a PDF o cualquier otro documento que hayamos alojado en nuestro sitio web. Pero para este curso, no
vamos a hacer nada con nuestros enlaces. Simplemente iban a usar la etiqueta hash como marcador de posición. En la siguiente lección, voy a cubrir cómo agregar imagen a nuestro sitio web. Los veré en el próximo video.
10. Agregar una imagen: todos y bienvenidos a agregar una imagen en esta lección. Vamos a añadir imagen de una galleta gigante y
grueso de chocolate justo debajo de nuestro eslogan. Entonces para empezar, vamos a dar vuelta después de la etiqueta p de nuestro eslogan, y luego para crear la etiqueta de imagen vamos a usar I M G, que es una abreviatura para la palabra imagen. Entonces sigamos adelante y tecleemos eso ahora. Algo a tener en cuenta es que la etiqueta de imagen es igual que la etiqueta de salto de línea o BR que hicimos aquí
arriba. No requiere una etiqueta de cierre. De hecho, si colocamos una etiqueta de cierre, en realidad solo causará problemas al final del camino. Entonces lo siguiente que tenemos que hacer es poner la fuente de nuestra imagen dentro de la etiqueta de imagen. Entonces si ponemos un espacio después de la letra G, vamos a escribir SRC, que es una abreviatura para fuente, seguida del signo igual y luego las citas. Ahora todo lo que tenemos que hacer es pegar la imagen u R L a R dentro de estas cotizaciones. Entonces vamos a seguir adelante y abrir una nueva pestaña dentro de nuestro navegador y vamos a ir a google dot com slash imágenes y vamos a buscar cookie y luego imagen PNG como una sola palabra. Y si te desplazas hacia abajo, veamos 1234 filas. Encontré esta gran imagen aquí mismo. Entonces si hacemos click en eso y hacemos clic en ver imagen, vamos a seleccionar el tu L y luego golpear comando, ver o controlar, ver para copiarlo. De lo contrario, puede hacer clic derecho y pulsar copia. Entonces vamos a volver a nuestro código y luego con entre las comillas lo iban a pegar. Entonces ahora deberíamos ver por el lado derecho que tenemos esta gigantesca imagen de una cookie ahora en nuestra página web. Ahora la cookie parece hacerse cargo de todo nuestro sitio web y es un poco demasiado grande . Entonces lo que queremos hacer es establecer la altura y el ancho de este tamaño de imagen. Entonces, después de nuestras comillas, sigamos adelante y tecleemos altura igual y luego cotizaciones. Y luego sigamos adelante y tecleemos 250 p x, que es la abreviatura de píxeles. Entonces ahora si miras nuestra cookie, es mucho más pequeña Y si miras, realidad
podemos cambiar la altura solo cambiando la cantidad de píxeles aquí, para que podamos hacerla realmente pequeña o realmente grande. Ahora también podemos establecer el con al igual que establecemos la altura. Pero una cosa que queremos señalar es que si ponemos el con a algo diferente a la relación original de la imagen, se va a estirar graciosa. Entonces lo que podemos hacer es simplemente escribir en Otto, y eso asegurará que la relación de la imagen se mantenga a su estado original. Ahora solo hay una cosa más que necesitamos cubrir con la tachuela de imagen. cualquier momento que utilices la etiqueta de imagen, se requiere que escribamos unos atributos antiguos. Entonces para hacer esto, vamos a escribir un lt el símbolo igual y luego comillas. Ahora los atributos del altar es donde ponemos una descripción de la imagen que se puede mostrar si el sitio web tiene algún problema para mostrar la imagen. Entonces vamos a seguir adelante y escribir una buena descripción de nuestra cookie ahora para probar esto y para mostrar un ejemplo para ustedes chicos, voy a eliminar algunos caracteres en esto, su l y ustedes deben notar en el lado derecho que son todos atributos muestra aquí. Entonces si miras aquí mismo, esto es lo que se mostrará si hay problemas con la carga de tu imagen. The All Atributs también se utiliza para personas con discapacidad que visualizan lectores que leen el código de su sitio web si son con discapacidad visual. Entonces sigamos adelante y deshacemos eso. Si rompimos el enlace y nos aseguramos de que nuestra cookie aparezca en la página de la derecha en la siguiente lección, les
voy a mostrar cómo crear una imagen que acceda a una fuga. Los veré en el próximo video.
11. Crear una imagen con un enlace: todos bienvenidos de nuevo. Y en esta lección vamos a convertir nuestra imagen de cookie aquí en un enlace clicable. Entonces para empezar, coloquemos nuestro cursor al final de la etiqueta de párrafo fueron reemplazados nuestro eslogan y presione la tecla de
retorno. Ahora todo lo que tenemos que hacer para convertir una imagen en un enlace se envuelve la etiqueta de imagen dentro de nuestra
etiqueta de enlace . Así que vamos a seguir adelante y crear la etiqueta A de apertura, y luego vamos a dar clic antes de la etiqueta H tres y crear están cerrando etiqueta de enlace ahora para que
esto sea un poco más fácil para nosotros para leer más adelante, vamos a dar clic frente a la etiqueta de imagen y golpear la pestaña clave. Entonces hay un poco de diferencia aquí ahora, dentro de nuestra primera una etiqueta necesitamos poner un espacio seguido del H ref igual Dónde colocará la fuente de nuestro enlace o donde queremos que el enlace envíe al usuario. Por lo que para este escenario, queremos un enlace de vuelta al sitio web original de donde obtuvimos esta imagen de cookie. Entonces si volvemos a subir a nuestra búsqueda de imágenes de Google y golpeamos página de visita, sigamos adelante y copiamos esto Earl y colocamos eso por la H ref. Al igual que antes queremos escribir, target es igual y luego dentro de las cotizaciones subrayan en blanco porque queremos que los usuarios no tengan que preocuparse por volver a nuestro sitio, y esto creará automáticamente una nueva pestaña en el navegador cada vez que hacen clic en él. Entonces sigamos adelante y pinchemos en su galleta para probar que está funcionando y Walla. Parece que todo funcionó bien. Entonces ahora podemos seguir adelante y cerrar de todas estas pestañas extra y antes de pasar a la siguiente lección será un reto de codificación rápida para asegurarnos de que tu comprensión todo hasta ahora después de que tomes el reto de codificación, ya veré ustedes chicos en la siguiente lección donde comenzaremos a aprender la etiqueta div y crear separación dentro de nuestro sitio web.
12. Usar la etiqueta de div: todo el mundo. Me alegra que lo hayas hecho a través del reto de codificación en tu espalda y listo para aprender más. Ahora en este apartado, vamos a cubrir la etiqueta DIV. Ahora. Div es la abreviatura de la división de palabras en la etiqueta diff nos ayuda a crear diferentes divisiones o secciones dentro de nuestro documento HTML para ayudar a mantener nuestro código un poco más organizado. Entonces si miramos por aquí en el lado izquierdo, probablemente
te imaginas si seguimos escribiendo MAWR más código, comenzaría a ponerse un poco desordenado y difícil de leer. Entonces por eso usamos la etiqueta DIV para separar secciones de contenido que ahora son relevantes. El dip tag también nos ayudará más adelante cuando empecemos a cubrir CSS y veremos por qué es importante envolver diferentes secciones y etiquetas dip ya que nos ayuda a definir diferentes colores y fuentes y más. Entonces empecemos envolviendo todas nuestras secciones relevantes con la etiqueta diff. Por lo que queremos dar click al final de la bruja de los navs y golpear el retorno T. Entonces vamos a escribir Div y luego vamos a seguir adelante y tab end cada uno nuestro eslogan y luego nuestro enlace en nuestras cosas de imagen. Ahora, después de la etiqueta de enlace de cierre, vamos a golpear retorno y vamos a escribir la etiqueta DIV de cierre. Ahora sigamos adelante y envolveremos todos nuestros H tres encabezados y etiquetas dip en preparación para más adelante cuando iniciemos el dedo del pie ADM. O información a ellos. Ahora, una cosa que debilita hacer al escribir código se usa copiar y pegar a nuestra ventaja. Entonces en este escenario, voy a escribir el día de apertura de etiqueta y copiarlo frente a todos los demás cada tres . Entonces los voy a devolver a la siguiente línea. Ahora vamos a regresar después de nuestra primera etiqueta de cierre de tres años y a la derecha la
etiqueta def de cierre . Ahora solo podemos seguir adelante y copiar y pegar eso y hacer lo mismo por todos ellos. Copiar y pegar solo nos ayuda a escribir el código un poco más rápido, y asegura que tenemos menos tipografías que si fuéramos a escribir cada etiqueta div una por una. Entonces en este punto, puede ser un poco difícil entender por qué necesitamos la etiqueta diff. Pero más adelante en la sección CSS de este curso. Será mucho más fácil dedo del pie. Entiende por qué empezamos a configurar nuestro código de esta manera. Gracias por ver. Y los veré en el próximo video.
13. Crear listas sin orden y ordenar: todos y bienvenidos de nuevo esta lección. Vamos a seguir agregando contenido a cada una de nuestras secciones del lado derecho, y vamos a cubrir cómo crear una nueva lista ordenada una ordenada. Y una lista nórdica es una lista que no tiene números pero en su lugar usa puntos de bala ahora para empezar. Vamos a golpear retorno después de nuestra etiqueta H tres para el rumbo de todos los ingredientes naturales. Y luego vamos a crear la etiqueta U L en la UL. Etiqueta es simplemente la abreviatura de un Nord Erred listas. Ahora, antes de que empecemos a escribir el texto que queremos estar en su lista, sigamos adelante y golpeemos retorno y luego necesitamos crear la etiqueta L. I. Ahora la etiqueta L I tiene que ser usada para cada elemento de la lista. Entonces en este escenario, voy a escribir una serie de ingredientes diferentes. Y por conveniencia, he entrado a la lista como artículo adjunto a este video, por lo que deberías poder simplemente copiar y pegar la lista, o puedes seguir y escribir todo mientras lo hago ahora que hemos escrito todo fuera, si miramos por el lado derecho aquí, notarás bajo nuestro encabezado de ingredientes tenemos un norden, o lista con viñetas de todos los ingredientes en nuestra masa de galletas. Ahora queremos crear instrucciones paso a paso. Por lo que para la sección de instrucciones justo a continuación, queremos tener números para nuestra lista. Entonces para hacer esto, vamos a dar vuelta después de la etiqueta H tres y vamos a usar la etiqueta. Ah bueno, que es abreviatura de listas ordenadas ahora, al
igual que la lista a Norden anterior. También necesitamos usar la etiqueta L I para cada elemento de lista que queremos tener en la lista. Entonces de nuevo, voy a copiar y ritmo todas las etiquetas de listas sólo para que tengamos suficiente. Y luego voy a empezar a escribir las instrucciones, que también se incluyen en el artículo adjunto a este video. - Ahora parece que tenemos unas cuantas etiquetas L.
I extra , así que solo resaltemos esas y eliminémoslo. Entonces ahora si miramos nuestro lado derecho y nos desplazamos un poco hacia abajo, notarás que la lista de Instrucciones tiene números en el lado izquierdo, mientras que la lista de InTs codiciosos de Thean tiene puntos de bala. Ahora si alguna vez necesitábamos un cambio. Estos siempre simplemente tienen que hacer es editar la O y la U. Así que ahora si miramos, podemos cambiarlos de ida y vuelta. Ahora que tenemos la sección de ingredientes e instrucciones llena, vamos a pasar a la siguiente lección y video. ¿ Dónde cubrirá cómo crear un formulario de entrada?
14. Crear formas: todos y bienvenidos a crear formularios que forma es una forma de capturar la
información de un cliente , como un correo electrónico o un nombre. Entonces para empezar, vamos a dar vuelta después de la etiqueta de cada tres que dice Winfrey. Masa de galleta de por vida. Ahora, para crear nuestro formulario, primero
necesitamos crear la etiqueta de formulario. Entonces sigamos adelante y golpeemos volver ahora para crear el campo que permita al usuario escribir , necesitamos usar la etiqueta de entrada. Entonces tecleemos la entrada. Y una cosa que notarás es que la etiqueta de entrada no tiene una etiqueta de cierre similar a nuestra etiqueta de
imagen. Entonces todo lo que necesitamos es solo la etiqueta de apertura de entrada ahora dentro de la etiqueta de entrada que necesitábamos. Ponga qué tipo de campo es este, y porque sólo vamos a recoger el nombre en el 1er 1 vamos a escribir tipo igual, luego texto. Ahora, si nos desplazamos hacia abajo por el lado derecho, verás que ahora tenemos un campo aquí donde el usuario podría escribir su nombre. Lo siguiente que queremos hacer es etiquetar la parte superior de la misma, así que sigamos adelante y creamos de nuevo la etiqueta de párrafo, y luego el nombre correcto dentro de ella, y ahora verás que aparece por encima de nuestra entrada de campo. A continuación, queremos crear otra sección de entrada donde podamos recolectar el correo electrónico del usuario. Entonces sigamos adelante y Kabi el nombre y la entrada sag con comando, ver o controlar ver, y luego pegarlo debajo de nuestro 1er 1 Así que ahora ya verás, tenemos que decir el nombre. Entonces lo que queremos dio es eliminar el segundo nombre y teclear correo electrónico ahora, fin de decirle a la computadora qué valor es lo que queremos agregar el nombre dentro de la etiqueta. Entonces sigamos adelante y tecleemos en nombre igual. Y luego pondremos nombre para ese, y para el 2do 1 escribirá en nombre igual a correo electrónico. Ahora el nombre es igual a función es solo para que el navegador entienda lo que es. No aparecerá en el lado derecho, y en este curso no vamos a cubrir todos los detalles para que nuestro formulario funcione correctamente. Pero sólo hay una cosa más que necesitamos crear. Necesitamos crear un botón de envío que permita al usuario hacer clic en algo con el fin de
enviar tres MFO. Entonces sigamos adelante y golpeemos retorno, y vamos a crear una etiqueta de entrada más. Pero esta vez vamos a crear el tipo submit, y ahora notarás que un botón de envío realmente aparece en el lado derecho. Ahora, típicamente, tendríamos entonces que volver a la etiqueta de formulario de aquí y de inmediato algún código más que le
dijera a la computadora ¿a dónde envía el formulario? Pero debido a que se trata de un curso muy principiante, no
vamos a cubrir eso en este video ni en ninguno de los videos que siguen con eso se dice. Eso es todo para este curso y crear formas y el siguiente curso, vamos a cubrir cómo crear tablas y vamos a empezar a sumar en nuestra
información nutricional . Os veré chicos en el próximo video
15. Crear tablas: todos bienvenidos de nuevo y esta lección. Vamos a cubrir cómo crear una mesa, y vamos a llenar la información para nuestra sección de información nutricional, pero se inicia. Necesitamos que lo golpee. Regresa después de la etiqueta H tres y crea la etiqueta de tabla. Voy a comprar la etiqueta de la mesa de cierre. Entonces sigamos adelante y golpeemos. Regresa entre ellos ahora dentro de la etiqueta de la tabla. Hay algunas etiquetas diferentes que podemos usar. El primer tag que necesitamos usar es TR, que ahora es la abreviatura de fila de tabla. Dentro de nuestra fila de tabla, tenemos que especificar una de dos etiquetas diferentes antes de escribir nuestra información. Por lo que el 1er 1 que podemos hacer es crear la etiqueta th, que significa encabezamiento de mesa. Por lo general, sólo
vamos a usar la etiqueta th una vez, y vamos a usar eso para crear encabezados para una tabla. Entonces sigamos adelante y tecleemos calorías y sigamos adelante, copie toda esa fila y péguela de nuevo. Ahora notarás que las calorías están al lado de las otras calorías que acabamos de copiar, y eso es porque hemos creado una segunda fila así que Si fuéramos a seguir copiando
esto, seguirá creando más rosa. Ahora para nuestra sección de información, sólo
vamos a tener que subir. Entonces sigamos adelante y eliminemos ambos. Entonces nos vamos Onley, también ahora. La segunda etiqueta que podemos usar dentro de la etiqueta TR es la etiqueta T D, que es abreviatura de datos de tabla. Entonces sigamos adelante y cambiemos la segunda etiqueta de calorías aquí a T d Ahora, si miramos el lado derecho aquí notaremos que el encabezado de la tabla está en negrita mientras los datos de
la tabla son regulares. Entonces sigamos adelante y cambiemos las calorías de esta segunda etiqueta aquí a 98. Ahora vamos a seleccionar todo dentro de la etiqueta TR, incluyendo la propia etiqueta, y copiarlo un par de veces. Ahora vamos a llenar toda nuestra información nutricional ahora, igual que los videos anteriores donde hicimos esa lista para ingredientes e instrucciones. He incluido toda la información nutricional en el documento adjunto a este video para su conveniencia. De lo contrario, puedes seguir viendo el video y seguirlo mientras escribo todo. - Por lo que
ahora que tenemos toda nuestra información rellenada en el apartado de información nutricional. Solo hay unas cuantas cosas que quiero mostrarles ahora. Creamos dos columnas diferentes aquí, pero en realidad puedes crear tantas columnas surgieron como quieras. Simplemente necesitas seguir colocando las etiquetas th o TD dentro de las etiquetas TR para crear más filas. Entonces si miras aquí, acabamos de crear dos filas más bajo la sección de proteínas. Entonces voy a deshacer eso ahora que hemos cubierto cómo crear tablas y HTML, Vamos a hacer un rápido quiz y luego los veré chicos en nuestro video HTML final.
16. Crear comentarios en HTML: todos y bienvenidos a nuestro video final en la sección HTML de este curso. En este video, vamos a cubrir cómo crear comentarios dentro de nuestro código HTML. Ahora hay algunas razones por las que quisiéramos crear un comentario sobre su abrigo. Una de las razones es que podemos dejar notas para nosotros mismos o tal vez incluso para otros con los que estaban trabajando. Otra razón es que quizá queramos comentar algo de nuestro código para que no se muestre hasta que decidamos más adelante que sí queremos mostrar. Entonces sigamos adelante y echemos un vistazo a cómo creamos comentarios. Cuestión interna. Abrigo Mel. Entonces, vamos a desplazarnos hacia abajo. Por lo que vemos encabezar ahora la información nutricional. Justo encima de eso, vamos a dar clic después de la etiqueta diff y golpear retorno Ahora para crear un cometa. Empezamos con la etiqueta de apertura, que es el símbolo de menos tierra, seguido de un signo de exclamación, seguido de dos guiones. Ahora bien, si te das cuenta después de que escribimos esa etiqueta, todo el siguiente código se volvió verde y eso se debe a que el navegador no ve dónde dejar de leerla. A modo de comentario porque no hemos creado están cerrando Tech. Entonces para crear la etiqueta de cierre para un comentario, vamos a golpear el espacio y luego a las marcas de guión, seguido del símbolo mayor que. Entonces una cosa a notar es que no necesitamos un signo de exclamación en nuestra etiqueta de cierre de comentarios. Ahora, dentro de nuestras etiquetas de comentarios, podemos crear o realmente escribir el comentario que queremos dejar para nosotros mismos. Entonces sigamos adelante y tecleemos un comentario. Entonces si te das cuenta aquí, yo escribí. Esta información nutricional es de 2017 por lo que este puede ser un comentario que te gustaría dejar. Por lo que si entraras en el código de tus sitios web más adelante, sabrías la edad de la información nutricional Waas. Ahora estábamos trabajando en este sitio web con un amigo o compañero de trabajo. Este comentario también puede ser útil porque les haría saber cuándo se
creó esta información . Ahora sigamos adelante y echemos un vistazo a cómo podemos comentar diferentes objetos para que
no se muestren en el lado derecho. Entonces, como ejemplo, vamos a comentar nuestra imagen de cookie para que podamos verla desaparecer y luego reaparecer cuando le quitemos el comentario. Entonces para hacer esto, vamos a crear la etiqueta de apertura de nuestro comentario justo frente a la etiqueta A. Y luego, después del cierre una etiqueta. Vamos a seguir adelante y crear la etiqueta de comentario de cierre. Entonces ahora, si miras el lado derecho son galleta, ha desaparecido, y notarás que todo nuestro código ahora es verde. Ahora, si decidimos más adelante eso, sí
queremos que nuestra cookie aparezca en nuestro sitio web que todo lo que tenemos que hacer es Adelante y eliminar nuestras etiquetas de comentarios y notarás que la cookie vuelve a aparecer en nuestro sitio web. Si miramos a Oliver Code en el lado izquierdo, notarás que hasta ahora hemos cubierto bastante. Este es el video final en la sección HTML. Va a haber un rápido quiz para revisar todos los diferentes elementos que hemos cubierto dentro de HTML. Después de tomar, el quiz se sumergirá justo en la historia del CSS, y luego comenzaremos a agregar color y diferentes fuentes al lado derecho de nuestro sitio web . Sigan con el buen trabajo, chicos, y los veré justo después del quiz
17. Resumen de CSS: Hola ahí. Bienvenido a la visión general de CSS. CSS describe cómo los elementos de emisión Mel se mostrarán en pantalla. Podemos cambiar las fuentes de tamaño de color y más. CSS es sinónimo de hojas de estilo en cascada. cascada significa que los estilos pueden caer o una cascada de una hoja de estilo a otra, lo que permite utilizar múltiples hojas de estilos dentro de nuestro documento HTML. A lo largo, en esta parte del curso se utilizarán las etiquetas HTML de las que aprendimos en los videos
anteriores fin de darle estilo a los diferentes elementos de nuestra página Web. Hagamos un breve quiz y luego cubriremos el CSS en impuestos o cómo escribimos el CSS.
18. Sintasa de CSS: todos y bienvenidos a la lección CSS Syntex para escribir CSS. Empezamos por usar un selector. Ahora estas transmiten sean las etiquetas HTML que aprendimos en los videos anteriores, o también pueden ser I DS o clases que vamos a cubrir más adelante. En este curso, después del selector, utilizamos un corchete rizado de apertura, seguido de una propiedad. Ahora los inmuebles van a ser todos los diferentes videos que cubrimos en este apartado. Cada propiedad le dice al navegador que haga algo diferente, como cambio, cambio color, cambio tamaño, decoración, etcétera. Después de la propiedad, ponemos el símbolo de colon y luego ponemos el valor. Entonces para el ejemplo de color, teníamos derecho el nombre de un color como el azul después del valor que necesitamos para crear o escribir un coma. Ahora el semi colon le dice a la computadora que es el fin de esa propiedad
y valor, y pasará a leer el siguiente. Ahora podemos escribir múltiples propiedades o valores emparejados con diferentes selectores. Entonces para este ejemplo, voy a crear una propiedad y valor más y luego necesitamos cerrar todo con el corchete rizado de cierre. Ahora todo entre sí son corchetes rizados, es la declaración. Esencialmente, le dice al selector lo que queremos hacer con nuestro código. Eso es lo básico de la sintaxis CSS. En el siguiente video, echaremos un vistazo más de cerca buceando justo en cambiar el abrigo de fondo.
19. Color de fondo: todos y bienvenidos a la lección de color de fondo Ahora para empezar. Lo primero que tenemos que hacer es abrir la pestaña CSS en la parte superior de la ventana de nuestro navegador . Entonces si haces clic en el botón CSS aquí, notarás que ahora tenemos una columna CSS. Ahora, aquí es donde vamos a escribir todo el CSS para el resto de este curso. Ahora la propiedad de color de fondo nos permite cambiar el color de fondo de nuestros diferentes elementos
HTML. Entonces lo primero que vamos a hacer es cambiar todo el color de fondo de nuestra página Web . Entonces si miramos nuestro HTML en el lado izquierdo, aquí notaremos que tenemos todos nuestros diferentes elementos envueltos dentro de nuestra etiqueta de cuerpo. Entonces para escribir esto, primero
queremos escribir cuerpo, que es nuestro selector CSS, seguido de los corchetes rizados. Y si notas cuando escribes el primer corchete rizado, el 2do 1 se prepoblará para ti. Entonces quieres golpear retorno, y ahora en la siguiente línea, queremos escribir o propiedad, que es el color de fondo dash, seguido de un colon, y luego queremos escribir el color para que haya un número de diferentes colores que se debilitan de inmediato, pero tienen que ser colores seguros para la Web, por lo que tienen que ser ya sea códigos hex, códigos
RGB o nombres de color. Entonces vamos a escribir un código hexadecimal, que es de nueve b tres ocho c, seguido de nuestro semi colon. Ahora, recuerda, como cubrimos en el último video, el Semi Colón le dice a la computadora que ese es el final de la declaración. Entonces después de leer que sabe que puede pasar a leer la siguiente propiedad. Ahora, si miramos el lado derecho aquí veremos que el color de fondo de su página Web es ahora de este color marrón claro. Ahora queremos cambiar el color de fondo de algunos elementos más de artículos que
realmente queremos destacar. Por lo que también queremos que sobresalga el nombre de nuestra empresa. Entonces si miramos el nombre de nuestra empresa aquí en el lado izquierdo notaremos que está en cada una etiqueta. Entonces sigamos adelante y cambiemos el color de fondo usando H one como selector y luego a la derecha el color de fondo en como la propiedad y para la H. Queremos que sea un color azul claro. Entonces sigamos adelante y usemos el código hexadecimal tres BB nueve ff Así que ahora si miramos aquí el lado derecho, el color azul claro debería aparecer detrás de nuestro texto. Ahora solo sigamos adelante y desplázate hacia abajo y sigamos adelante y escribamos en un color de fondo para nuestro pie de página. Entonces si recordamos en la sección HTML de este curso, utilizamos la etiqueta de pie de página para HTML. Entonces sigamos adelante y tecleemos pie de página como nuestro selector. Y una vez más, tecleemos el color de fondo. Y ahora en esta ocasión, usemos un color de ejemplo que sea Web seguro para que podamos escribir una serie de
nombres de color diferentes , y para ver una lista completa, debes visitar el dedo del sitio web W three c. Aprende más, pero para este curso, solo
sigamos adelante y tecleemos gris claro, y ahora notarás que nuestro pie de página aquí abajo es gris claro. Ahora bien, si notas en el lado derecho, el color de fondo termina muy cerca del borde de nuestro texto. Ahora, no te preocupes. Posteriormente,
en este curso, vamos a cubrir cómo Toe ADM o Margin y relleno para darle al texto más espacio para respirar. Ahora, antes de seguir adelante, solo
agreguemos un color de fondo más. Por lo que queremos asegurarnos de que todos nuestros subtítulos aquí destaquen un poco más de lo que ellos. Entonces sigamos adelante y llamarlos usando la etiqueta H tres. Y luego cambiemos el color de fondo de esos dedos blancos. Entonces eso es todo lo que no nos hemos dolorido por este curso. Y la siguiente lección vamos a cubrir cómo crear I ds. Los veré en el próximo video.
20. Crear un id: Hola ahí. Bienvenido a crear un I. D. Y I D nos permite darle estilo a algo específicamente sin afectar a todas las demás
etiquetas similares . Entonces para crear un I. D. Primero
tenemos que ir a nuestro HTML. Entonces sigamos adelante y creemos una sección I D para todos los ingredientes naturales. Entonces vamos a crear una etiqueta I D en la etiqueta DIV que envuelve esta sección. Entonces sigamos adelante y escribimos yo d igual seguido de comillas. Y entonces tenemos que llegar a un
nombre I. D. D.. Ahora un nombre I D puede contener caracteres Onley. A a Z. Podrían ser minúsculas o mayúsculas, y puede contener números del cero al nueve. Pero ahora no puede empezar con el número. Por lo general, al llegar con el nombre, se
quiere llegar a algo que corresponda a su categoría o sección. Por lo que tiene más sentido cuando miras tu código más adelante. Entonces, para este ejemplo, sólo
vamos a llamarla yo d nombre ingredientes. Ahora volvamos a nuestro panel CSS en este tiempo, lugar de llamar a nuestro elemento escribiendo Div. Vamos a escribir ingredientes para que en realidad podamos incluso copiar esto solo para ahorrar algo tiempo. Y luego necesitamos un hashtag have ah delante de eso, que es el símbolo
que representa un I. D. Así que ahora seguimos eso con nuestros corchetes rizados y vamos a seguir adelante y crear una propiedad de
color de fondo con el valor F nueve F nueve F nueve. Entonces como ven aquí, ahora
tenemos un color ligeramente gris en el lado derecho, y en Lee afectó esta sección porque creamos solo una yo d. Así que queremos crear también ideas para las siguientes secciones porque queremos cada sección dedo del pie , tienen un color diferente. Entonces sigamos adelante y creemos un I D para la sección de instrucciones y usemos el código hexadecimal ff A a 80 porque queremos que la sección de instrucciones destaque y tenga un color rojo suave para
que atraiga nuestra atención. Entonces sigamos adelante y hagamos la sección de información nutricional. - Y ahora sigamos adelante y hagamos la sección de masa de galleta libre de viento para toda la vida. Entonces vamos a nombrar a esta victoria por abreviatura, y podemos copiar esto para ahorrar algo de tiempo, pero luego vamos a cambiar el color aquí. Dos naranjas. Por lo que eso destaca un poco. Adelante y tecleemos, y yo d por nuestro eslogan aquí porque más adelante, cuando cubramos algunas propiedades o CSS, vamos a cambiar eso. Pero no queremos afectar al resto de nuestro texto. Entonces si buscamos eslogan aquí, que está en una etiqueta de párrafo, vamos a crear el I D igual a eslogan. Por lo que en resumen, desea utilizar I DS en cualquier momento que desee cambiar elementos específicos en su página Web sin afectar a ningún otro elemento. Ahora recuerda, el I DS solo se puede usar una vez, así que si necesitas usarlo un par de veces o más de una vez, quieres crear clases, que vamos a cubrir en el siguiente video
21. Crear clases: todos bienvenidos de nuevo. Y esta lección vamos a cubrir cómo crear clases. Las clases son esencialmente las mismas que I DS que acabamos de cubrir, excepto que las clases se pueden reutilizar tantas veces como queramos. Por lo que para crear una clase necesitamos también crear un nombre para ella y agregarla a nuestro HTML. Al igual que las clases I DS pueden contener los mismos caracteres a thers e minúsculas o mayúsculas y los números cero a nueve. Pero al igual que yo DS, tampoco
pueden empezar con el número. Entonces vamos por el lado izquierdo y vamos a crear una clase para nuestros H tres elementos porque más adelante en este curso, vamos a cambiar el estilo de todos nuestros subtítulos documento HTML interno Aquí en el lado
izquierdo. Vamos a seguir adelante y escribir clase igual a comillas y luego dentro de las
comillas hay nombre de clase. Ahora para esto, vamos a escribir título y luego sólo vamos a copiar esto y pegar esto en nuestros otros títulos. Entonces deberíamos tener uno y los cuatro de nuestros subtítulos o títulos que hemos creado aquí ahora, más adelante en este curso después de aprender algunas propiedades y valores más, usaremos las clases para alterar el estilo de nuestros subtítulos. Eso es todo por este video. Los veo en la siguiente lección.
22. Crear un borde: Hey ahi y bienvenidos a crear una frontera. Y esta lección vamos a cubrir la propiedad fronteriza y los muchos valores diferentes que van con ella. Entonces para empezar, sigamos adelante y agreguemos una frontera al nombre de nuestra empresa aquí. Entonces debido a que ya cambiamos el color de fondo llamando a la etiqueta H one, podemos seguir adelante y agregar nuestra propiedad a eso. Entonces después del color de fondo aquí golpeó retorno en tipo fuera borde, seguido de un símbolo de dos puntos. Ahora la propiedad fronteriza requiere tres valores diferentes después de ella. Entonces lo primero que tenemos que decirle es el grosor del borde o con diciéndole
cómo son los píxeles maney. Por lo que tenemos que escribir un número, seguido de P X, que es la abreviatura de píxeles. Entonces tecleemos cuatro p x ahora. Lo siguiente que tenemos que decirle es qué estilo queremos que sea nuestra línea. Entonces, por ahora, solo
sigamos adelante y escribamos sólidos. Y como te darás cuenta, ya
tenemos un borde agregado a nuestra página Web en el lado derecho. Ahora prepobló negro porque el color de nuestro negro de Texas, pero el tercer valor que podemos cambiar es el color. Entonces sigamos adelante y cambiemos esto a un tono de azul escribiendo el código hexadecimal 15 89 ff, seguido de nuestro punto y coma. Ahora hay una serie de fronteras diferentes que puedes crear. Entonces sigamos adelante y editemos el tipo aquí donde escribimos sólido y cambiemos esto a punteado. Entonces ahora si ves en el lado derecho ahora tenemos una frontera punteada. Ahora también podemos teclear punteado o doble, o podemos escribir oculto si queremos que no se muestre hasta que cambiemos de opinión más adelante. Entonces sigamos adelante y volvamos a escribir en sólido y dejarlo en eso por ahora. Entonces si se nota aquí del lado derecho, el borde acaba de seguir el valor que habíamos llamado en la forma que ya tiene. Por lo que tenemos una frontera muy cuadrada. El delinea nuestro fondo azul. Ahora, en el siguiente video, vamos a cubrir la propiedad del radio fronterizo donde sumará esquinas redondeadas a nuestra frontera. Os veré chicos en el próximo video
23. Radio de frontera: todos y bienvenidos a la lección de radio fronterizo. Ahora queremos cambiar el borde que acabamos de crear en el último video toe tienen
esquinas redondeadas . Entonces sigamos adelante y volvamos a R. H. Un selector aquí arriba y después de la propiedad fronteriza acabamos de crear Vamos a golpear retorno y tecleemos el radio de frontera con el guión en el medio, que es la propiedad que usamos para seleccionar específicamente el radio o nous redondeado de un borde. Ahora por defecto son cero, pero podemos teclear cualquier número de píxeles. Y como usted nota aquí en el lado derecho, cuando lo escribo, cambia automáticamente. Entonces si escribo un número muy alto, será así frente a un número muy pequeño como ese. Ahora también podemos usar porcentajes con la propiedad de radio de frontera. Entonces sigamos adelante y dejemos eso a cuatro píxeles. Y ahora quiero mostrarles cómo podemos crear bordes redondeados para esquinas específicas, lo que
significa que no hace que las cuatro esquinas sean redondeadas. Queremos agregar un borde redondeado a todos los títulos que creamos y crear un
video de clase por lo que para llamar a la clase, utilizamos un punto seguido del nombre de la clase el cual usamos título y luego queremos rellenar la propiedad del radio de frontera. Ahora, si solo escribimos cinco PX por ahora, te darás cuenta aquí que las fronteras se han creado ahora para la información nutricional y los todos los ingredientes naturales. Es un poco difícil decir que cambió debido a que el color de fondo era muy similar. Ahora también podemos crear redondos de bordes para esquinas específicas de Onley escribiendo qué
esquina queremos que se cambien. Por lo que para ello, comenzamos en la esquina superior izquierda con el primer valor, seguido de la esquina derecha y seguimos yendo en sentido horario. Entonces echemos un vistazo a lo que quiero decir. Entonces si tecleamos en cero después de cinco, p. X ahora notará que nuestra esquina derecha ahora es cuadrada. Por lo que queremos que el dedo del pie también sea redondeado, porque queremos que tanto las esquinas superiores sean redondeadas. Entonces tecleemos cinco p x y luego hagamos 00 Así que ahora si miramos el lado derecho notaremos que las dos esquinas superiores a su alrededor en las dos inferiores son cuadradas, así que podríamos cambiar cualquier número de combinación aquí para redondear esquinas específicas o dejarlas cuadrado. Pero sigamos adelante y dejemos los dos primeros redondeados en la parte inferior dos cuadrada. Ahora bien, si nos desplazamos hacia abajo notaremos que también tenemos esto en todos nuestros otros. Pero de nuevo, es un poco difícil de ver en estos dos porque el color de fondo es similar. Pero probablemente también notaste que el tipo de fondo se muestra a través de la vuelta de una esquina aquí porque sigue siendo cuadrada. Entonces para cambiar esto, necesitamos agregar la propiedad de radio de frontera a todas nuestras etiquetas I D abajo. Y como queremos que se redondeen todo el camino, solo
vamos a teclear cinco píxeles una vez. Y si te das cuenta aquí, ahora se ha cambiado
el todos los ingredientes naturales uno. Entonces ahora sólo necesitamos copiarlo a las otras tres ideas que creamos. Entonces ahora si echamos un vistazo al lado derecho notaremos que las secciones All Forever ahora tienen esquinas redondeadas y todo poco a poco empieza a juntarse. Eso es todo por crear un radio de frontera. Os veré chicos en el próximo video
24. Espacio adicional: todos, Bienvenidos a la lección de relleno en este video. Te voy a mostrar cómo crear espacio entre tu contenido en la frontera. Entonces echemos un vistazo a este diagrama, que explica la diferencia entre el relleno y el margen. Entonces si te das cuenta aquí, relleno es el espacio entre nuestro contenido y el borde, mientras que el margen es el espacio fuera de nuestra frontera. Por lo tanto, el relleno no puede tener valores negativos. Entonces para empezar, sumemos algo de espacio entre nuestro título de la empresa aquí y el borde azul que
creamos en un video anterior. Entonces subamos a nuestro H un selector aquí y después del radio fronterizo. Vamos a dar vuelta y luego tecleemos la propiedad de relleno. Por lo tanto, para definir la propiedad de relleno, necesitamos agregar un valor de píxeles. Entonces vamos a Typhon 20 p. x. Y como ves aquí ahora, en el lado derecho, tenemos mucho más espacio y solo hace que sea un poco más fácil de leer. Ahora, cuando acabamos de agregar 20 píxeles en, agregó 20 píxeles en cada lado alrededor del contenido. Por lo que la parte superior izquierda, derecha e inferior Ahora También podemos añadir específicamente puntera acolchada en Lee un lado o
lados específicos si es necesario. Entonces si miramos el lado derecho notaremos que los títulos o subtítulos que tenemos aquí, están un poco crujidos en necesita más espacio. Entonces sigamos adelante y agregamos relleno a la parte superior e inferior y a los lados izquierdo y derecho. Pero queremos que la parte superior e inferior sean ligeramente diferentes a los lados izquierdo y derecho. Por lo que menores de tres años Selector, volvamos después de una propiedad de color de fondo, vamos a crear de nuevo la propiedad de relleno. Entonces ahora si creamos 10 p x, seguido de cinco p. x Te darás cuenta aquí que agregó 10 píxeles en la parte superior e inferior y luego cinco píxeles el lado izquierdo y derecho. Entonces si escribes a valores en una fila como acabamos de hacer, el 1er 1 representa la parte superior y la inferior, y el 2do 1 significa los lados izquierdo y derecho. Ahora también podemos especificar relleno para un solo lado, así que sigamos adelante y echemos un vistazo a cómo hacemos eso ahora. Nuestra sección de información nutricional aquí está un poco abarrotada en el texto en la segunda columna aquí parece Teoh, pero arriba a un lado de algunas de las otras palabras. Por lo que queremos agregar relleno justo al lado izquierdo. Entonces sigamos adelante y hagamos esto llamando al selector TD, que fue uno de los elementos HTML que usamos en nuestra tabla. Si miramos por aquí en el lado izquierdo ahora, vamos a escribir el relleno Dash, y luego quieres escribir la dirección en la que quieres que sea el relleno. Por lo que en este escenario queremos que se deje el relleno. Y ahora vamos a escribir 30 píxeles. Entonces si te das cuenta ahí después de que escribimos 30 píxeles, toda la segunda columna, Tex saltó hacia la derecha porque agregamos más relleno entre aquí. Ahora solo hay una cosa más que quiero mostrarte con la propiedad de relleno si
volvemos a subir a nuestro selector de tres años donde escribimos el relleno 10 p x y cinco p x. quiero mostrarte que también puedes especificar lados individuales dándole cuatro valores. Entonces si tuviéramos que escribir tres píxeles y 20 píxeles. Te darás cuenta aquí que ahora hemos escrito el valor superior, seguido del valor correcto, seguido de la parte inferior, seguido de la izquierda. Por lo que siempre empieza en la parte superior y luego va en el sentido de las agujas del reloj. Vamos a seguir adelante y deshacer eso y dejarlo en 10 píxeles y cinco píxeles. Por lo que hemos cubierto bastante de CSS hasta ahora. Entonces antes de seguir adelante, vamos a hacer un breve quiz y luego los veré en el siguiente video.
25. Margen: todos y bienvenidos a la lección margen. Ahora, si echamos un vistazo a nuestro cargo, Yen notará que el margen es como generamos espacio fuera o alrededor de los elementos. Entonces si notamos aquí, es el espacio que está fuera de la frontera ahora porque está fuera de la frontera y no afecta el contenido real. márgenes pueden incluir valores negativos, por lo que normalmente, usamos margen para agregar o quitar espacio entre nuestras secciones. Entonces, por ejemplo, vamos a tratar de agregar espacio entre nuestra galleta y la
sección de todos los ingredientes naturales para que no estén tan unidos. Entonces sigamos adelante y hagamos esto llamando a la imagen con nuestro selector de imágenes. Y luego tecleemos ahora la propiedad de margen, igual que cubrimos con márgenes de relleno podrían especificarse a Onley una dirección, o puedes alterar cada dirección a la vez. Entonces echemos un vistazo a lo que quiero decir. Si fuera a teclear margen y luego 20 píxeles notarán que ese espacio agregado en los cuatro lados. Ahora, si eliminamos ese margen indu, dash bottom 20 pixels notará que eso sólo agregó espacio al fondo de la cookie. Ahora, igual que el relleno. También podemos llamar a cada lado escribiéndolos en orden, empezando por la parte superior. Entonces sigamos adelante y escribamos nuestros valores. Queremos agregar 20 píxeles al fondo de la cookie. Entonces lo que podemos hacer es establecer cero para el valor superior cero para el valor correcto y luego 20 píxeles para el valor inferior. Y entonces necesitamos establecer cero para el valor de la izquierda. Entonces una vez más, si te das cuenta aquí, ahora
tenemos 20 píxeles debajo de nuestra cookie, lo
que le da un poco más de espacio. Ahora, un beneficio de escribir el margen de esta manera, en lugar de escribir el margen hacia fuera, específicamente el dedo en una dirección es que podemos volver atrás y cambiar nuestro margen más rápido si necesario hacerlo más adelante. Entonces, por ejemplo, si decido más adelante, necesito añadir un poco más de espacio entre la cookie y nuestro eslogan. Simplemente podría entrar aquí y cambiar eso sin tener que cambiar nuestra propiedad. Para que eso termine este video. La siguiente lección. Vamos a cubrir cómo cambiar el tamaño de la fuente para que podamos hacer que nuestro lema destaque un poco más . Los veo en la siguiente lección.
26. Tamaño de fuente: todos y bienvenidos a la lección de tamaño de fuente. Ahora bien, si recuerdas en nuestro video I D, creamos un I D, que es único. Toe nuestro eslogan. Entonces si miramos el lado izquierdo aquí veremos yo d eslogan igual. Ahora vamos a usar eso para llamar a nuestro i D. Así podemos cambiar el tamaño de nuestro eslogan y hacerlo un poco más grande. Por lo que menores de nuestros tres años. Etiqueta, usemos nuestro selector I D mediante el uso del símbolo hashtag y luego el eslogan. Y luego vamos a escribir la propiedad de tamaño de fuente. Ahora la propiedad font size es fund dash size. Ahora para rellenar el valor de la propiedad de tamaño de fuente, podemos usar porcentajes de píxeles, o podemos usar la palabra pequeño, mediano o grande. Entonces echemos un vistazo a lo que hacen esas palabras. Entonces si te das cuenta ahí cuando escribí pequeño, mediano y grande, cambiaron un poco. Pero no tenemos demasiado control sobre el tamaño, por
lo que en su mayor parte querrás usar píxeles porque puedes especificar el tamaño exacto
del tipo, así que sigamos adelante y escribimos 26 píxeles. Por lo que ahora notaremos aquí del lado derecho que nuestro eslogan es mucho más grande y más
fácil de leer. Entonces eso es todo lo que se necesita para cambiar el tamaño de fuente de cualquiera de nuestros diferentes elementos que tengan tipo. En el siguiente video. Te voy a mostrar cómo cambiar el peso de los teléfonos.
27. Peso de fuente: todo el mundo. Y bienvenidos a la lección de peso de fuente en este video. Vamos a cambiar el peso o grosor de nuestro fondo en nuestro eslogan y en nuestros títulos aquí
abajo. Entonces, para empezar, usemos nuestro selector de eslogan y tecleemos diversión Dash, Wait. Y ahora hay algunos valores diferentes que podemos usar para cambiar el peso. Entonces lo primero que podemos dio es debilitar. Escribe negrita y te darás cuenta aquí. Ahora es más audaz o debilitar tipo en Boulder, o podemos teclear más ligero. Y entonces también podemos escribir en normal Si queremos asegurarnos de que nuestra forma de fuente esté configurada normal. Ahora también podemos teclear los números 100 a 900 y 400 es igual a normal. Entonces echemos un vistazo solo poniendo un par de valores diferentes. Por lo que 600 hace un poco más grueso. Hacemos 300. Podemos notar que algunos de los pesos más livianos no cambian, y eso puede ser por lo combatido que tenemos en nuestro documento. Ahora, más adelante en otro video, les voy a mostrar cómo cambiar la fuente o tipo de letra. Pero por ahora, sigamos adelante y solo tecleemos en negrita y dejemos nuestro eslogan en eso. Ahora vamos a desplazarnos hacia abajo nuestra clase de título aquí y vamos a darle a eso un peso de fuente de 300. Entonces te das cuenta aquí después de que escribo que en el peso de la fuente se puso un poco más ligero y no era todo tan fuerte. Y eso es lo que queremos por ahora. Entonces sigamos adelante y pasemos al siguiente video, donde vamos a cubrir el texto, transformar la propiedad.
28. transform de texto: todos y bienvenidos al texto transformar video. Ahora la propiedad transformada de texto nos permite alterar el texto para que podamos tener
mayúsculas o minúsculas mayúsculas. Entonces echemos un vistazo a lo que quiero decir al usar nuestro H one selector y debajo del relleno aquí , vamos a escribir textos guión, transformarnos y luego vamos a escribir capitalizar. Entonces si te das cuenta aquí, parece que nada cambió. Bueno, eso es porque nuestro texto ya estaba mayúscula porque la forma en que lo habíamos escrito en nuestro HTML. Entonces sigamos adelante y escribamos mayúsculas, y ahora te darás cuenta en el lado derecho. Todo el impuesto se encuentra ahora en mayúscula o mayúscula. Ahora podemos cambiarnos la minúscula y notaremos que todo tiene una letra
minúscula . También podemos establecer esto en ninguno, y eso por defecto el texto a lo que escribiste el HTML. Entonces sigamos adelante y cambiemos esto de vuelta a mayúsculas porque queremos que realmente destaque el título de nuestra empresa. Ahora eso es todo por este video. En el siguiente video, vamos a cubrir cómo cambiar el color del texto
29. Color de texto: todos y bienvenidos al video en color y esta lección rápida vamos a cambiar el color del nombre de nuestra empresa. Entonces para hacer esto, necesitamos usar la propiedad de color. Entonces vamos a subir a nuestro H one selector aquí y después de la transformación del texto, vamos a escribir color. Y ahora, para agregar el valor al igual que la propiedad de color de fondo que cubrimos en un video anterior , necesitamos usar un color seguro Web para que podamos usar ya sea nombres de color, códigos
hex o colores RGB. Ahora solo queremos cambiar este dedo blanco para que podamos o bien salir bien el color o el nombre blanco, o podemos usar hashtag f f f s ff Así que ahora si miras el lado derecho aquí notarás que el color de nuestros techs tiene ahora cambió a un blanco. Entonces eso es todo por este video. Los veo en la siguiente lección.
30. Alinear el texto: todos. Y bienvenidos de nuevo en este video, vamos a cubrir el texto, alinear propiedad. El texto de la propiedad align nos permite alinear los textos ya sea a la izquierda, a la derecha, centrados o justificados. Ahora debo advertirles que sean cautelosos al usar texto justificado. El texto justificado se ve más comúnmente en los periódicos porque tienen columnas muy pequeñas, y por lo tanto crea espacio en el medio. Las palabras para hacer el lado izquierdo y derecho tienen bordes rectos. Entonces si miras un periódico como este ícono, notarás que sus columnas o canalones crearon entre las columnas del texto. Ahora la razón por la que debes tener cuidado al usarlo en un sitio web es que muchas veces los sitios web tienen párrafos más grandes y no columnas pequeñas como los periódicos. Ahora sigamos adelante y empecemos por centro, alineando nuestro eslogan y el nombre de nuestra empresa. Entonces después del color en nuestro H one selector, salgamos a la derecha el texto alinearnos con un guión en el medio y luego vamos apretados al centro. Entonces si te das cuenta ahí justo después de que terminé de escribir centro, el centro de nombres de la empresa se alineó. Por lo que queremos centrar también nuestra consigna. Entonces vamos a copiar esta línea y pegarla en nuestro selector de eslogan. Ahora sigamos adelante y desplázate hacia abajo en nuestro panel de la derecha y si notamos aquí o sección de información
nutricional está centrada, alineada y un poco difícil de leer. Entonces la izquierda una línea que necesitamos mirar a qué elemento html necesitamos llamar. Entonces si miramos nuestra mesa en el lado izquierdo notaremos que si llamamos a la etiqueta th todas esas etiquetas podemos cambiar para ser línea izquierda. Entonces bajo T d aquí, salgamos a la derecha th como su selector y luego texto,
guión, guión, alinear y luego a la izquierda. Entonces ahora si seguimos adelante y miramos eso, es mucho más fácil para mí seguir todas las diferentes palabras de esa columna. Eso es todo por el texto Alinear video Antes de seguir adelante. Hagamos un rápido quiz y luego discutiremos cómo cambiar la familia de fuentes
31. Familia de fuentes: todo el mundo. Bienvenido al video de la familia de fuentes. Ahora la propiedad de la familia luchada nos permite cambiar la peleada o tipografía mejor
Muestra la página web Ahora, porque este es un curso de principiante solo te
voy a mostrar cómo usar fuentes web seguras o fuentes que ya están instaladas en su computadora. Así que sigamos adelante y subamos al selector de cuerpo aquí y después de que nuestra
propiedad de color de fondo golpee retorno y luego teclearemos familia de guión fino, seguido de colon. Y luego podemos teclear cualquiera de sus Web digamos fuentes que ves en tu pantalla. Entonces sigamos adelante y tecleemos a Ariel. Y ahora te darás cuenta de que todas las fuentes de nuestra página web en el lado derecho han cambiado por el vuelo aéreo. Ahora, al escribir nuestra familia de fuentes, queremos establecer algunos fondos de reserva en caso de que la computadora de alguien no tenga el primer bote. Entonces tecleemos coma, luego tecleemos Helvetica y luego coma. Y luego, por último, queremos teclear Sands Dash Sarah, seguido de nuestro semi colon. Ahora, al poner a San Serif como el último luchado aquí, eso asegura que no importa qué fuentes tengan en su computadora. Escogerá una fuente San serif, por lo que no tenemos que preocuparnos de que nuestra página web se vea extremadamente diferente porque alguien tiene una computadora diferente Now. También podemos cambiar el cinco de un elemento específico agregando la propiedad de la familia de fuentes a solo ese selector. Pero por ahora, eso va a terminar este video. Los veré chicos y en la siguiente lección se cubrirá la propiedad de estilo de fuente.
32. Estilo de fuente: todo el mundo y bienvenidos al video de estilo de fuente. La propiedad de estilo de fuente nos permite cambiar el estilo del texto a cursiva u oblicua, o podemos volver a configurarlo a la normalidad. Entonces para esta lección, queremos cambiar nuestro eslogan a cursiva para que destaque un poco más. Entonces sigamos adelante. Y después del texto, alinear propiedad hit, devolver y escribir hacia fuera estilo de guión delantero y luego tallit. Entonces ahora si notamos en el lado derecho, nuestro eslogan es ahora una noche Alec y se ve un poco diferente al resto de nuestros textos. Ahora bien, si más adelante decidimos que no queremos que sea cursiva, podríamos volver a poner esto a la normalidad, o simplemente podríamos eliminar esto ya que propiedad superior. Pero queríamos ser un Talic, así que sigamos adelante y pongamos eso de nuevo. Ahora, antes de pasar al video final de la sección CSS, hagamos un breve quiz
33. Comentarios de CSS: todos y bienvenidos al video final de la sección CSS. Ahora bien, si recuerdas en la sección html recuperado cómo crear comentarios dentro de nuestro código HTML. Ahora, también
podemos dejar comentarios en nuestro código CSS, pero usan una sintaxis un poco diferente. Entonces para crear un comentario, comienzas con Ford Slash seguido de un truco de culo, y luego tienes que terminar el comentario con un truco de culo y permitirte slash. Ahora podemos teclear casi cualquier cosa entre cada Asterix. Entonces sigamos adelante y echemos un vistazo a lo que podemos hacer ahora. Por lo general, al escribir CSS, tu documento comenzará a hacerse más y más largo. Si estás trabajando en un sitio web o proyecto bastante grande, así que los comentarios son una gran manera de seccionarlo todo. Entonces, cuando miras tu código más adelante, es mucho más fácil encontrar lo que estás buscando. Entonces sigamos adelante y seleccionemos todo desde nuestro pie de página y cortemos eso y peguemos eso en el fondo aquí ahora, arriba de nuestro pie de página. Vamos a seguir adelante y crear un comentario con truco de asno de lujo y luego tecleemos detalles del
pie de página En todas las gorras seguidas de un truco de culo en otro Ford Slash. Entonces ahora si nos estamos desplazando por nuestro CSS, podemos encontrar rápidamente nuestros detalles de pie de página. Ahora, igual que el HTML, también
podemos usar los comentarios para ocultar o desactivar temporalmente nuestro abrigo. Entonces sigamos adelante y deshabilitemos el pie de página aquí y veamos qué pasa. Entonces ahora si vas a mirar, nuestro color de fondo del pie de página desapareció. Y si deshacemos eso y arreglamos nuestro comentario
, volverá a aparecer. Entonces sigamos adelante y también agreguemos un comentario aquí para el nombre de la empresa y sigamos adelante y lo
hagamos todo gorras, así que es un poco más fácil de encontrar más adelante. Y vamos a crear comentario de Wilmore para nuestro eslogan de la empresa. Entonces al igual que los comentarios HTML, notarás que los comentarios no aparecen en el lado derecho ahí solo para el código
CSS en sí y para que lo mires más adelante para hacerte la vida un poco más fácil. Te quiero agradecer por venir todo el camino hasta el final de este curso, pero te recomiendo que hagas la última sección, que es un proyecto final para practicar lo que has aprendido hasta ahora.
34. Proyecto final: Hola ahí. Bienvenido al proyecto final. Este proyecto está diseñado para ayudarte a practicar todos los elementos HTML y CSS que
cubrimos en este curso, vez que te damos libertad para crear algo original. Una vez que tengas ese enlace abierto, desplázate hacia abajo hasta que veas las directrices finales del proyecto y descargues el documento . Entonces, antes de pasar al video de conclusión, habrá un quiz que abarcará todos los diferentes temas de quiz del curso. Si tiene alguna pregunta, por favor comuníquese conmigo a través del formulario de contacto de mi página web.
35. Conclusión y próximos pasos: felicitaciones. Llegaste hasta el final de cómo codificar sitios web básicos para niños y principiantes. También me gustaría tomarme este tiempo para agradecerle una vez más por inscribirse en mi curso. Has recorrido un largo camino y has aprendido mucha información nueva. Ahora, recuerda, aprender a codificar es algo que lleva tiempo y práctica. El único modo de mejorar verdaderamente es practicar continuamente y seguir pasando más tiempo haciendo no sólo lo que acabas de aprender en este curso,
sino aprendiendo más. ¿ Debe tener alguna duda sobre html CSS o este curso? Por favor, póngase en contacto conmigo a través del formulario de contacto en mi página web. Te deseo toda la mejor de las suertes en tus futuros empeños de codificación.
Kevin Kennedy, Product Designer
