P0 - Tarea #09: Los enlaces en páginas Web

Objetivos

Enlazar una hoja de estilos CSS a una página Web
Utilizar algunas reglas CSS: centrar partes del contenido incluir diferentes tipos de enlaces

Crea dos archivos: uno HTML y otro CSS con el editor de código Subline Text
Utiliza las reglas CSS apropiadas para:
- Centrar la página Web en todos los navegadores
- Poner un color de fondo a tu página
- Colocar el texto y enlaces como en el ejemplo
Crea una carpeta con "estructura básica web" y nómbrala como p0_t9_web5.
- Dentro de ella incluye los tres archivos (index.html, contacto.html, estilos.css)
- Comprime toda la carpeta con 7zip y el mismo nombre
- Guárdala en tu pendrive y además en Drive (más tarde la tendrás que entregar para su corrección)


<!DOCTYPE html>
<html lang="en"></html>
<head>
  <meta charset="UTF-8"/>
  <link rel="stylesheet" href="css/estilos.css"/>
  <title>Los enlaces</title>
</head>
<body>
  <div id="main">
    <h1 class="centro">Los enlaces en una Página Web</h1>
    <p><a href=" http://3con14.pro" ; target="_blank" title="3con14">Esto es un enlace a otro dominio </a>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, pariatur, placeat quas eum ab alias repellendus. Mollitia, quam ab deserunt iusto suscipit omnis, inventore amet, aspernatur veniam nobis harum excepturi.</p>
    <p> <a href=" https://es.wikipedia.org/wiki/Grafeno" ; target="_blank" title="Wikipedia-grafeno"><img src="img/grafeno.png" alt="grafeno" class="dcha trans img-respon porciento50"/></a><strong><em>Esto es un enlace en una imagen</em></strong>, consectetur adipisicing elit. In quisquam corrupti repellat, earum inventore facere maiores libero. Quod, dolor nesciunt asperiores, autem libero alias, at molestias odit minus veniam in! At quidem tenetur sunt dicta id deleniti sapiente explicabo, omnis rem magnam, quasi maxime libero eveniet iusto laborum nesciunt doloribus molestias suscipit maiores, culpa illum vero veritatis! Praesentium debitis assumenda, culpa accusamus. Est quo modi odio vel, dicta laboriosam asperiores, voluptate minus placeat, sequi veniam. Facilis voluptatum expedita quos nam, vel aspernatur, iste eaque rem modi ea aliquid nemo asperiores ex accusamus repellendus natus illum possimus adipisci ipsam tempore in!</p>
    <p><a href="contacto/contacto.html" title="contacto">Esto es un enlace a una página de este mismo dominio </a>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, pariatur, placeat quas eum ab alias repellendus. Mollitia, quam ab deserunt iusto suscipit omnis, inventore amet, aspernatur veniam nobis harum excepturi.</p>
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. In quisquam corrupti repellat, earum inventore facere maiores libero. Quod, dolor nesciunt asperiores, autem libero alias, at molestias odit minus veniam in! At quidem tenetur sunt dicta id deleniti sapiente explicabo, omnis rem magnam, quasi maxime libero eveniet iusto laborum nesciunt doloribus molestias suscipit maiores, culpa illum vero veritatis! Praesentium debitis assumenda, culpa accusamus. Est quo modi odio vel, dicta laboriosam asperiores, voluptate minus placeat, sequi veniam. Facilis voluptatum expedita quos nam, vel aspernatur, iste eaque rem modi ea aliquid nemo asperiores ex accusamus repellendus natus illum possimus adipisci ipsam tempore in!</p>
    <p>Esto es un enlace a un archivo pdf <a href="archivos/areas.pdf">[ Áreas ] </a>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, pariatur, placeat quas eum ab alias repellendus. Mollitia, quam ab deserunt iusto suscipit omnis, inventore amet, aspernatur veniam nobis harum excepturi.</p>
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. In quisquam corrupti repellat, earum inventore facere maiores libero. Quod, dolor nesciunt asperiores, autem libero alias, at molestias odit minus veniam in! At quidem tenetur sunt dicta id deleniti sapiente explicabo, omnis rem magnam, quasi maxime libero eveniet iusto laborum nesciunt doloribus molestias suscipit maiores, culpa illum vero veritatis! Praesentium debitis assumenda, culpa accusamus. Est quo modi odio vel, dicta laboriosam asperiores, voluptate minus placeat, sequi veniam. Facilis voluptatum expedita quos nam, vel aspernatur, iste eaque rem modi ea aliquid nemo asperiores ex accusamus repellendus natus illum possimus adipisci ipsam tempore in!</p><a href="#main">subir</a>
  </div>
</body>

Código CSS



 /* ------------------
    Hoja de estilos
 --------------------- */
html {
  font        : 16px sans-serif;  /* tamaño y tipo de letra */
  color       : #333;             /* color de letra */
  text-shadow : 0 0 0.2px;        /* sombra de letra */
  min-height  : 100vh;            /* alto mínimo del dispositivo */
}
* {
  -webkit-box-sizing : border-box;
  -moz-box-sizing    : border-box;
  box-sizing         : border-box; /* borde y padding interiores */
}
body { background: steelblue; }

/* clases para el diseño (layout) */
#main {
  max-width  : 640px;
  width      : 96%;
  margin     : 2em auto;
  background : rgba(0,0,0,0.1) ;
  box-shadow : 0 0 4px 1px #333;
  padding    : 1em;
}

/* clases para los enlaces */
a, a:link, a:visited {
    color           : white;
    text-decoration : none;
}
a:hover, a:active { 
  color: yellow;
}

/* clases para textos */
.izdo   { text-align: left;}
.dcho   { text-align: right;}
.centro { text-align: center;}

 /* clases para imágenes */
.izda        { display   : block; float: left; padding-right: 10px; }
.dcha        { display   : block; float: right; padding-left: 10px; }
.centra      { display   : block; margin: 0 auto; }
.img-respon  { max-width : 100%; height: auto; }
.trans       { opacity   : 1; }
.trans:hover { opacity   : 0.5; }
.porciento50 { width     : 50%; }

Etiquetas: 1º BTO - Contenidos, 1º BTO - Prácticas