Manual básico de HTML 1
Índice 1Estructura básica...3 Atributos de la etiqueta BODY...3 2Formación de parráfos:...4 Cabeceras / Headings...4 Párrafos / Paragraph...4 Múltiples espacios...4 Salto línea...5 Regla horizontal...5 3Símbolos especiales...6 4Listas...7 Listas sin orden...7 Listas con orden...7 Listas de definición...8 5Alineamiento...9 6Referencias/ Links...10 Tipos Absolutas o relativas?...10 Protocolos...11 Un link en la misma página...11 7Imagenes...12 Imagenes soportadas...12 Ejercicios...13 8Texto...14 Tamaño...14 Negrita y strong...14 Italica...14 Subrayado...14 Color...14 Preformateado...14 Énfasis...14 Teletipo...14 Cita...14 Tachado...15 Grande/Pequeño...15 SuperTexto...15 SubTexto...15 Dirección...15 9Tablas...16 Atributos de la TABLA...16 Título de la tabla (Caption)...17 Ejercicios...18 10FRAMES...20 11Formularios...21 12Validar código HTML...22 13Ejercicios...23 2
1 Estructura básica <HTML> <HEAD> <TITLE> Mi primera página </TITLE> </HEAD> <BODY BGCOLOR="#FF0000"> Un poco de texto </BODY> </HTML> Atributos de la etiqueta BODY 1. BGCOLOR define el color del fondo de la página 2. TEXT define el color del texto 3. LINK define el color de los links/referencias 4. VLINK define el color de los links visitados, una vez que han sido pulsados. 5. ALINK define el color cuando el cursor está sobre el link. 6. BACKGROUND define una imagen de fondo. = logo.gif 3
2 Formación de parráfos: Cabeceras / Headings <Hi> </Hi> <BODY> <H1> Heading 1 </H1> <H2> Heading 2 </H2> <H3> Heading 3 </H3> <H4> Heading 4 </H4> <H5> Heading 5 </H5> <H6> Heading 6 </H6> </BODY> Párrafos / Paragraph <P></P> <BODY> <H1> Heading 1 </H1> <P> Paragraph 1,... </P> <H2> Heading 2 </H2> <P> Paragraph 2,... </P> <H3> Heading 3 </H3> <P> Paragraph 3,... </P> <H4> Heading 4 </H4> <P> Paragraph 4,... </P> <H5> Heading 5 </H5> <P> Paragraph 5,... </P> <H6> Heading 6 </H6> <P> Paragraph 6,... </P> </BODY> Múltiples espacios <BODY> <P> Paragraph1 3Espacios</P> </BODY> 4
Salto línea <br><br/> <BODY> <H1> Heading 1 </H1> <P> Paragraph 1,... </P> Line 2 <BR> Line 3 <BR> </BODY> Regla horizontal <HR> <BODY> <H1> Heading 1 </H1> <P> Paragraph 1,... </P> Line 2 <BR> <HR> Line 3 <BR> </BODY> Atributos: 1. SIZE, el grosor de la linea, por defecto 2pixeles. 2. WIDTH, la longitud en % del ancho de la venta, por defecto 100%, <HR Width= 45% > 3. NOSHADE, dibuja una sombra debajo de la línea proporcionando un aspecto de 3D. 4. ALIGN, alinea la linea según el valor: left, center, right. 5. COLOR, atributo de color 5
3 Símbolos especiales 6
4 Listas Los elementos de las listas son items, cada item se representa <IL> </IL> Listas sin orden UL <UL> <LI> List item... </LI> <LI> List item... </LI> <LI> List item... </LI> </UL> Atributo Type, modifica la forma del punto: Disc (por defecto), circle (circulo), square (Cuadrado) <UL TYPE= SQUARE > </UL> Listas con orden <OL> <OL> <LI> List item... </LI> <LI> List item... </LI> <LI> List item... </LI> </OL> Atributos Type cambia el tipo de numeración. 7
Start, fija la númeración del primer elemento de la lista Listas de definición <DL>, donde <DT> define el término y <DD> define la descripción <DL> <DT> HTML </DT> <DD> Hyper Text Markup Language </DD> </DL> 8
5 Alineamiento 1. <div align= value > </div> Permite clasificar contenido! (con salto de línea) 2. <span> </span> Permite clasificar contenido! (sin salto de línea) <ul> <li> Pepe <span class= telefono > 971 90 90 90 </span> </li> <li> Juan <span class= telefono > 971 90 90 90 </span> </li> </ul> 3. <center> </center> 9
6 Referencias/ Links Se pueden ubicar en cualquier objeto: texto o imagen de una página <A HREF= URL > </A>, URL (Uniform resource locators) es la dirección a referenciar. Se puede refenciar elementos ubicados dentro del propio sistema o en otros lugares Tipos Absolutas o relativas? Absolutas Ejemplo: href= http://www.google.com/ Relativas Ejemplo: href= images/hello.gif En el mismo nivel Por encima Por debajo 10
Protocolos URLs, es la manera estandar de referenciar un servicio, un nombre de dominio, un puerto y una ruta de directorios: Servicio :// NombreDominio : puerto / ruta directorio Ej. http://www.1stvirtual.com:80/default.htm HTTP, HyperText Transport Protocol Ej. http://www.1stvirtual.com/default.htm FTP, File Transfer Protocolo Ej. ftp://ftp.1stvirtual.com/prizes/brbr.wav NEWS, Grupos de noticias Ej. news:alt.internet.services EMAIL, Referencia de un link, Cuidado con el spam! Ej. mailto:webmaster@hola.com TELNET, Remote Terminal Emulation Eh. telnet://media.mit.edu Ejemplo: Un link en la misma página Son links que permite situar la vista del navegador sobre un contenido especifico dentro de la misma página. Primer paso: definir el destino, con el atributo id. Se puede ubicar en <div> <span> <hx>,... por ejemplo: <h1 id= Noticias > Noticias </h1> Segundo paso: linkar el destino por ejemplo: <a href= #Noticias > Subir a noticias </a> Ejercicios 1. Crearemos una serie de carpetas... 2. Dibujar una lista de términos A, B, C, D, E... Z, como la de la siguiente figura: 11
12
7 Imagenes Imagenes soportadas GIF, Grapic Interchange Format, usa un máximo de 256 colores. Propiedades: Interlaniado: permite que la imagen se vaya cargando poco a poco por el navegador. Transparencias GIFs animados! JPG, JPEG: Joint Photographic Expert Group, la mejor para imagenes de calidad pues contiene miles de colores. PNG: Portable Network Graphics BMP: MS Windows Bitmap TIFF: Tagged Image File Format Insertando imagen: <IMG> </IMG>, define una imagen sobre la página. Atributos: SRC, la ubicación de la imagen ALT, alternativa al texto, es una etiqueta que define la imagen. Se muestra cuando se pasa el cursor por encima o cuando el navegador no visualiza las imagenes. Align, permite alinear la imagen: Bottom, abajo Middle, en medio Top, arriba Left, izquierda Right, derecha TexTop, sobre testo ABSMiddle, en medio según el monitor Baseline, no molesta al texto ABSBottom, abajo según el monitor Width, el ancho de la imagen en pixeles Height, la altura de la imagen en pixeles Border, dibuja una linea alrededor de la imagen 13
Ejercicios 1. Poner una imagen como fondo de la página 2. Alinear la imagen encima, en medio y abajo dentro de un texto 3. Poner una imagen al 25%, al 50% 100% y al 200% de su tamaño original. 4. Poner un link a una imagen 14
8 Texto Tamaño <Font size= +3 > </Font> Fija la fuente a un tamaño 3 veces más grande de lo normal. Va desde 1 a 7 y puede usarse + o -. Por defecto, el tamaño del texto es 3. Negrita y strong <B> Negrrita </B> <Strong> Negrita </Strong> Italica <I> Italica </i> Subrayado <u> subrayado </u> Color <Font color= #RRGGBB > texto </FONT> Preformateado Usa fuente mono-espaciadas, parecidas a las máquinas de escribir. Suele usarse para mostrar código de programas o texto suelto. Tal como se escribe se muestra asi: (con espacios, tabulaciones, saltos de línea,...) <PRE> preformatted</pre> Énfasis <EM> Enfasis </EM> Teletipo <TT> Teletipo </TT> Cita Citas a libros: <Cite> El Quijote </Cite> Citás pequeñas: <q> Ser o no ser </q> Citas más grandes 15
<Blockquote> </Blockquote> Tachado <Strike> HOLA </Strike> Grande/Pequeño <BIG> Grande </BIG> <SMALL> Pequeño </SMALL> SuperTexto <SUB> x² </SUB> SubTexto <SUP> log 10</SUP> Dirección <Address> </Address> 16
9 Tablas Para definir la tabla: <Table> </Table> Cada tabla tiene Filas: TR table row/fila y cada fila tiene columnas TH Columna principal (no es necesario) TD Columna de datos Orden de definición: TABLA FILAS COLUMAS Una celda puede contener otra tabla! Atributos de la TABLA <Table> BGColor, color del fondo Width se puede especificar el ancho como un número absoluto de pixeles o un porcentaje. Border: Dibuja una linea alrededor de la tabla.. Valor 0, hace desaparecer el borde. Algunos navegadores no soportan dibujar bordes sobre celdas vacias ( ) Cellsspacing, espacio entre celdas, es representado en pixeles. Cellpadding, espacio entre los bordes y el contenido de una celda, especificado en pixeles. Align: center, lefth, right. No esta muy bien soportado mejor <DIV> o <CENTER> Background, imagen de fondo 17
BorderColor, el color del borde BorderColorLight,el color más claro del borde (sombreado, 3D) BorderColorDark, el color más oscuro del borde (sombreado, 3D) Título de la tabla (Caption) Atributos de las celdas (TD y TH) Colspan, especifica cuantas columnas se abarcaran (fusionar columnas) Rowspan, especifica cuantas filas se abarcaran (fusionar filas) Align, el contenido de la celda se alinea: left, center, right Valign, alinea verticalmente: top (arriba), middle (medio), bottom(abajo) Background, imagen de fondo Bgcolor, color de fondo width, el ancho de la celda, en pixeles o usando un porcentaje. heigh, el alto de la celda, en pixeles o usando un porcentaje.t 18
Ejercicios 1. Haz las siguientes tablas en html: Una tabla sin bordes Red Blue Green Rojo Azul Verde Vermell Blau Verd Cabeceras verticales como horizontales Nombre Telefono Direccón Pepe 90839234 Mi casa Juan 30940388 Su casa Nombre Pepe Juan Telefono 90839234 30940388 Dirección Mi Casa Su casa Celdas vacias Lista de compras Cantidad Precio Producto1 10 10 Producto2 1 Tablas con caption! Añade el siguiente título a la tabla anterior: Factural oficial Tablas que abarcan más de una columna Nombre Telefonos Juan 348938420 91839849391 Nombre Juan Telefonos 348938420 91839849391 19
Alinear el contenido de una celda Producto Cantidad Precio Naranjas 10 100 Cebollas 4 80 Pasta 1 10 Suma 190 Tabla con elementos Esto es un párrafo Esto es otro párrafo Una lista: Manzanas Mandarinas Naranajas Estoy en negrita Estoy en cursiva y centrado CellPading, espacio entre los bordes y el contenido Primero Tercero Segundo Cuarto CellSpacing, distancia entre las celdas (la misma que lo anterior... pero ahora con las celdas) Poner una imagen a la tabla Poner una imagen a la celda Una tabla con otra tabla en su interior Cuestión Porcentajes Listas Primera 50% 30% 5% 5% Si No Ns/Nc Segunda Por definir 1. Si 2. No 3. Ns/Nc 2. Haz un prototipo de tu diseño y conviertelo en una tabla!!! 20
10 FRAMES No gracías! Qué son? 21
11 Formularios Trabajo futuro 22
12 Validar código HTML Para comprobar si nuestra página web cumple con el estandar (se abren y se cierran todos los elementos, están bien estructurados,...): http://validator.w3.org/ 23
13 Proyecto Trabajo futuro 24