HTML Lenguaje de marcas de texto enriquecido (Hyper Text Marked Language), es un lenguaje basado en etiquetas o tags, que van entre unos signos de mayor y menor. <Etiqueta>
Tag Estructura Básica Encabezado Codigo HTML Cuerpo

Ejemplo <TITLE> Mi primera Pagina web Esta es mi primera página web con HTML Etiqueta HEAD En la etiqueta HEAD nosotros podemos cambiar el titulo de la pagina, insertar codigo JavaScript, e incluir los METATAGS. <TITLE> Le asigna un titulo a nuestra pagina. Etiqueta BODY La etiqueta BODY tiene ciertos parámetros que nos permiten darle un color de fondo a nuestra página, o ponerle una imagen de fondo, entre otras opciones. Modifica el color de fondo de la pagina Pone una imagen de fondo en la pagina.

Actividad Buscar con que otros parámetros trabaja la etiqueta Body, y presentar un trabajo de lo encontrado, según las pautas del profesor

Etiquetas para la edición de texto Cambia el tipo, tamaño y color de la fuente que se mostrara en la pagina.  tipo de fuente  color del texto  Tamaño de la fuente Pone el texto en negrita. (También funciona con STRONG) Pone el texto en cursiva. (También funciona con EM) Subraya el texto.

Se utiliza para introducir los textos en párrafos.

Se utiliza para alinear el texto o parrafo.
Da un salto de linea en la pagina.

Uso de viñetas en el texto.

Marca cada texto con una viñeta

Cambia el tipo de viñeta que se mostrara.

Etiquetas de Diseño

---

Dibuja una línea horizontal en la pagina web.

Esta etiqueta sirve para introducir un texto de tipo encabezado, los tamaños de los encabezados varían por números que van desde el 1 al 6, siendo el uno el mas grande y seis el mas pequeño.

Encabezado 1 Encabezado 2 Encabezado 3 Encabezado 4 Encabezado 5 Encabezado 6

Inserta una imagen en la pagina, con os atributos HEIGHT WIDTH se puede cambiar el tamaño de la imagen insertada. <MARQUEE> Esta etiqueta permite introducir un texto animado que se desplazara en forma horizontal o vertical.

Tecnología de la información http://www.unav.es/dpp/tecnologia/

ETIQUETAS DE HTML MARCAS BÁSICAS Al principio y al final de todo documento. Cabecera del documento. Dentro del head se ponen las etiquetas: indica el título de la página para el navegador. <meta> permite aportar metainformación al documento, para su mejor identificación e indexación por los motores de búsqueda. Hay distintos tipos: <meta name="description" content="Frase descriptiva de los contenidos de la página"> <meta name="keywords" content="Palabras clave que resuman la temática de los contenidos de la página”> <meta name="author" content="Nombre/s del autor/es de la página"> Tras cerrar el head el se pone la etiqueta: Dentro de esta etiqueta se insertan los contenidos del documento El cierre de la etiqueta se coloca justo antes del cierre PROPIEDADES DE LA PÁGINA La etiqueta puede llevar incluida información sobre las propiedades de la página: define el color de fondo de la página. define el color por defecto del texto en la página. define el color de los enlaces. define el color de los enlaces visitados. define el color de los enlaces activos. establece una imagen para el fondo de la página. Todos estos parámetros se pueden agrupar en una única etiqueta : Sirve para anotar aclaraciones 'privadas' del autor de la página. Lo que se escribe dentro de esta etiqueta es ignorado por el navegador y no se muestra en la página. FORMATO DE TEXTOS negrita (también sirve la etiqueta <strong>… ) cursiva (también sirve la etiqueta <em>…) subrayado …… marca el tamaño de los caracteres, donde X es un valor del 1 a 7, o un valor relativo (+ 1-7). …… define el color del texto, donde XXYYZZ es un valor formado por letras y números que indica el color. …… determina el tipo de la fuente. La etiqueta puede incluir los tres parámetros (tamaño, fuente y color): …… <pre> preformateado. Respeta espacios, saltos de línea y los retornos utilizados. hace parpadear el texto (no para Explorer)

Tecnología de la información http://www.unav.es/dpp/tecnologia/ FORMATO DE PÁRRAFOS

salto de párrafo

salto de línea

sangrado. centrar el texto.

párrafo centrado.

párrafo alineado a la izquierda.

párrafo alineado a la derecha. CREACIÓN DE LISTAS Lista no numerada:

