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. 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. 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. 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. 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. 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. 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. 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. 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>
