HTML y CSS: Guía básica de etiquetas y conceptos

Un archivo html siempre consiste de dos partes: la cabecera y el cuerpo
llamamos elemento a: elemento = <etiqueta de inicio> + contenido + <etiqueta de

cierre>
etiquetas autocerradas: Como nada va en medio de las etiquetas <link></link> ni

<img></img>, está bien usar un solo par de <> para que sirvan como etiquetas de
inicio y de cierre.
--------- Etiquetas -----------

- <!DOCTYPE html> en la primera línea. Esto le dice al navegador cuál es el
lenguaje que está leyendo (en este caso, HTML).
- <html> en la segunda línea. Esto comienza el documento de HTML.
- </html> en la última línea. Esto finaliza el documento de HTML.
- <head></head> Indica el inicio/cierre de la cabecera
- <title></title> Indica etiqueta de inicio/cierre para el título
- <body></body> Indica etiqueta de inicio/cierre para el cuerpo (el contenido en el
cuerpo es lo que será visible en la página real.)
- <p></p> Indica etiqueta de inicio/cierre para un parrafo
- <br/> Indica etiqueta autocerrada para un salto de linea.
- <h1></h1> Indica etiqueta de inicio/cierre para un encabezado. Marca un texto
como el más importante (fuente más grande), va del h1-h6 (mayor a menor tamaño)
- <strong> convierte nuestro texto en negrita! </strong>
- <em> convierte nuestro texto en cursiva </em>
- <img src="url_imagen"/> Indica etiqueta autocerrada para una imagen
- <a href="url">Texto_imagen</a> Indica etiqueta de inicio/cierre para un enlace
- <ol> <li></li> </ol> Indica etiqueta de inicio/cierre para una lista ordenada
(lista numerada)
- <ul> <li></li> </ul> Indica etiqueta de inicio/cierre para una lista no ordenada
(lista con puntos)
- <li>Item de la lista</li> Indica etiqueta de inicio/cierre para un elemento de la
lista
-  Etiquetado para comentar codigo html
- <table></table> Indica etiqueta de inicio/cierre para una tabla. Las usamos para
almacenar datos tabulares, de forma que sean fáciles de leer! Cuando quieres
presentar información de forma ordenada en una tabla con filas y columnas.
- <table> <thead></thead> <tbody></tbody> </table> La tabla puede tener cabecera
(table head) y cuerpo (table body) y en cada una puede tener filas y datos.
- <table> <tr></tr> </table> Indica etiqueta de inicio/cierre para una fila de
tabla
- <table> <tr> <td>Texto</td> </tr> </table> Indica etiqueta de inicio/cierre para
datos de tabla (para la zona de <tbody>)
- <table> <tr> <th>Texto</th> </tr> </table> Indica etiqueta de inicio/cierre para
datos de tabla (para la zona de <thead>)
- <th colspan="2"> Atributo para que el texto ocupe 2 columnas.
- <div></div> Indica etiqueta de inicio/cierre para contenedor. Te permite dividir

