El presente curso tiene como objetivo preparar a los alumnos de 3er grado de secundaria, que fueron seleccionados para llevar a cabo el proyecto “Pequeños Emprendedores” correspondiente al ciclo escolar 2009-2010.
Para este ciclo escolar se ha hecho un giro radical en el modo de creación. Se eligió la programación Web como base para su creación, mismo que permite mantener el proyecto al día gracias a las técnicas modernas de programación, desarrollo y lenguaje más utilizados en la Internet a nivel profesional: PHP
Este lenguaje permite crear “páginas web dinámicas” que se “insertan” en el código HTML
Introducción a HTML
HTML (desde wikipedia), siglas de HyperText Markup Language (Lenguaje de Marcas de Hipertexto), es el lenguaje de marcado predominante para la construcción de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. HTML se escribe en forma de “etiquetas”, rodeadas por corchetes angulares (<,>). HTML también puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo Javascript), el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML.
Requisitos
Si estas leyendo esto ya tienes el principal requisito: un navegador web. Actualmente todas las computadoras incluyen un navegador que permite “ver” páginas web (cualquiera que utilices esta bien). En la sección de software puedes encontrar enlaces para descargar algún otro si lo prefieres.
El segundo requisito es: un editor de texto. También puedes utilizar el que más te plazca, con la única condición que guarde los archivos en “texto plano”, es decir, sin ningún tipo de formato En las computadoras Windows podemos utilizar el “Bloc de Notas”, de igual forma, en la sección de sofware puedes encontrar una lista de otros editores que puedes descargar.
Para el presente curso se ha recomendado el editor PSPad, que entre otras ventajas tiene numeración de líneas, coloreado de sintaxis, auto-cierre de etiquetas, indentación automática, etc. Todas estas propiedades son muy útiles para escribir codigo HTML y PHP.
La primer página web
La codificación HTML esta formada a partir de “etiquetas” encerradas entre los símbolos de “menor que” y “mayor que” (<, >).
Existen algunas reglas para formar un correcto código HTML:
- Los nombres de elementos y atributos deben escribirse en minúsculas.
Ejemplos: Incorrecto: <BODY BgColor="#000000"> Correcto: <body bgcolor="#000000">
- Todos los valores de los atributos deben ir entrecomillados.
Ejemplos: Incorrecto: <a href=index.php> Correcto: <a href="index.php">
- Todos los elementos “no vacíos” deben ir entre la etiqueta de principio y la etiqueta de final.
Ejemplos: Incorrecto: <ul> <li>Uno <li>Dos <li>Tres </ul> Correcto: <ul> <li>Uno</li> <li>Dos</li> <li>Tres</li> </ul>
- Todos los elementos deben estar anidados ordenadamente.
Ejemplos: Incorrecto: <b>El respeto <i>al derecho ajeno es la paz.</b></i> Correcto: <b>El respeto <i>al derecho ajeno es la paz.</i></b>
- Los elementos “vacíos” deben llevar terminación.
Ejemplos: Incorrecto: <br> <hr> Correcto: <br/> <hr/>
Ahora veamos el código completo de una página web para analizarla a detalle más adelante
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Hola Mundo</title>
</head>
<body>
<p>Hola Mundo!</p>
</body>
</html>
Explicación
La primer línea (<!DOCTYPE …>) se analizara a detalle en clases posteriores, asi que por el momento dejaremos pendiente su explicación.
Un archivo HTML solo puede contener una etiqueta <html> esta a su vez puede contener solo dos tipos de etiquetas <head> y <body> (también es posible usar las etiquetas de marcos <frame> sin embargo estas son poco recomendables pues van en contra de la filosofía de internet de no mezclar contenido con presentación y son problemáticas en su manejo)
Lo anterior nos hace notar que un documento HTML esta dividido en dos secciones, una “cabecera” (<head>) y un “cuerpo” (<body>)
<head>
Dentro de la etiqueta <head> encontraremos información referente al documento actual, por ejemplo el titulo de la página, palabras clave útiles a los buscadores, codificación utilizada, enlaces a archivos de apoyo (hojas de estilo, scripts, iconos, etc.).
<title>
En el ejemplo podemos observar solo una etiqueta dentro de la cabecera: la etiqueta <title> esta se utiliza para Definir el “titulo” del documento actual (visible en la barra de titulo del navegador) se recomienda usar descripciones cortas y concisas sobre el contenido de la página.
<body>
El segundo componente de un archivo HTML es el “cuerpo” definido por la etiqueta <body>, en esta sección es donde encontraremos el contenido en si de nuestra página, es esto lo que nos mostraran los navegadores.
<p>
La etiqueta <p> define un párrafo de texto, en nuestro ejemplo con la frase: Hola Mundo!
Nombres de archivo para documentos HTML
Es recomndable que los archivos de HTML utilicen unicamente minusculas evitando el uso de espacios, acentos, eñes y caracteres especiales o fuera del alfabeto inglés, como extensión utilizaremos .htm o .html, si estamos utilizando PSPad como editor se asignara automáticamente la extensión, si usamos otro tipo de editores (como el Bloc de Notas de Windows) debemos asegurarnos que no se añade la extensión .txt a nuestros archivos:
Incorrecto:
Hola Mundo.html
hola_mundo.html.txt
Correcto:
hola_mundo.html
Comentarios
En HTML es posible utilizar comentarios, estos serán ignorados por el navegador, pudiendo incluir tantos como consideremos necesarios, incluso pueden ir fuera de las etiquetas <html> siendo de gran utilidad para quien escribe el documento HTML
Durante el proyecto utilizaremos a inicio de cada archivo una serie de comentarios utiles para el correcto desarrollo del mismo, facilitando la edición y corrección de los archivos, a continuación un ejemplo de esta convención:
<!-- nombre_del_archivo.html nombre del programador fecha de creación Objetivo del documento Comentarios sobre el mismo --> <!-- hola_mundo.html alonso6665 7-11-2009 Ejemplo de un documento típico en HTML -->
Encabezados
HTML cuenta con 6 niveles de encabezados, siendo la etiqueta <h1> la de mayor relevancia hasta <h6> que sería la de menor relevancia. Estas etiquetas se pueden definir como de formato de párrafo pero por su importancia he preferido tratarlas aparte. No resulta recomendable utilizarlas para aumentar o disminuir el tamaño del tipo de letra, ya que cada navegador los muestra de manera diferente. Se usan para dividir correctamente en secciones nuestra página, tal y como se hace en un documento de texto normal. Es decir para determinar la importancia no la apariencia.
Codigo:
<h1>Encabezado de nivel uno</h1> <h2>Encabezado de nivel dos</h2> <h3>Encabezado de nivel tres</h3> <h4>Encabezado de nivel cuatro</h4> <h5>Encabezado de nivel cinco</h5> <h6>Encabezado de nivel seis</h6>
Ejemplo:
Encabezado de nivel uno
Encabezado de nivel dos
Encabezado de nivel tres
Encabezado de nivel cuatro
Encabezado de nivel cinco
Encabezado de nivel seis
Etiquetas de uso común
Estas son las etiquetas más importantes (excluyendo algunas que
veremos más adelante):
| Etiqueta | Utilidad | Resultado |
|---|---|---|
| <p> ... </p> |
Sirve para delimitar un párrafo. Inserta una línea en blanco antes del texto. | Soy un párrafo |
| <center> ... </center> | Permite centrar todo el texto del párrafo. | Yo estoy centrado |
| <pre> ... </pre> | Representa con un tipo de letra de ancho fijo y respetando espacios y retornos de línea. Muy útil a la hora de representar código fuente. |
Este es un texto con letra de ancho fijo |
| <address> ... </address> | Para escribir direcciones (de esas donde vive la gente, no electrónicas). |
Juana Petunia Pérez López
Calle Amargura N° 9, 1ºB Cd. Casitas |
| <blockquote> ... </blockquote> | Para citar un texto ajeno. Se suele implementar dejando márgenes tanto a izquierda como a derecha, razón por la que se usa habitualmente. |
|
| <b> … </b> | Pone un texto en negritas, se recomienda utilizar en su lugar la etiqueta <strong> | Soy un texto en negritas |
| <i> … </i> | Pone un texto en cursivas, se recomienda utilizar la etiqueta em | Soy un texto en cursivas |
| <s> … </s> | Tacha un texto | |
| <u> … </u> | Subraya un texto, no se recomienda su utilización | Soy un texto subrayado |
| <tt> ... </tt> | Permite representar el texto en un tipo de letra de ancho fijo. | Texto en letra de ancho fijo |
| <sup> ... </sup> | Letra superíndice. | E=mc2 |
| <sub> ... </sub> | Letra subíndice. | H2O |
| <big> ... </big> | Incrementa el tamaño del tipo de letra. | Soy GRANDE |
| <small> ... </small> | Disminuye el tamaño del tipo de letra. | Creí ver un lindo gatito |