Noveno - Semanas de Receso V2 PDF

INSTITUCIÓN EDUCATIVA TÉCNICA INDUSTRIAL
“RAFAEL NAVIA VARON”

TALLER TECNICO DE SISTEMAS
GRADO NOVENO
SEMANAS DE RECESO
Desarrollo Web con HTML + CSS
El siguiente taller lo debe realizar en un editor de código; para aquellos que no tengan
un computador en casa lo pueden realizar desde sus equipos móviles, para eso
deben descargar el programa correspondiente a cada plataforma:
Dispositivos con ANDROID:

Dispositivos con IOS:
Otras opciones:
Situación Actual:
Hasta la fecha han desarrollado un sitio web para un tema específico, el cual, de su elección, para esté han
creado las siguientes áreas de contenido:
- Inicio (Index.html)
- Productos.
- Formulario.
- Contáctenos.
- Nuestra Empresa (Quienes Somos).
En la cual han incluido:
- Encabezado: Logotipo + Nombre de la empresa.

- Menú con Hipervínculos las otras páginas.
- Imágenes.
- Tablas.
- Formulario.
Y al final de cada tabla inserto flechas con hipervínculos para poder avanzar a la siguiente página, igualmente
para retroceder.
A partir de ese trabajo debe incorporar 18 cambios incluyendo reglas de estilo. (Si desea partir de un proyecto
nuevo es una decisión autónoma). Como ayuda tengan presente el libro adjunto.
# Titulo Actividad Fecha de Tipo de

Entrega Entrega
Llamativa En la página PRODUCTOS tienen incorporada una tabla la cual se está utilizando
Tabla como catálogo de productos con su descripción.
1
1) A esta página debe incorporar los cambios al código como lo en el ejemplo. Drive:
2) Crear el archivo que contendrá las reglas de estilo con extensión CSS y pegar
el código que está en el recuadro de color verde. Archivo .ZIP
Un slider En la página INICIO entre la barra de menú y el primer título van a insertar una barra O
para tu web de imágenes que se deslizan con transición de tiempo. Marzo 30 Archivos html y css
1) Después de la etiqueta <body> insertar el código que se indica en el cuadro Carpeta Entrega 1.
2 azul.
2) Seleccionar o elegir cuatro imágenes representativas para su página y copiar el
link de cada una en el lugar correspondiente.
3) Agregar el código de las reglas de estilo al archivo de extensión CSS.
3 Menú Para la sección de PRODUCTOS, deben crear tres categorías y dentro de estas
desplegable deben crear subcategorías como en el ejemplo:
hover FERRETERIA:
- Opción 1: Herramientas de Mano.
o Opción 1.1: Alicates.
o Opción 1.2: Extractores.
o Opción 1.3: Sierras de Mano.
- Opción 2: Herramientas Eléctricas.
o Opción 1.1: Cepillos.
o Opción 1.2: Pistolas de Impacto.
- Opción 3: Herramientas de Madera y Carpintería.
Drive:
o Opción 1.1: Brocas para madera.
o Opción 1.2: Fresas para madera.
Archivo .ZIP
o Opción 1.3: Hojas y sierras para madera.
O
Abril 6 Archivos html y css
1) Después de la tabla deben insertar el código que se indica en el cuadro azul
realizando los cambios correspondientes a las categorías y subcategorías que
Carpeta Entrega 2.
han creado para los productos de su sitio web.
2) Para cada subcategoría (total 8) deben crear una página (8 paginas) q contenga
una tabla de 2x2 con imágenes y descripción de productos relacionados.
4 Desbloquear En la página FORMULARIO, al finalizar debe colocar una línea con el texto “Políticas
contenido de control de datos” con cacilla de verificación, que al seleccionarla deberá mostrar
con click una parte de las “Políticas de control de datos” (Las consultan en internet o las
pueden redactar ustedes).
1) Después del formulario insertar el código que se indica en el cuadro azul.

2) Realizar los cambios descritos e insertar el texto de las “Políticas de control de
datos” consultado en el lugar “Aquí podrás colocar cualquier tipo de contenido”.
5 Cinta 1) A cada imagen del catálogo de productos le debe incorporar el efecto, las
adhesiva en etiquetas, que causa este código, permitiendo q las imágenes se puedan ver
imágenes como si estuvieran pegadas con una cinta adhesiva.
6 Widget En la página NUESTRA EMPRESA, al finalizar debe agregar una sección de Widget, Drive:
redes
sociales Los widgets son microaplicaciones que se despliegan en la pantalla de tu Archivo .ZIP
(formato de computador, en una página web o en tu dispositivo móvil. Son herramientas O
fichero) interactivas que tienen el objetivo de facilitarte el acceso a ciertas funciones de las Abril 9 Archivos html y css
aplicaciones. (fuente)
Carpeta Entrega 3.
La cual se enlazará con las redes sociales de la empresa o establecimiento de
comercio de la página.
1) Agregar el código después de la información empresarial, antes de la etiqueta

</body>.
2) Agregar el código de las reglas de estilo al archivo de extensión CSS
7 Envejecer En la página NUESTRA EMPRESA, debe buscar en internet cuatro imágenes de

imágenes una empresa similar a la suya, simulando que representan sus instalaciones físicas.
1) Insertar estas imágenes en una tabla 1x4.

