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 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.
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.
Top Related