6- Vicente Beneito: HTML

"Estos son mis apuntes personales tomados de Isabel y del libro que usamos en el aula, por lo tanto, es muy probable que contenga algunas erratas, ya que la meticulosidad varía en función de la motivación del día o el momento en el que se toman los apuntes..." X-D

"Prometo rectificar las que puedan surgir"

_____________________________________________________________________________________

*****************************************************************************************************************

CURSO DISEÑO WEB Y MULTIMEDIA // BLOQUE HTML // VICENTE BENEITO URBANO 11/06/2012

*****************************************************************************************************************

INDICE:

Tema 1: Reglas básicas
Tema 2: Etiquetas y atributos
Tema 3: Formato de texto
Tema 4: Propiedades del texto
Tema 5: Listas
Tema 6: Enlaces, Anclas y Favicon
Tema 7: Imágenes
Tema 8: Tablas
Tema 9: Tablas avanzadas
Tema 10: Formularios
Tema 11: Marcos
Tema 12: Marcos avanzados
Extra: Mapa de imagenes

_____________________________________________________________________________________

Tema 1: Reglas básicas:

_____________________________________________________________________________________

- Los espacios no se tienen en cuenta.

- Indiferencia entre mayúsculas y minúsculas.

- Suele haber etiquetas de inicio y final aunque no siempre.

- Las etiquetas se pueden anidar.

- Estructura: (nombre etiqueta + espacio + atributo + = + “valor”)

Volver a índice

_____________________________________________________________________________________

Tema 2: Etiquetas y atributos:

_____________________________________________________________________________________

----------------------------------------------------------------------------------------------------------------

* Estructura base: <html>

<head>

</head>

<body>

</body>

</html>

-----------------------------------------------------------------------------------------------------------------

-text (color del texto)

* <body -bgcolor (color del fondo)> </body>

-background (imagen de fondo)

---------------------------------------------------------------------------------------------------------------

Volver a índice

_____________________________________________________________________________________

Tema 3: Formato de texto

_____________________________________________________________________________________

---------------------------------------------------------------------------------------------------------------

* Caracteres especiales:

-   (espacio en blanco)

-  (marca registrada)

- ® (R de registrado)

--------------------------------------------------------------------------------------------------------------

* <BR> (Salto de línea) No es necesario cerrar esta etiqueta

--------------------------------------------------------------------------------------------------------------

* <p> </p> (indica párrafo)

--------------------------------------------------------------------------------------------------------------

* <h1> </h1> (indica cabecera, del h1 al h6 para tamaño)

--------------------------------------------------------------------------------------------------------------

* ALIGN="Right/center/left/justify"> (ATRIBUTO PARA ALINEAR TEXTO)

--------------------------------------------------------------------------------------------------------------

* <HR> (línea horizontal y no tiene cierre)

ATRIBUTOS PARA <HR>

- width (tamaño en % o numérico)

