Scribd Logo

Idioma

Cargar

¡Te damos la bienvenida a Scribd!

Etiquetas HTML

Cargado por

Portadora rap
23 vistas25 páginas

Título original

Etiquetas html.docx

Derechos de autor

© © All Rights Reserved

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Denunciar este documento

Copyright:

© All Rights Reserved
Marcar por contenido inapropiado
23 vistas25 páginas

Etiquetas HTML

Cargado por

Portadora rap

Copyright:

© All Rights Reserved
Marcar por contenido inapropiado
de 25

  

UNIVERSIDAD DE EDUCACION Y DESARROLLO CULTURAL DE


MONTERREY  

  
Actividad 2 Parcial

  

Nombre: Esmeralda Elizabeth Oliva Muñiz

Matrícula:22546

Asignatura: Comercio Electrónico

Nombre de la actividad: Realizar una investigación sobre mínimo 30


etiquetas HTML.

Fecha: /11/2020

Docente: Francisco Emmanuel Arteaga Ayala

Desarrollo de la actividad

pág. 1
Etiquetas html
Cada parte del documento está diferenciada, declarada y determinada por
etiquetas específicas.
1.- <!DOCTYPE>
Para que sirve: Para indicar el tipo de documento de documento que estamos
creando, se pone al principio del documento. Debe ser la primera línea del archivo,
sin espacios o líneas que la precedan. De esta forma, el modo estándar del
navegador es activado y las incorporaciones de HTML son interpretadas siempre
que sea posible, o ignoradas en caso contrario.
Ejemplo: Versión de html empleada.

Para conocer nuestro código en las paginas solo se pone ver código fuente de la
página.
2.- <html>
Para que sirve: Para comenzar a construí la estructura HTML.
Estas etiquetas HTML son palabras clave y atributos rodeados de los signos
mayor y menor (por ejemplo, <html lang="es">). En este caso, html es la palabra
clave y lang es el atributo con el valor es. La mayoría de las etiquetas HTML se
utilizan en pares, una etiqueta de apertura y una de cierre, y el contenido se
declara entre ellas.
Inicio <html> ... Fin </html>.
Ejemplo:

pág. 2
En nuestro ejemplo, <html lang="es"> indica el comienzo del código HTML y
</html> indica el final.
3.- <head>
Para que sirve: Es la primera sección del código (la cabecera).
Dentro de las etiquetas <head> se puede definir el título de nuestra página web,
declarar el set de caracteres correspondiente, proveer información general acerca
del documento e incorpor los archivos externos con estilos, códigos Javascript o
incluso imágenes necesarias para generar la página en la pantalla.

 La mayoría de la información insertada entre las etiquetas <head> no es


visible para los usuarios.
<head>….</head>
Ejemplo:

pág. 3
4.- <body>
Para que sirve: Es parte principal de la organización de un documento HTML . El
cuerpo representa la parte visible de todo documento y es especificado entre
etiquetas.
<body>……</body>
Ejemplo:

pág. 4
5.- <meta>
Para que sirve: Define el juego de caracteres a utilizar para mostrar el
documento. Ésta es una etiqueta <meta> que especifica cómo el texto será
presentado en pantalla.
Hay varios tipos de etiqueta <meta> que pueden ser incluidas para declarar
información general sobre el documento, pero esta información no es mostrada en
la ventana del navegador, es solo importante para motores de búsqueda y
dispositivos que necesitan hacer una vista previa del documento u obtener un
sumario de la información que contiene. <meta atributos>
Ejemplo:

pág. 5
6.- <title>
Para que sirve: Para especifica el título del documento. Normalmente este texto
es mostrado en la barra superior de la ventana del navegador. <title>… </title>
Ejemplo:

pág. 6
7.- <link>
Para que sirve: Este elemento es usado para incorporar estilos, códigos
Javascript, imágenes o iconos desde archivos externos. Uno de los usos más
comunes para <link> es la incorporación de archivos con estilos CSS. <link
atributos como href=… rel=…>
Ejemplo:

pág. 7
8.- <header> </header>
Para que sirve: El elemento <header> no debe ser confundido con <head> usado
antes para construir la cabecera del documento. Del mismo modo que <head>, la
intención de <header> es proveer información introductoria, pero difiere con
respecto a <head> en su alcance. Mientras que el elemento <head> tiene el
propósito de proveer información acerca de todo el documento, <header> es
usado solo para el cuerpo o secciones específicas dentro del cuerpo.

 Tiene el propósito de contener la cabecera de una sección, pero también


puede ser utilizado para agrupar índices, formularios de búsqueda, logos,
etc...

pág. 8
Ejemplo:

9.- <nav> </nav>


