Páginas Web Estáticas y dinámica
Cómo crear un sitio web estático en html
¿Necesitas un sitio web para una pequeña empresa? ¿O crear un
portafolio para mostrar tu trabajo? En esta guía explicaremos cómo crear un
sitio web paso a paso. ¡Vamos a empezar!
Un
sitio web estático está organizado por una serie de archivos HTML, cada uno de
los cuales representa una página física de un sitio web. En los sitios
estáticos, cada página es un archivo HTML separado; por ejemplo, cuando visitas
la página de inicio, solo estás viendo el archivo de la página de inicio real.
A diferencia de una aplicación web, no implica interacción con
el usuario y su contenido, en lugar de ser generado dinámicamente por un
servidor web o construido por el lenguaje Javascript en el navegador, permanece
sin cambios, a menos que se cambie el código fuente.
¿Qué
significa?
Es
simple: incluso si dos páginas contienen una parte de contenido idéntico, como
un pie de página, habrá dos versiones separadas del mismo. Entonces, si deseas
actualizar el pie de página, debes hacerlo en cada página.
Los sitios web estáticos son bastante simples y todos los
sitios web se crearon de esta manera durante los primeros años del world wide
web.
¿Qué ventajas tienen?
Son
conocidos por ser ultrarrápidos y funcionan particularmente bien tanto para
sitios básicos de una página (piensa en sitios web de marketing
empresarial) como en sitios con
muchas páginas que tengan la misma
¿Cómo crear
un sitio web estático en HTML5?
El paso más importante es aprender los conceptos básicos de
HTML y comprender la estructura de un documento web.
Antes de empezar, instala tu editor (te recomendamos Visual
Studio Code, Atom o Notepad++): esto es importante porque los editores de texto
nos facilitan escribir el código y encontrar errores al instante.
¿Entonces, a qué esperas? ¡Abre tu editor, crea una carpeta, luego un archivo dentro de ella y asígnale el nombre "index.html"! Es importante que todos los expedientes, a partir de ahora, tengan esta redacción. Inserta el siguiente bloque:
Lo que se representa con las flechas “<>” se denomina etiqueta html. Siempre que abras una etiqueta (p. ej., <título>), es importante cerrarla (p. ej., </título>). Las etiquetas pueden contener otras etiquetas o texto dentro de ellas. Analicémoslos juntos:
•
<!doctype html>: es la primera línea que se debe
insertar dentro del documento y se utiliza para declarar el tipo de documento,
en este caso en HTML.
•
<html>: representa la raíz de un documento HTML.
El tag <html> es el contenedor de todos los demás elementos HTML (menos
el tag <!DOCTYPE>).
•
<title>: el tag <title> define el título
del documento. El título debe ser solo texto y se muestra en la barra del
navegador o en la pestaña de la página.
•
<head>: contiene metadatos y se coloca entre la etiqueta
<html> y la etiqueta <body>. Los metadatos se proporcionan en el
documento HTML, no se muestran y, por lo general, definen el título del
documento, el conjunto de caracteres, los estilos, las secuencias de comandos y
otra metainformación.
•
<body>: el tag <body> define el cuerpo del
documento y contiene todos los contenidos un documento HTML, como títulos,
párrafos, imágenes, hipervínculos, tablas, etc…
¡Genial!
Logramos crear una pequeña página web basada en dos líneas, ¡no es un mal
comienzo! En el ejemplo actual, hemos insertado dos etiquetas: <h1> (que
representa el encabezado (que va desde <h1> a <h6>) y la etiqueta
<p> (párrafo). En nuestra guía html puedes encontrar todas las etiquetas
deseadas, de acuerdo a nuestras necesidades, sin embargo, entre los más utilizados,
recordamos:
•
<a> para crear un hipervínculo (pasar de un
página web a otra);
•
<br> para pasar de párrafo;
•
<div> un tag contenedor donde puedes crear la
estructura deseada;
•
<img> para añadir imágenes;
•
<ul>, <ol> una lista desordenada y
ordenada, respectivamente, y que contiene etiquetas <li> basadas en la
cantidad de elementos en la lista; •
<span> para estilizar parte del texto.
Sabemos
que HTML define el esqueleto de un sitio web, pero ¿cuántas veces te has
preguntado "qué es css"? Bueno, el lenguaje CSS (Cascading Style
Sheets) se ocupa del estilo de las etiquetas (tamaño, color, espaciado, etc.).
De hecho, al agregar el atributo "estilo" en una etiqueta HTML, será
posible proporcionar información precisa sobre el estilo.
Volvamos al ejemplo anterior:
Vuelve a abrir tu archivo en el navegador: ¿qué ha cambiado?
El título es rojo, la fuente es más grande y tiene un fondo amarillo. El
párrafo, por otro lado, es 10 píxeles más bajo que antes: este es el poder de
CSS.
Vayamos
un paso más allá: en realidad, escribir CSS de esta manera no es beneficioso
para los motores de búsqueda y esto desalienta su posición cuando los usuarios
buscan el sitio web. La best practice nos informa que tenemos que insertar el
código CSS dentro de las hojas de estilo. ¿Qué significa esto?
No hay comentarios:
Publicar un comentario