Ir al contenido principal

Curriculum Vitae

Ejercicio:

A partir de la página web que se te proporciona, debes crear una página web que tenga el mismo aspecto que la siguiente imagen:

Código html:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Curriculum Vitae de Bruce Wayne</title>
<style>
body {
  font-family: Arial,Verdana,sans-serif;
}

h1 { <!--Este se usa para el como se va a ver todos los lineas con h1-->
  font-family: Georgia,Times,serif;
  font-size: 32px;
  font-variant: small-caps;
}

h2 { <!--Este se usa para el como se va a ver todos los lineas con h2-->
  font-family: Georgia,Times,serif;
  font-size: 24px;
  font-style: italic;
  font-variant: small-caps;
}

li  {
  font-weight: bold;
}

strong {
  font-weight: normal;
}
</style>
</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>
</ul>

</body>

</html>

Comentarios

  1. gacetafrontal.com/biografia-de-carlos-augusto-salaverry/
    sino que también tuvo algunas corrientes como militar y político en su país, por supuesto que, aunque este fue otro de ámbito, se sabe que tuvo la particularidad de formarlo como un hombre de sociedad.

    ResponderBorrar

Publicar un comentario

Entradas más populares de este blog

Listas usando números romanos, círculos, cuadros y letras griegas

Listas usando números romanos, círculos, cuadros y letras griegas 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: Código en html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Ejemplo de listas</title> <style> .lista-sin {   list-style-type: none; } .lista-circulos {   list-style-type: circle;  <!--jcon esta parte se modifica que aparezca la lista-circulos con círculos y así con los demas--> } .lista-cuadrados {    list-style-type: square; } .lista-romanos {   list-style-type: lower-roman; } .lista-griegos {   list-style-type: lower-greek; } </style> </head> <body> <p>Lista sin elemento gráfico:</p> <ul class="lista-sin"> <li>...

Formulario usando colores

Formulario usando colores Se desea obtener la siguiente imagen: Código  en html <!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8" /> <title>Registro - iDESWEB</title> <style> body {   font-family: Arial, Helvetica, sans-serif;   width: 90%;   margin: 0 auto; } header {   text-align: center; } h1, h2 {   font-family: Georgia, serif; } h1 {   font-size: 3em; } fieldset {   margin: 1em auto; } legend {   font-size: 1.2em;   font-weight: bold;   text-transform: uppercase; } label {   font-weight: bold;   display: block; } input:focus, select:focus {   background-color: yellow; } input:hover, select:hover {   background-color: red; } #boton-crear {   font-size: 2em;   padding: 0.5em; } .inline {   display: inline; } .centrado {   text-align: center; } </style> </head...

Lista que el seleccionar aparece con borde

Ejercicio: Crea una página web con un menú etiquetado con una lista que tenga el mismo aspecto que la siguiente imagen: Código  html: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Página web con menú</title> <style> ul { list-style-type: none; text-align: center; /* Se debe escoger la anchura correcta para que la palabra mas grande de la lista se pueda ver completa*/ width: 120px; padding: 0; } li { background-color: #00F; color: #FFF; /* El borde blanco separa los elementos */ border: 2px solid #FFF; } li a { color: #FFF; text-decoration: none; /* Necesario para que el enlace ocupe todo el ancho del elemento de la lista */ display: block; width: 100%; } /* Borde que aparece cuando se situa el ratón encima de un elemento de la lista*/ li a:hover, li a:focus { /* ¿Qué pasa si se utiliza la propiedad border */ outline: 2px solid #F00; } </style> </head> <body...