tu página web en piezas, y darles estilo individualmente.
- <span></span> Te permite controlar el estilo de partes más pequeñas de tu página
-----------Atributos-----------
Le podemos dar a las etiquetas más instrucciones mediante la inclusión de atributos
en la etiqueta de inicio. Un atributo es solamente una característica o una
descripción del contenido en el elemento.
- <etiqueta_de_texto style = "color:green;font-size:12px;font-family:Garamond;text-
align:center"> Para darle caracteristicas al texto (tamaño,color...)
- <body style="background-color:red"> Para darle color de fondo a cualquier parte
de la web (se puede aplicar a <body>, <ol>, etc.)
------------CSS--------------
Existen dos formas de colocar CSS en un lugar:
- <head> <style></style> </head> Indica etiqueta de inicio/cierre para incluir css
justo en el mismo archivo HTML.
- <head> <link type="text/css" rel="stylesheet" href="fichero.css"/> </head> Indica
etiqueta autocerrada para importar fichero.css
selector {
propiedad: valor;
- color: #abcd12 #Da color
- font-family: Verdana, curier; #Si la 1a no la tiene, se usara la 2a
- font-size: 1em; #A parte de px(pixel) se puede usar em para dispositivos de
distinto tamaño de pantalla
- width: 100px; #Tamaño de anchura de un elemento en pixels
- height: 100px; #Tamaño de altura de un elemento en pixels
- border: 2px solid red; #Borde de un elemento con grosor, trazo (dashed=linea
punteada), color
- border-radius: 5px; #modifica las esquinas de los objetos de HTML; ¡es así como
consigues esos geniales botones redondeados! (100% -> una esfera)
- text-decoration: none; #Para quitar el subrallado a un link por ejemplo (<a>)
- font-weight: bold; #Tipo de letra Bold.
- text-transform: uppercase; #Transforma el texto en mayusculas
- background-image: url('/'); #Pone una imagen de fondo
----------CSS: POSICIONAMIENTO-----------
- display: block; #vuelve al elemento una caja de bloque. ¡No permitirá que nada
sea ubicado junto a él en la página! Ocupa el ancho completo.
- display: inline-block; #vuelve a un elemento una caja de bloque, pero permitirá
que otros elementos sean ubicados junto a él en la misma línea.
- display: inline; #hace que un elemento sea ubicado en la misma línea que otro
elemento, pero sin darle formato como bloque. Solamente ocupa el ancho que requiera
(pero no la línea completa).se ajusta mejor a los elementos de HTML que son bloques
de forma predeterminada, como los encabezados y los párrafos.
- display: none; #hace que el elemento y su contenido desaparezcan por completo de
la página!
* MARGIN #Desplaza nuestro elemento con relación a otros elementos en la página,

además en relación con las "paredes" del documento de HTML.
- margin: auto; #automáticamente coloque un margen igual a la izquierda y a la
derecha de nuestro elemento, centrándolo en la página.
- margin-top: 1px; #Margen superior
- margin-right: 1px; #Margen derecho
- margin-bottom: 1px; #Margen inferior
- margin-left: 1px; #Margen izquierdo
- margin: 1px 2px 3px 4px; #Los 4 margenes empezando por superior (orden de las
manecillas del reloj)
* PADDING #el relleno es el espacio entre tu borde y su capa más interior: el

contenido en sí.
- padding-top: 1px; #Relleno superior
- padding-right: 1px; #Relleno derecho
- padding-bottom: 1px; #Relleno inferior
- padding-left: 1px; #Relleno izquierdo
- padding: 1px 2px 3px 4px; #Los 4 rellenos empezando por superior (orden de las
manecillas del reloj)
- padding: 1px #si quieres que tu relleno sea el mismo para los cuatro lados
* FLOAT #Cuando usas float con un elemento en la página, le estás indicando a la

página: "Estoy a punto de decirte donde ubicar este elemento, pero tienes que
colocarlo dentro del flujo de los demás elementos." Esto quiere decir que si tienes
varios elementos flotantes, todos saben que los demás están allí, y ninguno se
superpone.
- float: left; #Float el elemento a la izquierda
- float: right; #Float el elemento a la derecha
- clear: left; #El elemento inmediatamente se desplazará debajo de cualquier

