Scribd
Cargar
54 vistas64 páginas

Html5 Parte 1

Cargado por

Yoi Yordan
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
54 vistas64 páginas

Html5 Parte 1

Cargado por

Yoi Yordan
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/ 64

UNIVERSIDAD MAYOR DE SAN ANDRÉS

CARRERA DE INFORMÁTICA

HTML
Preparado como parte de los contenidos de la Asignatura Laboratorio
de Computación

M.SC. ALDO VALDEZ ALVARADO


Índice
1 Introducción
2 Página Web
3 Manejo de Texto
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>
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