NovaMonoFix
Errores PHP
X
Usuario
Password
0 FPS

Creación de páginas web desde cero (2 Empezando)

07 de Noviembre del 2011 por Josep Antoni Bover, 0 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 (2 Empezando)

La intención de este tutorial es ir empezando a diseñar vuestra primera página, y ver la estructuración mínima necesaria además de algunas etiquetas obligatorias para todo documento HTML.

Antes de nada también necesitareis elegir una aplicación para empezar a editar los documentos HTML, por lo que os recomendare alguna para windows. Aunque os recomiende aplicaciones para windows esto no quiere decir que no se pueda seguir este tutorial desde linux, pero en linux tenéis la ventaja de que cualquier editor de texto os vale perfectamente para el caso.

Como ya iréis viendo más adelante las páginas webs deben escribirse utilizando una codificación de caracteres. Que es una codificación de caracteres? pues por decirlo de una forma que se entienda, es una lista donde aparecen todos los caracteres que se pueden mostrar. Por ejemplo para escribir letras árabes, rusas, chinas, japonesas, etc.. se necesita una codificación específica ya que estos idiomas tienen sus propios caracteres que en muchos casos no tienen nada que ver con los idiomas que vienen del latín.

En nuestro caso necesitamos utilizar una codificación que nos permita mostrar caracteres como la eñe, además de acentos y otros caracteres típicos de nuestra región. La codificación más extendida para ello en páginas web es la codificación UTF-8, pero ojo que no es la única que podríais utilizar. Windows por ejemplo para la gran mayoría de sus programas utiliza la codificación Windows-1252, y esta configuración es algo más pesada porque siempre requiere de 2 bytes para mostrar un carácter, por lo que no la recomiendo ya que nos interesa que la pagina web sea lo más ligera posible, UTF-8 utiliza normalmente un byte por carácter.

En linux la gran mayoría de aplicaciones trabajan bajo la codificación UTF-8 por ello ya os he comentado antes que nos vale prácticamente cualquier editor. En cambio en windows si decidimos por ejemplo utilizar el bloc de notas vamos a tener muchos problemas con los acentos, ya que en el bloc de notas los escribiremos y los veremos bien, pero luego en los navegadores veremos caracteres raros.

Yo personalmente utilizo Dreamweaver para escribir mis paginas, pero es una aplicación de pago, además de que puede resultar algo complicada y tiene varias funciones que si no se des-habilitan pueden acabar engañándonos a la hora de ver el resultado final. Como imagino que no tenéis intención de adquirir dicha aplicación, por ejemplo yo os recomendaría Notepad++ que es un editor de texto libre que además nos resalta partes de la sintaxis, y nos permite tener varios documentos abiertos a la vez.

Una vez tenemos una aplicación adecuada para empezar a crear páginas web ya podemos introducirnos en el mundo de las etiquetas HTML.

Empecemos por las etiquetas mas básicas que toda web debe tener : "!DOCTYPE HTML", "html", "head", "title", "meta", "body" y "p".

Bien una vez conocemos estas etiquetas básicas ya podéis crear vuestro primer documento HTML y probar lo que habéis aprendido. Abrid vuestro editor de texto e introducid lo siguiente :

Documento HTML
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE HTML> <!-- Documento HTML 5 -->

<html>          <!-- Inicio del documento HTML -->

    <head>      <!-- Inicio del head -->

        <title>Mi primer documento HTML</title>

        <meta charset="UTF-8">

    </head>     <!-- Final del head -->

    <body>      <!-- Inicio del cuerpo para el documento HTML -->

        <p>Hola mundo!!</p>

        <p>Este es mi primer documento HTML.</p>

    </body>     <!-- Final del cuerpo para el documento HTML -->

</html>         <!-- Final del documento HTML -->

Si estáis utilizando Notepad++ a la hora de guardar el documento debéis especificar que se trata de un documento del tipo "Hyper Text Markup Language file". Una vez guardado para ver el resultado id al explorador de windows, buscad el documento, haced clic en el con el botón derecho de mouse y seleccionad la opción "Abrir con". Allí debería apareceros vuestro navegador por defecto, haced clic en él y podréis observar los resultados.

Para los que estéis utilizando otro editor de texto aseguraros que a la hora de guardar el documento, este tiene la extensión "html".

NOTA : Para seguir estos tutoriales correctamente necesitáis un navegador actual, no vale internet explorer 8 o inferior. Personalmente os recomiendo Google Chrome, Firefox, Opera o Safari, y en última instancia Internet Explorer 9, pero siempre tiene que ser la última versión del navegador.

Y con esto terminamos la segunda parte del tutorial, si lo deseáis podéis ver el ejemplo online o descargar el ejemplo para poder editarlo en vuestro ordenador.

Ver Ejemplo Descargar Ejemplo

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