Aprenda HTML y CSS: Un manual completo de HTML y CSS
Un manual completo para aprender los fundamentos de HTML y CSS, los dos lenguajes fundamentales del desarrollo web. El propósito de este tutorial es enseñar los fundamentos de HTML y CSS que utilizará en el desarrollo web.
Saludos y bienvenido a este completo manual de HTML y CSS. Mi objetivo es enseñarte todo lo que necesitas saber sobre cómo crear sitios web rápidos y hermosos que se vean geniales en cualquier dispositivo.
Asumo que no tienes conocimiento de HTML o CSS y quieres aprender todo desde cero. Por lo tanto, este manual es apto para principiantes.
¡Ahora, saltemos y comencemos!
Tabla de contenido
- Lo que necesitarás
- Fundamentos del Desarrollo Web
- Lo que aprenderás
- Lenguajes y Herramientas de Desarrollo Web
- ¿Qué es HTML?
- ¿Qué es CSS?
- ¿Qué es JavaScript?
- Un ejemplo real
- Ruta de aprendizaje de desarrollo frontend
- Marcos de desarrollo front-end
- Aprenda un sistema de control de versiones
- Cómo funciona la web
- Cómo inspeccionar solicitudes y respuestas HTTP
- Conceptos básicos de HTML: cómo crear un documento HTML
- Conceptos básicos de CSS
- Cómo formatear su código
- Cómo inspeccionar páginas usando DevTools
- Cómo validar páginas web
- La sección principal
- ¿Qué es un conjunto de caracteres?
- Elementos para trabajar con texto
- encabezados
- Entidades HTML
- Cómo crear hipervínculos
- Cómo incrustar imágenes
- Conclusión
Lo que necesitarás
Ahora, echemos un vistazo a las herramientas que necesita seguir.
Para empezar, necesitará un editor de código. Hay muchos editores de código, como Visual Studio Code (VS Code), Sublime Text, Atom, etc.
Página de inicio del sitio web de Visual Studio Code
En este tutorial, usaré VS Code, junto con algunas extensiones para iniciar un servidor web y formatear nuestro código.
Puede usar su editor de código favorito si tiene uno, pero de lo contrario, diríjase a code.visualstudio.com y descargue la última versión de VS Code.
Página de inicio del sitio web de Visual Studio Code
Ahora, aquí dentro de VS Code, vamos a instalar un par de extensiones.
Editor de código de Visual Studio
Entonces, abramos el panel de extensiones y busquemos Prettier.
Búsqueda de extensiones para VS Code
Aquí está la extensión que vamos a instalar: el formateador de código Prettier.
La extensión más bonita que vamos a instalar
Con esta extensión, podemos formatear nuestro código y hacerlo consistente y bonito. Esta es una extensión muy popular y, como puede ver en la imagen, se ha descargado más de 30 millones de veces.
Entonces, puede ver el botón de instalación que he resaltado en rojo. Simplemente haga clic en él, y ya está.
A continuación, vamos a instalar otra extensión llamada Live Server. Con esto, podemos lanzar nuestro sitio web dentro de un servidor web de desarrollo.
Extensión de código Live Server VS
Nuevamente, esta es una extensión muy popular. Ha sido descargado más de 32 millones de veces.
Ahora, además de estos, vamos a utilizar un navegador para ver y probar nuestras páginas web. Nuevamente, puede usar su navegador favorito, pero en este manual voy a usar Google Chrome. Te animo a usar el mismo navegador, para que puedas seguir el curso fácilmente.
Fundamentos del Desarrollo Web
Vamos a comenzar nuestro viaje de desarrollo web aquí. En cada sección, aprenderá algo nuevo sobre el desarrollo web y, al final de este tutorial, lo reunirá todo para crear una hermosa página web.
lo que aprenderás
- Los lenguajes y herramientas del desarrollo web
- Conceptos clave (por ejemplo, qué es una URL, qué es HTTP, qué es el DOM, etc.)
- Cómo funcionan los sitios web. Entonces, comprenderá qué sucede exactamente debajo del capó cuando usa su navegador para visitar un sitio web.
- Cómo inspeccionar el tráfico de red usando DevTools. Esta es una herramienta muy poderosa que utilizan los desarrolladores frontend.
- Los fundamentos de HTML y CSS
- Cómo validar páginas web. Esto es algo que muchos desarrolladores pasan por alto.
Este va a ser un viaje increíble, ¡así que entremos y comencemos!
Lenguajes y Herramientas de Desarrollo Web
Este manual es su primer paso para convertirse en desarrollador web.
Ciclo de escaleras
Ahora, déjame darte una hoja de ruta simple para saber dónde estás y hacia dónde debes ir a continuación.
Los sitios web tienen dos partes: una interfaz y un backend.
Front-end VS Back-end
La interfaz es la parte que ves en tu navegador y con la que interactúas. Todos los aspectos visuales.
El backend es la parte que alimenta el frontend. Está detrás de escena, y se trata principalmente de almacenar datos en bases de datos y proporcionarlos a la interfaz.
Meme de frontend vs backend
Entonces, los trabajos de desarrollo web se dividen en tres categorías principales:
- Desarrollo Front-End
- Desarrollo de back-end
- Desarrollo de pila completa (que implica tanto desarrollo front-end como desarrollo back-end)
Los desarrolladores front-end utilizan HTML, CSS y JavaScript para crear front-end.
Los desarrolladores back-end tienen muchas herramientas diferentes a su disposición, lo cual está fuera del alcance de este tutorial. Puedes leer más sobre las diferencias aquí .
Entonces, ahora hablemos de HTML, CSS y JavaScript.
¿Qué es HTML?
HTML es la abreviatura de HyperText Markup Language. Sé que es un bocado, pero básicamente usamos HTML para definir la estructura o los componentes básicos de nuestras páginas web.
¿Qué es CSS?
CSS es la abreviatura de hojas de estilo en cascada. Lo usamos para diseñar páginas web y embellecerlas.
¿Qué es JavaScript?
JavaScript se utiliza para agregar funcionalidad a las páginas web. Dejame darte una analogía.
Piensa en un edificio.
Edificio en construcción
Un edificio en el mundo real es como una página web en Internet. Tiene un esqueleto o estructura: el marco y los cimientos del edificio (HTML).
También puede tener bonitas paredes, ventanas y mosaicos que lo rematan y lo hacen lucir agradable (CSS).
Azulejos de la casa
Y puede tener cierta funcionalidad, como ser una casa, un hospital o un supermercado (JavaScript).
Ascensores de una casa
Por ejemplo, cuando pulsamos el botón del ascensor, éste viene a recogernos. JavaScript habilitaría esto en nuestra analogía.
Un ejemplo real
Aquí hay un ejemplo real. Digamos que quieres construir un sitio web como Twitter. Para el perfil, desea tener un diseño como este:
Captura de pantalla del perfil de Twitter de Karlgusta Annoh
Primero, usamos HTML para definir los componentes básicos de este diseño. ¿Cuáles son estos bloques de construcción aquí?
- Una imagen.
- Algún texto que indique el identificador de Twitter del usuario (por ejemplo, @KarlgustaAnnoh).
- Otro bloque de texto que contiene el mensaje (Enseñando a programar a través de historias...).
- Botones/iconos para editar el perfil, la ubicación, el enlace y la fecha.
- Conteo de seguidores.
Usamos HTML para agregar estos componentes básicos a nuestra página web.
Luego, usamos CSS para darle atractivo visual. Por ejemplo, con CSS, podemos poner el texto en negrita (como el nombre), podemos hacer que nuestra imagen sea redonda. También podemos cambiar el color de los iconos de ubicación, enlace y fecha, y definir su aspecto cuando pasamos el cursor sobre ellos.
Entonces, CSS tiene que ver con los efectos visuales. Con CSS, también podemos crear hermosas animaciones.
Ahora, la mayoría de las páginas web en estos días son interactivas. Responden a nuestras acciones como clics y desplazamientos. Aquí es donde entra JavaScript. Con JavaScript, podemos agregar funcionalidad o comportamiento a nuestras páginas web. Por ejemplo, podemos hacer clic en un botón para seguir a una persona.
Entonces, JavaScript es un lenguaje de programación, mientras que HTML (lenguaje de marcado) y CSS (lenguaje de estilo) técnicamente no lo son. Esto significa que no podemos usarlos para decirle a las computadoras qué hacer. Los usamos para definir los componentes básicos de nuestras páginas web y darles estilo.
Cada página web que ha visto en Internet está construida con estos tres idiomas. Por lo tanto, cuanto mejor los aprenda y los comprenda y sus características, mejor será en el desarrollo frontend.
Ruta de aprendizaje de desarrollo frontend
Entonces, su viaje de desarrollo frontend comenzará con HTML y CSS. Diría que si pasa de 3 a 5 horas al día estudiando y codificando, debería tener una comprensión razonable de estos dos idiomas en un período de tiempo relativamente corto, tal vez uno o dos meses (pero, por supuesto, todos aprenden a un ritmo diferente , y eso está bien).
Una vez que aprenda estos idiomas, entonces necesita aprender JavaScript. Tengo un curso separado para aprender JavaScript. Entonces, después de terminar este tutorial, es posible que desee inscribirse en ese curso.
También puede consultar el plan de estudios de freeCodeCamp que enseña JavaScript (junto con HTML y CSS, entre otras tecnologías).
Diría que aprender JavaScript puede tomar algunos meses más de su tiempo. Por supuesto, no será un experto en JavaScript en tan poco tiempo, pero es posible que pueda obtener una comprensión razonable del mismo. También aprenderá más a medida que trabaje en diferentes proyectos.
Entonces, los primeros meses (o más) de aprender a codificar se trata de los fundamentos.
Marcos de desarrollo front-end
Ahora, la creación de sitios web generalmente implica un montón de tareas repetitivas. Aquí es donde entran los marcos y las bibliotecas front-end.
Un marco o una biblioteca viene con una gran cantidad de código que podemos reutilizar en nuestros sitios web. Por lo tanto, nos ayudan a hacer el trabajo más rápido. Es por eso que muchas empresas en estos días usan una de estas bibliotecas o marcos populares como React, Angular o Vue.
React es técnicamente una biblioteca, mientras que Vue y Angular son marcos. es una biblioteca Pero, dejando a un lado las distinciones sutiles , todas estas herramientas tienen el mismo propósito: nos ayudan a crear aplicaciones más rápido.
Ahora, no necesita aprender todo esto para comenzar. Diferentes empresas utilizan diferentes herramientas para diferentes proyectos.
Entonces, a medida que pasa de un proyecto a otro, es posible que desee aprender sobre las otras herramientas. Si está comenzando, solo concéntrese en React porque es la herramienta más popular en este espacio.
Gráfico que muestra todas las demás herramientas para aprender, es decir, HTML y CSS, JavaScript, React y Git
Una vez que aprenda React, siempre puede aprender las otras herramientas si es necesario.
Para aprender los conceptos básicos de React, probablemente necesitará un par de meses.
Nuevamente, tengo un curso integral sobre React si está interesado en eso.
Ahora, ¿cuál es el siguiente paso?
Aprenda un sistema de control de versiones
Utilizamos sistemas de control de versiones para realizar un seguimiento de nuestro historial de proyectos y trabajar en colaboración con otros.
Existen muchos sistemas de control de versiones, como:
- Git
- Subversión (SVN)
- Mercurial
etcétera. Pero Git es la herramienta más popular en este espacio y se utiliza en más del 70 % de las empresas de software. Descubrirá que Git aparece en casi todas las descripciones/requisitos de trabajo.
Entonces, estas son las habilidades esenciales que todo desarrollador frontend debe tener. Verá estos listados en casi todas las descripciones de trabajo.
Ahora, diferentes trabajos requieren otras habilidades, pero estas habilidades varían de una empresa a otra. Por lo tanto, puede aprender estas cosas adicionales en el futuro o en el trabajo.
Por ahora, solo concéntrate en estas cuatro habilidades.
Gráfico que muestra todas las herramientas para aprender, es decir, HTML y CSS, JavaScript, React, Git
Recuerda, menos es más.
No intentes aprender demasiadas cosas demasiado rápido. Realmente no retendrá mucho y terminará perdiendo el tiempo.
DE ACUERDO. Esa es su hoja de ruta. A continuación, vamos a hablar de cómo funciona la web.
Cómo funciona la web
¿Alguna vez te has preguntado cómo funciona la web? En esta sección, le diré exactamente lo que sucede en el momento en que ingresa la dirección de un sitio web en su navegador y presiona ENTER.
Como parte de esto, vamos a hablar sobre algunos conceptos y términos importantes que debe conocer como desarrollador web.
Entonces, digamos que iniciamos nuestro navegador y vamos a un sitio web como https://www.microsoft.com.
Ahora, esta dirección que tenemos en la barra de direcciones se llama URL, que es la abreviatura de Uniform Resource Locator. Básicamente, es una forma de localizar un recurso en Internet.
Los recursos pueden ser:
- Páginas web (documentos HTML)
- Imágenes
- Archivos de video
- fuentes
etcétera.
Google URL
Entonces, escribimos la URL y presionamos ENTER. ¿Que pasa ahora?
Bueno, hay dos piezas involucradas aquí:
Cliente y Servidor
- El Navegador (también llamado el Cliente)
- El Servidor (la computadora o computadoras que alojan nuestro sitio web de destino). Nos referimos a estos como Servidores Web o Servidores para abreviar.
Esto es lo que llamamos el modelo cliente-servidor. El cliente solicita un servicio, el servidor proporciona el servicio.
modelo cliente-servidor
Entonces, nuestro navegador envía un mensaje al servidor y dice: "¡Oye! Dame la página de inicio de este sitio web".
Hombre escribiendo en un navegador
Esto es algo similar a cómo le envías un mensaje de texto a tu amigo. Puede pensar en su teléfono como el cliente que envía el mensaje y el teléfono de su amigo como el servidor que recibe el mensaje.
Hombre y mujer escribiendo con el hombre que representa al cliente y el servidor que representa al servidor
Ahora a nuestro ejemplo. Este mensaje tiene un formato basado en un protocolo llamado HTTP (Protocolo de transferencia de hipertexto).
Probablemente lo hayas notado antes, pero nunca supiste qué era.
Apuntando a https en una URL de Google
En términos simples, HTTP es un protocolo que utilizan los clientes y los servidores para comunicarse entre sí. No es un lenguaje de programación. Es solo un lenguaje textual simple para comunicarse a través de Internet.
También tenemos HTTPS, que es HTTP + Cifrado. Entonces, los mensajes intercambiados entre el cliente y el servidor están encriptados en este caso.
Aquí hay un ejemplo simplificado de un mensaje HTTP:
GET /index.html HTTP/1.1
Host: www.microsoft.com
Accept-Language:en-us
Con este mensaje, el navegador le dice al servidor lo que está buscando.
Entonces, en la primera línea dice que quiere GETuna página o un archivo llamado index.htmlusando HTTP version 1.1. Index.htmla menudo representa la página de inicio de los sitios web.
En la segunda línea podemos ver el host, es decir www.microsoft.com.
En la tercera línea, podemos ver el idioma en-usque el cliente puede aceptar. En este caso, es inglés.
Ahora, no te preocupes por memorizar nada de esto. Todo lo que quiero que entienda aquí es que este mensaje está estructurado según el HTTPprotocolo que entienden los clientes y servidores.
Entonces, el servidor recibe este mensaje y se da cuenta de lo que está preguntando el cliente. Luego enviará un mensaje de vuelta al cliente.
Cliente y servidor comunicándose de ida y vuelta
El primer mensaje se denomina solicitud HTTP.
Cliente enviando una solicitud HTTP al servidor
El segundo mensaje se denomina respuesta HTTP.
Cliente enviando una solicitud al servidor y el servidor enviando la respuesta
Cada intercambio de datos que utiliza el protocolo HTTP implica dos mensajes: una solicitud y una respuesta.
Ahora, ¿qué hay en la respuesta? Aquí hay un ejemplo simplificado:
HTTP/1.1 200 OK
Date: 6th April 2023
Content-Type: text/html
<!DOCTYPE html>
<html>
...
</html>
En la primera línea vemos la versión del protocolo HTTP utilizado, seguido de un número (200), que es el código de estado. 200 significa exitoso o bien.
Justo debajo de eso, podemos ver la fecha y la hora de la respuesta.
A continuación, podemos ver el tipo de contenido que el servidor está devolviendo al cliente. en text/htmlesto
Después de eso, podemos ver el código HTML, o el Documento HTML, que representa la página de inicio de www.microsoft.com. Por supuesto, el código HTML real es mucho más largo.
Ahora, a medida que el navegador lee este documento HTML, construye lo que llamamos un DOM (Document Object Model) . No dejes que este nombre elegante te asuste. Este es el modelo que representa los objetos o elementos en nuestro documento HTML.
¿Cuáles son estos elementos? Todos los componentes básicos de nuestra página, como párrafos de texto, imágenes, enlaces y otras cosas. Los verá en acción en la siguiente sección.
Ahora, mientras el navegador lee este documento HTML devuelto por el servidor, descubre referencias a otros recursos en este documento como imágenes, fuentes y otras cosas.
Cada uno de estos recursos tiene una dirección o una URL. Entonces, para cada recurso, el navegador envía una solicitud HTTP separada al servidor para obtener ese recurso.
El navegador envía una solicitud HTTP al servidor para obtener ese recurso.
Muchas de estas solicitudes HTTP se envían en paralelo, por lo que podemos ver la página lo más rápido posible.
Una vez que el navegador tenga todos los recursos necesarios, renderizará el documento HTML.
Navegador renderizando el documento HTML
Representar un documento HTML significa mostrarlo. Es un término técnico elegante que usamos a menudo.
Entonces, en pocas palabras, nuestro navegador envía una solicitud HTTP al servidor y recibe una respuesta HTTP. Esta respuesta HTTP contiene un documento HTML.
El cliente envía una solicitud HTTP al servidor y recibe una respuesta HTTP que contiene un documento HTML
El navegador lee ese documento HTML para construir un DOM (Modelo de objeto de documento) y representar la página.
El navegador lee el documento HTML para construir un DOM
En la siguiente sección, le mostraré todos estos pasos en acción.
Cómo inspeccionar solicitudes y respuestas HTTP
Ahora, veamos las solicitudes y respuestas HTTP en acción.
Entonces, abre Chrome y dirígete a google.com.
Página de inicio de Google
Ahora, necesitamos acceder a Chrome DevTools. Esta es una herramienta muy poderosa que los desarrolladores frontend usan a menudo.
Haga clic derecho, luego seleccione Inspeccionar elemento.
Haga clic derecho en la página de inicio de Google para obtener la opción desplegable inspeccionar elemento
Ahora, aquí están las herramientas de desarrollo. La primera vez que lo vea, puede parecer un poco intimidante. Pero créame, estas herramientas son mucho más fáciles de usar de lo que piensa.
A lo largo de este manual, aprenderá más sobre DevTools.
Entonces, aquí tenemos algunas pestañas diferentes:
- Elementos
- Consola
- Fuentes
- Red
- Actuación
En esta demostración, vamos a ir a la Networkpestaña para que podamos inspeccionar el tráfico de red hacia y desde google.com.
Ahora, de forma predeterminada, Dev Tools está anclado en la parte inferior de la pantalla. Podemos acoplarlo a la izquierda, a la derecha o desacoplarlo como una ventana separada.
Entonces, aquí podemos acoplarlo al lado izquierdo de esta manera:
Acoplamiento de herramientas de desarrollo en el lado izquierdo
A muchos desarrolladores frontend les gusta este diseño.
DevTools acoplado a la izquierda
Por lo tanto, es posible que desee colocar DevTools en el lado izquierdo y tener el sitio web en el lado derecho.
En esta demostración, la acoplaré como una ventana separada, para que tengamos más espacio para trabajar.
Entonces, vamos a desacoplarlo:
Desacoplamiento de DevTools
Ahora, necesitamos actualizar nuestro sitio web.
DevTools mostrando la pestaña Elementos
Ahora, volvamos a DevTools.
DevTools mostrando la pestaña Red
Estas son las solicitudes HTTP que se envían desde nuestro navegador a google.com.
Como puede ver, hay un total de 45solicitudes. Aquí está la cantidad de datos transferidos a través de la red.
DevTools mostrando el total de solicitudes
Entonces, en este caso, poco más de 94kb.
Ahora, echemos un vistazo al primer elemento de esta lista.
Primer elemento en la lista de la red en DevTools
Esta es la primera solicitud HTTP que Chrome envió a google.com. Como puede ver, con esta solicitud, el navegador quería un GET, documenty el statusde esta solicitud es 200lo que significa, OK.
Aquí, podemos ver la cantidad de datos transferidos a través de la red para esta solicitud y el tiempo que tomó obtener la respuesta.
Cantidad de datos transferidos a través de la red para una solicitud que se muestra en DevTools
Si hacemos clic en esta solicitud, podemos ver más detalles al respecto.
Más detalles de la solicitud que muestra los encabezados
Entonces, aquí en la pestaña de encabezados, podemos ver todos los encabezados de nuestra solicitud y respuesta.
Todos los encabezados de nuestra solicitud.
Aquí hay algunos encabezados generales, como:
- URL de solicitud
- Método de solicitud que esGET
- Código de estado que es 200
- Dirección remota. Esta es la representación numérica degoogle.com
Los encabezados generales que se muestran como URL de solicitud, método de solicitud, código de estado y dirección remota
Abajo, podemos ver los encabezados de respuesta. Hay muchos encabezados aquí, pero generalmente no tiene que preocuparse por ellos. Como ejemplo, mire content-type. Hablamos de esto en el apartado anterior.
Encabezado de respuesta: tipo de contenido
El tipo de esta respuesta es text/html. Debajo de eso, tenemos la fecha y la hora de la respuesta.
Ahora, si hace clic en la pestaña Vista previa, puede ver una vista previa del documento HTML que se devuelve desde el servidor.
La pestaña de vista previa que muestra la página de inicio de Google
Esta es la página de inicio de Google.
La pestaña de vista previa que muestra la página de inicio de Google
Ahora, en este documento HTML tenemos referencias a otros recursos como imágenes, fuentes, etc.
Entonces, todas estas solicitudes posteriores se envían para descargar esos recursos.
Solicitudes en la pestaña de red
Justo debajo de la primera solicitud, tenemos una solicitud para descargar un archivo png o de imagen.
Una solicitud en la pestaña de red para descargar un png
Podemos filtrar fácilmente esta lista. Entonces, hagamos clic en el ícono de filtro aquí:
El icono de filtro en la pestaña de redes
De forma predeterminada, verá todas las solicitudes. Pero podemos filtrar por tipo de solicitud.
Por ejemplo, podemos seleccionar Docver solicitudes de descarga de documentos HTML. O fontspara ver las solicitudes que se enviaron para descargar las fuentes.
Barra de menú para filtrar por Img, Doc, Fuentes, etc. para ver las solicitudes que se enviaron para descargar las fuentes
A continuación, le mostraré cómo crear su primer documento HTML.
Conceptos básicos de HTML: cómo crear un documento HTML
En su escritorio, haga clic derecho y cree una nueva carpeta.
Nueva carpeta en el Escritorio
Voy a llamar a esto HTML, pero puedes llamarlo como quieras.
Cambió el nombre de la nueva carpeta a HTML
Ahora, volvamos a VS Code y abramos el panel Explorador. Luego, vamos a Abrir carpeta y abrimos la carpeta que acabas de crear.
Abriendo la carpeta HTML en VS Code
Ahora, esta carpeta está actualmente vacía, así que agreguemos un nuevo archivo aquí llamado index.html:
Agregar archivo index.html en la carpeta HTML en VS Code
Como te dije antes, index.htmlsuele representar la página de inicio de los sitios web. Entonces, vamos con eso.
Index.html en blanco en VS Code
Lo primero que debemos hacer aquí es decirle al navegador que se trata de un HTML5documento. Entonces, escribimos
<!DOCTYPE html>
Escribiendo DOCTYPE html en el archivo index.html
Con esta línea de código, le estás diciendo al navegador que se trata de un documento HTML5. Esta línea de código aquí se llama Declaración DocType. En las versiones anteriores de HTML, nuestra Declaración DocType era muy larga y complicada, pero HTML5 resolvió este problema.
Ahora, todo lo que necesitamos escribir es <!DOCTYPE html>.
Por cierto, HTML no distingue entre mayúsculas y minúsculas. Esto significa que no es sensible a las letras mayúsculas o minúsculas.
Pero convencionalmente hablando, escribimos todo en minúsculas, excepto <!DOCTYPE html>. Esto es solo una convención. Podríamos escribirlo como <!doctype html>y funcionará perfectamente bien, pero es una buena práctica escribir <!DOCTYPE html>.
Justo después de esto, necesitamos usar nuestros elementos HTML para definir la estructura de esta página web. El primer elemento que vamos a utilizar es el elemento html.
Entonces, escribimos htmly presionamos TAB o ENTER.
Se agregaron las etiquetas de apertura y cierre html.
<!DOCTYPE html>
<html></html>
Una vez más, VS Code generó este fragmento de código para nosotros.
Entonces, lo que tenemos en el lado izquierdo es la etiqueta de apertura, <html>y lo que tenemos en el lado derecho es la etiqueta de cierre </html>. Por lo tanto, la mayoría de los elementos HTML tienen una etiqueta de apertura y otra de cierre. Pero hay excepciones, como te mostraré más adelante en este tutorial.
Ahora, dentro de este elemento, vamos a agregar elementos adicionales. Como no quiero escribir todo en una sola línea, voy a presionar ENTER.
<!DOCTYPE html>
<html>
</html>
Se agregó una nueva línea entre las etiquetas html.
Ahora aquí, vamos a agregar dos elementos: HEAD y BODY.
Entonces, una vez más escribimos <head>y presionamos TAB:
<!DOCTYPE html>
<html>
<head></head>
</html>
Se agregaron las etiquetas de cabeza.
Y luego CUERPO:
<!DOCTYPE html>
<html>
<head></head>
<body>
</body>
</html>
Se agregaron las etiquetas del cuerpo.
Usamos el elemento HEAD para dar al navegador información sobre esta página. Por ejemplo, aquí podemos usar el titleelemento para especificar el título de esta página que aparece en el navegador.
Elemento de título que especifica el título de una página en el navegador
Ahora, escribamos My First Web Page.
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
</body>
</html>
Se agregó el título Mi primera página web
Guarde los cambios presionando CTRL + Sen Windows o Command + Sen Mac.
Antes de continuar, hagamos clic derecho en algún lugar y vayamos a open with live server.
Haciendo clic derecho y seleccionando Abrir con Live Server en VS Code
Entonces, vamos a abrir esta página usando el Servidor de desarrollo que acabamos de instalar.
La página en blanco en un navegador con el título Mi primera página web
Echar un vistazo. Nuestra página está actualmente vacía porque no hemos agregado ningún elemento dentro de esta página.
Aquí, podemos ver el título que acabamos de escribir My First Web Page:
Título de mi primera página web en el navegador
Ahora mira la URL o dirección de esta página:
La URL local de la página.
tenemos 127.0.0.1_ Este número o esta dirección IP representa la computadora local. Es mundialmente conocido. Entonces, todos saben 127.0.0.1que hace referencia a la computadora actual.
Después de eso, tenemos dos puntos :y luego tenemos 5500. Este es el número de puerto en el que está escuchando nuestro servidor web.
Entonces, nuestro servidor web está esperando solicitudes HTTP en este puerto.
La URL local 127.0.0.1:5500/index.html que muestra el puerto 5500
Luego tenemos una barra inclinada /, seguida del nombre de nuestro archivo, index.html.
Ahora, volvamos a VS Code.
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
</body>
</html>
El archivo index.html con una etiqueta de cuerpo vacía y el título Mi primera página web
Dentro del bodyelemento, vamos a agregar elementos que aparecerán en nuestra página. Entonces, digamos que quieres mostrar un tweet. ¿Qué elementos necesitas aquí? Una imagen y algunos elementos de texto.
Entonces, escribimos img(abreviatura de imagen) y luego presionamos TAB.
Aquí está nuestro elemento de imagen:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<img src="" alt="">
</body>
</html>
La etiqueta del cuerpo con la etiqueta de la imagen dentro
Ahora, este elemento de imagen es diferente de los otros elementos que hemos creado hasta ahora. ¿Puedes decir las diferencias?
<img src="" alt="">
Hay dos diferencias aquí. La primera diferencia es que no tenemos una etiqueta de cierre. Solo tenemos una etiqueta de apertura, porque el elemento de imagen no puede tener elementos secundarios.
Ahora, en las versiones anteriores de HTML, solíamos agregar una barra diagonal.
<img src="" alt="" />
Esto representaba una etiqueta de cierre automático. Pero, no tenemos que hacer esto en HTML5, así que voy a simplificar el código.
<img src="" alt="">
Ahora, aquí tenemos dos atributos, fuente srcy texto alternativo alt. Con estos atributos, podemos proporcionar información adicional sobre un elemento. Entonces, usamos el srcelemento fuente para especificar la ruta a nuestra imagen.
Abramos el panel del explorador una vez más presionando command + Ben Mac o Control + Ben Windows.
El panel explorador de VS Code
Aquí, voy a crear una nueva carpeta llamada images.
Creación de una carpeta de imágenes en el panel Explorador
Para esta demostración, usaré mi propia imagen, que descargué de www.unsplash.com. Pero puedes usar cualquier imagen que quieras.
Ahora, aquí está mi imagen. Voy a arrastrarlo y soltarlo en la carpeta de imágenes.
Mi imagen de Unsplash que se arrastra y suelta en la carpeta de imágenes
En el srcindex.html, vamos a escribirimage/unsplash-image.jpg
<img src="image/unsplash-image.jpg" alt="">
altes la abreviatura de texto alternativo. Usamos este atributo para darle al navegador algo de texto para mostrar en caso de que la imagen no se pueda mostrar. Hablaremos de esto con más detalle más adelante.
Entonces, por ahora, voy a eliminar este atributo.
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<img src="Images/altumcode.jpg">
</body>
</html>
La etiqueta de la imagen con el atributo alt eliminado
Ahora, después de la imagen, vamos a agregar algunos elementos de texto. Escribimos p, que es la abreviatura de párrafo, y aquí puede escribir mi identificador de Twitter (X).
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<img src="Images/altumcode.jpg">
<p>@KarlgustaAnnoh</p>
</body>
</html>
Etiqueta de párrafo con mi identificador de Twitter
Después de eso, vamos a agregar otro elemento de texto. Aquí, podemos escribir el cuerpo de nuestro tweet.
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<img src="Images/altumcode.jpg">
<p>@KarlgustaAnnoh</p>
<p>I love to teach you HTML!</p>
</body>
</html>
Etiqueta de párrafo que contiene el cuerpo de mi Tweet
¡Perfecto! Guarde los cambios.
De vuelta en el navegador, nuestra página se actualizó automáticamente.
Una foto de la imagen de mi computadora en el navegador
Esta es una de las bellezas de la extensión del servidor en vivo. No tenemos que actualizar manualmente la página cada vez que hacemos cambios.
Ahora, mira lo que tenemos aquí. Tenemos mi imagen, y justo debajo tenemos dos elementos de texto. Echar un vistazo. Desafortunadamente, no son muy visibles.
Mi imagen y mis elementos de texto en el navegador
Esto no parece un Tweet porque aún no hemos aplicado CSS. Como te dije antes, usamos HTML para definir la estructura o los componentes básicos de nuestras páginas web.
En la siguiente sección, le mostraré cómo aplicar CSS para que nuestra página se vea como un tweet real.
Conceptos básicos de CSS
Ahora, veamos cómo podemos usar CSS para mejorar la apariencia de esta página.
Mira nuestro elemento de cabeza:
<head>
<title>My First Web Page</title>
</head>
Mi etiqueta principal que tiene solo el título Mi primera página web
Actualmente, tenemos un solo elemento dentro del elemento de cabeza. Ese es nuestro elemento de título.
Ahora, después del título, vamos a agregar otro elemento llamado estilo. Aquí es donde vamos a escribir nuestro código CSS.
Entonces, entre las etiquetas de estilo, vamos a escribir un montón de reglas CSS.
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<img src="Images/altumcode.jpg">
<p>@KarlgustaAnnoh</p>
<p>I love to teach you HTML!</p>
</body>
</html>
Nuestra etiqueta de imagen con nuestra fuente de imagen en VS Code
Primero, vamos a trabajar en esta imagen. Nuestra imagen es demasiado grande actualmente.
Nuestra imagen en el navegador que es demasiado grande
Entonces, hagámoslo un poco más pequeño.
Volver a Código VS. Dentro de las etiquetas de estilo, vamos a escribir lo siguiente:
<style>
img {
}
</style>
imghace referencia a nuestro elemento de imagen. Luego escribimos un par de llaves {}y dentro de ellas escribimos una o más declaraciones CSS. Cada declaración contiene una propiedad y un valor.
Aquí podemos establecer la propiedad de ancho en, digamos, 100px.
<style>
img {
width: 100px;
}
</style>
Entonces, escribimos la propiedad, agregamos un punto y coma y luego el valor. Luego, terminamos esta línea con un punto y coma para que podamos escribir varias declaraciones CSS.
width: 100px;
Así es como se ve en VS Code:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
<style>
img {
width: 100px;
}
</style>
</head>
<body>
<img src="Images/altumcode.jpg">
<p>@KarlgustaAnnoh</p>
<p>I love to teach you HTML!</p>
</body>
<html>
Nuestra etiqueta de estilo con el estilo de la imagen.
Ahora, guardemos los cambios.
De vuelta en el navegador, nuestra imagen se ve más pequeña. Es mucho mejor.
Nuestra imagen en el navegador que se ve más pequeña
Pero mira los bordes. Los bordes son tan afilados. Me gustaría hacerlos un poco redondos para que parezcan más suaves.
Volviendo a nuestra regla: aquí vamos a establecer el radio del borde en 10 px.
<style>
img {
width: 100px;
border-radius: 10px;
}
</style>
No se preocupe por memorizar ninguna de estas propiedades. Vamos a repasarlos varias veces a lo largo del tutorial. En esta sección, solo quiero que tengas una idea de cómo es usar CSS.
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
<style>
img {
width: 100px;
border-radius: 10px;
}
</style>
</head>
<body>
<img src="Images/altumcode.jpg">
<p>@KarlgustaAnnoh</p>
<p>I love to teach you HTML!</p>
</body>
</html>
El radio de borde de 10px agregado a nuestro estilo en VS Code
Ahora guarda los cambios.
Mire: los bordes son redondos y se ven más suaves. Ahora, déjame mostrarte un truco.
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
<style>
img {
width: 100px;
border-radius: 50px;
}
</style>
</head>
<body>
<img src="Images/altumcode.jpg">
<p>@KarlgustaAnnoh</p>
<p>I love to teach you HTML!</p>
</body>
</html>
Se agregó el radio de borde de 50 px a nuestro estilo.
Si es con border-radius, al sumar un valor que sea la mitad del ancho, obtendremos una imagen redonda. Entonces, voy a establecer el radio del borde en 50 px, que es la mitad de nuestro ancho.
<style>
img {
width: 100px;
border-radius: 50px;
}
</style>
Así es como se ve en VS Code:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
<style>
img {
width: 100px;
border-radius: 50px;
}
</style>
</head>
<body>
<img src="Images/altumcode.jpg">
<p>@KarlgustaAnnoh</p>
<p>I love to teach you HTML!</p>
</body>
</html>
El estilo de imagen en VS Code
Y aqui esta el resultado:
La imagen después de haber sido diseñada en el navegador
Eso es mucho mejor.
Ahora nuestros elementos están apilados verticalmente. Pero quiero que la imagen se empuje hacia el lado izquierdo.
Entonces, establezcamos la propiedad flotante en left.
<style>
img {
width: 100px;
border-radius: 50px;
float: left;
}
</style>
Esto empujará el elemento de imagen al lado izquierdo de nuestros elementos de texto. Echar un vistazo:
La imagen cuando flota a la izquierda en el navegador
Eso es mucho mejor, pero nuestra imagen está muy cerca del texto. Quiero agregar algo de espacio después de la imagen. Aquí usaremos otra propiedad llamada margin-right. Podemos configurarlo en 10px.
<style>
img {
width: 100px;
border-radius: 50px;
float: left;
margin-right: 10px;
}
</style>
Así es como se ve en VS Code:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
<style>
img {
width: 100px;
border-radius: 50px;
float: left;
margin-right: 10px;
}
</style>
</head>
<body>
<img src="Images/altumcode.jpg">
<p>@KarlgustaAnnoh</p>
<p>I love to teach you HTML!</p>
</body>
</html>
El código en VS Code con el estilo.
Guarde los cambios.
La imagen en el navegador con el estilo aplicado
Eso es mucho mejor. Ahora, pongamos el nombre de usuario en negrita. Vamos a repetir este proceso una vez más.
Esta vez, vamos a aplicar una regla a nuestro elemento de párrafo. Establezca la font-weightpropiedad en negrita.
<style>
img {
width: 100px;
border-radius: 50px;
float: left;
margin-right: 10px;
}
p {
font-weight: bold;
}
</style>
Aquí está el código en VS Code:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
<style>
img {
width: 100px;
border-radius: 50px;
float:left;
margin-right: 10px;
}
p {
font-weight: bold;
}
</style>
</head>
<body>
<img src="Images/altumcode.jpg">
<p>@KarlgustaAnnoh</p>
<p>I love to teach you HTML!</p>
</body>
<html>
El código en VS Code con el estilo de párrafo en negrita
Echar un vistazo.
El navegador que muestra el estilo aplicado con el texto en negrita
¿Ves lo que pasó? Nuestros dos elementos de texto están en negrita. Pero, ¿qué sucede si desea aplicar este estilo solo al nombre de usuario?
Bueno, tenemos que separar estos dos elementos de párrafo.
<body>
<p>@KarlgustaAnnoh</p>
<p>I love to teach you HTML!</p>
</body>
Entonces, le voy a dar al primer elemento un atributo llamado classasí:
<body>
<p class="">@KarlgustaAnnoh</p>
<p>I love to teach you HTML!</p>
</body>
Clase es la abreviatura de clasificación, y podemos usar este atributo para colocar este elemento dentro de una clase diferente o una categoría diferente. Al igual que los productos en un supermercado.
En un supermercado tenemos productos de diferentes categorías, ¿no?
Entonces, voy a poner este elemento de párrafo dentro de una clase o dentro de una categoría llamada username:
<body>
<p class="username">@KarlgustaAnnoh</p>
<p>I love to teach you HTML!</p>
</body>
Y luego voy a cambiar esta regla:
<style>
p {
font-weight: bold;
}
</style>
que actualmente se aplica a todos los elementos de párrafo, pero quiero que se aplique solo a los elementos de párrafo con una usernameclase.
Entonces, justo después pde escribir p.username:
p.username {
font-weight: bold;
}
Ahora, también podemos eliminar py esta regla se aplicará a todos los elementos que tengan la usernameclase, ya sean elementos de párrafo u otro tipo de elementos.
.username {
font-weight: bold;
}
Ahora, guarda los cambios.
Así es como se ve en VS Code:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
<style>
img{
width: 100px;
border-radius: 50px;
float: left;
margin-right: 10px;
}
.username{
font-weight: bold;
}
</style>
</head>
<body>
<img src="Images/altumcode.jpg">
<p class="username">@KarlgustaAnnoh</p>
<p>I love to teach you HTML!</p>
</body>
</html>
El estilo de nombre de usuario en negrita en VS Code
Ahora, echa un vistazo.
El nombre de usuario en negrita en el navegador
Eso es mucho mejor.
Esto es CSS en acción. Como puede ver, CSS tiene una sintaxis diferente a HTML.
A lo largo del resto del tutorial, aprenderá estos idiomas en detalle.
A continuación, le mostraré cómo formatear su código usando Prettier.
Cómo formatear su código
Una cosa que debe saber sobre los navegadores es que ignoran los espacios en blanco en el código HTML y CSS.
Por ejemplo, puedo poner todos estos elementos en una sola línea y todo sigue funcionando.
Deja que te enseñe.
<!DOCTYPE html><html><head><title>My First Web Page</title><style>img{width: 100px;border-radius: 50px;float: left;margin-right: 10px;}.username{font-weight: bold;}</style></head><body><img src="Images/altumcode.jpg"><p class="username">@KarlgustaAnnoh</p><p>I love to teach you HTML!</p></body></html>
Todos los elementos en una línea en VS Code
Ahora, guarda los cambios.
De vuelta en el navegador, tenemos los mismos resultados que antes:
El navegador muestra los mismos resultados.
Porque a los navegadores no les importa cómo formateamos nuestro código. Pero el formateo es muy importante cuando se trata de leer y mantener el código. Queremos que nuestro código sea hermoso y tenga un formato perfecto como un artículo.
Aquí es donde podemos usar el complemento Prettier para ayudarnos.
Con Prettier, podemos formatear nuestro código de manera consistente. Esto es muy importante cuando eres parte de un equipo, porque diferentes personas tienen diferentes formas de formatear su código. Pero si todos en el equipo usan el complemento Prettier, el código tendrá un formato consistente.
Entonces, déjame mostrarte cómo usar Prettier.
En la parte superior, vaya al menú Ver y haga clic en el acceso directo de la paleta de comandos. En una Mac, es Shift + Command + PEn Windows, es Shift + Control + P.
Shift + Control + P para abrir la paleta de comandos en VS Code
Abramos la paleta de comandos. Allí buscamos format document. Presione ENTRAR.
En la paleta de comandos, buscamos documento de formato.
DE ACUERDO. Ahora, Prettier ha formateado mi código, por lo que ninguno de esos elementos está en la misma línea.
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
<style>
img {
width: 100px;
border-radius: 50px;
float: left;
margin-right: 10px;
}
.username {
font-weight: bold;
}
</style>
</head>
<body>
<img src="Images/altumcode.jpg"/>
<p class="username">@KarlgustaAnnoh</p>
<p>I love to teach you HTML!</p>
</body>
</html>
Prettier ha formateado el código en VS Code
Esto es mucho mejor. Pero, ¡déjame mostrarte un truco!
No queremos formatear nuestro código cada vez que hacemos un cambio. Entonces, podemos configurar VS Code para formatear automáticamente el código en el momento en que guardamos los cambios.
Entonces, en la parte superior, vayamos al menú de código, luego a Preferencias, luego a Configuración.
Configuración de código VS
Aquí, busca format on save.
En la página de configuración, buscamos formato al guardar
Aquí está la configuración:
El formato en Guardar configuración
Habilitemos esta configuración.
Habilitación de la configuración Formatear al guardar
Ahora, cada vez que guardamos los cambios, VS Code automáticamente formatea nuestro código, usando Prettier.
Cómo inspeccionar páginas usando DevTools
Anteriormente, hablamos sobre el DOM (Document Object Model).
El modelo de objeto de documento
Le dije que cuando el navegador lee el documento HTML que se devuelve desde el servidor, construye un modelo de objeto de documento. Ahora, déjame mostrarte este modelo de objeto de documento en acción.
La página index.html abierta en el navegador
Una vez más, vamos a utilizar Chrome DevTools.
Así que abramos DevTools.
Hacer clic derecho en la página y luego hacer clic en inspeccionar elementos en Chrome
En esta sección, vamos a mirar la elementspestaña.
Lo que tenemos aquí en el lado izquierdo es nuestro modelo de objeto de documento.
En el lado izquierdo de la pestaña de elementos, tenemos el modelo de objeto del documento
Estos son los mismos elementos que creamos anteriormente en el tutorial.
Tenemos el elemento HTML, el HEAD, el BODY, etc. Pero, tenemos algunos elementos adicionales que son inyectados por Live Server:
Elementos adicionales inyectados por Live Server en la pestaña de elementos
No te preocupes por estos. Estos son utilizados exclusivamente por Live Server, por lo que recarga automáticamente nuestra página.
Ahora, podemos pasar el cursor sobre cualquiera de estos elementos y puede ver los elementos resaltados en la pantalla.
Pasó el cursor y hizo clic en el elemento de imágenes en la pestaña de elementos
Podemos hacer clic en un elemento, y en el lado derecho, podemos ver los estilos aplicados a este elemento.
En el lado derecho, los estilos aplicados al elemento.
Entonces, obtenemos estos estilos que están definidos para el elemento de imagen. ANCHO, BORDE-RADIO, etc.
Podemos habilitar o deshabilitar estos estilos.
Los estilos definidos para el elemento de imagen.
Por ejemplo, podemos deshabilitar la propiedad WIDTH y ahora nuestra imagen es grande.
Deshabilitar la propiedad de ancho en la pestaña de estilos
Entonces podemos traerlo de vuelta.
Habilitar el elemento de ancho hacia atrás
También podemos cambiar su valor. Entonces podemos establecerlo en, digamos, 50px. Ahora, nuestra imagen es más pequeña.
Cambiar el tamaño de la imagen a 50px en Chrome DevTools
Muchos desarrolladores front-end juegan con estos estilos para obtener el aspecto específico que desean. Una vez que descubren los estilos exactos y sus valores, los aplican al código.
Ahora, una cosa más.
A la derecha podemos ver dónde se han aplicado los estilos y el número de línea
Aquí, podemos ver dónde se han aplicado estos estilos.
Entonces, en index.html en la línea 6, podemos hacer clic en este enlace que nos lleva a la línea exacta de código donde escribimos ese estilo.
Cuando hacemos clic en él, index.html, nos lleva a la línea exacta de código donde escribimos ese estilo en DevTools.
Ahora, estamos actualmente en la Sourcespestaña.
En la pestaña Fuentes
Podemos volver a Elementsla pestaña e inspeccionar otros elementos también.
La pestaña Elementos para inspeccionar otros elementos
Entonces, estos son los conceptos básicos de la inspección de elementos usando DevTools. Vamos a hablar de esto con más detalle en el futuro.
Cómo validar páginas web
Lo último que vamos a cubrir en esta sección es la validación.
Entonces, a medida que escribimos código, podemos encontrarnos con problemas. Si tenemos un error tipográfico en nuestro código o no usamos la sintaxis o la gramática correctas, es posible que nuestras páginas web no se vean como se esperaba.
En estas situaciones, podemos usar un validador para identificar los posibles errores en nuestro código.
Actualmente, no tenemos problemas en esta página web.
La página index.html en Chrome
Me parece perfectamente bien, pero ejecútelo con el validador HTML estándar.
Entonces, vamos a validator.w3.org.
validador.w3.org
Este es un servicio de validación de marcado estándar.
validador.w3.org
Tenemos tres métodos para validar nuestro marcado HTML.
Podemos validar por una dirección si nuestro sitio web está activo en Internet, pero esto no funciona para nosotros porque nuestro sitio web actualmente está alojado localmente en nuestro servidor de desarrollo.
Ficha Validar por dirección
Entonces, esta dirección IP que tenemos aquí 127.0.0.1es una dirección IP local. Esto significa que nadie más puede acceder a nuestro sitio web.
La dirección IP 127.0.0.1 de nuestra página index.html resaltada
Tenemos otros dos métodos. Podemos Validate by File Uploado by Direct Input.
Los otros dos métodos, validar por Carga de archivo y por Entrada directa resaltados
En este caso, voy a ir con Carga de archivo.
Seleccionar la opción de la pestaña Validar por carga de archivo
Entonces, subamos nuestro index.htmlarchivo y COMPRUEBEMOS.
Subiendo nuestro archivo index.html y comprobándolo
Mira, tenemos 1 advertencia y 2 errores.
Los resultados muestran 1 advertencia y 2 errores
La advertencia está diciendo We haven't added a lang attribute to the html start tag.
Esta es la mejor práctica común. Nos permite decirle a los motores de búsqueda cuál es el idioma de esta página web para que puedan hacer un mejor trabajo al mostrar los resultados.
Esto es muy fácil de arreglar.
Entonces, aquí está nuestra etiqueta HTML en VS Code:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
<style>
img {
width: 100px;
border-radius: 50px;
float: left;
margin-right:10px;
}
.username {
font-weight: bold;
}
</style>
</head>
<body>
<img src="Images/altumcode.jpg"/>
<p class="username">@KarlgustaAnnoh</p>
<p>I love to teach you HTML!</p>
</body>
</html>
Nuestra etiqueta de inicio html sin un atributo lang
Vamos a agregar el langatributo y configurarlo para enque sea la abreviatura de inglés.
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First Web Page</title>
<style>
img {
width: 100px;
border-radius: 50px;
float: left;
margin-right: 10px;
}
.username {
font-weight: bold;
}
</style>
</head>
<body>
<img src="Images/altumcode.jpg" />
<p class="username">@KarlgustaAnnoh</p>
<p>I love to teach you HTML!</p>
</body>
</html>
Nuestra etiqueta de inicio html con el atributo lang="en"
¿Que sigue? Tenemos un error que dice The character encoding was not declared.
Error en el validador que muestra que la codificación de caracteres no fue declarada
No te preocupes por esto. Hablaremos de ello en el siguiente apartado.
Entonces, veamos el segundo error.
El segundo error que dice que un elemento de imagen debe tener un atributo alt
Está diciendo eso An image element must have an alt attribute.
Anteriormente, teníamos este altatributo. Te dije que usamos un atributo alt para proporcionar una descripción de nuestra imagen.
Por lo tanto, si no se puede mostrar la imagen, se mostrará el texto alternativo en su lugar.
Nuevamente, hablaremos sobre el altatributo con más detalle en el futuro.
Ahora, volvamos a nuestro código y solucionemos este error.
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First Web Page</title>
<style>
img {
width: 100px;
border-radius: 50px;
float: left;
margin-right: 10px;
}
.username{
font-weight: bold;
}
</style>
</head>
<body>
<img src="Images/altumcode.jpg" />
<p class="username">@KarlgustaAnnoh</p>
<p>I love to teach you HTML!</p>
</body>
</html>
Nuestro elemento de imagen sin el atributo alt
Aquí está nuestra etiqueta de imagen. Agreguemos el altatributo. Para la descripción, voy a decir A laptop image.
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First Web Page</title>
<style>
img {
width: 100px;
border-radius: 50px;
float: left;
margin-right: 10px;
}
.username {
font-weight: bold;
}
</style>
</head>
<body>
<img src="Images/altumcode.jpg" alt="A Laptop Image" />
<p class="username">@KarlgustaAnnoh</p>
<p>I love to teach you HTML!</p>
</body>
</html>
El atributo alt en nuestro elemento de imagen que dice una imagen de computadora portátil
Ahora, guarda los cambios.
Volvamos a subir el archivo.
Volver a cargar el archivo index.html en el validador
y validarlo una vez más.
No se declaró un error que muestra la codificación de caracteres
Esta vez, solo tenemos un único error y un mensaje que no es realmente un problema. Eso tiene que ver con la codificación de caracteres, de la que hablaremos en la siguiente sección. Entonces, todo esto se trata de la validación de HTML.
Ahora, para CSS, tenemos un validador diferente. Entonces, vamos a jigsaw.w3.org/css-validator.
El validador de CSS
No tienes que memorizar esto. Solo ve a Google y busca css validator:
Buscando en Google CSS Validator
Aquí está el primer enlace:
El primer enlace del resultado de Google
Entonces, tenemos la misma interfaz.
Servicio de validación de CSS que tiene la misma interfaz que el validador anterior
Podemos validar nuestro código CSS usando una dirección, cargando un archivo o ingresando directamente.
Ahora, en este caso, hemos incrustado todo nuestro código CSS dentro de nuestro marcado HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First Web Page</title>
<style>
img {
width: 100px;
border-radius: 50px;
float: left;
margin-right: 10px;
}
.username {
font-weight: bold;
}
</style>
</head>
<body>
<img src="Images/altumcode.jpg" alt="A laptop image" />
<p class="username">@KarlgustaAnnoh</p>
<p>I love to teach you HTML!</p>
</body>
</html>
Nuestro CSS dentro de HTML
A medida que nuestras páginas web se vuelven más complejas, queremos separar nuestro código CSS en archivos separados para que nuestro código esté mejor organizado. Hablaremos de esto con más detalle en el futuro.
Por ahora, voy a copiar todo nuestro código CSS y luego iré a la tercera pestaña:
<style>
img {
width: 100px;
border-radius: 50px;
float: left;
margin-right: 10px;
}
.username {
font-weight: bold;
}
</style>
Copiando el CSS dentro del HTML
Pégalo aquí y validarlo.
Pegarlo en el validador de CSS usando la entrada directa
No tenemos ningún error. Todo es perfecto.
No hay errores después de verificar usando el validador CSS
Esto es todo acerca de la validación. La validación es muy importante. Si sus páginas web no se muestran como se esperaba, siempre comience con una validación rápida, ya que esto a menudo puede orientarlo en la dirección correcta.
Ahora, eso nos lleva al final de esta sección. En la siguiente sección, vamos a explorar HTML con más detalle.
La sección principal
Anteriormente en el curso, le dije que usamos la sección de encabezado para brindar a los navegadores y motores de búsqueda información sobre una página web. Entonces, vamos a explorarlo con un poco más de detalle.
Voy a empezar con un documento en blanco:
Index.html vacío en VS Code
Ahora, déjame mostrarte un truco genial. Si escribimos un signo de exclamación y luego presionamos el tabulador, obtenemos el modelo HTML básico, lo que significa una plantilla HTML básica.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
El código HTML básico en VS Code
En la parte superior tenemos nuestra declaración DocType. Debajo tenemos nuestro elemento HTML con el atributo lang (que es una buena práctica común). A continuación, tenemos nuestra sección principal con un montón de elementos de los que hablaremos en un segundo. Esto es seguido por la sección del cuerpo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Esta es una plantilla HTML muy básica.
Ahora, ¿qué tenemos en la sección de cabecera? Bueno, tenemos un par de metaelementos para brindar información sobre esta página web.
El primer metaelemento, <meta charset="UTF-8>", es para definir el conjunto de caracteres.
¿Qué es un conjunto de caracteres?
Las computadoras no entienden caracteres como A, B, C, etc. Solo entienden los números que se representan en formato binario: 0 y 1.
Entonces, usando un conjunto de caracteres, podemos asignar un carácter a un valor numérico.
Carácter asignado a un valor numérico
El primer conjunto de caracteres que se diseñó fue el conjunto ASCII, que es la abreviatura de American Standard Code for Information Interchange.
ASCII solo puede representar los caracteres en el idioma inglés. Entonces, es muy limitado.
El conjunto de caracteres que más usamos en estos días es UTF-8, que puede representar casi todos los caracteres del mundo.
Entonces, volvamos a nuestro código.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
</body>
</html>
Uso del conjunto de caracteres UTF-8
Con este metaelemento, <meta charset="UTF-8">estamos definiendo el juego de caracteres utilizado en este documento HTML.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Debajo de eso, tenemos un metaelemento, <meta name="viewport content="width=device-width, initial-scale=1.0">para configurar la ventana gráfica. La ventana gráfica es el área visible de una página web.
Una página index.html en blanco en el navegador
En un teléfono o una tableta, la ventana gráfica es más pequeña. Mientras estamos aquí en el escritorio, podemos cambiar el tamaño del puerto de visualización cambiando el tamaño del navegador.
Cambiar el tamaño de la ventana del navegador
Así que ahora nuestra ventana gráfica es más pequeña.
Volvamos a nuestro código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
</body>
</html>
HTML repetitivo de index.html en VS Code
En este metaelemento, estamos definiendo el ancho inicial y el factor de zoom para la ventana gráfica. Hablaremos de esto con más detalle más adelante. Por ahora, solo necesito que sepas que necesitamos este elemento para que nuestra página web se vea bien en todos los dispositivos: móviles, tabletas y computadoras de escritorio.
Entonces, como práctica recomendada, cada página web debe tener al menos estos dos metaelementos. Pero tenemos metaelementos adicionales. Déjame mostrarte algunos:
Entonces, si escribes meta:
meta:compact
meta:desc
meta:edge
meta:redirect
meta:refresh
meta:utf
Todo el meta mostrado en VS Code
En esta lista podemos ver todo tipo de meta elementos. Por ejemplo, tenemos un elemento para definir palabras clave en una página web. Seleccionémoslo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML,CSS" />
<title>Document</title>
</head>
<body></body>
</html>
La meta para las palabras clave resaltadas en VS Code
Aquí, podemos escribir varias palabras clave como HTML, CSS, etc.
<meta name="keywords" content="HTML, CSS">
En el pasado, estas palabras clave se usaban mucho para la optimización de motores de búsqueda. Pero en estos días, la mayoría de los motores de búsqueda no le dan mucha importancia a estas palabras clave. Aún así, podemos usarlos para definir las palabras clave que representan esta página.
Tenemos otro metaelemento para definir la descripción de esta página.
Entonces, si escribes <meta name="description" content="">:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="This is a simple HTML and CSS project." />
<title>Document</title>
</head>
<body></body>
</html>
La meta para la descripción resaltada en VS Code
En el contenido, podemos escribir la descripción de esta página. Lo que escribamos aquí aparecerá en Google u otros motores de búsqueda cuando alguien busque nuestro sitio web.
Por ejemplo, si busca Windows, esto es lo que obtenemos:
Una búsqueda de la palabra manzana en Google
Ahora, mira este texto:
La meta descripción que se muestra en el navegador del sitio web de Apple
Lo que ves aquí proviene de este elemento de aquí:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="This is a simple HTML and CSS project" />
<title>Document</title>
</head>
<body></body>
</html>
La meta descripción resaltada en VS Code
Entonces, este es el propósito de los meta elementos. Con los metaelementos podemos obtener información sobre una página web.
A continuación, vamos a hablar sobre los elementos que debe conocer al trabajar con texto.
Elementos para trabajar con texto
Ahora, hablemos de los elementos más comunes para trabajar con texto. Primero, aprenderá sobre el elemento de párrafo <p></p>que se usa para mostrar texto.
<p>I love to teach you HTML!</p>
A veces, es posible que desee enfatizar una parte de un texto. Digamos, la palabra HTML aquí. Para hacer eso, podemos envolverlo dentro de un elemento de énfasis.<em></em>
Entonces, aquí escribo lo siguiente:
<p> I love to teach you <em>HTML</em>!</p>
Siempre que queramos enfatizar algún contenido, podemos envolverlo dentro de un <em></em>elemento.
Así es como se ve en VS Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="This is a simple HTML and CSS project" />
<title>Document</title>
</head>
<body>
<p>I love to teach you <em>HTML</em>!</p>
</body>
</html>
El elemento de párrafo con énfasis en la palabra HTML
Ahora, guardemos los cambios.
Esto es lo que obtenemos:
El párrafo que se muestra en el navegador con HTML resaltado
De forma predeterminada, los navegadores muestran el contenido resaltado en cursiva. Pero no asuma que cuando desea mostrar contenido en cursiva, debe usar el <em></em>elemento. Porque el propósito del <em></em>elemento es enfatizar el contenido en nuestro documento HTML. Esto ayuda a los motores de búsqueda a extraer contenido importante en nuestros documentos.
Cualquier cosa que tenga que ver con el estilo debe hacerse en CSS.
Por ejemplo, aquí podemos cambiar el estilo predeterminado de los elementos resaltados y eliminar la cursiva. Dejame mostrarte como funciona.
Entonces, en la sección de encabezado, agregamos el elemento con estilo de esta manera:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="This is a simple HTML and CSS project" />
<style>
</style>
<title>Document</title>
</head>
<body>
<p>I love to teach you <em>HTML</em>!</p>
</body>
</html>
Elemento de estilo en blanco en index.html en VS Code
Aquí, definimos una regla para el contenido enfatizado:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="This is a simple HTML and CSS project" />
<style>
em {
}
</style>
<title>Document</title>
</head>
<body>
<p>I love to teach you <em>HTML</em>!</p>
</body>
</html>
La etiqueta de estilo con la regla de énfasis en blanco en VS Code
Podemos establecer el color en rojo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="This is a simple HTML and CSS project" />
<style>
em{
color: red;
}
</style>
<title>Document</title>
</head>
<body>
<p>I love to teach you <em>HTML</em>!</p>
</body>
</html>
El em en las etiquetas de estilo con el color establecido en rojo
Y el estilo de fuente a la normalidad.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="This is a simple HTML and CSS project" />
<style>
em {
color: red;
font-style: normal;
}
</style>
<title>Document</title>
</head>
<body>
<p>I love to teach you <em>HTML</em>!</p>
</body>
</html>
El em con el estilo de fuente establecido en normal en la etiqueta de estilo en VS Code
Ahora, no se preocupe por memorizar ninguna de estas propiedades CSS. Vamos a repasarlos varias veces a lo largo del resto de este tutorial.
Pero veamos qué pasa ahora que aplicamos estos estilos.
El párrafo en el navegador con la palabra HTML resaltada en rojo
Entonces, nuestro contenido enfatizado se muestra en rojo y ya no está en cursiva.
Ahora, en el pasado, teníamos un elemento llamado <i></i>que es la abreviatura de cursiva.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="This is a simple HTML and CSS project" />
<style>
em {
color: red;
font-style: normal;
}
</style>
<title>Document</title>
</head>
<body>
<p>I love to teach you <i>HTML</i>!</p>
</body>
</html>
La palabra HTML en etiquetas cursivas en VS Code
Si usamos este elemento, obtenemos el mismo resultado que antes. Nuestro contenido se muestra en cursiva. Sin embargo, este elemento se considera obsoleto porque HTML no está diseñado para diseñar. Solo debe usarse para estructurar el contenido.
Por lo tanto, no use el <i></i>elemento para mostrar el contenido en cursiva.
Ahora, tenemos un elemento similar en HTML llamado <strong></strong>El elemento fuerte representa una gran importancia, seriedad o urgencia para su contenido. Conceptualmente, es similar al elemento de énfasis, por lo que el lugar donde debe usarlo realmente depende de su contexto.
Guardemos los cambios y veamos qué obtenemos.
El párrafo con la palabra HTML en negrita
Entonces, por defecto, los elementos fuertes se muestran en negrita. Pero, una vez más, siempre podemos cambiar el estilo.
Ahora, en el pasado teníamos otro elemento llamado <b></b>que es la abreviatura de negrita. Entonces, cada vez que queríamos hacer algo audaz, usábamos este elemento.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="This is a simple HTML and CSS project" />
<style>
em {
color: red;
font-style: normal;
}
</style>
<title>Document</title>
</head>
<body>
<p>I love to teach you <b>HTML</b>!</p>
</body>
</html>
El párrafo con la palabra HTML en negrita
Pero, una vez más, este elemento se considera obsoleto porque el estilo debe hacerse en CSS y no en HTML. Por lo tanto, no use <b></b>o <i></i>elementos.
Ahora, esto es todo sobre el texto, ahora hablemos de los encabezados.
encabezados
Entonces, en HTML, tenemos 6 elementos de encabezado. Estos son:
<h1>This is heading one</h1>
<h2>This is heading two</h2>
<h3>This is heading three</h3>
<h4>This is heading four</h4>
<h5>This is heading five</h5>
<h6>This is heading six</h6>
Este es el código en VS Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="This is a simple HTML and CSS project" />
<title>Document</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
Los 6 encabezados en index.html en VS Code
Entonces, veamos qué tenemos cuando ejecutamos el código.
Todos los encabezados de una página en el navegador
Ahora, el encabezado uno representa el encabezado más importante y el encabezado 6 representa el encabezado menos importante.
Ahora, un error común que veo entre muchas personas es que eligen estos encabezados en función de su tamaño. Eligen, digamos, la partida cuatro por el tamaño. No es así como se supone que debes usar los encabezados porque el tamaño siempre se puede cambiar usando CSS. Es una cuestión de estilo.
Deberíamos usar estos elementos de encabezado para crear una jerarquía.
El encabezado 1 resaltado
Toda página web debe tener uno y solo un <h1></h1>elemento de encabezado uno ( ).
Este encabezado representa de qué se trata esta página. Bueno, no pasa nada si tenemos varios <h1></h1>elementos.
Por ejemplo, puedo duplicar esto para decir heading one +:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="This is a simple HTML and CSS project" />
<title>Document</title>
</head>
<body>
<h1>Heading 1</h1>
<h1>Heading 1+</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
Encabezado 1 duplicado en VS Code
Ahora, mira, tenemos dos <h1></h1>elementos. Pero, esto va a confundir a los motores de búsqueda. No van a averiguar de qué se trata esta página.
Por lo tanto, cada página debe tener un solo <h1></h1>elemento.
Ahora, después de usar <h1></h1>now deberíamos usar <h2></h2>We should not jump to <h4></h4>.
Entonces, digamos que en esta página vamos a tener dos secciones. Uno para HTML, el otro para CSS. Ahora, mi próximo encabezado debería ser <h2></h2>:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="This is a simple HTML and CSS project" />
<title>Document</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>HTML</h2>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
Encabezado 2 con la palabra HTML
y aquí, podemos escribir HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="This is a simple HTML and CSS project" />
<title>Document</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>HTML</h2>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
Encabezado 2 con la palabra HTML
Luego, debajo de este encabezado, podemos tener algo de texto. Entonces, voy a decir HTML Tutorial:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="This is a simple HTML and CSS project" />
<title>Document</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>HTML</h2>
<p>HTML Tutorial</p>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
Un párrafo en el código con la palabra HTML Tutorial
Nuestro próximo título debería ser <h2></h2>.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="This is a simple HTML and CSS project" />
<title>Document</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>HTML</h2>
<p>HTML Tutorial</p>
<h2>CSS</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
Encabezado 2 con la palabra CSS en VS Code
Esta es la sección CSS. En esta sección, podemos tener algún texto adicional, digamos CSS Tutorial:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="This is a simple HTML and CSS project" />
<title>Document</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>HTML</h2>
<p>HTML Tutorial</p>
<h2>CSS</h2>
<p>CSS Tutorial</p>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
Un párrafo con la palabra CSS Tutorial
Ahora, voy a eliminar estos cuatro encabezados a continuación.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="This is a simple HTML and CSS project" />
<title>Document</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>HTML</h2>
<p>HTML Tutorial</p>
<h2>CSS</h2>
<p>CSS Tutorial</p>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
Se eliminan cuatro encabezados en VS Code
Ahora están borrados.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="This is a simple HTML and CSS project" />
<title>Document</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>HTML</h2>
<p>HTML Tutorial</p>
<h2>CSS</h2>
<p>CSS Tutorial</p>
</body>
</html>
Los cuatro encabezados eliminados en VS Code
Echemos un vistazo ahora.
La página en el navegador sin las cuatro imágenes eliminadas
Tenemos una jerarquía. En la parte superior, tenemos un <h1></h1>elemento. Debajo de eso, tenemos dos <h2></h2>elementos.
La página en el navegador con el encabezado un elemento y dos encabezados dos elementos
Ahora, digamos en la sección HTML, vamos a tener dos subsecciones. Ahí, deberíamos usar <h3></h3>elementos.
Entonces, aquí está nuestra sección HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="This is a simple HTML and CSS project" />
<title>Document</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>HTML</h2>
<p>HTML Tutorial</p>
<h2>CSS</h2>
<p>CSS Tutorial</p>
</body>
</html>
El encabezado uno y dos elementos del encabezado dos en VS Code
En esta sección, vamos a tener dos <h3></h3>elementos, Codey Exercise:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="This is a simple HTML and CSS project" />
<title>Document</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>HTML</h2>
<p>HTML Tutorial</p>
<h3>Code</h3>
<h3>Exercise</h3>
<h2>CSS</h2>
<p>CSS Tutorial</p>
</body>
</html>
Dos elementos de encabezado 3 con las palabras código y ejercicio en VS Code
Ahora, echa un vistazo.
La página en el navegador con las palabras código y ejercicio.
Entonces, ¡tenemos una jerarquía adecuada! Así es como debemos usar estos elementos de encabezado. Cuanto mejor podamos representar la estructura usando HTML, mejor los motores de búsqueda podrán leer y comprender nuestro contenido.
Entonces, eso es todo sobre el texto.
A continuación, hablaremos sobre la visualización de caracteres especiales en HTML.
Entidades HTML
Algunos caracteres están reservados en HTML y para mostrarlos tenemos que usar una notación especial. Por ejemplo, digamos que queremos envolver la palabra HTML con corchetes angulares. Veamos qué va a pasar.
Entonces, escribo ángulo izquierdo y paréntesis angular derecho, VS Code pensó que estábamos agregando un elemento HTML, por lo que generó automáticamente la etiqueta de cierre.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="This is a simple HTML and CSS project" />
<title>Document</title>
</head>
<body>
<p>I love to teach you <HTML>!</HTML></p>
</body>
</html>
Autocompletar la etiqueta HTML en VS Code
No queremos esto, así que eliminémoslo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="This is a simple HTML and CSS project" />
<title>Document</title>
</head>
<body>
<p>I love to teach you<HTML>!</p>
</body>
</html>
Se eliminó la última etiqueta HTML en VS Code
Ahora, de vuelta en el navegador, mira. ¿Dónde está nuestra palabra HTML?
La palabra HTML no es visible en la página del navegador
No está aquí porque el navegador lo interpretó como una etiqueta HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="This is a simple HTML and CSS project" />
<title>Document</title>
</head>
<body>
<p>I love to teach you<HTML>!</p>
</body>
</html>
La etiqueta de apertura HTML que nunca se mostró
Esto no es lo que queremos. Queremos mostrar esto exactamente como esto. Entonces, para resolver este problema, vamos a usar entidades HTML. Todas estas entidades comienzan con un ampersand y terminan con un punto y coma.&;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="This is a simple HTML and CSS project" />
<title>Document</title>
</head>
<body>
<p>I love to teach you &; <HTML>!</p>
</body>
</html>
entidad HTML &; en código VS
Entonces, tenemos una entidad para mostrar un signo menor que, que es <la abreviatura de menos que. De manera similar, tenemos otra entidad HTML para mostrar el signo mayor que. Entonces, escribimos >cuál es la abreviatura de mayor que, seguido de un punto y coma.
<p>I love to teach you <HTML>!</p>
Este es el código en VS Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="This is a simple HTML and CSS project" />
<title>Document</title>
</head>
<body>
<p>I love to teach you <HTML>!</p>
</body>
</html>
El signo menor que y mayor que en VS Code
Ahora, volviendo al navegador, eso es exactamente lo que queríamos.
Palabra HTML rodeada por los signos menor que y mayor que en VS Code
Otra entidad HTML común es el símbolo de copyright. Entonces, al final, voy a escribir©
<p>I love to teach you <HTML>! ©</p>
Este es el código en VS Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="This is a simple HTML and CSS project" />
<title>Document</title>
</head>
<body>
<p>I love to teach you <HTML>! ©</p>
</body>
</html>
La copia; entidad
Ahora echa un vistazo.
El signo de copia que se muestra en la página del navegador después del signo de exclamación
Ahí está nuestro símbolo de derechos de autor. Se ve bien.
Ahora, tenemos tantas entidades en HTML y, francamente, no tienes que memorizarlas. De hecho, probablemente no vayas a usar el 99% de ellos. Pero en caso de que tengas curiosidad, déjame mostrarte la lista completa.
Entonces, en Google, busque entidades HTML.
Búsqueda de Google para entidades HTML
Esto es lo que encontré:
Primer resultado de Entidades HTML de Google
Estas son algunas de las entidades. Solo he usado un par de ellos.
Algunas entidades de caracteres HTML útiles de w3schools después de la búsqueda de Google
Ahora, todo esto se trata de entidades HTML. A continuación, vamos a hablar de los enlaces.
Cómo crear hipervínculos
Casi todas las páginas web de Internet tienen enlaces a otras páginas o sitios web. Para crear estos enlaces, usamos el elemento ancla.
<a href=""></a>
Cada elemento ancla debe tener un atributo href. hrefes la abreviatura de referencia de hipertexto. Básicamente significa una URL o un enlace.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="This is a simple HTML and CSS project" />
<title>Document</title>
</head>
<body>
<a href=""></a>
</body>
</html>
Href vacío en VS Code
En esta demostración, crearé una segunda página llamada about.html y luego la vincularé aquí.
Entonces, aquí en el panel del explorador, agreguemos una nueva página llamada about.html:
El about.html en VS Code
Aquí, vamos a crear un modelo HTML básico.
Vaciar about.html en VS Code
Ahora, vamos a crearlo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
</body>
</html>
HTML repetitivo en about.html en VS Code
Volver a index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="This is a simple HTML and CSS project" />
<title>Document</title>
</head>
<body>
<a href=""></a>
</body>
</html>
El código index.html en VS Code
Aquí, podemos usar una URL relativa o absoluta. ¿Qué quiero decir con eso? Bueno, una URL relativa comienza desde la página actual. Entonces, actualmente, estamos en index.htmly queremos ir a about.html.
Ahora, actualmente, ambas páginas están en la misma carpeta.
About.html e index.html en la misma carpeta que se muestra en la pestaña VS Code Explorer
Podemos escribir una URL absoluta para about.htmldar me gusta.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="This is a simple HTML and CSS project" />
<title>Document</title>
</head>
<body>
<a href="about.html"></a>
</body>
</html>
Se agregó la URL absoluta about.html
Esa es una URL absoluta.
Ahora, ¿y si about.htmlestuviera en una carpeta diferente?
Entonces, agreguemos una nueva carpeta a nuestro proyecto llamada company:
Se agregó la empresa de carpetas a nuestro proyecto en VS Code.
Luego nos movemos a esta carpeta arrastrando y soltando.
Mover about.html a la empresa de carpetas en VS Code
¿ Dónde está about.htmlen relación con esta página? Está dentro de la carpeta de la empresa.
El about.html ahora está dentro de la carpeta de la empresa.
Entonces, aquí escribimos company/about.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="This is a simple HTML and CSS project" />
<title>Document</title>
</head>
<body>
<a href="company/about.html"></a>
</body>
</html>
Escribiendo company/about.html en href en VS Code
Esta es una URL relativa.
Ahora, vamos a darle a este enlace algo de texto. Voy a llamarlo About MeEntonces, escribimos nuestro texto dentro del elemento ancla.
<a href="company/about.html">About Me</a>
Así es como se ve en VS Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="This is a simple HTML and CSS project" />
<title>Document</title>
</head>
<body>
<a href="company/about.html">About Me</a>
</body>
</html>
company/about.html en href en la etiqueta de anclaje de Acerca de mí en VS Code
Volver al navegador. Aquí está nuestro enlace:
El enlace Acerca de mí en la página del navegador
Cuando hace clic en él, lo lleva a la página acerca de que está vacía.
La página about.html en el navegador que está en blanco
En lugar de texto, podemos usar un elemento de imagen.
voy a borrar About Me:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="This is a simple HTML and CSS project" />
<title>Document</title>
</head>
<body>
<a href="company/about.html">
</a>
</body>
</html>
Se eliminó el texto Acerca de mí en las etiquetas de anclaje en VS Code
y agregue un elemento de imagen en su lugar:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="This is a simple HTML and CSS project" />
<title>Document</title>
</head>
<body>
<a href="company/about.html">
<img src="" alt="">
</a>
</body>
</html>
Se agregó un elemento de imagen dentro de las etiquetas de anclaje en VS Code
Una vez más, aquí podemos escribir una URL relativa a nuestra imagen de destino.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="This is a simple HTML and CSS project" />
<title>Document</title>
</head>
<body>
<a href="company/about.html">
<img src="Images/altumcode.jpg" alt="">
</a>
</body>
</html>
Una URL relativa a nuestra imagen de destino en VS Code
Así es como se ve:
La imagen en la página del navegador
Bueno, esta imagen es demasiado grande. Siempre podemos usar CSS para cambiar su tamaño. Pero, aparte de eso, obtenemos el ícono del mouse cuando pasamos el mouse sobre esta imagen. Cambia a una mano para indicar que se puede hacer clic en esta imagen.
Ahora, volvamos a nuestro código. Para simplificar las cosas, me desharé de esta imagen y volveré a nuestro texto.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="This is a simple HTML and CSS project" />
<title>Document</title>
</head>
<body>
<a href="company/about.html">About Me</a>
</body>
</html>
Se eliminó la imagen y se agregó nuestro texto nuevamente en la etiqueta de anclaje en VS Code
Vayamos a la página acerca de y agreguemos un enlace a la página de inicio.
Entonces, aquí:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
</body>
</html>
Plantilla HTML en la página about.html en VS Code
Vamos a añadir un elemento ancla:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<a href=""></a>
</body>
</html>
Se agregó una etiqueta de anclaje en el cuerpo en VS Code
¿Qué debemos escribir para el atributo href? Bueno, actualmente, estamos dentro de la carpeta de la empresa. Tenemos que subir un nivel para poder accederindex.html
Para hacer eso, escribimos ../Con esto, podemos subir un nivel.
<a href="../"></a>
Entonces podemos referenciar index.htmly para el texto, vamos a decir página de inicio.
<a href="../index.html">Home Page</a>
Nuevamente, este es otro ejemplo de una URL relativa, porque comienza en la página actual y va a otro lugar.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<a href="../index.html">Home Page</a>
</body>
</html>
Se agregó una URL relativa en la etiqueta de anclaje que apunta a la página index.html
Si está dentro de una estructura de carpetas profundamente anidada, es posible que tengamos que subir varios niveles. Entonces,
<a href="../../../index.html">Home Page</a>
Con esto, podemos subir tres niveles.
Como puede ver, las URL como esta se ven desordenadas. Parecen difíciles de leer. En esos casos, podemos usar una URL absoluta.
Entonces, comenzamos con a /y esto representa la raíz de nuestro sitio web.
<a href="/"></a>
En este nivel, tenemos acceso a index.html.
<a href="/index.html"></a>
Entonces, esta es una URL absoluta.
Ahora, de vuelta a index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="This is a simple HTML and CSS project" />
<title>Document</title>
</head>
<body>
<a href="company/about.html">About Me</a>
</body>
</html>
La etiqueta de anclaje en index.html que apunta a la página about.html en VS Code
Aquí estamos enlazando a un documento HTML. Pero también podemos vincular a documentos que no sean HTML, como imágenes, PDF, PowerPoint, etc.
Entonces, agreguemos un enlace a mi imagen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="This is a simple HTML and CSS project" />
<title>Document</title>
</head>
<body>
<a href="company/about.html">About Me</a>
<a href="Images/altumcode.jpg">My Computer Photo</a>
</body>
</html>
Se agregó un enlace a mi imagen en VS Code
Echar un vistazo.
Los enlaces en la página del navegador
Entonces, aquí está nuestro segundo enlace. Podemos hacer clic en él.
Al hacer clic en el enlace, My Computer Photo, que nos lleva a una nueva página con la foto en un navegador
Mi imagen se muestra en el navegador.
Pero, ¿y si quiero pedirle al usuario que lo descargue? Eso es muy fácil. Vamos a agregar el atributo de descarga a nuestro elemento ancla.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="This is a simple HTML and CSS project" />
<title>Document</title>
</head>
<body>
<a href="company/about.html">About Me</a>
<a href="Images/altumcode.jpg" download>My Computer Photo</a>
</body>
</html>
Se agregó el atributo de descarga en la etiqueta de anclaje de nuestra imagen en VS Code
Recuerda guardarlo.
Ahora, de vuelta al navegador. Volvemos atrás y refrescamos la página. (Tenemos que actualizar manualmente la página porque el servidor en vivo solo actualiza la página actual).
La página del navegador con nuestros enlaces
Ahora, cuando hago clic en este enlace, en lugar de ver mi imagen, voy a ver cómo se descarga mi imagen.
La imagen descargada en el navegador.
También podemos enlazar a otras partes de esta página.
Entonces, creemos dos secciones con mucho texto. Voy a agregar un elemento H2 HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="This is a simple HTML and CSS project" />
<title>Document</title>
</head>
<body>
<a href="company/about.html">About Me</a>
<a href="Images/altumcode.jpg">My Computer Photo</a>
<h2>HTML</h2>
</body>
</html>
Se agregó el encabezado dos elementos con el texto HTML en VS Code
Debajo de eso, vamos a agregar un texto ficticio con 200 palabras.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="This is a simple HTML and CSS project" />
<title>Document</title>
</head>
<body>
<a href="company/about.html">About Me</a>
<a href="Images/altumcode.jpg">My Computer Photo</a>
<h2>HTML</h2>
<p>Lorem, ipsum, sit amet consetieu millpiscing ellit, Qiaus nesciant dietns quisquet ael, doule, eit maigures</p>
</body>
</html>
Se agregó el elemento de párrafo con texto ficticio en VS Code
Justo después de eso, agregaremos otro H2 para la sección CSS con algo más de texto.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="This is a simple HTML and CSS project" />
<title>Document</title>
</head>
<body>
<a href="company/about.html">About Me</a>
<a href="Images/altumcode.jpg">My Computer Photo</a>
<h2>HTML</h2>
<p>Lorem, ipsum, sit amet consetieu millpiscing ellit, Qiaus nesciant dietns quisquet ael, doule, eit maigures</p>
<h2>CSS</h2>
<p>Lorem, ipsum, sit amet consetieu millpiscing ellit, Qiaus nesciant dietns quisquet ael, doule, eit maigures</p>
</body>
</html>
Se agregó el encabezado y el párrafo CSS con texto ficticio en VS Code
Guardemos los cambios.
Echar un vistazo.
La página del navegador con el texto ficticio
En la parte superior, podemos agregar un enlace a la sección CSS para que no tengamos que desplazarnos. Cuando el usuario haga clic en eso, saltará inmediatamente a la sección CSS.
Entonces, aquí en la sección CSS, primero le daremos a este elemento un identificador único. Al igual que todos en el mundo real pueden tener un identificador único, como una licencia de conducir o un pasaporte, cada elemento de una página también puede tener un identificador único.
Aquí, voy a establecer el atributo id ensection-css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="This is a simple HTML and CSS project" />
<title>Document</title>
</head>
<body>
<a href="company/about.html">About Me</a>
<a href="Images/altumcode.jpg">My Computer Photo</a>
<h2>HTML</h2>
<p>Lorem, ipsum, sit amet consetieu millpiscing ellit, Qiaus nesciant dietns quisquet ael, doule, eit maigures</p>
<h2 id="section-css">CSS</h2>
<p>Lorem, ipsum, sit amet consetieu millpiscing ellit, Qiaus nesciant dietns quisquet ael, doule, eit maigures</p>
</body>
</html>
Establecer el atributo id en section-css en VS Code
El nombre realmente no importa aquí. Lo que importa es que estamos definiendo lo que llamamos un fragmento o un lugar en esta página. Ahora, vamos a agregar un enlace a este fragmento. Entonces, en la parte superior:
<a href="#section-css">CSS</a>
Así es como se ve en VS Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="This is a simple HTML and CSS project" />
<title>Document</title>
</head>
<body>
<a href="company/about.html">About Me</a>
<a href="Images/altumcode.jpg">My Computer Photo</a>
<a href="#section-css">CSS</a>
<h2>HTML</h2>
<p>Lorem, ipsum, sit amet consetieu millpiscing ellit, Qiaus nesciant dietns quisquet ael, doule, eit maigures</p>
<h2 id="section-css">CSS</h2>
<p>Lorem, ipsum, sit amet consetieu millpiscing ellit, Qiaus nesciant dietns quisquet ael, doule, eit maigures</p>
</body>
</html>
Se agregó un enlace a la sección CSS en VS Code
Ahora, de vuelta al navegador.
El enlace CSS en la página del navegador
Cuando hago clic en el enlace CSS, me lleva a la sección CSS sin desplazarme.
La sección CSS en la página del navegador
Ahora, muchos sitios web como este tienen un enlace que lo ayuda a saltar a la parte superior de la página. Veamos cómo podemos crear eso.
Después de la sección CSS, agregaré otro elemento de anclaje.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="This is a simple HTML and CSS project" />
<title>Document</title>
</head>
<body>
<a href="company/about.html">About Me</a>
<a href="Images/altumcode.jpg">My Computer Photo</a>
<a href="#section-css">CSS</a>
<h2>HTML</h2>
<p>Lorem, ipsum, sit amet consetieu millpiscing ellit, Qiaus nesciant dietns quisquet ael, doule, eit maigures</p>
<h2 id="section-css">CSS</h2>
<p>Lorem, ipsum, sit amet consetieu millpiscing ellit, Qiaus nesciant dietns quisquet ael, doule, eit maigures</p>
<a href="#"></a>
</body>
</html>
Un elemento de anclaje vacío en VS Code
Para el hrefvoy a utilizar un fragmento vacío. Entonces, solo escribimos un signo de libra sin un identificador.
<a href="#">Jump to Top</a>
Así es como se ve en VS Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="This is a simple HTML and CSS project" />
<title>Document</title>
</head>
<body>
<a href="company/about.html">About Me</a>
<a href="Images/altumcode.jpg">My Computer Photo</a>
<a href="#section-css">CSS</a>
<h2>HTML</h2>
<p>Lorem, ipsum, sit amet consetieu millpiscing ellit, Qiaus nesciant dietns quisquet ael, doule, eit maigures</p>
<h2 id="section-css">CSS</h2>
<p>Lorem, ipsum, sit amet consetieu millpiscing ellit, Qiaus nesciant dietns quisquet ael, doule, eit maigures</p>
<a href="#">Jump to Top</a>
</body>
</html>
Se agregó el texto Jump to Top en el elemento de anclaje en VS Code
Vamos a ver.
El enlace Saltar al principio en la página del navegador
Aquí está nuestro enlace. Cuando haces clic en él, te lleva a la parte superior.
Ahora, veamos cómo podemos enlazar a sitios web externos.
Entonces, agreguemos otro elemento de anclaje para vincular a Google.
Aquí, tenemos que usar una URL absoluta ya que Google es un sitio web externo. Vamos a otro sitio web. Entonces, ¿cómo podemos hacer eso? Bueno, tenemos que empezar con un protocolo.
<a href="https://google.com">Google</a>
Así es como se ve en VS Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="This is a simple HTML and CSS project" />
<title>Document</title>
</head>
<body>
<a href="company/about.html">About Me</a>
<a href="Images/altumcode.jpg">My Computer Photo</a>
<a href="#section-css">CSS</a>
<a href="https://google.com">Google</a>
<h2>HTML</h2>
<p>Lorem, ipsum, sit amet consetieu millpiscing ellit, Qiaus nesciant dietns quisquet ael, doule, eit maigures</p>
<h2 id="section-css">CSS</h2>
<p>Lorem, ipsum, sit amet consetieu millpiscing ellit, Qiaus nesciant dietns quisquet ael, doule, eit maigures</p>
<a href="#">Jump to Top</a>
</body>
</html>
Un enlace a la página de inicio de Google en VS Code
Vamos a ver.
El enlace de Google en la página del navegador
Cuando hacemos clic en el enlace Google, nos lleva a Google.
La página de inicio de Google
Ahora, a veces, al vincular a sitios web externos, queremos que ese enlace se abra en una nueva pestaña. Déjame mostrarte cómo hacerlo.
<a href="https://google.com" target="_blank">Google</a>
Así es como se ve en VS Code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="This is a simple HTML and CSS project" />
<title>Document</title>
</head>
<body>
<a href="company/about.html">About Me</a>
<a href="Images/altumcode.jpg">My Computer Photo</a>
<a href="#section-css">CSS</a>
<a href="https://google.com" target="_blank">Google</a>
<h2>HTML</h2>
<p>Lorem, ipsum, sit amet consetieu millpiscing ellit, Qiaus nesciant dietns quisquet ael, doule, eit maigures</p>
<h2 id="section-css">CSS</h2>
<p>Lorem, ipsum, sit amet consetieu millpiscing ellit, Qiaus nesciant dietns quisquet ael, doule, eit maigures</p>
<a href="#">Jump to Top</a>
</body>
</html>
Se agregó un objetivo en blanco a la etiqueta de anclaje de Google en VS Code
Ahora, de vuelta a la página de inicio.
La página index.html en el navegador
Una vez más, tenemos que actualizar manualmente para obtener los últimos cambios.
Ahora, cuando hago clic en Google, vemos una nueva pestaña.
Una nueva pestaña del navegador cuando hago clic en el enlace de Google
Esto es todo acerca de los enlaces.
Ahora, una diferencia principal antes de terminar esta lección. ¿Cuál es la diferencia entre un enlace y un hipervínculo?
Bueno, un enlace es solo una dirección, una URL, una ubicación de la página de destino.
Un hipervínculo es el elemento en el que el usuario puede hacer clic para navegar a esa página de destino. Esa es la diferencia entre un enlace y un hipervínculo. Pero, muy a menudo, estos términos se usan indistintamente.
Muy bien, hemos terminado con esta lección. Lo siguiente de lo que vamos a hablar es de imágenes.
Cómo incrustar imágenes
Ahora, hablemos de incrustar imágenes con un poco más de detalle.
Para esta lección, voy a tomar una imagen de unsplash.comla cual podemos encontrar muchas imágenes hermosas y disponibles gratuitamente.
Página de inicio de Unsplash
Entonces, busquemos café.
Buscando la palabra café en la barra de búsqueda de Unsplash
Hay un montón de fotos de café aquí. Voy a agarrar uno.
Descargar una imagen de café de Unsplash
Puedes descargarlo gratis.
La imagen viene en diferentes tamaños. Tamaño pequeño, mediano y original, que es grande.
Los diferentes tamaños en los que viene la imagen.
Por ahora, vamos a tomar esta imagen en tamaño pequeño.
Ahora, vamos a descargarlo.
Voy a arrastrarlo y soltarlo en la carpeta de imágenes.
Arrastró y soltó la imagen en la carpeta de imágenes en VS Code
Y luego cámbiele el nombre a café.
Cambiar el nombre de la imagen a café en VS Code
Desea darle un nombre descriptivo. Este es un consejo de optimización de motores de búsqueda. Cuando proporcionamos nombres descriptivos para nuestras imágenes, los motores de búsqueda pueden comprender e indexar mejor nuestras páginas.
Ahora, agreguemos un elemento de imagen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="This is a simple HTML and CSS project" />
<title>Document</title>
</head>
<body>
<img src="" alt="">
</body>
</html>
Se agregó un elemento de imagen vacío en index.html en VS Code
Establecemos la fuente en:
<img src="Images/coffee.jpg" alt="">
Así es como se ve en VS Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="This is a simple HTML and CSS project" />
<title>Document</title>
</head>
<body>
<img src="Images/coffee.jpg" alt="">
</body>
</html>
Se agregó la fuente de la imagen.
Ahora, ¿qué pasa con el altatributo? Bueno, mencioné brevemente que usamos este atributo para proporcionar una descripción textual de la imagen. No es obligatorio, pero es muy recomendable por varias razones.
El primer motivo es hacer que nuestra página sea accesible para personas con discapacidad visual. Algunas personas necesitan usar un lector de pantalla para leerles la página web. Entonces, con este texto alternativo, podemos decirles lo que estamos mostrando en la página.
Eso significa que debemos escribir una buena descripción significativa comoA coffee mug on a table
<img src="images/coffee.jpg" alt="A coffee mug on a table">
No escriba algo como Imageo Image one. Eso no tiene sentido.
Ahora, el segundo beneficio de proporcionar un texto alternativo es que ayuda a los motores de búsqueda a leer este texto y comprender lo que ofrecemos aquí.
Otro beneficio es que si esta imagen no se puede cargar por algún motivo, se muestra el texto alternativo.
Déjame mostrarte lo que quiero decir.
Ahora voy a agregar un error tipográfico aquí.
<img src="fdImages/coffee.jpg" alt="A coffee mug on a table">
Así es como se ve en VS Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="This is a simple HTML and CSS project" />
<title>Document</title>
</head>
<body>
<img src="fdImages/coffee.jpg" alt="A coffee mug on a table">
</body>
</html>
El elemento de imagen con un error tipográfico en la fuente
Volver al navegador.
La página del navegador no muestra la imagen. Sin embargo, muestra el texto alternativo.
Mira, no se carga la imagen, pero vemos el texto alternativo. Esto también puede suceder si hay un problema de conectividad de red. Si el usuario se desconecta, todavía puede ver el texto alternativo.
Entonces, eliminemos el error tipográfico.
<img src="images/coffee.jpg" alt="A coffee mug on a table">
Así es como se ve en VS Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="This is a simple HTML and CSS project" />
<title>Document</title>
</head>
<body>
<img src="Images/coffee.jpg" alt="A coffee mug on a table">
</body>
</html>
Se eliminó el error tipográfico de la fuente de imágenes.
Ahora, hablemos de cambiar el tamaño de las imágenes.
Como te dije antes, podemos usar CSS para cambiar el tamaño de nuestras imágenes.
Aquí, en la sección de encabezado, agreguemos un elemento de estilo y apliquemos una regla a nuestra imagen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="This is a simple HTML and CSS project" />
<title>Document</title>
<style>
img {
}
</style>
</head>
<body>
<img src="Images/coffee.jpg" alt="A coffee mug on a table">
</body>
</html>
Etiqueta de estilo con una regla img vacía en VS Code
Ahora, esta regla se aplica a todas las imágenes de la página. Esto probablemente no sea algo que querríamos hacer en un escenario del mundo real.
En un escenario del mundo real, desea aplicar una clase a este elemento y luego definir reglas para esa clase.
Démosle un poco de estilo a esta imagen.
<style>
img {
width: 200px;
height: 200px;
}
</style>
Así es como se ve en VS Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="This is a simple HTML and CSS project" />
<title>Document</title>
<style>
img {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<img src="Images/coffee.jpg" alt="A coffee mug on a table">
</body>
</html>
La regla de la imagen con el estilo de ancho y alto en VS Code
Ahora, hay un pequeño problema en nuestra imagen: está un poco aplastada. La razón es que estamos tratando con una imagen rectangular, pero la estamos convirtiendo en una imagen cuadrada.
Entonces, ¿cómo podemos resolver este problema? Bueno, tenemos una propiedad en CSS llamada Object Fit. Se parece a esto:
<style>
img {
width: 200px;
height: 200px;
object-fit: cover;
}
</style>
Podemos usar coverpara que el objeto cubra su caja contenedora.
¿Qué es una caja contenedora? Conceptualmente, hay un cuadro alrededor de cada documento HTML. No vemos este cuadro, pero el navegador usa ese cuadro para averiguar cómo se debe mostrar esa página.
Conclusión
Espero que hayas aprendido una o dos cosas sobre HTML y CSS. ¡Nos vemos pronto!
¡Feliz codificación!
Fuente: https://www.freecodecamp.org
#html #css