Instituto Tecnologico Privado Urbano Mixto "Ferdinand Lassalle"

INSTITUTO TECNOLOGICO PRIVADO URBANO MIXTO
“FERDINAND LASSALLE”
NOMBRE: Joysi Lucero de León Argueta
GRADO: 6TO. Diversificado
CARRERA: Secretariado Bilingüe
PROFESOR: PEM. Helbert Donaín Dionicio González
CURSO: Computación
TAREA:
Investigación “EL LENGUAJE HTML
”
JORNADA: Vespertina
CICLO ESCOLAR:
2021
INTRODUCCION
El presente documento trata sobre el
lenguaje “HTML”.Este lenguaje es el
encargado de escribir las páginas WEB, y
que está compuesto por etiquetas, que
marcan el inicio y el fin de cada elemento.
Este lenguaje ha sido de mucha utilidad
para las persona, porque ha facilitado la
vida del ser humano.
EL LENGUAJE HTML
HTML es un lenguaje de marcado que se utiliza para el desarrollo de páginas de

Internet. Se trata de la siglas que corresponden a HyperText Markup Language, es
decir, Lenguaje de Marcas de Hipertexto”.
No obstante, este tipo de definiciones no nos dice mucho porque la definición es

técnica. Para algunas personas al leer esto, piensan que HTML incluye el diseño
gráfico de las páginas web, sin embargo, eso no es cierto ya que HTML sólo sirve para
indicar como va ordenado el contenido de una página web. Esto lo hace por medio de
las marcas de hipertexto las cuales son etiquetas conocidas en inglés como tags.
HTML significa lenguaje de marcado de hipertexto, y le permite al usuario crear y

estructurar secciones, párrafos, encabezados, enlaces y elementos de cita en bloque
(blockquotes) para páginas web y aplicaciones.
¿QUÉ ES UNA ETIQUETA HTML?

HTML es un markup language, lo que significa que está escrito con códigos que puede
leer una persona sin que sea necesario compilarlo primero. En otras palabras, el texto
en una página web está «marcado» con estos códigos para dar instrucciones al
navegador web sobre cómo mostrar el texto. Estas etiquetas de marcado son las
propias etiquetas HTML.
Cuando escribes código en HTML, estás escribiendo etiquetas HTML. Todas las
etiquetas HTML están hechas con un número de partes específicas, incluyendo:
El carácter “menor que” <

Una palabra o carácter que determina qué etiqueta se está escribiendo
Cualquier número de atributos HTML que se quiera usar, escritos de la forma
nombre=”valor”
El carácter “mayor que” >
VIDEO
Google Web Designer: edición HTML
Etiquetas HTML básicas
Hay una serie de etiquetas que son las más usadas para crear cualquier documento
HTML, a continuación las explicamos:
<body> para el contenido
<head> para información sobre el documento
<div> división dentro del contenido
<a> para enlaces
<strong> para poner el texto en negrita
<br> para saltos de línea
<H1>…<H6> para títulos dentro del contenido
<img> para añadir imágenes al documento
<ol> para listas ordenadas, <ul> para listas desordenadas, <li> para elementos dentro
de la lista
<p> para parágrafos
<span> para estilos de una parte del texto
ETIQUETA DESCRIPCIÓN
 Etiqueta para escribir comentarios en HTML.
<!DOCTYPE> Declaración del tipo de documento.
<a > Etiqueta para incluir enlaces (links) hacia otras páginas o documentos.
<abbr> Indicar una abreviación o acrónimo.
<acronym> Indicar un acrónimo.
<address> Etiqueta para incluir información de contacto.
<applet> Insertar un applet en la página html.
<a re a > Define un area de una imágen en donde se puede hacer clic.
<article> Etiqueta semántica de HTML5 que indica la hubicación de un artículo.
<aside> Etiqueta semántica de HTML5 para indicar una barra lateral
<audio> Insertar audio.

<b> Convierte el texto a negritas.
<base> Definir una URL raíz para los enlaces relativos de nuestra página.
<basefont> Especifica tamaño, color y fuente por defecto de la página.
<p> Para escribir un párrafo.
<param> Define paramentros de un objeto de la etiqueta <object>.
<pre> Etiqueta para escribir texto pre-formateado.
<progress> Etiqueta para insertar una barra prograsiva.
<q> Encierra un segmento de texto entre comillas.
<s> Tacha texto con una linea horizontal.
<samp> Indica que el texto es un ejemplo de salida de un programa de

