You are on page 1of 4

Separata HTML-Básico -Intermedio

INTRODUCCIÓN A HTML 1. Definición: Las páginas web se definen en un archivo de texto plano pero con extensión HTML. Para definir la estructura de una página web se usan bloques los cuales tienen un identificador al que se le denomina etiqueta. No todos los bloques son rende rizados por el navegador web, sino que, también pueden definir propiedades como título, etiquetas que el navegador puede usar para la codificación del fichero, la especificación de la notación de las etiquetas, etc. 2. ¿Qué es HTML? El HTML (Hyper Text Markup Language) lenguaje de marcas de hipertexto, es el lenguaje con el que se escriben las páginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto de forma estructurada, y que está compuesto por etiquetas, que marcan el inicio y el fin de cada elemento del documento. Un documento hipertexto no sólo se compone de texto, puede contener imágenes, sonido, vídeos, etc., por lo que el resultado puede considerarse como un documento multimedia. Los documentos HTML deben tener la extensión html o htm, para que puedan ser visualizados en los navegadores (programas que permiten visualizar las páginas web). Los navegadores se encargan de interpretar el código HTML de los documentos, y de mostrar a los usuarios las páginas web resultantes del código interpretado. 3. Que son los exploradores: Un navegador o explorador web - conocido en inglés como web browser - es un programa o software, por lo general gratuito, que nos permite visualizar páginas web a través de Internet además de acceder a otros recursos de información alojados también en servidores web, como pueden ser videos, imágenes, audio y archivos XML. 4. Tipos de navegadores o exploradores web Algunos de los navegadores o exploradores web más populares son: Internet Explorer, Mozilla Firefox, Safari, Opera, Google Chrome y Flock. Otros navegadores no tan conocidos son: Maxthon, Avant, DeepNet, PhaseOut, SpaceTime, Amaya... 5. Etiquetas: Las etiquetas en HTML definen bloques de contenido, las cuales forman una estructura definida en bloques para una página WEB. Sintáxis básica: <etiqueta></etiqueta> Donde: • etiqueta: es el nombre de la etiqueta HTML. • <> : define el inicio del bloque. • </>: define el final del bloque.

o br: Define un espacio vertical entre bloques. o b: Vuelve en negrita un texto. o img: Permite mostrar una imagen en la página. o table: Define un bloque de tabla. Etiquetas de definición: o html: Es una de las etiquetas principales. debe ubicarse dentro de un bloque tr. o head: Esta etiqueta define el bloque de cabeceras. 8. o title: Esta etiqueta define el título de la página web. o ul: Define un bloque para una lista de viñetas. este título es visualizado mayormente en la barra de títulos del navegador. En la especificación • XHTML las etiquetas que no necesitan de un cierre debe tener un '/' al final de la • definición del bloque inicial: • <etiqueta /> • HTML. • . o li: Define una viñeta. Etiquetas de Contenido: o p: Define un párrafo de texto. o h2: Define un título de texto más pequeño.Ejemplo de Comentario --> • Dentro de las etiquetas más importantes tenemos: 6. o h1: Define un título de texto más grande. define el inicio y final de un documento HTML. o th: Define el título de la columna. o script: Define un bloque de código Java Script (u otro lenguaje) el cual formará parte de la página web. dentro de este bloque se deben colocar todos aquellos bloques que definan la apariencia y contenido de la web. como cualquier otro lenguaje de programación se puede realizar comentarios. Etiquetas Contenedores: o body: Define el bloque de contenido. debe estar dentro de un bloque tabla. 7. la ruta de la página debe ser puesta en el atributo src. o tr: Define un bloque de fila. Este código será ejecutado por el navegador web. Este contenido es el que se renderiza para que el usuario del navegador lo visualice.Separata HTML-Básico -Intermedio El cierre de etiqueta (</>) es opcional en algunos de las etiquetas. • Sintaxis: • <!-. o a: Define un hipervínculo o enlace hacia una página nueva. debe estar dentro de un bloque ul.

Atributos específicos: a. el valor de este atributo es usado para identificar a un bloque desde bloques de códigos javascript e inclusive desde CSS.Separata HTML-Básico -Intermedio 9. o src: este es un atributo especial y su comportamiento dependerá del bloque en el que se use. o style: este atributo contiene codigo CSS para cambiar el comportamiento e inclusive la apariencia de un bloque. o class: especifica una o más clases definidas en un código CSS de los cuales tomará su comportamiento y apariencia. Usualmente identifica la ruta de un archivo (archivo físico o remoto) el cual es necesario para el bloque. • align: define la alineación del texto siendo los posibles valores: left. #BB12FF • Nombre: 1. Se verá con más detalle en el capítulo de CSS. • text: define el color del texto. Atributos Estándares: o id: es el atributo que va a identificar al bloque. right. Atributos: Los atributos son propiedades por la cuales se puede modificar la apariencia y Además se puede definir el comportamiento del mismo. . Bloque body: • bgcolor: define el color de fondo del cuerpo. en algunos casos el valor es definido por el programador. pero en la gran mayoría el valor debe ser escogido de una lista de valores que solo acepta el atributo. 10. center b. El formato de Color debe ser en formato hexadecimal o nombre ejemplo: • Hexadecimal: 1. Bloque img: • alt: define un texto alternativo mientras la imagen definida en src está siendo cargada. el valor debe ser la ruta a una imagen. red 2. es el color de fondo. Sintáxis: <Etiqueta atributo=”valor”></etiqueta> Dónde: o atributo: es el nombre del atributo a ser definido. yellow • background: define una imagen de fondo. o valor: es el valor del atributo. 11. #AA00FF 2. los casos más comunes son los bloques de script e img. Se verá con más detalle en el capítulo de CSS.

e. • width: determina el ancho de la tabla. Bloque a: • href: define la ruta de la página web a la que hace referencia el enlace. Bloque table: • border: define el grosor del borde de las celdas de la tabla. el valor puede ser numeral o en • porcentaje. • cellspacing: determina el espacio entre las celdas de la tabla. • alt: define un tooltip que se mostrará al pasar el mouse encima del enlace d. • cellpadding: determina el espacio entre las celdas y su contenido. el valor puede ser numeral o en porcentaje. . Bloque hr: • size: determina el tamaño horizontal de la linea. el valor puede ser numeral o en porcentaje. • width: determina el ancho de la línea.Separata HTML-Básico -Intermedio c.