Tarea Semana 5

Tarea Semana 5
Jorge Olguín Leiva
Programación HTML I
Instituto IACC
28/07/2018
Se requiere crear una página web que contenga las características de 5 animales mamíferos, según las
siguientes especificaciones para cada uno de ellos:
1. El nombre del animal centrado.
2. Debajo del nombre incruste una fotografía del animal del tipo jpg, alineada a la izquierda de la
página y que no supere las siguientes dimensiones: alto 200 píxeles, ancho 200 píxeles.
3. Luego, inserte texto alineado a ambos márgenes para: nombre científico, hábitat y alimentación.
4. Elimine los márgenes de la página (llévelos a cero).
5. Incorpore un fondo celeste a la página.
Desarrollo
Se da estilo al código HTML mediante CSS incluido en el documento HTML. No se crea
archivo a parte que es lo más indicado. Podría haberse incluido el estilo en cada línea de código
HTML pero esto alargaría este mismo. Se incluye en la pestaña de la página, Favicon.
1- Mediante CSS, se da fondo color celeste (código hexadecimal 3FA7DE) solicitado en
unto 5 y se lleva a cero los márgenes de la página, solicitado en punto 4.
2- Se aplica h4 para el nombre del animal y con CSS se da un Font de 30 pixeles y se alinea
al centro.
3- Se inserta imagen y mediante CSS se da un alto y ancho de 200 pixeles. La alineación de
una imagen por defecto es a la izquierda. Además se usa border-radius para redondear las
esquinas de la imagen.
4- Se inserta el texto como párrafo, pero se le agrega una clase por cada descripción,
comenzando en clase uno para el primer animal y terminado en clase cinco para el último.
Para todo el párrafo “p” mediante CSS se da un ancho a la línea de 49em, justificado y se
da posicionamiento absoluto para que el espacio que ocupaba el texto antes de ser
posicionado, sea reutilizado. Si se da posicionamiento relativo queda un espacio vacío
donde estaba el texto antes de ser posicionado, si se usa posicionamiento fixed no sirve
ya que quedaría la imagen fija. Y se fija mediante la propiedad anterior en 13em

verticalmente. Y mediante las clases incluidas para cada descripción, estas se alinean
horizontalmente hacia debajo de manera que aparezca el texto al lado de si imagen
correspondiente.
Se usa la unidad de medida “em”, este valor se asocia a las medidas anteriores usadas y nos sirve
para crear un modelo de página responsivo.
Se incluye en el texto los caracteres especiales como á, é, í, ó, ú y ñ.