computadora.
<script> Etiqueta para insertar un script.
<section> Define una seccion de la página.
<select> Define una lista desplegable en un formulario.
<small> Etiqueta que cambia el texto a un tamaño mas pequeño.
<source> Indica la dirección de un recurso de audio o video.
<span> Define una sección de un texto.
<strike> Indica invalidez a un fragmento de texto tachandolo con una línea

horizontal.
<strong> Marca texto importante del documento en negrita.
<style> Etiqueta para agregar un estilo CSS dentro del documento HTML.
<sub> Indicar una subíndice.
<summary> Define un encabezado visible dentro de una etiqueta <details>

<sup> Indicar una superíndice.
<table> Inserta una tabla en la página.
<tbody> Define el cuerpo de una tabla.
<td> Agregar una columna en una tabla
<ins> Indica que el texto a sido insertado en lugar de otro.
<kbd> Indica texto introducido por medio del teclado.
<keygen> Encriptar datos de un formulario.
<label> Define una etiqueta relacionada a un elemento <input> de un formulario.
<legend> Escribe un nombre o leyenda en un cuadro generado por la etiqueta

<fieldset>.
<li> Define un elemento de una lista.
<link> Realiza un enlace entre la página y un elemento o recurso externo.
<main> Indica el contenido principal de una página.
<map> Permite dividir una imagen para hacer clic en distintas áreas de la
misma.
<mark> Remarca un texto de un color.
<menu> Permite crear un menú personalizado al hacer clic derecho con el

mouse.
<menuitem> Define un elemento de un menu creado con la etiqueta <menu>.
<meta> Define los metadatos que van dentro de la etiqueta <heaad>
<meter> Indica una medida dentro de un rango representada por una barra
progresiva.
<nav> Define una grupo de enlaces de navegación.
<noframes> Muestra un contenido alterno en caso de que los frames no sean

soportados.
<noscript> Muestra un contenido altero en caso de que un script no sea soportado.
<object> Insertar objetos embebidos como audio, video o aplets.

<ol> Define una lista ordenada numericamente o alfabeticamente.
<optgroup> Agrupa opciones relacionadas en una lista desplegable.
<option> Define una opcion en una lista desplegable.
<output> Indica el resultado de salida de una operación.
<dl> Define una lista de definiciones.
<dt> Define un término en una lista de definiciones.
<em> Enfatizar parte del texto.
<embed> Crea un contenedor para una aplicación externa.
<fieldset> Agrupa campos de un formulario relacionados entre si.
<figcaption> Escribir una leyenda o texto asociado a una figura o imagen.
<figure> Define un contenedor de figuras como imágenes, fotos, diagramas, etc.
<font> Da formato al texto (fuente, tamaño, color, etc.).
<footer> Define el pie de página.
<form> Para definir un formulario.
<frame> Define una ventana o frame de una página externa dentro de un

frameset.
<frameset> Define un frameset dentro del cual puede haber varios frames.
<h1> ... <h6> Encabezados de HTML
<head> Etiqueta que define la cabecera de un documento HTML.
<header> Para indicar el encabezado de una página.
Indica un cambio en la temática de la página y queda señalado con

<hr> una línea horizontal.
<html> Etiqueta que indica el inicio y final de un documento HTML.
<i> Muestra el texto en itálica.
<iframe> Define una ventana o frame interno.
<img> Etiqueta para insertar imágenes.
<input> Añade un cuadro de entrada de texto a un formulario.
<bdi> Aisla parte de un texto que podría estar en otro idioma o formato.
<bdo> Cambia la dirección del texto.
<big> Aumenta el tamaño del texto.
<blockquote> Citar contenido de otro sitio web dentro de un bloque.
<body> Etiqueta que define el cuerpo de un documento HTML.
<br> Indica una salto de línea.
<button> Crear un botón en donde se puede hacer clic.
<canvas> Etiqueta para definir un contenedor o lienzo para crear gráficos.
<caption> Define el título de una tabla.
<center> Centra el contenido.
<cite> Cita o referencia de algún libro, película, artículo o algún trabajo de otro
autor.
<code> Indica que el texto es código fuente de algún lenguaje informático.
<col> Especifíca propiedades de atributos de las columnas de una tabla.
<colgroup> Define un grupo de columnas de una tabla para darles formato.
<datalist> Crea una lista de opciónes para una caja de texto input.
<dd> Define un término en una lista de definiciones.

