EDUCACIÓN. COLEGIO SAN ISIDRO SUR ORIENTAL. BOGOTÁ . COLOMBIA.

DOCENTE: VICTOR GARCIA-- GUÍA 7

 

 

 

Práctica 42.

 

<html>

<head>

<style type="text/css">

#customers

{

font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;

width:100%;

border-collapse:collapse;

}

#customers td, #customers th

{

font-size:1em;

border:1px solid #98bf21;

padding:3px 7px 2px 7px;

}

#customers th

{

font-size:1.1em;

text-align:left;

padding-top:5px;

padding-bottom:4px;

background-color:#A7C942;

color:#ffffff;

}

#customers tr.alt td

{

color:#000000;

background-color:#EAF2D3;

}

</style>

</head>

 

<body>

<table id="customers">

<tr>

  <th>Company</th>

  <th>Contact</th>

  <th>Country</th>

</tr>

<tr>

<td>Alfreds Futterkiste</td>

<td>Maria Anders</td>

<td>Germany</td>

</tr>

<tr class="alt">

<td>Berglunds snabbköp</td>

<td>Christina Berglund</td>

<td>Sweden</td>

</tr>

<tr>

<td>Centro comercial Moctezuma</td>

<td>Francisco Chang</td>

<td>Mexico</td>

</tr>

<tr class="alt">

<td>Ernst Handel</td>

<td>Roland Mendel</td>

<td>Austria</td>

</tr>

<tr>

<td>Island Trading</td>

<td>Helen Bennett</td>

<td>UK</td>

</tr>

<tr class="alt">

<td>Königlich Essen</td>

<td>Philip Cramer</td>

<td>Germany</td>

</tr>

<tr>

<td>Laughing Bacchus Winecellars</td>

<td>Yoshi Tannamuri</td>

<td>Canada</td>

</tr>

<tr class="alt">

<td>Magazzini Alimentari Riuniti</td>

<td>Giovanni Rovelli</td>

<td>Italy</td>

</tr>

<tr>

<td>North/South</td>

<td>Simon Crowther</td>

<td>UK</td>

</tr>

<tr class="alt">

<td>Paris spécialités</td>

<td>Marie Bertrand</td>

<td>France</td>

</tr>

</table>

</body>

</html>

 

 

Práctica 43.

 

<html>

<head>

<style type="text/css">

ul

{

list-style:square url("sqpurple.gif");

}

</style>

</head>

 

<body>

<ul>

<li>Coffee</li>

<li>Tea</li>

<li>Coca Cola</li>

</ul>

</body>

</html>

 

 

Práctica 44.

 

<html>

<head>

<style type="text/css">

p

{

border:5px solid red;

}

</style>

</head>

 

<body>

<p>This is some text in a paragraph.</p>

</body>

</html>

 

 

Práctica 45.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<style type="text/css">

input:focus

{

background-color:yellow;

}

</style>

</head>

 

<body>

<form action="form_action.asp" method="get">

First name: <input type="text" name="fname" /><br />

Last name: <input type="text" name="lname" /><br />

<input type="submit" value="Submit" />

</form>

 

<p><b>Note:</b> IE8 supports the :focus pseudo-class only if a !DOCTYPE is specified.</p>

 

</body>

</html>

 

Práctica 46.

 

<html>

<head>

<style type="text/css">

ul

{

list-style-type:none;

margin:0;

padding:0;

}

a:link,a:visited

{

display:block;

font-weight:bold;

color:#FFFFFF;

background-color:#98bf21;

width:120px;

text-align:center;

padding:4px;

text-decoration:none;

text-transform:uppercase;

}

a:hover,a:active

{

background-color:#7A991A;

}

</style>

</head>

 

<body>

<ul>

<li><a href="#home">Home</a></li>

<li><a href="#news">News</a></li>

<li><a href="#contact">Contact</a></li>

<li><a href="#about">About</a></li>

</ul>

</body>

</html>

 

 

Práctica 47.

 

<html>

<head>

<style type="text/css">

ul

{

list-style-type:none;

margin:0;

padding:0;

overflow:hidden;

}

li

{

float:left;

}

a:link,a:visited

{

display:block;

width:120px;

font-weight:bold;

color:#FFFFFF;

background-color:#98bf21;

text-align:center;

padding:4px;

text-decoration:none;

text-transform:uppercase;

}

a:hover,a:active

{

background-color:#7A991A;

}

 

</style>

</head>

 

<body>

<ul>

<li><a href="#home">Home</a></li>

<li><a href="#news">News</a></li>

<li><a href="#contact">Contact</a></li>

<li><a href="#about">About</a></li>

</ul>

</body>

</html>

 

 

Práctica 48.

 

<html>

