Todo lo que tienes que saber de html
Introduccion
Html es un tipo de archivo para la web, este coprende la estructura base de toda pagina web.
El html se compone por grupos de datos llamados etiquetas que se representan porque estan entre un "<" y ">".
Cada etiqueta cumple su propia funcion, las mas usadas son los divisores los parrafos las listas y las imagenes. Existen muchas mas y dependera de cada proyecto o cada pagina cuales vas a utilizar.
<!-- Divisores -->
<div> </div>
<!-- Parrafos -->
<p> </p>
<!-- Listas e items -->
<ol><li></li></ol><ul><li></li></ul>
<!-- img -->
<img>
La mayoria de etiquestas deben cerrarse de la siguiente manera:
</ + nombre de la etiqueta + >
Ejemplo:
<!-- Ejemplo de cierre -->
<div> </div>
Atributos
Las etiquetas aparete de agrupar contenido, tienen ciertas caracteristicas que modifican su funcionamiento o su estetica. a estos se les conoce como atributos
Para colocar un atributo a una etiqueta se debe posicionar Despues del nombre, Dar un espacio y escribir el nombre del atributo junto a un "=" y una apertura de comillas ""
<!-- Ejemplo de atributo -->
<div class=""> </div>
La declaracion de atributos solo tiene que ser en la etiqueta de cierre (la que no tiene la /) y cada atributo tiene que estar sepadado por espacios
<!-- Ejemplo de multiples atributos -->
<div class="" style="" id=""></div>
Uno de estos atributos que mas se usan son el "class" y el "id", que si bien no añaden una funcionalidad, son utlilizados para idenfiticar esa etique en un grupo o de manera unica.
Atributo class
El Atributo class nos permite agrupar nuestras etiqueta en un conjunto aparte, esto se usa frecuentemente para darle estilos y transformaciones.
Para aplicar una class se tiene que declarar el atributo y en las comillas el nobre de la class a la que desee que pertenesca la etiqueta.
<!-- Ejemplo de class -->
<div class=" class "></div>
El atributo soporta multiples classes para eso, dentro de las comillas se tienen que colocar separadas por espacios
<!-- Ejemplo de class -->
<div class=" class-1 class-2 "></div>
Es importante destacar que los nobres de las clases no pueden contener espacios, porque estos serian interpretados como dos clases distintas para solucionarlo puedes usar un guionmedio "-"
<!-- Ejemplo Eroneo -->
<div class=" class 1"></div>
<!-- Ejemplo Correcto -->
<div class=" class-1"></div>
<div class=" class1"></div>
Atributto id
El atributo id es parecido al class, solo que este debe ser unico y sirve para identificar de manera exacta a una etiqueta, esto es muy util al momento de añadir interactividad e nuestra pagina web.
<!-- Ejemplo id -->
<div id="identificador"></div>
Es recomendable tener un solo identificador por etiqueta y que cada identificador sea unico. Si necesitas englobarlos en un grupo a varias etiquetas usa class
Insertar imagenes
Cuando vemos cualquier pagina web, es dificil no notar alguna imagen en el escenario, eso es porque es una parte muy escencial de la web.
Nosotros podemos insertar nuestras propias imagenes usando la etiqueta img, de la siguiente manera.
Sintaxis.
<!--Declaracion de una imagen -->
<img src="url-de-la-imagen">
adicionalmente a esto podemos añadirle un atributo "alt" que permitirá colocar un texto a la imagen si esta no ha cargado o no se encontro.
<!--Uso de img con alt -->
<img src="foto.png" alt="perfil">
Estructura Basica de un documento html
Ya sabiendo algunas de las etiquetas escenciales, ahora vamos a ver la estructura base de un documento 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">
<title>Document</title>
</head>
<body>
</body>
</html>
Mucho Texto. . .
Ahora vamos a despedazarlo en parte y ver que es cada una.
<!DOCTYPE html>
Indica el tipo del documento, ya que la sintaxis o forma de escribir que usar html, tambien la usa otro tipo de archivos llamados xml, y para hacer la distincion se utiliza esta etiqueta.
<html lang="es"> </html>
Indica el cuerpo del documento y el atributo lang indica al navegador en que idima esta la pagina, y "es" es el codigo para español.
<head> </head>
Define la metadata (información que no se ve) de la pagina, tales como la configuracion de caracteres que se va a usar, los estilos que van a estar enlazados o el titulo de la pagina.
<meta charset="UTF-8">
la etiqueta meta permita configurar los metadatos de la pagina web, el atributto charset define la configuracion de caracteres para el alfabeto latino.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
la etiqueta meta junto con el conjunto de atributos http-equiv="X-UA-Compatible" content="IE=edge" define la compatibilidad para Internet Explorer, esto se debe a que algunas versiones, ya no soportan las nuevas formas de css, js y contenido html. Actualmente no es necesaria esta etiqueta, asique puedes saltartela.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
esta linea define la escala de la pagina, para evitar que al bajar la resolucion la pagina se vea mas pequeña.
<title>Document</title>
- la etiqueta title define que nombre tendra nuesta pagina en el futuro.