HTML Y CSS 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.
Crea un archivo HTML con un editor de texto como Notepad++ o similar con el siguiente contenido:
<!DOCTYPE html>
<!—Código base para el curso de javascript desde cero de iraniayadrian.com -->
<html>
<head>
<title>Mi portal web/title>
<meta charset="utf-8">
<meta name="description" content="Portal web">
<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</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 aprender programación 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.
</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 -->
</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 código anterior es HTML y CSS y lo usaremos a lo largo del curso para poner diferentes ejemplos, por lo que lo denominaremos "código base HTML del curso" o “código base CSS del curso”. Para seguir este curso debes ser capaz de comprender todo el código HTML y CSS que hemos usado, su significado y sintaxis. Si no comprendes el código anterior no continues avanzando, dirígete a la web aprenderaprogramar.com y en la sección cursos busca los cursos “Curso básico del programador web: HTML desde cero” y “Curso básico del programador web: CSS desde cero” y realízalos. Si no lo haces así no entenderás o no le sacarás todo el partido posible a este curso.
Visualiza el documento HTML en un navegador
