Etiquetas y teoria html

601 views
474 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
601
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Etiquetas y teoria html

  1. 1. HTML & CSS ~ 0 ~ Estructura Básica <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title> Vocabulario de términos </title> </head> <body> <p align="center">Elige una letra</p> </body> </html> Diferentes Doctype Doctype XHTML 1.0 strict <!DOCTYPEhtmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Doctype XHTML 1.0 transitional <!DOCTYPEhtmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Doctype XHTML 1.0 frameset <!DOCTYPEhtmlPUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> Doctype HTML 4.01 strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Doctype HTML 4.01 transitional <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. 2. HTML & CSS ~ 1 ~ Doctype HTML 4.01 frameset <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> Formatear Texto <h1> </h1> Nivel de encabezado <b> </b> Texto en negrita <i> </i> Texto en cursiva <tt> </tt> Tipo máquina de escribir <sup> </sup> Letra superíndice <sub> </sub> Letra subíndice <big> </big> Aumenta el tamaño de letra <small> </small> Disminuye el tamaño de letra <p> </p> Delimita un párrafo <pre> </pre> Texto pre formateado <div align="001"> </div> Alinea el texto <address> </address> Dirección de correo postal. <hr size="tamaño"> Inserta una línea horizontal <br> Salto de línea < -- Comentario --> Inserta comentario align="001" Alineación de texto <body bgcolor="Color"> Fondo de la pagina Variables 001 left right center justify Color y tamaño de texto-fuente. <font color="código color"> </font> Color del texto <font size= "Tamaño "> </font> Tamaño de la fuente <font face="nombre fuente"> </font> Nombre de la fuente Listas. <ul> </ul> Lista no numerada <ol> </ol> Lista numerada <li> Añade un nuevo elemento a una lista <dl> </dl> Lista de términos 002
  3. 3. HTML & CSS ~ 2 ~ Variables 002 <dt> Identifica un nuevo termino <dd> Identifica la definición del termino Enlaces, links o hipervínculos A pagina Web <a href="Dirección de enlace/">Texto que se muestra</a> A dirección de correo <a href="mailto:Direccion de correo">Texto que se muestra</a> A lugar de la pagina <a href="#parrafo">Texto que se muestra</a> Imágenes <img src=”Ruta y extensión de la imagen"alt="Obligatorios tambien"> Atributos width="ancho" Ancho de la imagen height="alto" Alto de la imagen align="003" Alineación de la imagen alt=" comentario" Texto que se mostrara de la imagen border="tamaño" Borde de la imagen 003 Top bottom left Right Center arriba abajo izquierda derecha centrado Tablas Estructura: <table 004> <tr><th>Primera columna</th><th>Segunda columna</th></tr>(Encabezado) <tr><td>Primer elemento fila 1</td><td>Segundo elemento fila 1</td></tr> </table> Variables 004 Bgcolor="color" Color de fondo de la tabla, fila, donde se coloque Bordercolor="color" Color del borde, depende de donde se coloque Valing="003" Alinea verticalmente el contenido de la celda (td o th) Aling="001" Alinea el texto de la celda o del encabezado Background="enlace imagen" Coloca fondo a una tabla.
  4. 4. HTML & CSS ~ 3 ~ Cellspacing="Numero de pixeles" Espacio entre los bordes en pixeles. Cellpadding="Numero de pixeles" Espacio entre borde de la celda y contenido de la misma Height="Numero o porcentaje" Altura de la tabla Width="Numero o porcentaje" Define la anchura de la tabla Colspan=”numero de casillas” Une casillas horizontalmente. Rowspan=”Numero de casilla” Une casilla verticalmente. Frames Estructura: <iframe width="300" height=''250" src="http://www.jccm.es" frarneborder=l scrolling=yes id="frarnel" bordercolor="#FFFFFF" noresize></iframe> src=''URL" Se indica lo que se quiere abrir en el marco name=''nombre" Nombre del frame frameborder= "1" Grosor del borde scrolling=''yes or no" Mostrar barra de desplazamiento bordercolor=''color" Color del borde Noresie Para que no se pueda cambiar el tamaño. Height="alto" Altura del marco width="ancho" Ancho del marco. Formularios Estructura. <form action="mailto:direccion@correo.com" method="post" enctype="text/plain"> action="acción a realizar" Tipo de acción a llevar a cabo con el Formulario method ="post" o "get" Forma en la que el formulario es enviado. Los dos valores posibles son post y get. A efectos prácticos y, salvo que se diga lo contrario, daremos siempre el valor post. enctype =" text/plain" Tipo de texto en el que se manda la informacion. Cajas de texto
  5. 5. HTML & CSS ~ 4 ~ Estructura. <input type="text" name="mitexto"> Size Anchura de la caja de texto. El valor por defecto es 20 caracteres Maxlength Limita el numero de caracteres, si no se pone valor es ilimitado. Value Texto que aparece por defecto si el usuario no escribe nada. Title Muestra un bocadillo explicativo cuando el usuario Pase el cursor por encima. Aling=" 003" Alineacion del texto. Cajas de texto para claves Estructura. <p>Introduzca su clave: <input type="password" name="clave"></p> Botones de elección o radio buttons Estructura. <form action="" method ="post" enctype ="text/plain">!!(Siempre antes de la etiqueta table)!!<p align="center''> <input type="radio" name="musica" value="jazz">Jazz <input type="radio" name="musica" value="pop">Pop <input type="radio" name="musica" value="rock">Rock <input type="radio" name="musica" value="country">Country <p> </form> Cajas de selección o checkbox <form action="" method ="post" enctype ="text/plain">!!(Siempre antes de la etiqueta table)!! <p><input type="checkbox"name="tenis">Practicar tenis </p> <p><input type="checkbox" name="futbol" checked>Practicar fútbol </p> <p><input type="checkbox"name="nintendo">Jugar a la NDS</p> <p><input type="checkbox" name="baloncesto">Jugar al baloncesto</p> <p><input type=''checkbox" name="natacion''>Practicar natación </p> </form>
  6. 6. HTML & CSS ~ 5 ~ Botones de envío Estructura. <form action="" method ="post" enctype ="text/plain">!!(Siempre antes de la etiqueta table)!! <p><input type="submit" value=" enviar datos " name="Enviar"> <input type="reset" value=" limpiar datos"name="Limpiar"> <input type="button'' value=" cerrar ventana "onclick="window.close();"> </p> </form> Botón de borrado Estructura. <inputtype="reset" name="nombre" value=''Texto del botón"> Botón genérico <input type=''button'' value="Púlsame"> Onclick <form action="" method ="post" enctype ="text/plain">!!(Siempre antes de la etiqueta table)!! <input type=''button'' value="cerrar ventana'' onclick="window. clase (); "> <input type=''button" value=''cargar página en misma ventana" onclick="window.location.replace ( 'forrnulariol.html'); "> <input type="button" value="cargar nueva ventana" onclick="window. open ('formulario l. html'); "> </form> Etiqueta <SELECT> ...</SELECT> <form action="" method ="post" enctype ="text/plain">!!(Siempre antes de la etiqueta table)!! <h3>Lista desplegable con cinco valores. </h3> <h3>Selecciona uno de los siguientes valores: </h3>
  7. 7. HTML & CSS ~ 6 ~ <selectname="milista"> <optionvalue=''uno">Uno <optionvalue="dos">Dos <optionvalue=''tres">Tres <optionvalue=''tres''>Cuatro <optionvalue="tres">Cinco </select> </form> CSS Para todos los elementos Width Ancho de un elemento Ej: width:200px; height Alto de un elemento Ej: height:200px; Atributos para fuentes Color Color del texto Ej: color: #FF9900; color: red; Font-size Tamaño de la fuente Ej: font-size: 12pt; Font-size: 2em; Font-family Tipo de letra Ej: font-family:arial; font-family: “Comic sans ms"; font-weight Ancho de los caracteres. font-weight:005; Font-weight: 200; Font-style Estilo de fuente. Ej: font-style:normal; font-style:italic; 005 Normal Bold Bolder ligheter Normal 006 Normal Italic Oblique
  8. 8. HTML & CSS ~ 7 ~ Atributos para párrafos. line-height: 007; Espacio entre lineas text-decoration: 008; Para poner la decoración de un texto text-align: 003; Justifica el texto text-indent: 008; lndenta el texto, pone sangrado o márgenes text-transform: 009; Transforma el texto a mayúsculas, minúsculas o con letracapital. letter-spacing: 007; Para poner espaciado entre las letras. word-spacing: 007; Poner espaciado entre las palabras del texto. 007 12px; Normal; Espacio en pixeles Tamaño 008 None underline Overline Line-through Sin de decoracion Subrayado Sobrerrallado tachado 009 Capitalize Uppercase Lowercase Capital Mayuscula Minuscula Atributos para fondos background-color Color de fondo de un elemento. background-image url(fondo.png); Pone una imagen de fondo en el elemento correspondiente background-repeat Repite la imagen de fondo. Los valores son repeat-x, repeat-y, repeat, no-repeat, Atributos para cajas margin-left Margen a la izquierda. Ej: margin-left: 2em; margin-left: 20px; margin-right Margen a la derecha. Ej: margin-right: 5%; margin-right: 20pt; margin-top Margen arriba. Ej: margin-top: 20px; margin-top: 1em; Margin-bottom Margen inferior. Ej: margin-bottom: 0pt; margin-bottom: 10px; padding-left Espacio insertado por la izquierda, entre el borde del elemento continente y el contenido de este. Ej: padding-left: 0.Sin; padding-left: 10px; padding-right Espacio insertado por la derecha, entre el borde del elemento continente y el contenido de este. Ej: padding-right: 2em; padding-right: 0px; padding-top Espacio insertado por arriba, entre el borde del elemento continente y el contenido de este. Ej: padding-top: 2cm; padding-top: 0.5cm; padding-bottom Espacio insertado por abajo, entre el borde del elemento continente y el contenido de este. Ej: padding-bottom: 2cm; padding-bottom: 0.5cm; border-color Color del borde, también se puede poner color a los bordes por separado con
  9. 9. HTML & CSS ~ 8 ~ los atributos border-top-color, border-right-color, border-bottom-color, border- left-color. Ej: border-color: aqua; border-left-color: #ff00ff; border-style Estilo del borde, los valores pueden ser: none=ningún borde, dotted=punteado, solid=sólido, double=doble borde. Ej: border-style: solid; border-style: double; border-width Tamaño del borde. Ej: border-width: 2em; border-width: 10px; float Sirve para alinear un elemento a la izquierda o derecha haciendo que el texto se agrupe alrededor de dicho elemento. Toma los valores none, right y /eft. Ej: float: right; Clear Se utiliza conjuntamente con f/oat para indicar cuando un elemento flotante permite otros elementos flotantes junto a él. Sus posibles valores son: none, left, right o both. Con none, el elemento permite otros flotantes a ambos lados; left, el elemento no permite flotantes a su izquierda; right, el elemento no permite flotantes a su derecha y both, el elemento no permite flotantes a ningún lado. Ejemplos #menuverticalderecha{ width: 140px; float: right; margin-top: 28px; clear: none; border: 3px solid grey;} #menuverticalderecha a {padding: 0px 25px 0px; display: block; text-decoration: none; color: #610B0B; background: #F6CEF5; background-image: url(../images/flecha_inactiva.png); background-repeat: no-repeat; } #menuverticalderecha a:hover, #menuvertical a:active {background: #58FA58; background-image: url(../images/flecha_activa.png); background-repeat: no-repeat; } Ejemplo HTML <div id="menuvertical"> <a href="../actividades/2.9_resuelta/index.html" target="frame">Resuelta 2.9</a> <a href="../actividades/2.10_resuelta/index.html" target="frame">Resuelta 2.10</a>
  10. 10. HTML & CSS ~ 9 ~ <a href="../actividades/2.8_propuesta/html/index.html" target="frame">Propuesta 2.8</a> <a href="../actividades/2.11_resuelta/html/index.html" target="frame">Resuelta 2.11</a> <a href="../actividades/2.12_resuelta/html/index.html" target="frame">Resuelta 2.12</a> </div> <iframe name="frame" src="../actividades/texto_index/html/texto_index.html"></iframe> </body

×