Empezar a usar CSS a partir de un documento HTML con estructura básica (títulos, listas, etc.) (CU01007D)

Resumen: Entrega nº7 del Tutorial básico del programador web: CSS desde cero.
Codificación aprenderaprogramar.com: CU01007D

 

 

UN DOCUMENTO HTML BÁSICO

Para ver cómo CSS nos sirve para dotar de aspecto a un documento HTML vamos a partir de un código HTML que representa la estructura básica 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.

css

 

Crea un documento HTML con un editor de texto como Notepad++ con el siguiente contenido:

<!DOCTYPE html>
<!-- Código base para el curso CSS -->
<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">
</head>

<!-- Contenido de la página web -->
<body>
<!-- Cabecera de la página web -->
<div>
<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 -->

<br />

<!-- Contenedor para la parte central -->
<div>

<!-- menu -->
<div>
<div>Menú</div>
<hr/>
<ul>
<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>

<!-- Texto con imágenes -->
<div>
<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 -->
<br/>
<!-- Formulario de contacto -->
<form method="get" action="accion.html">
Si quieres contactar con nosotros envíanos este formulario relleno: <br /><br />
Nombre: <input type="text" name="nombre" /><br />
Apellidos: <input type="text" name="apellidos" /><br />
Dirección: <input type="text" name="direccion" /><br />
Correo electrónico: <input type="text" name="correo" /><br />
Mensaje: <textarea name="mensaje" cols=30 rows=2></textarea><br /><br />
<input type="submit" value="Enviar">
<input type="reset" value="Cancelar">
</form>
<!-- Fin del formulario de contacto -->

</div>
<!-- fin cuerpo -->
</div>
<!-- fin contenedor para la parte central -->
<br /> <br /> <br />
<!-- Pie de página o footer -->
<div>
<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>
<!-- Fin del pie de página o footer -->
</body>
<!-- Fin del contenido de la página web -->
</html>

 

 

El código anterior es HTML y lo usaremos a lo largo del curso para poner diferentes ejemplos, por lo que lo denominaremos "código base del curso". Para seguir este curso debes ser capaz de comprender todo el código HTML 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 el “Curso básico del programador web: HTML desde cero” y realízalo. 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. Debes obtener un resultado similar a este (si te falla alguna imagen puedes cambiar las rutas y poner otra imagen que tú desees):

html básico

 


En este documento tenemos varios elementos como etiquetas de título h1 y h2, links, listas con elementos dentro de las listas, imágenes, formularios, botones, texto, etc. Todo ello nos va a servir para usar CSS y ver las posibilidades que nos ofrece CSS para dar formato a nuestras páginas web. En este curso nos vamos a centrar en tratar de aprender los aspectos más importantes de CSS y la lógica de CSS. El objetivo será saber hacer un buen diseño de CSS, un buen uso de CSS y comprender lo que hacemos. Por el contrario, no vamos a tratar de aprender o conocer todas las propiedades, posibilidades o instrucciones de CSS ya que si logramos comprender cómo funciona y su lógica, nos bastará con realizar búsquedas 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”.

 

 

 

 

 

 

Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link:  Ver curso completo.

Para  hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.

Donar o colaborar

Este sitio se mantiene abierto gracias al apoyo de muchas personas. Si crees que merece la pena apoyar económicamente este sitio web puedes realizar una donación o colaborar. Contacta con nosotros.

¿Puedo yo aprender?

Seas o no del área informática, si quieres aprender a programar te ofrecemos una solución guiada y personalizada: realizar un curso tutorizado on-line. Con este tipo de curso, podrás aprender a programar de forma ágil y amena.

Acceder a detalles y precios de los cursos tutorizados on-line

Política sobre cookies

Utilizamos cookies propias y de terceros para ofrecerte una mejor experiencia y servicio, de acuerdo a tus hábitos de navegación.

Si continúas navegando, consideramos que aceptas su uso. Puedes obtener más información en nuestra Política de Cookies.

En Facebook!

Ahora puedes seguirnos en Facebook. Noticias, novedades y mucho más ¡Te esperamos!

RANKING APR2+

Ranking de lenguajes y entornos de programación aprenderaprogramar.com
 

JULIO - AGOSTO 2017

1. Java / J2EE
2. Entornos Oracle
3. Entornos SQL Server
4. JavaScript, jQuery
5. .NET, C#
6. HTML, CSS
7. Android, iOS
8. Php, MySql


Acceder a detalles sobre el ranking de programación aprenderaprogramar.com

FOROS APR2+

Pregunta, responde, consulta, lee, intercambia...

Participa!!! Entra en los foros aprenderaprogramar.com.

             Copyright 2006-2017 aprenderaprogramar.com                La web abierta a cualquier persona interesada en la programación