<head>

  <title>Mi primera página con estilo</title>

  <style type="text/css">

  body {

    padding-left: 11em;

    font-family: Georgia, "Times New Roman",

          Times, serif;

    color: purple;

    background-color: #ffffff }

  ul.navbar {

    list-style-type: none;

    padding: 0;

    margin: 0;

    position: absolute;

    top: 2em;

    left: 1em;

    width: 9em }

  h1 {

    font-family: Helvetica, Geneva, Arial,

          SunSans-Regular, sans-serif }

  ul.navbar li {

    background: white;

    margin: 0.5em 0;

    padding: 0.3em;

    border-right: 1em solid black }

  ul.navbar a {

    text-decoration: none }

  a:link {

    color: blue }

  a:visited {

    color: purple }

  address {

    margin-top: 1em;

    padding-top: 1em;

    border-top: thin dotted }

  </style>

</head>

 

<body>

<!-- Menú de navegación del sitio -->

<ul class="navbar">

  <li><a href="indice.html">Página principal</a>

  <li><a href="meditaciones.html">Meditaciones</a>

  <li><a href="ciudad.html">Mi ciudad</a>

  <li><a href="enlaces.html">Enlaces</a>

</ul>

 

<!-- Contenido principal -->

<h1>Mi primera página con estilo</h1>

 

<p>¡Bienvenido a mi primera página con estilo!

 

<p>No tiene imágenes, pero tiene estilo.

También tiene enlaces, aunque no te lleven a

ningún sitio…

 

<p>Debería haber más cosas aquí, pero todavía no sé

qué poner.

 

<!-- Firma y fecha de la página, ¡sólo por cortesía! -->

<address>Creada el 15 de abril de 2012<br>

  por mí mismo.</address>

 

</body>

</html>

 

 

Práctica 49.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

 

<head>

            <title>El titulo de ésta página web</title>

            <meta http-equiv="content-type" content="text/html;charset=utf-8" />

  <style type="text/css">

  

body{

            /*  cuando veas una frase entre estos simbolos es un comentario */

            background:#DEE2E3; /*  ponemos un color de fondo */

            font-size:14px; /* establezco un tamaño de fuente por defecto */

            font-family:arial, verdana, "nimbus sans l", "sans serif"; /*  tipos de fuentes y sus alternativas */

            margin:0;padding:0;

 line-height:normal;

 

            }

/*  determinamos las caracteristicas de la caja principal que envolverá al contenido de la pagina */

 

.contenedor{

width:980px; /* un ancho de 980px esta bien con las resoluciones actuales de 1024x768 */

margin:0 auto;          /* 0 sin espacios externos arriba y abajo y auto centrado horizontalmente */

padding:0; /* 0 sin espacios internos */

            }

.header{

height:40px; /* para el ejemplo básico he colocado altura neta 60px */

background:#386587; /* un color de fondo para el encabezado */

color:#CFFFD2;

padding:20px 0;margin:0; /* si se coloca width 100% margin y padding horizontal deben ser cero para que la caja no se salga de los límites altura total ahora es 60+20+20=100px */

            }

.header h1{

padding:0 20px;margin:0;

color:#FFE619;

font-size:1.8em;

font-family:verdana;

            }

.cuerpo{

margin:10px 0; /* para que el cuerpo central diste 10px externamente arriba y abajo */

padding:10px 0;

background:#873765; /* un fondo medio violeta */

color:#FFFFFF;

            }

.lado1{

width:260px;

padding-right:40px;

/* un ancho de 260px y un padding a la izquierda de 40px ancho total 300px como hereda de la caja CUERPO los demas padding son cero  */

margin:0;

float:left; /* le indico que debe flotar hacia la izquierda  */

display:inline;

            }

.lado1 ul{font-size:0.9em;list-style:none;margin:0;padding:0 0 0 10px;}

.lado1 ul li{

            margin:3px 0;padding:0;

            list-style:none;

            }

.lado1 ul li a{

color:#FFFFFF;

display:block; /* los enlaces de referencia actuaran como bloque */

text-decoration:none;

background:#668737;

padding:10px;margin:0;

}

.lado1 ul li a:hover{

color:#CEF938;

background:#3E4D28;

}

.lado2{

width:660px;

margin:0;

padding-right:20px; /* ancho de 660px mas 20px de padding son 680px de ancho total y con los 300px del lado 1 son 980px de ancho total justo concuerda con el ancho asignado a la caja cuerpo*/

float:left; /* float por la izquierda*/

display:inline;

 

            }

.clean{clear:both;} /* elimina los margenes flotantes tanto a la derecha como a la izquierda*/

.footer{

width:96%

margin:0;padding:2%;

background:#658737;

color:#EAEFC7;

            }

.footer p{

color:#EAEFC7;

font-size:0.9em;

margin:5px 0;padding:0;

            }

  </style>

 

</head>

 

<body>

<div class="contenedor"      >

<div class="header">

<h1>Tu página web de ejemplo hecha con CSS</h1>

</div>

<div class="cuerpo">

<div class="lado1">

<ul>

<li><a href="#">Enlace de contenido 1</a></li>

<li><a href="#">Enlace de contenido 2 para otra página, puedes generar mas amplio y descriptivo </a></li>

<li><a href="#">Enlace de contenido 3, y así sucesivamente los enlaces que necesites.</a></li>

<li><a href="#">Enlace de contenido 4</a></li>

</ul>

</div>

<div class="lado2">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida dui non lorem dignissim egestas. Cras mattis risus nec eros bibendum ultrices. Aliquam molestie, erat sed molestie tincidunt, nisl arcu viverra ligula, quis venenatis enim nisi non ipsum. Nam auctor feugiat elementum. Sed mauris ipsum, sollicitudin et posuere sit amet, pellentesque sed erat. Nunc a mauris quis est vestibulum luctus. Sed varius augue nec nibh pharetra consectetur. Pellentesque adipiscing posuere eros, ut ullamcorper nulla auctor id. Quisque ultrices luctus mauris, sit amet eleifend nunc facilisis ac. Maecenas non orci sit amet justo mollis commodo. Pellentesque sed odio non ante volutpat ultrices. In neque odio, mattis at dignissim a, laoreet ut mi.

</div>

<div class="clean"></div>

</div>

<div class="footer">

Esta es una página de ejemplo<br/>

Puedes agregar lo que desees

</div>

</div>

</body>

 

</html>

 

 

 

Práctica 50.

 

Elabora una página web, utiliza las aplicaciones que desees.

Comentarios

No hay ningún comentario

Añadir un Comentario: