LS1 PD2

UNIVERSIDAD ISRAEL
CIENCIAS DE LA INGENIERÍA
CARRERA DE SISTEMAS DE INFORMACIÓN
PLATAFORMAS DE DESARROLLO 2
SEMESTRE 2022 B
LABORATORIO S1
TEMA: HTML
PROFESOR: PhD (c). Luis Fernando Aguas Bucheli
QUITO, 2022
Universidad Israel
Ciencias de la Ingeniería
Carrera de Sistemas de Información
1. TEMA: HTML
2. OBJETIVOS:
• Adquirir los conceptos básicos relacionados con HTML

• Reconocer las características de HTML
3. OBJETIVOS DE DESARROLLO SOSTENIBLE:
Indicador 4.7: De aquí a 2030, asegurar que todos los alumnos adquieran los conocimientos
teóricos y prácticos necesarios para promover el desarrollo sostenible, entre otras cosas
mediante la educación para el desarrollo sostenible y los estilos de vida sostenibles, los derechos
humanos, la igualdad de género, la promoción de una cultura de paz y no violencia, la ciudadanía
mundial y la valoración de la diversidad cultural y la contribución de la cultura al desarrollo
sostenible
4. INTRODUCCION:
HTML (Lenguaje de marcado de hipertexto) es el más básico componente de la Web. Define el

