Scribd
Cargar
56 vistas23 páginas

HTML5 (Parte1)

HTML es el lenguaje de marcado que define la estructura y el contenido de una página web. Fue desarrollado por Tim Berners-Lee y permite publicar documentos que incluyen texto, imágenes, hipervínculos y otros elementos. Los navegadores web usan las etiquetas HTML para interpretar cómo debe mostrarse el contenido. El elemento <head> contiene metadatos y referencias que proporcionan información adicional sobre el documento.

Cargado por

Alexander Ramos
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
56 vistas23 páginas

HTML5 (Parte1)

HTML es el lenguaje de marcado que define la estructura y el contenido de una página web. Fue desarrollado por Tim Berners-Lee y permite publicar documentos que incluyen texto, imágenes, hipervínculos y otros elementos. Los navegadores web usan las etiquetas HTML para interpretar cómo debe mostrarse el contenido. El elemento <head> contiene metadatos y referencias que proporcionan información adicional sobre el documento.

Cargado por

Alexander Ramos
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 23

HTML – Hyper Text Markup Language

HTML significa lenguaje de marcado de hipertexto . HTML es el componente básico de la World Wide Web.
El hipertexto es texto que se muestra en una computadora u otro dispositivo electrónico con referencias a otro
texto al que el usuario puede acceder de inmediato, generalmente con un clic del mouse o presionando una
tecla.
Además del texto, el hipertexto puede contener tablas, listas, formularios, imágenes y otros elementos de
presentación. Es un formato fácil de usar y flexible para compartir información a través de Internet.
Los lenguajes de marcado utilizan conjuntos de etiquetas de marcado para caracterizar elementos de texto
dentro de un documento, lo que da instrucciones a los navegadores web sobre cómo debe aparecer el
documento.
HTML fue desarrollado originalmente por Tim Berners-Lee en 1990. También se le conoce como el padre de la
web. En 1996, el World Wide Web Consortium (W3C) se convirtió en la autoridad para mantener las
especificaciones HTML. HTML también se convirtió en un estándar internacional (ISO) en 2000. HTML5 es la
última versión de HTML. HTML5 proporciona un enfoque más rápido y sólido para el desarrollo web.
Qué puedes hacer con HTML
Hay muchas más cosas que puedes hacer con HTML.
• Puede publicar documentos en línea con texto, imágenes, listas, tablas, etc.
• Puede acceder a recursos web como imágenes, videos u otros documentos HTML a través de
hipervínculos.
• Puede crear formularios para recopilar entradas de usuario como nombre, dirección de correo
electrónico, comentarios, etc.
• Puede incluir imágenes, videos, clips de sonido, películas flash, aplicaciones y otros documentos HTML
directamente dentro de un documento HTML.
• Puede crear una versión sin conexión de su sitio web que funcione sin Internet.
• Puede almacenar datos en el navegador web del usuario y acceder más tarde.
• Puede encontrar la ubicación actual del visitante de su sitio web.
La lista no termina aquí, hay muchas otras cosas interesantes que puedes hacer con HTML. Aprenderá sobre
todos ellos en detalle en los próximos capítulos.
Nota: HTML, como se describió anteriormente, es un lenguaje de marcado, no un lenguaje de programación,
como Java, Ruby, PHP, etc. Necesita un navegador web para ver las páginas HTML. Los navegadores web no
muestran las etiquetas HTML, pero utilizan las etiquetas para interpretar el contenido de las páginas web.
Tipos de documentos HTML
Comprender el tipo de documento HTML5
Una declaración de tipo de documento, o DOCTYPE para abreviar, es una instrucción para el navegador web
sobre la versión del lenguaje de marcado en el que está escrita una página web.
Una declaración DOCTYPE aparece en la parte superior de una página web antes que todos los demás elementos.
De acuerdo con la especificación o los estándares de HTML, cada documento HTML requiere una declaración de
tipo de documento válida para garantizar que sus páginas web se muestren de la forma prevista.
La declaración de tipo de documento suele ser lo primero que se define en un documento HTML (incluso antes
de la etiqueta de apertura <html> ); sin embargo, la declaración de tipo de documento en sí no es una etiqueta
HTML.
El DOCTYPE para HTML5 es muy breve, conciso y no distingue entre mayúsculas y minúsculas.
<!DOCTYPE html>
ahora están obsoletos.
Con HTML5, este ya no es el caso y la declaración de tipo de documento solo es necesaria para habilitar el modo
estándar para documentos escritos con la sintaxis HTML.
Puede usar el siguiente marcado como plantilla para crear un nuevo documento HTML5.
Nota: La declaración de tipo de documento hace referencia a una definición de tipo de documento (DTD). Es
una instrucción para el navegador web sobre la versión del lenguaje de marcado en la que está escrita la página.
El World Wide Web Consortium (W3C) proporciona DTD para todas las versiones de HTML.
Sugerencia: debe agregar una declaración de tipo de documento al crear un documento HTML. Además, utilice
el validador de W3C para comprobar si hay errores de sintaxis o marcado en HTML antes de publicarlo en línea.

Encabezado HTML
El elemento de encabezado HTML
El elemento <head> es principalmente el contenedor de todos los elementos head, que brindan información
adicional sobre el documento (metadatos) o referencias a otros recursos necesarios para que el documento se
muestre o se comporte correctamente en un navegador web.
Los elementos de encabezado describen colectivamente las propiedades del documento, como el título, brindan
metainformación, como el juego de caracteres, indican al navegador dónde encontrar las hojas de estilo o scripts
que le permiten ampliar el documento HTML de manera muy activa e interactiva.
que se pueden usar dentro del elemento <head> son: <title> , <base> , <link> , <style> , <meta> , <script> y el
elemento <noscript> .
El elemento de título HTML
El elemento <title> define el título del documento.
El elemento de título se requiere en todos los documentos HTML/XHTML para producir un documento válido.
Solo se permite un elemento de título en un documento y debe colocarse dentro del elemento <head> . El
elemento de título contiene texto sin formato y entidades; no puede contener otras etiquetas de marcado.
El título del documento puede utilizarse para diferentes propósitos. Por ejemplo:
• Para mostrar un título en la barra de título del navegador y en la barra de tareas.
• Proporcionar un título para la página cuando se agrega a favoritos o se marca.
• Para muestra un título para la página en los resultados del motor de búsqueda.
Sugerencia: un buen título debe ser breve y específico para el contenido del documento, ya que los rastreadores
web de los motores de búsqueda prestan especial atención a las palabras utilizadas en el título. Lo ideal es que
el título tenga menos de 65 caracteres
El elemento base HTML
El elemento HTML <link> se usa para definir una URL base para todos los enlaces relativos contenidos en el
documento, por ejemplo , puede establecer la URL base una vez en la parte superior de su página, y luego todos
los enlaces relativos posteriores usarán esa URL como punto de partida. punto.
El hipervínculo del ejemplo anterior en realidad se resolverá en https://www.siscade.com/html-tutorial/html-
head.php independientemente de la URL de la página actual. Esto se debe a que la URL relativa especificada en
el enlace: html-tutorial/html- head.php se agrega al final de la URL base: https://www.siscade.com/ .
Advertencia: el elemento HTML <link> debe aparecer antes que cualquier elemento que haga referencia a un
recurso externo. HTML permite solo un elemento base para cada documento.

El elemento de enlace HTML


El elemento <link> define la relación entre el documento actual y un documento o recurso externo. Un uso
común del elemento de enlace es vincular a hojas de estilo externas.
Nota: El elemento <head> de un documento HTML puede contener cualquier cantidad de elementos <link> . El
elemento <link> tiene atributos, pero no contenido.

El elemento de estilo HTML


El elemento <style> se utiliza para definir información de estilo incrustada para un documento HTML. Las reglas
de estilo dentro del elemento <style> especifican cómo se representan los elementos HTML en un navegador.
Nota: se debe usar una hoja de estilo incrustada cuando un solo documento tiene un estilo único. Si se usa la
misma hoja de estilo en varios documentos, una hoja de estilo externa sería más adecuada.

Metaelemento HTML
El elemento <meta> proporciona metadatos sobre el documento HTML. Los metadatos son un conjunto de datos
que describen y brindan información sobre otros datos. Aquí hay un ejemplo:
El elemento de secuencia de comandos HTML
El elemento <script> se usa para definir scripts del lado del cliente, como JavaScript en documentos HTML.
El siguiente ejemplo mostrará un mensaje de saludo en el navegador:
Meta HTML
Definición de metadatos
Las etiquetas <meta> se utilizan normalmente para proporcionar metadatos estructurados, como las palabras
clave de un documento , la descripción , el nombre del autor , la codificación de caracteres y otros metadatos. Se
puede colocar cualquier cantidad de etiquetas meta dentro de la sección de encabezado de un documento HTML
o XHTML.
Los metadatos no se mostrarán en la página web, pero serán analizables por máquina y pueden ser utilizados
por los navegadores, motores de búsqueda como Google u otros servicios web.
Declaración de codificación de caracteres en HTML
Metaetiqueta que normalmente se usa para declarar la codificación de caracteres dentro de un documento
HTML.
Nota: UTF-8 es una codificación de caracteres muy versátil y recomendada para elegir. Sin embargo, si no se
especifica, se utiliza la codificación predeterminada de la plataforma.
Definición del autor de un documento
También puede usar la etiqueta meta para definir claramente quién es el autor o creador de la página web.
El autor puede ser una persona física, la empresa en su conjunto o un tercero.
Nota: el atributo de name de la etiqueta meta define el nombre de una pieza de metadatos a nivel de
documento, mientras que el atributo de contenido proporciona el valor correspondiente. El valor del atributo
content puede contener texto y entidades, pero no puede contener etiquetas HTML.

Palabras clave y descripción para motores de búsqueda


Algunos motores de búsqueda usan metadatos, especialmente palabras clave y descripciones para indexar
páginas web; sin embargo, esto puede no ser necesariamente cierto. Las palabras clave que dan peso adicional
a las palabras clave y la descripción de un documento proporcionan una breve sinopsis de la página.
Sugerencia: los motores de búsqueda a menudo usan la meta descripción de una página para crear una breve
sinopsis de la página cuando aparece en los resultados de búsqueda.

Configuración de Viewport para dispositivos móviles


Puede usar la etiqueta meta de la ventana gráfica para mostrar las páginas web correctamente en dispositivos
móviles.
Sin una metaetiqueta de ventana gráfica, los navegadores móviles representan las páginas web en anchos de
pantalla de escritorio típicos y luego las reducen para que se ajusten a la pantalla móvil. Como resultado,
requiere pellizcar y hacer zoom para ver la página web correctamente en dispositivos móviles, lo cual es muy
inconveniente.
La siguiente demostración muestra dos páginas web: una con una metaetiqueta de ventana gráfica y otra sin el
conjunto de etiquetas meta de ventana gráfica. Abra estos enlaces en dispositivos móviles para ver cómo
funciona.
La etiqueta meta de la ventana gráfica le permite establecer el mejor tamaño de la ventana gráfica y los límites
de escala para ver las páginas web en dispositivos móviles. Una definición típica de metaetiqueta de viewport
se verá de la siguiente manera:
El par clave-valor ancho=ancho del dispositivo dentro del atributo de contenido establece el ancho de la ventana
gráfica al mismo ancho que el ancho de la pantalla del dispositivo, mientras que la escala inicial=1 establece la
escala inicial o el nivel de zoom al 100 % cuando la página primero lo carga el navegador.
Sugerencia: utilice siempre la etiqueta de ventana gráfica <meta> en sus páginas web. Hará que su sitio web sea
fácil de usar y más accesible en dispositivos móviles como teléfonos celulares y tabletas.