<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>TAREA SEMANA 5</title>}
<!-Con la siguiente línea, se incluye icono en la parte superior izquierda de la pestaña->
<link rel="shortcut icon" type="image/x-icon" href="imagenest/iacc2.ico">
<!-Se aplica el estilo en el mismo document html->
<style type="text/css">
body {
background:#3FA7DE; <!-se aplica color de fondo->
margin:0px; <!-se elimina margenes de la pagina->
}
img{
width:200px; <!-ancho de la imagen de 200px->
height:200px; <!-alto de la imagen de 200px->
border-radius:15px; <!-efecto para redondear las esquinas de la imagen->
}
h4 {
font-size:30px; <!-se usa h4 para el título de cada especie->
text-align:center; <!-se centra el titulo del animal->
}
p{
width:49em; <!-se da un ancho al texto de 49em->
text-align:justify; <!-texto justificado->
position:absolute; <!-se da posición absoluta->
left:13em; <!-posicionado verticalmente en 13em->
}
<!-se crean 5 clases, una por cada descripción (párrafos), posición horizontalmente (top) se
considera 6em para la primera imagen y 10em mas abaja para cada una de las restantes..->
.uno {
top:6em;
}
.dos {
top:26em;
}
.tres {
top:46em;
}
.cuatro {
top:66em;
}
.cinco {
top:86em;
}
</style>
</head>
<body>
<h4>Aguará Guazú</h4>
<img src="imagenest/1.jpg">
<p class="uno"><b>Nombre Científico:</b>
(Chrysocyon brachyurus) Su nombre proviene de las voces en guaraní
Aguará : zorro y Guazú: grande<br>
<b>Habitat:</b>uacute;n otro
cá nido conocido, encontrándose especímenes en Paraguay, Argentina,
Brasil y Bolivia.<br>
<b>Alimentación:</b>
Se alimenta de conejos y pequeños roedores y si bien es inofensivo para
el ser humano y muy tímido, su hábitat se reduce día a día con la
tala
y la quema de bosques con fines agrícolas, además de haber sido cazado
porque se lo asocia con varios mitos y leyendas. Hoy es una especie
protegida en varios de los países donde vive.</p>
<h4>Aye Aye</h4>
<p class="dos"><b>Nombre Científico:</b>
(Daubentonia madagascarensis) Este primate tiene una apariencia
realmente exótica. En una primera instancia y gracias a su largo pero
hirsuto pelaje, se lo clasificó como una ardilla.<br>
<b>Habitat:</b>
Es endémico de Madagascar y su especie está clasificada como “casi
Amenazada”, ya que se estima que solo quedan unos 2500 individuos.<br>
<b>Alimentación:</b>
Tiene há bitos nocturnos y usa el método del pá jaro carpintero para
buscar larvas bajo las cortezas de los á rboles: golpea de forma rítmica
la superficie (es el úúnico mamífero que lo hace). Cuando encuentra
huecos, rasca la corteza e introduce en el agujero su tercer dedo,
largo y provisto de una garra, para hacerse con las larvas. Vive en lo
alto de los á rboles de la zona má s selvá tica y completa su dieta con
insectos, frutos y hojas.</p>
<h4>Cebra Duiker</h4>
<p class="tres"><b>Nombre Científico:</b>
(Cephalophus zebra)<br>
<b>Habitat:</b>
Este antílope de pequeño tamaño vive en Liberia, Guinea, Costa de
marfil y Sierra Leona. Por su pé rdida progresiva de há bitat a causa de
la tala de las selvas guineanas, se considera en estado de
vulnerabilidad.<br>
<b>Alimentació n:</b>
Es un rumiante que come hojas, frutos y hierbas..</p>
<h4>Gerenuk</h4>
<p class="cuatro"><b>Nombre Científico:</b>
(Litocranius walleri) Má s conocida como gacela de Waller o gacela
jirafa.<br>
<b>Habitat:</b>
Este grá cil y tímido animal, vive en la sabana africana.<br>
Se lo puede ver comiendo hojas de los á rboles má s altos, para lo cual
se yergue sobre sus patas traseras y estira su largo cuello, alcanzando
los brotes má s. Vive en manadas y gracias a la amplia dieta y a sus
recursos para conseguir comida, procrea durante todo el año. Tiene las
mismas glá ndulas preorbitales de muchas otras gacelas por las que
segrega una pasta negra con la que marca sus territorios.</p>
<h4>Topo Estrellado</h4>
<p class="cinco"><b>Nombre Cientíífico:</b>
(Condylura cristata)<br>
<b>Habitat:</b>
Vive en la costa nordeste de EEUU.<br>
Posee unos extraños tentá culos nasales altamente sensitivos, con unos
receptores llamados ó rganos de Eimer que compensan su ceguera a la hora
de buscar alimentos. Come pequeños insectos y se cree que es el animal
que má s rá pido devora a sus presas.</p>
</body>
</html>
Bibliografía
- Material entregado
- Videos youtube Curso Basico de CSS - 7. Posicionamiento de cajas (Falcon Master)
- https://www.ecoticias.com/naturaleza/109458/Top-ten-mamiferos-casi-desconocidos

Tarea Semana 5

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Tarea Semana 5

Enviado por

Direitos autorais:

Formatos disponíveis

Tarea Semana 5

Jorge Olguín Leiva

Se da estilo al código HTML mediante CSS incluido en el documento HTML. No se crea

1- Mediante CSS, se da fondo color celeste (código hexadecimal 3FA7DE) solicitado en

unto 5 y se lleva a cero los márgenes de la página, solicitado en punto 4.

3- Se inserta imagen y mediante CSS se da un alto y ancho de 200 pixeles. La alineación de

posicionado, sea reutilizado. Si se da posicionamiento relativo queda un espacio vacío

ya que quedaría la imagen fija. Y se fija mediante la propiedad anterior en 13em

horizontalmente hacia debajo de manera que aparezca el texto al lado de si imagen

para crear un modelo de página responsivo.

Se incluye en el texto los caracteres especiales como á, é, í, ó, ú y ñ.

- Videos youtube Curso Basico de CSS - 7. Posicionamiento de cajas (Falcon Master)

Você também pode gostar