Estas son algunas etiquetas básicas que te servirán a la hora de hacer tus páginas. Primero las listaré todas en código y después dejaré las vistas previas:

<strong>Texto en negritas</strong>
<em>Texto en itálicas</em>
<tt>Texto en teletipo</tt>
<h1>Encabezado 1</h1>
<h3>Encabezado 3</h3>
<h6>Encabezado 6</h6>
<p>Esto es un párrafo</p>
<p>Esto es un párrafo<br /> y aquí hice un salto de linea</p>
Texto antes de una linea <hr> Texto después de una linea
<a name="marca">Esto es una marca</a>
<a href="#marca">Este enlace dirige a una marca (se define con el signo #)</a>
<a href="http://www.google.com" target="_blank">Este enlace dirige a otra página en una ventana nueva</a>
<img src="http://url-de-la-imagen.jpg" alt="Texto alternativo" />

Vista previa:

Texto en negritas
Texto en itálicas
Texto en teletipo

Encabezado 1

Encabezado 3

Encabezado 6

Esto es un párrafo

Esto es un párrafo
y aquí hice un salto de linea

Texto antes de una linea

Texto después de una linea
Esto es una marca
Este enlace dirige a una marca (se define con el signo #)
Este enlace dirige a otra página en una ventana nueva
Texto alternativo

Listas

Las listas se dividen en dos, las ordenadas: ol (numeradas) y las desordenadas: ul (no numeradas) y cada item de la lista se define con la etiqueta li.
Ejemplo de lista ordenada:

<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>

Item 1
Item 2

Ejemplo de lista desordenada:

<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>

Item 1
Item 2

Con esto pueden jugar un poco con el ejercicio anterior para hacer una página con más elementos. El siguiente tutorial será para introducirnos en lo que son las hojas de estilo o CSS para poder darle formato y estilos a nuestra página y a sus elementos, para luego seguir con la maquetación de un sitio sencillo.

Para empezar con el primer curso de diseño web (Empezando en el Desarrollo Web) les daré una pequeña introducción a HTML y su sintaxis.

¿Que es?
HTML significa HyperText Markup Language o Lenguaje de Marcas de Hipertexto, el cual se escribe en forma de etiquetas, utilizando los corchetes angulares (< y >). Un archivo o documento de HTML tiene la extension .htm o .html (asi como los documentos de word utilizan .doc, los de texto .txt, etc).
Para crear un archivo escrito puramente a codigo, se debe utilizar un programa que procece texto sin formato, como el Bloc de Notas (notepad) de windows.

Etiquetas
Las etiquetas HTML se abren y cierran para diferenciar un efecto de otro, por ejemplo:

<efecto>este es un efecto</efecto>

Si se fijan, la etiqueta esta “encerrada” en corchetes angulares, despues se pone la parte que tendra el efecto y por ultimo se cierra la etiqueta con la barra / dentro de la etiqueta. Tambien hay otras etiquetas que no necesitan cerrarse con sino que se cierran asi mismas dentro de los corchetes que abren. Por ejemplo para poner una imagen:

<img src="url-dela-imagen" />

La mayoria de las etiquetas tienen parametros que se definen dentro de esto, tomando como ejemplo el de imagen, un parametro es “src=”url-dela-imagen”, en esta etiqueta tambien pueden ir otros que definen el ancho y alto:

<img src="url-dela-imagen" width="500" height="500" />

Pero la mayoría de los parámetros es mejor definirlos mediante CSS o lo que es lo mismo las Hojas de Estilo, pero de esto hablaremos mas adelante.

Estructura
Un documento HTML se divide en dos partes: la cabecera (HEAD) y el cuerpo (BODY). Todo esto con sus respectivas etiquetas: primero definimos que es un documento HTML, dentro de esta etiqueta abriremos (y cerraremos) las etiquetas que designan la cabecera y el cuerpo (head y body).

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

Con esto tendríamos un documento html vacío, con sus etiquetas necesarias. Dentro de la etiqueta head se incluyen otras etiquetas importantes para la visualización de nuestra página, como puede ser el titulo, estilos en css, código javascript, metatags, entre otras cosas que profundizaremos en otros tutoriales. Por el momento solo le pondremos la etiqueta title (titulo) para que aparezca en la parte superior de nuestro navegador.

<html>

 <head>
  <title>Mi Página Web</title>
 </head>

 <body>
 </body>

</html>

Hasta aquí dejaré la introducción a lo que es el HTML para seguir con un pequeño ejemplo para que empiecen a mover un poco los dedos.

Ejemplo de Página Web sencilla
Para empezar con este pequeño ejercicio solo necesitaremos un editor de texto sin formato, windows trae por default el Bloc de Notas (Notepad), si nunca en su vida lo han visto pueden ir a Inicio > Ejecutar… y escriben “notepad.exe” (sin las comillas). Programas como word no nos servirán para este ejercicio, en los siguientes tutoriales les recomendaré algunos programas gratuitos especiales para escribir código y que simplificará las cosas a la hora de “codear” nuestras páginas.
Bien, ahora que tenemos abierto el Bloc de Notas/Notepad escribiremos las etiquetas básicas de nuestro documento html y el titulo:

<html>

 <head>
  <title>Ejercicio con HTML</title>
 </head>

 <body>
 </body>

</html>

Con esto tenemos la estructura básica del documento, lo que haremos ahora será poner un encabezado a nuestra página, pondremos algunos parrafos con sus respectivas alineaciones y saltos de linea, con un poco de estilos (negritas e italicas) y para finalizar insertaremos un enlace. Todo esto se pondrá dentro de la etiqueta body. Listos?

Cuerpo de la Página
Lo primero será poner el encabezado a nuestra página (esto es diferente al titulo del documento que ya definimos en el head). Para esto estan las etiquetas H (por Heading) y dependiendo de la importancia del encabezado se le da un número, siendo el 1 el más importante (h1, h2, h3…). En este caso utilizaremos el encabezado mas “importante”, osea el h1:

<h1 align="center">Encabezado de mi página</h1>

Como pueden ver le he añadido el atributo “align”, que lo que hace es alinear el texto, en este caso, al centro (valores: left, right, center, justify) si no se define la propiedad align se tomará por defecto la alineación a la izquierda, aunque siempre es mejor definir estas propiedades por medio de CSS, hablaremos de los estilos en otro tutorial.

Lo siguiente será poner dos parrafos, con la etiqueta p y con el relleno “Lorem Ipsum”, el primero estará alineado por defecto a la izquierda y tendrá un salto de linea y el segundo se alineará a la derecha y la últimas palabras estarán en negritas e itálicas:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut est risus, eget pharetra ante. <br />
Fusce elementum pellentesque elit, varius rhoncus neque imperdiet ut. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>

<p align="right">Nullam vitae egestas dui. <strong>Cum sociis natoque penatibus et magnis</strong> dis parturient montes, nascetur ridiculus mus. <em>Ut gravida imperdiet ipsum, nec facilisis ligula tempus nec.</em> </p>

Si se fijan en el código, el salto de linea lo hemos hecho con la etiqueta br que se cierra asi misma. Hay que mencionar que cuando se escribe el código directamente el documento no detecta los saltos de linea como tal, por eso tienes que poner la etiqueta br. Las negritas se hacen con la etiqueta strong y las itálicas con em.

Ahora para finalizar añadiremos un enlace centrado al final de nuestro documento. Para esto utilizaremos la etiqueta a y su estructura es mas o menos así:

<a href="http://www.google.com" target="_blank">Texto del enlace</a>

El atributo href es donde se define el la url a donde mandará nuestro enlace, en el ejemplo hemos puesto http://www.google.com (recuerden poner el protocolo http:// ya que sin esto tomará el enlace como una subcarpeta de su sitio). El atributo target es el que nos dice de que manera se abrirá el enlace, si en la misma ventana, en una nueva o en un id especifico. Si no ponen este atributo por defecto se abrirá en la misma ventana. El texto que esta dentro de las etiquetas es lo que verá el visitante. Bien, ahora crearemos un enlace hacia Nación Libre (http://www.nacion-libre.net) el cual se abrirá en una nueva ventana y lo centraremos:

<p align="center"><a href="http://www.nacion-libre.net" target="_blank">Visita Nación Libre</a></p>

Con esto terminamos el pequeño ejercicio de html, por lo que el código de nuestro documento se debe ver así:

<html>

 <head>
  <title>Ejercicio con HTML</title>
 </head>

 <body>
  <h1 align="center">Encabezado de mi página</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut est risus, eget pharetra ante. <br />
Fusce elementum pellentesque elit, varius rhoncus neque imperdiet ut. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>

   <p align="right">Nullam vitae egestas dui. <strong>Cum sociis natoque penatibus et magnis</strong> dis parturient montes, nascetur ridiculus mus. <em>Ut gravida imperdiet ipsum, nec facilisis ligula tempus nec.</em> </p>

  <p align="center"><a href="http://www.nacion-libre.net" target="_blank">Visita Nación Libre</a></p>
 </body>

</html>

Lo siguiente sería guardar nuestro archivo, vamos a Archivo > Guardar como… y abajo seleccionamos “Todos los Archivos” en Tipo y en el nombre le damos la respectiva extensión, por ejemplo mipagina.html o prueba.html, aquí lo importante es la extensión .html (también puede ser .htm). Traten de no guardar sus archivos con nombres que incluyan espacios o carácteres especiales ya que esto puede ocasionar problemas a la hora de subirlo a un servidor. Por lo pronto su archivo solo estará en su computadora, aún no puede ser visto a través de un dominio en internet, pero lo pueden abrir con su navegador para darse una idea de como se podría ver ya estando en linea. Tiene que quedar algo así: Ver ejemplo en linea.

Ahora si doy por finalizado el primer curso de introducción a HTML. En los siguientes cursos les enseñaré a darle estilo a su página mediante CSS y empezaremos a maquetar nuestro primer sitio web.

Cualquier duda pueden dejar sus mensajes y serán contestados en breve o manden un email a elbuensaint@nacion-libre.net (pronto tendremos foros de ayuda).

Anti-Myspace

Estamos trabajando

MySpace despedirá al 60% de sus empleados

Etiquetas Básicas HTML

Encabezado 1

Encabezado 3

Encabezado 6

Listas

Introducción a HTML

[Website] Des-Acato

Archives

Meta