Codigocodigo de Maquetacion Web

MAQUETACION WEB 17-9-15.
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<title>Documento sin ttulo</title>
<link href="estilomaq.css" rel="stylesheet" type="text/css" />
</head>
<body>
<section class="introduccion">
<header>
<h1>
<CENTER>INTRODUCCIN</CENTER>
</h1>
<header>
<p class="intro">
El concepto "Computacin" refiere al estudio cientfico que se
desarrolla sobre sistemas automatizados de manejo de informaciones,
lo cual se lleva a cabo a travs de herramientas pensadas para tal
propsito. Es de este modo, que aparecen conceptos como la PC,
Tecnologa, Internet e Informtica, que se vinculan entre s en el marco
del procesamiento y movilidad de la informacin. Las Ciencias de la
Computacin suponen un rea muy profunda de anlisis, que tiene sus
orgenes en 1920, cuando "computacin" haca referencia a los
clculos generados por la propia persona. Luego, con la llegada de las
PCs, la historia y el significado de este concepto se ampliaran sobre
nuevos horizontes, distinguiendo los algoritmos que forman parte del
desarrollo de las soluciones. En resumen, "computacin" implica las
rdenes y soluciones dictadas en una mquina, comprendiendo el
anlisis de los factores involucrados sobre este proceso, dentro de los
cuales aparecen los lenguajes de programacin. De este modo, se
automatizan tareas, generando datos concretos de forma ordenada.
</p>
</section>
<section class="diferencia">
<header>
<h2>
<CENTER>DIFERENCIA
ENTRE
COMPUTACIN
E
INFORMTICA</CENTER>
</h2>
<header>
<p class="computacion">
<img src="../Imagenes/Monitor_01.png" width="100" height="100"/>
<u><i>La computacin</u></i> se refiere al estudio cientfico que se
propsito.La computacin est referida a la tecnologa en s que
permita el manejo y movilidad de informacin en cuanto a esta ciencia
o conocimiento se refiere y tambin a los fundamentos tericos de la
informacin que procesan las computadoras, y las distintas
implementaciones en forma de sistemas computacionales. </p>
<p class="infor">
<img
src="../Imagenes/GoogleWebDesigner.jpg"
width="100"
height="100" /><u><i>La informtica</u></i> es la encarga del
tratamiento automtico de la informacin. Este tratamiento
automtico es el que ha cedido a la computacin la manipulacin de
grandes proporciones de datos y la ejecucin rpida de clculos
complejos. Tambin se aboca a los tratamientos de software por parte
de los usuarios y dems aspectos referidos a programas, hardware y
estructura de las computadoras.
</p>
</section>
<section class="computador">
<header>
<h2>
<center>EL COMPUTADOR</center>
</h2>
<header>
<p>
Una computadora o computador (del ingles computer y este del latn
computare -'calcular'), tambin denominada ordenador (del francs
ordinateur, y este del latn ordinator), es una mquina electrnica que
recibe y procesa datos para convertirlos en informacin til.
Una computadora es una coleccin de circuitos integrados y otros
componentes relacionados que pueden ejecutar con exactitud, rapidez
y de acuerdo a lo indicado por un usuario o automticamente por otro
programa, una gran variedad de secuencias o rutinas de instrucciones
que son ordenadas, organizadas y sistematizadas en funcin a una
amplia gama de aplicaciones prcticas y precisamente determinadas,
proceso al cual se le ha denominado con el nombre de programacin y
al que lo realiza se le llama programador.
</p>
<p>
La computadora adems de la rutina o programa informtico, necesita
de datos especficos (a estos datos, en conjunto, se les conoce como
"Input" en ingls o de entrada) que deben ser suministrados, y que
son requeridos al momento de la ejecucin, para proporcionar el
producto final del procesamiento de datos, que recibe el nombre de
"output" o de salida. La informacin puede ser entonces utilizada,
reinterpretada, copiada, transferida, o retransmitida a otra(s)
persona(s), computadora(s) o componente(s) electrnico(s) local o
remotamente usando diferentes sistemas de telecomunicacin, que
puede ser grabada, salvada o almacenada en algn tipo de dispositivo
o unidad de almacenamiento.
</p>
</section>
<section class="secomp">
<header>
<h2>
<center>PARTES DE UN COMPUTADOR</center>
</h2>
</header>
<section class="monitor">
<BR />
<header>
<h3>
MONITOR
</h3>
</header>
<article class="artmonitor">
El monitor o pantalla de computadora, es un dispositivo de salida que,
mediante una interfaz, muestra los resultados, o los grficos del
procesamiento de una computadora. Existen varios tipos de
monitores: los de tubo de rayos catdicos(o CRT), los de pantalla de
plasma (PDP), los de pantalla de cristal lquido (o LCD),<img
class="imgmonitor"
src="../Imagenes/monitor02.jpg"
width="239"
height="210" />de paneles de diodos orgnicos de emisin de luz
(OLED), o Lser-TV, entre otros. </article>
</section>
<br />
<section class="teclado">
<header>
<h3>
TECLADO
</h3>
</header>
<article class="arteclado">
Un teclado de computadora es un perifrico, fsico o virtual (por
ejemplo teclados en pantalla o teclados tctiles), utilizado para la
introduccin de rdenes y datos en una computadora. Tiene su origen
en los teletipos y las mquinas de escribir elctricas, que se utilizaron
como los teclados de los primeros ordenadores y dispositivos de
almacenamiento (grabadoras de cinta de papel y tarjetas
perforadas).<img class="imgteclado"src="../Imagenes/teclado03.jpg"
width="243" height="207" /> Aunque fsicamente hay una mirada de
formas, se suelen clasificar principalmente por la distribucin del
teclado de su zona alfanumrica, pues salvo casos muy especiales es
comn a todos los dispositivos y fabricantes (incluso para teclados
rabes y japoneses). </article>
</section>
<br />
<section class="raton">
<header>
<h3>
RATN
</h3>
</header>
<article class="artraton">
El mouse (del ingls, pronunciado [mas]) o ratn es un perifrico de
computadora de uso manual, utilizado como entrada o control de
datos. Se utiliza con una de las dos manos del usuario y detecta su
movimiento relativo en dos dimensiones por la superficie horizontal en
la que se apoya, reflejndose habitualmente a travs de un puntero o
flecha en el monitor. Anteriormente, la informacin del desplazamiento
era transmitida gracias al movimiento de una bola debajo del ratn, la
cual accionaba dos rodillos que correspondan a los ejes X e Y. Hoy, el
puntero reacciona a los movimientos debido a un rayo de luz que se
refleja entre el ratn y la superficie en la que se encuentra. Cabe
aclarar que un ratn ptico apoyado en un espejo o sobre un
barnizado por ejemplo es inutilizable, ya que la luz lser no
desempea
su
funcin
correcta.<img
class="imgmouse"
src="../Imagenes/mouse01.jpg" width="234" height="215" /> La
superficie a apoyar el ratn debe ser opaca, una superficie que no

