Scribd
Cargar
23 vistas

HTML

El documento describe los elementos y etiquetas más importantes del lenguaje HTML5. Explica que HTML5 es un lenguaje de marcado que combina texto con etiquetas para estructurar y presentar contenido. Luego detalla los principales elementos como las etiquetas para cabeceras, secciones, formularios, tablas, multimedia e incrustaciones. Finalmente menciona algunos editores de código HTML populares.

Cargado por

lisethpenalba
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
23 vistas

HTML

El documento describe los elementos y etiquetas más importantes del lenguaje HTML5. Explica que HTML5 es un lenguaje de marcado que combina texto con etiquetas para estructurar y presentar contenido. Luego detalla los principales elementos como las etiquetas para cabeceras, secciones, formularios, tablas, multimedia e incrustaciones. Finalmente menciona algunos editores de código HTML populares.

Cargado por

lisethpenalba
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/ 16

LENGUA JE DE

MARCAS HTML
D O C E N T E : G E R A R D O AT E N C I O
LENGUAJE DE MARCAS HTML

El lenguaje de marcas o lenguaje de marcado es un tipo de lenguaje que no


permite la implementación de algoritmos y no dispone de funciones aritméticas
ni de variables. En este lenguaje se combina el texto con etiquetas que contienen
información sobre la estructura o presentación del texto. Algunos ejemplos de
este lenguaje son HTML, XML o RDF.
ELEMENTOS SEMÁNTICOS HTML5
Una de las principales ventajas de HTML5 es
la inclusión de elementos semánticos, o
marcados semánticos, que nos ayudan a
definir las distintas divisiones de una página
web.

En las versiones anteriores a HTML5 se solía


utilizar la etiqueta <div> para realizar las
divisiones de una página web, pero
actualmente es recomendado utilizar los
elementos semánticos ya que describen
claramente su propósito.
E S T RU C T U R A
BÁSICA DE UN
D O C U M E N TO
HTML5
ELEMENTOS RAÍZ

Elemento Descripción
<!DOCTYPE html> Indica que el documento está bajo el estándar de HTML5.
Representa la raíz de un documento HTML. Es una buena práctica indicar el
<html>
idioma mediante el atributo lang.
METADATOS

Elemento Descripción
En su interior se incluye la colección de metadatos sobre el documento y
<head>
los enlaces a scripts y hojas de estilo.

Representa el título del documento. Se muestra en la barra superior del


<title>
navegador o en las pestañas de página.
Utilizada para enlazar documentos externos, por ejemplo CSS. Se debe
<link>
incluir dentro del <head>.
Define los metadatos que no pueden ser definidos usando otro elemento
<meta>
HTML.
<style> Usada para escribir CSS interno.
SCRIPTING

Elemento Descripción
<script> Define un script interno o un enlace hacia un script externo de JavaScript.
Representa un contenido alternativo a mostrar cuando el navegador no soporta
<noscript>
scripting.
SECCIONES
Elemento Descripción
Representa el contenido principal de un documento HTML. Sólo puede
<body>
existir un elemento <body> en el documento.
<section> Define secciones de una web.
<nav> Especifica una sección que contiene un menú de navegación.
<article> Determina secciones de contenido.
<aside> Define la barra lateral de una página web.
Describe el tema de la sección. Disponemos de seis niveles: de h1 a h6,
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> siendo <h1> la cabecera de mayor importancia. Sólo puede existir una
etiqueta <h1> en el documento.

<header> Determina la cabecera de una web o de un elemento.


Define el pie de página. También se puede utilizar para definir el pie de otros
<footer>
elementos.
<address> Especifica una sección que contiene información de contacto.

Determina el contenido principal del documento. Solo puede existir un


<main>
elemento <main> en el documento.
ETIQUETAS DE CONTENIDO
Elemento Descripción
<p> Define una parte que debe mostrarse como un párrafo.
<hr> Representa un cambio temático entre párrafos.
<blockquote> Representa un contenido citado desde otra fuente.
<ol> Especifica una lista ordenada de artículos.
<ul> Determina una lista de artículos sin orden.
<li> Define un elemento de una lista.
Especifica una lista de definiciones, es decir, una lista de términos y sus
<dl>
definiciones asociadas.
<dt> Representa un término definido por el siguiente <dd>.

<figure> Establece una figura ilustrada como parte del documento.


