Cómo Empezar

Parrafos

Colores

Imágenes

Lista de Definiciones

Tablas

Anclas

Insertar Elementos Multimedia

Formularios

Frames

Iframes

Cómo Comenzar

¿Que se necesita para crear un documento web?

  1. Un editor de texto
  2. Un navegador

Como editor de texto se puede usar el block de notas. Netscape trae un buen editor de documentos web, que permite editar tanto en modo gráfico, o directamente las etiquetas HTML. Un editor que puede reemplazar al block de notas es el editpad, que puedes bajar haciendo click aquí

Como navegador o browser se puede usar Netscape, Explorer u otro navegador, es bueno visualizar los documentos  con diferentes navegadores para asegurarnos de que el documento se pueda visualizar sin problemas en diferentes navegadores. En esto hay que tener sumo cuidado, pues muchas veces los editores de documentos web generan código que que se sólo puede ser visualizado con un tipo navegador, y no con el resto.

Etiquetas HTML

HTML trabaja con etiquetas (tags en inglés). Toda etiqueta se encierra entre los signos menor que < y mayor que >.
Normalmente existirá una etiqueta de inicio y otra de fin. Etsa ultima es casi igual a la de inicio salvo que lleva el signo / justo antes del nombre de la etiqueta. Ejemplo:

<ETIQUETA>Elementos Afectados por la Etiqueta</ETIQUETA>

Todos los elementos del lenguaje HTML o texto incluidos dentro de la etiqueta se verán afectados por su acción.

Las etiquetas suelen presentar atributos que modifican su efecto, estos suelen ser en su mayoría opcionales, los atributos se incluyen dentro de la etiqueta de inicio y se definen por el nombre del atributo, un signo igual y el valor del atributo (si es una frase entre comillas, si es una palabra sin comillas). El orden en el que se incluyan los atributos no tieneimportancia.

<ETIQUETA ATRIBUTO1="valor1" ATRIBUTO2="valor 2">Elementos Afectados por la Etiqueta</ETIQUETA>

Algunas instrucciones no necesitan etiqueta de fin, y algunos atributos no presenta valor.

Como empezar a generar un documento web

La forma más facil de hacer esto es siguiendo los siguientes pasos:

  1. abrir el block de notas (o editor de texto utilizado, aconsejo no usar el Word)
  2. Escribir lo siguiente:
    <html>
    <head>
    <title></title>
    </head>
    <body>
    </body>
    <html>
  3. guardar el archivo poniendo el siguiente cuidado: el tipo de archivo debe todos los  archivos (*.*), el nombre ojala no sea muy largo (lo ideal son unos 8 carácteres) y utilice solo minúsculas (no usar ni acentos, ni eñes, ni espacios); la extensión debe ser .htm o .html
  4. Sin cerrar el block de notas nos vamos a la carpeta donde guardamos el archivo, y veremos que aparció un nuevo doumento con el icono de documento web. Hacemos doble click sobre él, con lo cual se debería abrir con el navegador por defecto que tengamos instalado en nuestro computador.

Como podemos ver no se ve nada, lo cual es obvio, pues nuestro documento tiene sólo las etiquetas básicas, y nada más.

Detengámos a analizar un momento el código que hemos generado:

Todo documento HTML debería empezar con la etiqueta <html> y terminar con la etiqueta </html> .
A su vez la mayoría de los docuemntos HTML se dividen en cabecera y cuerpo de la siguiente forma, donde la cabeza abarca desde la etiqueta <head> hasta la etiqueta </head> y el cuerpo abarca desde la etiqueta <body> hasta la etiqueta </body>

Los elementos se insertan tanto en la cabeza del del documento web, como en el cuerpo.
En el cabeza se suelen insertar elementos menos visibles para el usuario, y en el cuerpo los totalmente visibles, como textos, imágenes, etc... En capítulos más posteriores se comprenderá que tipo de elementos se insertan en cada parte.

Empecemos a realizar cambios y veamos lo que sucede...

Volvamos al block de notas y entre las etiquetas <head> y </head> introduzcamos la siguiente línea de código HTML:

<title>Mi Primer Documento Web</title>

Guardamos el documento, vamos al navegador y actulizamos el documento (F5 en Internet Explorer). Como podrán observar en la barra de título del documento aparecerá la frase que hayamos puesto entre las etiquetas <title> y </title>.

Sigamos haciendo cambios en nuestro documento. entre las etiquetas <body> y </body> introduzcamos:

<h1>Mi Primer Documento Web</h1>

guardemos y actualicemos en el navegador.Con esto hemos hecho aparecer un encabezado en el documento Web.

Alteremos un poco lo que acabamos de hacer de la siguiente manera:

<center><h1>Mi Primer Documento Web</h1></center>

guardamos y visualizamos en el navegador. Nuestro texto ahora debería aparecer centrado.

Hay que hacer notar que produciríamos en mismo efecto si escribiésemos:

<h1><center>Mi Primer Documento Web</center></h1>

Como se indicó más atrás, la estiquetas surten efecto sobre los elementos que rodean. Ademas las etiquets se anidan, es decir un juego de etiquetas a su vez frecuente esta afectad por otras etiquetas que rodean a dicho grupo. Para entender esto, modifiquemos nuestro documento de manera que quede de la siguiente forma:

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

<center><h1>Mi Primer Documento Web</h1></center>

<p>
Este es un párrafo Este es un párrafo Este es un párrafo Este es un párrafo Este es un párrafo Este es un párrafo Este es un párrafo Este es un párrafo Este es un párrafo Este es un párrafo Este es un párrafo Este es un párrafo </p>

</body>
<html>

Visualicemos el documento y posteriormente hagamos el siguiente cambio:

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

<center><h1>Mi Primer Documento Web</h1></center>

<font color="#FF0000">
<p>
Este es un párrafo Este es un párrafo Este es un párrafo Este es un párrafo Este es un párrafo Este es un párrafo Este es un párrafo Este es un párrafo Este es un párrafo Este es un párrafo Este es un párrafo Este es un párrafo </p>
</font>

</body>
<html>

Con esto deberíamos ver el parrafo rojo, pues la etiquetas <font> y </font> están rodenado a las etiquetas <p> y </p>, que a su vez rodean un trozo de texto.

Movamos la primera etiqueta <font> de manera que el domumento quede asi:

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

<font color="#FF0000">

<center><h1>Mi Primer Documento Web</h1></center>

<p>
Este es un párrafo Este es un párrafo Este es un párrafo Este es un párrafo Este es un párrafo Este es un párrafo Este es un párrafo Este es un párrafo Este es un párrafo Este es un párrafo Este es un párrafo Este es un párrafo </p>

</font>

</body>
<html>

Ahora la etiqueta <font> y </font> rodea no sólo a las etiquetas <p> y </p>, si no que también a las etiquetas <h1> y </h1>, con lo cual todo el texto se ve de color rojo ahora.

Hay que hacer notar ademas que el código HTML se puede escribir en una sola línea siendo el efecto el mismo que si se escribiese en la manera que lo hemos hecho hasta el momento, pero se acostumbra escribir en diferentes líneas y tabulándolo para facilitar su entendimiento y su posterior edición.

Se puede ver el código de cualqueir documento en la web, presionando el botón derecho del mouse y seleccionando la opción Ver código fuente.

Pueden bajar un manual de HTML en formato Word, haciendo click aquí

lunes 10 de diciembre de 2018