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

Palabras Claves

HTML

CSS

SITIOS WEB - WEB SITES

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.

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.

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.

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.

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.

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)

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

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.

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.

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.

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.

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.

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.

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

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.

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.