Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Mi primera web

Aprender a hacer una sencilla web paso a paso partiendo de cero.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 77

Visitas el mes pasado: 70

logo

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




Mi primera página (II)

1.2 El Lenguaje HTML

Paso 2

logo miweb

En que consiste

El archivo que hemos hecho en la página anterior es un primer paso para poder hacer una página web. Ahí hemos escrito un texto en el block de notas y lo hemos convertido en un archivo del tipo ".html". Sin embargo las páginas web no se componen sólo de texto plano. Es por eso por lo que debemos usar un tipo especial de lenguaje en el que indicar los demás aspectos de la página.

Este lenguaje se llama HTML (HyperText Markup Language o "Lenguaje de marcas de hipertexto). En este lenguaje además del texto debemos indicar el resto de elementos que componen la página (de ahi lo de Hyper). Debemos indicar si el texto es un título, un párrafo, una lista, si incluimos un enlace, una imagen, etc.

El HTML es el lenguaje en el que escribiremos las páginas web para que sean vistas en el navegador. Este consiste en dos partes o formas de escribirlo:

Lo de incluir el texto es fácil, ya lo hicimos en la primera página de prueba, sólo hay que escribir lo que queremos que se vea.

Veamos a continuación qué son las etiquetas.

Las etiquetas o tags

El lenguaje HTML es un lenguaje de etiquetas o "tags". Todo lo que hay en la página (texto, imagen, enlaces, divisiones de la página, etc.) tiene que ir marcado mediante etiquetas. La etiqueta consiste básicamente en una palabra clave encerrada entre los signos < > . Cuando la etiqueta se refiere a un texto o a un elemento visible y no incluido en la propia etiqueta, ésta tiene su correspondiente etiqueta de cierre, por ejemplo escribimos:

<h1> Titulo </h1>

La etiqueta <h1> indica que incluimos en la página un título de primer nivel. Esta etiqueta tiene su correspondiente etiqueta de cierre </h1>. Lo que escribamos entre la etiqueta de apertura y la de cierre será el texto del "titulo de primer nivel".

Por lo tanto, una etiqueta o tag en HTML debe ir siempre encerrada entre los signos < >: <palabra_clave>. Si la etiqueta se refiere a un texto o algún elemento concreto de la página, debe haber también una etiqueta de cierre, quedando el texto o elemento entre las dos etiquetas.

Las etiquetas de cierre son las mismas que las de apertura pero con el signo " / " al principio :</palabra_clave>

Etiquetas imprescincibles

Toda página Web debe estar incluída dentro de las etiquetas <html> ... </html>. Estas etiquetas marcan el comienzo y final de la página web, y todo su contenido debe estar escrito entre estas dos etiquetas.

Vamos a empezar a crear nuestra página. Para ello, tal como hicimos en la página anterior, abrimos el block de notas de Windows. Ahí escribiremos lo siguiente:


<html>


	
</html>

Dentro de la estructura de la página web tenemos otras dos etiquetas imprescindibles. Estas son <head> ... </head> y <body> ... </body>. Deben ir siempre en este orden, y están incluídas dentro de la etiqueta <html>.

El texto del block de notas quedará así:

<html>
  <head>
	
	
  </head>
  <body>
	
	
  </body>
</html>

La etiqueta <head> ... </head>, llamada cabecera incluye todos los datos que no se van a ver pero que son necesarios para la página. El único dato que veremos es el título, el cual lo muestra el navegador en la pestaña superior de la página. El titulo lo escribiremos en la etiqueta <title>Mi Propia Web</title>, la cual debe estar dentro de la etiqueta <head> ... </head>.

la etiqueta <body> ... </body> llamada cuerpo es el cuerpo principal del documento, donde insertaremos el texto y demás elementos visibles de la página.

Nosotros, en nuestra página, insertaremos dentro del "body" otra etiqueta de título de primer nivel que indique el nombre de nuestra web: <h1>Mi Propia Web</h1>.

Después de insertar estas dos etiquetas en el block de notas, habremos escrito en éste lo siguiente:


<html>
  <head>
    <title>Mi Propia Web</title>
	
  </head>
  <body>
    <h1>Mi Propia Web</h1>	
	
  </body>
</html>

Al escribir las etiquetas, lass hemos puesto separadas en distintas líneas, con una serie de tabulaciones y espacios entre ellas. Esto lo hemos puesto así para tener nosotros mayor claridad al ver lo que estamos haciendo.

En realidad no es necesario ponerlo así, podríamos haberlo puesto todo seguido de esta manera:

<html><head><title>Mi Propia Web</title></head><body><h1>Mi Propia web</h1></body></html>

El resultado sería el mismo, sin embargo todo queda mucho más claro escribiendolo como hemos hecho al principio, y así lo seguiremos haciendo.

Observa que se va creando un sistema jerárquico de etiquetas anidadas, es decir las etiquetas van ordenadándose en una jerarquía en la que cada una se incluye dentro de otra. Esto es importante, ya que cada etiqueta (excepto la etiqueta html) debe estar siempre dentro de otra, debiendo de cerrarse dentro de la etiqueta en la que se ha abierto.


Guardar el archivo

Sólo nos queda guardar el archivo en formato de página Web. para ello una vez escrito el código anterior, tal como hicimos en el primer archivo de la página anterior, en el block de notas pulsamos en Archivo / Guardar como ....

Nos sale el cuadro que usa Windows para guardar archivos. Buscamos la carpeta raíz que hemos creado en el paso anteriro Mis documentos / Mi_web , para guardarlo ahí. En donde pone "nombre" guardaremos el archivo con el siguiente nombre y extensión: index.html

Para que los navegadores entiendan que este archivo es la página principal de la Web, el "nombre" debe ser "index". La extensión ".html" indica al ordenador que lo que guardemos no será un archivo de texto, sino una página web que debe visualizarse en un navegador.

Recuerda: La página principal o de entrada a tu web debe llamarse siempre : index.html. De esta manera, al indicar el usuario el nombre de tu web en el navegador, le dirigirá a esta página.

Vamos a ver los resultados: Si todo ha ido bien abrimos el archivo que acabamos de crear; para ello basta con abrir la carpeta raiz, (Mis Documentos / miweb/ index.html) y hacer doble clic sobre él; y en el navegador deberemos verlo como en este enlace:

Vista de mi primera Web


Si no tienes este resultado, o no se te abre el archivo, repasa los pasos anteriores. Recuerda que las etiquetas deben estar bien escritas y el archivo guardado con la extensión .html.

Para acabar vamos a la carpeta raíz y eliminamos el archivo hecho en el paso anterior (miweb.html), ya que éste era un archivo de prueba y no va a formar parte de nuestro sitio web (en Windows botón derecho sobre el archivo y "eliminar").

Nosotros hemos llamado a la Web "Mi Propia Web". Sin embargo tú puedes cambiar el título por otro que sea más a tu gusto, para que sea realmente tu web.

Sin embargo recomendamos a lo largo de este manual seguir los pasos tal como los vamos haciendo aquí sin añadir nada más ni cambiar nada. Si quieres experimentar para hacer otras cosas a medida que vayamos aprendiendo, deberías crear otra carpeta, llamada por ejemplo Mis_pruebas_web, en donde creas tus archivos y haces tus propias pruebas. De esta manera no mezclarás unas cosas con otras, y podrás seguir el manual tal y como aquí lo proponemos.




En la siguiente página seguiremos rellenando nuestra página de inicio con más texto.

ir al siguiente tema: Poner más texto



Mi primera web

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com