LENGUAJE DE PROGRAMACIONpara wordpress
Anuncio
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;
}