- size (grosor de línea

- align (alineación de la línea)

- noshade (sin sombra la línea)

--------------------------------------------------------------------------------------------------------------

*  (comentarios que no se mostraran en la pagina)

--------------------------------------------------------------------------------------------------------------

Volver a índice

_____________________________________________________________________________________

Tema 4: Propiedades del texto

_____________________________________________________________________________________

---------------------------------------------------------------------------------------------------------------

* <FONT FACE="verdana">EJEMPLO</FONT> (indica la fuente del texto)

---------------------------------------------------------------------------------------------------------------

* <FONT COLOR="red" (indica el color del texto. En ingles o código)

---------------------------------------------------------------------------------------------------------------

* <FONT SIZE="+4" (indica el tamaño de la fuente siendo 3 el default

y indicándolo con + k se suma a 3, en este caso el

tamaño es 7, también se puede poner solo numérico)

---------------------------------------------------------------------------------------------------------------

* <B></B> (Etiqueta de texto: NEGRITA)

---------------------------------------------------------------------------------------------------------------

* <U></U> (Etiqueta de texto: SUBRAYADO)

---------------------------------------------------------------------------------------------------------------

* <I></I> (Etiqueta de texto: CURSIVA)

---------------------------------------------------------------------------------------------------------------

* <S></S> (Etiqueta de texto: TACHADO)

---------------------------------------------------------------------------------------------------------------

* <SUB></SUB> (Etiqueta de texto: SUBÍNDICE)

---------------------------------------------------------------------------------------------------------------

* <SUP></SUP> (Etiqueta de texto: SUPERÍNDICE)

---------------------------------------------------------------------------------------------------------------

IMPORTANTE: ETIQUETAS ANIDADAS

Volver a índice

_____________________________________________________________________________________

Tema 5: Listas

_____________________________________________________________________________________

---------------------------------------------------------------------------------------------------------------

LISTA NUMERADA:

---------------------------------------------------------------------------------------------------------------

* <OL></OL> (Etiqueta de lista numerada)

* TYPE (Atributo para la etiqueta) TYPE="a" "A" "1" "i" "I"

* START (Atributo para la etiqueta que indica el comienzo)

* <LI></LI> (ENUMERA LOS ELEMENTOS DE LA LISTA)

---------------------------------------------------------------------------------------------------------------

LISTA SIN NUMERAR:

---------------------------------------------------------------------------------------------------------------

* <UL></UL> (Etiqueta de lista sin numerar)

* TYPE (Atributo para la etiqueta) TYPE= "circle" "square" "disc"

* <LI></LI> (ENUMERA LOS ELEMENTOS DE LA LISTA)

---------------------------------------------------------------------------------------------------------------

LISTA DE DEFINICIÓN

---------------------------------------------------------------------------------------------------------------

* <DL></DL> (Etiqueta de lista de definición)

* <DD></DD> (Indica el termino a definir)

* <DT></DT> (Indica la definición del término)

----------------------------------------------------------------------------------------------------------------

IMPORTANTE: SE PUEDEN ANIDAR COMO SIEMPRE

Volver a índice

_____________________________________________________________________________________

Tema 6: Enlaces, Anclas y Favicon

_____________________________________________________________________________________

---------------------------------------------------------------------------------------------------------------

* <A></A> (Etiqueta de ENLACE)

---------------------------------------------------------------------------------------------------------------

ATRIBUTOS:

TITLE="Titulo" (Título cuando dejamos el ratón sin clic)

TARGET="_BLANK" "_SELF" (Abre Nueva ventana o en la misma)

HREF="RUTA" (Indica la ruta del enlace)

EJEMPLO: <A HREF="RUTA" TARGET="BLANK" TITLE="TITULO">TEXTO</A>

---------------------------------------------------------------------------------------------------------------

*TIPOS DE RUTA:

---------------------------------------------------------------------------------------------------------------

ABSOLUTA: http://paginaweb.com

RELATIVA: ruta1/ruta2/ruta3/archivo.html

* La ruta RELATIVA se indica a razón del nivel del archivo HTML que

estemos usando.

* ../ (indica subir nivel en las carpetas)

EJEMPLO: ../carpeta/ejemplo.html

----------------------------------------------------------------------------------------------------------------

* ANCLAS

----------------------------------------------------------------------------------------------------------------

(Sirve para trasladarnos en la misma página a distintas partes)

PUNTO DONDE PULSAR <A href="#nombre">Texto del enlace</A>

PUNTO DE DESTINO <A NAME="nombre">

----------------------------------------------------------------------------------------------------------------

* La etiqueta <A></A> con el atributo HREF también se puede usar

para enlazar documentos, archivos y el mail

EJEMPLO: <A HREF="documento">texto</A>

----------------------------------------------------------------------------------------------------------------

* ENLACE A EMAIL CON MAILTO:

----------------------------------------------------------------------------------------------------------------

<A HREF="MAILTO:ejemplo@gmail.com">Texto del enlace</A>

----------------------------------------------------------------------------------------------------------------

* ATRIBUTO LINK/ULINK en <BODY></BODY>

----------------------------------------------------------------------------------------------------------------

<BODY LINK="RED"></BODY> (Cambiamos el color del link a rojo)

<BODY ULINK="GREEN"></BODY> (cambiamos el color de los link

ya abiertos anteriormente)

----------------------------------------------------------------------------------------------------------------

* FAVICON (pequeña imagen al lado del título de la página)

----------------------------------------------------------------------------------------------------------------

- Se agrega en el <HEAD> y nunca en <body>

- <link rel="shortcut icon" type="image/ico" href="ruta"/>

- rel (descripcion) type (tipo de archivo) href (ruta)

----------------------------------------------------------------------------------------------------------------

Volver a índice

_____________________________________________________________________________________

Tema 7: Imágenes

_____________________________________________________________________________________

-----------------------------------------------------------------------------------------------------------------

* <IMG></IMG> (Etiqueta para insertar imagen)

---------------------------------------------------------------------

Atributos:

- SRC (Como href para indicar la ruta)

- Width (Tamaño vertical en pixel)

- Height (Tamaño horizontal en pixel)

- Align rigth/left/top/middle/bottom

(Indica la alineación del texto)

- STYLE

EJEMPLO: <IMG SCR="cometa.jpg" WIDTH="100" HEIGHT="100" ALIGN="MIDDLE">

-----------------------------------------------------------------------------------------------------------------

* <DIV></DIV> (Indica capa/caja y se usa para posicionar una imagen)

-----------------------------------------------------------------------------------------------------------------

Volver a índice

_____________________________________________________________________________________

Tema 8: Tablas

_____________________________________________________________________________________

-----------------------------------------------------------------------------------------------------------------

* <TABLE></TABLE> (Etiqueta de tabla)

-----------------------------------------------------------------------------------------------------------------

<TR> (FILAS)

<TD> (COLUMNAS)

* EJEMPLO: 3 filas x 3 columnas

<TABLE>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

</TABLE>

-----------------------------------------------------------------------------------------------------------------

* ATRIBUTOS: (tanto en filas como en columnas o en la etiqueta)

-----------------------------------------------------------------------------------------------------------------

- BORDER

- BORDERCOLOR

- WIDTH

- HEIGHT

- BACKGROUND

- BGCOLOR

- ALIGN

- VALIGN

----------------------------------------------------------------------------------------------------------------

Volver a índice

_____________________________________________________________________________________

Tema 9: Tablas avanzadas

_____________________________________________________________________________________

-----------------------------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------------------------

* Cellspacing (atributo para agrandar lo de fuera de las celdas)

* Cellpadding (atributo para agrandar la celda)

* frame (estilos a la línea fuera de la tabla) -atributos pág. 120 del

* rules (estilos de los bodes de la celda) libro-

-----------------------------------------------------------------------------------------------------------------

<TD....>

-----------------------------------------------------------------------------------------------------------------

* Rowspan (atributo del <TD> para combinar celdas y indicar nº celdas)

* Colspan (atributo del <TD> para combinar columnas)

-----------------------------------------------------------------------------------------------------------------

<col> etiqueta que modifica toda una columna

-----------------------------------------------------------------------------------------------------------------

- BORDER

- BORDERCOLOR

- WIDTH

- HEIGHT

- BACKGROUND

- BGCOLOR

- ALIGN

- VALIGN

-----------------------------------------------------------------------------------------------------------------

<CAPTION> TITULO </caption> (titulo de la tabla por defecto centrada)

-----------------------------------------------------------------------------------------------------------------

atributos: ALIGN (top, bottom, left, right)

* <caption> siempre va entre <table>

<caption> TITULO </caption>

</table>

-----------------------------------------------------------------------------------------------------------------

Volver a índice

_____________________________________________________________________________________

Tema 10: Formularios

_____________________________________________________________________________________

----------------------------------------------------------------------------------------------------------------

* <FORM></FORM> etiqueta para crear formulario

----------------------------------------------------------------------------------------------------------------

ATRIBUTOS:

- action (dirección donde se van a quedar los datos)

- method (método por el que se envían los datos)

----------------------------------------------------------------------------------------------------------------

<input> (no hace falta cierre)(Etiqueta de caja de texto)

----------------------------------------------------------------------------------------------------------------

ATRIBUTOS:

- Name (indica nombre)

- Size (indica tamaño)

- Value (indica valor)

- maxlength (indica cantidad de caracteres posibles)

- Type (indica typo9

-----------------------------------------------------------------------------------------------------------------

<textarea></textarea> (etiqueta para cajones de texto)

-----------------------------------------------------------------------------------------------------------------

ATRIBUTOS:

- Name

- Rows

- Cols

-----------------------------------------------------------------------------------------------------------------

<fieldset></fieldset> (agrupa con un titulo y caja un grupo de etiquetas)

-----------------------------------------------------------------------------------------------------------------

* <legend>DATOS</legend>

* Entre los <form> para agrupar.Input van dentro.

-----------------------------------------------------------------------------------------------------------------

<select></select> (crear una lista de datos clickeable)

-----------------------------------------------------------------------------------------------------------------

<option> (para cada una de las opciones)

<value> (indica el valor para la lista)

<name> (indica el nombre de la lista)

<size> (indica nuero de elementos a mostrar)

<multiple> (atributo para que muestre más elementos)

EJEMPLO:

<option value="DATO1"> internet</option>

<option value="DATO3"> radio</option>

<option value="DATO4">revista</option>

</select>

---------------------------------------------------------------------------------------------------------------

TIPOS DE TYPE

---------------------------------------------------------------------------------------------------------------

type="image" (imagen como un botón de envío)

type="password" (para contraseñas sale encriptado por puntos)

type="reset" (reinicia los campos como en el inicio)

type="checkbox" (cajita para seleccionar)

type="submit" (botón para enviar los datos)

type="reset" (botón para restear las opciones)

type="radio" (seleccionar opciones, se representa con un circulo

el atributo name="NOMBRE" deben ser el mismo para

que seleccione uno de ese grupo)

----------------------------------------------------------------------------------------------------------------

Volver a índice
_____________________________________________________________________________________

TEMA 11: MARCOS

_____________________________________________________________________________________

-----------------------------------------------------------------------------------------------------------------

* Sirve para dividir el documento en varias secciones y pueden cargar

distintos HTML.

* Estructura básica:

<html>

<head>

</head>

</frameset>

</html>

---------------------------------------------------------------------------------------------------------------

<frameset></frameset> (etiqueta de marcos y sustituye por <body>)

---------------------------------------------------------------------------------------------------------------

ATRIBUTOS:

- COLS ( cols="100,*> el asterisco indica EL RESTO DE PAGINA)

con la coma indicamos el tamaño de las áreas

- rows ( rows="33%,33%,33%")

- Border (tamaño del borde)

- Bordercolor (color del borde)

- frameborder (indica si se verá o no el borde. 0,1 no o si)

---------------------------------------------------------------------------------------------------------------

<FRAME> IMPORTANTE <frame> tantos como comas, y sin cierre

---------------------------------------------------------------------------------------------------------------

ATRIBUTOS:

- src (indica ruta)

- Scrolling (para que no aparezca la barra de desplazamiento)

scrolling="si"

scrolling="NO"

- NORESIZE (no se puede mover las líneas)

- Marginwidth (la separación del contenido con respecto al marco)

- Marginheight (la separación del contenido con respecto al marco)

- Name (indica nombre para crear enlaces y que se vean a la elección)

Volver a índice

_____________________________________________________________________________________

TEMA 12 MARCOS AVANZADOS

_____________________________________________________________________________________

---------------------------------------------------------------------------------------------------------------

Se enlaza como las tablas, EJEMPLO:

<html>

<head>

</head>

<frame>

<frame>

</frameset>

</html>

------------------------------------------------------------------------------------------------------------------

ENLACES Y MARCOS

------------------------------------------------------------------------------------------------------------------

En la carpeta de ejercicios**

Volver a índice

_________________________________________________________________________________________________

EXTRA 1 y 2 MAPA DE IMÁGENES

_________________________________________________________________________________________________

------------------------------------------------------------------------------------------------------------------

MAPA DE IMÁGENES <map></map>

------------------------------------------------------------------------------------------------------------------

ATRIBUTO: (también se puede usar en la etiqueta de <img como atributo)

- usemap (usemap="map")

------------------------------------------------------------------------------------------------------------------

------------------------------------------------------------------------------------------------------------------

ATRIBUTOS:

- shape="rect" rectángulo

- shape="circle" circulo

- Shape="poly" polígono

- coord="x,x,x,x" Atributo que indica coordenadas

- href="#" Enlazar a la imagen

-----------------------------------------------------------------------------------------------------------------

Rectángulo = "x,y, x,y" (para dos puntos)

ovalo = "x,y,radio" (3 datos)

polígono = "x,y, x,y, x,y, x,y," (tantos puntos como tú quieras)

-----------------------------------------------------------------------------------------------------------------

VISOR DE IMÁGENES

-----------------------------------------------------------------------------------------------------------------

http://lokeshdhakar.com/projects/lightbox2/

-----------------------------------------------------------------------------------------------------------------

INCLUIR LIGHTBOX EN LA PÁGINA

-----------------------------------------------------------------------------------------------------------------

Importante: para que funcione en nuestra web tendremos que introducir

entre el <head>

EJEMPLO:

------------------------------------------------------------------------------------------------------------------

INSERTAR UNA IMAGEN EN LIGHTBOX

------------------------------------------------------------------------------------------------------------------

Para insertar el lightbox tan solo pondremos un enlace:

<a con HREF="RUTA" y añadimos el atributo REL="NOMBRE DEL JS"

------------------------------------------------------------------------------------------------------------------

ATRIBUTO REL="NOMBRE DEL JS" (atributo que indica que js va a ejecutar)

------------------------------------------------------------------------------------------------------------------

INSERTAR UNA GALERÍA DE IMÁGENES EN LIGHTBOX

------------------------------------------------------------------------------------------------------------------

Rel="NOMBRE[GALERÍA]"

EJEMPLO:

-----------------------------------------------------------------------------------------------------------------

Volver a índice

6- Vicente Beneito

Páginas

HTML

INDICE:

1 comentario: