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.com/es/tienda/112-html-css-curso-practico.html">HTML &amp; CSS: Curso práctico avanzado</a>
</p>

<p>
Aunque los inicios de <a href="https://es.wikipedia.org/wiki/Internet">Internet</a> se remontan a los años sesenta, no ha sido hasta los años noventa cuando, gracias a la Web, se ha extendido su uso por todo el mundo. En pocos años, la Web ha evolucionado enormemente: se ha pasado de páginas sencillas, con pocas imágenes y contenidos estáticos que eran visitadas por unos pocos usuarios a <em>páginas complejas, con contenidos dinámicos que provienen de bases de datos y que son visitadas por miles de usuarios al mismo tiempo</em>.
</p>
</div>

<div id="segundo" class="normal">
<p>
Todas las páginas están internamente construidas con la misma tecnología, con el <em class="especial">Lenguaje de marcas de hipertexto</em> (<span>Hypertext Markup Language</span>, <a href="https://es.wikipedia.org/wiki/HTML">HTML</a>) y con las <em class="especial">Hojas de estilo en cascada</em> (<span>Cascading Style Sheets</span>, <a href="https://es.wikipedia.org/wiki/CSS">CSS</a>).
</p>

<p>
Este libro es <em>adecuado para cualquiera que tenga interés en aprender a desarrollar sus propias páginas web</em>. No son necesarios conocimientos previos para aprender con este libro, lo único que es necesario es saber utilizar un ordenador y saber navegar por la Web.
</p>
</div>

</body>
</html>

Comentarios

Entradas más populares de este blog

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

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

Ejercicio dos usasdo HTML y CSS

En el siguiente enlace se muestra el código no modificado que da solución a la anterior imagen. codigo_sin_modifica Ahora se debe aplicar los siguientes cambios al código: Tienes que tener en cuenta los siguientes requisitos: El texto principal: El color del texto es azul: #00F. El color de fondo del texto es verde claro: #CFC. El tipo de letra es la secuencia: Georgia, Cambria, serif. El tamaño del texto: 16px. El encabezado de nivel 1: El color del texto es rojo claro: #F00. El tipo de letra es la secuencia: Verdana, Calibri, sans-serif. El tamaño del texto: 32px. El encabezado de nivel 2: El color del texto es rojo claro: #A00. El tipo de letra es la secuencia: Verdana, Calibri, sans-serif. El tamaño del texto: 24px. El color de los campos de los datos del libro es verde oscuro: #060. El texto "Internet" y la "Web" cuando actúan como sustantivos: El tamaño del texto: 20px. Texto en negrita. El texto "Hypertext Markup ...

curso html

Buscar este blog