Aprende a programar paginas Web en

HTML y CSS

1. Introducción.

En este curso aprenderemos a programar una página web sencilla, a la vez

que su funcionamiento y comportamiento.

Vamos a diferenciar lo primero de todo HTML de CSS:

¿Qué es HTML? HTML es el lenguaje que se utiliza para el

desarrollo de páginas de internet. Está compuesto por una serie

de etiquetas que el navegador interpreta y da forma en la

pantalla. Dispone de etiquetas para imágenes, hipervínculos que

nos permiten dirigirnos a otras páginas, saltos de línea, listas,

tablas, etc.

¿Qué es CSS? CSS es un lenguaje de hojas de estilo creado para

controlar el aspecto o presentación de los documentos

electrónicos definidos con HTML y XHTML. CSS es la mejor forma

de separar los contenidos y su presentación y es imprescindible

para crear páginas web complejas.

Una vez comprendido la diferencia entre HTML y CSS vamos a definir qué es

una página web:

“Una página web se define como un documento electrónico el

cual tiene información textual, visual y/o sonora que se encuentra

alojado en un servidor y puede ser accesible mediante el uso de

navegadores ya que están desarrolladas utilizando el lenguaje de

modelado HTML y CSS.”

Existen dos tipos de páginas web:

Estáticas: Páginas web dedicadas a informar, el visitante y

administrador Web no pueden interactuar con la página para

modificar su contenido. No se utilizan bases de datos ni se

requiere programación. Para desarrollar una página web

estática es suficiente utilizar código HTML. Recomendadas para

profesionales, productos, servicios que no requieren generar

nuevo contenido y no necesita meterse con la estructura del sitio

web. (Páginas web meramente informativas)

Dinámicas: Páginas web dedicadas a interactuar con el visitante

y/o administrador web, pudiéndose modificar el contenido de la

página. En este caso si se utilizan bases de datos y se requiere

programación web. El lenguaje utilizado puede ser alguno de los

siguientes: PHP, ASP, ASP.NET o Java. Son recomendables para

proyectos cuyas actividades requiere cambios frecuentes en sus

contenidos: precios, tablas, noticias, novedades, lanzamientos,

etc. (Páginas web interactivas como tiendas, etc.)

2. Funcionamiento de una página Web.

Nosotros (el cliente) hacemos una petición de página (buscar una página

web) mediante un navegador (Chrome, Mozilla, Firefox, Safari, …), éste llamará

a un servidor (¿porque? Porque las páginas web están alojadas en servidores.

Un servidor llamémoslo a un ordenador que no se apaga nunca). Por lo tanto,

esa página a la cual nosotros queremos acceder, el servidor la buscará en sus

subcarpetas mediante unos algoritmos, y cuando la encuentre nos devolverá

la información solicitada.

3. Estructura de una página Web (HTML).

La estructura de una página Web en HTML está compuesta por etiquetas.

Vamos a ver las etiquetas que principalmente componen una página Web:

Dentro de la etiqueta html irá todo el contenido que describa la página web.

Dentro de las etiquetas head proporciona información sobre el documento (Lo

que aparece en la pestaña del navegador. Logotipo, título de la página). Lo

más importante que vamos a programar es lo que va dentro de la etiqueta

body, ya que será el cuerpo o contenido de la página (describe todo lo visible

de la página). Toda etiqueta (a excepción de alguna) deberá tener su inicio y

fin de etiqueta (el fin de etiqueta se diferencia por llevar una contra barra ”/“).

Vamos a ver alguna otra etiqueta:

<b> Negrita </b> o <strong> Negrita </strong> : Sirve para poner en

negrita un texto.

<i> Cursiva </i>: Sirve para poner en cursiva un texto.

<u> Subrayado </u>: Sirve para subrayar un texto.

<br>: Salto de línea. No tiene fin de etiqueta.

Tenéis una página web donde os definen todas las etiquetas HTML :

http://www.w3schools.com/tag/

4. Hojas de estilos (CSS)

HTML sería la estructura que tiene que tener una página web, es decir, en la

parte de arriba un menú, en la derecha una imagen, en el centro el

contenido, … Por otra parte, tendremos los estilos u hojas de estilo que es lo

que le va a dar vida, color, movimiento a nuestra página web.

Podemos definir que todos los párrafos tengan que estar alineados al centro y

que tengan un color rojo. De esta manera cada vez que escribamos un

párrafo nos saldrá con ese formato definido.

De esta manera puedo definir que sólo ese párrafo se escriba de otro color, en

este caso azul.

De esta manera podremos indicar que ese párrafo aparte de tener las letras

de color azul, tendrá un fondo amarillo.

De esta manera podremos cambiar el tamaño de la letra.

Como veis siempre detrás de cada instrucción de estilo deberá de ir

acompañado de “;” para separar una instrucción de la otra.