genere un reflejo, es recomendable el uso de alfombrillas. </article>
</section>
<br />
<article class="procesador">
<header>
<h3>
PROCESADOR
</h3>
</header>
<article class="artpro">
El microprocesador (o simplemente procesador) es el circuito
integrado central y ms complejo de un sistema informtico; a modo
de ilustracin, se le suele llamar por analoga el cerebro de un
computador.
Es el encargado de ejecutar los programas, desde el sistema operativo
hasta las aplicaciones de usuario; slo ejecuta instrucciones
programadas en lenguaje de bajo nivel, realizando operaciones
aritmticas y lgicas simples, tales como sumar, restar, multiplicar,
dividir,
las
lgicas
binarias
y
accesos
a
memoria.<img
class="imgprocesa"
src="../Imagenes/microprocesador03.jpg"
width="259" height="194" /> Esta unidad central de procesamiento
est constituida, esencialmente, por registros, una unidad de control,
una unidad aritmtico lgica (ALU) y una unidad de clculo en coma
flotante (conocida antiguamente como coprocesador matemtico).
</article>
</article>
</section>
<aside>
<header>
<h1>
<center>GLOSARIO DE TERMINOS INFORMATICOS</center>
</h1>
</header>
<article class="glosario">
<br />
Disco Duro:Es un dispositivo de almacenamiento de datos no volati
que emplea un sistema de grabacin magnetiuca para almacenar
datos digitales. Su capacidad se mide en gigabyts y asta la actualidad
en terabyts. Este puede estar conectado dentro de la PC o conectado
mediante un dispositivo de USB.
<br />
MICROPROCESADOR: Es la parte que fue disenada para llevar a cabo la
ejecucion de programas y tambien es la encargada de dar las las
instrucciones a las computadora.
<br />
MEMORIA RAM:(Random Access Memory, Memoria de Acceso Aleatorio)
es donde el computador guarda los datos que est utilizando en el
momento presente. El almacenamiento es considerado temporal por
que los datos y programas permanecen en ella mientras que la
computadora este encendida o no sea reiniciada.
<br />
MICROPROCESADOR: Es el cerebro del ordenador. Es un chip, un tipo
de componente electrnico en cuyo interior existen miles (o millones)
de elementos llamados transistores, cuya combinacin permite

