Scribd
Cargar
23 vistas18 páginas

Unidad 02 HTML5

Cargado por

Nicki Quaranta
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 vistas18 páginas

Unidad 02 HTML5

Cargado por

Nicki Quaranta
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/ 18

Tecnicatura en Desarrollo Web

Programación Web I

Unidad 2: HTML 5
HTML 3

Sintaxis 3

Atributos de etiquetas 3

Etiquetas que no tienen cierre 4

Comentarios en html 4

Estructura Básica de html 4

Etiqueta Title (<title>) 5

Encabezados (etiquetas <h1>, <h2>, <h3>, <h4>, <h5>, <h6>) 6

Párrafos (etiqueta <p>) 6

Saltos de Línea (etiqueta <br>) 6

Listas Numeradas (etiqueta <ol>) 7

Listas No Numeradas (etiqueta <ul>) 7

Imágenes (etiqueta <img>) 8

Vínculos (etiqueta <a>) 8

Podemos establecer vínculos: 9

Formateo de Texto 10

Bloques (etiqueta <div>) 10

Tablas (etiqueta <table>) 10

HTML5 DOCTYPE 11

Etiquetas Semánticas: 12

Header 12

Nav 13

Main 13

Section 13

Article 14

Autora: Prof. Alicia Rosenthal Página 1/18


Tecnicatura en Desarrollo Web
Programación Web I

Aside 14

Footer 14

Resumen Etiquetas HTML Básicas 16

Resumen Etiquetas Semánticas HTML5 18

Autora: Prof. Alicia Rosenthal Página 2/18


Tecnicatura en Desarrollo Web
Programación Web I

HTML
HTML (HyperText Markup Language), es un lenguaje basado en marcas conocidas como
etiquetas.

Estas etiquetas marcan la manera en la que se debe entender y mostrar la información.

Por ejemplo, la etiqueta p, es una etiqueta que marca que un bloque de texto es un
párrafo.

Entonces es <p> sería la etiqueta que abre y </p> la etiqueta que cierra.

Todo el texto que se encuentre entre un <p> y un </p> va ser interpretado por los
navegadores como un párrafo.

Los archivos html, tienen la extensión .htm o .html

Sintaxis
La estructura básica de las etiquetas HTML se caracteriza por ir encerradas entre
los símbolos <> para las de apertura y </> para las de cierre.
Siguiendo este modelo:

<nombre_etiqueta> ... </nombre_etiqueta>


Por ejemplo:

<h1> Titulo </h1>

Es etiqueta que abre, contenido de texto a marcar, y etiqueta que cierra.

Atributos de etiquetas
Las etiquetas html, tienen atributos que varían dependiendo la etiqueta.

Los atributos ,van dentro de la apertura de la etiqueta y siguen el siguiente formato:

<etiqueta atributo="valor"> </etiqueta>

Es decir nombre_de_atributo seguido por el signo igual (=), y el valor va

Autora: Prof. Alicia Rosenthal Página 3/18


Tecnicatura en Desarrollo Web
Programación Web I

encerrado entre comillas dobles (" ").

Por ejemplo:

<h1 id="inicio"> Titulo </h1>

Etiquetas que no tienen cierre

Algunas etiquetas especiales llamadas “etiquetas vacías” no necesitan encerrar


ningún texto. La etiqueta <br> por ejemplo, se utiliza para indicar el comienzo de
una nueva línea. Por sus características, la etiqueta <br> nunca encierra ningún
contenido de texto.

Por ende, no se cierra.

Otra etiqueta que no se cierra es la etiqueta img, que sirve para vincular una
imagen a nuestro html.

Comentarios en html

Si quiero dejar comentarios dentro del código que me ayuden a identificar y entender
ciertos fragmentos, el formato en html para los comentarios es el siguiente:

<!-- Comentarios -->

<!—- para abrir un comentario

--> para cerrar un comentario

Todo el texto que vaya entre <!—- y --> quedará como comentario, es decir que no
saldrá en el html resultante.

Estructura Básica de html


La estructura básica de una página HTML es la siguiente:

<html>

<head>

Autora: Prof. Alicia Rosenthal Página 4/18


Tecnicatura en Desarrollo Web
Programación Web I

</head>

<body>

</body>

</html>

Las 3 etiquetas básicas de un documento html son la etiqueta <html>, la etiqueta <head> y
la etiqueta <body>

● <html>: indica el comienzo y el final de un documento HTML. Ninguna


etiqueta o contenido puede colocarse antes o después de la etiqueta <html>.

