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>



ejercicio propuesto por activate mooc,atributo style

A partir de la página web que se te proporciona, debes emplear el atributo 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 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 <em> y <strong>.
Consejo: puedes utilizar la etiqueta de HTML <span> para aplicar un estilo CSS a cualquier parte del texto.





yo he realizado el siguiente ejercicio,si quieres ver los resultados,copia mi codigo y miralo en un navegador.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>HTML &amp; CSS: Curso práctico avanzado</title>
</head>

<body>
<h1 style="color: #F00; font-family: Verdana, Calibri,sans, serif; font-size: 32px;">HTML &amp; CSS: Curso práctico avanzado</h1>

<h2 style="color: #A00; font-family: Verdana, Calibri,sans, serif; font-size: 24px;">Datos del libro</h2>

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


<h2 style="color: #A00; font-family: Verdana, Calibri,sans, serif; font-size: 24px;">Descripción del libro</h2>

<p style="color:#00F; font-family: Georgia, Cambria, serif; font-size:16px" >
Aunque los inicios de <strong><span style="font-size: 20px">Internet</span></strong> se remontan a los años sesenta, no ha sido hasta los años noventa cuando, gracias a la <strong><span style="font-size: 20px">Web</span></strong>, se ha extendido su uso por todo el mundo. En pocos años, la <strong><span style="font-size: 20px">Web</span></strong> 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 style="color:#00F; font-family: Georgia, Cambria, serif; font-size:16px">
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 style="color:#00F; font-family: Georgia, Cambria, serif; font-size:16px" >
Este libro es adecuado para cualquiera que tenga interés en aprender a desarrollar sus propias páginas <strong><span style="font-size: 20px">web</span></strong>. 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 <strong><span style="font-size: 20px">Web.</span></strong>
</p>


<h2 style="color:#A00; font-family:Verdana,Calibri,sans-serif; font-size:24px"> Contenido del libro </h2>

<p style="color:#00F; font-family:Verdana,Calibri,sans-serif; font-size:16px" >
El contenido de este libro se estructura en tres apartados bien diferenciados:
</p>

<ul style="color:#00F; font-family: Georgia, Cambria, serif; font-size:16px">
<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 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 <strong>HTML</strong> y <strong>CSS</strong>, empleados para el desarrollo de las páginas web en el lado del cliente.</li>

<li>En la segunda parte se trabaja <strong><span style="font-size: 20px">HTML</span></strong>. Partiendo de la estructura básica de una página <strong><span style="font-size: 20px">web</span></strong>, se explican las etiquetas de <strong><span style="font-size: 20px">HTML</span></strong> 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 <strong><span style="font-size: 20px">CSS</span></strong>, 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 <strong><span style="font-size: 20px">web.</span></strong></li>
</ul>

</body>

</html>

etiqueta style y link

<style> y </style>
Es una etiqueta que se escribe en el bloque de  <head> y  tiene cierre,veamos como va:

<head>
<style>
.
.
.
</style>
</head>

Asi va estructurada, en los puntos ,escribiremos nuestras reglas css, que afectaran a la web en  cuestion,si queremos que esas reglas sean la mismas que la siguiente pagina nuestra,tendremos que copiar y crear la misma estructura.

body{
        background-color:#cc;
        color:#333
}

Esto es una regla css, la cual, hace que en el body de nuestra web cambien los colores.

h1, h2 {
           font-size:38px
}

Esta regla lo que hace es cambiar el tamaño del titulo h1 y del titulo h2 de nuestta web. solo de la pagina que estamos creando.
Esta forma de trabajo es mejor que con el atributo style, aunque no es la mejor.


La forma correcta de trabajar actualmente es crear una carpeta externa y tener las reglas css de forma independiente, y unir css y html con etiqueta <link>.

<link href="url" rel="stylesheet"/>

Esta es la forma de linkar las hojas de estilo css y html.
href= ponemos entre comillas la url ,donde tenemos las reglas css.
rel= quiere decir que son hojas de estilo, rel hay que ponerlo asi.


La etiqueta link va puesta en la estructura dentro del <head>.


Nota importante para la carpeta css externa.
Para no tener problemas con el juego de caracteres entre  los navegadores y demas, lo primaro que hacemos es usar la primara linea y unica linea es escribri el juego de caracteres que estamos usando:ejemplo:
@charset "utf-8";
o @charset "iso-8859-15"
con eso le indicamos que estamos usando utf o iso,depende el que usemos,ese pondremos.





que es css?

CSS:(cascading style sheels).
Se usa para poner colores, bordes, tamaño de letra, modificar el estilo visual de la web, y también podemos modificar el lugar de las cajas estructurales de la web.

Css. Son reglas:

h1 { color:#FF000, background:#0F0F}

h1= (selector) es donde queremos actuar ,haciendo una acción, en este caso es el el titulo principal h1.
color:#FF000= (propiedad y valor) es que vamos a a cambiar del titulo h1 con un color #0F0F.(valor)
backgruond:#0F0F=  es es que vamos a poner color con blackgrond el fondo de detrás del h1 a un color #0F0F.

Cuando creamos una web lo ideal es que entre los lenguajes de programacion exista el mínimo acoplamiento.el acoplamiento informático es el nivel de dependencia que hay estre varios lenguajes.
Enre css y html, hay varias formas de acoplamiento:

atributo style , no es aconsejable este sistema,el nivel de acoplamieto en máximo
.
Etiqueta <style> este sistema las propiedades que creamos encss,están en el mismo fichero, el nivel de acoplamiento aun es muy grande.

Etiqueta <link> , el nivel de acoplamineto es mínimo, las propiedades que creamos están en un archivo externo, es la forma correcta de trabajo actual a la hora de crear web.

Ejemplos:
<body style="color":333 ; backgraund-color:#ccc;/>

Con este atributo que añadimos a la estructura body,conseguimos cambiar el color del body y el fondo, solo de esta pagina, cuando hagamos otra pagina hay que volver a escribir esto,para que haga el mismo efecto.

<h1 style="font-family:verderana; font-size:30 px; color:blue,/>

El atributo style puede tener mas anotaciones,en el ejemplo anterior,podemos cambiar la forma de la letra con font-family, el tamaño de la letra con font-size y el color de la letra, solo de h1 (titulo principal de la web)




lunes, 31 de julio de 2017

presentacion

saludos, soy ángel y en este blog, voy a ir poniendo los temas de css, que enlazan con el otro curso de htmal que tengo en otro blog.