2) Aplicar a cada imagen el efecto de envejecimiento.
Drive:
Archivo .ZIP
8 Enlaces Insertar este efecto a las imágenes que se colocaron a la primera subcategoría (total
Abril 13 O
sobre 3 paginas / 12 Imágenes) del punto 3 (Menú desplegable hover).
Archivos html y css
imágenes, Los enlaces deben enlazar como sigue:
con efecto Inicio: Página de Inicio.
Carpeta Entrega 4.
flow Bio: Página Productos.
Contacto: Página Contáctenos.
1) Agregar el código a cada imagen.
9 Letra capital En la página INICIO aplicar esta propiedad al párrafo introductorio.
1) Agregar el código al párrafo de inicio.

Drive:
Archivo .ZIP
10 Mover 1px el En la página INICIO debe redactar un párrafo describiendo el trabajo académico que
Abril 16 O
enlace al se realiza en el taller de sistemas con la página web. En este párrafo se debe hacer
Archivos html y css
hacer click referencia al colegio, al nombre del colegio le deben aplicar las etiquetas acá
descritas.
Carpeta Entrega 4.
1) Agregar el código al nombre del colegio.
11 Tabs En la página PRODUCTOS, en el punto 3 se crearon subcategorías, antes del menú

animados desplegable hover debe insertar las etiquetas acá descritas, el propósito es q en
solo con cada tab debe estar una descripción de cada subcategoría.
CSS - Tap 1:
Descripción Subcategoría.
- Tap 2:
- Tap 3: Drive:
Archivo .ZIP
1) Insertar el código en la página creando el Tab Animado. Abril 20 O
2) Agregar el código de las reglas de estilo al archivo de extensión CSS. Archivos html y css
12 Menú En la página FORMULARIO, al finalizar este deberá crear un “Menú circular
circular animado”, los cuales deberán estar enlazados de la siguiente manera: Carpeta Entrega 5.
animado Símbolo Casa: Página de Inicio.
Símbolo I: Página Contáctenos.
Símbolo Personas: Facebook.
Símbolo @: colocan su dirección de correo.
1) Insertar el código en la página creando el “Menú circular animado”.
13 Widget de En el área footer de todas las paginas deberán agregar este Widget el cual da acceso
redes a las redes sociales.
sociales con 1) Insertar el código en los footer de las páginas creando el “Widget de Redes Drive:
efecto Zoom sociales”.
2) Agregar el código de las reglas de estilo al archivo de extensión CSS. Archivo .ZIP
Abril 23 O
14 Redondear Deben aplicar estas etiquetas a las primeras tres imágenes de la página Archivos html y css
imagen PRODUCTOS.
1) Agregar el código a las primeras tres imágenes del catálogo de productos. Carpeta Entrega 6.
15 Widget de En la parte final de la página INICIO antes de la etiqueta </body> debe crear el
categorías “widget de categorías”.
Drive:
1) Agregar el código tal cual sin modificaciones en el lugar indicado.
Archivo .ZIP
Abril 27 O
16 Cajas de Deben aplicar estas etiquetas a las descripciones de los tres primeros productos de
Archivos html y css
contenidos la página PRODUCTOS.
de colores 1) Agregar el código en el lugar descrito del catálogo de productos.
Carpeta Entrega 7
17 Boton En la página CONTACTENOS, debio haber creado un formulario donde el cliente

ingresa sus datos e inquietudes. Al final debe tener un botón “Enviar” para realizar
el envío de la información. Si no han creado ese botón entonces lo van a crear. Drive:
1) Insertar el código en el botón o crear el botón con el código que aparece ahí en Archivo .ZIP
el lugar descrito. Abril 27 O
2) Agregar el código de las reglas de estilo al archivo de extensión CSS. Archivos html y css
18 Menú En la página CONTACTENOS cambiar el menú q esta después del encabezado.
multicolor Carpeta Entrega 7
1) Insertar el código en el lugar descrito, donde están los hipervínculos.
Aclaraciones:
Para realizar este trabajo se utilizara el sitio web: https://luisforgiariniblog.com/codigos-css-para-paginas-web/, cual está
también en este documento, al final de cada código podrán encontrar un enlace a un editor de código en línea el cual
muestra los resultados de cada código.
En el trascurso se programarán sesiones en línea para aclarar dudas, no siendo más les deseo lo mejor con el desarrollo
de taller en esta temporada de cuarentena. Bendecidos días para ustedes y sus familias.
18 Códigos CSS para páginas web

Si bien actualmente es posible crear un sitio web sin tocar ni una línea de código, el
saber manejar HTML, CSS, PHP siempre potenciará las posibilidades en el diseño web, ya que
son la base de todo. Es por eso que hoy traigo 18 increíbles códigos CSS para páginas web,
míralos bien de seguro te llevas algunos.
Que es el código CSS?

Los códigos CSS o en español Hojas de estilo en cascada (siglas en inglés de Cascading
Stylesheets) es un lenguaje de diseño gráfico para definir y crear la presentación de un
documento estructurado escrito en un lenguaje de marcado. Es muy usado para establecer el
diseño visual de las páginas web, e interfaces de usuario escritas en HTML o XHTML.
Todas las páginas web usan CSS para definir los estilos, o deberían. Los motivos por los que
es así, entre otros son:
 Genera un código más fácil de mantener

 La cascada nos permite sobrescribir reglas
 Evitamos escribir mucho código, porque la parte de los estilos se escribe una única vez
en el CSS, lo que nos descarga el HTML de mucho código fuente repetitivo.
 Vamos a poder crear efectos que antes solo era posible con trucos poco
recomendables o la edición de imágenes mediante programas como Photoshop.

Como incluir códigos CSS en tu página web??
Existen tres formas de incluir códigos CSS en el HTML de tu web, te las explico a
continuación:
1- Incluir el estilo como atributo de la etiqueta HTML
Se pueden emplear instrucciones de estilo CSS con el atributo style dentro de

cualquier etiqueta HTML. Por ejemplo:
<p style=”font-size: x-large”>
Es la opción menos aconsejada y usada, puesto que no permite separación entre

contenido y presentación, ni estandarizar y reutilizar. Pero es la opción a emplear en
caso de querer aplicar un formato de forma excepcional a un solo elemento.
2- Incluir el estilo a nivel de página

Se pueden emplear instrucciones de estilo CSS empleando una etiqueta <STYLE> en la
sección HEAD de nuestro documento HTML. Por ejemplo:
<style type=”text/cas”>
h1 { color: red; }
.imp { font-size: x-large; }
</style>
Esta forma permite aplicar el estilo a todos los elementos de un determinado tipo de
contenido (a nivel de etiqueta), de una determinada clase (a nivel de class), o bien a un
elemento determinado (a nivel de id).
3- Incluir el estilo en archivo .css independiente, y usar a nivel de sitio

Podemos definir un documento CSS con el estilo, y utilizarlo así en todas las páginas
del sitio uniformemente.
<link rel="stylesheet" type="text/css" href="css/Layout.css">
Esta es la manera más aconsejable de aplicar CSS a un sitio web. Dado que permite
una mejor separación entre contenido y presentación.
El código dentro del fichero tiene el mismo formato que la anterior, pero sin el style.
Por ejemplo, podrías tener un fichero llamado “estilos.css” cuyo contenido sea:
h1 { color: red; }
.imp { font-size: x-large; }
Bueno como introducción al tema creo que esto fue suficiente, mas adelante dedicaré
un post para profundizar en los códigos CSS.
18 Códigos CSS para páginas web

En cada uno de los casos te dejo el condigo CSS junto al HTML para que no te
compliques y puedas aplicarlo sin problemas.
1- Llamativa tabla.
Con los siguientes códigos CSS lograras una tabla con diferentes colores entre encabezado y
demás filas. Además, al pasar el cursor por una fila esta se destaca con otro color.
Código HTML
<body>
<table >
<caption>Contenido nutricional por cada 100 g de alimento.</caption>
<tr> <th>Alimento</th> <th>Calorías (kCal)</th> <th>Grasas (g)</th>
<th>Proteína (g)</th> <th>Carbohidratos (g)</th>
</tr>
<tr> <td>Arándano</td> <td>49</td> <td>0.2</td>
<td>0.4</td> <td>12.7</td>
</tr>
<tr> <td>Plátano</td> <td>90</td> <td>0.3</td>
<td>1.0</td> <td>23.5</td>
</tr>
<tr> <td>Cereza</td> <td>46</td> <td>0.4</td>
<td>0.9</td> <td>10.9</td>
</tr>
<tr> <td>Fresa</td> <td>37</td> <td>0.5</td>
<td>0.8</td> <td>8.3</td>
</tr>
</table>
</body>
Código CSS
/* tabla con estilo css*/
body {font-family: Arial, Helvetica, sans-serif;}
table { font-family: “Lucida Sans Unicode”, “Lucida Grande”, Sans-Serif;

font-size: 12px; margin: 45px; width: 480px; text-align: left; border-collapse: collapse; }
th { font-size: 13px; font-weight: normal; padding: 8px; background: #b9c9fe;
border-top: 4px solid #aabcfe; border-bottom: 1px solid #fff; color: #039; }
td { padding: 8px; background: #e8edff; border-bottom: 1px solid #fff;

color: #669; border-top: 1px solid transparent; }
Aquí tienes los resultados

2- Un slider para tu web
Con los siguientes códigos podrás crear un slider, algo muy llamativo en los sitios
webs.
Código HTML
<div class=”slider”><div class=”slider”> <ul> <li> <img
src=”http://dominicushoeve.com/wp-content/uploads/ktz/latest-high-resolution-
wallpaper-1920×1080-70558-pictures-high-resolution-wallpaper-
30whtvl34j4r12m8b0c1sa.jpg” alt=””> </li> <li> <img
src=”http://youghaltennisclub.ie/wp-content/uploads/2014/06/Tennis-Wallpaper-High-
Definition-700×300.jpg” alt=””></li> <li> <img src=”http://welltechnically.com/wp-
content/uploads/2013/08/android-wallpapers-700×300.jpg” alt=””></li> <li> <img
src=”http://welltechnically.com/wp-content/uploads/2013/09/android-widescreen-
wallpaper-14165-hd-wallpapers-700×300.jpg” alt=””></li> </ul> </div>
Código CSS
.slider {.slider { width: 95%; margin: auto; overflow: hidden;}
.slider ul { display: flex; padding: 0; width: 400%; animation: cambio 20s infinite
alternate linear;}
.slider li { width: 100%; list-style: none;}
.slider img { width: 100%;}
@keyframes cambio { 0% {margin-left: 0;} 20% {margin-left: 0;} 25% {margin-left: -
100%;} 45% {margin-left: -100%;} 50% {margin-left: -200%;} 70% {margin-left: -200%;}
75% {margin-left: -300%;} 100% {margin-left: -300%;}}
Mira aquí los resultados

3- Menú desplegable hover
Estos códigos dan como resultado un menú que al pasar el cursor sobre cada pestaña
se despliegan de forma automática los sub-menús.
Código HTML
<ul class=”acorh”>
<li><a href=”#”>OPCIÓN 1</a>
<ul>
<li><a href=”URL11″>Opción 1.1</a></li>
</ul>
</li>
<ul>
</ul>
</li>
<ul>
</ul>
</li>
</ul>
Código CSS
ul.acorh,
ul.acorh * {
margin: 0;
padding: 0;
border: 0;
}
ul.acorh {
margin: 10px auto;
padding: 0;
list-style: none;
width: 100%;
font-size: 18px;
}
ul.acorh li {
list-style: none;
}
ul.acorh li a {
display: block;
padding: 10px 10px 10px 20px;
background: #333;
color: #eee;
border-bottom: 1px solid #000;
border-top: 1px solid #666;
text-decoration: none;
box-sizing: border-box;
}
ul.acorh li ul {
max-height: 0;
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
transition: .3s all ease-in;
}
ul.acorh li li a {
padding: 10px 10px 10px 40px;
background: #999;
color: #000;
font-size: 16px;
border: 0;
border-bottom: 1px solid #ccc;
}
ul.acorc li li:last-child a {
border-bottom: 0;
}
ul.acorh li:hover ul {
max-height: 300px;
transition: .3s all ease-in;
}
ul.acorh li a:hover {
background: #666;
color: #fff;
}

4- Desbloquear contenido con click
Sencillas líneas de código que permiten desbloquear cualquier tipo de contenido con
un click.
Código HTML<input id=”activar” name=”activar” type=”checkbox”>

<label class=”inputlabel” for=”activar”>Clic para ver contenido</label>
<div class=”desplegable”>
Aquí podría ir cualquier tipo de elemento
</div>
Código CSS
#activar ~ .desplegable {display: none;overflow: hidden;}
#activar:checked ~ .desplegable {display: block;}

5- Cinta adhesiva en imágenes
Si quieres destacar de forma original las imágenes de tu web puedes lograrlo con los
siguientes códigos CSS para tu web. Estos te permitirán colocar cinta adhesiva en los
extremos de cada imagen dando un lindo efecto.
Código HTML
imagen con enlace
<a class=”cinta uno” href=”URL_ENLACE”>

<img border=”0″ src=”URL_IMAGEN” />
</a>
imagen sin enlace
<a class=”cinta uno”>

<img border=”0″ src=”URL_IMAGEN” />
</a>
Código CSS
.cinta {
position: relative;
text-align: center;
display: inline-block; *display: inline; zoom: 1;
margin: 20px auto 10px;
}
.uno:before,
.dos:before, .dos:after,
.tres:before, .tres:after,
.cuatro:before, .cuatro:after {
content: “”;
display: block;
width: 100px;
height: 30px;
position: relative;
top: 20px;
margin: auto;
background: rgba(255,255,200,0.6);
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}
/* Esto es sólo algo de estilo adicional para la imagen */
.cinta img {
border: 1px solid #ddd;
margin: 0 20px;
padding: 8px;
background: #fff;
text-align:center;
vertical-align:top;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}

6- Widget redes sociales (formato de fichero)
Las redes sociales nunca pueden faltar en un sitio web, con estos códigos CSS y HTML
podrás mostrar tus redes en formato de un fichero muy atractivo. 🙂
Código HTML
<link href=”//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css”
rel=”stylesheet”/>
<div class=”cartera”>
<span style=”font-family: Lobster, italic;font-size: 40px;”>En la Red</span>
<div class=”tarjeta tfacebook”>
<a class=”fa-facebook” href=”ENLACE_CTA_FACEBOOK”>Facebook</a>
</div>
<div class=”tarjeta tgoogle”>
<a class=”fa-google-plus” href=”ENLACE_CTA_GOOGLE+”>Google+</a>
</div>
<div class=”tarjeta ttwitter”>
<a class=”fa-twitter” href=”ENLACE_CTA_TWITTER”>Twitter</a>
</div>
<div class=”tarjeta tlinkedin”>
<a class=”fa-linkedin” href=”ENLACE_CTA_LINKEDIN”>Linkedin</a>
</div>
<div class=”tarjeta tpinterest”>
<a class=”fa-pinterest” href=”ENLACE_CTA_PINTEREST”>Pinterest</a>
</div>
<div class=”tarjeta tinstagram”>
<a class=”fa-instagram” href=”ENLACE_CTA_INSTAGRAM”>Instagram</a>
</div>
</div>
Código CSS
/* Reset */
.cartera, .tarjeta, .tarjeta a {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
/* Contenedor general */
.cartera {
position: relative;
width: 100%;
max-width: 500px;
margin: 40px auto 0;
text-align: center;
line-height: 56px;
font-size: 14px;
font-family: sans-serif;
}
/* Cada tarjeta */
.tarjeta {
position: relative;
width: 100%;
height: 30px;
margin: 0 auto;
padding: 0;
text-align: left;
border-bottom: 3px groove #eee;
}
/* Estado normal */
.tarjeta a {
position: relative;
display: block;
top: -6px;
left: 50%;
width: 96%;
margin-left: -48%;
padding: 0 0 0 16px;
line-height: 32px;
font-weight: normal;
border-radius: 16px 16px 0 0;
box-shadow: 0 -2px 2px rgba(0,0,0,.1), 0 0 20px rgba(0,0,0,.2) inset;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
transition: all .2s linear;
}
/* Elevación de las tarjetas */
.tarjeta a:hover {
line-height: 52px;
top: -26px;
}
/* Logos */
.tarjeta a:before {
width: 20px;
margin-right: 10px;
text-align: center;
font-family: Fontawesome;
font-size: 18px;
}
/* Sombra parte inferior */
.tarjeta a:after {
content: “”;
position: absolute;
bottom: 0;
left: 50%;
width: 102%;
margin-left: -51%;
height: 2px;
display: block;
border-radius: 80px 80px 0 0 ;
box-shadow: 0 -2px 6px #666;
z-index: -1;
}
/* Colores Twitter */
.tarjeta.ttwitter a {
color: #ddd;
background-color: #01AFEC;
border-top: 2px solid #43CFFE;
}
/* Colores Google+ */
.tarjeta.tgoogle a {
color: #333;
background-color: #DB4A37;
border-top: 2px solid #E88C80;
}
/* Colores Facebook */
.tarjeta.tfacebook a {
color: #ccc;
background: #3B559F;
border-top: 2px solid #6B83C9;
}
/* Colores Linkedin */
.tarjeta.tlinkedin a {
color: #333;
background: #007BB6;
border-top: 2px solid #83A9CB;
}
/* Colores Pinterest */
.tarjeta.tpinterest a {
color: #ccc;
background: #CB2027;
border-top: 2px solid #E88C80;
}
/* Colores Instagram */
.tarjeta.tinstagram a {
color: #ccc;
background: #42719D;
border-top: 2px solid #83A9CB;
}

7- Envejecer imágenes
Aquí va otra buena manera de editar imágenes de tu web mediante códigos CSS,
estos le dará un efecto de antiguo a la imagen que se lo apliques.
Código HTML
<div class=”antiguo”>
<a href=”URL_ENLACE”><img src=”URL_IMAGEN” /></a>
</div>
Código CSS
.antiguo {
position:relative;
display:table; /* Para centrado de imagen */
margin: 0 auto;
}
/* Sólo para Blogger que mete cosas raras al subir imágenes */
.antiguo a {
margin:0 auto !important;
}
.antiguo a:after {
content:””;
position: absolute;
top: 0;
left:0;
display:block;
width:100%; /* La caja solapada ocupará todo el ancho y alto*/
height: 100%;
/* A continuación la imagen que le da el aspecto antiguo y un color semitransparente
*/
background: rgba(162,148,85,.5) url(“http://4.bp.blogspot.com/-
gFSvXmc_4dk/URBT3_rCFLI/AAAAAAAAIE4/TXM7uQ5Teb4/s1600/textura.png”) no-
repeat center center;
/* Independientemente de su tamaño, el fondo se extiende ocupando toda la caja */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/* Para teminar, unas sombritas oscuras */
-webkit-box-shadow: inset 0 0 80px #333;
-moz-box-shadow: inset 0 0 80px #333;
-o-box-shadow: inset 0 0 80px #333;
box-shadow: inset 0 0 80px #333;
}

8- Enlaces sobre imágenes, con efecto flow
Y seguimos con ediciones a imágenes, en este caso podrás colocar un menú en la
parte inferior de la imagen con sus respectivos enlaces. Una forma muy buena para
agregar informacion a las imágenes.
Código HTML
<div class=”imagelinks”>
<div class=”links”>
<a href=”URL1″>Inicio</a>|<a href=”URL2″>Bio</a>|<a href=”URL3″>Contacto</a>
</div>
<img src=”URL_IMAGEN” />
</div>
Código CSS
.imagelinks {
display: block;
position: relative;
width: 100%;
max-width: 300px;
margin: 0 auto;
padding: 0;
border: 4px solid black;
}
.imagelinks img {
max-width:100%;
border: 0;
vertical-align: top;
}
.links {
width: 100%;
position:absolute;
bottom:0;
text-align:center;
background: #FFFFFF;
-moz-transition: all 0.6s ease;
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}
.links a {
display: inline-block;
padding: 8px;
color:#000000;
}
.links:hover {
zoom: 1;
filter: alpha(opacity=100);
opacity:1;
}
9- Letra capital
Aquí lo que enditaremos son los textos, dando a la primer letra de un texto un
tamaño y color destacado.
Código HTML
<p>Aqui colocas cualquier texto</p>
Código CSS
p:first-letter {
display:block;
margin:5px 0 0 5px;
float:left;
color:#FF3366;
font-size:60px;
font-family:Georgia;
}

10- Mover 1px el enlace al hacer click
Ahora le toca la edición a los enlaces, con este codigo CSS le otorgas un movimiento
de 1px al hacer click.
Código HTML
<p>Los códigos CSS o en español (…) <a href=”#” title=”Enlace”>documento</a>
estructurado escrito en un lenguaje de marcado.</p>
Código CSS
a:active {
position: relative;
top: 1px;

11- Tabs animados solo con CSS
Con este código puede poner una sección de tabs animados, sin la necesidad de
utilizar jQuery.
Código HTML
<div class=”tabs”>
<div class=”tab”>
<input type=”radio” id=”tab-1″ name=”tab-group-1″ checked>
<label for=”tab-1″>Tab 1</label>
<div class=”content”>
<p>Aquí va algún contenido para el tab 1</p>
</div>
</div>
<input type=”radio” id=”tab-2″ name=”tab-group-1″>
<img src=”http://lorempixum.com/200/100/technics/”>
</div>
</div>
<input type=”radio” id=”tab-3″ name=”tab-group-1″>
<img src=”http://lorempixum.com/200/100/nightlife/”>
</div>
</div>
</div>
Código CSS
.tabs {
position: relative;
min-height: 200px;
clear: both;
margin: 25px 0;
}
.tab {
float: left;
}
.tab label {
background: #eee;
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 1px;
}
.tab [type=radio] {
display: none;
}
.content {
position: absolute;
top: 28px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc;
overflow: hidden;
}
.content > * {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
-webkit-transition: all 0.6s ease;

-moz-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
[type=radio]:checked ~ label {
background: white;
border-bottom: 1px solid white;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
}
[type=radio]:checked ~ label ~ .content > * {
opacity: 1;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
}

12- Menú circular animado
Usa los siguientes códigos CSS en tu página web para crear un atractivo menú circular
animado. (Home, informacion, contacto, redes sociales)
Código HTML
<ul class=”menured”>
<li>
<a class=”red1″></a>
<div>
<h5>Para empezar</h5>
<a href=”javascript:void();”>Inicio</a>
<a href=”javascript:void();”>Portfolio</a>
</div>
</li>
<li>
<div>
<h5>Información</h5>
<a href=”javascript:void();”>Sobre nosotros</a>
<a href=”javascript:void();”>Proyectos</a>
</div>
</li>
<li>
<div>
<h5>En redes</h5>
<a href=”javascript:void();”>Twitter</a>
<a href=”javascript:void();”>Facebook</a>
<a href=”javascript:void();”>Google+</a>
</div>
</li>
<li>
<div>
<h5>Contacto</h5>
<a href=”javascript:void();”>eMail</a>
<a href=”javascript:void();”>Formulario</a>
<a href=”javascript:void();”>Localización</a>
</div>
</li>
</ul>
Código CSS
<style>
ul.menured * {margin: 0 auto; padding: 0; text-indent: 0;
-moz-transition: all .5s ease-in-out;-webkit-transition: all .5s ease-in-out;transition: all
.5s ease-in-out;}
ul.menured {list-style: none; width: 1800px; max-width: 100%; margin: 0 auto; text-
align: center;}
ul.menured li {position: relative; display:inline-block; -moz-box-sizing: border-box; -

webkit-box-sizing: border-box; box-sizing: border-box; width:44px; height: 44px;
overflow: hidden; margin: 2px; padding: 5px; border-radius: 44px; border: 1px solid
transparent; background: #fff;
-moz-box-shadow: 1px 1px 3px #555; -webkit-box-shadow: 1px 1px 3px #555; box-
shadow: 1px 1px 3px #555;}
ul.menured li a[class^=red] {position: absolute; top: 5px; left: 5px; display: block;width:
32px;height: 32px; -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg);
transform: rotate(0deg);}
a.red1 {background:url(https://2.bp.blogspot.com/-
BLOpL79hRq0/UdNeyumjXYI/AAAAAAAAK7E/4gCBEFR4JRk/s32/home.png) no-repeat;}
rvP0hlwHzEk/UdNeoq9rEgI/AAAAAAAAK60/Nq_kzwUPiFY/s32/info.png) no-repeat;}
5H9SkAxPuXQ/UdNep8XWLzI/AAAAAAAAK68/BkXJ4YvmGOg/s32/redes.png) no-
repeat;}
kyZIdwOjJmI/UdNen_SC6dI/AAAAAAAAK6s/BpmHTKLYkNg/s32/contacto.png) no-
repeat;}
ul.menured li div {margin: 0px 8px 5px 38px; text-align: center;}
ul.menured li div h5 {text-align: left; text-transform: uppercase;}
ul.menured li div a {display: inline;margin: 0 3px;font-size: 12px; color: #F36900;}
ul.menured div a:hover {color: grey;}

ul.menured li:hover {width:240px;}
ul.menured li:hover a[class^=red] {-moz-transform: rotate(720deg); -webkit-transform:
rotate(720deg); transform: rotate(720deg);}
</style>

13- Widget de redes sociales con efecto Zoom
Si estas buscando destacar tus redes sociales para que tus lectores te sigan puede
que este widget te venga bien.
Código HTML
<div class=”expandir”>
<ul>
<li><a href=”URL_Destino1″><img src=”https://3.bp.blogspot.com/-
eGu2x_YLqKU/T1kGDFwznoI/AAAAAAAAB_w/NS5i4Hqxap4/s400/nav-
facebook.png”/><span>FACEBOOK</span></a></li>
w3_KpmEDVzM/T1kGD9inLtI/AAAAAAAACAg/tuPkIH5aZrQ/s400/nav-
twitter.png”/><span>TWITTER</span></a></li>
AzwYElFbe0k/T1ksg16heiI/AAAAAAAACA4/Ft2bKsyl4oE/s400/nav-
google2.png”/><span>GOOGLE PLUS</span></a></li>
w_v6EZR3zNc/T1kGDd-S9RI/AAAAAAAAB_4/gI2ANh3lvZ0/s400/nav-
linkedin.png”/><span>LINKEDIN</span></a></li>
ZsJYr_1jqSc/T1kshWqfRSI/AAAAAAAACBQ/KLB6asXBGrE/s400/nav-
youtube.png”/><span>YOUTUBE</span></a></li>
w1htIE08Ew4/T1kGDhMCrKI/AAAAAAAACAQ/L2hlwp1qYio/s400/nav-
rss.png”/><span>RSS</span></a></li>
</ul>
</div>
Código CSS
/* Contenedor general y reset de margin y padding */
.expandir * {
margin: 0;
padding: 0;
}
.expandir {
font-family:Arial, Helvetica, sans-serif;
line-height:normal;
margin:20px auto 30px;
height:80px;
width:530px;
}
/* Las imágenes irán en forma de lista */
.expandir ul {
padding-top:10px;
margin-left:10px;
}
/* Se hacen flotar los elementos para que queden en línea y se elimina el estilo que
podría haber predefinido para listas */
.expandir ul li {
float:left;
list-style-type:none;
}
/* Anulamos estilo predifinido para enlaces en listas */
.expandir ul li a {
text-decoration:none;
}
/* Estilo de cada imagen en situación inicial y transición suave */
.expandir ul li a img {
width:32px; /* Ancho inicial imagénes. 50% real */
height:32px; /* Alto inicial imagénes. 50% real */
border:none;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
transition: all .3s ease-in;
}
/* El texto que acompaña a las imágenes no se ve inicialmente */
.expandir ul li a span {
display:none;
}
/* Mostramos el texto al hacer hover */
.expandir ul li:hover a span {
display:block;
font-size:14px;
text-align:center;
color:#000;
}
/* Agrandamos la imagen al hacer hover */
.expandir ul li:hover a img {
width:64px;
height:64px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}

14- Redondear imagen
Cuantas veces necesitaste hacer circular una foto para tu web y tuviste que recurrir a
editores como photoshop para hacerlo?. No se tu pero yo lo hice varias veces. 🙁 Con
el siguiente simple codigo CSS podrás lograr un efecto circular de forma muy fácil.
Código HTML
<img class=”circular-square” src=”URL de imagen” />
Código CSS
.circular-square {
border-radius: 50%;
}

15- Widget de categorías
Excelentes códigos CSS y HTLM para crear un widget para que muestres a tus lectores
las categorías de tu blog.
Código HTML
<div class=”mis-categorias”><a href=”URL CATEGORIA 1″>CATEGORIA 1</a></div>
Código CSS
.mis-categorias{
width: 100%;
height: 62px;
background-color: #0d7de0;
padding: 17px;
margin-bottom: 4px;
text-align: center;
text-transform: uppercase;
font-family: ‘Open Sans’, Arial;
font-size: 1.2em;
color: #fff;
}
.mis-categorias a{
color: #fff;
}
.mis-categorias a:hover{
color: #fff;
}
.mis-categorias:hover{
background-color: #FF5733;
}

16- Cajas de contenidos de colores
Una buena forma de resaltar un texto es colocandolo en una caja colorida, con estos
códigos podrás crearlas fácilmente. Estas cajas son las que he usado en este post para
resaltar los códigos CSS y HTML para tu pagina web.
Código HTML
<div class=”content-box-blue”>
Colocas aquí el texto que deceas resaltar con esta caja de contenido
</div>
Código CSS
/* Content Boxes
———————————————————— */
.content-box-blue,
.content-box-gray,
.content-box-green,
.content-box-purple,
.content-box-red,
.content-box-yellow,
.content-light-blue {
margin: 0 0 25px;
overflow: hidden;
padding: 20px;
}
.content-box-blue {
background-color: #d8ecf7;
border: 1px solid #afcde3;
}
.content-box-gray {
background-color: #e2e2e2;
border: 1px solid #bdbdbd;
}
.content-box-green {
background-color: #d9edc2;
border: 1px solid #b2ce96;
}
.content-box-purple {
background-color: #e2e2f9;
border: 1px solid #bebde9;
}
.content-box-red {
background-color: #f9dbdb;
border: 1px solid #e9b3b3;
}
.content-box-yellow {
background-color: #fef5c4;
border: 1px solid #fadf98;
}
.content-light-blue {
background-color: #B2FBFC;
border: 1px solid #92DCFE;
}

17- Boton
En tu sitio web siempre vas a necesitasr insertar botones, con los siguientes códigos
CSS y HTML podrás crear unos muy llamativos. Para el caso este es un botón de color
azul, pero puedes tomar la base de código CSS y crear de los demás colores. 🙂
Código HTML
<a class=”btnAzul” href=”URL Del Botón”>Texto Del Botón</a>
Código CSS
a.btnAzul {
display: block;
width: 250px;
height: 60px;
padding: 25px 0 0 0;
margin: 0 auto;
background: #4682B4;
background: -moz-linear-gradient(top, #87CEEB 0%, #4682B4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87CEEB),
color-stop(100%,#4682B4));
box-shadow: inset 0px 0px 6px #fff;

-webkit-box-shadow: inset 0px 0px 6px #fff;
border: 1px solid #62C2F9;
border-radius: 10px;
font: bold 25px Helvetica, Sans-Serif;

text-align: center;
text-transform: uppercase;
color: #3090C7;
text-shadow: 0px 1px 2px #62C2F9;
}
18- Menú multicolor
Para finalizar te dejo este llamativo menú con sus pestañas multicolor.
Código HTML
<body>
<div id=”menu”>
<ul>
<li id=”item-uno”>
<a href=”#”>Enlace uno</a>
</li>
<li id=”item-dos”>
<a href=”#”>Enlace dos</a>
</li>
<li id=”item-tres”>
<a href=”#”>Enlace tres</a>
</li>
<li id=”item-cuatro”>
<a href=”#”>Enlace cuatro</a>
</li>
<li id=”item-cinco”>
<a href=”#”>Enlace cinco</a>
</li>
<li id=”item-seis”>
<a href=”#”>Enlace seis</a>
</li>
</ul>
</div>
</body>
Código CSS
body {
margin: 0;
padding: 0;
font: normal 13px arial, helvetica, sans-serif;
background: #000;
}
#menu {
width: 900px;
margin: 0 auto;
margin-top: 50px;
}
#menu ul {
list-style: none;
margin: 0;
}
#menu ul li {
margin: 0;
float: left;
}
#menu ul li a {
margin:0 2px;
width: 138px;
font-weight:bold;
font-size:1.5em;
text-align: center;
line-height: 44px;
display:block;
text-decoration: none
}
#menu ul li a:hover {
color:#000;
}
#item-uno a {
border-bottom:5px solid #f00;
color: #f00
}
#item-dos a {
border-bottom:5px solid #f80;
color: #f80;
}
#item-tres a {
border-bottom:5px solid #ff0;
color: #ff0;
}
#item-cuatro a {
border-bottom:5px solid #8f0;
color: #8f0;
}
#item-cinco a {
border-bottom:5px solid #0ff;
color: #0ff;
}
#item-seis a {
border-bottom:5px solid #08f;
color: #08f;
}
#item-uno a:hover {
background:#f00;
}
#item-dos a:hover {
background:#f80;
}
#item-tres a:hover {
background:#ff0;
}
#item-cuatro a:hover {
background:#8f0;
}
#item-cinco a:hover {
background:#0ff;
}
#item-seis a:hover {
background:#08f;
}
Fuente: https://luisforgiariniblog.com/codigos-css-para-paginas-web/
CURSOS VIRTUALES
A continuación les listo los cursos de formación virtual disponibles en la plataforma www.senasofia.edu.co
con los cuales pueden completar la formación.