En el interior de la etiqueta <html> se definen la cabecera y el cuerpo del


documento HTML y todo lo que se coloque fuera de la etiqueta <html> se ignora.

● <head>: delimita la parte de la cabecera del documento. La cabecera


contiene información sobre el propio documento HTML, como por ejemplo
su título y el idioma de la página. Los contenidos indicados en la cabecera no
son visibles para el usuario, con la excepción de la etiqueta <title>, que se
utiliza para indicar el título del documento y que los navegadores lo
visualizan en la parte superior izquierda de la ventana del navegador.

● <body>: delimita el cuerpo del documento HTML. El cuerpo encierra todos


los contenidos que se muestran al usuario (párrafos de texto, imágenes,
tablas). En general, el <body> de un documento contiene cientos de
etiquetas HTML, mientras que el <head> no contiene más que unas pocas.

Etiqueta Title (<title>)


<html>

<head>

<title>Título de la página</title>
</head>

<body>

Esta etiqueta se utiliza para indicar el título de un documento. Los navegadores lo

Autora: Prof. Alicia Rosenthal Página 5/18


Tecnicatura en Desarrollo Web
Programación Web I

visualizan en la solapa de la página web. Va dentro de la cabecera del documento (dentro


de la etiqueta <head>)

Encabezados (etiquetas <h1>, <h2>, <h3>, <h4>, <h5>, <h6>)


<h1> - <h6>

Las etiquetas h son utilizadas para marcar los encabezados de un documento HTML.

Son etiquetas jerárquicas que van del h1 al h6, siendo el h1 el encabezado más importante
de nuestro documento y el h6 el menos importante.

Solo puede haber un h1 en nuestro documento HTML.

Los encabezados son textos destacados en nuestro documento.

<h1> Textos de Encabezado 1 </h1>


<h2> Textos de Encabezado 2 </h2>

<h3> Textos de Encabezado 3 </h3>

<h4> Textos de Encabezado 4 </h4>

<h5> Textos de Encabezado 5 </h5>

<h6> Textos de Encabezado 6 </h6>

Párrafos (etiqueta <p>)


La etiqueta p, sirve para marcar párrafos comunes.

<p> Un párrafo</p>

Saltos de Línea (etiqueta <br>)


Para marcar saltos de línea, existe la etiqueta <br> que como vimos anteriormente, es una
etiqueta que no tiene cierre.

Podemos establecerla para marcar saltos de línea dentro de un párrafo o dentro de


cualquier etiqueta HTML.

Autora: Prof. Alicia Rosenthal Página 6/18


Tecnicatura en Desarrollo Web
Programación Web I

Por cada <br> que insertemos obtendremos un salto de línea.

<p>

Renglón 1 <br>

Renglón 2

</p>

Listas Numeradas (etiqueta <ol>)


La etiqueta que nos permite generar listas numeradas es la etiqueta <ol>

● <ol></ol>, para marcar un contenido como lista


● y la etiqueta <li></li>, para marcar cada ítem en la lista

<ol>

<li>Primer Paso</li>

<li>Segundo Paso</li>

</ol>

Esto se vería como:

1. Primer Paso
2. Segundo Paso

Listas No Numeradas (etiqueta <ul>)


La etiqueta que nos permite generar listas NO numeradas, es la etiqueta <ul>

● <ul></ul>, para marcar un contenido como lista


● y la etiqueta <li></li>, para marcar cada ítem en la lista

<ul>

<li>Blanco</li>

<li>Verde</li>

</ul>

Autora: Prof. Alicia Rosenthal Página 7/18


Tecnicatura en Desarrollo Web
Programación Web I

Esto se vería como:

○ Primer Paso
○ Segundo Paso

Imágenes (etiqueta <img>)


La etiqueta que nos permite vincular imágenes a nuestro documento html, es la etiqueta
<img>. Al igual que la etiqueta br, es una de las etiquetas que NO tienen etiqueta de cierre.

Tiene dos atributos obligatorios:

1. El atributo src. En donde establecemos la ubicación de la imagen (ruta) y el


nombre del archivo incluyendo su extensión
<img src="img/foto.jpg">

2. El atributo alt. En donde escribimos un texto descriptivo acerca de la imagen que


acabamos de insertar.

El atributo alt, es un texto alternativo a nuestra imagen.

<img src="img/logo.jpg" alt="Logo">

Otros atributos de la etiqueta img son: width y height que nos permiten establecer un
ancho o un alto para nuestras imágenes. Lo ideal es no usarlos, y darles el formato a través
de css.

