Este año voy a empezar a compartir contenido educativo 🤓
Descubrí la programación el año pasado y me metí de lleno a estudiarla, ahora siento que es momento de compartir lo que he aprendido.
En esta Guía vamos a ver los principios de HTML, desde lo más básico, hasta llegar a los estilos CSS.
🔥
El html es la estructura y contenido de nuestra web. Es es el archivo principal a partir del cual se llaman el resto de archivos que necesitamos para visualizar nuestra web, tales como las hojas de estilo, imágenes, etc.
Las elementos HTML se escriben con los símbolos < > para abrir, y </ > para cerrar.
<etitqueta> </etiqueta>Nuestro archivo HTML va a tener varios tipos de eituqetas, de docuemnto, de bloque, de imagen, de enlace, etc. También estas pueden tener atributos, pero arranquemos con lo primero que encontramos en nuestro archivo HTML: Las Etiquetas de Documento
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Guía Básica de HTML</title>
</head>
<body>
</body>
</html>Vamos a enumerar las distintas etiquetas que se utilizan y describir sus funciones.
<!DOCTYPE html> Indica al navegador que la web sigue los estándares y debe ser renderizada como tal. Se pone al principio del documento html y no se cierra.
<html></html>Etiqueta que engloba el resto del documento.
<head></head>Etiqueta con información para el navegador diferente del contenido: título de la página, hoja de estilos, codificado, etc.
<body></body>Contenido (texto, imágenes, etc) de la página.
<title></title>Título de la página, que suele figurar en los resultados de búsqueda o en la pestaña del navegador.
<meta charset="utf-8">Codifica caracteres especiales.
<p></p>Marca un párrafo.
<h1></h1>Marca un encabezado de primer nivel. Solo puede haber uno por página.
<h2></h2>Marca un encabezado de segundo nivel.
<h3></h3>Marca un encabezado de tercer nivel.
<h4></h4>Marca un encabezado de cuarto nivel.
<h5></h5>Marca un encabezado de quinto nivel.
<h6></h6>Marca un encabezado de sexto nivel.
<!—- comentario -—>Para introducir comentarios o comentar cierta parte del código
<br> Marca un salto de línea. No requiere de cierre.
<em></em>Etiqueta semántica para hacer énfasis en una palabra en particular. Se renderiza como una cursiva.
<strong></strong>Etiqueta semántica para indicar la relevancia en un texto de una palabra en particular. Se renderiza como una negrita.
<span></span>Etiqueta sin valor semántico que sirve para acotar trozos de texto.
<div></div>Etiqueta sin valor semántico que nos permite agrupar bloques.
<ul></ul>Etiqueta de listado no ordenado. Solo puede contener elementos de lista (< li >).
<li></li>Etiqueta de elemento de lista. Puede contener cualquier tipo de elemento html.
<ol></ol>Etiqueta de listado ordenado. Solo puede contener elementos de lista (< li >).
Los atributos nos sirven para diferenciar a nuestros elementos cuando querramos darles estilos. Se escriben en la etiqueta de apertura de un elemento, después del nombre y se pueden escribir varios atributos separados por espacios.
La forma de asignar un valor a un atributo es con el símbolo = y el valor entre comillas. No puede haber espacios entre el atributo y el =, o entre el = y las comillas.
Ejemplo: <div class="ejemplo" id="ejemplo">
class=" "Asigna una o más clases a un elemento html. Si hay más de una clase, se separan con espacios.
id=" "Asigna un identificador único a un elemento html. Un elemento no puede tener más de un id, y no puede haber dos elementos con el mismo id.
Rutas de archivo
Cuando querramos mostrar un archivo por ejemplo de imagen, debemos llamarlo por su nombre y exstensión, y buscarlo en la carpeta que lo contenga.
Para navegar entre carpetas se utiliza . seguido por / y ahí el nombre de la carpeta. En caso que la carpeta estuviese en otro nivel colcamos ../ y si queremos subir otro nivel más ../../carpeta Para navegar entre carpetas las separamos por / hasta llegar a nuestro archivo.
Ejamplo: ../../imagenes/background.jpg
Etiqueta de imagen
<img src=" " alt=" ">El atributo src indica la ruta de la imagen, y el alt es el texto alternativo que se mostrara en caso que la imagen no cargue.
Para controlar el tamaño de nuestra imagen podemos utilizar el atributo width=""
Ejemplo:
<img src="./img/portada.png" width="60%">Etiqueta de enlace
<a href=" "></a>El atributo href indica la página de destino. Puede ser a un archivo dentro de nuestro proyecto, o a un sitio web (en este caso hay que poner la URL completa, con http://).
Un enlace puede ser a una sección de la misma página, marcada con un id. En ese caso, el href empezará con # y el nombre del id.
Para abrir un enlace en una ventana nueva, añadiremos el atributo target= ̋_blank ̋
Cuando querramos colocar un email o un telefono dentro de nuestra etiqueta de enlace <a> debemos tener en cuenta lo siguiente:
<a href="mailto:un@email.com">un@email.com</a>Para un email debemos agregar mailto: y nuestra dirección de correo. Entonces cuando el usuario haga click podra mandarnos un mail instantaneamente.
<a href="tel:+34666666666">666 666 666</a>Para llamar a un telefono agregamos tel: seguido de el numero completo con caracteristica de país y sin espacios.
<button>La etiqueta <button> en HTML se utiliza para crear un botón, que puede ser utilizado para enviar un formulario, realizar una acción o simplemente como un enlace a otra página o sección de la misma.
<button>Haz clic aquí</button>A los botones podemos agregarles atributos por ejemplo, el atributo type puede ser utilizado para especificar el tipo de botón (por ejemplo, submit para enviar un formulario). También podemos darle atributos que ejecuten funciones Javascript como onClick().
Pero por el momento los botones los vamos a utilizar para navegar entre enlaces.
La etiqueta <iframe> se utiliza para insertar un documento HTML dentro de otro documento HTML. Es decir, nos permite mostrar una página web dentro de otra.
<iframe src="https://www.google.com"></iframe>También podemos agregarle atributos width="" y heigth="" para controlar sus dimensiones.
Ejemplo:
<iframe src="https://www.google.com" width="400px" height="300px"></iframe>🔥
Hasta acá llegamos con La Guía Básica de HTML5 🎉
El que quiera corregir algún error de tipeo, agregar algo, o lo que sea puede hacerlo y con gusto aceptare el Request!
- 😀 Para ver mis trabajos visita mi portfolio
- 👔 LinkedIn: Jerónimo Ginaca
- 📨 Email: jeroginaca@gmail.com
- 📲 Whatsapp: click here