Web Maestro
 
  Web-maestro
  Home
  Comentarios
  Reportar Error
  HTML Basico
  1.-Una pagina basica
  2.-Dando forma al texto
  3.-Enlaces con otras páginas
  4.-Imagenes
  5.-Caracteres especiales
  HTML Intermedio
  6.- Los estándares del HTML
  7.-Fondos
  8.-Alineación de las imágenes
  9.-Formato de las imágenes
  10.-Tablas
  11.-Formularios
  12.-GIFs animados
  13.-Mapas
  14.-Frames
  15.-Sonidos
  16.-Texto en movimiento
  17.-Publicación y promoción de una página
  18.-Contadores de visitas
  19.-Componer con estilo
  Temas avansados
  20.-Applets de Java
  21.-Trucos diversos
  22.-Canales de chat en páginas Web
  23.-Hojas de estilo en cascada.
  24.-Hojas de estilo en cascada.
  25.-Hojas de estilo en cascada.
  En preparacion
  26.-HTML dinámico
Subir | Imprimir | Agregar a favoritos
1.-Una pagina basica

1. Una página básica

El principio esencial del lenguaje HTML (HyperText Markup Language) es el uso de las etiquetas (tags).
 Funcionan de la siguiente manera:

 

<XXX> Este es el inicio de una etiqueta.
</XXX> Este es el cierre de una etiqueta.

Las letras de la etiqueta pueden estar en mayúsculas o minúsculas, indiferentemente. Por claridad,
se usarán en este manual sólamente las mayúsculas

Lo que haya entre ambas etiquetas estará influenciada por ellas. Por ejemplo, todo el documento
HTML debe estar entre las etiquetas <HTML> y </HTML>:

 

<HTML> [Todo el documento] </HTML>

El documento en sí está dividido en dos zonas principales:

  • El encabezamiento, comprendido entre las etiquetas <HEAD> y </HEAD>
  • El cuerpo, comprendido entre las etiquetas <BODY> y </BODY>
Dentro del encabezamiento hay información del documento, que no se ve en la pantalla principal,
principalmente el título del documento, comprendido entre las etiquetas <TITLE> y </TITLE>.
El título debe ser breve y descriptivo de su contenido, pues será lo que vean los demás cuando
añadan nuestra página a su bookmark (o agenda de direcciones).

Dentro del cuerpo está todo lo que queremos que aparezca en la pantalla principal (texto, imágenes, etc.)

Por tanto, la estructura queda de esta manera:

<HTML>
<HEAD>
<TITLE> Título de la página </TITLE>
</HEAD>
<BODY>
[Aquí van las etiquetas que visualizan la página]
</BODY>
</HTML>

Antes de crear nuestra primera página, unas consideraciones sobre el texto: Cuando escribimos en
el documento el texto que queremos que aparezca en la pantalla, veremos que éste se acomoda a
ella, sin que tengamos que pulsar el retorno del carro. Si queremos separar el texto en distintos párrafos
debemos usar la etiqueta <P>, (que no tiene su correspondiente etiqueta de cierre </P>)

El texto puede tener unas cabeceras, comprendidas entre las etiquetas <H1> y </H1>, <H2> y </H2>, etc.
(hasta el número 6), siendo el número indicativo del tamaño. El tamaño mayor es el correspondiente al número 1.
Puedes experimentar en el ejemplo que sigue, cambiando el número para comprobar el efecto que se logra.

Una etiqueta muy interesante es la de centrado <CENTER> y </CENTER> (no la soportan todos los navegadores,
aunque sí la mayoría de ellos). Nos centra todo lo que esté dentro de ella, ya sea texto, imágenes, etc.

También tenemos los separadores (horizontal rules), que se consiguen con la etiqueta <HR>
(no existe la correspondiente de cierre). Con ella se obtiene una raya horizontal tan ancha como la pantalla,
y con la apariencia de estar embutida sobre el fondo, como se puede observar a continuación:



 

 

Ejemplo práctico

En el procesador de texto copiamos lo siguiente:

<HTML>

  <HEAD>
    <TITLE> Mi pagina del Web - 1 </TITLE>
  </HEAD>

  <BODY>
    <H1> <CENTER> Primera pagina </CENTER> </H1>
    <HR>
    Esta es mi primera pagina, aunque todavia es muy sencilla. Como el 
    lenguaje HTML no es dificil, pronto estare en condiciones de hacer 
    cosas mas interesantes.
    <P> Aqui va un segundo parrafo.
  </BODY>

</HTML>
(Repásese lo dicho en la página de portada en Método de trabajo, acerca del procesador de textos y
cómo cargar el documento en el navegador)

Las líneas en blanco y las indentaciones del texto se han puesto para mayor claridad, pero no son necesarias.
De hecho, podría estar todo en una sola línea. Lo importante es el orden correcto de las etiquetas. Por cierto, una
etiqueta puede estar anidada dentro de otra. Véase en el ejemplo cómo lo está la etiqueta <CENTER> dentro de
la etiqueta <H1>. Es muy importante, en estos casos, que las etiquetas de inicio y de cierre vayan en el orden correcto, pues de lo contrario se producirían errores.

Obsérvese además la falta de los acentos. Se hablará más adelante sobre el motivo de ello.

Guardamos el fichero en el procesador de textos con el nombre de mipag1.html y lo cargamos en el navegador.
Este será el resultado.

Habrá un fichero distinto para cada capítulo; conviene crear un directorio específico e irlos guardando en él,
para poder repasar lo aprendido, aparte de que pueden ser necesarios para ejecutar otros ejemplos prácticos.


Servicio  
  Esta pagina web les enseñara a aprender codigos HTML, esta pagina es para los que estan aprendiendo a usar los codigos.  
Han entrado 20504 visitantes en Web-maestro
Este sitio web fue creado de forma gratuita con PaginaWebGratis.es. ¿Quieres también tu sitio web propio?
Registrarse gratis