realizar el trabajo que tenga encomendado el chip.
MONITOR: Es el perifrico ms utilizado en la actualidad para obtener
la salida de las operaciones realizadas por la computadora, las
pantallas de los sistemas informaticos muestran una imagen del
resultado de la informacin procesada por la computadora.
<br />
MEMORIA RAM: (RADOM ACCESS MEMORY), memoria de acceso
aleatorio cuyo contenido permanecer presente mientras el
computador permanezca encendido.
<br />
MEMORIA ROM: Memoria de solo lectura. Chip de memoria que solo
almacena permanentemente instrucciones y datos de los fabricantes.
<br />
MOUSE: El ratn o mouse informatico es un dispositivo sealador o de
entrada, recibe esta denominacin por su apariencia.
<br />
TECLADO: Es un perifrico de entrada, que convierte la accin
mecnica de pulsar una serie de pulsos elctricos codificados que
permiten identificarla. Las teclas que lo constituyen sirven para entrar
caracteres alfanumricos y comandos a una computadora.
<br />
Impresora:
Una impresora es un perifrico de computadora que permite producir
una copia permanente de textos o grficos de documentos
almacenados en formato electrnico, imprimiendo en papel de lustre
los datos en medios fsicos, normalmente en papel o transparencias,
utilizando cartuchos de tinta o tecnologalser.
</article>
</aside>
</body>
</html>
Estilo
@charset "utf-8";
body {
width::100%;
background-image:url(../Imagenes/FONDO%202.jpg);
}
.introduccion{
background-color:#CF6;
width:90%;
padding:30px;
margin:15px;
text-align:justify;
}
.diferencia{
Width: 93%;
Height:30;
float:left;
padding:15px;
margin:30px;
backgroundcolor:#3C9;
text-align:justify;
}
.computador{
backgroundcolor:#0CF;
width:95%;
float:left;
padding:15px;
margin:5px;
text-align:justify;
}
.monitor{
width:15%;
float:left;
padding:15px;
background-color:#9FC;
margin-right:15px;
text-align:justify;
}
.teclado{
width:15%;
float:left;
padding:15px;
background-color:#9fc;
margin-right:15px;
text-align:justify;
}
.raton{
width:15%;
float:left;
padding:15px;
margin-right:15px;
text-align:justify;
}
.procesador{
width:15%;
float:left;
padding:5px;
margin-right:15px;
text-align:justify;
}
h1{
text-shadow:2px
6px
9px #FF0000;
background-color:#0F0;
}
h3{
text-shadow:2px
4px
9px #FF00FF;
}
.intro{
background-color:#0FF;
}
.computacion{
background-color:#C6C;
width:42%;
float:left;
padding:15px;
margin:20px;
text-align:justify;
}
.infor{
width:42%;
float:right;
padding:15px;
margin:20px;
text-align:justify;
}
header{
background:#C09, #000;
width:100%;
height:auto;
text-shadow:2px 3px 6px #9999CC, 4px 5px 7px #99CCCC;
}
.artpro{
background-color:#FC3;
}
.artraton{
background-color:#9F9;
}
.imgteclado{
float:left;
width:100px;
height:100px;
padding:8px;
}
.imgmonitor{
float:right;
width:100px;
height:100px;
padding:10px;
}
.imgmouse{
float:right;
width:100px;
height:100px;
padding:10px;
}
.imgprocesa{
float:right;
width:100px;
height:100px;
padding:10px;
}
.arteclado{
background-color:#C06;
}
.artmonitor{
background-color:#F99;}
.partcomp{
background-color:#9CF;
}
.secomp{
background-color:#CF3;
width:70%;
padding:10px;
margin:10px;
float:left;
}
aside{width:25%;
float: left;
}
.glosario{
background-color:#0FF;
margin:5px;
padding:10px;
text-align:justify
}
MAQUETACION.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<head>

<link href="estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
</header>
<nav>
</nav>
<section>
<P>
propsito.<img
class="
imgizq"src="../Imagenes/microprocesador02.jpg"
width="142"
height="138" /> Es de este modo, que aparecen conceptos como la PC,
clculos generados por la propia persona. Luego, con la llegada de las
PCs, la historia y el significado de este concepto se ampliaran sobre
nuevos horizontes, distinguiendo los algoritmos que forman parte del
desarrollo de las soluciones. En resumen, "computacin" implica las
rdenes y soluciones dictadas en una mquina, comprendiendo el
anlisis de los factores involucrados sobre este proceso, dentro de los
cuales aparecen los lenguajes de programacin. De este modo, se
automatizan tareas, generando datos concretos de forma ordenada.
</P>
<P>
del procesamiento y movilidad de la informacin.<img class="imgder"
src="../Imagenes/scanner01.jpg" width="274" height="184" /> Las
Ciencias de la Computacin suponen un rea muy profunda de anlisis,
que tiene sus orgenes en 1920, cuando "computacin" haca
referencia a los clculos generados por la propia persona. Luego, con
la llegada de las PCs, la historia y el significado de este concepto se
ampliaran sobre nuevos horizontes, distinguiendo los algoritmos que
forman parte del desarrollo de las soluciones. En resumen,
"computacin" implica las rdenes y soluciones dictadas en una
mquina, comprendiendo el anlisis de los factores involucrados sobre
este proceso, dentro de los cuales aparecen los lenguajes de
programacin. De este modo, se automatizan tareas, generando datos
concretos de forma ordenada.
</P>
<P>

clculos generados por la propia persona.<img class="imgizq"
src="../Imagenes/mouse01.jpg" width="234" height="215" /> Luego,
con la llegada de las PCs, la historia y el significado de este concepto
se ampliaran sobre nuevos horizontes, distinguiendo los algoritmos
que forman parte del desarrollo de las soluciones. En resumen,
"computacin" implica las rdenes y soluciones dictadas en una
mquina, comprendiendo el anlisis de los factores involucrados sobre
este proceso, dentro de los cuales aparecen los lenguajes de
programacin. De este modo, se automatizan tareas, generando datos
concretos de forma ordenada.
</P>
</section>
</body>
</html>
Estilo
@charset "utf-8";
body {
width:100%;
background-image:url(../Imagenes/fondo01.jpg);
}
p{
width:21.5%;
float:left;
padding:35px;
margin-right:15px;
text-align:justify;
}
.imgizq{
float:left;
width:95px;
height:100px;
margin:10px;
border-radius:20px;
}
.imgder{
float:right;
width:95px;
height:100px;
margin:10px;
border-radius:20px;
}
Practica Formularios
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0
Transitional//EN"
<head>
</head>
<body>
<form action="file:///C|/Users/PC-Desmaison/Desktop/procesar.php"
method="get">
<label>Nombre y Apellidos:</label>
<input type="text" name="nombre" size="15" maxlength="20" />
<br />
<label> Ingrese Clave:</label>
<input type="password" name="nombre" size="15" maxlength="20"
value="Ingrese Datos" />
<br />
<input type="checkbox" name="condicion" >Acepto Condiciones
<br />
<input type="checkbox" name="publicidad" checked="checked"
/>Deseo recibir publicidad
<br />
<input type="radio" name="sexo" value="hombre" />Hombre
<br />
<input type="radio" name="sexo" value="mujer" />Mujer
<br />
<br />
<input type="button" name="enviar" value="enviar" />
<input type="button" name="reset" value="reset" />
<br />
<br />
<textarea rows="4" cols="30"></textarea>
<br />
<br />
Elija una Opcion: <Select size="4" multiple="multiple">
<option> Azul </option>
<option> Verde </option>
<option> Rojo </option>
<option> Amarillo</option>
<option>Rosado </option>
<option>Blanco</option>
<option>Negro </option>
</Select
</form>
</body>
</html>

Codigocodigo de Maquetacion Web

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Codigocodigo de Maquetacion Web

Uploaded by

Copyright:

Available Formats

MAQUETACION WEB 17-9-15.

superficie a apoyar el ratn debe ser opaca, una superficie que no

de elementos llamados transistores, cuya combinacin permite

<meta http-equiv="Content-Type" content="text/html; charset=utf8" />

propsito. Es de este modo, que aparecen conceptos como la PC,

You might also like