CU01107E Javascript Desde Cero HTML y Css Basicos Menu Form Etc

JavaScript a partir de HTML y CSS bsico.
EMPEZAR A USAR
JAVASCRIPT A PARTIR DE
HTML Y CSS BSICOS
APRENDERAPROGRAMAR.COM
(MEN, LISTAS, LINKS,
FORMULARIOS, ETC.)
(CU01107E)
Seccin: Cursos
Categora: Tutorial bsico del programador web: JavaScript desde cero
Fecha revisin: 2029
Resumen: Entrega n7 del Tutorial bsico JavaScript desde cero.
Autor: Csar Krall
aprenderaprogramar.com, 2006-2029
JavaScript a partir de HTM
ML y CSS bsico.
HTML Y CSS
C DE PARTIIDA
Para ver cmo

c JavaSccript nos sirvve para dotar de proceso
os y efectos dinmicos a un docume ento HTML
vamos a partir
p de un cdigo HTM ML + CSS quee representaa la estructura y estilos bsicos de una
u pgina
web. En esta
e estructura la pgina web queda dividida en: cabecera co on el ttulo y mensaje bre
eve, men,
texto con
n algunas immgenes, forrmulario de contacto y un pie de pgina p con iinformacin sobre los
autores o el copyrightt.
Crea un archivo HTMLL con un edittor de texto como Notep

pad++ o similar con el siguiente conte
enido:
<!DOCTYPE HTML PUBLIC C "-//W3C//DTD D HTML 4.01 Trransitional//EN" "http://www.w3.org/TR/htm

ml4/loose.dtd">
>
<!Cdigo o base para el curso
c de javascript desde ceroo -->
<html>
<head>
<title>Porttal web - aprennderaprogramar.com</title>
<meta chaarset="utf-8">
<meta nam me="description" content="Po ortal web apren
nderaprogramaar.com">
<meta nam me="keywords"" content="apreender, program mar, cursos, librros">
<link rel="stylesheet" typpe="text/css" href="estilosA.csss">
</head>

<body>

<div id="caabecera">
<h1>Portaal web aprenderaprogramar.co om</h1>
<h2>Didcctica y divulgacin de la prograamacin</h2>
</div>

>
<div id="ceentral">

<div id="mmenu">
<div class=="txtPresentaMMenu">Men</div>
<hr/>
<ul class=""itemsMenu">
<li><a hreff="#">Inicio</aa></li>
<li> <a hreef="libros.html"">Libros de programacin</a>> </li>
<li> <a hreef="cursos.htmll">Cursos de prrogramacin</aa> </li>
<li> <a hreef="humor.html">Humor inforrmtico</a> </li>
</ul>
</div>

aprenderraprogramar.co
om, 2006-2029


<div id="cuerpoCentral">

<div class="txtConImg">
<p>Aprender a programar es un objetivo que se plantea mucha gente y que no todos alcanzan.</p>
<p>Hay que tener claro que <a href="http://www.aprenderaprogramar.com">aprender programacin</a> no es tarea de un
da ni de una semana: aprender programacin
requiere al menos varios meses y, si hablamos de programacin a nivel profesional, varios aos. No queremos
con esto desanimar a nadie: en un plazo de unos pocos das podemos estar haciendo nuestros primeros programas.</p>
<p>Puedes seguir uno de <a
href="http://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=57&Itemid=86">nuestros
cursos</a> entre los varios disponibles. Cuando haya que utilizar un editor de textos
recomendamos el uso de uno potente y sencillo como Notepad++, aunque son vlidas otras alternativas como Crimson
Editor.</p>
<a
href="http://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=205&catid=57:herramientas-
informaticas&Itemid=179">
<img src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un til editor de texto">
</a>
<img src="http://www.crimsoneditor.com/images/logo.jpg" alt="Crimson" title="Crimson, un editor de texto alternativo">
</div>



<form name ="formularioContacto" class="formularioTipo1" method="get" action="accion.html">
<div class="form-content">
<h2>Formulario de contacto</h2>
<p>Si quieres contactar con nosotros envanos este formulario relleno:</p>
<label for="nombre"><span>Nombre:</span> <input id="nombre" type="text" name="nombre" placeholder="Tu nombre..." /></label>
<label for="apellidos"><span>Apellidos:</span> <input id="apellidos" type="text" name="apellidos" placeholder="Tus apellidos..."/></label>
<label for="direccion"><span>Direccin:</span> <input id="direccion" type="text" name="direccion" placeholder="Tu direccin..."/></label>
<label for="email"><span>Correo electrnico:</span> <input id="email" type="text" name="email" placeholder="Tu email..."/></label>
<label for="mensaje"><span>Mensaje:</span> <textarea id="mensaje" name="mensaje" cols=30 rows=2 placeholder="Tu
mensaje..."></textarea></label>
<label>
<input type="submit" value="Enviar">
<input type="reset" value="Cancelar">
</label>
</div>
</form>