Para que sirve: Este elemento indica una sección de enlaces con propósitos de
navegación, como menús o índices. No todos los enlaces dentro de una página
web tienen que estar dentro de un elemento <nav>, solo aquellos que forman
partes de bloques de navegación.
Ejemplo:

En este ejemplo, entre las etiquetas <nav> hay dos elementos que son utilizados
para crear una lista. El propósito del elemento <ul> es definir la lista. Anidado
entre las etiquetas <ul> encontramos varias etiquetas <li> con diferentes textos
representando las opciones del menú. Las etiquetas <li>, son usadas para definir
cada ítem de la lista.
10.- <section>
Para que sirve: Este elemento representa una sección general del documento. Es
usualmente utilizado para construir varios bloques de contenido (por ejemplo,

pág. 9
columnas) con el propósito de ordenar el contenido que comparte una
característica específica, como capítulos o páginas de un libro, grupo de noticias,
artículos, etc...
Ejemplo:

11.- <aside>
Para que sirve: Este elemento representa contenido que está relacionado con el
contenido principal pero no es parte del mismo. Pueden ser citas, información en
barras laterales, publicidad, etc...
Ejemplo:

pág. 10
12.- <footer>
Para que sirve: Este elemento representa información adicional sobre su
elemento padre. Por ejemplo, un elemento <footer> insertado al final del cuerpo
proveerá información adicional sobre el cuerpo del documento, como el pie normal
de una página web.

 Generalmente, el elemento <footer> representará el final del cuerpo de


nuestro documento. <footer>…</footer>
Ejemplo:

13.- <article>
Para que sirve: Este elemento representa una porción independiente de
información relevante. Este elemento fue creado con la intención de contener
unidades independientes de contenido, por lo que puede incluir mensajes de foros,
artículos de una revista digital, entradas de blog, comentarios de usuarios, etc...
Lo que hace es agrupar porciones de información que están relacionadas entre sí
independientemente de su naturaleza. <article>…</article>
Ejemplo:

pág. 11
14.- <hgroup> </hgroup>
Para que sirve: Este elemento es usado para agrupar elementos H cuando la
cabecera tiene múltiples niveles (como una cabecera con título y subtítulo).
Dentro de cada elemento <header>, en la parte superior del cuerpo o al comienzo
de cada <article>, incorporamos elementos <h1> para declarar un título.
Básicamente, las etiquetas <h1> son todo lo que necesitamos para crear una línea
de cabecera para cada parte del documento, pero es normal que necesitemos
también agregar subtítulos o más información que especifique de qué se trata la
página web o una sección en particular.
Para construir este tipo, podemos aprovechar el resto de las etiquetas H, como
<h2>, <h3>, <h4>, <h5> y <h6>, pero siempre considerando que, por propósitos
de procesamiento interno, y para evitar generar múltiples secciones durante la
interpretación del documento por parte del navegador, estas etiquetas deben ser
agrupadas juntas.
Ejemplo:

pág. 12
15.- <figure> y <figcaption>
Para que sirve: Este elemento representa una porción independiente de
contenido (por ejemplo, imágenes, diagramas o videos) que son referenciadas
desde el contenido principal. Esta es información que puede ser removida sin
afectar el fluido del resto del contenido.
<figcaption> Este elemento es utilizado para mostrar una leyenda o pequeño texto
relacionado con el contenido de un elemento <figure>, como la descripción de una
imagen.
Ejemplo:

pág. 13
En en el primer mensaje, luego del texto insertamos una imagen (<img
src="http://minkbooks.com/content/myimage.jpg">). Esta es una práctica común, a
menudo el texto es enriquecido con imágenes o videos. Las etiquetas <figure>
</figure> nos permiten envolver estos complementos visuales y diferenciarlos así
de la información más relevante.
16.- <mark>
Para que sirve: Este elemento resalta un texto que tiene relevancia en una
situación en particular o que ha sido mostrado en respuesta de la actividad del
usuario. <mark>…</mark>
Ejemplo:

17.- <small>
Para que sirve: Este elemento representa contenido al margen, como letra
pequeña. Puede ser usado para descargos, restricciones legales, declaración de
derechos, etc.... <small>…</small>

pág. 14
Ejemplo:

18.- <cite>
Para que sirve: Este elemento es usado para mostrar el título de un trabajo (libro,
película, poema, etc..). <cite>…</cite>
Ejemplo:

19.- <address>
Para que sirve: Este elemento encierra información de contacto para un elemento
<article> o el documento completo. Es recomendable que sea insertado dentro de
un elemento <footer>. <address> </address>
Ejemplo:

pág. 15
20.- <time>
Para que sirve: Este elemento se utiliza para mostrar fecha y hora en formatos
comprensibles por los usuarios y el navegador. <time… > </time>
Ejemplo:

El atributo datetime tiene el valor que representa la fecha comprensible para el


