UNIDAD: 3 – LA WEB
Subtema: 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
estructura general (piensa en blogs o sitios de noticias)
TAREA PARA LA CASA
Subir a su blogger la
información trabajada el día
de hoy.
Instalar Notepad++ en su
computadora.
Crear un documento en
Notepad++ con lo que
hemos trabajado el día de
hoy.
Video referente a la
instalación.
https://www.youtube.com/
¿mira?v=TRo0MzcSnhA
Instalador para Android
https://play.google.com/store/apps/es
colas?id=com.blogspot.logpedia.note2&
pcampaignid=compartir_web
¿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
Formato HTML.
• <html>: representa la raza 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…
Guarda, abre tu documento HTML en tu navegador y encontrarás un título
en negrita (“Hello, world!”) Y un párrafo ("Mi primera página web").
¡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?
En el mismo nivel, crea un archivo y asígnale el nombre "style.css" y volvamos
al ejemplo:
// Dentro del archivo style.css
Actualiza la página web. ¿Que ha cambiado? Nada, todo es igual que antes.
Pero, ¿qué pasó realmente?
Con la etiqueta <link> presente en el <head> y con la indicación del archivo
CSS (style.css) gracias al atributo "href", hemos creado un enlace entre el documento HTML y la hoja de estilo. Posteriormente, hemos movido nuestras
reglas .css dentro del nuevo documento.
ACTIVIDAD
0 comentarios:
Publicar un comentario