<del> Indica invalidez a un fragmento de texto tachandolo con una línea
horizontal.
<details> Especifica detalles que el usuario puede desplegar u ocultar.
<dfn> Marca un término o definición.
<dialog> Mostrar una caja de diálogo.
<dir> Define una lista de directorios.
<div> Crea un bloque.
<textarea> Define un área de texto para ingresar texto desde un formulario.
<tfoot> Indica el contenido que forma el pie de una tabla.
<th> Agrega una "columa encabezado" a una tabla.
<thead> Define el encabezado de una tabla.
<time> Indica una hora o fecha.
<title> Indica el título de la página.
<tr> Inserta una fila o renglón en una tabla.
<track> Especifica tracks de texto para elementos multimedia de audio o video.
<tt> Texto teletipo.
<u> Definir texto subrayado.
<ul> Define una lista
<var> Indica que el texto es una variable.
<video> Insertar un video.
<wbr> Indica un posible cambio de linea en el texto segun el tamaño del

contenedor.
ELEMENTOS DEL LENGUAJE HTML
 Elementos: Desarrollan la estructura de las páginas webs. Los elementos h1, h2, h3,
h4, h5 y h6 se utilizan para crear encabezados. Por orden jerárquico h1 representa el
primer nivel y, normalmente, el texto más grande. h2 es el segundo nivel con un texto
algo más pequeño, así hasta llegar al h6 que es el texto más pequeño de todos.
 Atributos: Los atributos de las etiquetas HTML definen detalles de comportamiento o
presentación de la etiqueta donde van colocados. Se escriben dentro de la propia
etiqueta con su nombre de atributo y el valor del atributo entre comillas.
ELEMENTOS EN LÍNEA (DEFINIDOS POR HTML)
ELEMENTO DESCRIPCIÓN
dfn Marca las definiciones de ciertos términos y proporciona el

significado de éstos
em emphasis – énfasis
font Indica el tamaño, color, o fuente del texto que contiene
i Muestra el texto marcado con un estilo en cursiva o itálica
img Imagen
input Posibilita y define la introducción de datos en el formulario
kbd Indicar al usuario el texto que debe introducir
label Asocia un rótulo o etiqueta a un campo de un formulario
q short quotations - cita corta
s strike-through - tachado
samp Sirve identificar una muestra de los caracteres que forman la

salida o el resultado de algún proceso
select Crea un contenedor mediante el cual el usuario puede

seleccionar de una lista de opciones
small Aplica al texto marcado un tamaño de fuente más pequeño

span Es un contenedor genérico en línea. Sirve para para aplicar estilo
al texto o agrupar elementos en línea
strike Muestra el texto tachado con una linea horizontal
strong Marca con especial énfasis las partes más importantes de un texto
sub Crea un subíndice posicionando el texto marcado por debajo de la
sup Crea un superíndice posicionando el texto marcado por encima de
textarea Crea un control de entrada de texto multilínea

a Define un anchor (anclaje o hipervínculo)
abbr Marca las abreviaturas del texto y proporciona el significado de esas

abreviaturas
acronym Marca las siglas o acrónimos del texto y proporciona el significado de
esas siglas
b Indica que el texto debe ser representado e bold (o negrita)
basefont Permite cambiar algunas propiedades del texto
bdo Anulación del algoritmo bidireccional (en referencia a la dirección de

la escritura)
big Muestra el texto marcado con un tamaño de fuente más grande
br line break - ruptura (o salto) de línea
cite Se emplea para marcar una cita o una referencia a otras fuentes
code Delimita el texto considerado un fragmento de código fuente
tt Representa como texto de teletipo o ancho fijo
u Muestra el texto subrayado
var Marca variables de programas y similares

ELEMENTOS EN BLOQUE (DEFINIDOS POR HTML)
address Contiene la información de contacto con los autores del documento
blockquote Indica que el texto que encierra es una cita textual de otro texto
externos
center Crea una caja en bloque con el contenido centrado
dir Crea listas multicolumna de directorios
div Es un elemento en bloque genérico y sirve para crear secciones

o agrupar contenidos
dl Crea una lista de definiciones
fieldset Permite organizar en grupos los campos de un formulario
form Actúa como contenedor de controles. Representa un formulario
h1, h2, Crea un encabezado o título de primer, segundo, tercer, cuarto,

h3, h4, quinto o sexto nivel para una sección del documento respectivamente
h5, h6
hr Crea una linea de separación horizontal
isindex Crea un control de entrada de texto de una línea
menu Crea un menú
noframes (sin marcos) - aporta contenidos alternativos a los marcos
nos-cript Contenedor de contenido alternativo para la representación no

basada en scripts
ol Crea una lista ordenada
p Párrafo
pre Permite que el texto conserve el formato y sea mostrado tal cual
table Tabla
ul Crea una lista no ordenada
ATRIBUTOS DE FOCO
Se le denomina foco o focus, cuando un control o elemento del documento ha

sido seleccionado. Cuando ese elemento deja de estar seleccionado, "pierde el
foco" y es el nuevo elemento seleccionado el que se dice que tiene "el foco".
Los atributos de HTML son palabras especiales utilizadas dentro de la etiqueta de

apertura, para controlar el comportamiento del elemento. Los atributos de HTML son un
modificador de un tipo de elemento de HTML.
Atributos comunes [editar]

La mayoría de elementos pueden tomar cualquiera de varios de los atributos comunes:
 El atributo id (identidad) proporciona un identificador único en el ámbito de todo el

documento para un elemento.789 Este puede ser utilizado como selector CSS para
proporcionar propiedades presentationales, por los navegadores para centrar la
atención en el elemento concreto, o por scripts (guiones) para alterar los contenidos
o la presentación de un elemento. Anexado a la URL de la página, la URL
directamente apunta el elemento concreto dentro del documento, típicamente una
sub-sección de la página. Por ejemplo, los #ID "Atributtes"
en http://en.wikipedia.org/wiki/html#Atributtes
 El atributo class proporciona una manera de clasificar elementos similares. 1011 Esto
puede ser utilizado para propósitos semánticos, o para propósitos de presentación.
Semantically, por ejemplo, las clases se utilizan en microformatos.
Presentacionalmente, por ejemplo, un documento HTML podría utilizar la
designación class="notation" , para indicar que todos los elementos con esta clase
de valor están subordinados al texto principal del documento. Tales elementos
podrían ser reunidos juntos y presentados como notas al pie en una página, en vez
de aparecer en el sitio donde se encuentran en la fuente de HTML. Otro uso sería
como selector CSS.
 Un autor puede utilizar propiedades no presentacionales de código atribucional
de style para un elemento particular.El atributo de estilo se puede utilizar en
cualquier elemento de HTML ( se validará en cualquier elemento HTML; aun así, no
es necesariamente útil). Se consiera mejor práctica usar los atributos idd o class de
un elemento para seleccionar el elemento con una stylesheet (hoja de estilo),
aunque a veces esto puede ser demasiado pesado para una aplicación de
propiedades de estilo simple y específico o ad hoc.
 El atributo de title (título) se suele usar para unir explicación subtextual a un
elemento. En la mayoría de los navegadores, este atributo se muestra como lo que
a menudo se llama un tooltip o globo.
ATRIBUTOS DESCRIPCIÓN
accesskey="letra" Establece una tecla de acceso rápido a un elemento HTML
tabindex="numero Establece la posición del elemento en el orden de tabulación de la

" página
onfocus, onblur Controlan los eventos JavaScript que se ejecutan cuando el

elemento obtiene o pierde el foco
TABLAS HTML
Una tabla no es otra cosa más que un medio de organizar datos en filas
y columnas. Este concepto ha estado presente en nuestra sociedad por
un largo período de tiempo y ha sido adoptado por HTML en sus etapas
iniciales, como una forma de transmitir información que, de otro modo,
no sería comprendida tan fácilmente.
En documentos HTML una tabla puede ser considerada,

resumidamente, como un grupo de filas donde cada una contiene a un
grupo de celdas. Esto es conceptualmente distinto a un grupo de
columnas que contiene a un grupo de filas, y esta diferencia tendrá un
impacto en la composición y comportamiento de la tabla.
Como muchas otras estructuras de HTML, las tablas son construidas

