Estructura básica:
<html> (Abrimos el documento)
<head> (Abrimos el head)
En la cabecera o «head» se inserta todo lo referente al title, styles vinculados, scripts, etc.
</head> (Cerramos el head)
<body> (Abrimos el body)
En el cuerpo del documento o «body», es donde va el contenido general, el grueso de la página.
</body> (Cerramos el body)
</html> (Cerramos el documento)
Etiquetas más comunes del HTML:
<title>: para definir el titulo de una página. Importantisimo para el SEO.
<link> y <style>: ambas van dentro del <head>, y sirven para aplicar estilos CSS a nuestro documento. Con <link> vinculamos de forma externa un archivo.css, y con <style> podemos escribir directamente código CSS dentro del head.
<h1>, <h2>, <h3>….<h6>: encabezados, numerados del 1 al 6 por orden de RELEVANCIA. El uso de estos encabezados es determinante para el SEO, porque es la mejor forma que tienen Google de entender la estructura de nuestro contenido y poder saber qué es lo relevante.
<table>, <tr> y <td>: son las tablas, las filas y las celdas.
<div>: es un elemento «contendedor» de otras cosas. Realmente es lo que más se usa. Sabiendo manejar un <div style=»loquenecesites»>contenido</div>
<a>: para añadir enlaces. Dentro de ella tendremos dos atributos importantes, que son: href=»indica_la_URL_o_RUTA» y target=»self o _blank», según quieras que el enlace se abra en la misma página o en una pestaña nueva.
<img> es la etiqueta con la que se insertan las imágenes. Este es uno de los pocos casos que no necesita etiqueta de cierre, sino que vale con: <img src=»rutadelaimagen» alt=»textoalternativo» />, sin poner </img>
<li>, <ol>, <ul>: son las etiquetas que controlan las listas ordenadas y desordenadas. Ejemplo:
- Estos circulos son de listas desordenadas, usando la etiqueta <ul>
- Este número sale porque utilizo una lista ordenada, con <ol>
- Cada elemento o item de una u otra lista, se controla medianta <li>
<b>: convierte el texto a negrita. Tambien os podéis encontrar con el antiguo <strong> que hace lo mismo.
<i>: lo mismo pero para aplicar cursiva al formato de un texto. Ejemplos: esto irá en <b>negrita</b> y este otro texto en <i>cursiva</i>
<p>: con esta etiqueta determinamos un texto de párrafo.
Nayara Antequera TIC-II 19/20 