SIGNIFICADO DE THML
HTML, siglas de HyperText Markup Language («lenguaje de marcas de hipertexto»), hace referencia al lenguaje de marcadopara la elaboración de páginas web. Es un estándar que sirve de referencia para la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, entre otros. Es un estándar a cargo de la W3C, organización dedicada a la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo referente a su escritura e interpretación.
ESTRUCTURA DE UN PROGRAMA EN HTML
Lo primero que debemos considerar dentro de la organización básica de HTML es el uso de los corchetes angulares< y >. En HTML estos corchetes contienen en su interior código especial llamado ETIQUETA que indican la estructura y el formato del CONTENIDO de la página. HTML está formado por muchas etiquetas que pueden realizar infinidad de tareas para dar formato a nuestras páginas Web.
Tres son las etiquetas (tags) que describen la estructura general de un documento y dan una información sencilla sobre él. Estas etiquetas no afectan a la apariencia del documento y solo interpretan y filtran los archivos HTML.
- <HTML>: Limitan el documento e indica que se encuentra escrito en este lenguaje.
- <HEAD>: Especifica el prólogo del resto del archivo esto es, el encabezado. Son pocas las etiquetas que van dentro de ella, destacando la del titulo <TITLE> que será utilizado por los marcadores del navegador e identificará el contenido de la página. Solo puede haber un título por documento, preferiblemente corto aunque significativo, y no caben otras etiquetas dentro de él. En <head> no hay que colocar nada del texto del documento.
- <BODY>: Encierra el resto del documento, el contenido es el que se muestra en un explorador Web.
Las etiquetas tienen propiedades, las cuales son descritas por medio de los Atributos. Un atributo es una opción que permite proporcionar detalles acerca de cómo una etiqueta afectará el contenido. Es importante mencionar que HTML no distingue entre mayúsculas o minúsculas, o una combinación de ambas.
El primer paso para crear una página es crear un documento de texto mediante el editor de texto que desee. Puede utilizar el editor Microsoft Windows que es el Block de notas o cualquier otro editor.
Un editor de texto es un programa que permite crear y modificar archivos digitales compuestos únicamente por texto sin formato, conocidos comúnmente como archivos de texto ó texto plano y son incluidos en el sistema operativo o en algún Paquete de software.
Lo primero que debemos considerar es la estructura general de la página por lo que debemos escribir en ella su contenido.
ETIQUETAS EN HTML PARA QUE SIRVEN
Continuamos viendo etiquetas y atributos básicos para la creación de páginas webs. No entramos a describir una a una todas las etiquetas y atributos de que HTML dispone. Simplemente explicamos las que han venido siendo más utilizadas. Tener en cuenta que algunas etiquetas o atributos están obsoletas (deprecated), aunque conviene conocerlas por la difusión que tuvieron.
<img src="http://www.aprenderaprogramar.com/images/logo.png" alt="Logotipo APR2">
La etiqueta img dispone de estos atributos, algunos obligatorios, otros opcionales y algunos que ya no se recomienda usar (deprecated):
ATRIBUTO
|
USO
|
OBSERVACIONES
|
src
|
Este atributo es obligatorio e indica el nombre del archivo de imagen (entre comillas) o la URL desde la que se va a obtener la imagen.
|
Obligatorio. Si no se incluye no se mostrará imagen alguna.
|
align
|
Permite controlar la alineación de una imagen con respecto a una línea de texto adyacente o a otras imágenes en esa línea. Los valores posibles son los ya conocidos left, right, middle, top, bottom.
|
Atributo obsoleto (deprecated). Sustituir por CSS.
|
alt
|
Entre comillas podremos escribir un texto que se mostrará si la imagen no llega a cargar, mientras se carga o, cuando visualizando ya la imagen, pasamos el ratón por encima.
|
Atributo requerido, se recomienda incluirlo aunque si no se hace la imagen se mostrará.
|
width
|
Este atributo es opcional pero podemos ponerlo para especificar al navegador que muestre la imagen con un tamaño específico. Significa “ancho de la imagen” que vamos a representar. Si no se escribe, se carga la imagen con el tamaño original.
|
Opcional. Indicar valor en pixeles. También se puede indicar con CSS.
|
height
|
Al igual que el atributo width, es opcional. Este atributo indica el alto de la imagen.
|
Opcional. Indicar valor en pixeles. También se puede indicar con CSS.
|
border
|
Con border especificamos el ancho del borde que rodea la imagen. Si se indica 0 equivale a “sin borde”.
|
Atributo obsoleto (deprecated). Sustituir por CSS.
|
Etiquetas Básicas
| Etiquetas | Descripción | Ej |
|---|---|---|
| <h1>...<h6> | Títulos de diferentes tamaños. |  |
| <p> | Escribir un párrafo. | |
| <!--> | Poner un comentario en el código. | |
| <br> | Para hacer un salto de línea. | |
| <hr> | Dibujar una línea horizontal. | |
Si deseas profundizar en el tema de etiquetas básicas, dirígete a HTML Etiquetas Básicas
Formatos de texto
| Etiquetas | Descripción | Ej |
|---|---|---|
| <b> | Texto en negrita. | |
| <big> | Texto grande. | |
| <em> | Texto enfatizado. | |
| <i> | Texto en itálica. | |
| <small> | Texto pequeño. | |
| <strong> | Texto fuerte. | |
| <sub> | Texto por debajo. | |
| <sup> | Texto por encima. | |
| <ins> | Texto subrayado. | |
| <del> | Texto tachado. | |
| <tt> | Texto teletipo. | |
Si deseas profundizar en el tema de formatos de texto, dirígete a HTML Formato de texto
Enlaces - Links
| Etiquetas | Descripción | Ej |
|---|---|---|
| <a> | Crear un vínculo simple. | |
| Marcapáginas de un documento. | | |
| Abrir un vínculo en una nueva ventana. | | |
| Abrir un vínculo en el frameset padre. | | |
| Abrir un vínculo en el mismo frame. | | |
| Abrir un vínculo en una ventana de tamaño completo. | |
Si deseas profundizar en el tema de vínculos, dirígete a HTML Enlaces
Formularios
| Etiquetas | Descripción | Ej |
|---|---|---|
| <form> | Crear un formulario simple. | |
| La respuesta al formulario se abrirá en una nueva ventana. | | |
| La respuesta al formulario se abrirá en el mismo frame del formulario. | | |
| La respuesta al formulario se abrirá en el frameset padre. | | |
| La respuesta al formulario se abrirá en una ventana de tamaño completo. | | |
| <input> | Usar un botón gráfico para mandar los formularios. | |
| Un formulario tipo checkbox. | | |
| Un formulario para subir archivos. | | |
| Un formulario con datos ocultos. | | |
| Un formulario con un botón personalizado con una imagen. | | |
| Un formulario con ingreso de password. | | |
| Un formulario del tipo radio. | | |
| <fieldset> | Dibujar un recuadro alrededor del formulario con un título. | |
| <select> | Menú desplegable. | |
| <optgroup> | Poner subtítulos dentro del menú desplegable. | |
Si deseas profundizar en el tema de formularios, dirígete a HTML Formularios
Imágenes
| Etiquetas | Descripción | Ej |
|---|---|---|
| <img> | Colocar una imagen en el documento. | |
| Modificar las medidas de una imagen. | | |
| Crear un mapa de una imagen. | |
Si deseas profundizar en el tema de imágenes, dirígete a HTML Imágenes
Frames - Marcos
| Etiquetas | Descripción | Ej |
|---|---|---|
| <frameset> | Definir marcos verticales. | |
| Definir marcos horizontales. | | |
| <frame> | División de marcos sin bordes. | |
| Uso de márgenes dentro de los marcos. | | |
| Marcos fijos que no permiten cambiar su tamaño. | | |
| Uso de la barra de desplazamiento dentro de los marcos. | | |
| <noframes> | En caso que el navegador del usuario no soporte marcos. | |
| <iframe> | Alinéamos un iframe a la derecha de la página. | |
| Mostrar un iframe sín los bordes. | | |
| Definir la altura del iframe a nuestro gusto. | | |
| Definir el ancho del iframe. | | |
| Mostrar un iframe sín las barras de desplazamiento. | |
Si deseas profundizar en el tema de marcos, dirígete a HTML Frames
Tablas
| Etiquetas | Descripción | Ej |
|---|---|---|
| <table> | Definir el espesor del borde de una tabla. | |
| Tamaño del relleno de cada celda de la tabla. | | |
| Separación entre celdas de una tabla. | | |
| Especificar los bordes que serán visibles de la tabla. | | |
| Visualizar solo las líneas horizontales de una tabla. | | |
| Especificar el ancho de la tabla. | | |
| <tr> | Alinear horizontalmente el contenido de las celdas de una fila. | |
| Alinear verticalmente el contenido de las celdas de una fila. | | |
| <td> | Alinear horizontalmente el contenido de una celda. | |
| Alinear verticalmente el contenido de una celda. | | |
| Agrupamos un número de celdas horizontalmente. | | |
| Agrupamos un número de celdas verticalmente. | |
Si deseas profundizar en el tema de tablas, dirígete a HTML Tablas
Listas
| Etiquetas | Descripción | Ej |
|---|---|---|
| <ol> | Hacer una lista ordenada. | |
| <ul> | Hacer una lista sín orden alguno. | |
| <dl> | Hacer una lista descriptiva. | |
Si deseas profundizar en el tema de listas, dirígete a HTML Listas