Noveno - Semanas de Receso V2 PDF

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Noveno - Semanas de Receso V2 PDF

Cargado por

Copyright:

Formatos disponibles

INSTITUCIÓN EDUCATIVA TÉCNICA INDUSTRIAL

“RAFAEL NAVIA VARON”

Desarrollo Web con HTML + CSS

Dispositivos con ANDROID:

En la cual han incluido:

- Encabezado: Logotipo + Nombre de la empresa.

# Titulo Actividad Fecha de Tipo de

1) Después del formulario insertar el código que se indica en el cuadro azul.

1) Agregar el código después de la información empresarial, antes de la etiqueta

7 Envejecer En la página NUESTRA EMPRESA, debe buscar en internet cuatro imágenes de

1) Insertar estas imágenes en una tabla 1x4.

9 Letra capital En la página INICIO aplicar esta propiedad al párrafo introductorio.

1) Agregar el código al párrafo de inicio.

11 Tabs En la página PRODUCTOS, en el punto 3 se crearon subcategorías, antes del menú

17 Boton En la página CONTACTENOS, debio haber creado un formulario donde el cliente

18 Códigos CSS para páginas web

Que es el código CSS?

 Genera un código más fácil de mantener

1- Incluir el estilo como atributo de la etiqueta HTML

Se pueden emplear instrucciones de estilo CSS con el atributo style dentro de