navegador (timestamp). El formato de este valor deberá seguir un patrón similar al
del siguiente ejemplo: 2011-10-12T12:10:45. También incluimos el atributo
pubdate, el cual solo es agregado para indicar que el valor del atributo datetime
representa la fecha de publicación.

21.- <style>
Para que sirve: permite a los desarrolladores agrupar estilos CSS dentro del
documento. <style>…</style>
Ejemplo:

pág. 16
22.- <p>
Para que sirve: Para distribuir el texto en párrafos.
Ejemplo:

23.- <div>
Para que sirve: Solo especifica una división en el cuerpo del documento, como la
celda de una tabla.

 Desde imágenes a menús, textos, enlaces, códigos, formularios, cualquier


cosa puede ir entre las etiquetas de apertura y cierre de un elemento <div>
</div>
Ejemplo:

pág. 17
24.- <script>.
Para que sirve: Para trabajar con códigos extensos y funciones personalizadas
debemos agrupar los códigos en un mismo lugar entre etiquetas <script>. El
elemento <script> actúa exactamente igual al elemento <style> usado para
incorporar estilos CSS. Nos ayuda a organizar el código en un solo lugar,
afectando a los elementos HTML por medio de referencias.
El elemento <script> y su contenido pueden ser posicionados en cualquier lugar
del documento, dentro de otros elementos o entre ellos. <script>…</script>
Ejemplo:

pág. 18
25.- <video>
Para que sirve: Para procesar video.
El elemento <video> usa etiquetas de apertura y cierre y solo unos pocos
parámetros para lograr su función. La sintaxis es extremadamente sencilla y solo
el atributo src es obligatorio.
Existen algunos atributos que son específicos para el elemento <video>:

 poster Este atributo provee una imagen para mostrarla en lugar del video
antes de ser reproducido.
 width Este atributo determina el tamaño del video en pixeles.
 height Este atributo determina el tamaño del video en pixeles.

Ejemplo:

pág. 19
26.- <audio>
Para que sirve: Elemento para reproducir audio en un documento HTML. El
elemento, por supuesto, es <audio> y comparte casi las mismas características
del elemento <video>.
Ejemplo:

27.- <form>
Para que sirve: Para construir un formulario.
Escribir las etiquetas <form> de apertura y cierre y luego declarar cada elemento
del formulario entre ellas. <form>…</form>
Ejemplo:

pág. 20
28.- <input>
Para que sirve: El elemento más importante en un formulario.
Este elemento puede cambiar sus características gracias al atributo type (tipo).
Este atributo determina qué clase de entrada es esperada desde el usuario. <input
type >
Ejemplo:

29.- <canvas>
Para que sirve: Simplemente crea una caja vacía en la pantalla. Es solo a través
de Javascript y los nuevos métodos y propiedades introducidos por la API que
esta superficie se transforma en algo práctico. <canvas>…</canvas>

pág. 21
Ejemplo:

Solo es necesario especificar unos pocos atributos para este elemento. Los
atributos width (ancho) y height (alto) declaran el tamaño del lienzo en pixeles.
30.- <strong>
Para que sirve: Es para indicar importancia. <strong>…</strong>
Ejemplo:

31.- <br>
Para que sirve: Para dar un salto de línea en el texto. <br> y <br/>
Ejemplo:

pág. 22
32.-<output>
Para que sirve:
Este elemento representa el resultado de un cálculo. Normalmente ayudará a
mostrar los resultados del procesamiento de valores provistos por un formulario. El
atributo for asocia el elemento <output> con el elemento fuente que participa del
cálculo, pero este elemento deberá ser referenciado y modificado desde código
Javascript.
<output>valor</output>.
Ejemplo:

pág. 23
Conclusión
Como hemos observado en esta investigación HTML, es un lenguaje sencillo que
sirve para la creación de documentos, que serán trasmitidos a internet y este
lenguaje utiliza las etiquetas, estas son representadas con:

 <etiqueta de abertura>
 </ etiqueta de cierre> (No todas lo usan, están las etiquetas vacías)

Las etiquetas son aquellas que especifican, como es que se va a estructurar el


documento (encabezado, cuerpo, pie de página, etc.), que tipo de contenido se
quiere utilizar (imágenes, videos, css, etc.) y como se quiere que se visualice o
presente a los demás.

Bibliografía

pág. 24
Guatch, J.(2012). El gran libro de html5, CSS3 y Javascript 1°Edición (España).
Recuperado de: https://docs.google.com/viewer?url=https%3A%2F
%2Farchivos.territorio.la%2Farchivos%2Fclases
%2Felngrannlibrondenhtml5ncss3nynjavascript___345fa7928b55cbf___.pdf&emb
edded=true

pág. 25

También podría gustarte