elemento flotante en el lado izquierdo de la página;
- clear: right; #para desplazarlo hacia el lado derecho.
- clear: both; #para que se aparte de los elementos que están en la izquierda y en
la derecha
*POSITION:
- position: static; #Si no especificas el tipo de posicionamiento de un elemento,
estará predeterminado como static. Esto simplemente quiere decir "donde iría
normalmente ese elemento." Si no le indicas a un elemento cómo posicionarse, él
simplemente se queda donde esté.
- position: absolute; #se posiciona en relación con el primer elemento padre que
tiene y que no esté establecido con position: static. Si no existe tal elemento, el
elemento con position: absolute se posiciona en relación con <html>.
- position: relative; #le indica al elemento que se desplace respecto al lugar
donde se encontraría si tuviera el posicionamiento predeterminado static.
- position: fixed; #ancla un elemento a la ventana del navegador. Imagina que es
como pegar el elemento a la pantalla. Si desplazas la pantalla hacia arriba y hacia
abajo, el elemento fijo se mantiene en su lugar, incluso mientras otros elementos
son desplazados.
- z-index: 1; #Piensa en z-index como una medida de importancia: entre más alto sea
el z-index de un elemento, más "alto" se verá el elemento en la página. Si le das
un z-index de 1 a tu encabezado, mientras que no le das ningún z-index a los demás
elementos, asegurarás que tu encabezado se asiente "encima" de tus demás elementos
y que no se vea cubierto por ninguno de ellos.
}
div div p {
#Si quieres enfocarte en las <p> que están dentro de dos <div>, y no en todas las
<p>
}
* {
#Selector universal, aplica el estilo de CSS a cada elemento en la página
}
div > p { #hijo directo

#Esto se refiere únicamente en las <p> que estén anidadas directamente dentro de
las <div>; no se enfocará en los párrafos que estén, digamos, anidados dentro de
listas que, a su vez, estén anidadas dentro de las <div>.
}
Existen dos selectores importantes que puedes usar, además del selector universal y
de los elementos de HTML:
- de clase (<elemento class=nombre>) #Las clases son útiles cuando tienes un montón
de elementos que deberían tener el mismo estilo.
.nombre {
propiedad: valor;
}
- de identificadores (<elemento id=nombre>) #Los identificadores son geniales

cuando tienes exactamente un elemento que debe tener cierto estilo.
#nombre {
propiedad: valor;
}
- selector de pseudo-clase es una forma de acceder a los elementos de HTML que no

son parte del árbol del documento. Por ejemplo, es muy fácil ver en qué lugar del
árbol va un enlace. Pero, ¿en qué lugar encontrarías la información que dice si se
ha hecho clic o no sobre un enlace? ¡Eso no está allí!
Los selectores de pseudo-clase nos permiten darle un estilo a este tipo de cambios
en nuestro documento de HTML. Por ejemplo, vimos que podemos cambiar la propiedad
text-decoration de un enlace para que no se vea siempre azul y subrayado. Usando
los pseudo-selectores puedes controlar la apariencia de enlaces que han sido y que
no han sido visitados; ¡e incluso de aquellos sobre los que el usuario pasa el
puntero pero que aún no ha hecho clic!
selector:selector_de_pseudo-clase {
propiedad: valor;
}
pseudo-clases útiles para los enlaces:

* a:link #Un enlace sin visitar.
* a:visited #Un enlace que ha sido visitado.
* a:hover #Un enlace sobre el que pasas el puntero.
otros:
* p:first-child #Se usa para aplicar el estilo únicamente a los elementos que son
los primeros hijos de sus padres
* p:nth-child(2) #Dará a todos los párrafos que sean los segundos hijos(2) de su
elemento padre el estilo deseado.

HTML y CSS: Guía básica de etiquetas y conceptos

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

HTML y CSS: Guía básica de etiquetas y conceptos

Cargado por

Copyright:

Formatos disponibles

Un archivo html siempre consiste de dos partes: la cabecera y el cuerpo

llamamos elemento a: elemento = <etiqueta de inicio> + contenido + <etiqueta de

etiquetas autocerradas: Como nada va en medio de las etiquetas <link></link> ni

--------- Etiquetas -----------

- <div></div> Indica etiqueta de inicio/cierre para contenedor. Te permite dividir

* MARGIN #Desplaza nuestro elemento con relación a otros elementos en la página,

* PADDING #el relleno es el espacio entre tu borde y su capa más interior: el

* FLOAT #Cuando usas float con un elemento en la página, le estás indicando a la

- clear: left; #El elemento inmediatamente se desplazará debajo de cualquier

div > p { #hijo directo

- de identificadores (<elemento id=nombre>) #Los identificadores son geniales

- selector de pseudo-clase es una forma de acceder a los elementos de HTML que no

pseudo-clases útiles para los enlaces:

También podría gustarte