<p style=”font-size: x-large”>

Es la opción menos aconsejada y usada, puesto que no permite separación entre

2- Incluir el estilo a nivel de página

.imp { font-size: x-large; }

3- Incluir el estilo en archivo .css independiente, y usar a nivel de sitio

<link rel="stylesheet" type="text/css" href="css/Layout.css">

.imp { font-size: x-large; }

18 Códigos CSS para páginas web

table { font-family: “Lucida Sans Unicode”, “Lucida Grande”, Sans-Serif;

td { padding: 8px; background: #e8edff; border-bottom: 1px solid #fff;

Aquí tienes los resultados

Mira aquí los resultados

Mira aquí los resultados

Código HTML<input id=”activar” name=”activar” type=”checkbox”>

Mira aquí los resultados

<a class=”cinta uno” href=”URL_ENLACE”>

imagen sin enlace

<a class=”cinta uno”>

Mira aquí los resultados

Mira aquí los resultados

Mira aquí los resultados

Mira aquí los resultados

Mira aquí los resultados

-webkit-transform: translate3d(0, 0, 0);

-webkit-transition: all 0.6s ease;

Mira aquí los resultados

ul.menured li {position: relative; display:inline-block; -moz-box-sizing: border-box; -

ul.menured div a:hover {color: grey;}

Mira aquí los resultados

Mira aquí los resultados

Mira aquí los resultados

Mira aquí los resultados

Mira aquí los resultados

box-shadow: inset 0px 0px 6px #fff;

font: bold 25px Helvetica, Sans-Serif;

Mira aquí los resultados

También podría gustarte