CU C R U S R O S O D E HTM T L María Cives Senra

Documentos relacionados
CURSO DE HTML. María Cives Senra

Curso Básico de HTML

Qué es HTML? Estructura interna de una página HTML. Cabecera de la página <head>

2. Manejar los elementos básicos de un lenguaje usado en la creación de Páginas Web. 2.1 Definición de objetos y contenidos de la página web.

INTRODUCCIÓN A HTML. Qué es HTML. Etiquetas

Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta ADDRESS ADDRESS CITE CITE B: NEGRITA B: NEGRITA.

Unidad 1.- Fundamentos de sitios web. El lenguaje HTML. Desarrollo de aplicaciones Web. Felipe LC

ETIQUETAS PRINCIPALES

La primera etiqueta que vamos a aprender es aquella por la que deben empezar todos los documentos que queramos sean considerados HTML; esta es:

Transparencias de J2EE. Tema 2: HTML. Uploaded by Ingteleco

RESUMEN HTML. Elementos de estructura

Capítulo 0. Repaso de HTML

Actividad 3: Codificación básica de un texto en HTML

5.CREACIÓN DE TABLAS.

Tema 3. Conceptos Básicos de HTML. ETSI ICAI! Departamento de Sistemas Informáticos! Rafael Palacios Hielscher! Cristina Puente Águeda!

Tablas Formularios Frames

Hipertexto y Marcadores Hipertexto: Escritura no secuencial, un texto que bifurca, que permite que el lector elija y que se lea mejor en una pantalla

Etiquetas Básicas (Estructura HTML) Etiquetas Atributos Valores Descripción. Formato de Presentación Etiquetas Atributos Valores Descripción

Práctica de HTML (Curso )

Introducción a HTML Manual-Estructura Básica. Prof. César S. Rangel Farias.

TABLE. La etiqueta general, que engloba a las siguientes.

Curso HTML. Introducción. Estructura de un documento html

1. Introducción a HTML

Diseño Web. Sitio Web Conjunto de páginas web relacionadas entre sí.

Unidad I - INTRODUCCIÓN AL HTML. Profesor: Marcos Tulio Jerez Bastidas. Barinas, abril 2015

GUIA 3. Tema: Hipervínculos. Qué es un hipervínculo?

HTML GUIA 5 TABLAS EN HTML

(X)HTML. Tablas. Las tablas son grupos de celdas que contienen información.

Manual básico de HTML

Texto en movimiento. <MARQUEE> Texto que se desplaza </MARQUEE>

ESTRUCTURA DEL CÓDIGO HTML5

LENGUAJE DE MARCADO HIPERTEXTO HTML

5. EL EDITOR DE TEXTO HTML.

Las practicas deberás hacerlas sin la ayuda de tu asesor

Imágenes de fondo [background-image] La propiedad CSS background-image se usa para insertar una imagen de fondo.

Páginas WEB Parte II INTRODUCCIÓN A LAS TECNOLOGÍAS INFORMÁTICAS. Escuela de Ingeniería de Sistemas y Computación Universidad del Valle

TEMA 5: INTERNET Y PÁGINAS WEB. Realización de páginas web con HTML. Servicios de Internet

H T M L. Marquesinas y Listas U.A.C.M COMPUTACIÓN II. Prácticas

HOJAS DE ESTILOS EN CASCADA CSS (Cascading Style Sheet)

Universidad Politécnica de El Salvador Computación Básica. HTML Guía 1. Requerimientos y material. Qué es HTML? Etiquetas

CONCEPTOS BÁSICOS PARA EL DISEÑO DE PAGINAS WEB

Texto y Organización del contenido

MANUAL DE REFERENCIA DE PROGRAMACIÓN HTML

UNIDAD I HOJA ELECTRÓNICA DE CÁLCULO

TEMA 2. CREAR SITIOS WEB USANDO. Tecnologías de la Información 1ºBachillerato IES Zurbarán (Badajoz)

4º ESO INFORMÁTICA TEMA 7: LENGUAJE HTML ACTIVIDADES. A continuación abriéremos el bloc de notas: Inicio>Programas>Bloc de notas.

CURSO PÁGINAS WEB HTML:

Construcción de páginas web. San&ago Mar+n de Jesús

Objetivos. El alumno conocerá los elementos indispensables para crear una página web. 1. Crear una página web básica utilizando html.

NATIONAL SOFT HOTELES GUÍA DE CONFIGURACIÓN DEL COMPROBANTE DE RESERVACIÓN

EDICIÓN WEB CÓDIGO HTML

Conceptos básicos de Dreamweaver CS3

