1. Crear sitios web con HTML 5 y CSS 1
APRENDE A CREAR SITIOS WEB CON HTML 5 Y CSS
García Ramírez Christian Agustín
Sánchez Crisóstomo Mónica
Febrero, 2014

2. Palabras Claves
HTML
CSS
SITIOS WEB - WEB SITES

3. Resumen
El objetivo de este artículo es conducirte por una disciplina realmente interesante y te
daremos todas las herramientas que necesitas para comenzar. Después de introducirte
en los tópicos básicos serás capaz de crear tu propia página web con los sencillos
pasos aquí planteados, y con un poco de práctica perfeccionaras tú técnica.
Ayudaremos a los estudiantes a introducirse en el ambiente del diseño web, las
principales cosas que conocerán son los conceptos básicos de HTML y CSS además,
aprenderán a utilizar HTML el cual es un pilar básico de la web y el cual aporta
estructura a esta, al igual que contenido y conexión entre las páginas y CSS el cual es
el lenguaje encargado para describir cómo es que debe de presentarse la estructura del
HTML, en otras palabras, para dar forma y estilo a tu página web. También te
explicaremos algunas estructuras de columnas, añadir imágenes de fondo así como el
formateo de las mismas, a adaptar enlaces de otros sitios web al diseño de tu página y
por supuesto a definir los estilos de texto. También sabrás como crear las estructuras
web más habituales, emplear las etiquetas y propiedades más populares para poder
personalizar tu sitio web.

4. Introducción
La creación de la primera página web, añadiendo una interfaz gráfica, se remonta a
1991. En sus primeros momentos, el diseño web estaba muy condicionado
tecnológicamente, su apariencia se reducía a unas simples líneas negras sobre un
fondo blanco. Afortunadamente, hoy en día la tecnología y las técnicas de construcción
de por tales han alcanzado grandes niveles de desarrollo en creatividad e imaginación;
dejando atrás estructuras desfasadas tales como cuadros y GIFs animados, las nuevas
metodologías son mucho más sofisticadas, y continúan en constante crecimiento y
desarrollo. El progreso de las páginas web ha ido siempre de la mano de la tecnología.
En la actualidad, en el mundo de la red existen infinidad de páginas web, las cuales
fueron o son creadas por personas con conocimientos en el diseño de las mismas,
pero: ¿Qué ocurre con el resto de las personas que no tienen estas habilidades?; ellos
pueden privarse de construir su propio sitio web. Es por esa razón que nos dimos en la
tarea de crear este artículo donde les explicaremos como realizar y darle un buen estilo
a una página web.
Uno de los principales objetivos por el cual se lleva a cabo el presente trabajo, es
ampliar el conocimiento del público en general en el desarrollo de páginas web.

5. Método y Materiales
Lo primero que se debe de saber antes de crear una página web:
El alojamiento web (en inglés web hosting) es el servicio que se provee a los usuarios
de Internet para poder almacenar información, imágenes, vídeo, o cualquier contenido
accesible vía Web. Los Web Host son compañías que proporcionan espacio de un
servidor a sus clientes. (Hostinger, 2014)
Estos Servidores, son computadoras como las que hay en casa, solo que más grandes,
más poderosas y con la capacidad de brindar al usuario una dirección propia en
Internet. En estos servidores se encuentra guardada toda la información de sus cuentas
de correo electrónico, redes sociales, blogs, aplicaciones y todo lo que se encuentra en
la red de redes. 1
Con este servicio los negocios pueden obtener:
 Espacio en internet para promocionar su sitio web
 Dirección propia con el nombre de la empresa
 Correos totalmente personalizados con su nombre y nombre de la empresa.
 Transferencia de archivos para intranets u oficinas virtuales
 Instalación de aplicaciones personales como blogs, galerías, carritos de compra etc.
