HTML “Hyper Text Markup Language”
Los códigos HTML son el lenguaje universal que se utiliza para crear y dar formato a los sitios web. Funcionan en cualquier sistema operativo y con cualquier navegador.
Etiquetas HTML
El lenguaje HTML está conformado por un sistema de etiquetas que incluyen instrucciones.
Partes de las etiquetas:
- entre guiones (< >)
- inicio (<etiqueta>)
- cierre (</etiqueta>)
Estructura
<!DOCTYPE html>
código legible en cualquier navegador.
HTML
<html> Inicio de un documento HTML
</html> último elemento del documento.
Encabezado
<head> Su función es contener toda la información del funcionamiento del sitio.
Título de la página
<title> Es la etiqueta que da a tu sitio un nombre para que los usuarios puedan identificarlo. Es el título que puedes ver en las pestañas del navegador.
Cuerpo
<body> es la etiqueta que contiene todo el contenido visible del sitio:exto, imágenes, videos o cualquier otra funcionalidad.
Ejemplo:
<html>
<head>
<title>Mi página de ejemplo</title>
</head>
<body>
Aquí va el contenido
</body>
</html>
Títulos y subtítulos
<h1> <h2> … <h6> son etiquetas que funcionan para agregar títulos y subtítulos en el cuerpo del texto, lo cual ayuda a jerarquizar la información.
Por cierto la etiqueta H1 sólo una vez dentro del contenido.
Párrafos:
- <BR> linea en blanco
- <P>…</P> nuevo parrafo
- <P align=»left»>…</P> Párrafo alineado a la izquierda
- <P align=»center»>…</P> Párrafo centrado
- <P align=»right»>…</P> Párrafo alienado a la derecha
- <P align=»justify»>…</P> Párrafo justificado
Imágenes
<img> con esta etiqueta podrás agregar imágenes al cuerpo de tu página.
Con el atributo src te permitirá especificar la ubicación.
Con el atributo alt te ayudará a darle un título a esa imagen.
- <img src=»nombre imagen»> insertar imagen (debe de estar en la misma carpeta de la web)
ejemplo: <img src=»https://images.unsplash.com/photo-1535378917042-10a22c95931a»>
La estructura de los atributos es la siguiente: primero viene la palabra o abreviatura que lo define (en este caso src es abreviatura de “source” o fuente), luego el signo igual (=) y al último el modificador del atributo entre comillas dobles (“_”) o simples (‘_’).
Hipervínculos
<a> te permite insertar un hipervínculo a la misma página.
ejemplo <a href=»https://mx.godaddy.com/blog»>Visita el blog de GoDaddy</a>
Listas e índices
<ol> sirve para agregar listas numeradas y <ul> para agregar bullets, los cuales mejoran la legibilidad de tus textos.
Ejemplo:
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li>Elemento 4</li>
</ul>
Etiquetas de texto:
- <strong> Fragmento de texto importante o palabras clave.
- <em> Fragmento de texto enfatizado respecto a la frase que lo contiene.
- <mark> Fragmento de texto resaltado, simulando estar marcado con rotulador amarillo.
- <i> Fragmento de texto con voz o tono alternativo al resto.
- <b> Fragmento de texto sin importancia destacable (fines utilitarios).
- <u> Fragmento de texto para nombres propios o escritura incorrecta intencionada (sic).
- <s> Fragmento de texto inexacto o que ya no es relevante. (errores o inexactitudes)
- <font> </font> Fuente
- <FONT FACE=»Arial»> tipo de fuente
- <font size=14> tamaño de fuente
- <FONT COLOR=#ff0000> Color fuente hexadecimal
- <span> Fragmento de texto sin significado (útil para seleccionar).
- <cite> Fragmento de texto con el título de un trabajo creativo: obras, libros…
- <sup> Superíndice (242).
- <sub> Subíndice (242).
- <small> Anotaciones menores pequeñas puntualizaciones.
- <q> cite Cita o frase extraída de otro contexto.
- <dfn> title Definición (término que posteriormente será definido).
- <abbr> title Abreviatura o acrónimo.
- <tt> Texto con espaciado simple o TT
- <u> Subrayado HTML
- <i> Cursiva
- <b> Negrita
- <strike> tachado
- <s> tachado
- <del> tachado
Alinear independientemente líneas o grupos de líneas:
- <DIV align=»left»>…</DIV> Línea(s) alineada(s) a la izquierda
- <DIV align=»center»>…</DIV> Línea(s) centrada(s)
- <DIV align=»right»>…</DIV> Línea(s) alineada(s) a la derecha
- <DIV align=»justify»>…</DIV> Línea(s) alineada(s) justificadas
- <BLOCKQUOTE>…<BLOCKQUOTE> sangria izquierda y derecha
Colores de texto
- <p style=»color:#FF0000″;>texto</p> Color del texto con códigos Hexadecimales
- <p style=»color:red;»>texto</p> Color del texto con nombres de colores (hay 140 colores)
- <p style=»color:rgb(255,0,0);»>texto</p> Color del texto utilizando los valores de los colores RGB
Colores de fondo de la web
- <body style=»background-color:#FF0000;»> </body> mediante códigos de color Hexadecimales
- <body style=»background-color:red;»> </body> mediante nombres de colores HTML
- <body style=»background-color:rgb(255,0,0);»> </body> mediante valores de color RGB
Colocar un fondo de imagen:
- <body background=»fondo.gif»> en la página web
- <table background=»fondo.gif»> en una tabla
- <td background=»fondo.gif»> en una celda
Tablas
Una tabla es un medio de organizar datos en filas y columnas.
Crear tablas
- <table> </table> establece la tabla (ejemplos: <table class=»egt»> ; <table style=»width:100%»> ;
- <caption> título de la tabla
- <tr> </tr> establece las filas contenedoras de las celdas
- <td> </td> establece las celdas
- <th> </th> establece las celdas de título o encabezado
- <th scope=»row»> </th> establece modificaciones a las celdas de título o encabezado
«El atributo scope provee un mecanismo para indicar explícitamente a qué celdas afecta una celda de encabezado. Este atributo solo puede ser declarado en una celda de encabezado y tomar los valores «col», «row», «colgroup» y «rowgroup». Los valores «col» y «row» indican que la celda de encabezado provee información para el resto de las celdas en la columna o fila (respectivamente) en que está presente.»
Más sobre tablas
Organizar contenido
- <td colspan> para unificar celdas horizontales. (ejemplo: <td colspan=»3″>texto</td>)
- <td rowspan> para unificar celdas vertical. (ejemplo: <td rowspan=»2″>texto</td> )
- <thead> para agrupar las filas que presentan información de encabezado
- <tbody> para agrupar las filas que presentan los datos de la tabla
- <tfoot> para contener a las filas que representan un pie o resumen
Podemos personalizar el como de fondo y el tipo de borde, ejemplo: <tbody style=»background: rgba(128, 255, 0, 0.3); border: 1px solid rgba(100, 200, 0, 0.3);»>
Pruebas de alumnos:
Fuentes:
https://mx.godaddy.com/blog/10-codigos-html-para-paginas-web-y-para-que-sirven/
https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/HTML_basics
https://htmlcolorcodes.com/es/tutoriales/html-color-del-texto/
https://lenguajehtml.com/p/html/semantica/etiquetas-html-de-texto