Manual Html
abelcamberos23 de Mayo de 2012
3.033 Palabras (13 Páginas)567 Visitas
Introducción al HTML
¿Qué son los archivos HTML?
• HTML (HyperText Markup Language) o "Lenguaje para Marcado de Hipertexto".
• Los archivos HTML deben tener una extensión htm o html.
• Para crear un archivo HTML solo hace falta un editor de texto.
• Un archivo HTML está compuesto poretiquetas.
• Las etiquetas le dicen al navegador(Ej: Internet Explorer, Firefox, Mozilla, etc.) como mostrar la página.
________________________________________
¡Vamos a hacer una pequeña prueba!
Si estás usando Windows, abre el "Block de Notas".
Si usas Mac, abre "Simpletext".
Escribe en el mismo, el siguiente texto:
<html>
<head>
<title>Mi primera página Web</title>
</head>
<body>
Hola a todos.
</body>
</html>
Guarda el archivo como "pagina1.html" (las extensiones ".htm" o ".html" tienen el mismo significado y nos indican que se trata de un archivo HTML).
• Abre el navegador Internet(Internet Explorer, Firefox, Opera, etc.).
• Selecciona "File" y luego "Open".
• Se abrirá una ventana, selecciona "Browse" y ubica el archivo que acabas de guardar -"pagina1.html"- elígelo y presiona "Open".
• Ahora tú ves la dirección, por ejemplo "C:\My Documents\pagina1.html". Presiona "OK" y el navegador mostrará la página.
Expliquemos el ejemplo
<html> --> Indica al navegador que abre un archivo HTML.
<head> --> Apertura de la cabecera del documento. Sección que no se muestra en la pantalla.
<title>Mi primera página Web</title> --> Título de la página.
</head> --> Cierre de la cabecera del documento.
<body> --> Apertura del cuerpo del documento. Esta sección aparece en la pantalla.
Hola a todos. --> Texto que va a ser mostrado por el navegador.
</body> --> Cierre del cuerpo del documento.
</html> --> Cierre del archivo HTML
La primera etiqueta del archivo es <html>. Esto le indica al navegador que se trata de un archivo HTML. Para cerrar el archivo usamos </html>. Todo lo que se encuentra entre las dos etiquetas es el código HTML de la página.
Luego vemos la etiqueta <head>. Lo que sigue a continuación hasta su cierre </head>, es la cabecera del documento y no se muestra en la pantalla. Aquí colocamos información tal como el título de la página(<title>Mi primera página Web</title>), palabras claves para los motores de búsqueda, una descripción de la página y otros datos del documento.
Entre las etiquetas <body> y </body> se encuentra el cuerpo del documento y el contenido que se coloque en esta sección es el que veremos en pantalla, como por ejemplo, "Hola a todos.".
Nota: observa que todas las etiquetas de cierre se diferencian de las de apertura por llevar"/" antes del nombre.
Elementos y etiquetas de HTML
¿Qué son los elementos y las etiquetas de HTML?
Los elementos son declaraciones para visualizar o dar forma a una página Web.
Las etiquetas(en inglés: tags) son marcas insertadas en un documento HTML para proporcionar información sobre una unidad o contenido.
Reglas básicas
• Las etiquetas están encerradas entre los signos "<" y ">".
• Generalmente vienen en pares <p> y<⁄p>.
• La primera es de apertura y la segunda de cierre.
• El texto que se encuentra entre dos etiquetas es el contenido del elemento.
• Las etiquetas no son sensibles a las mayúsculas y minúsculas, o sea <b> es lo mismo que <B>.
________________________________________
Etiquetas de HTML
Veamos un ejemplo.
<html>
<head>
<title>Una página Web</title>
</head>
<body>
Hola a todos. <b>Este texto es en negrita</b>
</body>
</html>
Esta es una etiqueta HTML:
<b>Este texto es en negrita.</b>
El elemento HTML comienza con la etiqueta de apertura <b>(etiqueta que nos muestra el texto en negrita).
El contenido de dicho elemento es: Este texto es en negrita.
El fin del elemento HTML es con la etiqueta de cierre </b>.
Otro elemento HTML en el ejemplo es:
<body>
Hola a todos. <b>Este texto es en negrita</b>
</body>
EL elemento HTML comienza con la etiqueta de apertura <body>(etiqueta que define el cuerpo del documento).
El contenido de dicho elemento es: Hola a todos. <b>Este texto es en negrita</b>.
El fin del elemento HTML es con la etiqueta de cierre </body>.
________________________________________
¿Qué son los atributos de las etiquetas?
Muchas etiquetas llevan atributos. Los mismos proveen de mayor información a los elementos HTML.
• Los atributos siempre van con la estructura: nombre="valor".
• Los atributos siempre van en la etiqueta de apertura.
• Los valores siempre hay que ponerlos entre comillas.
Formato de texto con HTML
Formato básico del texto
HTML nos permite definir el formato de visualización del texto en la pantalla.
Muy útil para cuando queramos resaltar o enfatizar una un texto en especial.
También muy usado para subrayar o escribir subíndices o superíndices.
Estos son solo algunos ejemplos de lo que podemos hacer con estos elementos
Para ello utilizamos las siguientes etiquetas:
Código
<b>Texto en negrita</b>
<big>Texto grande</big>
<em>Texto enfatizado</em>
<i>Texto en itálica</i>
<small>Texto pequeño</small>
<strong>Texto fuerte</strong>
<sub>Texto subíndice</sub>
<sup>Texto superíndice</sup>
<ins>Texto subrayado</ins>
<del>Texto tachado</del>
<tt>Texto teletipo</tt>
Resultado
Texto en negrita Texto normal
Texto grande Texto normal
Texto enfatizado Texto normal
Texto en itálica Texto normal
Texto pequeño Texto normal
Texto fuerte Texto normal
Texto subíndice Texto normal
Texto superíndice Texto normal
Texto subrayado Texto normal
Texto tachado Texto normal
Texto teletipo Texto normal
________________________________________
Etiquetas para dar forma al texto
Etiquetas Descripción
<b>
Define un texto en negrita
<big>
Define un texto grande
<em>
Define un texto enfatizado
<i>
Define un texto en itálica
<small>
Define un texto pequeño
<strong>
Define un texto fuerte
<sub>
Define un texto subíndice
<sup>
Define un texto superíndice
<ins>
Define un texto subrayado
<del>
Define un texto tachado
<tt>
Define un texto de teletipo
<s>
Define un texto tachado. Desaprobado. Use <del> en su lugar
<strike>
Define un texto tachado. Desaprobado. Use <del> en su lugar
<u>
Define un texto subrayado. Desaprobado. Use <ins> en su lugar
________________________________________
Etiquetas de "Texto estructurado"
Estas estiquetas son usadas comunmente para mostrar códigos de programación.
Etiquetas Descripción
<code>
Define un texto en código de computadora
<kbd>
Define un texto del teclado
<samp>
Define un texto ejemplo de código de computadora
<var>
Define una variable
<pre>
Define un texto preformateado
<listing> Desaprobado. Use <pre> en su lugar
<plaintext> Desaprobado. Use <pre> en su lugar
<xmp> Desaprobado. Use <pre> en su lugar
________________________________________
Etiquetas de citaciones y definiciones
Etiquetas Descripción
<abbr>
Indica una forma abreviada (p.ej., WWW, HTTP, etc.)
<acronym>
Indica un acrónimo (p.ej., WAC ,radar, autobús, etc.)
<address>
Define la información sobre el autor
<bdo>
Define la dirección del texto (p.ej., de izq. a der., de der. a izq.)
<blockquote>
Designa una cita larga
<q>
...