LENGUAJE DE PROGRAMACION CONCEPTO Es el medio a través del cual los usuarios ordenan al computador (dispositivo),realizar tareas determinadas. El crea/elabora programas para dar las ordenes respectivas. TIPOS DE LENGUAJES *Lenguaje de programación tercer nivel *Visual fox *C *C++ *Visual Basic *lenguaje de etiquetas *HTML *HTML5 *CSS1-2 *CSS-3 *XML HTML Hipertext Mark Language (Lenguaje de marcas en hipertextos) Hipertexto: texto, imagen Marcas: Etiquetas ESTRUCTURA BASICA DE UNA PAGINA WEB <HTML> <HEAD><TITLE>PRIMERA PRACTICA </TITLE> </HEAD> <BODY> </BODY> </HTML> LISTAS DE LAS ETIQUETAS BASICAS <CENTER>=Permite centrar <HR>=Linea horizontal <BR>=Espacio <FONT>= Font <FONT COLOR>= Color del rotulo <TABLE>= Tabla <TR>= Fila <TD>= Celda <MARQUEE>= Le da movimiento <EMBED SRC>= Permite insertar música, video, pdf. <IMG SRC>Permite insertar imagen <H1>=Rotulo de la letra más grande <H2>= Rotulo de la letra más pequeño <H3>= Rotulo de la letra más pequeño <H4>= Rotulo de la letra más pequeño <H5>= Rotulo de la letra más pequeño <H6>= Rotulo de la letra más pequeño <B>= Negrita <I>= Itálica <u>= Cursiva FUNCIÓN PARÁMETROS, Y DOS EJEMPLOS DE CADA ETIQUETA <HR>=Crea una line horizontal <hrwidth>=ancho de la línea <hrheight> indica el alto de la línea <FONT> <Font bgcolor> color del fondo <Font color> color de letras <TABLE> <tablewidht> ancho de la linea <tableheigth> alto de la tabla <TR> <trwidth> ancho de la fila <trheight> alto de la fila <TD> <tdwidth> ancho de la celda <tdheight> alto de la celda <EMBED SRC> <embedsrcwidth> ancho del video <embedsrcheight> altura del video COLOR Color=”red” se escribe directamente el color Color= “#000fff” se escribe el color mediante código <IMG SRC> <img src width> ancho de la imagen <Img src height> alto de la imagen HOSTING GRATUITOS http://www.hostinger.com http://www.webhost.com HOSTING Espacio virtual dentro de internet que se compra o se da gratis según su almacenamiento de disco virtual. CONVERTIDOR DE VIDEO Total video converted (versión completa) SOFTWARE Plu-ing *ADOBE FLAS PLAYER *ADOBE AIR <HTML> <HEAD> <TTTLE>TURISMO EN </HEAD> si n título BAÑO5 DE AI,IBATO</TTTLE> <BODY BGCOLOR=,,#FFFFFF,, COLOR=''#340D87''> <TR> <CENTER> <TABL E ITIIDTH= " IOOOPX,' BORDER= " O'' BGCOLOR='' #DDEADE'' > <TR> <TR HEIGHT=''4OOPX''> <TD ALTGN=''JUSTIFY'' !I'IDTH=,' SOOPX''> <MARQUEE DIRECTION="Up" SCROLLDELAy="1" SCROLLAMOUNT"l"> < B><I>< FONT FAC E='' VERDANA, TAHOft,lA''>< FONT COLOR= " #3 40D87 " > <P>PATLON DEL DTABLO.-</B></r><FONT COLOR="#000000">E] pailón del Oiablo tiene aproximadamente 10O metros de altura. Esta hermosa e impresionante cascada tiene tres.saltos de agul.los mismos que debido a la fuerza cbn 1a que caen, forman un rmpreslonante remo I i no. es la cascada más impresionante de la regjón, visitada por turistas nacionales y extranjeros, quq ]1el¡an atraídos pof la ñermósura de su' agua color turquesa. La temperatura de1 agua es de aproximadamente unos 23o c. rodo el trayecto, desde Baños a RÍo verde, tiene sus atractivos: la represa hidroeléctrica de ngoyán, 'los dos túne'les, 1os paisajes naturales, las'mini cascadas que se usañ para lavar autos, 1as ventás de-frutas propiás de la zona. para observarla más de cerca debe descender por un sendero oue se encuentra perfectamente señalizado, gu€ a través de orbuídeas, hortendias y veqetación semi-selváti.ca, que llega hasta un puente col'gante y luego se enlontÉará en el t'r lo mlsmooe la cascada.<lP> <BR> <rMGsRC="TURrsMos.JPG" hirDTH="80px" HETGHT="80PX"><F>E] turismo de1 pueblo se relaciona íntimamente con el resto del cantón; e1 princ'ipa1 atractivo'del cantón es la naturaleza, dotada de una alta biodiveráidad. esui¡a de las ooblaciones más turísticas del Ecuador; es también conocida como "La puerta del Dorado" v también conocida como: "El pedacito de Cielo" debido a la tranouilidadoue brindan su entorno. Además ofrece muchas atracciones: se ouede'visitar Ta Basílica de la virgen de1 Rosario de ngua santa, se puede'visitar las diferentes cascadas, ascender-al tungurahua (volcán), probár las melcochas (dulces hechos a base de caña de azúcar), hay variedades dé ártesanías hechas en Salsa y de tagua hechas en otros lugares y révendidas en esta localidad.</p> </runReuEe> <TD> <TD ALIGN=.'CENTER,' WIDTH='' sOOPX"> <IMG SRC=''PORTADA. ]PG'' I,IIDTH=', SOOPX,' HETGHT=.'4OOPX''> </r,u></ru <TR HEIGHT=''3OOPX'.> <TD ALTGN=,'CENTER'' WIDTH='' 5OOPX''> <MARQUEE DrREcTroN="DoutrN" ScRoLLDELAy="f." scRoLLAMouNT="f-"><p>Lo MEJoR DEL "100PX"> </to> <./rR> <TR HEIGHT="300Px"> <TD ALIGN=''CENTER'' i,1¡TDTH='' sOOPX"> <MARQU EE DI RECTION="DOWN " SCROL LDELAy= " L" SCROL LAMOUNT= " 1"> <IMG SRC=',IMAGEN,]PG'' WI,DTH=''ZSOPX,' HE,IGHT=''3OOPX', BC}RDER=''4''> <IMG SRC=''IMAGEN4, JPG'' TdIDTH=''2SOPX'' HEIGHT=''3OOPX'' BORDER=''4"> ECUADOR</P> <IMG SRC="DESCARGA. JPG,' u/IDTH=''ZSOPX'' HEIGI.Ir= </.ro> <TD ALIGN=''CENTER'' Iñ'IDTH='NsOOPX''> <IMG SRC="IMAGEN5. JPG'' !{IDTH=''SOOPX'' HEIGHT= '' 3OOPX'' BoRDER=''4.,></MARQUEE> Santa se encuentra en 1a provincia de eágina 1 </MARQUEE> </to> <TD ALTGN=''JUSTTFY'' WrDIH=,,5OOPX"> <B><I><FONT COLOR=" #34OD87 "> <P> AGUAS TERMALES .-</t></S> <FoNTCOLoR="#000000">gaños de Rgua Tungurahua solamente a 180 rm de qu'ito y 35 rm de Ambato. La ciudad turística de está ubicado en un valle con cascadas y aguas termales a lado del volcán Tungurahua con una altura de 5.0L6 metros. Baños tiene una población con 20.000 habitantes, esta a una altura de L.826 metros y posee temperaturas promedios de 20'C, el cantón les invita a descansar en sus piscinas de aguas termales y spas, aventura para toda la familia o deportes extremos comó rafting, escaladas, canyonilg; .canopy,. trekking, mountáinUtking o puenting (bungéá jumping) . </ro¡¡T></P> </to> </tw <TR HEIGHT="500Px"> <TD ALIGN="CENTER" I¡VIDTH=" 500pX"> <H 3>DEPORTES EXTREMOS</H3><BR> <B>RAFTTNG.-</B>Los Tours de nafting en gaños Ecuador es una experiencfaún'ica y al mismo tiempo una aventura emocioñante. Nuestros tours se orghnizan de medio dia en el río'Pastaza, saliendo por 1a mañana a las 9:00 am y üe regreso a las 1-4:00.Fo,.o saliendo á las 2:00 irm y de regreso 6:00 pm. ¡toñecesitás tener experiencia para realizar este deporte oescripción : el tour de raft'ing en gaños ecuador inicia en nuestra oficina en donde les entregamos todo el equipo necesario para realizar 1a actividad e'l cual consiste peonr: traje de neopreno, casco, chalecó salvavidas y zapatillas de'lona. 40 minutos viajaremos de gaños hasta el sectoi de la penal en el rio pastaza donde e1 guía dará-una charla técnica sobre comandos de remo , comandos de seguridad, haremos una práctica en tierra y lueqo entraremos al rio. si-te.gusian las emociohes fuertes, te invitamoÉ a vtvir está fantástica experiencia, con nuestro equ'ipo de guias altamente calificados y entrenados en aguasrapidas.<BR> <IMG SRC=" TMAGEN22 . J PG'' TdIDTH=" ]"OOPX'' HEIGHT='' ].OOPX''><BR> <B>KAYAK.*</g>se 1o puede practicar en varios ríos del cantón. En la parroquia Rio ttegro se encuentra el Rio Topo considerado por algunos expertos cómo urio de los ríos más técnicgs y de los méjores del mundb para-realizai este deporte.<BR> <IMG SRC=.'KAYAK. ]PG', IdiDTH=',lOOPXT HEIGHT=''1OOPX'';<BR></¡o, <TD ALIGN=''CENTER" hIIDTH='' sOOPX''> <EMBED SRC=..ECUADOR.AVI'' !IIIDTH=..SOOPX.' HEIGHT=''45OPX'' LooP=''1'' AUToSTART=''TRUE''> </¡a> </r«> </TABLE> <BR> <TABLE WIDTH=''IOOOPX'' HEIGHT=''25''> <TR> <TD ALIGN=..CENTER,'><PRE>DERECHOS RESERVADOS POR: ]HONNYDELGADo VrÑAN</PRE></to> </TR> </TABLE> </BoDY> </HTML> <HTML> <HEAD><TITLE>Islas Galapagos</TITLE> </HEAD> <BODY BGCOLOR="000999"> <CENTER><FONT COLOR="RED"> <U><H1>BIENVENIDOS A CONOCER UNA DE LAS MARAVILLAS DEL MUNDO</H1></U></FONT></CENTER> <CENTER><H3><I><FONT COLOR="FFFFFF"><MARQUEE ALIGN="TOP" BGCOLOR="RED" DIRECTION="RIGHT" WIDTH="40%" SCROLLDELAY="100">Islas Galapagos Del ECUADOR</MARQUEE></FONT></I></H3></CENTER><BR> <TABLE WIDTH="100%" BGCOLOR="#011111" BORDERCOLOR="FFFFFF" BORDER="5"> <TR> <TD WIDTH="80%"> <P ALIGN="JUSTIFY"><FONT BGCOLOR="#FFFFFF" COLOR="AQUA"><FONT SIZE="3"><B><I>"Las islas Galápagos (también islas de los Galápagos y oficialmente archipiélago de Galápagos) constituyen un archipiélago del océanoPacífico ubicado a 972 km de la costa de Ecuador. Está conformado por 13 islas grandes con una superficie mayor a 10 km, 6 islas medianas con una superficie de 1 km a 10 km y otros 215 islotes de tamañopequeño, además de promontorios rocosos de pocos metros cuadrados, distribuidas alrededor de la línea del ecuador terrestre. Las islas fueron declaradas Patrimonio de la Humanidad en 1900 y en el 2000 por la UNESCO. El archipiélago tiene como mayor fuente de ingresos el turismo y recibe 200 000 turistas al año. También se ha desarrollado el turismo ecológico con el fin de preservar las especies.<BR> La región fue el hábitat de El Solitario George, el últimoespécimen de la especie Tortuga gigante de Pinta, extinta el 24 de junio del 2012. Las islas también son hábitat de especies como tortugas marinas, iguanas, lagartos, cormoranes, albatros, leones marinos y pingüinos."</P> <TD WIDTH="20%"> <MARQUEE DIRECTION="UP" SCROLLDELAY="1" SCROLLAMOUNT"1"> <IMG SRC="IMAGEN1.JPG"></MARQUEE></TD> <TABLE ALIGN="LEFT" WIDTH="20%" HEIGHT="40%" BORDER="1"> <TR> <TD WIDTH="10%" HEIGHT="20%"> <img ALIGN="RIGHT" src="IMAGEN11.jpg" WIDTH="50%" <HEIGHT="15%"> <img ALIGN="CENTER" src="IMAGEN4.jpg" WIDTH="100%" <HEIGHT="50%"><MARQUEE DIRECTION="RIGHT" SCROLLDELAY="2" SCROLLAMOUNT"2"><FONT COLOR="AQUA" TEXT="AQUA"><H6>EXPERIENCIA UNICA</H6></FONT></MARQUEE> </TD> </TR> <TR> <TD ALIGN="JUSTIFY"><FONT BGCOLOR="#FFFFFF" COLOR="AQUA"><P><B>Las islas</B> se formaron hace 5 millones de años como resultado de actividad tectónica en el fondo marino. La actividad volcánica actual aún sigue expandiendo al archipiélago. El archipiélago es uno de los grupos volcánicosmás activos del mundo. Muchas de las islas son solamente las puntas de algunos volcanes y muestran un avanzado estado de erosión. Islas como Baltra y North Seymour emergieron del océano por una gran actividad tectónica.<BR> Un estudio realizado en el año 1952 por los historiadores Thor Heyerdahl y ArneSkjolsvold, reveló que se encontraron cerámicas de algunos pueblos (posiblemente Incas), antes de la llegada de los españoles. Sin embargo no se han encontrado tumbas, vasijas y ninguna construcción antigua que revele asentamientos antes de la colonización.</FONT></P> </TR> </TABLE> <BR> <TABLE ALIGN="RIGHT" WIDTH="20%" HEIGHT="60%" BORDER="1"> <TR> <TD WIDTH="10%" HEIGHT="20%"> <img ALIGN="RIGHT" src="imagen2.jpg" WIDTH="50%" <HEIGHT="20%"> <img ALIGN="CENTER" src="IMAGEN8.jpg" WIDTH="100%" <HEIGHT="50%"><MARQUEE SCROLLDELAY="2" SCROLLAMOUNT"2"><FONT COLOR="AQUA" TEXT="AQUA"><H6>EXPERIENCIA UNICA</H6></FONT></MARQUEE> </TD> </TR> <TR> <TD> <EMBED SRC="LEY DE ATRACCION.PDF" WIDTH="100%" HEIGHT="100%"> </EMBED> </TD> <TR HEIGHT="10%"> <TD> <MARQUEE DIRECTION="RIGHT"><FONT FACE="CAMBRIA" COLOR="RED"><H2>PDF</H2></FONT></MARQUEE> </TD> </TR> </TR> </TABLE> <CENTER> <TABLE WIDTH="40%" HEIGHT="1%" BORDERCOLOR="#FFFFFF" BORDER="2"> <TR> <TD WIDTH="500PX"><FONT COLOR="#FFFFFF"><H3> INICIO</H3></FONT> </TD> <TD ALIGN="JUSTIFY" WIDTH="500PX"><FONT COLOR="#FFFFFF"><H3> NOSOTROS</H3></FONT> </TD> <TD ALIGN="JUSTIFY" WIDTH="500PX"><FONT COLOR="#FFFFFF"><H3> CONTACTOS</H3></FONT> </TD> </TR> </TABLE> </CENTER><BR> <CENTER> <img ALIGN="CENTER" src="IMAGEN10.jpg" WIDTH="90%" <HEIGHT="90%"> </CENTER> <EMBED ALIGN="RIGHT"SRC="FONDO.MP3" AUTOSTART="FALSE" WIDTH="11%" HEIGHT="20%"> <EMBED ALIGN="RIGHT"SRC="ISLAS.WMV" WIDTH="11%" HEIGHT="20%"> <BR> <BR> <CENTER> <A HREF="INICIO.HTML" TARGET="BLANK"><FONT COLOR="#FFFFFF">INICIO</FONT></A> <A HREF="NOSOTROS.HTML" TARGET="BLANK"><FONT COLOR="#FFFFFF">NOSOTROS</FONT></A> <A HREF="CONTACTOS.JPG" TARGET="BLANK"><FONT COLOR="#FFFFFF">CONTACTOS</FONT></A> <BR> MANDANOS UN MENSAJE VIA E-MAIL A <A HREF="MAILTO:[email protected]"><FONT COLOR="RED">[email protected]</FONT></A></CENTER> </BODY> </HTML> CSS Son formatos, plantillas a taves de los cuales se optimiza la presentación y la organización de los sitios web. CSS= CASCADE STYLE SHEET (hojas de estilos encascadas) Es un lenguaje de etiquetas REGLAS= Estilo que se aplica a un selector especifico FORMATO REGLA Body { Color: #000; Background:#ccc; } PAGINA WEB APLICANDO CSS CODIGO HTML <!DOCTYPE> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="description" content="Celebracion de la navidad"> <meta name="keywords" content="navidad,celebracion"> <link rel="stylesheet" href="css/estilos.css"> <link rel="stylesheet" href="menu/estilos.css"> <link rel="stylesheet" href="fonts.css"> <link rel="stylesheet" href="fonts1.css"> <script type="text/javascript" src="http://www.jimdo.com/l/usersnippets/snowfall.min.js"> </script> <style type="text/css"> body, a:hover {cursor: url(http://www.jimdo.com/l/usersnippets/rentier.cur), url(http://www.jimdo.com/l/usersnippets/rentier.png), auto !important;} </style> <title>paginanavideña</title> <title>holamundo</title> <script type="text/javascript"> alert("holamundo");</script> </head> <body> <div class="social"> <ul> <li><a href="http://www.facebook.com/jhonnyfelipe" target="_blank"class="iconfacebook"></a></li> <li><a href="http://www.twiter.com"target="_blank"class="icon-twitter"></a></li> <li><a href="http://www.youtube.com/jhonnytrainerfull"target="_blank"class="iconyoutube"></a></li> <li><a href="http://www.hotmail.com"target="_blank"class="icon-mail"></a></li> </ul> </div> <video id="video2" loop autoplay preload> <source src="ProShow Slideshow1.mp4" type="video/mp4" > </video> <a href="#" style="right: 0px; position: fixed; top: 0px;"><img src="http://u.jimdo.com/www21/o/s4e9df44a0ad8ccd8/img/i1bebb50570fb38cb/1337963529/st d/image.gif" alt= "" /></a> <section id="wrap"> <section id="main"> <section id="slidershow"> <div> <embedsrc="imagenes/banner.swf"></div></embed> </div> </section> <nav> <ul> <li><a href="pagina.html"><span class="primero"><i class="icon iconhome"></i></span>Inicio</a></li> <li><a href="navidad en ecuador.html"><span class="segundo"><i class="icon icondice"></i></span>celebracion</a> </li> <li><a href="videos ecuador.html"><span class="tercero"><i class="icon iconcamera"></i></span>videos</a> </li> <li><a href="centros comerciales.html"><span class="cuarto"><i class="icon iconlibrary"></i></span>centroscomerciales</a></li> <li><a href="recetas navideñas.html"><span class="quinto"><i class="icon iconbook"></i></span>RecetasNavideñas</a></li> <li><a href="contacto.html"><span class="sexto"><i class="icon iconconnection"></i></span>Contacto</a></li> </ul> </nav> </header> <section id="bienvenidos"> <article> <hgroupclass="contenido"><h2>Bienvenido a nuestro sitio web<spanclass="forma"></span></h2></hgroup> <p> <ul> <li>Comparte esta navidad en familia.</li> <li>25 de diciembre como día de la Navidad. </li> <li>Que Dios te de prosperidad este año</li> <li>Se celebraría el nacimiento de Cristo el 25 de Diciembre</li> <li>Buena energia y mucha paz en esta navidad</li> <section> <section class="fotos"> <div class="efecto1"><a href="#"></a></div> <div class="efecto2"><a href="#"></a></div> <div class="efecto3"><a href="#"></a></div> </section> <section class="fotos2"> <div class="efecto4"><a href="#"></a></div> <div class="efecto5"><a href="#"></a></div> <div class="efecto6"><a href="#"></a></div> </section> </section> </ul> </p> </article> </section> <section id="contenido"> <article> <hgroup><h2 class="titulo">Celebracion de la navidad</h2></hgroup> <p class="fecha">25 de Diciembre</p> <img class="thumb" src="IMAGENES/imagen2.jpg" alt="imagen 1"> <p>La Navidad en latín: nativitas, ‘nacimiento’, también llamada coloquialmente «pascua»,es una de las festividades más importantes del cristianismo, junto con la Pascua de resurrección y Pentecostés. Esta solemnidad, que conmemora el nacimiento de Jesucristo en Belén, se celebra el 25 de diciembre en la Iglesia católica, en la Iglesia anglicana, en algunas comunidades protestantes y en la mayoría de las Iglesias ortodoxas. En cambio, se festeja el 7 de enero en otras Iglesias ortodoxas como la Iglesia ortodoxa rusa o la Iglesia ortodoxa de Jerusalén, que no aceptaron la reforma hecha al calendario juliano para pasar al calendario conocido como gregoriano, nombre derivado de su reformador, el papa Gregorio XIII. Los angloparlantes utilizan el término Christmas, cuyo significado es ‘misa (mass) de Cristo’. En algunas lenguas germánicas, como el alemán, la fiesta se denomina Weihnachten, que significa ‘noche de bendición’. Las fiestas de la Navidad se proponen, como su nombre indica, celebrar la Natividad (es decir, el nacimiento) de Jesús de Nazaret. </p> <video id="video1" loop autoplay preload poster="imagenes/5.jpg"> <source src="ProShow Slideshow.mp4" type="video/mp4" > </video><br><br> <iframe src="http://files.tubesnack.com/iframe/embed.html?hash=t7piwjkx&wmode=window&bgcolor=F FFFFF&t=1420567330" width="705" height="385" seamless="seamless" scrolling="no" frameborder="0" allowtransparency="true"></iframe> </article> </section> <aside> <section class="widget"><h3>Contador de visitas<span class="cuadro"></span></h3> <ul> <a href="#"><div align="center"><a href="http://contadores.gratisparaweb.com" target="_blank"><img src="http://contadores.gratisparaweb.com/imagen.php?contador=1&id2=208180" alt="Contadores" border="0"></a><br><br></a> <a href="http://www.glitter-graphics.com/"><center><img border="0" height="150" src="http://dl6.glitter-graphics.net/pub/28/28796xf3z4sbjdh.gif" width="100" /></center></a> <script type="text/javascript" src="http://blogparts.giffy.me/0074/parts.js"></script><br><br> <a href="http://disemucho.net" style="left: 0px; position: fixed; top: 0px;"><img src="http://u.jimdo.com/www21/o/s4e9df44a0ad8ccd8/img/id48cb78be47b4f8b/1410532465/st d/image.gif" alt="papanoel" /></a> <iframe src="http://www.creatupropiaweb.com/recursos/relojes/reloj_8.htm" width="134" height="202" marginwidth="0" marginheight="0" frameborder="no" scrolling="no" allowtransparency="true"></iframe> </ul> </section> <section class="widget2"> <h3>Articulos recientes<spanclass="cuadro2"></span></h3> <imgsrc="IMAGENES/gif2.gif"><br><br> <iframe style="border:none" src="http://files.podsnack.com/iframe/embed.html?hash=a1m0bs0s&t=1420397105" width="260" height="220" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe><br><br> <iframesrc="http://www.chatzona.org/webmasters/chat.php?canal=ChatZona" scrolling="no" width="260" height="300" frameborder="0"></iframe><br /><a href="http://www.chatzona.org"></a><br><br> <object height="267" width="200" classid="clsid:D27CDB6E-AE6D-11cf-96B8444553540000"codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflas h.cab#version=9,0,28,0" id="widget_name"><param name="movie" value="http://vhssd.oddcast.com/vhss_editors/voki_player.swf?doc=http://vhssd.oddcast.com/php/vhss_editors/getvoki/chsm=a299898d9b74d56eabee7b35295eb6d0%26sc=10 831184" /><param name="quality" value="high" /><param name="allowScriptAccess" value="always" /><param name="width" value="200" /><param name="height" value="267" /><param name="allowNetworking" value="all"/><param name="wmode" value="transparent" /><param name="allowFullScreen" value="true" /><embed height="267" width="150" src="http://vhss-d.oddcast.com/vhss_editors/voki_player.swf?doc=http%3A%2F%2Fvhssd.oddcast.com%2Fphp%2Fvhss_editors%2Fgetvoki%2Fchsm=a299898d9b74d56eabee7b35295eb 6d0%26sc=10831184" quality="high" allowScriptAccess="always" allowNetworking="all" wmode="transparent" allowFullScreen="true" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=Sho ckwaveFlash" type="application/x-shockwave-flash" name="widget_name"></object> </section> </aside> <footer> <section id="acerca-de"> <article> <hgroup><h3>Siguenos</h3></hgroup> <p> Puedes seguirnos y ver las ultimas actualizaciones solo visita nuestros vinculos y haci podamos tener una mejor comunicacion. Para que tengas masinformacion sobre las ofertas de los centros comerciales y los diferentes almacenes. </p> </article> </section> <section id="redes-s"> <div class="email"><a href="#"></a></div> <div class="twitter"><a href="#"></a></div> <div class="youtube"><a href="#"></a></div> <div class="facebook"><a href="#"></a></div> </section> </footer> <div id="copyright"><p>Pagina web hecha por JHONNY DELGADO derechos reservados</p></div> </section> </body> </html> CODIGO CSS body{ background: #2d2d2d; font-family: arial, helvetica, sans-serif; } a{ text-decoration: none; color: #ffffff; } .social{ position: fixed; left: 0; top: 300px; z-index: 2000; } .social ul{ list-style: none; } .social ul li a { display: inline-block; color: #ffffff; background: red; padding: 10px 15px; text-decoration: none; -webkit-transition:all 500ms ease; -o-transition:all 500ms ease; transition:all 500ms ease; } .social ul li .icon-facebook {background:blue;border-radius: 5px;} .social ul li .icon-twitter {background:aqua; border-radius: 5px;} .social ul li .icon-youtube {background:red;border-radius: 5px;} .social ul li .icon-mail {background:red;border-radius: 5px;} .social ul li a:hover{ padding: 10px 30px; background: green; } #video2{ position: fixed; left: 0; top: 0; min-height: 100%; min-width: 100%; width: auto; height: auto; z-index: -20; visibility: visible; } embed{ width: 950; height: 260; } #wrap{ width:1000px; margin:auto; clear:both; } /*MAIN*/ #main{ width:100%; margin: 20px 0px 0px0px; float: left; } /*slidershow*/ #slidershow{ width: 950px; height: 260px; float: left; background: #000000; border: solid 20px #ffffff; margin-bottom: 10px } /*bienvenidos*/ #bienvenidos{ width: 950px; float: left; padding: 20px; background: green; margin: 20px 0px; margin-top:60px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; box-shadow: 0px 2px 2px #000000; -moz-box-shadow: 0px 2px 2px #000000; -webkit-box-shadow: 0px 2px 2px #000000; } #bienvenidosarticle{ color: #ffffff; line-height: 35px; } #bienvenidos article> .contenido{ color:#ffffff; background:background: #f3c5bd; /* Old browsers */ background: -moz-linear-gradient(top, #f3c5bd 0%, #e86c57 50%, #ea2803 51%, #ff6600 75%, #c72200 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f3c5bd), colorstop(50%,#e86c57), color-stop(51%,#ea2803), color-stop(75%,#ff6600), colorstop(100%,#c72200)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%); /* IE10+ */ background: linear-gradient(to bottom, #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3c5bd', endColorstr='#c72200',GradientType=0 ); /* IE6-9 */; padding:10px 20px ; margin-left:-20px; position: relative; width: 40%; box-shadow: 1px 1px 5px #ffffff; border-radius:5px; top:-20px; left: -20px } .forma { width:0px; height:0px; line-height:0px; border-left:20px solid transparent; border-top:10px solid red; position:absolute; top:95%; left:0px; } section .fotos> div{ width: 100px; height:100px; float: left; margin-top: -220px; margin-left:900px; opacity: 0.5; } section .fotos> div a{ display: inline-block; } section .fotos .efecto1{ background: url(../IMAGENES/efecto1.png); margin-bottom:5px; margin-left:850px; background-repeat: no-repeat; border-radius: 5px } section .fotos .efecto2{ background: url(../IMAGENES/efecto2.png); margin-bottom: 5px; margin-left:610px; background-repeat: no-repeat; border-radius: 5px } section .fotos .efecto3{ background: url(../IMAGENES/efecto3.png); margin-bottom: 5px; margin-left:730px; background-repeat: no-repeat; border-radius: 5px } section .fotos>div:hover{ opacity: 1; border: 2px solid #fff; } section .fotos2 > div{ width: 100px; height:100px; float: left; margin-top: -230px; margin-left:900px; opacity: 0.5; } section .fotos2 > div a{ display: inline-block; } section .fotos2 .efecto4{ background: url(../IMAGENES/efecto4.png); margin-bottom: 5px; margin-left:850px; margin-top: -100px; background-repeat: no-repeat; border-radius: 5px } section .fotos2 .efecto5{ background: url(../IMAGENES/efcto5.png); margin-bottom: 5px; margin-left:610px; margin-top: -105px; background-repeat: no-repeat; border-radius: 5px } section .fotos2 .efecto6{ background: url(../IMAGENES//efecto6.png); margin-bottom: 5px; margin-left:730px; margin-top: -105px; background-repeat: no-repeat; border-radius: 5px } section .fotos2 >div:hover{ opacity: 1; border: 2px solid #fff; } marquee{ color: red } /*contenido*/ form{ width: 600px; background: aqua; border:1px solid #ccc; padding: 20px; border-radius:5px; } label{ font-size: 12px; display: block; } textarea { resize:vertical; max-height: 300px; min-height: 100px; } input,textarea{ margin-bottom:40px; width: 600px; padding:20px; box-sizing:border-box; border:1px solid #ccc; } input:focus,textarea:focus{ border:2px solid #1668c4 ; } input[type="submit"] { margin-bottom: 0; background: #1668c4; color:#fff; border: none; } input[type="submit"]:hover { background: #4a88f4; cursor: pointer } #contenido{ width: 705px; float: left; } #contenidoarticle{ float:left; margin-bottom: 20px; } #contenido article .titulo{ font-size: 22px; font-family: arial; color:#ffffff; } #contenido article .fecha{ font-size: 16px; color: red; margin-bottom: 5px; } #contenido article .thumb{ width: 200px; height: 150px; float: left; margin: 0px 10px 10px 0px; border-radius: 10px; } #contenido article>p{ color: #ffffff; font-size: 14px; text-align: justify; } #video1{ width: 705; margin-left:-5px; border-radius:10px; } /*VOKIN*/ object{ width: -600px; float: left; margin-left: -340px; } /*sidebar*/ aside{ width: 260px; height: 1600px; float: left; margin-left:10px; background: #4d78b3; padding: 10px 10px 0px 10px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 0px 2px 2px #000000; -moz-box-shadow: 0px 2px 2px #000000; -webkit-box-shadow: 0px 2px 2px #000000; } aside .widget{ margin-bottom: 10px; float: left; } aside .widget > h3{ color:#ffffff; background:background: #f3c5bd; /* Old browsers */ background: -moz-linear-gradient(top, #f3c5bd 0%, #e86c57 50%, #ea2803 51%, #ff6600 75%, #c72200 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f3c5bd), colorstop(50%,#e86c57), color-stop(51%,#ea2803), color-stop(75%,#ff6600), colorstop(100%,#c72200)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%); /* IE10+ */ background: linear-gradient(to bottom, #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3c5bd', endColorstr='#c72200',GradientType=0 ); /* IE6-9 */; padding:10px 20px ; margin-right:-50px; float:right; position: relative; width: 260px ; box-shadow: 1px 1px 5px #ffffff; border-radius:5px; top:-10px; left: -10px } .cuadro{ width:0px; height:0px; line-height:0px; border-right:20px solid transparent; border-top:10px solid red; position:absolute; top:95%; right:0px; } aside .widget2 > h3{ color:#ffffff; background:background: #f3c5bd; /* Old browsers */ background: -moz-linear-gradient(top, #f3c5bd 0%, #e86c57 50%, #ea2803 51%, #ff6600 75%, #c72200 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f3c5bd), colorstop(50%,#e86c57), color-stop(51%,#ea2803), color-stop(75%,#ff6600), colorstop(100%,#c72200)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%); /* IE10+ */ background: linear-gradient(to bottom, #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3c5bd', endColorstr='#c72200',GradientType=0 ); /* IE6-9 */; padding:10px 20px ; margin-right:-50px; float:right; position: relative; width: 260px ; box-shadow: 1px 1px 5px #ffffff; border-radius:5px; top:-10px; left: -20px } .cuadro2{ width:0px; height:0px; line-height:0px; border-right:20px solid transparent; border-top:10px solid red; position:absolute; top:95%; right:0px; } aside .widget2 a{ color: #ffffff; } aside .widget2 ul li { margin-bottom: 5px } aside .widget2 img{ width: 210px; height:173px; } aside .widget2 ul li div img{ width: 110px ; height: 70px; margin-left:-20px ; } /*footer*/ footer{ width: 100%; float: left; margin-top: 10px; clear: both; box-shadow: 0px 2px 2px #000000; -moz-box-shadow: 0px 2px 2px #000000; -webkit-box-shadow: 0px 2px 2px #000000; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: green; } footer section { width: 440px; float: left; padding: 20px; } footer #acerca-de{ font-family: arial; font-size: 12px; color: #fff; text-align: justify; line-height: 20px; } footer #acerca-de h3 { font-family:arial; font-size: 20px; color: #ffffff; margin-bottom: 5px; } footer #redes-s>div{ width: 220px; height:60px; float: left; background: #ff8000; opacity: 0.5; } footer #redes-s>div a{ width: 220px; height: 60px; display: inline-block; } footer #redes-s .email{ background: url(../IMAGENES/correo.png); margin-bottom: 15px; } footer #redes-s .twitter{ background: url(../IMAGENES/twitter.png); margin-bottom: 15px; } footer #redes-s .facebook{ background: url(../IMAGENES/facebook.png); } footer #redes-s .youtube{ background: url(../IMAGENES/tube.png); } footer #redes-s >div:hover{ opacity: 1; } #copyright{ float: left; width: 960px; margin: 10px 0px; } #copyright p{ text-align: center; font-size: 12px; color:#ffffff; font-family: arial,helvetica } video{ width: 100%; padding:5px; }