6899045
Manual Básico de HTML Creación y
Estructura de Páginas WEB
- ¿Qué es HTML?
Annotations:
- HTML son las iniciales de Híper Text Markup Language. Es un conjunto o serie de etiquetas incluidas en archivos de texto que definen la estructura de un documento WWW y sus vínculos con otros documentos. Los navegadores WWW leen estos archivos de texto e interpretan esas etiquetas para determinar cómo desplegar la página Web.
- ¿Por dónde comenzar?
Annotations:
- 1. Utilizar programas creados para desarrollo de páginas WEB, entre los que podemos citar: • Microsoft Front Page • Hot Dog • Microsoft Internet Assistant • Microsoft Office 97 2. Utilizar un editor de texto y crear nuestro propio código, el mismo que ya no contendría código basura. El software a utilizar, ya que es el software el que se encarga de elaborar y ubicar los códigos de la página WEB y uno estaría prácticamente “Arando en el mar”. La segunda opción es más lenta y menos vistosa, pero esta opción le enseña a utilizar cada uno de los comandos y instrucciones HTML (etiquetas) sin depender de ningún programa. Como casi todos los sistemas más comunes en PC funcionan bajo un entorno Windows, para crear los Hipertextos utilizaremos un accesorio que viene incluido en el sistema. El Bloc de Notas o Note Pad.
- Páginas WEB
- El Hipertexto es un archivo de texto que contiene instrucciones que pueden ser interpretadas por un
navegador de Internet. Estas instrucciones son denominadas Etiquetas.
- El Hipertexto es un archivo de texto que contiene instrucciones que pueden ser interpretadas por un
navegador de Internet. Estas instrucciones son denominadas Etiquetas.
- Etiquetas
- Una etiqueta cumple su función de la siguiente manera: <nombre de la etiqueta> Apertura de una
etiqueta siempre entre “< >” texto/gráfico/etiquetas A la cual se aplica la etiqueta </nombre de la
etiqueta> Cierra de la etiqueta siempre entre “</ >” Al acabar de crear un hipertexto , este se deberá
grabar con la extensión .html o bien .htm.
- Una etiqueta cumple su función de la siguiente manera: <nombre de la etiqueta> Apertura de una
etiqueta siempre entre “< >” texto/gráfico/etiquetas A la cual se aplica la etiqueta </nombre de la
etiqueta> Cierra de la etiqueta siempre entre “</ >” Al acabar de crear un hipertexto , este se deberá
grabar con la extensión .html o bien .htm.
- Estructura básica de una página WEB
Annotations:
- Está compuesta de 2 partes: el encabezamiento y el cuerpo de la página. Paralelamente a esto, existen tres etiquetas fundamentales, las mismas que deben estar incluidas en el archivo HTML de manera obligatoria. Estas tres etiquetas fundamentales son: Indica al navegador que el documento texto que esta leyendo es un documento HTML. Esta etiqueta se abre al inicio del archivo y se cierra al final del mismo. Acá se detalla el encabezado de la página WEB. Esta etiqueta se abre luego de . Cuerpo de la página donde se despliega el contenido global. Esta etiqueta se abre luego de cerrar el encabezamiento con y se extiende hasta el final de la página, cerrándose antes de . El hipertexto será grabado con el nombre index.html en su disquete o en alguna ubicación en el disco duro. Al asignar la extensión .html o .html ya se crea un hipertexto. Asegúrese de ingresar “index.html” como nombre a grabar en su bloque de notas (incluidas las comillas) para evitar que se añada la extensión .txt.
- Etiqueta: <title> </title>
Annotations:
- Esta etiqueta va en la parte del encabezamiento de la página web, es decir en el HEAD, y define en su contenido el título de la página web, mismo que aparecerá en la parte superior izquierda de la pantalla de su navegador. Sin cerrar nuestro navegador de Internet, volvemos al editor de texto e incluimos el campo entre las etiquetas de apertura y cierre del encabezado (head).<br>
- Etiqueta <body> </body>
Annotations:
- Todo el texto, las imágenes y el formato visibles al usuario deben encontrarse entre las etiquetas.... Esta etiqueta cuenta con los siguientes atributos: • Bgcolor define el color de fondo de la página • Text define el color del texto de la página • Link define el color de los vínculos en la página • Alink define el color del vínculo actual o activado en la página • Vlink define el color del vínculo ya visitado • Background define el archivo gráfico que será desplegado como fondo • Bgsound define el archivo de audio que se tocará en la página.IE • Bgproperties define el movimiento vertical del fondo.IE Los atributos se incluyen en la etiqueta de apertura, separados por un espacio
- ¿Cómo se utilizan los colores en HTML?
Annotations:
- Existen dos formas para aplicar colores a una página web: 1. Se especifica el color deseado directamente con el nombre del color en ingles: Ej: blue, green, yellow 2. Se especifica el color deseado mediante números hexadecimales mediante la siguiente estructura: #RRVVAA El color tiene un signo de numeral # antecediendo a los 6 números. Existen dos números para cada color principal: rojo, verde y azul. Cada uno de los números varía hexadecimal mente {0,1,2....,9,A,B,...F}.
- Ejemplos de Colores: #RRVVAA Color
#RRVVAA Color #FFFFFF Blanco
#000000 Negro #FF0000 Rojo #00FF00
Verde #0000FF Azul #FF00FF Magente
#00FFFF Cyan #FFFF00 Amarillo
#70DB93 Agua Marino #000080 Azul
Marino #FF7F00 Coral #A62A2A Café
#C0C0C0 Plomo #4F2F4F Violeta
- Texto en HTML
Annotations:
- Una vez que ya se tiene una idea de cómo funcionan la etiqueta de encabezamiento y parte de la etiqueta de definición del cuerpo de la página, trabajemos con el texto. HTML fue creado en principio para el alfabeto en inglés, sin embargo se buscaron modos para mostrar también caracteres o símbolos denominados especiales. Para utilizar caracteres especiales usaremos los símbolos & y ; para denotar el inicio y final respectivamente de un símbolo especial.
- De esta manera: Texto: Descripción: Pantalla:
´ Acento ´ ñ eñe ñ "
Comillas Dobles " °: Grados ° á a
con acento á é e con acento é
espacio en blanco
- Etiqueta <br>
Annotations:
- La etiqueta instruye al navegador cliente que inserte un salto de línea en un documento HTML. La etiqueta tiene el mismo efecto que un retorno de carro en una máquina de escribir. Es una etiqueta especial, pues no precisa de etiqueta de cierre.
- Etiqueta <hr>
Annotations:
- La etiqueta <hr> dibuja de manera predeterminada una regla horizontal alineada automáticamente, con una apariencia de tercera dimensión.
- Etiqueta <br>
- Encabezados
Annotations:
- Las etiquetas al (acrónimos de “heading 1..6”) son encabezados del cuerpo del texto. El encabezamiento nos proporciona las letras de mayor tamaño. Notará que si usamos una etiqueta de encabezamiento, automáticamente se incluirá un retorno de carro al final del mismo. La etiqueta tiene el siguiente atributo: • Align Permite ubicar el encabezamiento a la izquierda, centro o derecha de la pantalla (LEFT, CENTER,RIGHT
- Ubicación, formato y atributos de texto
- Etiqueta <b> </b>
Annotations:
- Esta es la etiqueta que nos posibilita un texto con negrillas.
- Etiqueta <u> </u>
Annotations:
- Etiqueta que posibilita resaltar un texto con subrayado.
- Etiqueta <i> </i>
Annotations:
- Etiqueta que permite resaltar el texto con inclinación itálica. Recuerde que puede combinar entre si todas estas etiquetas.
- Etiqueta <center> </center>
Annotations:
- Se utiliza para centrar el texto/imagen o datos que se encuentren entre la apertura y el cierre.
- Etiqueta <font> </font>
Annotations:
- Esta etiqueta proporciona al autor un medio de personalizar el texto con respecto al tipo de fuente, tamaño y color. Atributos: • Color determina el color que se aplica al texto • Size determina el tamaño relativo del texto. Los tamaños válidos son del 1 al 7, siendo el predeterminado el 3 y el más grande el 1. • Face asigna una fuente o tipo de letra.
- Etiqueta <b> </b>
- Imágenes en HTML
Annotations:
- Se deben tener dos consideraciones importantes para trabajar con gráficos: Los únicos formatos, que por ahora soportan los visualizadores son: *.gif y *.jpg o *.jpeg. Las imágenes no deben ser de tamaño grande por que el visualizador o navegador puede demorar demasiado en bajarlas. Acá trabajaremos también con el atributo background de la etiqueta que había quedado pendiente. La idea de trabajar con un fondo en una página web, es la misma que tener un fondo en nuestro entorno Windows. El archivo puede estar ubicado en la misma carpeta o bien en otra que contenga solo gráficos. Trate de que el color de fondo de la página (que ya no aparecerá) sea parecido al color principal de la imagen que usará como fondo. Si es necesario re acomode los colores de texto y vínculos definidos en. Supondremos tenemos un gráfico llamado “fondo.gif” para el ejemplo 8 que como notará será re formulado en función a utilizar las nuevas etiquetas. Importante: En Internet por lo general una mayúscula no es igual a una minúscula. Tome en cuenta esto al utilizar y hacer referencia a archivos. Como sugerencia es bueno tener todos los archivos con minúsculas.
- Etiqueta <img>
Annotations:
- Se trata de otra etiqueta especial, pues no necesita de etiqueta de cierre. Esta etiqueta instruye al navegador para que exhiba la imagen especificada.
- Tablas
- Etiqueta <th> </th>
Annotations:
- Indica al navegador cliente que exhiba el texto como un encabezado en la primera fila de una tabla. Atributos principales: • Colspan especifica el número de celdas que cubre el encabezado • Align Determina la posición del texto del titilo
- Etiqueta <table></table>
Annotations:
- Señala el inicio y final de una tabla. Sus atributos son: • Align Establece la alineación de la tabla o texto mediante ALIGN=LEFT o ALIGN=RIGHT • Bgcolor Establece el color de fondo de las celdas de la tabla • Border Determina el ancho del borde en pixeles • BorderColor Asigna un color al borde • BorderDark Determina el color de la parte oscura de un borde de 3 dimensiones • BorderLight Asigna el color de la parte clara de un borde de 3 dimensiones • Caption Especifica el titulo para la tabla • Cellpadding Establece la cantidad de espacio libre junto al contenido de una celda • Cellspacing Asigna la cantidad de espacio entre las celdas de una tabla • Width Determina el ancho de la tabla en pixeles o en un porcentaje
- Etiqueta <tr> </tr>
Annotations:
- Indica al navegador que exhiba el texto dentro de una fila; puede también interpretarse como la etiqueta que define filas. • Align Alineación del texto/objetos en toda la fila
- Etiqueta <td> </td>
Annotations:
- La etiqueta de datos de la tabla, es la que identifica a las columnas o celdas específicas de una tabla. Atributos principales: • Align Alineación del texto/objeto de la celda • Bgcolor Color de fondo de la celda • Background imagen de fondo de una celda • Width Ancho de la celda/columna con respecto al ancho de la tabla Solo precisa definir el ancho en la primera celda de la columna. Recuerde que dentro de una celda, usted puede insertar desde texto o un gráfico hasta una tabla entera.
- Etiqueta <th> </th>
- Numeración y viñetas
Annotations:
- En HTML todo es posible, y tal cual en un editor de texto podemos trabajar con numeración y viñetas, lo podemos hacer acá.
- Etiqueta <ol> </ol>
Annotations:
- Listas ordenadas, esta etiqueta predeterminada indica al navegador que numera la lista de elementos comprendidos dentro de las etiquetas
- Etiqueta <ul> </ul>
Annotations:
- Indica al navegador que cree una lista con viñetas no ordenada. No solamente usada para fines de numeraciones y viñetas, sino también para fines de sangría u tabulaciones.
- Etiqueta <li> </li>
Annotations:
- Se usa para indicar al navegador que exhiba el texto que le sigue como un elemento de línea en una lista. Atributos: • Type Especifica el tipo para listas ordenadas Type=A Usa letras mayusculas, TYPE=a emplea letras minúsculas, Type=I Usa números romanos grandes, Type=i usa números romanos pequeños y Type=1 usa números arábigos. Type también puede servir para definir la forma de la viñeta en las listas no ordenadas. Type=DISC, CIRCLE y SQUARE son las opciones disponibles. • Value Indica que se inicie la numeración a partir del número especificado.
- Hipervínculos
Annotations:
- Un vínculo hipertextual es un texto, botón o imagen que al seleccionar nos lleva a otra dirección URL, página WEB o recurso.
- Etiqueta <A> </A>
Annotations:
- La etiqueta que viene de “ancla”, denota el inicio y el final de una instrucción que contiene alguna forma de vínculo o hipervínculo. Esta etiqueta permite al usuario vincularse a otra ubicación dentro del mismo documento HTML, a otro sitio WEB, a un servidor FTP, enlace de correo electrónico, ... Atributos: • HREF Recurso al cual se hace referencia el hipervínculo • NAME Especifica el nombre de la posición a donde apuntar • TARGET Destino del enlace (generalmente para páginas con Frames)
- Frames
Annotations:
- Ofrece la posibilidad de utilizar marcos y varias páginas en una sola.
- Etiqueta <frameset> </frameset>
Annotations:
- Define la disposición gráfica de los marcos en la pantalla. Atributos: • Rows Determina el alto de las filas • Cols Determina el ancho de las columnas. • Framespacing Espacio entre frames
- Etiqueta <frame></frame>
Annotations:
- Define un solo marco que forma parte del conjunto de marcos definidos en .Sus atributos son: • Marginheight Determina que tanto espacio vertical (en pixeles) existe entre el objeto ubicado en un marco, y los extremos superior o ingerior de este. • MarginWidth Determina que tanto espacio horizontal (en pixeles) existe entre el objeto ubicado en un marco, y los extremos izquierdo o derecho de éste. • Name Ofrece la capacidad de Dar nombres a las ventanas FRAME, de modo que puedan ser utilizados como destino de los hipervínculos. • Noresize indica que el usuario no puede redimensionar el marco • Scrolling Habilita una barra de desplazamiento para un marco. Existen tres parámetros posibles SCROLLING=YES, SCROLLING=NO y SCROLLING=AUTO que habilita la barra solo si es necesario • SRC indica que exhiba en un marco el contenido de un documento HTML.
- Etiqueta <noframes></noframes>
Annotations:
- Etiqueta que es usada para desplegar un texto o una página alternativa cuando un navegador no es capaz de desplegar los marcos.
Want to create your own Mind Maps for free with GoConqr? Learn more.