Referencia rápida

En HTML5 la responsabilidad por la presentación de la estructura en pantalla está más que nunca en manos de CSS. Incorporaciones y mejoras se han hecho en la última versión de CSS para proveer mejores formas de organizar documentos y trabajar con sus elementos.

Selector de atributo y pseudo clases CSS3 incorpora nuevos mecanismos para referenciar elementos HTML.

Selector de Atributo Ahora podemos utilizar otros atributos además de id y class para encontrar elementos en el documento y asignar estilos. Con la construcción palabraclave[atributo=valor], podemos referenciar un elemento que tiene un atributo particular con un valor específico. Por ejemplo, p[name=”texto”] referenciará cada elemento <p> con un atributo llamado name y el valor ”texto”.

CSS3 también provee técnicas para hacer esta referencia aún más específica. Usando las siguientes combinaciones de símbolos ^=, $= y *= podemos encontrar elementos que comienzan con el valor provisto, elementos que terminan con ese valor y elementos que tienen el texto provisto en alguna parte del valor del atributo. Por ejemplo, p[name^=”texto”] será usado para encontrar elementos <p> que tienen un atributo llamado name con un valor que comienza por ”texto”. Pseudo Clase :nth-child() Esta pseudo clase encuentra un hijo específico siguiendo la estructura de árbol de HTML. Por ejemplo, con el estilo span:nth-child(2) estamos referenciando el elemento <span> que tiene otros elementos <span> como hermanos y está localizado en la posición 2. Este número es considerado el índice. En lugar de un número podemos usar las palabras clave odd y even para referenciar elementos con un índice impar o par respectivamente (por ejemplo, span:nth- child(odd)).

Pseudo Clase :first-child Esta pseudo clase es usada para referenciar el primer hijo, similar a :nth-child(1).

Pseudo Clase :last-child Esta pseudo clase es usada para referenciar el último hijo.

Pseudo Clase :only-child Esta pseudo clase es usada para referenciar un elemento que es el único hijo disponible de un mismo elemento padre.

Pseudo Clase :not() Esta pseudo clase es usada para referenciar todo elemento excepto el declarado entre paréntesis.

Selectores

CSS3 también incorpora nuevos selectores que ayudan a llegar a elementos difíciles de referenciar utilizando otras técnicas.

Selector > Este selector referencia al elemento de la derecha cuando tiene el elemento de la izquierda como padre. Por ejemplo, div > p referenciará cada elemento <p> que es hijo de un elemento <div>.

Selector + Este selector referencia elementos que son hermanos. La referencia apuntará al elemento de la derecha cuando es inmediatamente precedido por el de la izquierda. Por ejemplo, span + p afectará a los elementos <p> que son hermanos y están ubicados luego de un elemento <span>.

Selector ~ Este selector es similar al anterior, pero en este caso el elemento de la derecha no tiene que estar ubicado inmediatamente después del de la izquierda.

Vea nuestro curso de HTML

Estructura Básica de un Documento HTML

Elementos Comunes de HTML

1. Encabezados
   html

   Copiar código

   <h1>Título Principal</h1>
<h2>Subtítulo</h2>
<h3>Encabezado de Nivel 3</h3>

2. Párrafos
   html

   Copiar código

   <p>Este es un párrafo de texto.</p>

3. Enlaces
   html

   Copiar código

   <a href="https://www.example.com">Enlace a ejemplo.com</a>

4. Imágenes
   html

   Copiar código

   <img src="imagen.jpg" alt="Descripción de la imagen">

5. Listas
   • Lista Desordenada (con viñetas)
     html

     Copiar código

     <ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
</ul>

   • Lista Ordenada (numerada)
     html

     Copiar código

     <ol>
<li>Primer Elemento</li>
<li>Segundo Elemento</li>
</ol>

6. Tablas
   html

   Copiar código

   <table>
<tr>
<th>Encabezado 1</th>
<th>Encabezado 2</th>
</tr>
<tr>
<td>Dato 1</td>
<td>Dato 2</td>
</tr>
</table>

7. Formularios
   html

   Copiar código

   <form action="/enviar" method="post">
   <label for="nombre">Nombre:</label>
   <input type="text" id="nombre" name="nombre">

   <label for="email">Correo Electrónico:</label>
   <input type="email" id="email" name="email">

   <input type="submit" value="Enviar">
</form>


8. División de Contenido
   html

   Copiar código

   <div>
<p>Este es un bloque de contenido.</p>
</div>

9. Span
   html

   Copiar código

   <p>Este es un texto con <span style="color: red;">una parte en rojo</span>.</p>

10. Comentarios
    html

    Copiar código

    <!-- Este es un comentario -->


Metaetiquetas y SEO

• Metaetiquetas
  html

  Copiar código

  <meta name="description" content="Descripción breve de la página">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="Tu Nombre">


Recursos de Estilo y Scripts

• CSS Externo
  html

  Copiar código

  <link rel="stylesheet" href="estilos.css">

• CSS Interno
  html

  Copiar código

  <style>
body {
background-color: #f0f0f0;
}
</style>

• JavaScript Externo
  html

  Copiar código

  <script src="script.js"></script>

• JavaScript Interno
  html

  Copiar código

  <script>
console.log("Hola Mundo");
</script>