Curso Diseño Web I - ¿Cómo funciona la Web?

Esta serie de entradas, tituladas Curso de Diseño Web, quieren ser un pequeño manual orientado a todo aquel que quiera iniciarse en el mundo del diseño Web partiendo de cero.

¿Cómo funciona Internet?

Internet se encuentra poblado por servidores y clientes. Por un lado los servidores almacenan los archivos (HTML, imágenes ...) que componen las páginas Web. Por otro lado los clientes, dispositivos como portátiles, teléfonos móviles, ordenadores de sobremesa, ejecutan unos programas llamados navegadores para acceder al contenido ofrecido por los servidores.

¿Qué hace un Servidor?

Un servidor es un ordenador, conectado las 24 horas del día a Internet, que acepta peticiones sobre ciertos archivos que almacena.

¿Qué hace un Navegador?

Un navegador es un programa que es capaz de interpretar lenguajes de programación relacionados con la Web como HTML, CSS o Javascript. Esta facultad le permite representar de un modo gráfico al usuario las páginas Web enviadas por el servidor.

Lo que uno escribe (el HTML) y lo que el navegador muestra

La siguiente imagen muestra la correspondencia entre un archivo HTML y la representación que un navegador muestra basandose en su contenido.

1. El elemento <title>Rock & ... </title> se muestra como título de la página en la parte superior del navegador. Este texto es también usado por los diferentes motores de búsqueda para nombrar nuestras páginas en sus listado de resultados.
2. El elemento <h1>Bienvenido a Rock& ... </h1> es una cabecera de primer nivel. Estamos habituados a utilizar cabeceras para destacar la predominancia de una porción de texto en otros programas como los procesadores de texto.
3. El elemento <img src="bebidas.jpg"/> sirve para posicionar imágenes en nuestras páginas Web.
4. El elemento <p>Este ... </p> designa una porción de texto como un párrafo.
5. Usamos el elemento <em>american bar</em> para indicar que una porción de texto contiene un cierto énfasis.
6. El elemento <h2>Dirección</h2> es una cabecera de segundo nivel. Podemos designar hasta 6 niveles distintos para nuestras cabeceras.
7. Al igual que el elemento D el uso de la etiqueta <p> indica que el texto rodeado actúa como un párrafo.

¿Qué es un elemento HTML?

Se conoce como elemento HTML al contenido (el texto) y las etiquetas de apertura y cierre. En el ejemplo de la cabecera de segundo nivel <h2>Dirección</h2>. <h2> sería la etiqueta de apertura, </h2> la etiqueta de cierre y Dirección el contenido. Se reconoce a las etiquetas de cierre por que aparecen después del contenido y llevan una barra invertida /.

HTML describe el contenido de nuestra página de un modo semántico. Es decir, definimos cabeceras, parrafos, listas etc. Para dotar de un color de fondo, cambiar el tamaño de letra o aplicar otro estilo usamos CSS. CSS es un lenguaje de programación que nos permite definir la representación de nuestros elementos HTML. A continuación se muestran varias lineas de código y una pequeña explicación de las mismas. No se preocupe si no las entiende ahora mismo.

body {
background-color: #d2b48c; ? Define el color de fondo en un tono canela.
margin-left: 20%; ? Define el margen izquierdo a un 20% del tamaño de la página.
border: 1px dotted gray; ? Define un borde alrededor de la etiqueta body que es punteado y de color gris.
padding: 10px 10px 10px 10px; ? Crea un indentado alrededor de la etiqueta body de la página.
font-family: san-serif; ? Define el tipo de letra del texto.
}

Resumen

• HTML y CSS son los lenguajes que usamos para crear páginas Web.
• Los servidores Web almacenan y sirven páginas Web que son creadas con HTML y CSS. Los navegadores recuperan las páginas y muestran su contenido basandose en HTML y CSS.
• HTML es una sigla de HyperText Markup Language y se usa para estructurar una página Web.
• CSS es una sigla de Cascading Sytel Sheets, y se usa para controlar la presentación de su HTML.
• Usando HTML marcamos el contenido con etiquetas para dar estructura. Las etiquetas de apertura, el contenido y las etiquetas de clausura se conocen como elementos. Un elemento esta compuesto de tres partes: etiqueta de apertura, contenido y etiqueta de cierre. Hay algunos elementos que son excepciones a esta regla, como <img>.
• Las etiquetas de apertura pueden tener atributos.
• Las etiquetas de cierre tienen un / después del símbolo menor que, delante del nombre de la etiqueta para distinguirlos de las etiquetas de cierre.
• Las páginas deben tener siempre un elemento <html> junto con un elemento <head> y un elemento <body>.
• Lo que se pone dentro del elemento <body> es lo que se ve en el navegador.
• La mayor parte del espacio en blanco (sangrías, retornos de carro, espacios) son ignorados por el navegador, sin embargo el uso de estos elementos puede hacer que tu código HTML sea más legible.
• Se puede añadir CSS a una página Web en HTML, poniendo las reglas CSS dentro del elemento <style>. El elemento style debe estar siempre dentro del elemento <head>
• Puede especificar la estética de los elementos de su código HTML usando CSS.

Este curso Web online está inspirado en el libro Head First HTML with CSS & XHTML. Compre dicho libro si quiere aprender HTML y CSS rapidamente.

Etiquetas: Curso Diseño Web, Internet, Web Design