Resumen de etiquetas y atributos
|
etiqueta
|
cierre
|
atributo
|
explicación
|
|
<!--
|
-->
|
|
Añadir un comentario no visible.
|
|
<a>
|
</a>
|
|
Establece un vínculo.
|
|
|
|
href
|
Dirección del vínculo.
|
|
|
|
name
|
Establece un ancla.
|
|
|
|
target
|
Establece el destino del vínculo: _blank, _self, _top, _parent, o
"definido"
|
|
<b>
|
</b>
|
|
Texto en negrita.
|
|
<blockquote>
|
</blockquote>
|
|
Sangrado.
|
|
<body>
|
</body>
|
|
Parte visible en pantalla del documento.
|
|
|
|
alink
|
Modifica el color del vínculo cuando está activado.
|
|
|
|
background
|
Para colocar una imagen de fondo.
|
|
|
|
bgcolor
|
Para establecer un color de fondo.
|
|
|
|
link
|
Modifica el color del vínculo antes de estar activado.
|
|
|
|
vlink
|
Modifica el color del vínculo cuando ya ha sido visitado.
|
|
<br>
|
|
|
Salto de línea.
|
|
<caption>
|
</caption>
|
|
Establece el título de una tabla. Dentro de <table>.
|
|
<center>
|
<center>
|
|
Centra en horizontal.
|
|
<dd>
|
|
|
La definición del término. Dentro de <dl>
|
|
<dl>
|
</dl>
|
|
Listado de términos y sus definiciones.
|
|
<dt>
|
</dt>
|
|
Término para ser definido. Dentro de <dl>
|
|
<font>
|
</font>
|
|
Fuente.
|
|
|
|
size
|
Tamaño de la fuente.
|
|
|
|
color
|
Color
|
|
|
|
face
|
Tipo de letra.
|
|
<form>
|
</form>
|
|
Formulario
|
|
|
|
action
|
mailto:la_dirección_de_correo
|
|
|
|
method
|
post
|
|
|
|
enctype
|
text/plain
|
|
<frame>
|
</frame>
|
|
Marco.
|
|
|
|
name
|
Nombre que se le da para referirse después a él.
|
|
|
|
src
|
Establece qué documento se va a cargar inicialmente en el marco.
|
|
|
|
frameborder
|
Indica si habrá o no borde entre los marcos.
|
|
|
|
noresize
|
Si se escribe, el navegante no puede redimensionar los marcos.
|
|
|
|
scrolling
|
Establece si habrá o no barra de scrolling.
|
|
<frameset>
|
</frameset>
|
|
Estructura de los marcos.
|
|
|
|
cols
|
Número de columnas.
|
|
|
|
rows
|
Número de filas.
|
|
<h1>
|
</h1>
|
|
Encabezado de primer orden.Hay otros 5:
<h2><h3><h4><h5><h6>
|
|
<head>
|
</head>
|
|
Cabecera del documento.
|
|
<hr>
|
|
|
Línea de separación horizontal.
|
|
|
|
align
|
Alineación de la línea.
|
|
|
|
noshade
|
Sin efecto tridimensional.
|
|
|
|
size
|
Grosor de la línea.
|
|
|
|
width
|
Anchura de la línea.
|
|
<html>
|
</html>
|
|
Apertura y cierre del código.
|
|
<i>
|
</i>
|
|
Letra cursiva.
|
|
<iframe>
|
</iframe>
|
|
Marco en línea. Carga en un marco otra página.
|
|
|
|
name
|
Nombre que se le da al espacio para posteriores referencias.
|
|
|
|
src
|
Establece qué documento se carga inicialmente.
|
|
|
|
frameborder
|
Establece si habrá o no borde de separación.
|
|
<img>
|
|
|
Inserta una imagen.
|
|
|
|
alt
|
Texto alternativo a la imagen.
|
|
|
|
border
|
Establece si va a tener borde o no, cuando sirva de vínculo.
|
|
|
|
height
|
Altura de la imagen.
|
|
|
|
width
|
Ancho de la imagen.
|
|
|
|
src
|
Establece qué imagen se va a insertar.
|
|
<li>
|
|
|
Componente de una lista. Dentro de <ul> o de <ol>
|
|
<ol>
|
</ol>
|
|
Lista numerada de objetos.
|
|
<p>
|
</p>
|
|
Párrafo nuevo.
|
|
<sub>
|
</sub>
|
|
Subíndice.
|
|
<sup>
|
</sup>
|
|
Superíndice.
|
|
<table>
|
</table>
|
|
Tabla.
|
|
|
|
align
|
Alinea la tabla: center, right, left
|
|
|
|
bgcolor
|
Establece el color de fondo de la tabla.
|
|
|
|
border
|
Establece un borde a la tabla
|
|
|
|
cellpadding
|
Separación entre el borde de la tabla y el contenido.
|
|
|
|
cellspacing
|
Separación entre las celdas.
|
|
|
|
width
|
Establece el ancho de la tabla.
|
|
<td>
|
</td>
|
|
Celda de una tabla.
|
|
|
|
align
|
Establece la alineación del texto dentro de la celda: left, center,
right.
|
|
|
|
bgcolor
|
Establece el color de fondo para la celda.
|
|
|
|
colspan
|
Extiende la celda sobre varias columnas.
|
|
|
|
height
|
Establece la altura de la celda.
|
|
|
|
rowspan
|
Extiende la celda sobre varias filas.
|
|
|
|
valign
|
Establece la alineación vertical: top, middle, bottom.
|
|
|
|
width
|
Establece el ancho de la celda.
|
|
<th>
|
</th>
|
|
Titular de la columna de una tabla. Dentro de <tr>.
|
|
<title>
|
</title>
|
|
Establece el nombre del documento. Dentro de <head>
|
|
<tr>
|
</tr>
|
|
Fila de una tabla.
|
|
<u>
|
</u>
|
|
Subrayado.
|
|
<ul>
|
</ul>
|
|
Lista no numerada de objetos.
|
Formas
para aplicarle CSS a HTML
Este tipo de
hojas de estilo se aplican cuando queremos que los estilos de las CSS se
apliquen de una forma global a todas las etiquetas de un documento.
Por ejemplo,
queremos que todo el cuerpo del documento, el “body", tenga un determinado
tipo de letra, que los párrafos tengan un color determinado, que las cabeceras
tengan un tamaño igual entre ellas, etc. Para conseguir estos propósitos, las
CSS indirectas son ideales.
Para aplicar
una CSS indirecta dentro del mismo documento, utilizaremos la etiqueta <style>.
La colocaremos en la cabecera del documento. Entre esta etiqueta y su cierre
(</style>) escribiremos todos los estilos que queramos definir en el
documento.
El código de
la estructura básica de este tipo de CSS sería el siguiente:
|
<html>
<head> Aquí van los datos de la cabececera del documento
<style
type="text/css">
<!-- Aquí escribiríamos los diversos estilos que queramos aplicar --> </style>
</head>
<body> Aquí va el cuerpo del documento, todo el contenido </body> </html> |
Cuál
es la etiqueta que se utiliza para aplicar estilos en cascada a una página HTML
y describa los atributos que requiere definir para que funcione
- Etiqueta: es el parámetro HTML al que le vamos a aplicar
el estilo.
- Declaración: es el estilo completo que se le va a aplicar la
regla y viene delimitado por los símbolos {de apertura y} de cierre.
- Propiedad: es el atributo al que se le asignará el valor CSS.
- Valor: es el valor de la propiedad que tendrá la
etiqueta.
Qué es una ruta
absoluta y qué es una ruta relativa, realice ejemplos de cada una y diga cuál
es mejor y por qué
Ruta
Absoluta:
La ruta
absoluta indica la dirección completa del archivo sin importar donde estemos,
es decir, si yo tengo una foto de mi perro llamada miperro.jpg dentro de la
carpeta imágenes en mi dominio comocrearunsitioweb.com la ruta absoluta sería:
http://www.comocrearunsitioweb.com/imagenes/miperro.jpg Podemos utilizar esa
ruta para llamar a la imagen desde cualquier sitio (ya se en nuestro dominio o
en otro).
Ruta
Relativa:
La ruta
relativa llama al mismo archivo pero DESDE el lugar donde estamos
parados, es decir que solo funciona dentro de nuestro dominio. Por ejemplo: si
nosotros estamos en el directorio principal y queremos insertar la foto desde
el índex la ruta relativa DESDE el índex sería: imágenes/miperro.jpg