Su primera página web

Creación de su primera página web

Y ahora ha llegado el momento de saltar en el código HTML y crear la página web de primera!

  1. Abra su programación o editor de texto y crear una nueva página.
  2. Si su editor pone un código preestablecido en el que acaba de borrar lo que vamos a usar nuestra.
  3. Copia el código siguiente en su documento y guárdelo en algún lugar que pueda recordar (si instalado WAMP en el tutorial anterior puede guardar el archivo en el directorio www de raíz, ya sea como index.html o index.php, sólo asegúrate de que es el único índice de archivos ahí por lo que se mostrará cuando se escriba localhost en el navegador).

XHTML 1.0 Strict plantilla

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>My first web page!</title>
  </head>
  <body>
    <p>Hello there ...</p>
  </body>
</html>

Viendo su página web

Nuestro código HTML no servirá de mucho por sí misma y es casi sólo un archivo de texto. Para ver la página web que describe que vamos a tener que abrirlo en un navegador web.

  1. Inicie su explorador Web y vaya a Archivo> Abrir Archivo y seleccione el archivo HTML que acaba de crear o localhost en la barra del navegador si usted tiene WAMP corriendo y colocado su archivo en el directorio raíz www.

Ahora debe ver una página similar a esta:

Su primera página webSu primera página web

El análisis de su página web

En primer lugar permítame decirle que el código que te di anteriormente es la super correcto como se pone y sigue la W3C XHTML 1.0 Especificaciones de la carta. Usted puede utilizar con seguridad como XHTML 1.0 estricto modelo para todas sus páginas web futuro.

Doctype

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Esta primera línea no es una etiqueta HTML real, sin embargo, se requiere en cada documento HTML. Esta doctype llamada le dice al navegador qué tipo de archivo es tratando. En nuestro caso se trata de un archivo de 1,0 XHTML estricto. Estos doctypes están grabados en piedra, y siempre se puede mirar así que por favor, ahórrese la tortura de este aprendizaje de memoria.

elemento HTML

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  ...
</html>

Aquí es donde comienza nuestra actual documento HTML. El <html>...</html> elemento no es tan interesante por sí mismo. Simplemente marca el comienzo y el final de todo el código HTML nuestros. El xmlns atributo es necesario para los documentos XHTML, los otros dos son opcionales, pero es buena práctica para incluirlos.

elemento de la cabeza

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>My first web page!</title>
</head>

Luego sigue el <head> de nuestro documento HTML. A excepción de la <title> elemento que aparece en la ventana del navegador, ninguna de la información de la cabeza se muestra en la página. El director general, lleva la información como el lenguaje, la codificación de caracteres, la información de autor, descripción de la página y así sucesivamente. El <meta> etiqueta en nuestro código es opcional, pero se debe incluir en cualquier caso como una copia de seguridad en caso de que el servidor no está proporcionando esta información o si está viendo la página sin conexión.

elemento del cuerpo

<body>
  <p>Hello there ...</p>
</body>

Aquí es donde las cosas empiezan a ponerse interesante. El <body> elemento tiene todo el contenido que se mostrará como una página web. En este caso tenemos un elemento de párrafo <p> con el texto Hola ... En los capítulos siguientes usted conocer más de estas etiquetas HTML que puede utilizar para crear tu página web.

La práctica hace al maestro

La mejor manera de aprender a crear un sitio web es el "hágalo usted mismo enfoque. Le sugiero que pruebe todos los ejemplos tutorial en su propia página y jugar con el código para obtener una mejor comprensión de cómo funcionan las cosas.