Notas sobre HTML Estándar

HTML. guía rápida de referencia. Autor: Jorge Sánchez ( año 2003

DIRECCIÓN GENERAL DEL BACHILLERATO CENTRO DE ESTUDIOS DE BACHILLERATO N 2 LIC. JESÚS REYES HEROLES

Técnicas de visualización

HIPERVÍNCULOS, LINKS O ENLACES HTML. ETIQUETA <A>. ATRIBUTOS HREF, TARGET Y TITLE. TIPOS DE HIPERVÍNCULOS. ANCLAS O ANCHORS (CU00717B)

Manual FOXTIR Editor HTML MOBILE MARKETING

REPASO DE TABLAS HTML

La etiqueta TABLE. Hay que cerrarla con </TABLE>

HTML 2 / Atributos/etiquetas(Tags)

Identificar cuál es la estructura de una página Web y sus principales secciones. Desarrollar una página Web en un editor.

Universidad de El Salvador Facultad Multidisciplinaria de Occidente Departamento de Ingeniería

QUÉ ES UNA HOJA DE ESTILOS? Una hoja de estilo en cascada (CSS) es un conjunto de reglas en las que definimos el formato que va a tomar un

7.1 Estructura Básica de jas Tablas

ACTIVIDADES DE HTML. <TITLE> ejemplo de código HTML</TITLE> Aquí va el contenido de la página

PEQUEÑOS TRUCOS PARA LA REALIZACIÓN DE UNA WEB CON HTML. <title>seguridad Informática por nombre y apellido alumno</title>

Las tablas pueden ser consideradas como un grupo de filas donde cada una de ellas contiene un grupo de celdas. Una tabla puede ser insertada en un

Universidad de Puerto Rico Recinto Universitario de Mayagüez Centro de Cómputos HTML. Por: Isabel Rios Lopez Unidad de Servicios al Usuario

Apuntes básicos de HTML I.E.S. Pintor José María Fernández

Nociones basicas de HTML

HIPERDOCUMENTOS. Prof. Emiro Coronado Cabrera

DISEÑO DE PÁGINAS WEB CON CÓDIGO HTML TEXTO EN MOVIMIENTO

UNIDAD 1 GENERALIDADES HTML

GUIA 1 CONCEPTOS BÁSICOS

PHP y MySQL. Aplicaciones Web: HTML II (tercera parte) Autor: Johnny Zulca Mamani

HOJAS DE ESTILO PORTAL PISTA LOCAL PÁGINA DE INICIO

INFORMATICA I FORMATO

Vamos a ver qué son los hiperenlaces, para qué sirven y cómo crearlos, ya que son un elemento esencial para cualquier página web.

LÍNEAS SEPARADORAS. ETIQUETA <HR>. COMENTARIOS EN HTML. ATRIBUTOS SIZE, WIDTH, NOSHADE (DEPRECATED). EJEMPLOS (CU00716B)

Extras para

Introducción: páginas web y navegadores

PROCESADORES DE TEXTO. MICROSOFT WORD.

ELABORADO POR: BRENDA PATRICIA GONZALEZ MANRIQUEZ

En que nos ayuda las hojas de estilo cascada (css)?

Profesor: Vicente Destruels Moreno. Teoría: Imágenes

CURSO MOODLE Curso

En HTML, para indicar el orden de tabulación entre los controles de un formulario se emplea

PHP WEBQUEST. Este botón que representa un disquete sirve para guardar la webquest.

PRÁCTICA 2. AMPLIAR LA WEB

COLEGIO PABLO DE TARSO IED CONSTRUCCION DE PROYECTOS DE VIDA PRODUCTIVOS HTML - PRÁCTICAS DOC RAUL MONROY PAMPLONA

MICROSOFT EXCEL MICROSOFT EXCEL Manual de Referencia para usuarios. Salomón Ccance CCANCE WEBSITE

Creación y modificación de tablas

Estas líneas son permanentes en una página Web. Siempre van a estar presentes no importando qué tan corta o tan larga sea la página y el contenido.

OPENOFFICE CALC. Manejo básico de hojas de cálculo

CONALEP CANCUN 2 PROCESAMIENTO DE LA INFORMACION POR MEDIOS DIGITALES

En Fireworks, puede crear una bar nav creando un símbolo en el Editor de botones y luego poniendo instancias de dicho símbolo en el lienzo.

Tema 4. Contenido multimedia. ETSI ICAI! Departamento de Sistemas Informáticos! Rafael Palacios Hielscher! Cristina Puente Águeda!

MATERIALES Leer previamente la Guía número 3 Elementos proporcionados por docente para realización de asignación.

Conceptos Teóricos de HTML5 (material extra adicional libro):

Transcripción:

CURSO DE HTML María Cives Senra

2 HTML HTML es un lenguaje que permite definir páginas web. Este lenguaje permite describir hipertexto, es decir, texto presentado de forma estructurada y agradable, con enlaces (hyperlinks) que conducen a otros documentos o fuentes de información relacionadas, y con inserciones multimedia (gráficos, sonido, imágenes, etc.). Hiper Text Markup Language

Las etiquetas del lenguaje HTML 3 El lenguaje HTML usa etiquetas o directivas (tags) para indicarle al programa cliente de Web como mostrar el texto. Las etiquetas están formadas por determinados caracteres metidos entre los signos <>, y con la barra </> cuando se trata de la segunda etiqueta de un efecto (la de cierre). Por ejemplo: <title> para abrir y </title> para cerrar. Este lenguaje se escribe en un documento de texto, por eso necesitamos un editor de textos para escribir una página web. Así pues, el archivo donde está contenido el código HTML es un archivo de texto, con una peculiaridad, que tiene extensión.html o.htm (es indiferente cuál utilizar). De modo que cuando programemos en HTML lo haremos con un editor de textos, lo más sencillo posible y guardaremos nuestros trabajos con extensión.htm. El navegador es el programa que conoce el lenguaje de la World Wide Web, por una parte se sabe comunicar con los servidores para pedir los archivos que el usuario solicita (los protocolos), y por otro entiende el código de la página Web para presentar el contenido al usuario (HTML).

Estructura de un documento HTML 4 Se codifica a través de unas etiquetas especiales, generalmente van en parejas, una de apertura y otra de cierre. <nombre etiqueta> texto afectado </nombre etiqueta> Cada etiqueta puede poseer una serie de atributos que modifiquen su contenido. Pueden ser obligatorios u opcionales <body bgcolor="#ffffff" > En las etiquetas no hay distinción entre mayúsculas y minúsculas. Si la página contiene algún error HTML, no saldrá por pantalla. El archivo debe tener extensión.htm ó.html

5 Estructura de un documento HTML

Cabecera y cuerpo del documento 6 <HTML> <HEAD> <TITLE> <BODY> HTML: Limita el documento e indica que se encuentra escrito en este lenguaje. HEAD: define la cabecera del documento HTML, esta cabecera suele contener información sobre el documento que no se muestra directamente al usuario. Como por ejemplo el título de la ventana del navegador. TITLE: define el título de la página. Por lo general, el título aparece en la barra de título de la ventana del navegador. BODY: encierra el contenido del documento.

Ejemplo 1 7 Para guardar los distintos ejemplos vamos a crear una carpeta llamada PRÁCTICAS DE HTML. Escribiremos el programa en el block de notas y lo guardaremos con el nombre de Ejemplo 1. <HTML> <HEAD> <TITLE>Ejemplo 1</TITLE> </HEAD> <BODY> Hola mundo </BODY> </HTML>

Organización del texto 8 Guardamos el archivo con el nombre de: Ejemplo 1_1 Los saltos de línea, tabuladores y otros separadores (excepto los espacios entre palabras) son ignorados por los navegadores por lo que hay que insertarlos mediante etiquetas. <html> <HEAD> <TITLE>Ejemplo 1_1</TITLE> </HEAD>. <body> Tecnología de la Información y la Comunicación </body> </html>

Organización del texto 9 Salto de línea: <br> División de párrafos (mayor espacio que el salto de línea) <p> Alineación del texto Centrado <center> </center> o <p align =center> Derecha <p align=right> Izquierda <p align=left> Sangrado de texto <blockquote> Subrayado <u> </u> Cursiva <i> </i> Negrita <b> </b> Subíndice <sub> </sub> Superíndice <sup> </sup> <!-- --> Comentarios. Son directivas o etiquetas que nunca se mostrarán en el navegador. Sirven al programador para documentar la página web.

Ejemplo 1_2 10 Escribimos el programa en el block de notas y lo guardamos con el nombre de Ejemplo 1_2. <html> <HEAD> <TITLE> Ejemplo 1_2</TITLE> </HEAD> <body> <br> <br> <b><center> texto centrado en negrita</b> <br> <p align=right> texto alineado a la derecha <br> <p align=left> texto alineado a la izquierda <center><u><i> texto centrado, subrayado y en cursiva</u></i> <br> <br> <p align=left>la República Oriental del Uruguay es un país de América del Sur cuyo territorio es el segundo más pequeño del subcontinente, con una superficie de 176.215 km². Limita con el Brasil al norte y noreste y con Argentina al oeste. El límite es el Río Uruguay. Por el sur, tiene costas sobre el Río de la Plata, el cual lo separa de la provincia de Buenos Aires y de la ciudad de Buenos Aires. Por el sureste, tiene costas sobre el Océano Atlántico. <blockquote><p align=left>la República Oriental del Uruguay es un país de América del Sur cuyo territorio es el segundo más pequeño del subcontinente, con una superficie de 176.215 km². Limita con el Brasil al norte y noreste y con Argentina al oeste. El límite es el Río Uruguay. Por el sur, tiene costas sobre el Río de la Plata, el cual lo separa de la provincia de Buenos Aires. Por el sureste, tiene costas sobre el Océano Atlántica</blockquote> </body> </html>

11 Resultado del archivo Ejemplo 1_2.htm En este ejemplo se han aplicado varias etiquetas para cambiar la alineación y los atributos del texto (cursiva, negrita y subrayado).

Organización del texto 12 El tag FONT permite modificar la apariencia del la fuente utilizada en la página. Su estructura es la siguiente: <FONT atributo=valor del atributo> Los atributos del tag FONT son los siguientes:

13 Atributos de Font face - color - size Atributo Valor del Atributo Ejemplo del uso del tag y atributo Función del tag Apariencia del atributo face Nombre de la fuente <font face="arial,helvetica" >Fuente arial </font> Aplicar una fuente a cierta parte del texto Fuente arial color Número hexadecimal o la palabra clave del color <font color="#ff0000">letr a roja </font> Aplica un color a una fuente que se usa en cierta parte del texto Letra roja size Un número entero positivo o negativo <font size=1> Letra tamaño 1 </font> Define el tamaño de la fuente que se usa en cierta parte del documento (valores entre 1 y 7) Letra tamaño 1

Ejemplo 1_3 14 En este ejemplo pondremos en práctica los atributos de color, y tamaño de la fuente del texto. También cambiaremos de tipo de fuente. Guardar el archivo con el nombre de Ejemplo 1_3.htm <html> <HEAD> <TITLE>Ejemplo 1_3</TITLE> </HEAD> <body> <br> <br> <b><center><font size=2> Texto en tamaño 2 centrado y en negrita</font></b> <br> <p align=right> <font size=7>texto alineado a la derecha y en tamaño 7 </font> <br> <center><u><i><font color="#ff0000" size=5>texto centrado, subrayado, en cursiva y de color rojo. De tamaño 5 </font></u></i> <br> <br> <p align=left> <font size=3 face="comic sans ms">texto alineado a la izquierda. Fuente Comic Sans ms y en tamaño 3 </font> </body> </html>

15 Ejecución del archivo Ejemplo 1_3 En este documento se han utilizado distintos atributos del texto (Alineación, tipos de fuentes y atributos del texto)

Encabezados 16 <H1> <H2> <H3> <H4> <H5> <H6> Se utilizan para crear títulos dentro de una página. Sintaxis general: <H número de encabezado> La diferencia entre los distintos tipos de encabezados es el tamaño de la letra, el tipo de resaltado, y la separación existente entre el texto y los elementos que tienen encima y debajo de él. Se puede alinear el texto mediante la propiedad align. <H3 align= center >

17 Encabezados En la tabla anterior se puede observar el comportamiento de los distintos encabezados. Pueden llevar el atributo color, por ejemplo: H1 { color: blue } H2 { color: #000080 }

Ejemplo 2_1 18 Guardamos el documento con el nombre de: Ejemplo 2_1 <HTML> <HEAD> <TITLE>Ejemplo 2_1</TITLE> </HEAD> <BODY> <H1>LOS ENCABEZADOS (este es un encabezado H1)</H1> <br> <h3 align="center"> <font color="00800">este segundo titular es H3 y de color verde </font></h3> <!-- Aquí va un comentario que no es interpretado por el navegador --> <P>Esta es un página con titulares, que tiene también un párrafo (este) y unos cuantos saltos de línea (más abajo).</p> Primer salto<br> Segundo salto<br> Tercer salto<br> </BODY> </HTML>

Marquesinas 19 <marquee> Las marquesinas son líneas de texto que pueden desplazarse de un lado a otro de la ventana en forma lineal. Por defecto se desplaza de derecha a izquierda indefinidamente, pero se pueden modificar estas propiedades. Atributo direction: permite modificar la dirección en la que se mueve el texto. down: de arriba abajo up: de abajo a arriba right, de derecha a izquierda o left de izquierda a derecha.

Marquesinas 20 Al archivo Ejemplo 2_1 le añadimos al principio de la sección <body> la siguiente orden. Volvemos a guardar el archivo (ejemplo 2_2). Atributo behavior: este atributo modifica el tipo de movimiento. alternate: de lado a lado de la ventana como si rebotara. scroll: de un lado a otro, continuamente. slide: de un lado a otro, pero una sola vez Atributo bgcolor: nos permite cambiar el color de fondo de la marquesina. <marquee bgcolor="#006699" behavior="alternate" direction="right"> <font color= #FFFF00 size="5">ejemplo de marquesina </font> </marquee>

HIPERTEXTO 21 El hipertexto permite conectar entre sí diferentes documentos, elementos multimedia, páginas web, etc. Los elementos sobre los que se inserta el enlace o hipervínculo debe estar entre las etiquetas <a> y </a>. La etiqueta <a> llevará siempre un atributo, que puede ser: href name

HIPERTEXTO Realizar la página enlace0 (Santiago) 22 <A HREF="URL">...</A>: Es el más habitual de los atributos y sirve para saltar entre diferentes URLs. <A HREF="http://www.lavozdegalicia.es">Visita esta página</a> <A NAME="parte1">Primera parte</a>: Utilizamos el atributo name para dar nombre a una sección de nuestro documento. Posteriormente, cuando en nuestro documento queramos incluir un vínculo a dicha sección escribiremos: <A HREF="#parte1">Ir a la primera parte</a>

HIPERTEXTO Ejemplo 3 23 <HTML> <HEAD> <TITLE>Ejemplo 3</TITLE> </HEAD> <BODY> <A NAME="arriba"><H1>Página de enlaces</h1></a> <A HREF="#abajo">Ir abajo</a><br> <A HREF="ejemplo1_1.htm">Ir a ejemplo 1</A><br><br> <A HREF="http://www.peleteiro.com/">Ir a peleteiro</a><br> <br>.<br>.<br>.<br>.<br>.<br>.<br>.<br><br> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br>.<br>.<br>.<br>.<br>.<br> <A NAME="abajo"><br></A> <A HREF="#arriba">Ir arriba</a> </BODY> </HTML>

HIPERTEXTO Tipos de referencias 24 Referencia absoluta Referencia relativa al sitio Punto de fijación Enlaza con una ubicación externa al sitio en el que se encuentra el documento. La ubicación pertenece a Internet, por lo que hay que empezar la referencia por http://, el nombre del dominio y a veces el nombre de la página. Si no se escribe el nombre de la página se cargará la página de inicio asociada al dominio. <a href= http//www.peleteiro.com > Colegio Peleteiro

HIPERTEXTO Tipos de referencias 25 Carpeta principal Documento.htm CARPETA Ejemplo1_1.htm Referencia absoluta Referencia relativa al sitio Punto de fijación Enlaza con un documento Carpeta que principal se encuentra en el mismo directorio que el documento actual. Documento.htm Documento que contiene Deberá indicarse el nombre el enlace y la extensión del archivo. Por ejemplo: CARPETA 1 <a href= ejemplo1_1.htm Primer ejercicio</a> Ejemplo1_1.htm Si el documento con el que se quiere enlazar esta en una carpeta diferente a la actual deberá indicarse, delante del nombre del archivo, la ruta de acceso a dicha carpeta. CARPETA 2 <a href= carpeta1/ejemplo1_1.htm Primer ejercicio</a> CARPETA 2 (suponemos que carpeta1 está dentro de la carpeta o directorio donde se encuentra el documento)

HIPERTEXTO Tipos de referencias 26 Referencia absoluta Referencia relativa al sitio Punto de fijación Enlaza con un punto determinado del documento actual o de otro diferente. Para definir el punto de enlace utilizaremos la etiqueta <a name>. Por ejemplo: <a name= arriba > Título de esa sección </a> La sintaxis del enlace sería: <a href= nombre del documento#nombre del punto de enlace texto que lleva el enlace </a> opcional

Ejemplo 3_1 27 <HTML> <HEAD> <TITLE>Ejemplo 3_1</TITLE> </HEAD> <BODY> <A NAME="arriba"><H1>Página de enlaces</h1></a> <A HREF="#abajo">Ir abajo</a><br> <A HREF="imagenes\enlace0.htm">Ir a enlace</a><br><br> <A HREF="http://www.peleteiro.com/">Ir a peleteiro</a><br> <br>.<br>.<br>.<br>.<br>.<br>.<br>. Enlace a una imagen<br><br> <a href="imagenes/rosas.jpg" target="_blank" > foto rosas </a> <br><br><br><br><br><br> Para realizar este ejercicio se hará una copia del archivo ejemplo 3 y se le añadirán las línea marcadas como nuevas. El archivo se guardará con el nombre de Ejemplo 3_1 Enlace a un archivo pdf<br><br> <br><a href="imagenes/santiago.pdf" target="_blank" > Archivo pdf <br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br>.<br>.<br>.<br>.<br>.<br> <A NAME="abajo"><br></A> <A HREF="#arriba">Ir arriba</a> </BODY> </HTML>

HIPERTEXTO Destino del enlace 28 El destino del enlace determina en qué ventana va a ser abierta la página vinculada. El atributo target determina el destino del enlace. Valor _blank _parent _self _top Significado Abre el documento vinculado en una ventana nueva del navegador. Abre el documento vinculado en la ventana del marco que contiene el vínculo. Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vínculo. Abre el documento vinculado en la ventana completa del navegador.

Ejemplo: Enlaces 29 Guardar este documento con el nombre de ENLACE. <html> <head> <title> Página de Enlaces</title> </head> <body> <br><br><br><br> <a href ="http://www.peleteiro.com" target="_blank"> Visita a Peleteiro (_blank) </a> <br><br><br><br> <a href ="http://www.lanasa.net" target= "_parent"> Visita a la NASA (_parent) </a> <br><br><br><br> </body > </html>

HIPERTEXTO Cambiar el color de los enlaces 30 Se puede modificar el color predefinido para el enlace (normal, visitado y activo). También se puede eliminar el típico subrayado. Los atributos que modifican el color del enlace pertenecen a la etiqueta <Body>. link = código de color : para los enlaces normales. vink = código de color : para los enlaces visitados. alink = código de color : para los enlaces activos (o en el momento de ser pulsados. Para eliminar el subrayado utilizaremos el atributo style="text-decoration:none en la etiqueta <A>.

STYLE 31 Permite definir reglas de estilo en el encabezado del documento. Puede utilizarse para poner un color de fondo al documento o adjudicar un color de fuente y fondo a las cabeceras.

<html> <head> <title> Ejercicio 3_2 </title> <body> </BODY> </HTML> <style> body { </style> </head> background-color: #FFCC66;} h1 {color: white; background-color: #FC9804;} <center><h1>tecnología </h1></center> <br> <br><br> <br><br> <br> <center><h1>información </h1></center> 32 Ejemplo 3_2 En el estilo del body añadimos la siguiente línea: background-image: url(imagenes/rosas.jpg)

Background-repeat 33 El valor inicial de "background-repeat es "repetir. Por eso en el ejemplo anterior la imagen de fondo se repite en sentido horizontal y vertical, formando un mosaico. Para que la imagen se repita solamente en sentido horizontal debemos usar: BODY {background-color: # FFFFFF; background-image: url (imagenes/rosas.jpg); background-repeat: repeat-x; } Para que la imagen se repita solamente en sentido vertical debemos usar: BODY {background-color: # FFFFFF; background-image: url (imágenes/rosas.jpg) background-repeat: repeat-y;}

Background-repeat 34 Finalmente, para que la imagen aparezca solamente una vez debemos usar: BODY {background-color: # FFFFFF; background-image: url (bg-flecha.gif); background-repeat: no-repeat; } Para colocar la imagen en el centro se utilizó backgroundposition

35 Ubicación de la imagen de fondo background-position Por defecto, una imagen de fondo se posiciona en la esquina superior izquierda de la pantalla. La propiedad background-position permite cambiar el valor por defecto y posicionar la imagen de fondo en cualquier lugar de la pantalla. Las coordenadas se pueden indicar como porcentajes del ancho de la pantalla, como unidades fijas (píxeles, centímetros, etc.) o se pueden usar las palabras "top" (superior), "bottom" (inferior), "center" (centro), "left" (izquierda) y "right" (derecha).

36 background-position

background-position 37 El modelo siguiente ilustra cómo funciona el sistema: La tabla siguiente proporciona varios ejemplos.

IMÁGENES 38 SRC ALIGN ALT BORDER WIDTH HEIGHT Para colocar una imagen debemos utilizar la etiqueta <img>. Los principales atributos de la etiqueta son: SRC = ruta_imagen ALIGN= left/right/top/middle/bottom. ALT = texto explicativo. BORDER=valor del borde. WIDTH= valor del ancho, HEIGHT = valor de la altura

IMÁGENES - SRC 39 Establece la localización de la imagen que queremos insertar, es decir, la ruta de acceso al archivo gráfico (imagen). La ruta de acceso puede ser relativa a la estructura de carpetas del sitio web o absoluta, en cuyo caso se debe dar la URL completa del archivo gráfico. <img SRC="imagenes/rosas.jpg"> (Creamos una carpeta llamada IMÁGENES y en ella guardamos una imagen llamada rosas.jpg)

IMÁGENES - ALIGN 40 Establece la alineación que va a tener la imagen en la página con respecto a la línea en la que se encuentra. La alineación puede ser: Horizontal (left o right) Vertical (top o bottom)

Ejemplo: Imágenes 41 <HTML> <HEAD> <TITLE> IMÁGENES </TITLE> </HEAD> <BODY> <marquee bgcolor="#006699" behavior="alternate" direction="rigth"> <font color="#ffff00" size="5"> IMÁGENES </font> </marquee> <H1> PÁGINA CON IMÁGENES </H1> <br> <h3 align="center"> <font color="00800"> Imagen sin texto </font></h3> <img SRC="imagenes/rosas.jpg"> <img src="imagenes/rosas.jpg" align="left> <BR><BR><BR><BR> En este ejemplo el texto aparece a la derecha de la imagen y si es muy extenso de dividirá en varias líneas. En este ejemplo el texto aparece a la derecha de la imagen y si es muy extenso de dividirá en varias líneas. </BODY> </HTML>

IMÁGENES - ALT 42 Permite mostrar una descripción de la imagen cuando no puede visualizarse o cuando pasamos el cursor del ratón sobre ella. <img alt="ramo de rosas" SRC="imagenes/rosas.jpg">

IMÁGENES - border 43 Este atributo permite definir un borde para la imagen. Puede tomar valores numéricos que representan el grosor del borde expresado en píxeles. Por defecto aparecerá el color negro a no ser que la imagen sea un enlace, en cuyo caso el color del borde será el color establecido por los vínculos. <img alt="ramo de rosas" SRC="imagenes/rosas.jpg" border="6">

IMÁGENES Y ENLACES 44 Podemos utilizar una imagen como objeto de enlace. <a href=http://www.peleteiro.com> <img alt="ramo de rosas" SRC="imagenes/rosas.jpg" border="6"> </a> Si no se desea el borde debemos escribir border= 0

TABLAS 45 Las tablas son posiblemente la manera más clara y cómoda de organizar la información. También es el modo más adecuado de maquetar texto y gráficos. Proporciona un mayor control sobre los textos que el parámetro ALIGN. Para definir una tabla, primero se deben especificar las características de la tabla, luego las de cada fila y dentro de ésta, cada celda. De un modo simplificado, el código de una tabla de una fila y dos columnas sería el siguiente: <TABLE> <TR> <TD> Contenido de la 1ª celda </TD> <TD> Contenido de la 2ª celda </TD> </TR> </TABLE>

TABLAS 46 Para mejorar el aspecto de la tabla, podemos añadir una serie de atributos a la etiqueta <table> que nos van a permitir modificar los siguientes parámetros: border cellspacing cellpadding width bgcolor background bordercolor align Grosor del borde que se dibujará alrededor de las celdas. Define el número de píxeles que separarán las celdas. Especifica el número de píxeles que habrá entre el borde de una celda y su contenido. Especifica la anchura de la tabla. Color de fondo. Imagen de fondo. Color del borde. Alinea la tabla a la izquierda (LEFT), derecha (RIGHT) o centro (CENTER)

TABLAS - Filas 47 Cada fila se define con una etiqueta <TR>, que puede tener los siguientes atributos: align valign Alinea el contenido de las celdas de la fila horizontalmente a izquierda (LEFT), a derecha (RIGHT) o centro (CENTER). Alinea el contenido de las celdas de la fila verticalmente arriba (TOP), abajo (BOTTOM) o centro (MIDDLE).

TABLAS - Celdas 48 Cada celda se define con una etiqueta <td> o <th> Estas etiquetas son equivalentes, pero <th> se utiliza para encabezados, de modo que su interior se escribirá por defecto en negrita y centrado. La etiqueta <td> tiene una serie de atributos que tienen como objetivo controlar el formato de la celda y su contenido.

TABLAS Atributos de la celda 49 align valign width nowrap colspan bgcolor background bordercolor rowspan Alinea el contenido de la celda horizontalmente a izquierda (LEFT), derecha (RIGHT) o centro (CENTER). Alinea el contenido de la celda verticalmente arriba (TOP), abajo (BOTTOM) o centro (MIDDLE) Especifica el ancho de la celda en píxeles Impide que, en el interior de la celda, se rompa la línea de texto aunque esta sea larga (si no figura nowrap el texto se distribuye en varios renglones respetando el ancho de la celda). Especifica el número de celdas de la fila situadas a la derecha de la actual que se unen a ésta (contando la celda actual). Color de fondo. Imagen de fondo. Color de borde Especifica el número de celdas de la columna situadas debajo de la actual que se unen a ésta

TABLAS - Título 50 La etiqueta <CAPTION> permite incluir un título en la tabla. Esta etiqueta tiene un atributo: ALIGN. ALIGN puede tomar dos valores: TOP (valor por defecto) pondrá el título en la parte superior de la tabla. BOTTOM coloca el título al final de la tabla.

LISTAS 51 Permiten enumerar una serie de contenidos. Todas ellas se pueden meter unas dentro de otras formando árboles o jerarquías. El formato general es el siguiente: <tipo_lista> <LI>Primer elemento <LI>Segundo elemento </tipo_lista> Donde <tipo_lista> pueden ser listas desordenadas <ul>, listas ordenadas <ol>, o listas de definiciones <dl>.

LISTAS Listas desordenadas (I) 52 La etiqueta <UL> nos permite presentar listas de elementos sin orden alguno. Cada elemento de la lista irá normalmente precedido por un círculo como se puede ver en el ejemplo: <ul> <LI>Primer elemento <LI>Segundo elemento </ul> Primer elemento Segundo elemento

LISTAS Listas desordenadas (II) 53 La etiqueta <UL> admite el parámetro TYPE donde se le puede indicar al navegador el dibujo que precederá a cada elemento de la lista. Para mayor flexibilidad se admite también como parámetro de la etiqueta <LI>. <ul> <LI type= square >Primer elemento <LI type= circle >Segundo elemento <LI type= disc >Tercer elemento </ul> Primer elemento osegundo elemento Tercer elemento

LISTAS Listas ordenadas (I) 54 La etiqueta <OL> nos permite presentar listas de elementos ordenados de menor a mayor. Normalmente cada elemento de la lista irá precedido por su número en el orden. <ol> <LI>Primer elemento <LI>Segundo elemento </ol> 1. Primer elemento 2. Segundo elemento

55 <ol> LISTAS Listas ordenadas (II) La etiqueta <OL> admite una serie de atributos para cambiar sus características. TYPE Indica al navegador el tipo de numeración que precederá a cada elemento de la lista. Puede ser igual a l, a, A, i, I. START = num,indica al navegador el número por el que se empezarán a contar los elementos de la lista. <LI TYPE="a">Primer elemento <LI TYPE="A">Segundo elemento <LI TYPE="i">Tercer elemento <LI TYPE="I">Cuarto elemento <LI TYPE= 1">Quinto elemento </ol> a. Primer elemento B. Segundo elemento iii. Tercer elemento IV. Cuarto elemento 5. Quinto elemento

LISTAS Listas de definiciones 56 Es el único tipo de lista que no utiliza la etiqueta <LI>. Al presentar una lista de definiciones, tiene que plasmar de manera distinta el objeto definido y la definición. Esto se hace por medio de las etiquetas <DT> y <DD> de la siguiente manera: <DL> <DT>Primer elemento <DD> Definición del primer elemento. <DT>Segundo elemento <DD> Definición del segundo elemento. </DL> Primer elemento Definición del primer elemento Segundo elemento Definición del segundo elemento.

57 Paleta de colores estándar Se puede usar cualquiera de las palabras clave o números hexadecimales mostrados en la tabla de arriba. DIRECCIONES DE INTERÉS: http://html-color-codes.info/codigos-de-colores-hexadecimales/ http://www.sitiosargentina.com.ar/webmaster/codigos%20de%20colores.htm

Actividad Realiza una copia del documento Ejemplo 2_2 Sobre la copia define distintas marquesinas. En distintas partes del documento Con distintos movimientos Y con distintos tipos de textos. 58 Guarda el archivo con el nombre de Copia Ejemplo 2_2 NOTA: Combina los encabezados con la marquesina. VOLVER

Ejercicio de enlaces 59 Crea tres documentos HTML cada uno con nombres diferentes. Créalos usando los tags que hemos visto en los capítulos anteriores. En el primer documento crea hipervínculos hacia los otros dos documentos. Cada uno de los otros documentos debe tener vínculos hacia los otros documentos. Marca una parte de alguno de los documentos usando el tag <A> y el atributo "name". Haz que la parte que marcaste en el punto anterior sea accesible a través de un hipervínculo en cada uno de los documentos.