JavaScript y html de partida
Para ver cómo JavaScript nos sirve para dotar de procesos y efectos dinámicos a un documento HTML vamos a partir de un código HTML + CSS que representa la estructura y estilos básicos de una página web. En esta estructura la página web queda dividida en: cabecera con el título y mensaje breve, menú, texto con algunas imágenes, formulario de contacto y un pie de página con información sobre los autores o el copyright.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”> <!—Código base para el curso de javascript desde cero de aprenderaprogramar.com –> <html> <head> <title>Portal web – aprenderaprogramar.com</title> <meta charset=”utf-8″> <meta name=”description” content=”Portal web aprenderaprogramar.com”> <meta name=”keywords” content=”aprender, programar, cursos, libros”> <link rel=”stylesheet” type=”text/css” href=”estilosA.css”> </head> <!– Contenido de la página web –> <body> <!– Cabecera de la página web –> <div id=”cabecera”> <h1>Portal web aprenderaprogramar.com</h1> <h2>Didáctica y divulgación de la programación</h2> </div> <!– Fin de la cabecera de la página web –> <!– Contenedor para la parte central –> <div id=”central”> <!– menu –> <div id=”menu”> <div class=”txtPresentaMenu”>Menú</div> <hr/> <ul class=”itemsMenu”> <li><a href=”#”>Inicio</a></li> <li> <a href=”libros.html”>Libros de programación</a> </li> <li> <a href=”cursos.html”>Cursos de programación</a> </li> <li> <a href=”humor.html”>Humor informático</a> </li> </ul> </div> <!– fin menu –> <!– cuerpo –> <div id=”cuerpoCentral”> <!– Texto con imágenes –> <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 programación</a> no es tarea de un día ni de una semana: aprender programación requiere al menos varios meses y, si hablamos de programación a nivel profesional, varios años. No queremos con esto desanimar a nadie: en un plazo de unos pocos días 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 válidas 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> <!– Fin del texto con imágenes –> <!– Formulario de contacto –> <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 envíanos 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>Dirección:</span> <input id=”direccion” type=”text” name=”direccion” placeholder=”Tu dirección…”/></label> <label for=”email”><span>Correo electrónico:</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> <!– Fin del formulario de contacto –> </div> <!– fin cuerpo –> </div> <!– fin contenedor para la parte central –> <!– Pie de página o footer –> |
/* CSS para curso JavaScript aprenderaprogramar.com*/
body {font-family: sans-serif; background-color: yellow; font-size: 14px;} .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; } |
