Scribd
Cargar
41 vistas139 páginas

HTML5

El documento es un tutorial sobre HTML, que cubre desde la introducción al lenguaje hasta su estructura, etiquetas, atributos y ejemplos prácticos. Se detalla la evolución de HTML, la creación de páginas web, y se ofrecen pautas para un buen código HTML. Además, se explican elementos como párrafos, encabezados y el manejo de texto en HTML.

Cargado por

Carlos Espinoza
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
41 vistas139 páginas

HTML5

El documento es un tutorial sobre HTML, que cubre desde la introducción al lenguaje hasta su estructura, etiquetas, atributos y ejemplos prácticos. Se detalla la evolución de HTML, la creación de páginas web, y se ofrecen pautas para un buen código HTML. Además, se explican elementos como párrafos, encabezados y el manejo de texto en HTML.

Cargado por

Carlos Espinoza
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/ 139

UNIVERSIDAD MAYOR DE SAN ANDRÉS

CARRERA DE INFORMÁTICA

HTML
Preparado como parte de los contenidos de la Asignatura Laboratorio
de Computación - Programación Web I

M.SC. ALDO VALDEZ ALVARADO


Índice
1 Introducción
2 Página Web
3 Manejo de Texto
4 Tablas
5 Hipervínculos
6 Imágenes
7 Multimedia
8 Marcos
9 Diseño Web Responsivo con HTML
Índice
10 Formularios en HTML
11 API’s en HTML
1 INTRODUCCIÓN
HTML (Hyper Text Markup Language) es un lenguaje de etiquetas,
llamado también lenguaje de marcado
HTML es el lenguaje de marcado estándar que describe la estructura de
páginas Web,.
Los documentos HTML deben tener la extensión html o htm, para que
puedan ser visualizados en los navegadores
El lenguaje HTML es un estándar reconocido en todo el mundo y cuyas
normas define un organismo sin ánimo de lucro llamado World Wide
Web Consortium, más conocido como W3C (https://www.w3.org/)
El lenguaje HTML es “un lenguaje reconocido universalmente y que
permite publicar información de forma global”
Los navegadores (como Chrome, Internet Explorer, Firefox, Safari) se
encargan de interpretar el código HTML de los documentos, y de mostrar
a los usuarios las páginas Web resultantes del código interpretado
Los navegadores tienen que ser compatibles con la última versión HTML
para poder interpretar el mayor número posible de etiquetas
En la siguiente tabla se puede observar la evolución histórica de HTML,
hasta llegar a la última versión
Año Versión
1989 Tim Berners-Lee inventa WWW a partir de un sistema de hipertexto
1991 Tim Berners-Lee inventa las etiquetas de HTML
1993 Dave Raggett del IETF presenta el borrador del estándar, denominado HTML+
1995 El grupo de trabajo de HTML define el estándar official HTML 2.0
1997 W3C publica la recomendación HTML 3.2
1999 W3C publica la recomendación HTML 4.01
2000 W3C publica la recomendación XHTML 1.0
2008 WHATWG (Web Hypertext Application Technology Working Group) publica el borrador del
HTML5
2012 WHATWG publica el Living Standared HTML5
2014 W3C pública la recomendación HTML5
2016 W3C se publica la recomendación HTML 5.1
2017 W3C se publica la recomendación HTML5.1 2da. Edición
2017 W3C se publica la recomendación HTML5.2
2 PÁGINA WEB
Las páginas Web habituales están formadas por cientos o miles de pares de
etiquetas
Las etiquetas o marcas delimitan cada uno de los elementos que componen
un documento HTML
Existen dos tipos de etiquetas, la de comienzo de elemento y la de fin o
cierre de elemento

<etiqueta atributo1=valor atributo2…>Contenido</etiqueta>


Editores
Las páginas Web se pueden crear y modificar usando editores especializados,
aplicaciones en línea o el bloc de notas.
Si se usará el Bloc de Notas, debe realizar los siguiente:
1. Abra el Bloc de Notas
2. Escriba o copie código HTML
3. Seleccione Guardar como, y guarde el archivo como index.htm o
index.html y establezca la codificación a UTF-8
4. Abra el archivo con su navegador y vea el resultado

Se puede usar el editor en línea gratuito de W3Schools, para lo cual haga lo


siguiente:
1. Ingrese a la siguiente dirección:
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_editors
Editores
2. Escriba o copie código HTML
3. Presione el botón Run>, y vea el resultado

También, puede usar el editor de código fuente Visual Studio Code desarrollado
por Microsoft para diferentes Sistemas Operativos
(https://code.visualstudio.com/download). Una vez instalado en su ordenador
realice lo siguiente:
1. Abra el editor VSCode
2. Seleccione Archivo, y luego Nuevo archivo… en el cuadro de diálogo escriba
index.htm o index.html, y seleccione la ubicación para guardar el archivo
3. Escriba o copie código HTML
4. Presione Ctrl + S para guardar el archivo
5. Abra el archivo con su navegador y vea el resultado
EJEMPLO 1

<!DOCTYPE html>
<html>
<head>
<title>TUTORIAL HTML</title>
</head>
<body>
<p>El clásico Hola Mundo</p>
</body>
</html>
➢ La declaración <!DOCTYPE html> define que este documento es
un documento HTML5. Todos los documentos HTML deben empezar
con esta declaración del tipo de documento.
➢ El elemento <html> es el elemento raíz de una página HTML
➢ El elemento <head> contiene metainformación sobre la página
HTML
➢ El elemento <title> especifica un título para la página HTML (que
se muestra en la barra de título del navegador o en la pestaña de la
página)
➢ El elemento <body> define el cuerpo del documento y es un
contenedor de todos los contenidos visibles, como encabezados,
párrafos, imágenes, hipervínculos, tablas, listas, entre otros
➢ El elemento <p> define un párrafo
Estructura de una Página
Una página Web, es una página HTML <html>, que se compone de un
encabezado <head> y un cuerpo <body>
Estructura de una Página
Una página HTML <html> se estructura de la siguiente manera:
Estructura de una Etiqueta
Una etiqueta o marca en HTML se estructura de la siguiente manera:
Etiquetas
Las normas que sugiere la W3C, para la escritura de las etiquetas son:
❏ Las etiquetas se tienen que cerrar de acuerdo a como se abren. Todas las
etiquetas deben cerrarse siempre, aunque algunos elementos se
desplieguen correctamente
❏ Las etiquetas HTML no distinguen entre mayúsculas y minúsculas. El
estándar HTML no requiere etiquetas en minúsculas, pero W3C
recomienda minúsculas en HTML y exige minúsculas para tipos de
documentos más estrictos como XHTML.
❏ En HTML existen etiquetas especiales, denominadas etiquetas vacías
Etiquetas
Un ejemplo de etiqueta vacía en HTML es <br>, que indica el comienzo
de una nueva línea. De acuerdo a las normas anteriores, también se
puede escribir como: </br>.
Cada elemento HTML tiene un valor de visualización predeterminado, según
el tipo de etiqueta que sea. Hay dos valores de visualización: bloque y en
línea
Una etiqueta a nivel de bloque siempre comienza en una nueva línea y los
navegadores automáticamente agregan algo de espacio (un margen) antes y
después del elemento. Una etiqueta a nivel de bloque siempre ocupa todo el
ancho disponible (se extiende hacia la izquierda y hacia la derecha tanto
como puede)
Etiquetas
Estas son las etiquetas de nivel de bloque en HTML:
<address> <article> <aside> <blockquote> <canvas> <dd>
<div> <dl> <dt> <fieldset> <figcaption> <figure> <footer>
<form> <h1>-<h6> <header> <hr> <li> <main> <nav>
<noscript> <ol> <p> <pre> <section> <table> <tfoot> <ul>
<video>
Una etiqueta en línea no comienza en una nueva línea. Un elemento en línea
sólo ocupa el ancho necesario. Un elemento en línea no puede contener un
elemento a nivel de bloque
Etiquetas
Estos son los elementos en línea en HTML:
<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite>
<code> <dfn> <em> <i> <img> <input> <kbd> <label> <map>
<object> <output> <q> <samp> <script> <select> <small>
<span> <strong> <sub> <sup> <textarea> <time> <tt> <var>

Una lista completa de las etiquetas disponibles en HTML5 se encuentra en la


siguiente dirección: https://www.w3schools.com/tags/default.asp
Atributos
❏ Todos los elementos HTML pueden tener atributos
❏ Los atributos proporcionan información adicional sobre los elementos.
❏ Los atributos siempre se especifican en la etiqueta de inicio
❏ Los atributos generalmente vienen en pares de nombre/valor como:
nombre="valor"
❏ El estándar HTML no requiere nombres de atributos en minúsculas, sin
embargo, W3C recomienda atributos en minúsculas en HTML y exige
atributos en minúsculas para tipos de documentos más estrictos como
XHTML
❏ El estándar HTML no requiere comillas alrededor de los valores de los
atributos, sin embargo, W3C recomienda comillas en HTML y exige
comillas para tipos de documentos más estrictos como XHTML
Una lista completa de los atributos disponibles en HTML5 se encuentra
en la siguiente dirección:
https://www.w3schools.com/tags/ref_attributes.asp
EJEMPLO 2

<!DOCTYPE html>
<html lang=“es-BO”>
<head>
<title>MI PRIMERA PAGINA HTML</title>
<meta charset=”UTF-8”>
<!--UTF-8 (8-bit Unicode Transformation Format) es un formato de
codificación de caracteres Unicode e ISO 10646 utilizando símbolos de
longitud variable.//-->
<meta name=”description” content=”Tutorial HTML 5”>
<meta name=”keywords” content=”HTML5, marcado, lenguaje”>
<meta name=”author” content=”Aldo Valdez”>
<meta http-equiv=”refresh” content=”30”>
</head>
<body style=”background-color:yellow;”>
<p>El clásico Hola Mundo</p>
</body>
</html>
Algunas pautas y consejos para crear un buen código HTML son las
siguientes:
➢ Siempre declare el tipo de documento
➢ Use nombres de etiquetas en minúsculas
➢ Cierre todas las etiquetas
➢ Use nombres de atributos en minúsculas
➢ Siempre use comillas para los valores de atributos
➢ Siempre especifique texto alterno, ancho y alto para las imágenes
➢ No use espacios al usar el signo igual
➢ Evite líneas de código largas
➢ Para facilitar la lectura, agregue líneas en blanco para separar bloques
de código grandes o lógicos
➢ Para facilitar la lectura, agregue dos espacios de sangría. No utilice la
tecla de tabulación
➢ Nunca omita el elemento <title>
➢ Puede omitir <html> o <body>, pero se recomienda no hacerlo
➢ Es opcional cerrar etiquetas vacías
➢ Siempre debe incluir el atributo lang dentro de la etiqueta <html>,
para declarar el idioma de la página web
➢ Para garantizar una interpretación adecuada y una indexación
correcta en los motores de búsqueda, tanto el idioma como la
codificación de caracteres <meta charset="charset"> deben
definirse lo antes posible en un documento HTML
3 MANEJO DE TEXTO
Párrafos
Un párrafo siempre comienza en una nueva línea y suele ser un bloque
de texto.
Los párrafos se insertan entre las etiquetas: <p> y </p>.
No puede estar seguro de cómo se mostrará un párrafo en HTML. Las
pantallas grandes o pequeñas y las ventanas redimensionadas crearán
resultados diferentes.
Con HTML, no se puede cambiar la visualización agregando espacios
adicionales o líneas adicionales en su código HTML.
El navegador eliminará automáticamente los espacios y líneas
adicionales cuando se muestre la página.
Para insertar caracteres especiales se puede usar el nombre literal o
numérico que los representa.
Carácter Literal Numérico
< &lt; &#60;
> &gt; &#62;
Á &aacute; &#225;
Á &Aacute; &#193;
É &eacute; &#233;
É &Eacute; &#201;
Í &iacute; &#237;
Í &Iacute; &#205;
Ó &oacute; &#243;
Ó &Oacute; &#211;
Ú &uacute; &#250;
Ú &Uacute; &#218;
Ñ &ntilde; &#241;
Ñ &Ntilde; &#209;
™ &trade; &#8482;
€ &euro; &#8364;
& &amp; &#38;
¿ &iquest; &#191;
¡ &iexcl; &#161;
" &quot; &#34;
© &copy; &#169;
® &reg; &#174;

Para saber más visite: https://dev.w3.org/html5/html-author/charref


➢ Para visualizar varios espacios en blanco se usa: &nbsp;
➢ Para insertar comentarios se incluye el texto entre: <!-- y //-->.
➢ Para insertar una línea horizontal se usa la etiqueta <hr> que es
una etiqueta vacía
➢ Para añadir un salto de línea use la etiqueta <br> que como ya se
dijo es una etiqueta vacía
Texto pre formateado
Para que el texto aparezca en el navegador tal cual se ha insertado en el
código, se usa: <pre> y </pre>.
El texto dentro de un elemento <pre> se muestra en una fuente de
ancho fijo (generalmente Courier) y conserva tanto los espacios como los
saltos de línea.
Encabezados
Para establecer títulos se usan las etiquetas de la <h1> a la <h6>,
donde <h1> es el más importante y <h6> es el menos importante.
El encabezado <h1> deben usarse para los títulos principales, seguido
de del encabezado <h2>, luego los menos importantes <h3>, y así
sucesivamente.
Los motores de búsqueda utilizan los encabezados para indexar la
estructura y el contenido de sus páginas web.
Los usuarios a menudo revisan una página por sus títulos. Es importante
utilizar encabezados para mostrar la estructura del documento.
EJEMPLO 3
<!DOCTYPE html>
<html>
<head>
<title>Manejo de Texto y Otros</title>
</head>
<body>
&iexcl;Bienvenidos, esta es mi &nbsp; &nbsp; &nbsp; 1&ordf; &nbsp;
&nbsp; &nbsp; p&aacute;gina&excl;
</body>
</html>
EJEMPLO 3
<!DOCTYPE html>
<html>
<head>
<title>Manejo de Texto y Otros</title>
</head>
<body>
<!-- A continuación aparecerá una línea de texto//-->
&iexcl;Bienvenidos, esta es mi &nbsp; &nbsp; &nbsp; 1&ordf; &nbsp;
&nbsp; &nbsp; p&aacute;gina&excl;<br/>Esta p&aacute;gina es sobre
texto.
</body>
</html>
EJEMPLO 3
<!DOCTYPE html>
<html>
<head>
<title>Manejo de Texto y Otros</title>
</head>
<body>
<!-- A continuación aparecerá una línea de texto//-->
&iexcl;Bienvenidos, esta es mi &nbsp; &nbsp; &nbsp; 1&ordf; &nbsp;
&nbsp; &nbsp; p&aacute;gina&excl;<br/>Esta p&aacute;gina es sobre
texto.
<hr/>
<p>Este es un párrafo</p>
<p>Este es otro párrafo qué no necesita br </p>
</body>
</html>
EJEMPLO 3
<!DOCTYPE html>
<html>
<head>
<title>Manejo de Texto y Otros</title>
</head>
<body>
<!-- A continuación aparecerá una línea de texto//-->
&iexcl;Bienvenidos, esta es mi &nbsp; &nbsp; &nbsp; 1&ordf; &nbsp; &nbsp;
&nbsp; p&aacute;gina&excl;<br/>Esta p&aacute;gina es sobre texto.
<hr/>
<p>Este es un párrafo</p>
<p>Este es otro párrafo qué no necesita br </p>
<hr>
<pre>
Hola, BIENVENIDOS
esta ES MI PÁGINA WEB
y esto un texto preformateado
</pre>
</body>
</html>
EJEMPLO 4
<!DOCTYPE html>
<html>
<head>
<title>Encabezados</title>
</head>
<body>
<h1>Título h1</h1>
<p>Este es un párrafo</p>
<hr/>
<h2>Título h2</h2>
<p>Este es un párrafo</p>
<hr/>
<h3>Título h3</h3>
<p>Este es un párrafo</p>
<hr/>
<h4>Título h4</h4>
<p>Este es un párrafo</p>
<hr/>
<h5>Título h5</h5>
<p>Este es un párrafo</p>
<hr/>
<h6>Título h6</h6>
<p>Este es un párrafo</p>
<hr/>
</body>
</html>
Estilos
Para definir los estilos (por ejemplo color, fuente, tamaño) de una
etiqueta HTML se usa el atributo style de la siguiente manera:

<etiqueta style=”propiedad:valor;”>

La propiedad y el valor son propiedad y valor CSS


Algunas propiedades de este atributo son:
❏ Color de fondo: background-color
❏ Color de texto: color
❏ Tipo de fuente: font-family
❏ Tamaño del texto: font-size
❏ Alineación horizontal del texto: text-align
Colores
Los colores en HTML se especifican con nombres predefinidos o con
valores RGB, HEX, HSL, RGBA o HSLA
❏ HTML admite 140 nombres de colores estándar.
❏ En HTML, un color se puede especificar como un valor RGB, utilizando
esta fórmula: rgb (rojo, verde, azul.Cada parámetro (rojo,
verde y azul) define la intensidad del color con un valor entre 0 y 255.
❏ En HTML, se puede especificar un color usando un valor hexadecimal
en la forma: #rrggbb. Donde rr (rojo), gg (verde) y bb (azul) son
valores hexadecimales entre 00 y ff (igual que decimal 0-255).
❏ En HTML, un color se puede especificar usando tono, saturación y
luminosidad (HSL) en la forma: hsl (tono, saturación,
luminosidad)
Colores
● El tono es un grado en la rueda de colores de 0 a 360. 0 es rojo, 120 es
verde y 240 es azul.
● La saturación es un valor porcentual. 0% significa un tono de gris y
100% es el color completo.
● La luminosidad es también un valor porcentual. 0% es negro y 100%
es blanco.

Puede ver un tutorial sobre colores en la siguiente dirección:


https://www.w3schools.com/colors/default.asp
EJEMPLO 5
<!DOCTYPE html>
<html>
<head>
<title>Manejo de Estilos</title>
</head>
<body style="background-color:yellow;">
<h1 style="color:red;">Laboratorio de Computación</h1>
<p style="color:blue;">En la materia nosotros llevaremos HTML</p><hr/>
</body>
</html>
EJEMPLO 5
<!DOCTYPE html>
<html>
<head>
<title>Manejo de Estilos</title>
</head>
<body style="background-color:yellow;">
<h1 style="color:red;">Laboratorio de Computación</h1>
<p style="color:blue;">En la materia nosotros llevaremos HTML</p><hr/>
<h2 style="font-family:courier;">Laboratorio de Computación</h2>
<p style="font-family:verdana;">En la materia nosotros llevaremos HTML</p><hr/>
</body>
</html>
EJEMPLO 5
<!DOCTYPE html>
<html>
<head>
<title>Manejo de Estilos</title>
</head>
<body style="background-color:yellow;">
<h1 style="color:red;">Laboratorio de Computación</h1>
<p style="color:blue;">En la materia nosotros llevaremos HTML</p><hr/>
<h2 style="font-family:courier;">Laboratorio de Computación</h2>
<p style="font-family:verdana;">En la materia nosotros llevaremos HTML</p><hr/>
<h3 style="font-size:200%;">Laboratorio de Computación</h3>
<p style="font-size:120%;">En la materia nosotros llevaremos HTML</p><hr/>
</body>
</html>
EJEMPLO 5
<!DOCTYPE html>
<html>
<head>
<title>Manejo de Estilos</title>
</head>
<body style="background-color:yellow;">
<h1 style="color:red;">Laboratorio de Computación</h1>
<p style="color:blue;">En la materia nosotros llevaremos HTML</p><hr/>
<h2 style="font-family:courier;">Laboratorio de Computación</h2>
<p style="font-family:verdana;">En la materia nosotros llevaremos HTML</p><hr/>
<h3 style="font-size:200%;">Laboratorio de Computación</h3>
<p style="font-size:120%;">En la materia nosotros llevaremos HTML</p><hr/>
<h4 style="text-align:center;">Laboratorio de Computación</h4>
<p style="text-align:right;">En la materia nosotros llevaremos HTML</p><hr/>
</body>
</html>
Formateo de Texto
Etiquetas asociadas al tipo de letra:

Etiqueta Significado Ejemplo


<b> Negrita curso HTML
<i> Cursiva curso HTML
<u> Subrayado curso HTML
<s> Tachado curso HTML
<small> Disminuye el tamaño de la fuente curso HTML
Formateo de Texto
Etiquetas asociadas al tipo de información:
Etiqueta Significado Ejemplo
<cite> Cita curso HTML
<code> Ejemplo de código curso HTML
<dfn> Definición curso HTML
<del> Eliminado curso HTML
<em> Énfasis curso HTML
<ins> Insertado curso HTML
<kbd> Teclado curso HTML
<samp> Muestra curso HTML
<strong> Destacado curso HTML
<sub> Subíndice curso HTML
<sup> Superíndice curso HTML
<var> Variable curso HTML
<mark> Resaltado curso HTML
<abbr> Abreviación curso HTML
<address> Dirección curso HTML
<bdo> Texto invertido LMTH osruc
EJEMPLO 6
<!DOCTYPE html>
<html>
<head>
<title>Resaltado de Texto</title>
</head>
<body>
<p>En una etiqueta de párrafo se puede encontrar texto en <b>negrilla</b> como
el anterior, también texto más <small>pequeño</small> como el anterior</p><hr/>
</body>
</html>
EJEMPLO 6
<!DOCTYPE html>
<html>
<head>
<title>Resaltado de Texto</title>
</head>
<body>
<p>En una etiqueta de párrafo se puede encontrar texto en <b>negrilla</b> como
el anterior, también texto más <small>pequeño</small> como el anterior</p><hr/>
<p>En el otro párrafo podemos usar también texto <mark>remarcado</mark>, o
<sub>subíndices</sub>, o <sup>superíndices</sup>, dependiendo de la
situación</p><hr/>
</body>
</html>
EJEMPLO 6
<!DOCTYPE html>
<html>
<head>
<title>Resaltado de Texto</title>
</head>
<body>
<p>En una etiqueta de párrafo se puede encontrar texto en <b>negrilla</b> como
el anterior, también texto más <small>pequeño</small> como el anterior</p><hr/>
<p>En el otro párrafo podemos usar también texto <mark>remarcado</mark>, o
<sub>subíndices</sub>, o <sup>superíndices</sup>, dependiendo de la
situación</p><hr/>
<p>El lenguaje <abbr title="Hyper Text Markup Language">HTML</abbr> es el que
permite el diseño de páginas Web</p><hr/>
</body>
</html>
EJEMPLO 6
<!DOCTYPE html>
<html>
<head>
<title>Resaltado de Texto</title>
</head>
<body>
<p>En una etiqueta de párrafo se puede encontrar texto en <b>negrilla</b> como
el anterior, también texto más <small>pequeño</small> como el anterior</p><hr/>
<p>En el otro párrafo podemos usar también texto <mark>remarcado</mark>, o
<sub>subíndices</sub>, o <sup>superíndices</sup>, dependiendo de la
situación</p><hr/>
<p>El lenguaje <abbr title="Hyper Text Markup Language">HTML</abbr> es el que
permite el diseño de páginas Web</p><hr/>
<address>
Nombre: Aldo<br/>
Dirección: San Pedro<br/>
Teléfono: 232323
</address><hr/>
</body>
</html>
EJEMPLO 6
<!DOCTYPE html>
<html>
<head>
<title>Resaltado de Texto</title>
</head>
<body>
<p>En una etiqueta de párrafo se puede encontrar texto en <b>negrilla</b> como
el anterior, también texto más <small>pequeño</small> como el anterior</p><hr/>
<p>En el otro párrafo podemos usar también texto <mark>remarcado</mark>, o
<sub>subíndices</sub>, o <sup>superíndices</sup>, dependiendo de la
situación</p><hr/>
<p>El lenguaje <abbr title="Hyper Text Markup Language">HTML</abbr> es el que
permite el diseño de páginas Web</p><hr/>
<address>
Nombre: Aldo<br/>
Dirección: San Pedro<br/>
Teléfono: 232323
</address><hr/>
<p> El siguiente es texto <strong><bdo dir="rtl">invertido</bdo></strong></p>
</body>
</html>
Citas
Para las citas se puede usar las etiquetas: <blockquote> y
</blockquote>, o <q> y </q>
El elemento <blockquote> define una sección que se cita de otra
fuente, los navegadores suelen aplicar sangría a los elementos
<blockquote>
La etiqueta <q> define una cita breve, los navegadores normalmente
insertan comillas alrededor de la cita
Separadores
Para separar bloques de etiquetas HTML se puede usar las etiquetas:
<div> y </div>. El elemento <div> a menudo se usa como
contenedor para otras etiquetas HTML
También, se puede agrupar bloques de texto con <span> y </span>
El elemento<span> es un contenedor en línea que se utiliza para
marcar una parte de un texto o una parte de un documento
EJEMPLO 7
<!DOCTYPE html>
<html>
<head>
<title>Sangrías y separadores</title>
</head>
<body>
<p>Las sangrías se ven así en los navegadores:</p>
<blockquote>
Esta etiqueta en un principio se definió para delimitar citas pero que como la
mayoría de los navegadores resuelven la cita incluyendo un sangrado del texto,
su uso para sangrar texto se ha generalizado
</blockquote><hr/>
</body>
</html>
EJEMPLO 7
<!DOCTYPE html>
<html>
<head>
<title>Sangrías y separadores</title>
</head>
<body>
<p>Las sangrías se ven así en los navegadores:</p>
<blockquote>
Esta etiqueta en un principio se definió para delimitar citas pero que como la
mayoría de los navegadores resuelven la cita incluyendo un sangrado del texto,
su uso para sangrar texto se ha generalizado
</blockquote><hr/>
<q>Esta sangría va entre comillas</q><hr/>
</body>
</html>
EJEMPLO 7
<!DOCTYPE html>
<html>
<head>
<title>Sangrías y separadores</title>
</head>
<body>
<p>Las sangrías se ven así en los navegadores:</p>
<blockquote>
Esta etiqueta en un principio se definió para delimitar citas pero que como la
mayoría de los navegadores resuelven la cita incluyendo un sangrado del texto,
su uso para sangrar texto se ha generalizado
</blockquote><hr/>
<q>Esta sangría va entre comillas</q><hr/>
<div style="background-color:black;color:white;">
<h2>Curso HTML</h2>
<p> Bienvenidos a mi p&aacute;gina </p>
</div>
</body>
</html>
EJEMPLO 7
<!DOCTYPE html>
<html>
<head>
<title>Sangrías y separadores</title>
</head>
<body>
<p>Las sangrías se ven así en los navegadores:</p>
<blockquote>
Esta etiqueta en un principio se definió para delimitar citas pero que como la
mayoría de los navegadores resuelven la cita incluyendo un sangrado del texto,
su uso para sangrar texto se ha generalizado
</blockquote><hr/>
<q>Esta sangría va entre comillas</q><hr/>
<div style="background-color:black;color:white;">
<h2>Curso HTML</h2>
<p> Bienvenidos a mi p&aacute;gina </p>
</div>
<span style="color:blue;">Usando SPAN el testo se ve así</span>
</body>
</html>
Listas
Para una lista desordenada, tipo viñeta, se usa la etiqueta: <ul> y
</ul>, los elementos de la lista se marcarán con pequeños círculos
negros de forma predeterminada, se puede elegir el tipo de viñeta con:
style=“list-style-type:circle;” círculo
style=“list-style-type:disc;” disco
style=“list-style-type:square;” cuadrado
style=“list-style-type:none;” nada
Cada elemento de la lista debe insertarse entre las etiquetas: <li> y
</li>
Listas
Para una lista ordenada, tipo numerada, se usa la etiqueta: <ol> y
</ol>, los elementos de la lista se marcarán con números de forma
predeterminada, se puede elegir el tipo de numeración con:
type=“1” números
type=“A” letras mayúsculas
type=“a” letras minúsculas
type=“I” números romanos en mayúsculas
type=“i” números romanos en minúsculas
Cada elemento de la lista debe insertarse entre las etiquetas: <li> y
</li>
EJEMPLO 8
<!DOCTYPE html>
<html>
<head>
<title>Listas</title>
</head>
<body>
<ol type="I">
<li>Primer Semestre</li>
<li>Segundo Semestre</li>
<li>Tercer Semestre</li>
</ol>
</body>
</html>
EJEMPLO 8
<!DOCTYPE html>
<html>
<head>
<title>Listas</title>
</head>
<body>
<ol type="I">
<li>Primer Semestre</li>
<li>Segundo Semestre</li>
<li>Tercer Semestre</li>
</ol>
<ul style="list-style-type:square;">
<li>INF - 121</li>
<li>LAB - 121</li>
</ul>
</body>
</html>
EJEMPLO 8
<!DOCTYPE html>
<html>
<head>
<title>Listas</title>
</head>
<body>
<ol type="I">
<li>Primer Semestre</li>
<li>Segundo Semestre
<ul style="list-style-type:square;">
<li>INF - 121</li>
<li>LAB - 121</li>
</ul>
</li>
<li>Tercer Semestre</li>
</ol>
</body>
</html>
Listas
Para una lista descriptiva se usa la etiqueta: <dl> y </dl>. El nombre
de cada término se define por la etiqueta <dt> y </dt>, y la
descripción de cada término se define por la etiqueta <dd> y </dd>
EJEMPLO 9
<!DOCTYPE html>
<html>
<head>
<title>Listas Descriptivas</title>
</head>
<body>
<dl>
<dt>INF - 111</dt>
<dd>- Algoritmos y Diagramas de Flujo</dd>
<dt>MAT - 114</dt>
<dd>- Álgebra y otros</dd>
</dl>
</body>
</html>
4 TABLAS
En una tabla se puede observar los siguientes elementos:
Las tablas más sencillas se definen con tres etiquetas:
➢ <table> para crear la tabla, que encierra todas las filas y celdas de
la tabla.
➢ <tr> (del inglés table row) definen cada fila de la tabla y encierran
todas las celdas.
➢ <td> (del inglés table data cell) para crear una celda (a modo de
columna) para cada fila.
La celda de una tabla puede contener todo tipo de elementos HTML: texto,
imágenes, listas, enlaces, otras tablas, entre otros.
Al definir una tabla, se debe pensar en primer lugar en las filas que la
forman y a continuación en las columnas.
El motivo es que HTML procesa primero las filas y por eso las etiquetas
<tr> aparecen antes que las etiquetas <td>.
Una tabla puede tener tantas filas como se desee; solo debe asegurarse de
que la cantidad de celdas sea la misma en cada fila.
EJEMPLO 10
<!DOCTYPE html>
<html>
<head>
<title>Tablas</title>
</head>
<body>
<h2>Listado de cursos</h2>
<table>
<tr>
<td><strong>Curso</strong></td>
<td><strong>Horas</strong></td>
<td><strong>Horario</strong></td>
</tr>
<tr>
<td>CSS</td>
<td>20</td>
<td>16:00 - 20:00</td>
</tr>
<tr>
<td>HTML</td>
<td>20</td>
<td>16:00 - 20:00</td>
</tr>
<tr>
<td>Dreamweaver</td>
<td>60</td>
<td>16:00 - 20:00</td>
</tr>
</table>
</body>
</html>
Encabezado de Columna
Las etiquetas <th> y </th> hacen que el texto de la celda aparezca
centrado y en negrita, por lo que se utiliza para definir los encabezados o
títulos de las columnas o filas.

Título de la Tabla
Es posible establecer un título para la tabla mediante las etiquetas
<caption> y </caption>.
EJEMPLO 11

<!DOCTYPE html>
<html>
<head>
<title>Tablas</title>
</head>
<body>
<table>
<tr>
<th>Sabado</th>
<th>Domingo</th>
</tr>
<tr>
<td>Curso HTML</td>
<td>Curso Dreamweaver</td>
</tr>
<tr>
<td>Curso Frontpage</td>
<td>Curso Flash</td>
</tr>
</table>
</body>
</html>
EJEMPLO 11

<!DOCTYPE html>
<html>
<head>
<title>Tablas</title>
</head>
<body>
<table>
<caption>Horario de Cursos</caption>
<tr>
<th>Sabado</th>
<th>Domingo</th>
</tr>
<tr>
<td>Curso HTML</td>
<td>Curso Dreamweaver</td>
</tr>
<tr>
<td>Curso Frontpage</td>
<td>Curso Flash</td>
</tr>
</table>
</body>
</html>
Combinar Celdas
Las tablas complejas suelen disponer de una estructura irregular que une
varias columnas para formar una columna más ancha o une varias filas
para formar una fila más alta que las demás. Para fusionar filas o
columnas, se utilizan los atributos <rowspan> y <colspan>
respectivamente
EJEMPLO 12

<!DOCTYPE html>
<html>
<head>
<title>Tablas</title>
</head>
<body>
<h2>Fusión de Columnas</h2>
<table>
<tr>
<td colspan="2">A</td>
</tr>
<tr>
<td>B</td>
<td>C</td>
</tr>
</table>
</body>
</html>
EJEMPLO 12

<!DOCTYPE html>
<html>
<head>
<title>Tablas</title>
</head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
<body>
<h2>Fusión de Columnas</h2>
<table>
<tr>
<td colspan="2">A</td>
</tr>
<tr>
<td>B</td>
<td>C</td>
</tr>
</table>
</body>
</html>
EJEMPLO 12
<!DOCTYPE html>
<html>
<head>
<title>Tablas</title>
</head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
<body>
<h2>Fusión de Columnas</h2>
<table>
<tr>
<td colspan="2">A</td>
</tr>
<tr>
<td>B</td>
<td>C</td>
</tr>
</table>
<h2>Fusión de Filas</h2>
<table>
<tr>
<td>A</td>
<td rowspan="2">B</td>
</tr>
<tr>
<td>C</td>
</tr>
</table>
</body>
</html>
Tablas Avanzadas
Las partes que componen las tablas complejas se definen mediante las
etiquetas <thead>, <tbody> y <tfoot>.
➢ <thead> define la cabecera de la tabla
➢ <tfoot> define el pie de la tabla
➢ <tbody> define cada sección de datos de la tabla
Cada tabla puede contener solamente una cabecera y un pie, pero puede
incluir un número ilimitado de secciones. Si se define una cabecera y/o
un pie, las etiquetas <thead> y/o <tfoot> deben colocarse
inmediatamente antes que cualquier etiqueta <tbody>
EJEMPLO 13
<!DOCTYPE html>
<html>
<head>
<title>Tablas</title>
</head>
<body>
<h2>Análisis de ventas</h2>
<table>
<caption>Análisis de ventas anuales</caption>
<thead>
<tr>
<th rowspan="2" scope="col">AÑO</th>
<th colspan="4" scope="col">Expansión de ventas</th>
</tr>
<tr>
<th scope="col">Producto A</th>
<th scope="col">Producto B</th>
<th scope="col">Producto C</th>
<th scope="col">Producto D</th>
</tr>
</thead>
<tfoot>
<tr>
<th rowspan="2" scope="col">AÑO</th>
<th scope="col">Producto A</th>
<th scope="col">Producto B</th>
<th scope="col">Producto C</th>
<th scope="col">Producto D</th>
</tr>
<tr>
<th colspan="4" scope="col">Expansión de ventas</th>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">N-3</th><td>-</td><td>-</td><td>-</td><td>-</td>
</tr>
<tr>
<th scope="row">N-2</th><td>3</td><td>5</td><td>8</td><td>4</td>
</tr>
<tr>
<th scope="row">N-1</th><td>4</td><td>4</td><td>7</td><td>3</td>
</tr>
<tr>
<th scope="row">N</th><td>5</td><td>7</td><td>6</td><td>2</td>
</tr>
</tbody>
</table>
</body>
</html>
EJEMPLO 13

<!DOCTYPE html>
<html>
<head>
<title>Tablas</title>
</head>
<style>
thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
<body>

.. .. ..

</body>
</html>
Tablas Avanzadas
La etiqueta <col> se utiliza para asignar los mismos atributos a varias
columnas de forma simultánea. De esta forma, la etiqueta <col> no
agrupa columnas, sino que sólo asigna atributos comunes a varias
columnas.
La etiqueta <colgroup> se emplea para agrupar de forma estructural
varias columnas de la tabla. La forma habitual de indicar el número de
columnas que abarca la agrupación es utilizar el atributo span, que
establece el número de columnas de cada agrupación.
EJEMPLO 14
<!DOCTYPE html>
<html>
<head>
<title>Tablas Avanzadas</title>
</head>
<body>
<table>
<caption>Análisis de ventas anuales</caption>
<col style="width:30%;" />
<thead>
<tr>
<th scope="col">AÑO</th>
<th scope="col">Producto A</th>
<th scope="col">Producto B</th>
<th scope="col">Producto C</th>
<th scope="col">Producto D</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">N-3</th><td>-</td><td>-</td><td>-</td><td>-</td>
</tr>
<tr>
<th scope="row">N-2</th><td>3</td><td>5</td><td>8</td><td>4</td>
</tr>
<tr>
<th scope="row">N-1</th><td>4</td><td>4</td><td>7</td><td>3</td>
</tr>
<tr>
<th scope="row">N</th><td>5</td><td>7</td><td>6</td><td>2</td>
</tr>
</tbody>
</table>
</body>
</html>
EJEMPLO 14
<!DOCTYPE html>
<html>
<head>
<title>Tablas Avanzadas</title>
</head>
<body>
<table>
<caption>Análisis de ventas anuales</caption>
<colgroup>
<col span="1" style=“background-color:red;" />
<col span="3" style="background-color:blue;" />
</colgroup>
<thead>
<tr>
<th scope="col">AÑO</th>
<th scope="col">Producto A</th>
<th scope="col">Producto B</th>
<th scope="col">Producto C</th>
<th scope="col">Producto D</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">N-3</th><td>-</td><td>-</td><td>-</td><td>-</td>
</tr>
<tr>
<th scope="row">N-2</th><td>3</td><td>5</td><td>8</td><td>4</td>
</tr>
<tr>
<th scope="row">N-1</th><td>4</td><td>4</td><td>7</td><td>3</td>
</tr>
<tr>
<th scope="row">N</th><td>5</td><td>7</td><td>6</td><td>2</td>
</tr>
</tbody>
</table>

</body>
</html>
4 HIPERVÍNCULOS
URL
Una URL (Uniform Resource Locator) es un identificador único de cada
recurso disponible en Internet.
Cada página Web publicada en Internet tiene un nombre
(http://umsa.bo/web/guest), o una dirección IP (200.7.161.56)
La estructura de una URL es:

Puede conseguir la dirección IP de alguna página aquí:


http://www.mon-ip.com/direccion-ip-sitio.php
Hipervínculos, enlaces o hiperenlaces
Los enlaces en HTML se denominan hipervínculos. Se puede hacer clic en
un enlace y saltar a otro documento. Cuando se mueve el mouse sobre
un enlace, la flecha del mouse se convertirá en una pequeña mano.
Para insertar hipervínculos se usa la etiqueta <a>, </a>
Se usa el atributo href para especificar la página a la que se enlaza el
hipervínculo.
De forma predeterminada, los enlaces aparecerán de la siguiente
manera en todos los navegadores:
❏ Un enlace no visitado está subrayado y azul
❏ Un enlace visitado está subrayado y morado
❏ Un enlace activo está subrayado y rojo
EJEMPLO 15
<!DOCTYPE html>
<html>
<head>
<title>Hipervínculos</title>
</head>
<body>
<a href="http://umsa.bo/web/guest" target="_blank">Pulse aquí para abrir
la página de la UMSA</a>
</body>
</html>
Destinos del Enlace
De forma predeterminada, la página vinculada se mostrará en la ventana
actual del navegador. Para cambiar esto, debe especificar otro destino
para el vínculo. Para ello se usa el atributo target, que puede tener los
siguientes valores:
• _blank: Abre el documento vinculado en una ventana o pestaña
nueva del navegador.
• _parent: Abre el documento vinculado en el marco padre.
• _self: Es la opción predeterminada. Abre el documento vinculado en
la misma ventana o pestaña que el vínculo.
• _top: Abre el documento vinculado en la ventana completa del
navegador.
EJEMPLO 16

<!DOCTYPE html>
<html>
<head>
<title>Destino del Enlace</title>
</head>
<body>
<h2>Destinos del Enlace</h2>
<p>En una pestaña nueva</p>
<a href="http://umsa.bo/web/guest" target="_blank">UMSA 1</a>
<p>En la misma pestaña</p>
<a href="http://umsa.bo/web/guest" target="_self">UMSA 2</a>
</body>
</html>
Enlaces absolutos o relativos
Los hipervínculos en HTML pueden ser:
➢ Existen enlaces externos, a páginas en otros sitios.
➢ Existen enlaces internos, a páginas del mismo sitio.
➢ Las URL absolutas incluyen todas sus partes.
➢ Las URL relativas prescinden de algunas partes.
➢ Las URL relativas se construyen a partir de las URL absolutas.
Se recomienda usar URL relativas siempre que sea posible.
Referencias
Referencia absoluta. La referencia está en Internet donde se usa la
descripción completa de la URL.
Referencia relativa al sitio. Conduce a un documento situado dentro del
mismo sitio que el documento actual. Para ello se usa / que indica que es
la carpeta raíz del sitio.
Referencia relativa al documento. Conduce a un documento situado
dentro del mismo sitio que el documento actual, pero partiendo del
directorio donde se encuentra el actual.
Punto de fijación. Conduce a un punto dentro de un documento, ya sea
dentro del actual o de otro diferente.
EJEMPLO 17
Se definen dos páginas (para practicar enlaces externos e internos, además
de las referencias absolutas y relativas) de un mismo Sitio:
Archivo index.htm
<!DOCTYPE html>
<html>
<head>
<title>Página Principal</title>
</head>
<body>
<h2>Enlaces externos</h2>
<a href="http://umsa.bo/web/guest" target="_blank">UMSA</a>
<h2>Enlaces internos relativos al sitio</h2>
<a href="pagina2.htm" target="_blank">PÁGINA 2</a>
</body>
</html>
Archivo pagina2.htm
<!DOCTYPE html>
<html>
<head>
<title>Página 2</title>
</head>
<body>
<h2>Enlaces internos relativos al sitio</h2>
<a href="index.htm" target="_blank">PRINCIPAL</a>
</body>
</html>
Atributos Avanzados
• dowload = “nombre_archivo”. Permite descargar el archivo.
• hreflang = "codigo_idioma". Idioma del recurso enlazado
• media = “consulta_de_medios”. Especifica el dispositivo
para el que está optimizado el vínculo.
• rel = "tipo_de_relacion". Describe la relación del
documento actual con el recurso enlazado.
• type = "tipo_de_contenido". Permite avisar al navegador
sobre el tipo de contenido que se enlaza (imágenes, archivos, etc.)
para que pueda preparase en caso de que no entienda ese contenido.
Puntos de Fijación
Cuando se tienen documentos extensos, divididos en varios apartados,
es preferible poder ir directamente al apartado deseado, en lugar de ir
subiendo o bajando por el documento. Para ello se utilizan las anclas, o
puntos de fijación, muy útiles a la hora de crear marcadores.
Para eso primero creamos el punto de fijación con el atributo id, y luego
creamos el vínculo al punto de fijación creado.
EJEMPLO 18

<!DOCTYPE html>
<html>
<head>
<title>Puntos de Fijación</title>
</head>
<body>
<h1 id="A1">HTML</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="#A3">Ir al final</a>
<h2 id="A2">PRIMER</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="#A3">Ir al final</a>
<h2 id="A3">SEGUNDO</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="#A1">Ir al principio</a>
</body>
</html>
Puede saber más sobre LOREM IPSUM en la siguiente dirección:
https://es.lipsum.com/
Vínculo a Correo Electrónico
Se pueden crear vínculos para enviar correo electrónico a direcciones
predefinidas usando el programa de correo preferido del usuario, para
ello se usa el enlace mailto, en el atributo href.

Vínculo Vacío
Al pulsar sobre un enlace vacío no se abre ninguna página ni archivo,
pero el formato es el mismo que el de cualquier otro enlace. El vínculo
debe ser el símbolo almohadilla #.
EJEMPLO 19

<!DOCTYPE html>
<html>
<head>
<title>Puntos de Fijación</title>
</head>
<body>
<p>Enlace a <b>Correo</b></p>
<a href="mailto:aldo_valdez@hotmail.com">Enviar un correo</a>
<p>Enlace <b>Vacío</b></p>
<a href="#">Vínculo vacío</a>
</body>
</html>
5 IMÁGENES
Las imágenes son los elementos más importantes de una página Web, las
imágenes pueden ser de contenido o de adorno. Las imágenes de contenido
se incluyen directamente en el código HTML, las imágenes de adorno se
definen a partir de hojas de estilo CSS.
Para insertar una imagen se usa la etiqueta <img> y los atributos src y
alt. La etiqueta <img> es vacía, es decir, sólo contiene atributos y no tiene
una etiqueta de cierre.
❏ El atributo src establece la URL de la imagen.
❏ El atributo alt establece un texto alternativo a la imagen, si un usuario
por alguna razón no puede verla.
HTML permite GIF animados
Formatos de imagen comunes

Abreviación Formato de Archivo Extensión


APNG Gráficos de red portátiles animados .apng
GIF Formato de gráficos intercambiable .gif
ICO Icono de Microsoft .ico
JPEG Imagen del grupo conjunto de expertos en fotografía .jpg, .jpeg, .jfif, .pjpeg, .pjp

PNG Gráficos de red portátiles ,png


SVG Gráficas vectoriales escalables .svg
EJEMPLO 20

<!DOCTYPE html>
<html>
<head>
<title>Imágenes</title>
</head>
<body>
<img src="imagenes/illimani_jpg.jpg" alt="ILLIMANI"/>
<img src="imagenes/monoblock_png.png" alt="UMSA"/>
<img src="imagenes/profesor_gif.gif" alt="DOCENTE"/>
</body>
</html>
Tamaño de una Imagen
Se puede modificar el tamaño de una imagen a través de los atributos
width (ancho), y height (alto).
Los valores que pueden tomar estos atributos son medidos en píxeles.
También se puede usar el atributo style.

Imágenes cómo Vínculos


Para ello se incluye la etiqueta <img> dentro de la etiqueta <a>.
EJEMPLO 21

<!DOCTYPE html>
<html>
<head>
<title>Imágenes</title>
</head>
<body>
<img src="imagenes/illimani_jpg.jpg" alt="ILLIMANI"/>
<img src="imagenes/monoblock_png.png" alt="UMSA"/>
<img src="imagenes/profesor_gif.gif" alt="DOCENTE"/>

<img src="imagenes/illimani_jpg.jpg" alt="ILLIMANI" width="500" height="600"/>


<img src="imagenes/illimani_jpg.jpg" alt="ILLIMANI"
style="width:300px;height:400px"/>

<a href=http://umsa.bo/web/guest>
<img src="imagenes/monoblock_png.png" alt="UMSA"/>
</a>
</body>
</html>
Mapas de Imágenes
Un mapa de imágenes permite definir diferentes zonas de clic dentro de
una imagen, donde la etiqueta <img> debe usar el atributo usemap
obligatoriamente.
El usuario puede hacer clic sobre cada una de las zonas definidas y cada
una de ellas puede apuntar a una URL diferente.
Las zonas o regiones que se pueden definir en una imagen se crean
mediante rectángulos, círculos y polígonos.
Para definir estas zonas se utiliza la etiqueta <map> y la etiqueta
<area>
El atributo obligatorio de <map> es name, que identifica al mapa
definido.
Mapas de Imágenes
Los atributos de <area> son los siguientes:
➢ href = "url". URL a la que se accede al hacer clic sobre el área.
➢ alt = “texto alternativo”. Texto alternativo para el área.
➢ download = “nombre de archivo”. Un archivo se descarga
cuando se hace clic en el área.
➢ shape = "default | rect | circle | poly". Indica el
tipo de área que se define (toda la imagen, rectangular, circular o
poligonal).
Mapas de Imágenes
➢ coords = "lista de números". Se trata de una lista de
números separados por comas que representan las coordenadas del
área.
○ rect = X1,Y1,X2,Y2 (coordenadas X1 e Y1 del vértice superior
izquierdo y coordenadas X2 e Y2 del vértice inferior derecho de un
rectángulo).
○ circle = X1,Y1,R (coordenadas X1 e Y1 del centro y radio del
círculo).
○ poly = X1,Y1,X2,Y2,...,XnYn (coordenadas de los vértices
del polígono. Si las últimas coordenadas no son iguales que las
primeras, se cierra automáticamente el polígono uniendo ambos
vértices)
EJEMPLO 22

<!DOCTYPE html>
<html>
<head>
<title>Imágenes</title>
</head>
<body>

<img src="imagenes/figuras.png" alt="FIGURAS"usemap="#zona_mapa"/>

<map name="zona_mapa">
<area shape="rect" coords="350,50,650,200" alt="Rectángulo"
href="https://es.wikipedia.org/wiki/Rect%C3%A1ngulo">
<area shape="circle" coords="200,100,75" alt="Círculo"
href="https://es.wikipedia.org/wiki/C%C3%ADrculo">
</map>

</body>
</html>
La etiqueta <picture>
La etiqueta <picture> en HTML 5, permite mayor flexibilidad cuando se
especifican las fuentes de las imágenes.
La etiqueta <picture> contiene una o más etiquetas <source>, cada
una de las cuales se refiere a diferentes imágenes a través del atributo
srcset. De esta manera, el navegador puede elegir la imagen que mejor
se adapte a la vista y/o dispositivo actual.
La etiqueta <source> tiene diferentes atributos que determinan cuál
imagen es la más adecuada.
El navegador usa la primera etiqueta <source> que coincida con los
valores de los atributos definidos e ignorará cualquier etiqueta <source>
siguiente.
EJEMPLO 23

<!DOCTYPE html>
<html>
<head>
<title>Imágenes con Picture</title>
</head>
<body>

<picture>
<source media="(min-width: 650px)" srcset="imagenes/illimani_jpg.jpg">
<source media="(min-width: 465px)" srcset="imagenes/monoblock_png.png">
<img src="imagenes/profesor_gif.gif" alt="DOCENTE" style="width:auto;">
</picture>

</body>
</html>
Formato SVG
SVG significa Scalable Vector Graphics (Gráficas Vectoriales Escalares).
Además, SVG es una recomendación de la W3C. Algunas ventajas del uso
de SVG sobre otros formatos de imagen como JPEG o GIF son:
• Las imágenes pueden ser creadas y editadas en cualquier editor de
texto
• Las imágenes se pueden buscar, indexar, incluirse en un script, y
comprimirse
• Las imágenes son escalables
• Las imágenes se imprimen siempre en alta calidad en cualquier
resolución
• Los gráficos no pierden su calidad si se aumenta su tamaño
• Es un estándar abierto
Formato SVG
En HTML 5 se puede insertar directamente en las páginas cualquier
elemento SVG. SVG tiene algunas etiquetas de formas predefinidas que
se pueden usar:
• Rectángulo <rect>
• Círculo <circle>
• Elipse <ellipse>
• Línea <line>
• Polígono <polygon>
EJEMPLO 24

<!DOCTYPE html>
<html>
<head>
<title>Imágenes SVG</title>
</head>
<body>

<svg width="400" height="200">


<rect width="200" height="90" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb
(0,0,0)" />
</svg>

</body>
</html>
EJEMPLO 24

<!DOCTYPE html>
<html>
<head>
<title>Imágenes SVG</title>
</head>
<body>

<svg width="400" height="200">


<rect width="200" height="90" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb
(0,0,0)" />
</svg>

<svg height="100" width="100">


<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

</body>
</html>
Favicon
Un favicon es una pequeña imagen que se muestra a la izquierda del
título de la página en la pestaña del navegador
Puede usar cualquier imagen que desee como su favicon. También puede
crear su propio favicon en sitios como: https://www.favicon.cc/
Para utilizar un favicon adicione una etiqueta <link> en la sección del
<head> con se ve en el siguiente ejemplo
EJEMPLO 25

<!DOCTYPE html>
<html>
<head>
<title>Favicon</title>
<link rel="icon" type="image/x-icon" href="/imagenes/favicon.ico">
</head>

<body>
<p>Hola Mundo</p>
</body>
</html>
7 MULTIMEDIA
Los elementos multimedia (audio o vídeo) pueden venir en muchos y
diferentes formatos, puede ser casi cualquier cosa que pueda oír o ver
como ser: sonido, música, vídeos, películas y animaciones.
Los vídeos pueden tener diferentes formatos como: .swf, .wav, .mp3,
.mp4, .mpg, .wmv, .avi. HTML 5 solo soporta archivos: MP4 (.mp4),
WebM (.webm), y OGG (.ogg).
Los audios pueden tener diferentes formatos como: .midi, .rm, .mp3,
.mp4, .wma, .aac, .wav. HTML 5 solo soporta archivos: MP3 (.mp3), WAV
(.wav), y OGG (.ogg)
Vídeo
La etiqueta <video> especifica la manera estándar para incrustar un
vídeo en una página Web, tiene los atributos:
➢ width, height determina el ancho y alto del proyector, si no se
configuran la página puede parpadear mientras se carga el video
➢ controls agrega controles de video, como reproducción, pausa
y volumen
➢ autoplay permite empezar el vídeo automáticamente
La etiqueta <source> especifica formatos alternativos, el navegador
usa el primero que reconoce, y usa los atributos src y type.
EJEMPLO 26

<!DOCTYPE html>
<html>
<head>
<title>Multimedia: Video</title>
</head>
<body>

<video width="320" height="240" controls>


<source src="RockyMP4.mp4" type="video/mp4">
<source src="RockyWEBM.webm" type="video/webm">
El navegador no soporta el formato de vídeo.
</video>

</body>
</html>
Audio
La etiqueta <audio> especifica la manera estándar para insertar un
audio en una página Web, tiene los atributos:
➢ controls agrega controles de audio, como reproducción, pausa
y volumen
➢ autoplay permite empezar el audio automáticamente
La etiqueta <source> especifica formatos alternativos, el navegador
usa el primero que reconoce, y usa los atributos src y type.
EJEMPLO 27

<!DOCTYPE html>
<html>
<head>
<title>Multimedia: Audio</title>
</head>
<body>

<audio controls>
<source src="RockyMP3.mp3" type="audio/mpeg">
El navegador no soporta el formato de audio.
</video>

</body>
</html>
Etiquetas <object> y <embed>
La etiqueta <object> define un objeto incrustado dentro de un
documento HTML
Fue diseñado para insertar plug-ins o complementos (como applets de
Java, lectores de PDF y Flash Players) en páginas web, pero también se
puede usar para incluir HTML en HTML, o incluir imágenes
La etiqueta <embed> también define un objeto incrustado dentro de un
documento HTML.
EJEMPLO 28

<!DOCTYPE html>
<html>
<head>
<title>Multimedia: Plug-ins</title>
</head>
<body>

<object width="100%" height="500px" data="otra_pagina.html"></object>


<object data="toyota.jpeg"></object>

<embed src="toyota.jpeg">
<embed width="100%" height="500px" src="otra_pagina.html">

</body>
</html>
9 MARCOS
Un marco (o frame) es una ventana independiente dentro de la ventana
general del navegador, es decir, un frame se utiliza para mostrar una
página web dentro de una página web.
Un marco en HTML 5 se define usando la etiqueta <iframe>, y se usa
el atributo src para especificar la URL de la página del marco, los
atributos de height y width para especificar el tamaño del
iframe.
Un iframe se puede utilizar como el marco de destino para un enlace,
para ello el atributo de destino del enlace debe referirse al atributo de
nombre del iframe
EJEMPLO 29

<!DOCTYPE html>
<html>
<head>
<title>Marcos</title>
</head>
<body>

<h2>HTML Iframes</h2>
<iframe src="https://aldovaldezalvarado.blogspot.com/"
style="height:200px;width:300px;"></iframe>

</body>
</html>
EJEMPLO 29

<!DOCTYPE html>
<html>
<head>
<title>Marco como Destino de un Enlace</title>
</head>
<body>

<h2>Destino de un Enlace</h2>

<iframe height="300px" width="100%" src="ejemplo25.htm" name="iframe_a"></iframe>


<p><a href="https://aldovaldezalvarado.blogspot.com/" target="iframe_a">Blog de
Aldo Valdez</a></p>

</body>
</html>
10 DISEÑO WEB RESPONSIVO
CON HTML
El Diseño Web Responsivo consiste en utilizar HTML y CSS para cambiar
el tamaño, ocultar, reducir o ampliar automáticamente un sitio web,
para que se vea bien en todos/cualesquiera dispositivos (computadoras
de escritorio, tabletas y teléfonos).
Se usa la etiqueta <meta> para dar instrucciones al navegador sobre
cómo controlar las dimensiones y la escala de cada página.
Las imágenes responsivas, son imágenes que se adaptan bien a cualquier
tamaño de navegador, para ello usamos la propiedad width
establecida al 100. También se puede usar la propiedad max-width.
El tamaño del texto se puede configurar con la unidad "vw", que
significa el "ancho de la ventana gráfica", de esa manera, el tamaño del
texto seguirá el tamaño de la ventana del navegador.
EJEMPLO 30

<!DOCTYPE html>
<html>
<head>
<title>Diseño Responsivo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1 style="font-size:10vw">Diseño Responsivo</h1>
<img src="imagenes/illimani_jpg.jpg" style="width:100%;">
</body>
</html>
EJEMPLO 30

<!DOCTYPE html>
<html>
<head>
<title>Diseño Responsivo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1 style="font-size:10vw">Diseño Responsivo</h1>
<img src="imagenes/illimani_jpg.jpg" style="max-width:100%;height:auto;">
</body>
</html>
11 FORMULARIOS EN HTML
Se utiliza un formulario HTML para recopilar la entrada del usuario. La
entrada del usuario se envía con mayor frecuencia a un servidor para su
procesamiento.
La etiqueta <form> define un formulario que se utiliza para recopilar
información del usuario.
La etiqueta <form> es un contenedor para diferentes tipos de
elementos de entrada, como: campos de texto, casillas de verificación,
botones de opción, botones de envío, entre otros.
Algunos atributos de la etiqueta <form> son:
➢ action: define la acción que se realizará cuando se envíe el
formulario. Por lo general, los datos del formulario se envían a un
archivo en el servidor cuando el usuario hace clic en el botón
Enviar. Si se omite el atributo action, la acción se establece en la
página actual.
➢ target: especifica dónde mostrar la respuesta que se recibe
después de enviar el formulario y puede tener uno de los
siguientes valores:
○ _blank: La respuesta se muestra en una nueva ventana o
pestaña
○ _self: La respuesta se muestra en la ventana actual, que es el
valor por defecto
○ _parent: La respuesta se muestra en el marco principal
○ _top: La respuesta se muestra en el cuerpo completo de la
ventana
○ frame: La respuesta se muestra en un iframe con nombre
➢ method: especifica el método HTTP que se utilizará al enviar los
datos del formulario. Los datos del formulario se pueden enviar
como variables de URL (con method="get") o como
transacción post HTTP (con method="post"). El método HTTP
predeterminado al enviar datos de formulario es GET
➢ autocomplete: especifica si un formulario debe tener
autocompletado activado o desactivado. Cuando la función de
autocompletar está activada, el navegador completa
automáticamente los valores en función de los valores que el
usuario ha ingresado anteriormente.
➢ novalidate: es un atributo booleano. Cuando está presente,
especifica que los datos del formulario (entrada) no deben
validarse cuando se envían.
Etiquetas que se usan en <form>
● La etiqueta <input> permite que se introduzcan datos en el
formulario. <input> se puede mostrar de varias maneras,
dependiendo del atributo type. Algunas pueden ser:
○ <input type = "text">
○ <input type = "password">
○ <input type = "radio">
○ <input type = "checkbox">
○ <input type = "button">
○ <input type = "submit">
○ <input type = "email">
○ <input type = "file">
Etiquetas que se usan en <form>
● La etiqueta <label> define una etiqueta para varios elementos de
formulario
● La etiqueta <select> define una lista desplegable. Los elementos
<option> definen una opción que se puede seleccionar. De forma
predeterminada, se selecciona el primer elemento de la lista
desplegable
● La etiqueta <textarea> define un campo de entrada de varias
líneas (un área de texto). El atributo rows especifica el número
visible de líneas en un área de texto. El atributo cols especifica el
ancho visible de un área de texto
● La etiqueta <button> define un botón en el que se puede hacer clic
EJEMPLO 31
<!DOCTYPE html>
<html>
<head>
<title>Formularios</title>
</head>
<body>
<h2>Registro de Usuarios</h2>
<p>Ingrese los siguientes <strong>datos</strong> para registrarse en nuestro sitio:</p>
<form action="">
Nombre de Usuario:<br>
<input type="text" name="nom_usuario"><br>
Contrase&ntilde;a:<br>
<input type="password" name="psw"><br>
Repita la Contrase&ntilde;a:<br>
<input type="password" name="psw"><br>
<p>Introduzca el <strong>GENERO</strong></p>
<input type="radio" name="genero" value="masculino" checked> Masculino<br>
<input type="radio" name="genero" value="femenino"> Femenino<br>
<input type="radio" name="genero" value="otro"> Otro<br>
<p>Introduzca sus <strong>INTERESES</strong></p>
<input type="checkbox" name="intereses" value="html"> HTML<br>
<input type="checkbox" name="intereses" value="css"> CSS<br>
<input type="checkbox" name="intereses" value="javascript"> JAVASCRIPT<br>
<input type="button" onclick="alert('Esta seguro?')" value="BORRAR"><br><br>
<input type="submit" value="ENVIAR">
</form>
</body>
</html>
EJEMPLO 31
<!DOCTYPE html>
<html>
<head>
<title>Formularios</title>
</head>
<body>
...
<p>Introduzca su <strong>NACIONALIDAD</strong></p>
<select name="Nacionalidad">
<option value="argentino">Argentino</option>
<option value="boliviano">Boliviano</option>
<option value="ecuatoriano">Ecuatoriano</option>
<option value="venezolano">Venezolano</option>
</select><br>
<p>Introduzca por qué quiere <strong>REGISTRARSE</strong> en nuestro sitio</p>
<textarea name="message" rows="10" cols="30">
</textarea><br><br>
<input type="button" onclick="alert('Esta seguro?')" value="BORRAR"><br><br>
<input type="submit" value="ENVIAR">
</form>
</body>
</html>
https://www.linkedin.com/in/msc-aldo-valdez-alvarado-17464820/

https://aldovaldezalvarado.blogspot.com/

https://www.facebook.com/aldoramiro.valdezalvarado

M.Sc. Aldo Ramiro Valdez Alvarado

Licenciado en Informática
Máster en Dirección Estratégica en Tecnologías de la Información
Máster en Business Intelligence y Big Data
Docente Investigador de la Carrera de Informática de la UMSA
Docente de Postgrado en la UMSA y otras Universidades
Conferencista Nacional e Internacional

También podría gustarte