curso html

Entradas

Mostrando las entradas de diciembre, 2017

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 htm l: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Curriculum Vitae de Bruce Wayne</title> <style> body { font-family: Arial,Verdana,sans-serif; } h1 {  font-family: Georgia,Times,serif; font-size: 32px; font-variant: small-caps; } 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...

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...

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;  } .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...

Tabla que cambia de color al señalar con el cursor

Tabla que cambia de color al señalar con el cursor Se requiere obtener lo siguiente: En la imagen anterior se muestra lo que debe ocurrir al situar el cursor del ratón sobre una de las filas de datos de la tabla: el color de fondo de las celdas debe cambiar a amarillo (#FFFF66). Nota: busca en Internet las imágenes necesarias para representar los símbolos de las diferentes monedas. Las imágenes las debes colocar como imágenes decorativas desde CSS. Código en html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Ejemplo de selectores avanzados</title> <style> table { font-family: Arial, Helvetica, sans-serif; text-align: center; } table, tr, th, td { border: 1px solid #333; line-height: 2em; } th { background-color: #F5F5F5; padding: 0 .5em; } td { padding: 0 .3em; } th.euro { background: #E6F3FF url(imagenes/euro.png) no-repeat left center; padding: 0 .3em 0 1.2em; } th.dol...

EJEMPLO

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HTML & CSS: Curso práctico avanzado</title> <style> h2:first-letter { font-size: 2em; } h2 + p { text-indent: 2em; } a:before { content: "→ "; } abbr:after { content: " (" attr(title) ")"; font-style: italic; } </style> </head> <body> <h1>HTML & CSS: Curso práctico avanzado</h1> <h2>Datos del libro</h2> <ul> <li>Título: <a href="http://publicacionesaltaria.com/es/tienda/112-html-css-curso-practico.html">HTML & CSS: Curso práctico avanzado</a></li> <li>Autor: <a href="http://sergiolujanmora.es/">Sergio Luján Mora</a></li> <li>Editorial: Publicaciones Altaria</li> <li>Año de publicación: 2015</li> <li>ISBN: 978-84-944049-4-8</li> </ul> <h2>Descr...

Ejemplo lista con colores

Ejemplo lista con colores en HTML Y CSS Se requiere obtener lo siguiente: Código en html y css <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Ejercicio de selectores</title> <style> a { color: #F00; text-decoration: none; } a:visited { color: #0A0; } a:hover { color: #FFF; background-color: #F00; text-decoration: underline; } a:focus { color: #00F; text-decoration: underline; } a:active { color: #F60; background-color: #FFF; } </style> </head> <body> <h1>Universidad de Alicante</h1> <ul> <li><a href="">Presentación</a></li> <li><a href="">Estudios</a></li> <li><a href="">Alumnos</a></li> <li><a href="">Deportes</a></li> <li><a href="">Servicios</a>...

Ejemplo tabla con colores

OTRO EJEMPLO HTML Y CS S Se requiere obtener lo siguiente: Código combinando html y css <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Ejercicio de selectores</title> <style> /* También se podría haber hecho con clases */ #fila1 {color: teal;} #fila2 {color: red;} #fila3 {color: blue;} #fila4 {color: orange;} #fila5 {color: purple;} #fila6 {color: olive;} #fila7 {color: fuchsia;} #fila8 {color: green;} /* Segunda columna */ td + td {background-color: red;} /* Tercera columna */ td + td + td {background-color: green;} /* Cuarta columna */ td + td + td + td {background-color: blue;} </style> </head> <body> <table border="1"> <tr id="fila1"><td>teal</td><td>teal</td><td>teal</td><td>teal</td></tr> <tr id="fila2"><td>red</td><td>red</td><td...

Ejemplo HTML y CSS

Ejemplo HTML y CSS <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Ejercicio de selectores</title> <style> /* Todos los elementos de la pagina */ * { font-size: 16px; font-family: Arial, Helvetica, sans-serif; } /* Todos los parrafos de la pagina */ p { color: #555; } /* Todos los párrafos contenidos en #primero */ #primero p { color: #369; } /* Todos los enlaces la pagina */ a { color: #C30; } /* Los elementos <em> contenidos en #primero */ #primero em { color: #0000BB; background-color: #FFFFCC; } /* Todos los elementos <em> con la clase "especial" en toda la pagina */ em.especial { color: #FFFF00; background: #000000; } /* Todos los elementos <span> contenidos en la clase "normal" */ .normal span { font-weight: bold; } </style> </head> <body> <div id="primero"> <p> <a href="http://publicacionesaltaria.c...