Escolar Documentos
Profissional Documentos
Cultura Documentos
CONCEPTOS
HTML (Hyper Text Markup Language)
Lenguaje con el que se escriben paginas web. Es un lenguaje de hipertexto. Permite escribir texto de forma estructurada. Compuesto por etiquetas (marcan el inicio y fin de cada elemento del documento) Documento hipertexto contiene texto, imgenes sonido y video (documento multimedia).
NAVEGADORES
Interpreta el cdigo HTML de la pgina. Internet Explorer y Netscape Navigator
EDITORES
Programa que permite redactar documentos.
Editores visuales. Evitan la escritura de cdigo HTML (la pagina se construye). Editores de texto. La pagina se crea a travs del cdigo HTML.
<body bgcolor="#0000FF"> <body bgcolor="blue"> <body background="fondo.gif"> <body background="imagenes/fondo.gif"> <body text="#FF0000"> <body leftmargin="20" topmargin="0" marginwidth="20" marginheight="0" >
Colores en hexadecimal
Color Hexadecimal #FFFFFF #000000 #000080 #0000FF #008000 #008080 #00FF00 Nombre white black navy blue green teal lime
#00FFFF
#800000 #800080 #808000 #808080 #C0C0C0 #FF0000 #FF00FF #FFFF00
aqua
maroon purple olive gray silver red fuchsia yellow
TEXTO
Se requiere dar formato al texto
<y>
é
É í Í ó Ó ú Ú ñ Ñ ™
<pre> y </pre>
texto preformateado. Aparece tal como se lo escribe, no requiere saltos de linea ni espacios en blanco en HTML
No permite incluir en el texto etiquetas: <img> (para incluir imgenes), <object> (para incluir objetos como animaciones), <big>, <small>, <sub> ni <sup>
separar secciones dentro de una misma pgina. no precisa ninguna etiqueta de cierre
Atributo
Significado alineacin de la regla dentro de la pgina ancho de la regla alto de la regla eliminar el sombreado de la regla
Posibles valores left (izquierda) right (derecha) center (centro) un nmero, acompaado de % cuando se desee que sea en porcentaje un nmero no puede tomar valores
align
<html> <head> <title>pagina de inicio</title> </head> <body bgcolor="99CC99" background="imagenes/fondopatas.gif" leftmargin="40" topmargin="40" marginwidth="40" marginheight="40"> hola mundo este es un texto comn como estn, cancinó<br> cuando se esta pensando <pre>Hola, BIENVENIDOS esta ES MI PGINA WEB y esto un texto preformateado</pre> Inicio de un separador horizontal<hr align="left" width="50%" size="10" noshade>Bienvenidos a mi pgina. </body> </html>
<font> y </font>
Atributo face Significado fuente
color
size
<font color="#993366" size="4" face="Arial"> Bienvenidos a mi pgina, texto con propiedades </font>
<i>
<u> <s> <tt> <big> <small>
cursiva
subrayado tachado
<p> y </p>
Parrfos atributo align: cuyos valores pueden ser left (izquierda), right (derecha), center (centrado) o justify (justificado).
<p align="center">este es un parrafo muy simple (centrado)</p> <p>Aquí encontra otro prrafo (la separacion es amplia).</p> <div> y </div> agrupar bloques de texto, pero con la diferencia de que la separacin entre ellos es menor. Tiene los mismos atributos de alineacin.
<div align="center">otro parrafo con agrupacion de bloques </div> <div>note que el espacio es menor</div> <center> y </center> Texto centrado
<center>texto centrado</center>
Encabezados - Ttulos
Etiqueta Ejemplo
Ttulo 2: HTML
Ttulo 3: HTML
Ttulo 4: HTML
Ttulo 5: HTML
Ttulo 6: HTML
<H3>
Marquesinas
<marquee> y </marquee>.
<marquee bgcolor="#006699" behavior="alternate" direction="right"> <b><font color="#FFFFCC" size="5">Esto es una marquesina </font></b> </marquee>
behavior
direction
Listas
<li>Perro</li> <li>Gato</li> <li>Periquito</li> Perro Gato Periquito
<ul> y </ul>. <ul type="circle"> <li>Perro</li> <li>Gato</li> <li>Periquito</li> </ul> <ol> y </ol>.
Lista desordenada
vieta
circle (crculo), disc (disco) o square (cuadrado).
Lista ordenada
type
1 (nmeros), a (letras minsculas), A (letras maysculas), i (numeros romanos en minsculas) o I (nmeros romanos en maysculas).
Un avance
1. Crear una pagina de inicio en blanco 2. Colocar un titulo centrado y subrayado (mi pagina personal) 3. Insertar una marquesina (con fondo rojo, tamao de letra 5, y comportamiento continuo. 4. Insertar un prrafo de texto con sangra a la izquierda y alineacin a la izquierda. 5. Crear una divisin horizontal . 6. Escribir un texto ( prrafo) centrado que indica una frase arbitraria. 7. Insertar una divisin horizontal. 8. Insertar un texto preformateado que introduce a nuestras ocupaciones principales (centrado). 9. Crear una lista que muestra las reas de inters de informacin. 10.Insertar listas anidadas a cada item.
ENLACES
hiperenlace, hipervnculo, o vnculo
<a> y </a>.
href especifica la pgina a la que est asociado el enlace
<a href="inicio1.html">cambiar a otro documento "ref. relativa"</a> <a href="../mipagina/imagenes/inicio1.html">otra carpeta </a>
<a href="//D:/diplomado/tutoriales/www.aulaclic.es/html/index.htm">navegar por el tutorial</a>
Correo electrnico:
<a href="mailto:jucebeva@hotmail.com">mi e-mail </a>
<a href="sib1.doc" tarjet=_blank > haz clic aquí para descargarte el fichero </a>
IMAGENES
<img> src : especifica el nombre de la imagen Las imgenes pueden ser de formatos diferentes: bmp, gif, jpg, etc
El atributo border puede tomar valores numricos <img src="imagenes/gatito.gif" alt="imagen ejemplo" border="4">
tamao de la imagen
width (anchura) y height (altura)
<img src="imagenes/foto.gif" alt="mi fiesta" width="500" height="400">
Alineacion de la imagen
align
Este atributo indica la alineacin de las imgenes con respecto a la lnea de texto en la que se encuentran.
Los valores del atributo align pueden ser los siguientes: bottom inferior
left
middle right texttop top
izquierda
medio derecha texto superior superior
TABLAS
<table> y </table> <tr> y </tr> <td> y </td> INICO Y FIN DE TABLA Inicio y fin de fila columna o celda inicio de tabla inicio de fila 1 celda 1 de la fila 1 celda 2 de la fila 1 fin de la fila 1 inicio de fila 2 celda 1 de la fila 2 celda 2 de la fila 2 fin de la fila 2 fin de la tabla
<table> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> .. </table>
width
height cellpadding cellspacing border align bgcolor background bordercolor
ancho de la tabla
altura de la tabla espacio entre el contenido de las celdas y el borde espacio entre celdas grosor del borde alineacin de la tabla dentro de la pgina color de fondo imagen de fondo color del borde
GATITO
OTRO CUALQUIERA
O SIMPLEMENTE TEXTO
<table border="2"> <tr> <td>nombre</td> <td>descripocion</td> <td>FOTOGRAFIA</td> </tr> <tr> <td>FIESTA 3 DE JULIO</td> <td>POR EL CENTENARIO DE LA FACULTAD</td> <td>aqui va texto, imagenes, video</td> </tr> <tr> <td>GATITO</td> <td>GRAFICO EXTARIDO DEL TUTORIAL</td> <td><img src="imagenes/gatito.gif" alt="imagen ejemplo" border="4"></td> </tr> <tr> <td>OTRO CUALQUIERA</td> <td>PUEDE IR CUALQUIER COSA</td> <td>O SIMPLEMENTE TEXTO</td> </tr> </table>
align
valign
bgcolor background
bordercolor
nmero hexadecimal
Titulo de columna
<th> y </th> idntico a td pero centrado y negrilla
Combinacin de celdas
colspan y rowspan colspan especifica el nmero de columnas por las que se extender la celda rowspan especifica el nmero de filas por las que se extender la celda
combinacin de 4 columnas DATOS NOMBRE NOTA 1 JUAN CARLOS LUISA 10.75 20.65 NOTA 2 12.97 2.65 16/AGOSTO/2007 30/AGOSTO/2007 FECHA
<table width="575" border="2" cellspacing="2"> <tr align="center" valign="middle"> <th colspan="4">combinacion de 4 columnas</th> </tr> <tr align="center" valign="middle"> <th rowspan="2">NOMBRE</th> <th colspan="2">DATOS</th> <th rowspan="2">FECHA</th> </tr> <tr align="center" valign="middle"> <th>NOTA 1</th> <th>NOTA 2</th> </tr> <tr align="center" valign="middle"> <td>JUAN CARLOS</td> <td>10.75</td> <td>12.97</td> <td>16/AGOSTO/2007</td> </tr> <tr align="center" valign="middle"> <td>LUISA</td> <td >20.65</td> <td >2.65</td> <td>30/AGOSTO/2007</td> </tr> </table>
MARCOS (FRAME)
<frameset> y </frameset> Define el conjunto de marcos no requiere las etiquetas <body> y </body>
Posibles valores un nmero (acompaado de % cuando se desee que sea en porcentaje) por cada columna, separados por comas. un nmero (acompaado de % cuando se desee que sea en porcentaje) por cada fila, separados por comas. Atributo Significado tamao de cada una de las columnas en que se divide el documento tamao de cada una de las columnas en que se divide el documento
cols
rows
frameborde r
framespaci ng border bordercolor
yes no
un nmero un nmero, acompaado de % cuando se desee que sea en porcentaje nmero hexadecimal
<frame>
Significado aparece o no el borde del marco nombre del marco si aparece, el usuario no podr redimensionar el tamao de este marco anchura del margen con respecto a los bordes del marco altura del margen con respecto a los bordes del marco se mostrar o no la barra de desplazamiento cuando la pgina del marco no se pueda visualizar completamente en l documento que se cargar en el marco
Posibles valores yes o 1 no o 0 cualquier valor no puede tomar valores un nmero, acompaado de % cuando se desee que sea en porcentaje un nmero, acompaado de % cuando se desee que sea en porcentaje yes no auto ruta y nombre del documento
scrolling
src
<frameset rows="90,*" framespacing="3" frameborder="yes" border="3" bordercolor="blue"> <frame src="titulo.html" name="marcosuperior" frameborder="yes" scrolling="yes" noresize> <frameset cols="150,*" framespacing="3" frameborder="yes" border="3" bordercolor="red"> <frame src="menu.html" name="marcoizquierdo" scrolling="yes" noresize> <frame src="inicio.html" name="marcoderecho"> </frameset> </frameset>
FORMULARIOS
Permite recoger datos introducidos por el usuario.
Un formulario est formado, entre otras cosas, por etiquetas, campos de texto, mens desplegables, y botones
<form> y </form> indican el inicio y fin de un formulario
El atributo action indica una direccin de correo electrnico o la direccin del programa que se encargar de procesar el contenido del formulario. El atributo method indica el metodo mediante el que se transfieren las variables del formulario. Su valor puede ser get o post
ELEMENTOS DE UN FORMULARIO
<textarea> y </textarea> rea de texto
atributo type indica el tipo de elemento de entrada. El atributo size indica el nmero de caracteres
El atributo maxlenght indica el nmero de caracteres
CONTRASEA
BOTON
<input name="boton" type="submit" value="Enviar"> <input name="casilla" type="checkbox" value="acepto" checked> <input name="prefiere" type="radio" value="estudiar" checked> <input name="prefiere" type="radio" value="trabajar">
CASILLA DE VERIFICACION
BOTON DE OPCION
SELECION MULTIPLE
<select name="animal" size="3" multiple> <option selected>---Elige animales---</option> <option value="ave">Loro</option> <option>Perro</option> <option>Gato</option> <option>Pez</option> </select>
RESTABLECER