<img src="img/logo.jpg" alt="Logo" width="200">

Vínculos (etiqueta <a>)


La etiqueta <a></a> sirve para marcar un hipervínculo.

Su atributo más importante es el atributo href, que es donde se incluye el link de


destino.

Por ejemplo:

<a href="https://www.unlam.edu.ar/">Unlam </a>

Esto se vería así en un navegador:

Unlam

Autora: Prof. Alicia Rosenthal Página 8/18


Tecnicatura en Desarrollo Web
Programación Web I

y al hacer clic en el texto Instituto Da Vinci, nos llevaría a su página (la url que incluimos en
el atributo href).

Otro atributo que tiene esta etiqueta es el atributo target, en donde podemos establecer
en donde queremos que se abra el vínculo.

Por ejemplo, si queremos que la página del instituto se abra en página aparte, el valor que
deberíamos usar en el atributo target es "_blank”

<a href="https://www.unlam.edu.ar/" target="_blank">

Unlam

</a>

Podemos establecer vínculos:

1. A otro documento u página externa


Por ejemplo
<a href="http://www.google.com.ar"> Google </a>

2. Dentro del mismo documento

Si queremos generar un vínculo que nos lleve a una parte de nuestro html.

Por ejemplo, queremos incluir al final de nuestro documento, un link que nos lleve
al principio.

Para hacer esto necesitamos dos pasos:

1. Paso 1, agregar un id, a la etiqueta adonde queremos ir

<h1 id="inicio"> </h1>