URL HTML
¿Qué es URL?
URL significa Uniform Resource Locator es la dirección global de documentos y otros recursos en la World Wide
Web. Su objetivo principal es identificar la ubicación de un documento y otros recursos disponibles en Internet,
y especificar el mecanismo para acceder a él a través de un navegador web.
Por ejemplo, si observa la barra de direcciones de su navegador, verá:
https://www.siscade.com/listado.php
La sintaxis de URL
La sintaxis general de las URL es la siguiente:
esquema://host:puerto/ruta?cadena-consulta#id-fragmento
Una URL tiene una estructura lineal y normalmente consta de algunos de los siguientes:
• Nombre del esquema : el esquema identifica el protocolo que se utilizará para acceder al recurso en
Internet. Los nombres del esquema seguidos de los tres caracteres :// (dos puntos y dos barras). Los
protocolos más utilizados son http:// , https:// , ftp:// y mailto:// .
• Nombre de host : el nombre de host identifica el host donde se encuentra el recurso. Un nombre de host
es un nombre de dominio asignado a una computadora host. Suele ser una combinación del nombre
local del host con el nombre de su dominio principal. Por ejemplo, www.siscade.com consta del nombre
de la máquina del host www y el nombre de dominio siscade.com .
• Número de puerto : los servidores a menudo brindan más de un tipo de servicio, por lo que también
debe informar al servidor qué servicio se solicita. Estas solicitudes se realizan por número de puerto. Los
números de puerto conocidos para un servicio normalmente se omiten de la URL. Por ejemplo, el servicio
web HTTP se ejecuta de forma predeterminada en el puerto 80, HTTPS se ejecuta de forma
predeterminada en el puerto 443.
• Ruta : la ruta identifica el recurso específico dentro del host al que el usuario desea acceder. Por ejemplo,
/html/html-url.php , / noticias/tecnología/ , etc.
• Cadena de consulta : la cadena de consulta contiene datos que se pasan a los scripts del lado del servidor,
que se ejecutan en el servidor web. Por ejemplo, parámetros para una búsqueda. La cadena de consulta
precedida por un signo de interrogación ( ? ) suele ser una cadena de pares de nombre y valor separados
por el signo ampersand ( & ), por ejemplo , ? first _name = John&last_name =Corner , q= mobile+phone
, y así sucesivamente.
• Identificador de fragmento : el identificador de fragmento, si está presente, especifica una ubicación
dentro de la página. El navegador puede desplazarse para mostrar esa parte de la página. El identificador
de fragmento introducido por un carácter hash ( # ) es la última parte opcional de una URL para un
documento.
Nota: Los componentes de esquema y host de una URL no distinguen entre mayúsculas y minúsculas, pero la
ruta y la cadena de consulta sí lo hacen. Por lo general, toda la URL se especifica en minúsculas.

Crear su primer documento HTML


Recorramos los siguientes pasos.
Paso 1: Crear el archivo HTML
Abre el editor de texto sin formato de tu computadora y crea un nuevo archivo.
Sugerencia: se sugiere que use el Bloc de notas (en Windows), o Visual Studio Code o algún otro editor de texto
simple para hacer esto; ¡no use Word o WordPad! Una vez que comprenda los principios básicos, puede cambiar
a herramientas más avanzadas.
Paso 2: escriba un código HTML
Comience con una ventana vacía y escriba el código:
Paso 3: Guardar el archivo
Ahora guarde el archivo en su escritorio como "mipagina.html".
Nota: es importante que se especifique la extensión .html ; de lo contrario, algunos editores de texto, como el
Bloc de notas, la guardarán automáticamente como .txt .
Para abrir el archivo en un navegador. Navegue a su archivo y luego haga doble clic en él. Se abrirá en su
navegador web predeterminado. Si no es así, abra su navegador y arrastre el archivo hasta él.
Explicación del código
• La primera línea <!DOCTYPE html> es la declaración del tipo de documento . Le indica al navegador web
que este documento es un documento HTML5. No distingue entre mayúsculas y minúsculas.
• El elemento <head> es un contenedor para las etiquetas que proporciona información sobre el
documento, por ejemplo, la etiqueta <title> define el título del documento.
• El elemento <body> contiene el contenido real del documento (párrafos, enlaces, imágenes, tablas, etc.)
que se representa en el navegador web y se muestra al usuario.
Nota: una declaración DOCTYPE aparece en la parte superior de una página web antes de todos los demás
elementos; sin embargo, la declaración de tipo de documento en sí no es una etiqueta HTML. Cada documento
HTML requiere una declaración de tipo de documento para garantizar que sus páginas se muestren
correctamente.
Sugerencia: Las etiquetas <html> , <head> y <body> constituyen el esqueleto básico de cada página web. El
contenido dentro de <head> y </head> es invisible para los usuarios con una excepción: el texto entre las
etiquetas <title> y </title> que aparece como título en una pestaña del navegador.

Etiquetas y elementos HTML


HTML está escrito en forma de elementos HTML que consisten en etiquetas de marcado. Estas etiquetas de
marcado son la característica fundamental de HTML. Cada etiqueta de marcado se compone de una palabra
clave, rodeada por corchetes angulares, como <html> , <head> , <body> , <title> , <p> , etc.
Las etiquetas HTML normalmente vienen en pares como <html> y </html> . La primera etiqueta de un par a
menudo se denomina etiqueta de apertura (o etiqueta de inicio), y la segunda etiqueta se denomina etiqueta
de cierre (o etiqueta final).
Una etiqueta de apertura y una etiqueta de cierre son idénticas, excepto por una barra inclinada ( / ) después
del paréntesis angular de apertura de la etiqueta de cierre, para indicarle al navegador que el comando se ha
completado.
Entre las etiquetas de inicio y finalización puede colocar contenidos apropiados. Por ejemplo, un párrafo, que
está representado por el elemento p , se escribiría como:
Elementos HTML
Sintaxis del elemento HTML
Un elemento HTML es un componente individual de un documento HTML. Representa la semántica, o el
significado. Por ejemplo, el elemento de título representa el título del documento.
La mayoría de los elementos HTML se escriben con una etiqueta de inicio (o etiqueta de apertura) y una etiqueta
de finalización (o etiqueta de cierre), con contenido en el medio. Los elementos también pueden contener
atributos que definen sus propiedades adicionales. Por ejemplo, un párrafo, que está representado por el
elemento p , se escribiría como:
Aprenderemos sobre los atributos HTML en el próximo capítulo .
Nota: Todos los elementos no requieren que esté presente la etiqueta final o la etiqueta de cierre. Estos se
conocen como elementos vacíos , elementos de cierre automático o elementos vacíos .

Etiquetas HTML Vs Elementos


Técnicamente, un elemento HTML es la colección de una etiqueta de inicio, sus atributos, una etiqueta de
finalización y todo lo demás. Por otro lado, una etiqueta HTML (ya sea de apertura o de cierre) se usa para
marcar el inicio o el final de un elemento, como puede ver en la ilustración anterior.
Sin embargo, en el uso común, los términos elemento HTML y etiqueta HTML son intercambiables, es decir, una
etiqueta es un elemento es una etiqueta. Para simplificar este sitio web, los términos "etiqueta" y "elemento"
se usan para significar lo mismo, ya que definirán algo en su página web.

Insensibilidad a mayúsculas y minúsculas en etiquetas y atributos HTML


En HTML, los nombres de etiquetas y atributos no distinguen entre mayúsculas y minúsculas (pero la mayoría
de los valores de atributos distinguen entre mayúsculas y minúsculas). Significa la etiqueta <P> , y la etiqueta
<p> define lo mismo en HTML, que es un párrafo.
Pero en XHTML distinguen entre mayúsculas y minúsculas y la etiqueta <P> es diferente de la etiqueta <p> .
Sugerencia: Recomendamos usar minúsculas para etiquetas y atribuir nombres en HTML, ya que al hacer esto
puede hacer que su documento sea más compatible para futuras actualizaciones.

Elementos HTML vacíos


Los elementos vacíos (también llamados elementos de cierre automático o vacíos) no son etiquetas
contenedoras, lo que significa que no puede escribir <hr> algún contenido </hr> o <br> algún contenido </br> .
Un ejemplo típico de un elemento vacío es el elemento <br> , que representa un salto de línea. Algunos otros
elementos vacíos comunes son <img> , <input> , <link> , <meta> , <hr> , etc.
Nota: en HTML, un elemento de cierre automático se escribe simplemente como <br> . En XHTML, un elemento
de cierre automático requiere un espacio y una barra diagonal final, como <br /> .
Anidamiento de elementos HTML
La mayoría de los elementos HTML pueden contener cualquier cantidad de elementos adicionales (excepto
elementos vacíos ), que, a su vez, están formados por etiquetas, atributos y contenido u otros elementos.
El siguiente ejemplo muestra algunos elementos anidados dentro del elemento <p> .
Sugerencia: Colocar un elemento dentro de otro se denomina anidamiento. Un elemento anidado, también
llamado elemento secundario, también puede ser un elemento principal si hay otros elementos anidados dentro
de él.
Las etiquetas HTML deben anidarse en el orden correcto. Deben cerrarse en el orden inverso al que están
definidas, es decir, la última etiqueta abierta debe cerrarse primero.
Escribir comentarios en HTML
Los comentarios generalmente se agregan con el propósito de hacer que el código fuente sea más fácil de
entender. Puede ayudar a otros desarrolladores (o a usted en el futuro cuando edite el código fuente) a
comprender lo que estaba tratando de hacer con el HTML. Los comentarios no se muestran en el navegador.
Un comentario HTML comienza con <!-- y termina con --> , como se muestra en el siguiente ejemplo:
También puede comentar parte de su código HTML con fines de depuración, como se muestra aquí:

Tipos de elementos HTML


Los elementos se pueden colocar en dos grupos distintos: elementos de nivel de bloque y elementos de nivel en
línea . Los primeros conforman la estructura del documento, mientras que los segundos visten el contenido de
un bloque.
Además, un elemento de bloque ocupa el 100% del ancho disponible y se representa con un salto de línea antes
y después. Mientras que un elemento en línea ocupará solo el espacio que necesite.
de nivel de bloque más utilizados son <div> , <p> , <h1> a <h6> , <form> , <ol> , <ul> , <li> , etc. Mientras que los
elementos de nivel en línea comúnmente utilizados son <img> , <a> , <span> , <strong> , <b> , <em> , <i> ,
<code> , <input> , <button> , etc.
Nota: Los elementos de nivel de bloque no deben colocarse dentro de los elementos de nivel en línea. Por
ejemplo, el elemento <p> no debe colocarse dentro del elemento <b> .

Atributos HTML
¿Qué son los atributos?
Los atributos definen características o propiedades adicionales del elemento, como el ancho y el alto de una
imagen. Los atributos siempre se especifican en la etiqueta de inicio (o etiqueta de apertura) y generalmente
consisten en pares de nombre/valor como name="value" . Los valores de los atributos siempre deben estar
entre comillas.
Además, se requieren algunos atributos para ciertos elementos. Por ejemplo, una etiqueta <img> debe contener
los atributos src y alt . Echemos un vistazo a algunos ejemplos de los usos de los atributos :
En el ejemplo, src dentro de la etiqueta <img> es un atributo y la ruta de la imagen proporcionada es su valor.
Similarmente href dentro de la etiqueta <a> es un atributo y el enlace proporcionado es su valor, y así
sucesivamente.
Sugerencia: tanto las comillas simples como las dobles se pueden usar para citar valores de atributos. Sin
embargo, las comillas dobles son las más comunes. En situaciones en las que el propio valor del atributo contiene
comillas dobles, es necesario envolver el valor entre comillas simples, por ejemplo, value=’Jhonny "Centellas"'
Hay varios atributos en HTML5 que no consisten en pares de nombre/valor sino que consisten solo en un
nombre. Estos atributos se denominan atributos booleanos. Los ejemplos de algunos atributos booleanos de
uso común son check , disabled , readonly , required , etc.
Nota: Los valores de atributo generalmente no distinguen entre mayúsculas y minúsculas, excepto ciertos
valores de atributo, como los atributos id y class . Sin embargo, World Wide Web Consortium (W3C) recomienda
minúsculas para los valores de los atributos en su especificación.
Atributos de propósito general
Hay algunos atributos, como id , title , class , style , etc. que puedes usar en la mayoría de los elementos HTML.
La siguiente sección describe su uso.
El atributo id
El atributo id se usa para dar un nombre o identificador único a un elemento dentro de un documento. Esto
facilita la selección del elemento usando CSS o JavaScript.
Nota: La identificación de un elemento debe ser única dentro de un solo documento. No se pueden nombrar
dos elementos en el mismo documento con la misma identificación , y cada elemento puede tener solo una
identificación .
El atributo de clase
Al igual que el atributo id , el atributo class también se utiliza para identificar elementos. Pero a diferencia de id
, el atributo de clase no tiene que ser único en el documento. Esto significa que puede aplicar la misma clase a
varios elementos de un documento, como se muestra en el siguiente ejemplo:
Sugerencia: dado que una clase se puede aplicar a varios elementos, cualquier regla de estilo escrita para esa
clase se aplicará a todos los elementos que tengan esa clase .

El atributo del título


El atributo de título se utiliza para proporcionar un texto de asesoramiento sobre un elemento o su contenido.
Sugerencia: los navegadores web muestran el valor del atributo de título ( es decir, el texto del título) como
información sobre herramientas cuando el usuario coloca el cursor del mouse sobre el elemento.
El atributo de estilo
El atributo de estilo le permite especificar reglas de estilo CSS como color, fuente, borde, etc. directamente
dentro del elemento.
Encabezados HTML
Organización del contenido con encabezados
Los encabezados ayudan a definir la jerarquía y la estructura del contenido de la página web.
HTML ofrece seis niveles de etiquetas de encabezado, <h1> a <h6> ; cuanto menor sea el número del nivel del
encabezado, mayor será su importancia; por lo tanto, la etiqueta <h1> define el encabezado más importante,
mientras que la etiqueta <h6> define el encabezado menos importante del documento.
De forma predeterminada, los navegadores muestran los encabezados en una fuente más grande y en negrita
que el texto normal. Además, los encabezados <h1> se muestran en la fuente más grande, mientras que los
encabezados <h6> se muestran en la fuente más pequeña.
Ejemplo
<h1> Encabezado nivel 1 </h1>
<h2> Encabezado nivel 2 </h2>
<h3> Encabezado nivel 3 </h3>
<h4> Encabezado nivel 4 </h4>
<h5> Encabezado nivel 5 </h5>
<h6> Encabezado nivel 6 </h6>
Nota: cada vez que coloca una etiqueta de encabezado en una página web, las hojas de estilo integradas del
navegador web crean automáticamente un espacio vacío (llamado margen) antes y después de cada
encabezado.
Sugerencia: puede personalizar fácilmente la apariencia de las etiquetas de encabezado HTML, como el tamaño
de fuente, la negrita, el tipo de letra, etc., utilizando las propiedades de fuente CSS.
Importancia de los encabezados
• Los encabezados HTML brindan información valiosa al resaltar temas importantes y la estructura del
documento, así que optimícelos cuidadosamente para mejorar la participación del usuario.
• No uses encabezados para que tu texto se vea GRANDE o en negrita. Úselos solo para resaltar el
encabezado de su documento y para mostrar la estructura del documento.
• Dado que los motores de búsqueda, como Google, usan encabezados para indexar la estructura y el
contenido de las páginas web, utilícelos con prudencia en su página web.
• Utilice los encabezados <h1> como encabezados principales de su página web, seguidos de los
encabezados <h2> , luego los encabezados <h3> menos importantes , y así sucesivamente.
Sugerencia: use la etiqueta <h1> para marcar el encabezado más importante que generalmente se encuentra
en la parte superior de la página. Por lo general, un documento HTML debe tener exactamente un encabezado
<h1> , seguido de los encabezados de nivel inferior, como <h2> , <h3> , <h4> , etc.

Párrafos HTML
Crear párrafos
El elemento de párrafo se utiliza para publicar texto en las páginas web.
Los párrafos se definen con la etiqueta <p> . La etiqueta de párrafo es muy básica y, por lo general, es la primera
etiqueta que necesitará para publicar su texto en las páginas web. Aquí hay un ejemplo:
Ejemplo
<p> Esto es un párrafo. </p>
<p> Este es otro párrafo. </p>
Nota: las hojas de estilo integradas en los navegadores crean automáticamente un espacio arriba y abajo del
contenido de un párrafo (llamado margen ), pero puede anularlo usando CSS.
Cerrar un elemento de párrafo
En HTML 4 y versiones anteriores, bastaba con iniciar un nuevo párrafo utilizando la etiqueta de apertura. La
mayoría de los navegadores mostrarán HTML correctamente incluso si olvida la etiqueta final. Por ejemplo:
Ejemplo
<p> Esto es un párrafo.
<p> Este es otro párrafo.
El código HTML del ejemplo anterior funcionará en la mayoría de los navegadores web, pero no confíe en él.
Olvidar la etiqueta final puede producir resultados inesperados o errores.
Nota: para fines de compatibilidad con reenvíos y buenas prácticas de codificación, se recomienda utilizar las
etiquetas de apertura y cierre de los párrafos.
Creación de saltos de línea
La etiqueta <br> se utiliza para insertar un salto de línea en la página web.
Dado que <br> es un elemento vacío , no hay necesidad de la etiqueta </br> correspondiente .
Ejemplo
<p> Este es un párrafo <br> con salto de línea. </p>
<p> Este es <br> otro párrafo <br> con saltos de línea. </p>
Nota: No utilice el párrafo vacío, es decir <p></p> para agregar espacio adicional en sus páginas web. El
navegador puede ignorar los párrafos vacíos ya que es una etiqueta lógica. Utilice la propiedad de margen CSS
en su lugar para ajustar el espacio alrededor de los elementos.
Creación de reglas horizontales
Puede usar la etiqueta <hr> para crear reglas o líneas horizontales para separar visualmente las secciones de
contenido en una página web. Al igual que <br> , la etiqueta <hr> también es un elemento vacío. Aquí hay un
ejemplo:
Ejemplo
<p> Esto es un párrafo. </p>
<hr>
<p> Este es otro párrafo. </p>
Gestión de espacios en blanco
Normalmente, el navegador mostrará los múltiples espacios creados dentro del código HTML al presionar la
tecla de barra espaciadora o la tecla de tabulación en el teclado como un solo espacio. Los saltos de línea
múltiples creados dentro del código HTML al presionar la tecla Intro también se muestran como un solo espacio.
Los siguientes párrafos se mostrarán en una sola línea sin espacio adicional:
Ejemplo
<p> Este párrafo contiene múltiples espacios en el código fuente. </p>
Este párrafo
contiene varias pestañas y saltos de línea
en el código fuente.
</p>
Insertar & nbsp ; para crear espacios consecutivos adicionales, mientras que inserte la etiqueta <br> para crear
saltos de línea en sus páginas web, como se demuestra en el siguiente ejemplo:
Ejemplo
<p> Este párrafo tiene múltiples & nbsp ;& nbsp ;& nbsp; espacios _ </p>
<p> Este párrafo tiene múltiples <br><br> saltos de línea <br><br><br> . </p>
Definición de texto con formato previo
A veces, usando & nbsp ; , <br> , etc. para administrar espacios no es muy conveniente. Alternativamente, puede
usar la etiqueta <pre> para mostrar espacios, tabulaciones, saltos de línea, etc. exactamente como está escrito
en el archivo HTML. Es muy útil para presentar texto donde los espacios y los saltos de línea son importantes,
como un poema o un código.
El siguiente ejemplo mostrará el texto en el navegador tal como está en el código fuente:
Ejemplo
<pre>
Brilla brilla pequeña estrella,
¡Cómo me pregunto lo que eres!
Por encima del mundo tan arriba,
Como un diamante en el cielo.
</pre>
Sugerencia: el texto dentro del elemento <pre> generalmente lo representan los navegadores en una fuente
monoespaciada o de ancho fijo, como Courier, pero puede anular esto usando la propiedad de fuente CSS .
Enlaces HTML
Creación de enlaces en HTML
Un enlace o hipervínculo es una conexión de un recurso web a otro. Los enlaces permiten a los usuarios moverse
sin problemas de una página a otra, en cualquier servidor en cualquier parte del mundo.
Un enlace tiene dos extremos, llamados anclas. El enlace comienza en el ancla de origen y apunta al ancla de
destino, que puede ser cualquier recurso web, por ejemplo, una imagen, un clip de audio o video, un archivo
PDF, un documento HTML o un elemento dentro del propio documento, etc. en.
Por defecto, los enlaces aparecerán de la siguiente manera en la mayoría de los navegadores:
• Un enlace no visitado está subrayado y azul.
• Un enlace visitado está subrayado y morado.
• Un enlace activo está subrayado y rojo.
Sin embargo, puede sobrescribir esto usando CSS. Obtenga más información sobre el estilo de los vínculos .
Sintaxis de enlace HTML
Los enlaces se especifican en HTML usando la etiqueta <a> .
Un enlace o hipervínculo puede ser una palabra, un grupo de palabras o una imagen.
<a href =" url "> Texto del enlace </a>
Cualquier cosa entre la etiqueta de apertura <a> y la etiqueta de cierre </a> se convierte en la parte del enlace
que el usuario ve y hace clic en un navegador. Estos son algunos ejemplos de los enlaces:
Ejemplo
<a href =" https://www.google.com/ "> Búsqueda de Google </a>
<a href =" https://www.siscade.com/ "> Siscade</a>
<a href =" imágenes/planetas.jpg ">
<imagen src =" planetas.jpg " alt =" Los Planetas ">
</a>
El atributo href especifica el destino del enlace. Su valor puede ser una URL absoluta o relativa.
Una URL absoluta es la URL que incluye todas las partes del formato de URL, como el protocolo, el nombre de
host y la ruta del documento, por ejemplo, https://www.google.com/ , https://www.example.com /form.php ,
etc.
Mientras que las URL relativas son rutas relativas a la página, por ejemplo, contacto.html , images/foto.png, etc.
Una URL relativa nunca incluye el prefijo http:// o https:// .
Establecer los objetivos para los enlaces
El atributo de destino le dice al navegador dónde abrir el documento vinculado. Hay cuatro destinos definidos,
y cada nombre de destino comienza con un carácter de subrayado ( _ ):
• _blank : abre el documento vinculado en una nueva ventana o pestaña.
• _parent : abre el documento vinculado en la ventana principal.
• _self : abre el documento vinculado en la misma ventana o pestaña que el documento de origen. Este es
el valor predeterminado, por lo que no es necesario especificar explícitamente este valor.
• _top : abre el documento vinculado en la ventana completa del navegador.
Pruebe el siguiente ejemplo para comprender cómo funciona básicamente el objetivo del enlace:
Ejemplo
<a href = " /acerca-de-nosotros.php " target=" _top "> Acerca de nosotros </a>
<a href =" https://www.google.com/ " target=" _blank "> Google </a>
<a href =" imagenes/cielo.jpg " target=" _parent ">
<imagen src ="nubes.jpg " alt =" Cielo Nublado ">
</a>
Sugerencia: si su página web se coloca dentro de un iframe , puede usar target="_top" en los enlaces para salir
del iframe y mostrar la página de destino en la ventana completa del navegador.

Creación de anclajes de marcadores


También puede crear anclas de marcadores para permitir que los usuarios salten a una sección específica de
una página web. Los marcadores son especialmente útiles si tiene una página web muy larga.
La creación de marcadores es un proceso de dos pasos: primero agregue el atributo id en el elemento donde
desea saltar, luego use ese valor de atributo id precedido por el signo de almohadilla ( # ) como el valor del
atributo href de la etiqueta <a> , como se muestra en el siguiente ejemplo:
Ejemplo
<a href =" #seccionA "> Saltar a la Sección A </a>
<h2 id =" seccionA "> Sección A </h2>
<p> Lorem ipsum dolor sit amet , consectetur adipiscente élite ... </p>
Sugerencia: incluso puede saltar a una sección de otra página web especificando la URL de esa página junto con
el ancla ( es decir, #elementId ) en el atributo href , por ejemplo, <a href =" mipagina.html#topicA "> ir a TopicA
</a> .
Creación de enlaces de descarga
También puede crear el enlace de descarga de archivos exactamente de la misma manera que coloca enlaces
de texto. Simplemente apunte la URL de destino al archivo que desea que esté disponible para su descarga.
En el siguiente ejemplo, hemos creado los enlaces de descarga para archivos ZIP, PDF y JPG.
Ejemplo
<a href =" descargas/archivos.zip "> Descargar archivo Zip </a>
<a href =" descargas/documento.pdf "> Descargar archivo PDF </a>
<a href =" descargas/foto.jpg "> Descargar archivo de imagen </a>
Nota: cuando hace clic en un enlace que apunta a un archivo PDF o de imagen, el archivo no se descarga
directamente a su disco duro. Solo abrirá el archivo en su navegador web. Además, puede guardarlo o
descargarlo en su disco duro de forma permanente.

Formato de texto HTML


Formatear texto con HTML
etiquetas que puede usar para hacer que parte del texto de sus páginas web se vea diferente al texto normal,
por ejemplo, puede usar la etiqueta <b> para poner el texto en negrita, la etiqueta <i> para poner el texto en
cursiva , etiquete <mark> para resaltar el texto, etiquete <code> para mostrar un fragmento de código de
computadora, etiquete <ins> y <del> para marcar inserciones y eliminaciones editoriales, y más.
El siguiente ejemplo muestra las etiquetas de formato más utilizadas en acción. Ahora, probemos esto para
entender cómo funcionan básicamente estas etiquetas:
Ejemplo
<p> Esto es <b> texto en negrita </b> . </p>
<p> Este es un <strong> texto muy importante </strong> . </p>
<p> Esto es <i> texto en cursiva </i> . </p>
<p> Este es <em> texto enfatizado </em> . </p>
<p> Este es <mark> texto resaltado </mark> . </p>
<p> Este es <code> código de computadora </code> . </p>
<p> Esto es <small> texto más pequeño </small> . </p>
<p> Esto es <sub> subíndice </sub> y <sup> superíndice </sup> texto. </p>
<p> Este es <del> texto eliminado </del> . </p>
<p> Esto es <ins> texto insertado </ins> . </p>
De forma predeterminada, la etiqueta <strong> normalmente se representa en el navegador como <b> ,
mientras que la etiqueta <em> se representa como <i> . Sin embargo, hay una diferencia en el significado de
estas etiquetas.
Diferencia entre las etiquetas <strong> y <b>
Tanto las etiquetas <strong> como <b> muestran el texto adjunto en negrita de forma predeterminada, pero la
etiqueta <strong> indica que su contenido tiene una gran importancia, mientras que la etiqueta <b> se usa
simplemente para llamar la atención del lector sin transmitir alguna importancia especial.
Ejemplo
<p><strong> ¡ADVERTENCIA! </strong> Proceda con precaución. </p>
<p> El concierto se llevará a cabo en <b> Hyde Park </b> en Londres. </p>
Diferencia entre la etiqueta <em> y <i>
Del mismo modo, las etiquetas <em> y <i> representan el texto adjunto en cursiva de forma predeterminada,
pero la etiqueta <em> indica que su contenido tiene un énfasis acentuado en comparación con el texto que lo
rodea, mientras que la etiqueta <i> se usa para marcar texto que se separa del texto normal por razones de
legibilidad, como un término técnico, una frase idiomática de otro idioma, un pensamiento, etc.
Ejemplo
<p> Los gatos son <em> lindos </em> animales </p>
<p> El <i> Royal Cruise </i> zarpó anoche. </p>
Nota: Use las etiquetas <em> y <strong> cuando el contenido de su página requiera que ciertas palabras o frases
deban tener un fuerte énfasis o importancia. Además, en HTML5 se han redefinido las etiquetas <b> y <i> , antes
no tenían significado semántico .

Formato de bloques
Puede formatear fácilmente los bloques de citas de otras fuentes con la etiqueta HTML <blockquote> .
Las comillas en bloque generalmente se muestran con márgenes izquierdo y derecho sangrados, junto con un
pequeño espacio adicional agregado arriba y abajo. Probemos un ejemplo para ver cómo funciona:
Ejemplo
< blockquote >
<p> Aprende del ayer, vive para el hoy, espera para el mañana. Lo importante es no dejar de cuestionar. </p>
<cite> — Albert Einstein </cite>
</ blockquote >
Sugerencia: la etiqueta de cita se usa para describir una referencia a un trabajo creativo. Debe incluir el título
de esa obra o el nombre del autor (persona u organización) o una URL de referencia.
Para citas cortas en línea, puede usar la etiqueta HTML <q> . La mayoría de los navegadores muestran comillas
en línea al rodear el texto entre comillas. Aquí hay un ejemplo:
Ejemplo
<p> Según la Organización Mundial de la Salud (OMS): <q> La salud es un estado de completo bienestar físico,
mental y social . </q></p>

Mostrando abreviaturas
Una abreviatura es una forma abreviada de una palabra, frase o nombre.
Puede usar la etiqueta <abbr> para indicar una abreviatura. El atributo de título se usa dentro de esta etiqueta
para proporcionar la expansión completa de la abreviatura, que los navegadores muestran como información
sobre herramientas cuando el cursor del mouse se desplaza sobre el elemento. Probemos un ejemplo:
Ejemplo
<p> El <abbr title =" World Wide Web Consortium "> W3C </abbr> es la principal organización internacional de
estándares para el <abbr title = " World Wide Web "> WWW o W3 </abbr> . Fue fundado por Tim Berners- Lee.
</p>

Marcado de direcciones de contacto


Las páginas web suelen incluir direcciones postales o de calles. HTML proporciona una etiqueta especial
<address> para representar la información de contacto (física y/o digital) de una persona, pueblo u organización.
Idealmente, esta etiqueta debería usarse para mostrar información de contacto relacionada con el documento
en sí, como el autor del artículo. La mayoría de los navegadores muestran un bloque de direcciones en cursiva.
Aquí hay un ejemplo:
Ejemplo
< address >
Fundación Mozilla <br>
331 E. Evelyn Avenue <br>
Mountain View, CA 94041, EE. UU.
</ address >
Listas HTML
Trabajar con listas HTML
Las listas HTML se utilizan para presentar una lista de información de forma bien formada y semántica. Hay tres
tipos diferentes de lista en HTML y cada uno tiene un propósito y significado específico.
• Lista desordenada : se utiliza para crear una lista de elementos relacionados, sin ningún orden en
particular.
• Lista ordenada : se utiliza para crear una lista de elementos relacionados, en un orden específico.
• Lista de descripción : se utiliza para crear una lista de términos y sus descripciones.
Nota: dentro de un elemento de la lista puede colocar texto, imágenes, enlaces, saltos de línea, etc. También
puede colocar una lista completa dentro de un elemento de la lista para crear la lista anidada.
En las siguientes secciones cubriremos los tres tipos de lista uno por uno:
Listas desordenadas de HTML
Una lista desordenada creada usando el elemento <ul> , y cada elemento de la lista comienza con el elemento
<li> .
Los elementos de la lista en listas desordenadas están marcados con viñetas. Aquí hay un ejemplo:
Ejemplo
<ul>
<li> Microprocesador </li>
<li>Tarjeta madre </li>
<li>Msemoria RAM </li>
</ul>

Listas ordenadas HTML


Una lista ordenada creada usando el elemento <ol> , y cada elemento de la lista comienza con el elemento <li>
. Las listas ordenadas se utilizan cuando el orden de los elementos de la lista es importante.
Los elementos de la lista en una lista ordenada están marcados con números. Aquí hay un ejemplo:
Ejemplo
<viejo>
<li> Abróchese el cinturón de seguridad </li>
<li> Arranca el motor del coche </li>
<li> Mira a tu alrededor y arranca </li>
</ol>
La numeración de elementos en una lista ordenada generalmente comienza con 1. Sin embargo, si desea
cambiar eso, puede usar el atributo de inicio , como se muestra en el siguiente ejemplo:
Ejemplo
<viejo empezar =" 10 ">
<li> Mezclar ingredientes </li>
<li> Hornear en el horno durante una hora </li>
<li> Deje reposar durante diez minutos </li>
</ol>
Sugerencia: también puede usar el atributo de tipo para cambiar el tipo de numeración, por ejemplo tipo="yo"
. Sin embargo, debe evitar este atributo, use la propiedad de tipo de estilo de lista CSS en su lugar.

Listas de descripción HTML


Una lista de descripción es una lista de elementos con una descripción o definición de cada elemento.
La lista de descripción se crea utilizando el elemento <dl> . El elemento <dl> se usa junto con el elemento <dt>
que especifica un término y el elemento <dd> que especifica la definición del término.
Los navegadores suelen mostrar las listas de definiciones colocando los términos y las definiciones en líneas
separadas, donde las definiciones de los términos tienen una ligera sangría. Aquí hay un ejemplo:
Ejemplo
<dl>
<dt> Pan </dt>
<dd> Un alimento horneado hecho de harina. </dd>
<dt> Café </dt>
<dd> Una bebida hecha de granos de café tostados. </dd>
</dl>

Imágenes HTML
Insertar imágenes en páginas web
Las imágenes mejoran la apariencia visual de las páginas web haciéndolas más interesantes y coloridas.
La etiqueta <img> se utiliza para insertar imágenes en los documentos HTML. Es un elemento vacío y solo
contiene atributos. La sintaxis de la etiqueta <img> se puede dar con:
<imagen src =" url " al t=" algún_texto ">
El siguiente ejemplo inserta tres imágenes en la página web:
Ejemplo
<img src =" cometas.jpg " alt =" volar cometas ">
< img src =" cielo.jpg " alt =" Cielo Nublado ">
< img src =" globos.jpg " alt =" Globos ">
Cada imagen debe tener al menos dos atributos: el atributo src y un atributo alt .
El atributo src le dice al navegador dónde encontrar la imagen. Su valor es la URL del archivo de imagen.
Mientras que el atributo alt proporciona un texto alternativo para la imagen, si no está disponible o no se puede
mostrar por algún motivo. Su valor debe ser un sustituto significativo de la imagen.
Nota: Al igual que <br> , el elemento <img> también es un elemento vacío y no tiene una etiqueta de cierre. Sin
embargo, en XHTML se cierra y termina en " /> ".
Sugerencia: el atributo alt requerido proporciona una descripción de texto alternativa para una imagen si un
usuario por alguna razón no puede verla debido a una conexión lenta, la imagen no está disponible en la URL
especificada o si el usuario usa un lector de pantalla o no gráfico. navegador.

Establecer el ancho y el alto de una imagen


Los atributos de ancho y alto se utilizan para especificar el ancho y el alto de una imagen.
Los valores de estos atributos se interpretan en píxeles de forma predeterminada.
Ejemplo
<img src =" cometas.jpg " alt =" cometas voladoras " width =" 300 " height =" 300 ">
< img src =" cielo.jpg " alt =" Cielo nublado " width =" 250 " height =" 150 ">
< img src =" globos.jpg " alt =" Globos " width =" 200 " height =" 200 ">
Nota: Es una buena práctica especificar los atributos de ancho y alto para una imagen, de modo que el navegador
pueda asignar tanto espacio para la imagen antes de que se descargue. De lo contrario, la carga de imágenes
puede causar distorsión o parpadeo en el diseño de su sitio web.

Trabajar con mapas de imágenes


Un mapa de imagen le permite definir puntos de acceso en una imagen que actúa como un hipervínculo .
La idea básica detrás de la creación de un mapa de imagen es proporcionar una manera fácil de vincular varias
partes de una imagen sin dividirla en archivos de imagen separados. Por ejemplo, un mapa del mundo puede
tener hipervínculos a cada país para obtener más información sobre ese país.
Probemos un ejemplo simple para entender cómo funciona realmente:
Ejemplo
<img src="objetos.png" usemap="#objetos" alt="Objetos">
<map name="objetos">
<area shape="circle" coords="137,231,71" href="reloj.html" alt="Reloj">
<area shape="poly" coords="363,146,273,302,452,300" href="letrero.html"
alt="Letrero">
<area shape="rect" coords="520,160,641,302" href="libro.html" alt="Libro">
</map>
El atributo name de la etiqueta <map> se usa para hacer referencia al mapa desde la etiqueta <img> usando su
atributo usemap . La etiqueta <area> se usa dentro del elemento <map> para definir las áreas en las que se
puede hacer clic en una imagen. Puede definir cualquier número de áreas en las que se puede hacer clic dentro
de una imagen.
Nota: El mapa de imagen no debe usarse para navegar por el sitio web. No son compatibles con los motores de
búsqueda . Un uso válido de un mapa de imagen es con un mapa geográfico.

También podría gustarte