• primer elemento de la lista
• segundo elemento de la lista
• tercer elemento de la lista

cierra lista lista numerada:

1. primer elemento de la lista
2. segundo elemento de la lista

cierra lista. lista de glosario o definición:

término que se va a definir

definición del término

cierra lista. LÍNEAS HORIZONTALES SEPARADORAS

---

línea horizontal.

---

anchura de la línea en porcentaje.

---

anchura de la línea en píxeles.

---

altura de la línea en píxeles.

---

línea alineada en el centro.

---

línea alineada a la izquierda.

---

línea alineada a la derecha.

---

línea sin efecto de sombra. IMÁGENES indica la ruta de la imagen. establece un borde de X pixels en torno a la imagen. establece un tamaño de la imagen (altura y anchura) en pixels. se muestra un texto al pasar el cursorsobre la imagen. alineación inferior del texto respecto de la imagen. alineación del texto en el medio de la imagen. alineación superior del texto respecto de la imagen. alineación izquierda de la imagen en el párrafo. alineación derecha de la imagen en el párrafo. espacio horizontal entre la imagen y el texto. espacio vertical entre la imagen y el texto.

Tecnología de la información http://www.unav.es/dpp/tecnologia/

TABLAS: útiles para componer la página y para presentar datos tabulares. …… Define dónde comienza y termina la tabla Determina la anchura de la tabla. Puede darse en píxeles (no lleva el símbolo %), o en porcentaje de la página. Establece el grosor en píxeles del borde de la tabla Define el espacio en píxeles entre las celdas Define el espacio en píxeles entre el borde y el texto …… determina cada una de las filas de la tabla determina cada una de las columnas dentro de las filas Ejemplo de tabla de 2 filas y 3 columnas

……

primera columna de la fila 1	segunda columna de la fila 1	tercera columna de la fila 1
primera columna de la fila 2	segunda columna de la fila 2	tercera columna de la fila 2

  une dos celdas de dos filas adyacentes, en una única celda.   une dos celdas de dos columnas adyacentes en una sola celda. Dentro de cada celda se puede alinear el texto o cualquier contenido, cambiar el color de fondo, con las etiquetas habituales para texto, párrafos o imágenes.

CREACIÓN DE ENLACES Enunciado del enlace Vínculo a una dirección de correo-e. define un marcador (ancla) en un punto concreto de una página, para poder enlazarlo posteriormente. dirige un enlace interno al punto dónde está el marcador. dirige el enlace a un punto concreto de otra página. Dentro del a href: target="_blank" Abre la página en un nuevo navegador. target=”_top” Abre la página en toda la pantalla para evitar los frames. title=”texto descriptivo del enlace” permite incluir una descripción del destino del enlace

Tecnología de la información http://www.unav.es/dpp/tecnologia/

PÁGINA CON MARCOS (no lleva body) (divide la página en dos marcos en forma de columnas, cada una con su anchura correspondiente en porcentaje) (archivo menu.htm que corresponde al marco de la izquierda, llamado “navegación”, 20% de anchura) (archivo principal.htm que corresponde al marco de la derecha, llamado “contenidos”, 80% de anchura) Las páginas también se pueden dividir en marcos horizontales con frameborder="NO" evita que se vea el borde entre los marcos framespacing="2" establece 2 pixels de separación entre los marcos scrolling="NO" evita que aparezca una barra de scroll dentro del marco scrolling="auto" mostrará la barra de scroll sólo si es necesario Ejemplo de una página con tres marcos en forma de filas. La superior y la inferior tienen un tamaño fijo de 80 pixels; la del medio es adaptable. No se muestran los bordes entre los marcos

HTML Tablas Las tablas nos permiten organizar el contenido de nuestra página y distribuirlo mas uniformemente.

Columna Fila Tabla

La etiqueta TABLE tiene parámetros que permiten cambiar el aspecto de nuestra tabla. Entre los más importantes tenemos: BORDER que nos da el ancho de las líneas que dividen la tabla. BORDERCOLOR determina el color de las líneas que dividen la tabla. BGCOLOR nos da el color de fondo de la tabla. ALIGN determina la alineación que tendrá la tabla. Estos y otros parámetros también son aplicables para las celdas individualmente. Vínculos Con esta etiqueta es posible crear hipervínculos, para saltar a otras páginas o a un determinado punto dentro de la misma página. Mail Crea un vinculo a un dirección de correo electronico. Crea un ancla a la cual se podra acceder luego desde cualquier posición de la pagina.