miércoles, 9 de agosto de 2017

ejercicio propuesto numero 18

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:
Captura de pantalla
Debes utilizar los selectores avanzados para lograr que:
  • La primera letra de un encabezado de nivel 2 se muestre con un tamaño más grandes.
  • El primer párrafo después de cada encabezado de nivel 2 tenga un sangrado 2em en la primera línea.
  • Al principio de un enlace se muestre la flecha "→".
  • Después de una abreviatura se muestre el significado de la abreviatura.


 Este es mi resultado



 <!doctype html/>
<html>
<meta charset="utf-8" />
<title>HTML &amp; CSS: Curso práctico avanzado</title>
<style>
h2:first-letter  {font-size: 3em; }
p.primeralinea  { text-indent: 2em;}
a:before {content: "→ "; }
</style>
</head>
<body>
<h1>HTML &amp; 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 &amp; 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>Descripción del libro</h2>

<p class="primeralinea">
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 <a href="https://es.wikipedia.org/wiki/World_Wide_Web">Web</a>, se ha extendido su uso por todo el mundo. En pocos años, la <a href="https://es.wikipedia.org/wiki/World_Wide_Web">Web</a> 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 páginas complejas, con contenidos dinámicos que provienen de bases de datos y que son visitadas por miles de usuarios al mismo tiempo.
</p></span>

<p>
Todas las páginas están internamente construidas con la misma tecnología, con el Lenguaje de marcas de hipertexto <abbr title="Hypertext Markup Language">HTML</abbr> y con las Hojas de estilo en cascada <abbr title="Cascading Style Sheets">CSS</abbr>.
</p>

<p>
Este libro es adecuado para cualquiera que tenga interés en aprender a desarrollar sus propias páginas web. 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 <a href="https://es.wikipedia.org/wiki/World_Wide_Web">Web</a>.
</p>


<h2>Contenido del libro</h2>

<p class="primeralinea">
El contenido de este libro se estructura en tres apartados bien diferenciados:
</p>

<ul>
<li>En la primera parte del libro se trabajan conceptos generales que son necesarios para poder desarrollar páginas web; se explican conceptos de estructura física y estructura lógica (o estructura de navegación) de un sitio web. Se detalla cómo influye la estructura física en las <abbr title="Uniform Resource Locator">URL</abbr> o direcciones que se emplean a la hora de crear los enlaces de un sitio web. Pasando por el concepto de "estándar web", un término general que se emplea para refererirse a los estándares que define su funcionamiento como HTML y CSS, empleados para el desarrollo de las páginas web en el lado del cliente.</li>

<li>En la segunda parte se trabaja HTML. Partiendo de la estructura básica de una página web, se explican las etiquetas de HTML que se utilizan para definir el texto, los enlaces, las listas, las tablas, los formularios y los elementos multimedia.</li>

<li>En la tercera y última parte se explica CSS, el lenguaje que se emplea para definir el formato y la presentación de una página web. Se explica cómo utilizar el color, cómo definir la presentación del texto, de las tablas y de los formularios; cómo realizar transformaciones y transiciones con el fin de diseñar una página web.</li>
</ul>
</body>
</html>

martes, 8 de agosto de 2017

vinculos css

Los vinculos en html son así:
<a href...../>
Si hacemos una regla css para los vinculos, y que además debemos hacerlas. y son estas:

a:link{
        text-decoration:none;
}

Esta regla es par au enlace que aun no ha sido visitado.

a:visited{
            text-decoration:none;
}
Esta regla es para los link que ya han sido visitados y tiene que ir con la anterior y en segunda posición.

a:hover{
            text-decoration:none;
}
 Esta regla modifica el color cuando ya hemos pichado el enlace,es obligatoria ponerla detrás de a:visited.

a:active{
           text-decoration:none; color 00F;
}
Esta regla lo que nos hace en el enlace es cambiar de color cuando pulsamos y nos devuelve el color al soltar, esta regla debe ir colocada tras a:hover.


 :focus{
           border:2px; solid:#00f;
}

Esta regla es interesante para los formularios, y lo que nos hace es resaltar la caja del formulario cuando pasamos el raton

lunes, 7 de agosto de 2017

Selectores ccs

En css podemos hacer varias tipos de selectores,:
selector de tipo, si hacemos referencia a un elemento, ejemplo si hacemos referencia a h1, o span, todo las reglas que pongamos actuaran en h1 y span, veamos ejemplo:

h1{
     color: #0FF;
}


span{
        color: #0FF;
}

En ambos caso hacen lo mismo, todas las etiquetas h1 y span de html, cambiaran de color.

Selector de clase:

.red{
       color: #B00;
}

Este tipo de selector se aplica a lo que nosotros queramos,solo hay que ir al código html y poner en este caso "red", veamos el ejemplo de donde ponerlo.(no poner el  " .")

<span class="red">mundo</span>

La palabra mundo aparecerá en rojo.

Selector identificador: 

 #midiv{
           color: #00B
}
 el tipo id hay que indicárselo al código html,veamos un ejemplo
<span id="midiv">esto es un ejemplo</span>

ya lo hemos enlazado , lo que hará es cambiar de color "esto es un ejemplo",este tipo de selector es solo para un uso en la web.

viernes, 4 de agosto de 2017

ejercicio 13,propuesto por activate

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 siguiente funcionamiento:
  • En su estado normal, un enlace se muestra de color rojo y sin subrayado (propiedad text-decoration).
  • Cuando el usuario sitúa el cursor del ratón sobre un enlace, se invierten los colores (el texto del enlace se muestra con color blanco sobre un fondo rojo) y se muestra el subrayado.
  • Cuando un enlace está activo, se muestra de color naranja.
  • Cuando un enlace ha sido visitado, se muestra de color verde oscuro.
  • Cuando un enlace tiene el foco del teclado, se muestra de color azul y se muestra el subrayado.
Consejo: el orden de escritura de las reglas influye en el resultado final, ya que un enlace puede estar en varios estados al mismo tiempo.



Esto nos dan de codigo .


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Ejercicio de selectores</title>
<style>
a:link{text-decoration:name; color:red}
a:hover{text-decoration:name; color:white}
a:visited{text-decoration:name; color:verde}

</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></li>
</ul>
</body>
</html>



este el resulado mio ,con ayuda

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Ejercicio de selectores</title>

<style>
a{color: red; 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></li>
</ul>
</body>
</html>

jueves, 3 de agosto de 2017

ejercicio 11.modulo1

A partir de la página web que se te proporciona, debes añadir los selectores a las reglas CSS para aplicar los estilos deseados y crear una página web que tenga el mismo aspecto que la siguiente imagen:
Captura de pantalla
Cada regla CSS incluye un comentario en el que se explica los elementos a los que debe aplicarse.




Os pongo mi codigo,para resolver este ejerccio

 <!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 */
.especial {
  color: #FFFF00;
  background: #000000;
}

/* Todos los elementos <span> contenidos en la clase "normal" */
.normal{
  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>

miércoles, 2 de agosto de 2017

ejercicio propuesto 6

A partir de la página web que se te proporciona, debes emplear la etiqueta <link> para crear una página web que tenga el mismo aspecto que la siguiente imagen:
Captura de pantalla
El fichero con las reglas CSS se debe llamar estilos.css.
Tienes que tener en cuenta los siguientes requisitos:
  • 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 Language", "Cascading Style Sheets" y los acrónimos "HTML" y "CSS":
    • El color del texto es blanco: #FFF.
    • El color de fondo del texto es negro: #000.
    • Texto en cursiva.
Consejo: puedes utilizar las etiquetas de HTML como <span>, <em> y <strong> para aplicar un estilo CSS a cualquier parte del texto.


Os dejo los dos codigos. para ver como me quedo:

 <!doctype html>
<html>

<head>
<meta charset="utf-8">
<title>HTML &amp; CSS: Curso práctico avanzado</title>
<link href="estilos.css" rel="stylesheet"/>

</head>

<body>
<h1>HTML &amp; CSS: Curso práctico avanzado</h1>

<h2>Datos del libro</h2>

<ul>
<li><span>Título:</span> HTML &amp; CSS: Curso práctico avanzado</li>
<li><span>Autor:</span> Sergio Luján Mora</li>
<li><span>Editorial:</span> Publicaciones Altaria</li>
<li><span>Año de publicación:</span> 2015</li>
<li><span>ISBN:</span> 978-84-944049-4-8</li>
</ul>


<h2>Descripción del libro</h2>

<p>
Aunque los inicios de Internet se remontan a los años sesenta, no ha sido hasta los años noventa cuando, gracias a la <em>Web</em>, se ha extendido su uso por todo el mundo. En pocos años, la <em>Web</em> 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 páginas complejas, con contenidos dinámicos que provienen de bases de datos y que son visitadas por miles de usuarios al mismo tiempo.
</p>

<p>
Todas las páginas están internamente construidas con la misma tecnología, con el Lenguaje de marcas de hipertexto <em>(Hypertext Markup Language, HTML)</em> y con las Hojas de estilo en cascada <em>(Cascading Style Sheets, CSS)</em>.
</p>

<p>
Este libro es adecuado para cualquiera que tenga interés en aprender a desarrollar sus propias páginas web. 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 <em>Web</em>.
</p>


<h2>Contenido del libro</h2>

<p>
El contenido de este libro se estructura en tres apartados bien diferenciados:
</p>

<ul>
<li>En la primera parte del libro se trabajan conceptos generales que son necesarios para poder desarrollar páginas <em>web</em>; se explican conceptos de estructura física y estructura lógica (o estructura de navegación) de un sitio <em>web</em>. Se detalla cómo influye la estructura física en las URL o direcciones que se emplean a la hora de crear los enlaces de un sitio <em>web</em>. Pasando por el concepto de "estándar web", un término general que se emplea para refererirse a los estándares que define su funcionamiento como <em>HTML</em> y <em>CSS</em>, empleados para el desarrollo de las páginas <strong><em>web</em></strong> en el lado del cliente.</li>

<li>En la segunda parte se trabaja <em>HTML</em>. Partiendo de la estructura básica de una página <em>web</em>, se explican las etiquetas de <em>HTML</em> que se utilizan para definir el texto, los enlaces, las listas, las tablas, los formularios y los elementos multimedia.</li>

<li>En la tercera y última parte se explica <em>CSS</em>, el lenguaje que se emplea para definir el formato y la presentación de una página <em>web</em>. Se explica cómo utilizar el color, cómo definir la presentación del texto, de las tablas y de los formularios; cómo realizar transformaciones y transiciones con el fin de diseñar una página <em>web</em>.</li>
</ul>
</body>

</html>


aqui os dejo el codigo css

h1 {
    color: blue;
    font-famyli: Verdana, Calibri, sans-serif;
    font size:  32px;
}

h2{
    color: #A00;
    font-famyli: Verdana, Calibri;
    font-size: 24px;
}

span{
     color: #060;
}
em{
   color: #FFF;
   background-color: #000;
}

strong{
       font-size: 20px;
}

ejercicio propuesto por activate mooc,etiqueta style

A partir de la página web que se te proporciona, debes emplear la etiqueta <style> para crear una página web que tenga el mismo aspecto que la siguiente imagen:
Captura de pantalla
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 Language", "Cascading Style Sheets" y los acrónimos "HTML" y "CSS":
    • El color del texto es blanco: #FFF.
    • El color de fondo del texto es negro: #000.
    • Texto en cursiva.
Consejo: puedes utilizar las etiquetas de HTML como <span>, <em> y <strong> para aplicar un estilo CSS a cualquier parte del texto.



 este es el resultado, me esta costando pero poco a poco lo consigo, copia este codigo si quieres ver como queda y lo miras en un navegador.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>HTML &amp; CSS: Curso práctico avanzado</title>
<style>
h1 {
color:#F00; font-family:Verdana, Calibri, sans-serif; font-size:32px
}
h2 {
color:#A00; font-family:Verdana, Calibri, sans-serif; font-size:24px
}
p, ul{
color:#00F; font-family:Verdana, Calibri, sans-serif; font-size:16px
}
span{
color: #060
}

em{
   color:#FFF;
    background-color:#000
   }
</style>

</head>


<body>
<h1>HTML &amp; CSS: Curso práctico avanzado</h1>

<h2>Datos del libro</h2>

<ul>
<li><span>Título:</span> HTML &amp; CSS: Curso práctico avanzado</li>
<li><span>Autor:</span> Sergio Luján Mora</li>
<li><span>Editorial:</span> Publicaciones Altaria</li>
<li><span>Año de publicación:</span> 2015</li>
<li><span>ISBN:</span> 978-84-944049-4-8</li>
</ul>


<h2>Descripción del libro</h2>

<p>
Aunque los inicios de Internet se remontan a los años sesenta, no ha sido hasta los años noventa cuando, gracias a la <em>Web</em>, se ha extendido su uso por todo el mundo. En pocos años, la  <em>Web</em> 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 páginas complejas, con contenidos dinámicos que provienen de bases de datos y que son visitadas por miles de usuarios al mismo tiempo.
</p>

<p>
Todas las páginas están internamente construidas con la misma tecnología, con el Lenguaje de marcas de hipertexto <em>(Hypertext Markup Language, HTML)</em> y con las Hojas de estilo en cascada <em>(Cascading Style Sheets, CSS)</em>.
</p>

<p>
Este libro es adecuado para cualquiera que tenga interés en aprender a desarrollar sus propias páginas <em>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<em>Web</em>.
</p>


<h2>Contenido del libro</h2>

<p>
El contenido de este libro se estructura en tres apartados bien diferenciados:
</p>

<ul>
<li>En la primera parte del libro se trabajan conceptos generales que son necesarios para poder desarrollar páginas web; se explican conceptos de estructura física y estructura lógica (o estructura de navegación) de un sitio <em>web</em>. Se detalla cómo influye la estructura física en las URL o direcciones que se emplean a la hora de crear los enlaces de un sitio web. Pasando por el concepto de "estándar web", un término general que se emplea para refererirse a los estándares que define su funcionamiento como HTML y CSS, empleados para el desarrollo de las páginas web en el lado del cliente.</li>

<li>En la segunda parte se trabaja <em>HTML<em>. Partiendo de la estructura básica de una página <em>web</em>, se explican las etiquetas de <em>HTML</em> que se utilizan para definir el texto, los enlaces, las listas, las tablas, los formularios y los elementos multimedia.</li>

<li>En la tercera y última parte se explica <em>CSS</em>, el lenguaje que se emplea para definir el formato y la presentación de una página web. Se explica cómo utilizar el color, cómo definir la presentación del texto, de las tablas y de los formularios; cómo realizar transformaciones y transiciones con el fin de diseñar una página <em>web<em>.</li>
</ul>
</body>
</html>