Trabajo Práctico Individual III

Unidad III: Implementación de una página web – aspectos técnicos

TRABAJO COLABORATIVO. (aunque en el titulo diga individual por
razones de migración de nota) EN UN DOCUMENTO DE GOOGLE DRIVE
FORMARÁN PAREJAS PARA LA REALIZACIÓN DEL PRESENTE
TRABAJO. SE REALIZARÁ UNA SOLA ENTREGA EN UN DOCUMENTO
COMPRIMIDO O COMPACTADO (ZIP O RAR) DEPENDIENDO DEL
TAMAÑO DEL ARCHIVO. PARA EL TRABAJO SE CONSIDERARÁN DOS
DOCUMENTOS, UNO DE EXTENSIÓN HTML Y OTRA EN PDF
ESPECIFICANDO LOS ATRIBUTOS PDF UTILIZADOS

Escribir, modificar y cargar texto e IMÁGENES dentro de un archivo HTML en un

navegador específico. Para la carga de imágenes se utilizará haciendo
referencia de la misma (img) y en base 64 (ambas formas). Aplicando formatos
y estilos de manera a que sean ordenados y estéticos en la presentación final.
Se considerará la modificación del documento HTML aplicando CSS

Primeramente aplicamos los estilos que posteriormente utilizaremos:

<style type="text/css">

.textos {
padding-bottom: 20px;
text-align: center;
}

.contenedor {
padding-bottom: 20px;
}

.rojo {
color: red;
font-size: 20px;
font-family: sans-serif;
}

.verde {
color: green;
font-size: 24px;
 font-family: Calibri;
}

.purpura {
color: purple;
font-size: 28px;
font-family: Arial;
}

.negro {
color: black;
font-size: 32px;
font-family: TimesNewRoman;
}

.content {
padding-bottom: 5%;
}

img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}

body {
background-color: white;
}

Luego ingresamos el texto haciendo referencia al estilo previamente cargado que queremos
utilizar en cada uno.

<div class="textos">

<div class="contenedor">
<p1 class="negro"> Este texto es negro y 32px de tama&ntilde;o y en
Times New Roman</p1> <br>
</div>

<div class="contenedor">
<p1 class="purpura"> Este texto es purpura y 28px de tama&ntilde;o y
en Arial </p1> <br>
</div>
 <div class="contenedor">
<p1 class="verde"> Este texto es verde y 24px de tama&ntilde;o y en
Calibri</p1> <br>
</div>

<div class="contenedor">
<p1 class="rojo"> Este texto es rojo y 20px de tama&ntilde;o y en Sans-
serif </p1>
</div>

<div class="contenedor">
<p1 class="negro"><br> Trabajo Grupal realizado por:<br><br></p1>
<p1 class="negro"> JUAN PABLO ALAN GARCIA VACHETTA<br></p1>
<p1 class="negro"> FERNANDO ARTURO ACU&Ntilde;A ALE</p1>
</div>

En esta sección hacemos la carga de las imágenes

<div class="content">

<p style="text-align: center;"> Img </p>

<img src="https://images.unsplash.com/photo-1511447333015-
45b65e60f6d5?ixlib=rb-1.2.1&w=1000&q=80">
<p style="text-align: center;"> Base 64 </p>
<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
</div>

Trabajo practico grupal realizado por:

JUAN PABLO ALAN GARCIA VACHETTA

FERNANDO ARTURO ACUÑA ALE