significado y la estructura del contenido web. Además de HTML, se utilizan otras tecnologías
generalmente para describir la apariencia/presentación de una página web (CSS) o la
funcionalidad/comportamiento (JavaScript.
"Hipertexto" se refiere a enlaces que conectan páginas web entre sí, ya sea dentro de un único
sitio web o entre sitios web. Los enlaces son un aspecto fundamental de la Web. Al cargar
contenido en Internet y vincularlo a páginas creadas por otras personas, te conviertes en un
participante activo en la «World Wide Web».
5. DESARROLLO:
En cualquier editor de texto, en este caso Notepad ++, haremos los siguiente:
• Confeccionar una página que muestre los nombres de 5 lenguajes de programación

separados por un guión.
<html>
<head>
Universidad Israel
</head>
<body>
PHP - Java - JavaScript - C -
C++ </body>
</html>
• Abrimos el editor:
• Guardamos
Universidad Israel
• Teniendo lo siguiente:
• Teniendo en el navegador:
Universidad Israel
• Confeccionar una página que contenga un título de primer nivel <h1> y luego dos títulos de
nivel <h2>. Definir un párrafo para cada título de segundo nivel.
<html>
<head>
</head>
<body>
<h1>Tipos de datos en MySQL</h1>
<h2>varchar</h2>
<p>
se usa para almacenar cadenas de caracteres. Una cadena es una secuencia de caracteres.
Se coloca
entre comillas (simples): 'Hola'.<br>
El tipo "varchar" define una cadena de longitud variable en la cual determinamos el máximo
de
caracteres. Puede guardar hasta 255 caracteres. Para almacenar cadenas de hasta 30
caracteres,
definimos un campo de tipo varchar(30).
</p>
<h2>int</h2>
<p>
Se usa para guardar valores numéricos enteros, de -2000000000 a 2000000000
aproximadamente. <br> Definimos campos de este tipo cuando queremos representar, por
ejemplo, cantidades.
</p>
</body>
</html>
Universidad Israel
• Guardamos
Universidad Israel
• Confeccionar una página que contenga cuatro anclas, luego definir cuatro hipervínculos que
se enlacen con dichas anclas.
<html>
<head>
</head>
<body>
<h1>Tutorial de MySQL</h1>
<a href="#introduccion">Introducción</a><br>
<a href="#mostrarbasedatos">show databases</a><br>
<a href="#creaciontabla">Creación de una tabla y mostrar sus campos</a><br>
<a href="#cargarregistros">Carga de registros a una tabla y su recuperación</a><br>
Universidad Israel
<a name="introduccion"></a>
<h2>Introducción</h2>
<p>
SQL, Structure Query Language (Lenguaje de Consulta Estructurado) es un lenguaje de
programacion para trabajar con base de datos relacionales como MySQL, Oracle, etc.<br>
MySQL es un interpretador de SQL, es un servidor de base de datos.<br></p>
<a name="mostrarbasedatos"></a>
<h2>show databases</h2>
<p>
Una base de datos es un conjunto de tablas.<br></p>
<a name="creaciontabla"></a>
<h2>Creación de una tabla y mostrar sus
campos</h2> <p>
Una base de datos almacena sus datos en tablas.<br></p>
<a name="cargarregistros"></a>
<h2>Carga de registros a una tabla y su
recuperación</h2> <p>
Usamos "insert into". Especificamos los nombres de los campos entre paréntesis y separados
por
comas y luego los valores para cada campo, también entre paréntesis y separados por
comas.<br>
</p>
</body>
</html>
Universidad Israel
• Guardamos
Universidad Israel
• Implementar una página que enumere una serie de países en una lista ordenada y luego en
cada país disponer una lista de hipervínculos de periódicos de dicho país.
<html>
<head>
</head>
<body>
<ol>
<li>Argentina
<ul>
<li><a href="http://www.lanacion.com.ar">La Nación</a></li>
<li><a href="http://www.clarin.com.ar">Clarín</a></li>
<li><a href="http://www.pagina12.com.ar">Página 12</a></li>
</ul>
</li>
<li>España
<ul>
<li><a href="http://www.elpais.es">El País
Digital</a></li> <li><a
href="http://www.abc.es">ABC</a></li>
<li><a href="http://www.elmundo.es">El Mundo</a></li>
</ul>
</li>
<li>México
<ul>
<li><a href="http://www.jornada.unam.mx">La Jornada</a></li>
<li><a href="http://www.el-universal.com.mx">El Universal</a></li>
</ul>
</li>
</ol>
</body>
Universidad Israel
</html>
• Guardamos
Universidad Israel
Universidad Israel
• Formularios:
Form1.html
<form action="ejemplo.php" method="get">
<p>Nombre: <input type="text" name="nombre" size="40"></p>
<p>Año de nacimiento: <input type="number" name="nacido"
min="1900"></p>
<p>Sexo:
<input type="radio" name="hm" value="h"> Hombre
<input type="radio" name="hm" value="m"> Mujer
</p>
<p>
<input type="submit" value="Enviar">
<input type="reset" value="Borrar">
</p>
</form>
Universidad Israel
Form2. Html
<p>Sexo:
<input type="radio" name="hm" value="h" required> Hombre
<input type="radio" name="hm" value="m"> Mujer
</p>
<p>Edad:
<input type="radio" name="edad" value="menor"> Menor
<input type="radio" name="edad" value="adulto" required> Adulto
</p>
Universidad Israel
Form3.html
<fieldset>
<legend>Datos personales</legend>
<p>Nombre: <input type="text" name="nombre" size="30"></p>
<p>Edad: <input type="number" name="edad"></p>
</fieldset>
<fieldset>
<legend>Cultura general</legend>
<p>Capital de Noruega:
<input type="radio" name="p1" value="1"> Copenhague
<input type="radio" name="p1" value="2"> Helsinki
<input type="radio" name="p1" value="3"> Oslo
Universidad Israel
</p>
<p>Fecha de la Revolución francesa:
<input type="radio" name="p2" value="1"> 1492
</p>
</fieldset>
EJERCICIOS:
Ejercicio 1:
Universidad Israel
A partir del código HTML y CSS que se muestra, añadir los selectores CSS que faltan para
aplicar los estilos deseados.
Cada regla CSS incluye un comentario en el que se explica los elementos a los que debe
aplicarse.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/

xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>Ejercicio de selectores</title>
<style type="text/css">
/* Todos los elementos de la pagina */
{ font: 1em/1.3 Arial, Helvetica, sans-serif; }
/* Todos los parrafos de la pagina */

{ color: #555; }
/* Todos los párrafos contenidos en #primero */

{ color: #336699; }
/* Todos los enlaces la pagina */

{ color: #CC3300; }
/* Los elementos "em" contenidos en #primero */

{ background: #FFFFCC; padding: .1em; }
/* Todos los elementos "em" de clase "especial" en toda la pagina */

{ background: #FFCC99; border: 1px solid #FF9900; padding: .1em; }
/* Elementos "span" contenidos en .normal */
{ font-weight: bold; }
</style>
</head>
<body>
<div id="primero">
<p>Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing elit</a>. Praesent blandit
nibh at felis. Sed nec diam in dolor vestibulum aliquet. Duis ullamcorper, nisi non facilisis moles
tie, <em>lorem sem aliquam nulla</em>, id lacinia velit mi vestibulum enim.</p>
Universidad Israel
</div>
<div class="normal">
<p>Phasellus eu velit sed lorem sodales egestas. Ut feugiat. <span><a href="#">Donec porttito
r</a>, magna eu varius luctus,</span> metus massa tristique massa, in imperdiet est velit vel
magna. Phasellus erat. Duis risus. <a href="#">Maecenas dictum</a>, nibh vitae pellentesque
auctor, tellus velit consectetuer tellus, tempor pretium felis tellus at metus.</p>
<p>Cum sociis natoque <em class="especial">penatibus et magnis</em> dis parturient montes

, nascetur ridiculus mus. Proin aliquam convallis ante. Pellentesque habitant morbi tristique se
nectus et netus et malesuada fames ac turpis egestas. Nunc aliquet. Sed eu metus. Duis justo.<
/p>
<p>Donec facilisis blandit velit. Vestibulum nisi. Proin volutpat, <em class="especial">enim id i
aculis congue</em>, orci justo ultrices tortor, <a href="#">quis lacinia eros libero in eros</a>.
Sed malesuada dui vel quam. Integer at eros.</p>
</div>
</body>
</html>
NOTEPAD++
NAVEGADOR
Universidad Israel
Solución
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
/* Todos los elementos de la pagina */
* { font: 1em/1.3 Arial, Helvetica, sans-serif; }
/* Todos los parrafos de la pagina */

p { color: #555; }
/* Todos los prrafos contenidos en #primero */

#primero p { color: #336699; }
/* Todos los enlaces la pagina */

a { color: #CC3300; }
/* Los elementos "em" contenidos en #primero */

#primero em { background: #FFFFCC; padding: .1em; }
/* Todos los elementos "em" de clase "especial" en toda la pagina */

em.especial { background: #FFCC99; border: 1px solid #FF9900; padding: .1em; }
/* Elementos "span" contenidos en .normal */
Universidad Israel
.normal span { font-weight: bold; }
</style>
</head>
<body>
<div id="primero">
<p>Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing elit</a>. Praesent blandit
nibh at felis. Sed nec diam in dolor vestibulum aliquet. Duis ullamcorper, nisi non facilisis
molestie, <em>lorem sem aliquam nulla</em>, id lacinia velit mi vestibulum enim.</p>
</div>
<div class="normal">
<p>Phasellus eu velit sed lorem sodales egestas. Ut feugiat. <span><a href="#">Donec
porttitor</a>, magna eu varius luctus,</span> metus massa tristique massa, in imperdiet est
velit vel magna. Phasellus erat. Duis risus. <a href="#">Maecenas dictum</a>, nibh vitae
pellentesque auctor, tellus velit consectetuer tellus, tempor pretium felis tellus at metus.</p>
<p>Cum sociis natoque <em class="especial">penatibus et magnis</em> dis parturient
montes, nascetur ridiculus mus. Proin aliquam convallis ante. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas. Nunc aliquet. Sed eu metus.
Duis justo.</p>
<p>Donec facilisis blandit velit. Vestibulum nisi. Proin volutpat, <em class="especial">enim id
iaculis congue</em>, orci justo ultrices tortor, <a href="#">quis lacinia eros libero in eros</a>.
Sed malesuada dui vel quam. Integer at eros.</p>
</div>
</body>
</html>
NOTEPAD++
NAVEGADOR
Universidad Israel
Actividad:
• Haga el ejercicio en Notepad++ y adjunte el resultado
Ejercicio 2:
A partir del código HTML proporcionado, añadir las reglas CSS necesarias para que la página
resultante tenga el mismo aspecto que el de la siguiente imagen:
Universidad Israel
SOLUCIÓN
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
/* No borrar la siguiente regla CSS porque es necesaria para ver los bordes de la tabla */
table, tr, th, td {border:1px solid #000; border-collapse:collapse; padding:5px;}
h1#titulo { color: teal; }
strong { color: red; }

span.destacado { color: orange; }
h2#subtitulo { color: blue; }
span.especial { color: purple; }
a { color: red; }
a em { color: blue; }
Universidad Israel
div#adicional p { color: olive; }

div#adicional span#especial { color: fuchsia; }
div#adicional a { color: green; }
caption { color: blue; }

td { color: green; }
td strong { color: orange; }
th { color: red; }
th.especial { color: orange; }
</style>
</head>
<body>
<h1 id="titulo">Lorem ipsum dolor sit amet</h1>
<p>Nulla pretium. Sed tempus nunc vitae neque. <strong>Suspendisse gravida</strong>,
metus a scelerisque sollicitudin, lacus velit
ultricies nisl, nonummy tempus neque diam quis felis. <span class="destacado">Etiam sagittis
tortor</span> sed arcu sagittis tristique.</p>
<h2 id="subtitulo">Aliquam tincidunt, sem eget volutpat porta</h2>
<p>Vivamus velit dui, placerat vel, feugiat in, ornare et, urna. <a href="#">Aenean turpis
metus, <em>aliquam non</em>, tristique in</a>, pretium varius, sapien. Proin vitae nisi.
Suspendisse <span class="especial">porttitor purus ac elit</span>. Suspendisse eleifend odio
at dui. In in elit sed metus pretium elementum.</p>
<table summary="Descripción de la tabla y su contenido">
<caption>Título de la tabla</caption>
<thead>
<tr>
<th scope="col"></th>
<th scope="col" class="especial">Título columna 1</th>
<th scope="col" class="especial">Título columna 2</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="col"></th>
<th scope="col">Título columna 1</th>
<th scope="col">Título columna 2</th>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row" class="especial">Título fila 1</th>
<td>Donec purus ipsum</td>
<td>Curabitur <em>blandit</em></td>
</tr>
<tr>
<th scope="row">Título fila 2</th>
<td>Donec <strong>purus ipsum</strong></td>
<td>Curabitur blandit</td>
Universidad Israel
</tr>
</tbody>
</table>
<div id="adicional">
<p>Donec purus ipsum, posuere id, venenatis at, <span>placerat ac, lorem</span>. Curabitur
blandit, eros sed gravida aliquet, risus justo
porta lorem, ut mollis lectus tortor in orci. Pellentesque nec augue.</p>
<p>Fusce nec felis eu diam pretium adipiscing. <span id="especial">Nunc elit elit, vehicula
vulputate</span>, venenatis in,
posuere id, lorem. Etiam sagittis, tellus in ultrices accumsan, diam nisi feugiat ante, eu congue
magna mi non nisl.</p>
<p>Vivamus ultrices aliquet augue. <a href="#">Donec arcu pede, pretium vitae</a>, rutrum
aliquet, tincidunt blandit, pede.
Aliquam in nisi. Suspendisse volutpat. Nulla facilisi. Ut ullamcorper nisi quis mi.</p>
</div>
</body>
</html>
NOTEPAD++
NAVEGADOR
Universidad Israel
Actividad:
Ejercicio 3
A partir de la página web que se te proporciona, debes escribir las reglas CSS necesarias para
lograr una página web que tenga el mismo aspecto que la siguiente imagen:
Captura de pantalla del ejercicio
Universidad Israel
Las características del diseño de esta página son:
• Un diseño fijo centrado con un ancho de 960 px.

• El encabezado de nivel 1 centrado.
• El contenido principal de la página se organiza en dos columnas, una de 260 px de ancho y
la otra el espacio restante de 700 px.
• La lista que explica el contenido del libro se muestra como un texto a tres columnas del
mismo ancho.
• Puedes modificar el código HTML proporcionado para añadir los identificadores y clases
que necesites. También puedes añadir etiquetas <div> para definir elementos
contenedores en la página.
Código base
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML & CSS: Curso práctico avanzado</title>
</head>
<body>
<h1>HTML & CSS: Curso práctico avanzado</h1>
<h2>Datos del libro</h2>
<ul>
<li>Título: HTML & CSS: Curso práctico avanzado</li>
<li>Autor: Sergio Luján Mora</li>
<li>Editorial: Publicaciones Altaria</li>
<li>Año de publicación: 2015</li>
<li>ISBN: 978-84-944049-4-8</li>
</ul>
Universidad Israel
<h2>Descripción del libro</h2>
<p>
Aunque los inicios de Internet se remontan a los años sesenta,

no ha sido hasta los años noventa cuando, gracias a la Web, se
ha extendido su uso por todo el mundo. En pocos años, la Web ha
evolucionado enormemente: se ha pasado de páginas sencillas, con
pocas imágenes y contenidos estáticos que eran visitadas por
unos pocos usuarios a páginas complejas, con contenidos
dinámicos que provienen de bases de datos y que son visitadas
por miles de usuarios al mismo tiempo.
</p>
<p>
Todas las páginas están internamente construidas con la misma

tecnología, con el Lenguaje de marcas de hipertexto (Hypertext
Markup Language, HTML) y con las Hojas de estilo en cascada
(Cascading Style Sheets, CSS).
</p>
<p>
Este libro es adecuado para cualquiera que tenga interés en

aprender a desarrollar sus propias páginas web. No son
necesarios conocimientos previos para aprender con este libro,
lo único que es necesario es saber utilizar un ordenador y saber
navegar por la Web.
</p>
<h2>Contenido del libro</h2>
<p>
Universidad Israel
El contenido de este libro se estructura en tres apartados bien

diferenciados:
</p>
<ul>
<li>En la primera parte del libro se trabajan conceptos

generales que son necesarios para poder desarrollar páginas web;
se explican conceptos de estructura física y estructura lógica
(o estructura de navegación) de un sitio web. Se detalla cómo
influye la estructura física en las URL o direcciones que se
emplean a la hora de crear los enlaces de un sitio web. Pasando
por el concepto de "estándar web", un término general que se
emplea para refererirse a los estándares que define su
funcionamiento como HTML y CSS, empleados para el desarrollo de
las páginas web en el lado del cliente.</li>
<li>En la segunda parte se trabaja HTML. Partiendo de la

estructura básica de una página web, se explican las etiquetas
de HTML que se utilizan para definir el texto, los enlaces, las
listas, las tablas, los formularios y los elementos
multimedia.</li>
<li>En la tercera y última parte se explica CSS, el lenguaje que

se emplea para definir el formato y la presentación de una
página web. Se explica cómo utilizar el color, cómo definir la
presentación del texto, de las tablas y de los formularios; cómo
realizar transformaciones y transiciones con el fin de diseñar
una página web.</li>
</ul>
</body>
</html>
Solución:
<!DOCTYPE html>
<html>
<head>
Universidad Israel
<title>HTML & CSS: Curso práctico avanzado</title>
<style>
body {
width: 960px;
margin: 0 auto;
h1 {
text-align: center;
#datos, #principal {
float: left;
padding: 0;
margin: 0;
#datos {
width: 260px;
#principal {
width: 700px;
#contenido {
Universidad Israel
list-style-type: none;
padding: 0;
#contenido li {
float: left;
width: 33%;
</style>
</head>
<body>
<h1>HTML & CSS: Curso práctico avanzado</h1>
<div id="datos">
<h2>Datos del libro</h2>
<ul>
<li>Título: HTML & CSS: Curso práctico avanzado</li>
<li>Autor: Sergio Luján Mora</li>
<li>Editorial: Publicaciones Altaria</li>
<li>Año de publicación: 2015</li>
<li>ISBN: 978-84-944049-4-8</li>
</ul>
</div>
<div id="principal">
<h2>Descripción del libro</h2>
Universidad Israel
<p>
Aunque los inicios de Internet se remontan a los años sesenta,

no ha sido hasta los años noventa cuando, gracias a la Web, se
ha extendido su uso por todo el mundo. En pocos años, la Web ha
evolucionado enormemente: se ha pasado de páginas sencillas, con
pocas imágenes y contenidos estáticos que eran visitadas por
unos pocos usuarios a páginas complejas, con contenidos
dinámicos que provienen de bases de datos y que son visitadas
por miles de usuarios al mismo tiempo.
</p>
<p>
Todas las páginas están internamente construidas con la misma

tecnología, con el Lenguaje de marcas de hipertexto (Hypertext
Markup Language, HTML) y con las Hojas de estilo en cascada
(Cascading Style Sheets, CSS).
</p>
<p>
Este libro es adecuado para cualquiera que tenga interés en

aprender a desarrollar sus propias páginas web. No son
necesarios conocimientos previos para aprender con este libro,
lo único que es necesario es saber utilizar un ordenador y saber
navegar por la Web.
</p>
<h2>Contenido del libro</h2>
<p>
El contenido de este libro se estructura en tres apartados bien

diferenciados:
</p>
Universidad Israel
<ul id="contenido">
<li>En la primera parte del libro se trabajan conceptos

generales que son necesarios para poder desarrollar páginas web;
se explican conceptos de estructura física y estructura lógica
(o estructura de navegación) de un sitio web. Se detalla cómo
influye la estructura física en las URL o direcciones que se
emplean a la hora de crear los enlaces de un sitio web. Pasando
por el concepto de "estándar web", un término general que se
emplea para refererirse a los estándares que define su
funcionamiento como HTML y CSS, empleados para el desarrollo de
las páginas web en el lado del cliente.</li>
<li>En la segunda parte se trabaja HTML. Partiendo de la

estructura básica de una página web, se explican las etiquetas
de HTML que se utilizan para definir el texto, los enlaces, las
listas, las tablas, los formularios y los elementos
multimedia.</li>
<li>En la tercera y última parte se explica CSS, el lenguaje que

se emplea para definir el formato y la presentación de una
página web. Se explica cómo utilizar el color, cómo definir la
presentación del texto, de las tablas y de los formularios; cómo
realizar transformaciones y transiciones con el fin de diseñar
una página web.</li>
</ul>
</div>
</body>
</html>
Actividad:
Ejercicio 4
Universidad Israel
A partir de la página web que se te proporciona, debes escribir las reglas CSS necesarias para
lograr una página web que tenga el mismo aspecto que la siguiente imagen en la que se muestra
la página web visualizada en tres dispositivos con diferentes resoluciones de pantalla:
Esta página posee un diseño adaptable con tres puntos de ruptura:
• Hasta 600 px: un diseño a una columna.

• A partir de 600 px y hasta 1200 px: un diseño a dos columnas.
• A partir de 1200 px: un diseño a tres columnas.
• Fíjate bien en las capturas de pantalla e intenta lograr el mismo resultado.
Puedes modificar el código HTML proporcionado para añadir los identificadores y clases que
necesites. También puedes añadir etiquetas <div> para definir elementos contenedores en la
página.
Código Base
<!DOCTYPE html>
<html>
<head>
Universidad Israel
<title>Curriculum Vitae de Bruce Wayne</title>
</head>
<body>
<h1>Curriculum Vitae de Bruce Wayne</h1>
<h2>Datos personales</h2>
<ul>
<li>Nombre completo: <strong>Bruce Wayne</strong></li>
<li>Fecha de nacimiento: <strong>1/5/1939</strong></li>
<li>Lugar de nacimiento: <strong>Gotham City</strong></li>
</ul>
<h2>Formación académica</h2>
<ul>
<li>1956-1961: <strong>Universidad del

Espantapájaros</strong></li>
<li>1952-1956: <strong>Instituto de Dos Caras</strong></li>
<li>1944-1952: <strong>Escuela Primaria del Joker</strong></li>
</ul>
<h2>Experiencia laboral</h2>
<ul>
<li>1975-1985: <strong>En el paro</strong></li>
<li>1965-1975: <strong>Cazavillanos y demás chusma</strong></li>
<li>1962-1965: <strong>Aprendiz de superhéroe</strong></li>
Universidad Israel
</ul>
</body>
</html>
Solución
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-

scale=1.0" />
<title>Curriculum Vitae de Bruce Wayne</title>
<style>
#formacion li, #experiencia li {
color: #00F;
#formacion li strong, #experiencia li strong {
color: #000;
@media (min-width: 1201px) {
#datos {
float: left;
width: 30%;
Universidad Israel
#curriculo {
float: left;
width: 70%;
#formacion {
float: left;
width: 50%;
#experiencia {
float: left;
width: 50%;
@media (min-width: 601px) and (max-width: 1200px) {
body {
font-family: Arial,sans-serif;
#datos {
float: left;
width: 30%;
Universidad Israel
#curriculo {
float: left;
width: 70%;
#datos ul {
padding: 0;
#datos li + li {
margin-top: 10px;
#datos li strong {
display: block;
@media (max-width: 600px) {
body {
font-family: Arial,sans-serif;
h1 {
Universidad Israel
font-size: 1.5em;
h2 {
font-size: 1.2em;
border-bottom: 1px solid #000;
ul {
padding: 0;
li + li {
margin-top: 10px;
li strong {
display: block;
</style>
</head>
<body>
<h1>Curriculum Vitae de Bruce Wayne</h1>
Universidad Israel
<div id="datos">
<h2>Datos personales</h2>
<ul>
<li>Nombre completo: <strong>Bruce Wayne</strong></li>
<li>Fecha de nacimiento: <strong>1/5/1939</strong></li>
<li>Lugar de nacimiento: <strong>Gotham City</strong></li>
</ul>
</div>
<div id="curriculo">
<div id="formacion">
<h2>Formación académica</h2>
<ul>
<li>1956-1961: <strong>Universidad del

Espantapájaros</strong></li>
<li>1952-1956: <strong>Instituto de Dos Caras</strong></li>
<li>1944-1952: <strong>Escuela Primaria del Joker</strong></li>
</ul>
</div>
<div id="experiencia">
<h2>Experiencia laboral</h2>
<ul>
<li>1975-1985: <strong>En el paro</strong></li>
<li>1965-1975: <strong>Cazavillanos y demás chusma</strong></li>
<li>1962-1965: <strong>Aprendiz de superhéroe</strong></li>
</ul>
Universidad Israel
</div>
</div>
</body>
</html>
Actividad:
6. BIBLIOGRAFIA:

LS1 PD2

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

LS1 PD2

Transféré par

Droits d'auteur :

Formats disponibles

UNIVERSIDAD ISRAEL

CARRERA DE SISTEMAS DE INFORMACIÓN

PROFESOR: PhD (c). Luis Fernando Aguas Bucheli

• Adquirir los conceptos básicos relacionados con HTML

3. OBJETIVOS DE DESARROLLO SOSTENIBLE:

HTML (Lenguaje de marcado de hipertexto) es el más básico componente de la Web. Define el

• Confeccionar una página que muestre los nombres de 5 lenguajes de programación

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/

/* Todos los parrafos de la pagina */

/* Todos los párrafos contenidos en #primero */

/* Todos los enlaces la pagina */

/* Los elementos "em" contenidos en #primero */

/* Todos los elementos "em" de clase "especial" en toda la pagina */

/* Elementos "span" contenidos en .normal */

<p>Cum sociis natoque <em class="especial">penatibus et magnis</em> dis parturient montes

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

/* Todos los parrafos de la pagina */

/* Todos los prrafos contenidos en #primero */

/* Todos los enlaces la pagina */

/* Los elementos "em" contenidos en #primero */

/* Todos los elementos "em" de clase "especial" en toda la pagina */

/* Elementos "span" contenidos en .normal */

.normal span { font-weight: bold; }

• Haga el ejercicio en Notepad++ y adjunte el resultado

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

h1#titulo { color: teal; }

strong { color: red; }

h2#subtitulo { color: blue; }

span.especial { color: purple; }

div#adicional p { color: olive; }

caption { color: blue; }

• Haga el ejercicio en Notepad++ y adjunte el resultado

Captura de pantalla del ejercicio

Las características del diseño de esta página son:

• Un diseño fijo centrado con un ancho de 960 px.

<meta charset="utf-8" />

<title>HTML &amp; CSS: Curso práctico avanzado</title>

<h1>HTML &amp; CSS: Curso práctico avanzado</h1>

<h2>Datos del libro</h2>

<li>Título: HTML &amp; CSS: Curso práctico avanzado</li>

<li>Autor: Sergio Luján Mora</li>

<li>Editorial: Publicaciones Altaria</li>

<li>Año de publicación: 2015</li>

<h2>Descripción del libro</h2>

Aunque los inicios de Internet se remontan a los años sesenta,

Todas las páginas están internamente construidas con la misma

Este libro es adecuado para cualquiera que tenga interés en

<h2>Contenido del libro</h2>

El contenido de este libro se estructura en tres apartados bien

<li>En la primera parte del libro se trabajan conceptos

<li>En la segunda parte se trabaja HTML. Partiendo de la

<li>En la tercera y última parte se explica CSS, el lenguaje que

<meta charset="utf-8" />

<title>HTML &amp; CSS: Curso práctico avanzado</title>

<h1>HTML &amp; CSS: Curso práctico avanzado</h1>

<h2>Datos del libro</h2>

<li>Título: HTML &amp; CSS: Curso práctico avanzado</li>

<li>Autor: Sergio Luján Mora</li>

<li>Editorial: Publicaciones Altaria</li>

<li>Año de publicación: 2015</li>

<h2>Descripción del libro</h2>

Aunque los inicios de Internet se remontan a los años sesenta,

Todas las páginas están internamente construidas con la misma

<title>HTML & CSS: Curso práctico avanzado</title>

<h1>HTML & CSS: Curso práctico avanzado</h1>

<li>Título: HTML & CSS: Curso práctico avanzado</li>

<title>HTML & CSS: Curso práctico avanzado</title>

<h1>HTML & CSS: Curso práctico avanzado</h1>

<li>Título: HTML & CSS: Curso práctico avanzado</li>