Evidencia de Producto Nro2

Evidencia de producto Nro.
2
Materia “Introducción a la programación
Estudiantes
Andres Cano Rave
Alejandro Quiroz
1. Diseñar una página web que tenga la estructura de un periódico virtual,

tenga en cuenta que, para el desarrollo de la misma, deben seguir las
siguientes instrucciones:
a. 2 Documentos HTML enlazados por href
DOC 1 HTML = index.html

<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Periodico digital</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/1d937f8355.js"
crossorigin="anonymous"></script>
</head>
<body>
<header>
<div class="top-buttons">
<i class="fa-solid fa-bars"></i>
<i class="fa-solid fa-search"></i>
<nav>
<ul>
<li><a href="https://www.teleantioquia.co/noticias/">Últimas
noticias Antioquia</a></li>
<li><a href="https://www.medellin.gov.co/">Medellin</a></li>
<li><a href="https://www.envigado.gov.co/">Envigado</a></li>
<li><a href="https://www.itagui.gov.co/">Itagüí</a></li>
<li><a href="https://www.sabaneta.gov.co/">Sabaneta</a></li>
<li><a href="https://www.laestrella.gov.co/">La
Estrella</a></li>
<li><a
href="https://www.alertapaisa.com/">Entretenimiento</a></li>
<li><a
href="https://indeportesantioquia.gov.co/">Deportes</a></li>
</ul>
</nav>
</div>
<div class="container">
<div class="logo">
<a href="siguenos.html">
<img src="img/logo.png" alt="logo_noticias" >
</a>
</div>
<div class="middle-buttons">
<ul>
<li><a href="">Económico</a></li>
<li><a href="">Cultural</a></li>
<li><a href="">Político</a></li>
<li><a href="">Social</a></li>
</ul>
</div>
<div class="today-date">
<div class="line"></div>
<div class="date">Martes 25 de octubre de 2022</div>
</div>
<div class="bottom-buttons">
<ul>
<li><a href="#">Liga Colombiana</a></li>
<li><a href="#">Moda</a></li>
<li><a href="#">Tendencia</a></li>
<li><a href="#">Modo mundial Quatar</a></li>
<li><a href="#">Comida paisa</a></li>
<li><a href="#">Pueblito Paisa</a></li>
</ul>
</div>
</div>
</header>
<section id="news-feed" class="container" >
<div class="news-block">
<div class="left-block">
<article>
<h1>Por acosar a una mujer: la historia de la fiesta en
Puerto Colombia que terminó en una balacera con dos muertos</h1>
<p>Jonathan José Ospino Illera quería celebrar su
cumpleaños número 21 con una fiesta inolvidable. La rumba comenzó el domingo
con unos 30 jóvenes alegres, grupos vallenatos, botellas de wisky que
pasaban de mano en mano, comida en cantidad y fantásticos regalos,
incluyendo dos carros de alta gama, y terminó el lunes con Jonathan muerto
en el piso de una camioneta en la entrada a Barranquilla con seis balas en
su cuerpo.</p>
<figure>
<img src="img/new1.jpg" alt="Imagen joven asesinado">
<figcaption>
Por Andres Cano y Alejo Quiroz
</figcaption>
</figure>
</article>
</div>
<div class="right-block">
<article>
<h2>Antioquia es Mágica en Parques del Río</h2>
<p>Inició el viaje por los 125 municipios de Antioquia. La
alegría, la diversión y el conocimiento se viven hasta mañana con un gran
abanico de opciones que los hará disfrutar de toda la magia de nuestro
departamento.</p>
<figure>
<iframe src="https://www.youtube.com/embed/3dFn-qL_EFw"
title="´Antioquia es Mágica´ en Parques del Río - Teleantioquia Noticias"
frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-
media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<figcaption>
</figcaption>
</figure>
</article>
<article>
<h2>Atlético Nacional visita al América de Cali</h2>
<p>Esta noche Atlético Nacional enfrentará al América de
Cali, en el clásico de la fecha 15. Estas son las novedades del verde
paisa.</p>
<figure>
<iframe src="https://www.youtube.com/embed/jVTAsFI5qyw"
title="Atlético Nacional visita al América de Cali - Teleantioquia Noticias"
frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-
media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<figcaption>
</figcaption>
</figure>
</article>
</div>
</div>
</section>
<footer>
<div class="topbar">
<img src="img/logo.png" alt="logo_noticias">
<div class="social-network">
<a href=""><i class="fa-brands fa-facebook"></i></a>
<a href=""><i class="fa-brands fa-twitter"></i></a>
<a href=""><i class="fa-brands fa-instagram"></i></a>
<a href=""><i class="fa-brands fa-youtube"></i></a>
</div>
</div>
<div class="copyright">
<h3>Todos los derechos reservados</h3>
</div>
</footer>
</body>
</html>
DOC 2 HTML = siguenos.html
<html lang="en">
<head>
<title>Periodico digital</title>
<script src="https://kit.fontawesome.com/1d937f8355.js"
crossorigin="anonymous"></script>
</head>
<body>
<header>
<div class="top-buttons">
<i class="fa-solid fa-bars"></i>
<i class="fa-solid fa-search"></i>
<nav>
<ul>
<li><a href="https://www.teleantioquia.co/noticias/">Últimas
noticias Antioquia</a></li>
<li><a href="https://www.medellin.gov.co/">Medellin</a></li>
<li><a href="https://www.envigado.gov.co/">Envigado</a></li>
<li><a href="https://www.itagui.gov.co/">Itagüí</a></li>
<li><a href="https://www.sabaneta.gov.co/">Sabaneta</a></li>
<li><a href="https://www.laestrella.gov.co/">La
Estrella</a></li>
<li><a
href="https://www.alertapaisa.com/">Entretenimiento</a></li>
<li><a
href="https://indeportesantioquia.gov.co/">Deportes</a></li>
</ul>
</nav>
</div>
<div class="container">
<div class="logo">
</div>
<div class="middle-buttons">
<ul>
<li><a href="">Económico</a></li>
<li><a href="">Cultural</a></li>
<li><a href="">Político</a></li>
<li><a href="">Social</a></li>
</ul>
</div>
<div class="today-date">
<div class="date">Martes 25 de octubre de 2022</div>
</div>
<div class="bottom-buttons">
<ul>
<li><a href="#">Liga Colombiana</a></li>
<li><a href="#">Moda</a></li>
<li><a href="#">Tendencia</a></li>
<li><a href="#">Modo mundial Quatar</a></li>
<li><a href="#">Comida paisa</a></li>
<li><a href="#">Pueblito Paisa</a></li>
</ul>
</div>
</div>
</header>
<section id="news-feed" class="container" >
<div class="news-block">
<div class="center-block">
<article>
<h1>Nueva red de noticias digitales en Antioquia creada
por estudiantes innovadores del centro especializado cesde</h1>
<p>Los estudiantes Andres Cano y Alejandro Quiroz
estudiantes del programa desarrollo de seofware del centro especailizado
CESDE son los fundadores del periodico digital NEWS.</p>
<figure>
<img src="img/estudiantes.jpg" alt="Imagen estudiantes
cesde">
<figcaption>
</figcaption>
</figure>
</div>
</div>
</section>
<footer>
<div class="topbar">
<div class="social-network">
<a href=""><i class="fa-brands fa-facebook"></i></a>
<a href=""><i class="fa-brands fa-twitter"></i></a>
<a href=""><i class="fa-brands fa-instagram"></i></a>
<a href=""><i class="fa-brands fa-youtube"></i></a>
</div>
</div>
<div class="copyright">
<h3>Todos los derechos reservados</h3>
</div>
</footer>
</body>
</html>
b. Una hoja de estilos CSS para los 2 documentos
@font-face{
font-family: Raleway;
src: url(./fonts/Raleway-Regular.ttf);
}
@font-face{
font-family: Raleway-Bold;
src: url(./fonts/Raleway-Bold.ttf);
}
@font-face{
font-family: Raleway-italic;
src: url(./fonts/Raleway-Italic.ttf);
}
/*header*/
.container{
width: 1124px;
margin-right: auto;
margin-left: auto;
}
header .top-buttons{
display: flex;
flex-direction: row;
width:100%;
height: 55px;
background-color:white;
border-bottom: 1px solid rgb(220, 228, 228);
position:fixed;
left: 0%;
top: 0%;
header .top-buttons nav ul{

display: block;
width: 100%;
height: 100%;
margin: auto;
overflow: hidden;
header .top-buttons nav ul li{

display: flex;
float: left;
align-items: center;
justify-content: center;
width: auto;
height: 100%;
margin: 0px 10px;
header .top-buttons nav ul li a{

color: black;
text-decoration: none;
padding: 100% 10px;
font-size: 15px;
font-weight: bold;
font-family: Raleway-Bold, sans-serif
nav ul a:hover{
background-color: lightblue;
transform-style: flat;
transition: all 1s ease-in-out;
}
header .top-buttons i{
font-size: 20px;
margin: 0 18px;
align-self: center;
}
header .logo{
display: flex;
justify-content:center;
align-items: flex-end;
width: 100%;
height:330px ;
header .logo img{

width: 250px;
}
header .middle-buttons{
width: 100%;
height: 45px;
display: flex;
background-color: rgb(196, 196, 209);
header .middle-buttons ul{

display: flex;
list-style-type:none ;
header .middle-buttons ul li{

margin: 0 5px
header .middle-buttons ul li a{
text-transform: uppercase;
color: black;
font-family: Raleway-bold, sans-serif;
font-size: 15px;
}
header .today-date{
display: flex;
justify-content:center;
}
header .today-date .line{

width: 100%;
border-bottom: 1px solid grey;
header .today-date .date{

flex-shrink: 0;
font-family:Raleway-italic, sans-serif;
font-size:14px;
margin: 0 10px;
}
header .bottom-buttons{
display: flex;
justify-content:flex-start;
height: 40px;
color: grey;
border-bottom: 1px solid lightgrey;
header .bottom-buttons ul{

padding:0px ;
display: flex;
list-style-type: none;
header .bottom-buttons ul li{

margin-right: 30px;
}
header .bottom-buttons ul li a{
font-family: Raleway;
color: grey;
font-size: 16px;
/*NEWS FEED*/
#news-feed .news-block{
display: flex;
width: 100%;
}
#news-feed .news-block .left-block{

width: 64%;
padding-right: 1%;
}
#news-feed .news-block .right-block{

width: 34%;
padding-left: 1%;
#new-feed article{
display: flex;
flex-direction: column;
}
#new-feed .news-block .left-block{

height: 100%;
#new-feed .news-block .right-block{

height: 50%;
}
#news-feed h1{
font-size: 36px;
font-family: sans-serif;
}
#news-feed h2{
font-size: 25px;
padding-top: 5px;
}
#news-feed p{
font-size: 15px;
}
#news-feed figure{
position: relative;
margin: 0;
margin-bottom: 30px;
#news-feed figure:hover figcaption{

background-color: black;
}
#news-feed figure img{

width: 100%;
padding-bottom: 5px;
#news-feed figure figcaption{

width: auto;
padding: 10px;
border-radius: 5px;
font-size: 12px;
font-family: Raleway-blond, sans-serif;
font-weight: bold;
background: rgba(10, 12, 12, 0.6);
color: white;
position: absolute;
bottom: 20px;
left: 15;
}
#news-feed figure iframe{

width: 100%;
height: 24%;
padding-bottom: 5px;
/**FOOTER**/
footer{
display: flex;
flex-direction: column;
min-width: 1124px;
width: 100%;
background-color: rgb(245, 245, 245);
height: 200px;
footer .topbar{
position: relative;
display: flex;
width: 100%;
height: 65px;
footer .topbar img{

width: 70px;
footer .topbar .social-network{

position: absolute;
left:25px;
top:18px
}
footer .topbar .social-network i{

color:rgb(95, 95, 114);
margin-right: 10px;
font-size: 22px;
}
footer .copyright{
display: flex;
width: 100%;
height:200px;
font-family: Raleway, sans-serif;
font-size: 12px;
#news-feed .news-block .center-block{

width: 100%;
}
c. aplicación en ejecución.
Doc 1. Index.html
Cuadro 1
Cuadro 2
Cuadro 3
Cuadro 4
Doc 2. siguenos.html
Cuadro 1
Cuadro 2
Cuadro 3
2. Crear un documento a manera de tutorial en donde expliques PASO A

PASO como crear un
HTML con una página sencilla enlazada con un documento CSS, el tutorial
debe cumplir con
los siguientes criterios:
 Etiqueta de Párrafo en HTML
 2 etiquetas con clases
 1 etiqueta con ID
 CSS externo
 Una lista
 Una tabla
 Un formulario
 Una imagen
 Estilos de clase
 Estilos de ID
 Estilos universales
Instrucciones del paso a paso para el desarrollo de una página web
Título de la página web: “Balón de oro mejor jugador 2022 Karim Benzema”
1. El documento de la página web se va a realizar con el editor de texto visual

studio code.
2. Vamos a crear una carpeta en nuestro disco c: con el nombre Tutorial.
3. Luego abrimos nuestro editor de texto y enlazamos nuestra carpeta dando
clic en File-Open folder y por último buscamos la carpeta en la ubicación
disco c: y le damos clic en seleccionar carpeta.
4. Dentro de nuestra carpeta tutorial creamos un archivo con el nombre
index.html y dentro de este le damos el símbolo ! el cual nos traerá el
contenido de reconocimiento de nuestra página web y se ve de la siguiente
manera:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
</body>
</html>
5. El paso siguiente es ir a la la etiqueta <title> cambiar el nombre por Balón

de oro mejor jugador 2022 Karim Benzema.
6. Luego dentro de la etiqueta <body> creamos una etiqueta de <header> que
va contener una etiqueta <nav> y con un id = “navegación” y dentro de
esta una etiqueta <ul> y dentro de esta varias etiquetas <li> junto con la
etiqueta <a> para crear una lista de navegación, cerrando la etiqueta </nav>
7. Luego creamos una etiqueta <section> que incluirá una etiqueta <p> con la
clase <p class = “párrafo”></p> y cerramos la etiqueta </section>
8. luego vamos a crear un tabla organizada con la etiqueta <table>, para darle
título a nuestra tabla lo haremos con la etiqueta <caption>, luego creamos
nuestra fila de encabezado con la etiqueta <thead> dentro de esta la etiqueta
<tr> y dentro de esta el numero de celdas que necesitamos con la etiqueta
<th> y cerrando respectivamente las etiquetas, luego creamos la parte del
body de nuestra tabla con la etiqueta <tbody>, dentro de esta la etiqueta <tr>
y dentro de esta la etiqueta <td> con las celdas que necesitemos y cerramos
las etiquetas. Para concluir la tabla creamos una etiqueta <tfoot> dentro de
esta la etiqueta <tr> y dentro de esta la etiqueta <td> .
9. Vamos a crear un formulario sencillo, abrimos una etiqueta <form>, dentro

de esta un <section> y dentro de esta la etiqueta <label> con atributo for =
“correo” y poniendo en la etiqueta “Correo”, debajo de la etiqueta <label>
ponemos la etiqueta <input> con los siguientes atributos type = “email” id =
correo placeholder = “ingrese su correo” name = “correo” luego seguimos el
mismo paso para crear nuestro espacio de la contraseña de la siguiente
manera; iniciamos con una etiqueta <section> luego creamos una etiqueta
<label> con atributo for = “contraseña” y poniendo en la etiqueta
“Contraseña”, debajo de la etiqueta <label> ponemos la etiqueta <input> con
los siguientes atributos type = “password” id = contraseña placeholder =
“ingrese su contraseña” name = “contraseña”.
10. Luego creamos otra etiqueta <section> y dentro de esta la etiqueta de

imagen <img> con una clase así <img class = “img”> para poner nuestra
imagen deseada, dentro de esta el atributo src = “#” donde se debe poner el
origen de la imagen y también va el atributo alt = “imagen de tutorial” es
donde va un texto alternativo por si la imagen no se abre de manera correcta.
El archivo de la imagen se los dejo a continuación para que lo guarden en su
carpeta de tutorial
imagen de tutorial
11. Luego de tener nuestro texto HTML, vamos a enlazar un formato CSS para
dar estilo a nuestra pagina web, lo primero es crear un archivo style.css en
visual studio code, y después de la etiqueta <title> que esta en la parte
superior lo enlazamos por medio de un link como se ve a continuación:
<link rel="stylesheet" href="style .css" type="text/css">
De esta manera nuestro archivo html ya esta enlazado con nuestro archivo
css y podemos generar estilos de manera externa.
12. A continuación, realizaremos estilos de tipo universal, etiqueta, de clase y por

id.
*{
Margin: 0px
Padding: 0px
}
#navegacion {
font-size: 20px;
font-weight: bold;
width: 100%;
background-color: black;
margin: 2px 2px;
li{
display: inline-block;
li a{
padding: 0px 8px;
color: white;
}
.parrafo{
font-size: 20px;
font-weight: bold;
}
.img{
position: relative;
left: 20px;
width: 200px;
}
A continuación, nuestro formato de documento en html:

<html lang="en">
<head>
<title>Balón de oro mejor jugador 2022 Karim Benzema</title>
</head>
<body>
<header>
<nav id="navegacion">
<ul>
<li><a href="#">tutorial 1</a></li>
</ul>
</nav>
</header>
<section>
<p class="parrafo">Este es un tutorial para la clase de introducción a la
programación</p>
</section>
<table>
<caption>
tabla del tutorial
</caption>
<thead>
<tr>
<th>tutorial 1</th>
<th>tutorial 2</th>
<th>tutorial 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>paso 1</td>
<td>paso 2</td>
<td>paso 3</td>
</tr>
<tfoot>
<tr>
<td>final 1</td>
<td>final 2</td>
<td>final 3</td>
</tr>
</tfoot>
</tbody>
</table>
<form>
<section>
<label for="correo">Correo</label>
<input type="email" id="correo" placeholder="ingrese su correo"
name="correo">
</section>
<section>
<label for="contraseña">Contraseña</label>
<input type="password" id="contraseña" placeholder="ingrese su contraseña"
name="contraseña">
</section>
</form>
<section>
<img class="img" src="img_tutorial.jpg" alt="imagen de tutorial">
</section>
</body>
</html>
Código en ejecución

Evidencia de Producto Nro2

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Evidencia de Producto Nro2

Cargado por

Copyright:

Formatos disponibles

Evidencia de producto Nro.

1. Diseñar una página web que tenga la estructura de un periódico virtual,

DOC 1 HTML = index.html

DOC 2 HTML = siguenos.html

header .top-buttons nav ul{

header .top-buttons nav ul li{

header .top-buttons nav ul li a{

header .logo img{

header .middle-buttons ul{

header .middle-buttons ul li{

header .today-date .line{

header .today-date .date{

header .bottom-buttons ul{

header .bottom-buttons ul li{

#news-feed .news-block .left-block{

#news-feed .news-block .right-block{

#new-feed .news-block .left-block{

#new-feed .news-block .right-block{

#news-feed figure:hover figcaption{

#news-feed figure img{

#news-feed figure figcaption{

#news-feed figure iframe{

footer .topbar img{

footer .topbar .social-network{

footer .topbar .social-network i{

#news-feed .news-block .center-block{

2. Crear un documento a manera de tutorial en donde expliques PASO A

1. El documento de la página web se va a realizar con el editor de texto visual

5. El paso siguiente es ir a la la etiqueta <title> cambiar el nombre por Balón

9. Vamos a crear un formulario sencillo, abrimos una etiqueta <form>, dentro

10. Luego creamos otra etiqueta <section> y dentro de esta la etiqueta de

12. A continuación, realizaremos estilos de tipo universal, etiqueta, de clase y por

A continuación, nuestro formato de documento en html:

También podría gustarte