HTML: estructura básica de una web

Las páginas web no son más que una serie de documentos que se estructuran de una forma en la que el navegador (Chrome, Firefox, Edge...) puedan leerlos y mostrar por pantalla una web.

En esta entrada me voy a centrar en la estructura de una web, que se establece en HTML en un fichero.

Una página web se puede crear con tantos ficheros como veamos necesarios, pero mínimo tiene que tener 1 con el HTML.

Estructura


Una página escrita en HTML5 tiene siempre esta estructura:

<!DOCTYPE html>
<html>

    <head>

        <title>Titulo de mi web</title>

    </head>

    <body>

        Contenido

    </body>

</html>

La etiqueta DOCTYPE es obligatoria para indicar que estamos utilizando la versión de HTML5 (última versión de HTML).

La etiqueta HEAD se utiliza para el título que aparece en la pestaña del navegador, que estilos se van a utilizar (rutas o código CSS) y si se va a utilizar lógica (funcionalidades que puede darnos JavaScript por ejemplo).

La etiqueta BODY se utiliza para escribir el contenido que se va a mostrar en la pantalla del navegador.

Ya para finalizar este documento, se cierra la etiqueta HTML, para indicar que todo eso va en el fichero HTML.

Las etiquetas se pueden escribir tanto en mayúscula como en minúscula, pero por convenio se escriben en minúscula, al igual que se puede escribir todo el código sin espaciado, pero al hacerlo facilitamos la lectura a futuras modificaciones de código por parte de ti o futuros desarrolladores.

Todas las etiquetas se abren y se cierran <etiqueta></etiqueta>

Formas en la visualización y organización de los datos

Se pueden organizar en bloque o en línea. 
En bloque estarían las etiquetas:
  • h1, h2, h3, h4, h5 y h6: estas etiquetas se utilizan para los títulos, donde h1 es el título de mayor pero y por lo tanto con un tamaño de fuente mayor y h6 es el de menor que nos permite HTML.
  • div: se utiliza para agrupar contenido, su funcionamiento es similar al de la etiqueta p, pero sin dejar la misma separación entre párrafos que tendría la etiqueta <p></p>
  • p: es un párrafo en HTML, cuando se termina de escribir el texto en él, el navegador detecta que estás haciendo un "intro" (salto de línea).
En línea estarían las etiquetas:
  • a: se utiliza para insertar un enlace.
  • strong: se utiliza para resaltar un texto (poner la negrita en un word por ejemplo).
  • i: se utiliza para poner en cursiva un texto.
Esto se ve mejor probando, así que os dejo por aquí el uso de estas etiquetas con el código (en esta web en la que os lo dejo podéis editar el código y ver el resultado sin necesidad de descargar).

See the Pen HTML Bloque vs Línea by Eva (@evapikachu) on CodePen.



Para programar en HTML no hace falta un programa específico, con un bloc que notas os puede valer, aunque siempre es mejor con editores como Visual Studio, Notepad++ y similares ya que se puede autocompletar las etiquetas y verlas con diferentes colores.

Comentarios

Publicar un comentario

Entradas populares de este blog

Minterms y Maxterms

Imagen
Minterm:  Producto lógico de todas las variables negadas o sin negar (producto canónico). Maxterm : Suma lógica de todas las variables negadas o sin negar (suma canónica). Tabla: a b c   Minterms   Maxterms 0 0 0   m 0 =a c ·b c ·c c   M 0 =a+b+c 0 0 1   m 1 =a c ·b c ·c   M 1 =a+b+c c 0 1 0   m 2 =a c ·b·c c   M 2 =a+b c +c 0 1 1   m 3 =a c ·b·c   M 3 =a+b c +c c 1 0 0   m 4 =a·b c ·c c   M 4 =a c +b+c 1 0 1   m 5 =a·b c ·c   M 5 =a c +b+c c 1 1 0   m 6 =a·b·c c   M 6 =a c +b c +c 1 1 1   m 7 =a·b·c   M 7 =a c +b c +c c Para pasar de miniterms a Maxterms hay que negar 2 veces la función. Los minterms se utilizan para los mapas de Karnaugh. Mapas de Karnaugh   Los mapas de Karnaugh sirven para simplificar funciones booleanas. Por ejemplo: vamos a simplificar: f(a,b,c,d)=a c b c c c d c +a c bc c d c +a c b c c c d+a c bc c d+abc c d c +abcd c Vamos a crear nuestra tabla de verdad con los datos que
Leer más

Sumador y restador con puertas lógicas

Imagen
Los circuitos están realizados con logic.ly  por si queréis probarlos, es una demo online que se puede abrir en el navegador de Internet de cualquier sistema operativo. Sumador Empecemos con el half-adder y despúes con el Full-adder. (La diferencia entre ellos es que en uno ya puedes sumar llevando) Half-adder Tabla de verdad S es resultado de la suma binaria, y C es el carry (la que te llevas) Circuito Full-adder Tabla de verdad Cin es la que te llevas, en el circuito hay que encencer Cin de forma manual para así poder verlo con más calma. Circuito Restadores Al igual que con la suma existe el half-subtractor y el full-subtractor. Half-Subtractor Tabla Circuito Full-subtractor Tabla Circuito Tanto al sumador como al restador los podemos hacer tan grandes como nosotros consideremos competente, estos ejemplos están realizados con la suma/resta de un bit, pero se puede hacer con los bits que nosotros queramos, tan solo tendríamos qu
Leer más

Teorema de expansión de Shannon

Álgebra de Boole x y z f(x,y,z) 0 0 0 f(0,0,0) 0 0 1 f(0,0,1) 0 1 0 f(0,1,0) 0 1 1 f(0,1,1) 1 0 0 f(1,0,0) 1 0 1 f(1,0,1) 1 1 0 f(1,1,0) 1 1 1 f(1,1,1) Teorema de expansión de Shannon f(x 1 ,x 2 ,...,x n ) x i € {0,1} f: {0,1} n ->{0,1}                                               _ f(x 1 ,x 2 ,...,x n ) = x 1 ·f(1,x 2 ,...x n )+ x 1 · f(0,x 1 ,...,x n ) Por ejemplo, el teorema de expansión de Shannon aplicado a f(x,y,z) sería: f(x,y,z)=xf(1,y,z)+x*f(0,y,z)=xyf(1,1,z) + xy*f(1,0,z) + x*yf(0,1,z) + x*y*f(0,0,z)= =xyzf(1,1,1) + xyz*f(1,1,0) + xy*zf(1,0,1) + xy*z*f(1,0,0) + x*yzf(0,1,1) + x*yz*f(0,1,0) + x*y*zf(0,0,1) + x*y*z*f(0,0,0)
Leer más