</div>

</div>



<div id="pieDePagina">
<img src="http://lh5.ggpht.com/_PeVwghrmOec/TMkzEonRrcI/AAAAAAAAAHc/IxL8g0fTYtk/an_oliva_png.png" alt="logo
apr" title="Logo aprenderaprogramar.com">
Copyright 2006-2038 aprenderaprogramar.com
</div>

</body>

</html>
Crea un archivo CSS (cuyo nombre debe ser estilosA.css) con un editor de texto como Notepad++ o
similar con el siguiente contenido:
/* CSS para curso JavaScript aprenderaprogramar.com*/
body {font-family: sans-serif; background-color: yellow; font-size: 14px;}
h1 {color: blue;}
a {text-decoration: none;}
label {color: maroon; display:block; padding:5px;}
.itemsMenu{ padding: 3px 0px;

border-bottom: 1px solid #778;
font: bold 16px Verdana, sans-serif; }
.itemsMenu li { list-style: none; display: inline; margin-left:10px;}
.itemsMenu li a { padding: 3px 1em;

border: 1px solid #778; border-bottom: none;
background: #DDE; text-decoration: none; }
.itemsMenu li a:link { color: #448; }
.itemsMenu li a:hover {color: #000; background: #AAE; border-color: #227; }
.itemsMenu li a#actual { background: #AAE; }
El cdigo anterior es HTML y CSS y lo usaremos a lo largo del curso para poner diferentes ejemplos, por
lo que lo denominaremos "cdigo base HTML del curso" o cdigo base CSS del curso. Para seguir este
curso debes ser capaz de comprender todo el cdigo HTML y CSS que hemos usado, su significado y
sintaxis. Si no comprendes el cdigo anterior no continues avanzando, dirgete a la web
aprenderaprogramar.com y en la seccin cursos busca los cursos Curso bsico del programador web:
HTML desde cero y Curso bsico del programador web: CSS desde cero y realzalos. Si no lo haces as
no entenders o no le sacars todo el partido posible a este curso.
Visualiza el documento HTML en un navegador. Debes obtener un resultado similar a este (si te falla
alguna imagen puedes cambiar las rutas y poner otra imagen que t desees):
En este documento tenemos varios elementos como etiquetas de ttulo h1 y h2, links, listas con
elementos dentro de las listas, imgenes, formularios, botones, texto, etc. Todo ello nos va a servir para
usar JavaScript y ver las posibilidades que nos ofrece JavaScript para crear efectos y procesos dinmicos
en nuestras pginas web. En este curso nos vamos a centrar en tratar de aprender los aspectos ms
importantes de JavaScript y la lgica de JavaScript. El objetivo ser saber hacer un buen diseo de
cdigo JavaScript, un buen uso de JavaScript y comprender lo que hacemos. Por el contrario, no vamos
a tratar de aprender o conocer todas las propiedades, posibilidades o instrucciones de JavaScript ya que
si logramos comprender cmo funciona y su lgica, nos bastar con realizar bsquedas en internet para
encontrar aquella propiedad o sintaxis que podamos necesitar en un momento dado. Aprende a
pescar, no te conformes con que te den peces.
Prxima entrega: CU01108E
Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

CU01107E Javascript Desde Cero HTML y Css Basicos Menu Form Etc

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

CU01107E Javascript Desde Cero HTML y Css Basicos Menu Form Etc

Hochgeladen von

Copyright:

Verfügbare Formate

JavaScript a partir de HTML y CSS bsico.

Fecha revisin: 2029

Resumen: Entrega n7 del Tutorial bsico JavaScript desde cero.

Autor: Csar Krall

Para ver cmo

Crea un archivo HTMLL con un edittor de texto como Notep

<!DOCTYPE HTML PUBLIC C "-//W3C//DTD D HTML 4.01 Trransitional//EN" "http://www.w3.org/TR/htm

/* CSS para curso JavaScript aprenderaprogramar.com*/

body {font-family: sans-serif; background-color: yellow; font-size: 14px;}

label {color: maroon; display:block; padding:5px;}

.itemsMenu{ padding: 3px 0px;

.itemsMenu li { list-style: none; display: inline; margin-left:10px;}

.itemsMenu li a { padding: 3px 1em;

.itemsMenu li a:link { color: #448; }

.itemsMenu li a:hover {color: #000; background: #AAE; border-color: #227; }

.itemsMenu li a#actual { background: #AAE; }

Prxima entrega: CU01108E

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:

Das könnte Ihnen auch gefallen