1.
Para mayor información sobre el tema te sugerimos visitar el siguiente link
(http://www.hostinger.es/) donde encontraras todos los servicios que ofrecen e instrucciones
de cómo instalar el hosting.

6. Construir una estructura básica HTML 5
HTML5 provee básicamente tres características principales: Estructura, estilo,
funcionalidad. Es considerado el producto de la combinación de HTML, CSS y
Javascript, estas tecnologías son altamente dependientes y actúan como una sola
unidad organizada bajo la especificación de HTML5.(GAUCHAT, 2012)
HTML podría parecer confuso, pero la cantidad de código que necesitas memorizar es
relativamente pequeña. HTML 5 ha añadido muchos elementos nuevos que ayudan al
navegador a interpretar la estructura de la página fácilmente.
El HTML básico
En primer lugar, el doctype le indica al navegador el tipo de contenido.2
Crear el head
Lo siguiente seria el <head>. En este debes de colocar todos los archivos que quieras
incluir, como las hojas de estilo css.
Añadir el body
2. El atributo lang es la etiqueta de apertura <html> es el único atributo que necesitamos especificar en
HTML5. Este atributo define el idioma humano del contenido del documento que estamos creando, en este
caso es es por español.

7. Añadir el body
En el <body> incluye el contenido de la página. Este es el lugar en donde debes de
añadir el encabezado, el contenido principal, la barra lateral y un pie de página.
Añadir <Meta>
La etiqueta <meta> especifica como el texto será presentado en pantalla, también
podemos agregar otras etiquetas <metas> como description o keywords. 3
Añadir titulo
La etiqueta <title> es utilizado para poner el titulo del documento que estamos creando,
normalmente este texto es mostrado en la barra superior de la ventana del navegador.
3
. Hay varios tipos de etiqueta <meta> que pueden ser incluidas para declarar información general sobre el
documento, pero esta información no es mostrada en la ventana del navegador, es solo importante para
motores de búsqueda y dispositivos que necesitan hacer una vista previa del documento.

8. Añadir el header
El <header>es uno de los nuevos elementos incorporado al HTML5, se suele usar para
alojar la imagen principal, un titulo y la navegación. Puedes tener varios en una página.
Añadir <nav>
Esta etiqueta esta diseñada para colocar botoneras de navegación principal.Puedes
colocar cualquier etiqueta dentro, aunque lo recomendado es usar listas <ul>.
Añadir <section>
Se utilizan para encerrar el código correspondiente a una sección genérica dentro de un
documento o aplicación. Normalmente, un bloque de texto al que perfectamente le
podríamos colocar un título o encabezado. Además, todo el contenido que engloba ha
de guardar cierta relación entre sí.(VEGA & VAN DER, 2011)

9. Todo sobre los DIV.
Una pagina en HTML se crea con una serie de etiquetas que le indican al navegador
que mostrar y donde. El elemento de estructura principal de una pagina es la etiqueta
div, abreviatura de ‘divisor’. Si miramos un periódico, veremos que el texto se agrupa en
columnas, y que las imágenes con los pies también se encuentran juntas con un
margen alrededor.
El div basico
Un div comienza con solo un poco de código: <div>. A partir de este sencillo elemento,
puedes insertar todo el contenido que quieras dentro de u div.
Añade un ID
Un div puede tener un identificador único para reconocerla por css o por cualquier
JavaScript que hagas. Para aplicar un ID usa: <div id=”IdDelDiv”></div><div
id=”IdDelDiv”></div>.
Incluye una clase
Las clases so similares a los IDs, pero puedes usar la misma para diferentes
elementos, asi es mas fácil dar estilo a varios a la vez. Para aplicar una clase a un div,
se usa:
<div class=”ClaseDelDiv”></div>.

10. Añadir Aside
Cualquier contenido que no esté relacionado con el objetivo primario de la página va en
un aside. En un blog, obviamente el aside es la barra lateral de información. En el home
de un periódico, puede ser el área de indicadores económicos.
Añadir footer
El <footer> normalmente contiene enlaces a areas comunes del sitio como contacto,
información de copyright o dirección.4
4
footer representa el final del cuerpo de nuestro
documento y normalmente es utilizada para
compartir información general sobre el autor o la
organización detrás del proyecto.

11. CSS
Hojas de Estilo en Cascada (Cascading Style Sheets), es un mecanismo simple que
describe cómo se va a mostrar un documento en la pantalla, o cómo se va a imprimir, o
incluso cómo va a ser pronunciada la información presente en ese documento a través
de un dispositivo de lectura. Esta forma de descripción de estilos ofrece a los
desarrolladores el control total sobre estilo y formato de sus documentos.
CSS se utiliza para dar estilo a documentos HTML y XML, separando el contenido de la
presentación. Los Estilos definen la forma de mostrar los elementos HTML y XML. CSS
permite a los desarrolladores Web controlar el estilo y el formato de múltiples páginas
Web al mismo tiempo. Cualquier cambio en el estilo marcado para un elemento en la
CSS afectará a todas las páginas vinculadas a esa CSS en las que aparezca ese
elemento.(NAVAJAS, 2010)
Estilos en línea
Una de las técnicas mas simples para incorporar estilos CSS a un documento HTML es
la de asignar los estilos dentro de las etiquetas por medio del atributo style.5
5 Modificando el atributo style con el valor Font-size: 20px, Este estilo cambia el tamaño por defecto
del texto a un nuevo tamaño de 20 pixeles.

12. Estilos embebidos
Una mejor alternativa es insertar los estilos en la cabecera del documento y luego usar
referencias para efectuar los elementos HTML correspondientes:
Fija los márgenes
Ya has especificado el ancho, pero no la posición. Con el comando margin-left puedes
fijar el número de pixeles desde la izquierda hasta el contenido. Una alternativa es fijar
ambos lados en auto para
Añade bordes
El diseño de tu página puede tener un mejor aspecto con bordes, y esto determina uno
con dos pixeles de ancho. El color del border es verde oscuro (006600) y el estilo es
sólido. Otras opciones de borde son: puntos, guiones simples o dobles y crestas.

13. Añade una imagen de fondo.
Cuantas menos imágenes tenga tú página más rápido cargara, pero un color plano de
fondo y mucho texto puede desanimar a tus usuarios. Usar imágenes clave puede
mejorar tu sitio, con la ventaja de que la misma imagen se usara en todas las páginas
de tu sitio. El navegador solo se la bajara una vez y la guardara en cache para usarla
en las siguientes páginas. El resultado una página increíble sin perder tiempo en
grandes descargas.
Elige un color
El fondo más sencillo es un color plano. Se consigue agregando un color a la propiedad
background-color en la etiqueta body. Usa palabras como red, yellow, blue, green o un
valor #RRGGBB.

14. Usa una foto
Es sencillo usar una foto como imagen de fondo, solamente tienes que añadir una línea
CSS que la enlace: background-image: url(‘fondo01.jpg’), cambia el nombre por el que
tenga tu archivo.
Insertar <link>
la etiqueta <link> y cómo utilizarla para insertar archivos con estilos CSS en
nuestros documentos. Utilizando la línea <link rel=”stylesheet” href=”misestilos.css”>
le decimos al navegador que cargue el archivo misestilos.css porque contiene todos
los estilos necesitados para presentar el documento en pantalla.
Esta práctica fue ampliamente adoptada por diseñadores que ya están trabajando
con HTML5. La etiqueta <link> referenciando el archivo CSS será insertada en cada
uno de los documentos que requieren de esos estilos.

15. Nuevos selectores
Hay algunos selectores más que fueron agregados o que ahora son considerados parte
de CSS3 y pueden ser útiles para nuestros diseños. Estos selectores usan los símbolos
>, + y – para especificar la relación entre elementos.
Incorporando Box-sizing
Existe una propiedad adicional incorporada en CSS relacionada con la estructura y el
modelo de caja tradicional. La propiedad Box-sizing nos permite cambiar como el
espacio total ocupado por un elemento en pantalla será calculado forzando a los
navegadores a incluir en el ancho original los valores de las propiedadespadding y
border.
Cada vez que el área total ocupada por un elemento es calculada, el navegador obtiene
el valor final por medio de la siguiente formula: tamaño + márgenes + márgenes
internos + bordes.

16. Incorporar Border-radius
Por muchos años diseñadores han sufrido intentando logar el efecto de esquinas
redondeadas en las cajas de sus páginas web. El proceso era casi siempre frustrante y
difícil. Por esta razón se incorporó esta propiedad al CSS

17. Resultado
¿Qué es lo que resulta de utilizar CSS?
El resultado de utilizar o insertar CSS en una página con HTML, es una página con mucho estilo ya que
como se sabe CSS se utiliza para darle estructura o una visión más diferente y atractiva a utilizar puro
HTML.
Con CSS el usuario o el administrador del sitio web, puede crear estilos de vistas de la página
dependiendo el giro de la misma, insertar mejoras y efectos visuales, que llamen la atención de los
visitantes sin abusar ya que estos efectos podrían volver nuestra web más lenta.
Discusión
¿Por qué utilizar HTML5 y CSS?
Como se sabe existen muchos lenguajes de marcado de hipertexto, pero no todos poseen una sencillez
que hace al HTML único.
Utilizar HTML5 es ir evolucionando con los requisitos que cada día nos pide la web y los usuarios, como
ya se mencionó antes la nueva versión del HTML incorpora nuevos elementos que hacen más sencilla la
forma de plasmar la información en el sitio web.
Ahora porque utilizar un lenguaje de marcado y uno de representación al mismo tiempo, sencillo la
implementación de estos hace que se puedan crear paginas impactantes dependiendo de la combinación
del conocimiento sobre ellos y la imaginación que tenga el desarrollador.

18. Referencias
GAUCHAT, J. D. (2012). El gran libro de HTML5,CSS3 Y Javascript. Barcelona: Marcombo S.A.
Hostinger, G. (2014). http://www.hostinger.es/.
LUBBERS,, P., & ALBERS, B. (2008). Pro HTML5 Programming. Apress.
NAVAJAS, O. A. (2010). Guia completa de CSS. Mexico: CC-BY-NC.
VEGA, J. F., & VAN DER, H. C. (2011). El presente de la web, HTML5, Css3 y JavaScript. España: CL Cristalas
S.A.