utilizando elementos. En particular, una tabla básica puede ser
declarada usando tres elementos, a saber, table (el contenedor
principal), tr (representando a las filas contenedoras de las
celdas) y td (representando a las celdas).
Dejémoslo más claro con un ejemplo:
1. <t:.able class="default">
2. <t:.r>
3. <td>Celda l</t:.d>
4. <td>Celda 2</t:.d>
5. s. <t:.d>Celda 3</t:.d>
6. </tr>
7. <tr>
8. <td>Celda 4</td>
9. <td>Celda 5</td>
10. lC. <td>Celda 6</td>
11. </tr>
12. </table>
Celda 1 Celda2 Celda 3
Celda4 Celda 5 Celda6
CONCLUSION
El lenguaje de HTML abrió una puerta al
mundo permitiéndoles a las personas
expresar sus ideas por medio de páginas y
mostrárselas a todas las personas de todos
los países. Infinitas son las posibilidades
que te brindan las páginas WEB ya que no
solo te dan la posibilidad de pasar el tiempo
navegando, sino que también hasta se
puede comprar.

Instituto Tecnologico Privado Urbano Mixto "Ferdinand Lassalle"

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Instituto Tecnologico Privado Urbano Mixto "Ferdinand Lassalle"

Cargado por

Copyright:

Formatos disponibles

INSTITUTO TECNOLOGICO PRIVADO URBANO MIXTO

NOMBRE: Joysi Lucero de León Argueta

GRADO: 6TO. Diversificado

CARRERA: Secretariado Bilingüe

PROFESOR: PEM. Helbert Donaín Dionicio González

HTML es un lenguaje de marcado que se utiliza para el desarrollo de páginas de

No obstante, este tipo de definiciones no nos dice mucho porque la definición es

HTML significa lenguaje de marcado de hipertexto, y le permite al usuario crear y

¿QUÉ ES UNA ETIQUETA HTML?

El carácter “menor que” <

Etiqueta para escribir comentarios en HTML.

<!DOCTYPE> Declaración del tipo de documento.

<abbr> Indicar una abreviación o acrónimo.

<acronym> Indicar un acrónimo.

<address> Etiqueta para incluir información de contacto.

<applet> Insertar un applet en la página html.

<article> Etiqueta semántica de HTML5 que indica la hubicación de un artículo.

<aside> Etiqueta semántica de HTML5 para indicar una barra lateral

<audio> Insertar audio.

<basefont> Especifica tamaño, color y fuente por defecto de la página.

<p> Para escribir un párrafo.

<param> Define paramentros de un objeto de la etiqueta <object>.

<pre> Etiqueta para escribir texto pre-formateado.

<progress> Etiqueta para insertar una barra prograsiva.

<q> Encierra un segmento de texto entre comillas.

<s> Tacha texto con una linea horizontal.

<samp> Indica que el texto es un ejemplo de salida de un programa de

<section> Define una seccion de la página.

<select> Define una lista desplegable en un formulario.

<small> Etiqueta que cambia el texto a un tamaño mas pequeño.

<source> Indica la dirección de un recurso de audio o video.

<span> Define una sección de un texto.

<strike> Indica invalidez a un fragmento de texto tachandolo con una línea

<sub> Indicar una subíndice.

<summary> Define un encabezado visible dentro de una etiqueta <details>

<table> Inserta una tabla en la página.

<tbody> Define el cuerpo de una tabla.

<td> Agregar una columna en una tabla

<ins> Indica que el texto a sido insertado en lugar de otro.

<kbd> Indica texto introducido por medio del teclado.

<keygen> Encriptar datos de un formulario.

<label> Define una etiqueta relacionada a un elemento <input> de un formulario.

<legend> Escribe un nombre o leyenda en un cuadro generado por la etiqueta

<link> Realiza un enlace entre la página y un elemento o recurso externo.

<main> Indica el contenido principal de una página.

<menu> Permite crear un menú personalizado al hacer clic derecho con el

<meta> Define los metadatos que van dentro de la etiqueta <heaad>

<noframes> Muestra un contenido alterno en caso de que los frames no sean

<object> Insertar objetos embebidos como audio, video o aplets.

<optgroup> Agrupa opciones relacionadas en una lista desplegable.

<option> Define una opcion en una lista desplegable.

<output> Indica el resultado de salida de una operación.

<dl> Define una lista de definiciones.

<dt> Define un término en una lista de definiciones.

<em> Enfatizar parte del texto.

<embed> Crea un contenedor para una aplicación externa.

<fieldset> Agrupa campos de un formulario relacionados entre si.

<figcaption> Escribir una leyenda o texto asociado a una figura o imagen.

<figure> Define un contenedor de figuras como imágenes, fotos, diagramas, etc.

<font> Da formato al texto (fuente, tamaño, color, etc.).

<footer> Define el pie de página.

<form> Para definir un formulario.