NovaMonoFix
Errores PHP
X
Usuario
Password
0 FPS

Creación de páginas web desde cero (1 Introducción)

06 de Noviembre del 2011 por Josep Antoni Bover, 7 visitas, 0 comentarios, 0 votos
Categorías : HTML.
La web está en segundo plano, animación en pausa.
Cargando animación...
Creación de páginas web desde cero (1 Introducción)

Hoy empezaremos con un nuevo tutorial para aquellos interesados en aprender a crear páginas web y que prácticamente no tienen conocimientos sobre el tema.

La idea es mostrar en la medida de lo posible todos los conceptos básicos para realizar una página web utilizando HTML5, CSS3 y en última instancia también veremos lo más básico de JavaScript para ir abriendo boca.

Como algunos sabréis HTML5 es la última versión del lenguaje destinado a maquetar páginas web.

El CSS3 aunque sea algo complicado de entender al principio, es una forma de crear estilos que podremos re-utilizar en nuestros documentos HTML, ya sea para definir el esquema de colores, las tipografías/fuentes que queremos utilizar, efectos de resaltado, animaciones simples, etc...

Y el JavaScript es un lenguaje de programación utilizado para realizar ciertas tareas de una forma mucho más versátil, pero también algo más complicada.

En primer lugar HTML viene del lenguaje XML, y este lenguaje se utiliza para encapsular estructuras de datos. La teoría es que existen tres tipos importantes de datos : Etiquetas, Atributos y Datos.

Antes de empezar a ver etiquetas y demás, quiero remarcar que es muy importante a la hora de escribir código que lo hagamos de una forma limpia y ordenada. Como hacemos esto? en primer lugar tenéis que acostumbraros a tabular bien todas las etiquetas, y en segundo lugar no dudéis en utilizar comentarios para apuntar aquellos puntos que puedan quedar poco claros. Veamos mejor un tercer ejemplo :

Tabulaciones y comentarios
1
2
3
4
5
6
<body> <!-- Inicio del cuerpo -->
<article> <!-- Principio del artículo -->
<p>Texto del artículo</p>
<a href='www.miurl.com' alt='Enlace'>Enlace a otro artículo</a>
</article> <!-- Final del artículo -->
</body> <!-- Final del cuerpo -->

Como podéis ver, la etiqueta "body" empieza a la izquierda sin ningún espacio ya que es la primera etiqueta (primer nivel). Luego añadimos otra etiqueta "article" dentro de la etiqueta "body", por lo que utilizamos el tabulador una vez para que se note que está dentro (segundo nivel). Más tarde añadimos las etiquetas "p" y "a" dentro de la etiqueta "article" por lo que estas ya las tabulamos 2 veces ya que están en el tercer nivel.

La idea es que siempre quede muy claro cuando estamos dentro de una etiqueta de primer nivel, segundo nivel, etc...

También fijaros en los textos que salen en gris, estos son comentarios, y para escribirlos siempre tienen que empezar por <!--, y terminar por -->. En ellos podemos escribir lo que queramos para que nos ayude a orientarnos mejor dentro del código.

Y con esto terminamos la introducción del primer tutorial! Espero que no os haya resultado muy pesado :).

Podéis seguir con el siguiente tutorial HTML5 : Creación de páginas web desde cero (2 Empezando).