Para el tema de los colores, si vamos a la página que hemos indicado antes, al

apartado de colores, nos indicara de qué manera podemos definir cualquier

color. https://www.w3schools.com/css/css_colors.asp

Como vemos los colores se pueden definir de 3 maneras: indicando el nombre

del color en inglés, mediante la definición de la gama RGB o mediante el valor

hexadecimal.

Nombre

RGB

Podremos definir el color que queramos mezclando estos 3 colores. Nos

generará el código RGB del color deseado.

HEXADECIMAL

Todas las etiquetas de estilo funcionan de una forma similar. Podéis echar un

vistazo a todas estas etiquetas:

Backgrounds: Para los fondos.

Borders: Para definir los bordes.

Margins: Para los márgenes.

Y muchas más:

5. Contenedores en HTML y clases en CSS.

En este apartado vamos a conocer la etiqueta div, es un contenedor para

definir bloques. Para darle formato (aplicar un diseño, un aspecto) a un

elemento de HTML como puede ser un párrafo se utilizan las clases (class),

que van definidas en las hojas de estilo.

Lo que hemos hecho es definir un contenedor (cabeza) en el que a su vez

dentro de él hemos definido otros dos contenedores (logo y slogan).

El contenedor cabeza correspondería al círculo rojo y los otros dos

contenedores (logo y slogan) corresponderían a los círculos azules.

Vamos a modificar un poco el código para verlo mejor.

Hemos definido aquí mismo el color del fondo uno contenedor será amarillo y

el otro azul.

La visualización será de esta forma. El contenedor cabeza no será visible ya

que los otros dos contenedores están por delante suyo.

Pero la definición del contenedor no se hace de esta manera, vamos a ver

cuál es la forma correcta. Dejaremos el código como estaba anteriormente.

Para darle ese formato a cada contenedor definido (cabeza, logo y slogan)

deberemos abrir nuestra hoja de estilo (CSS (es un simple archivo de texto,

pero que tiene la extensión .css)) y definirlos ahí:

Los contenedores se definen mediante un “.” Y después el nombre del

contenedor. Se abren corchetes y dentro de los corchetes definiremos el

formato de dicho contenedor.

En este caso el contenedor cabeza lo hemos definido para que tenga una

anchura de 100 pixeles y fondo con ese color granate que hemos visto antes

(lo hemos definido en hexadecimal, pero lo podríamos haber hecho con RGB

o el nombre del color como hemos visto anteriormente).

Vamos a modificarlo para verlo mejor:

Veis como cambia el contenedor de color.

Como vemos a continuación para la definición de un contenedor que está

dentro de otro se realiza de la siguiente manera:

Definiremos primero el contenedor principal,

después el contenedor secundario y después

abrimos corchetes para definir su formato.

Dentro del contenedor cabeza tendremos

otros dos contenedores: logo y slogan.

Por tanto, si vamos a usar una hoja de estilos para definir los diferentes

contenedores, deberemos modificar aquí los formatos y no en el archivo HTML.

Vamos a modificar el tamaño del texto/título del contenedor centro que está

dentro del contenedor principal, es decir, el texto “¿QUÉ ES HTML?”:

En este contenedor hemos dicho

que para todo título h1tenga

dicho formato.

El resultado sería el siguiente.

Solo queríamos cambiar de tamaño el primer título no los dos. ¿Por qué ha

cambiado los dos títulos si solo queríamos cambiar el primero? Vamos a verlo:

Nosotros en el documento HTML habíamos definido los títulos de la siguiente

manera:

Los dos son etiquetas h1 y anteriormente habíamos definido la estructura para

toda etiqueta h1 perteneciente al contenedor principal/centro. Si

modificamos su hoja de estilo se modificarán los dos títulos ya que tienen el

mismo estilo. Para modificar solo al primer contenedor (primer título)

deberemos hacer lo siguiente:

Dejamos el tamaño como estaba al principio.

Vamos a añadir la definición de un nuevo contenedor:

En dicho contenedor indicamos que todo contenedor “principal/centro” que

tenga etiqueta “h1” y se llame “grande” le vas a cambiar el tamaño y en vez

de tener 30px tendrá 80px.

Para que el cambio se haga solo en el primer título tendremos que hacer este

cambio en el documento HTML:

Definimos que ese título tiene una estructura del tipo contenedor

principal/centro/grande.

Y hasta aquí ya hemos explicado HTML, lo que son las etiquetas, cómo se

cambian los colores, las clases, …

Ejercicio

Para entender mejor el funcionamiento vamos a realizar un ejercicio que será

modificar los colores de cada contenedor, la fuente, etc. de una página web

ya creada.

6. Alojamiento de la web en un servidor.

En este último tema vamos a ver cómo podemos compartir nuestra página

web para que pueda ser visible desde cualquier parte del mundo.