2. Paso 2, agregar un vínculo cuyo valor del atributo href sea numeral (#)
nombre_de_id

<a href="#inicio"> Ir al Inicio</a>

3. De tipo Email

mailto: el modificador mailto, dentro del href de una etiqueta a, genera un vínculo,
que al hacer clic intenta abrir nuestro programa de correo y generar un correo
nuevo hacia la casilla indicada.

<a href="mailto:[email protected]">[email protected]</a>

Autora: Prof. Alicia Rosenthal Página 9/18


Tecnicatura en Desarrollo Web
Programación Web I

Formateo de Texto
● <strong></strong>
Sirve para marcar un texto importante.

Por defecto muestra la tipografía en bold, pero se le puede dar cualquier formato en el
css.

● <em></em>
Sirve para enfatizar un texto.

Por defecto muestra la tipografía en cursiva, pero se le puede dar cualquier formato en el
css.

● <small></small>
Define un texto de tamaño chico.

Bloques (etiqueta <div>)


Esta etiqueta sirve para marcar bloques o secciones dentro de un HTML.

Los divs son usados para darle formato en css, a un bloque de contenido.

Se les suele asignar un atributo id o un atributo class.

Por ejemplo:

<div class="noticia">
<h2>Titulo Noticia</h2>

<p>Párrafo descriptivo de la noticia.</p>

</div>

Tablas (etiqueta <table>)


Cuando necesitamos utilizar una tabla en nuestro documento, usamos la etiqueta
<table></table>, un <tr> para cada fila y un <td> para cada columna.

Autora: Prof. Alicia Rosenthal Página 10/18


Tecnicatura en Desarrollo Web
Programación Web I

<table>

<tr> Fila

<td> Columna </td>

</tr>

</table>

HTML5 DOCTYPE
La manera de indicar que un document html es html5, es el siguiente:

<!DOCTYPE html>

<html lang="es">
<head>

<meta charset="UTF-8">
<title></title>

</head>

<body>

</body>

</html>

La primera línea indica el doctype (esto indica que se trata de la versión HTML 5).

El atributo lang en la etiqueta de apertura <html> es el único atributo que hay que
especificar en HTML5. Este atributo define el idioma del contenido del documento que
estamos creando, en este caso es por español.

Adicionalmente, se puede agregar la etiqueta meta charset que define los tipos de
caracteres que va a tener el documento. La opción UTF-8 nos permite utilizar acentos y ñ, y
que estos se visualicen correctamente en el navegador.

Autora: Prof. Alicia Rosenthal Página 11/18


Tecnicatura en Desarrollo Web
Programación Web I

Etiquetas Semánticas:
Las etiquetas semánticas ayudan a definir la estructura del documento y permiten
que las páginas web sean mejor indexadas por los buscadores.

Una etiqueta se califica como semántica si tiene que ver el significado, es decir, si nos
informa sobre lo que trata su contenido.

El esquema de una página con etiquetas semánticas podría ser el siguiente:

Las etiquetas que vamos a ver a continuación son las que definen la estructura general del
sitio (HEADER, ARTICLE, SECTION, ASIDE, FOOTER, NAV), y vienen a reemplazar a los div
con id encabezado, contenido y pie, entre otros.

Header
La etiqueta header, marca el encabezado del contenido de nuestro documento.

<header> no debe ser confundido con la etiqueta <head> de html.

La etiqueta header va dentro de la etiqueta body y suele contener, el título principal de la


página, el logo del sitio, y una breve descripción corta.

<body>

<header>

<h1>Título de la página</h1>

Autora: Prof. Alicia Rosenthal Página 12/18


Tecnicatura en Desarrollo Web
Programación Web I

</header>

</body>

Nav
Esta etiqueta marca una barra de navegación con enlaces internos al sitio. Pueden haber
una o varias etiquetas nav en un sitio web.

<nav>
<ul>

<li>Home</li>

<li>Contacto</li>

</ul>

</nav>

Main
Se utiliza para marcar el contenido central de una página (Sin encabezado, menu, ni pie).
Solo puede haber una etiqueta main por página.

<main>

<section>

….

</section>

</main>

Section
Se utiliza para marcar secciones de contenido que están relacionados entre sí (un mismo
tema). Pueden haber varios section por página.

<section>

Autora: Prof. Alicia Rosenthal Página 13/18


Tecnicatura en Desarrollo Web
Programación Web I

<article>

….

</article>

</section>

Article
Cada contenido independiente, completo, atómico. Puede haber uno, o varios por página.
Son subsecciones dentro de un section.

<article>

<h2>Titulo de la Noticia</h2>

<p>Contenido…..</p>

</article>

Aside
Sirve para indicar que se trata de información complementaria, relacionada con la página,
pero que no pertenece al contenido principal del mismo.

Ejemplo: productos relacionados, comentarios de lectores

<aside>

<h2>201x</h2>

</aside>

Footer
Sirve para marcar el pie de página. Por lo general, van los datos de contacto, redes sociales,
copyright de la página.
<footer>
<p>
201x – Programación…..

Autora: Prof. Alicia Rosenthal Página 14/18


Tecnicatura en Desarrollo Web
Programación Web I

</p>
</footer>

Autora: Prof. Alicia Rosenthal Página 15/18


Tecnicatura en Desarrollo Web
Programación Web I

Resumen Etiquetas HTML Básicas

Etiqueta Descripción

Indica el comienzo y el final de un documento HTML


html

Delimita la parte de la cabecera del documento.


head

Delimita el cuerpo del documento HTML, solo las etiquetas


body contenidas dentro del body se visualizarán en el navegador.

Establece el título de un documento html. Va dentro de la


title etiqueta <head>

Las etiquetas h, marcan los encabezados de un documento.


h1-h6

Sirve para marcar párrafos


p

Establece un salto de línea. Esta etiqueta no tiene etiqueta de


br cierre.

Listas Numeradas.
ol

Listas NO Numeradas.
ul

Marca un ítem en una lista


li

Autora: Prof. Alicia Rosenthal Página 16/18


Tecnicatura en Desarrollo Web
Programación Web I

Vincula una imagen a un documento HTML.


img Los dos atributos obligatorios son src (ubicación) y alt (texto
alternativo)

Sirve para generar un vínculo.


a Su atributo más importante es href (se establece el link de
destino)

Etiqueta que sirve para marcar bloques de contenido.


div

Autora: Prof. Alicia Rosenthal Página 17/18


Tecnicatura en Desarrollo Web
Programación Web I

Resumen Etiquetas Semánticas HTML5

Etiqueta Descripción

header La etiqueta header va dentro de la etiqueta body y suele


contener, el título principal de la página, el logo del sitio, y una
breve descripción corta.

nav Este elemento sirve para marcar que el contenido del mismo es
un menú y que contiene enlaces a secciones internas al sitio.

main Se utiliza para marcar el contenido central de una página (Sin


encabezado, menu, ni pie). Solo puede haber una etiqueta main
por página.

section Se utiliza para marcar secciones de contenido que están


relacionados entre sí (un mismo tema).Pueden haber varios
section por página.

article Este elemento representa una porción independiente de


información relevante (por ejemplo, cada noticia de un diario o
cada entrada de un blog).

aside Este elemento representa contenido que está relacionado con el


contenido principal pero no es parte del mismo. Ejemplos
pueden ser citas, información en barras laterales, publicidad,
artículos relacionados, etc

footer Esta etiqueta se utiliza para marcar el pie de página.

Autora: Prof. Alicia Rosenthal Página 18/18

También podría gustarte