<figcaption> Representa la leyenda de una figura.
<div> Representa un contenedor genérico sin ningún significado especial.
ETIQUETAS DE TEXTO
Elemento Descripción
<a> Representa un hiperenlace.
<em> Especifica un texto enfatizado.
<strong> Establece un texto importante.
Define un comentario aparte, es decir, textos de políticas de responsabilidad o una
<small> nota de derechos de autoría, que no son esenciales para la comprensión del
documento.
<cite> Indica el título de una obra.
<q> Representa una cita textual entre comillas.
Envuelve un texto que al pasar el puntero por encima despliega un tooltip. El
<abbr>
contenido del tooltip se detalla mediante el atributo title.
<code> Establece un código de programación.
Representa a una variable, es decir, una expresión matemática o una variable de un
<var>
programa o similar.
<sub><sup> Establece un subíndice y un superíndice respectivamente.
<i> Muestra el texto marcado con un estilo en cursiva o itálica.
<b> Representa el texto marcado con un estilo en negrita.
<u> Muestra el texto subrayado.
Especifica texto en línea. Sirve para aplicar estilo al texto o agrupar elementos en
<span>
línea.
<br> Inserta un salto de línea.
ETIQUETAS PARA LA CREACIÓN DE
FORMULARIOS
Elemento Descripción
<form> Define un formulario.
<fieldset> Permite organizar en grupos los campos de un formulario.
<legend> Representa el título de un <fieldset>.
<label> Representa el título de un elemento de control de un formulario.
<input> Se usa para crear controles interactivos que reciben datos del usuario.
<button> Representa un botón.
<option> Representa una opción en un elemento <select> o <datalist>.
Representa un elemento de control que permite la selección entre un
<select>
conjunto de opciones <option>.
<optgroup> Representa un conjunto de opciones, agrupadas lógicamente.
Representa un elemento de control que permite la selección entre un
<datalist>
conjunto de opciones <option>.
<textarea> Representa un elemento de control de edición de texto multilínea.
<output> Representa el resultado de un cálculo.
ETIQUETAS PARA LA CREACIÓN DE
TABLAS DE CONTENIDO
Elemento Descripción
<table> Representa datos con más de una dimensión.
<caption> Representa el título de una tabla.
<tr> Representa una fila de celdas en una tabla.
<td> Representa una celda de datos en una tabla.
<th> Representa una celda encabezado en una tabla.
Representa un conjunto de una o más columnas de una
<colgroup>
tabla.
<col> Representa una columna de una tabla.
ATRIBUTOS BORDER, ALIGN Y
BGCOLOR
Verás que en muchos códigos se le añade un borde a la tabla usando el atributo border. Sin
embargo, este atributo ya no es aceptado en HTML5. A pesar de ello, los navegadores reconocen
este atributo por estar definido en versiones antiguas de HTML.
<table border="2">

Para modificar la posición de la tabla también se utilizaba el atributo align.


<table align="center">

También podemos asignar fondos a las celdas y filas de una tabla con el atributo bgcolor.
<td bgcolor="#77DDEE">
AGRUPACIÓN DE CELDAS

Para agrupar celdas en una sola, también llamado «combinación de celdas»,


utilizaremos los atributos “rowspan” (para agrupar verticalmente) y “colspan”
(para agrupar horizontalmente).
ETIQUETAS PARA INCRUSTAR
Elemento Descripción
<img> Representa una imagen.
Representa un contexto anidado de navegación, es decir, un documento
<iframe>
HTML embebido.
Representa un punto de integración para una aplicación o contenido
<embed>
interactivo externo que por lo general no es HTML.
Representa un recurso externo, que será tratado como una imagen, un
<object> sub-documento HTML o un recurso externo a ser procesado por un
plugin.
Define parámetros para el uso por los plugins invocados por los
<param>
elementos <object>.
<video> Representa un vídeo.
<audio> Representa un sonido.
Permite a autores especificar recursos multimedia alternativos para los
<source>
elementos multimedia como <video> o <audio>.
Permite a autores especificar una pista de texto temporizado para
<track>
elementos multimedia como <video> o <audio>.
<svg> Define una imagen vectorial embebida.
<math> Define una fórmula matemática.
EDITORES HTML

A continuación se muestran los editores de texto más utilizados


actualmente
• Atom.
• Notepad++.
• SublimeText.
• Visual Studio Code.

También podría gustarte