Dreamweaver es uno de los softwares que viene dentro del paquete de Adobe. Con este programa vamos a trabajar para que puedas crear tu propio sitio web. Ahora bien, supongo que a estas alturas, como quieres aprender HTML has investigado algo al respecto. Como ya debes saber, HTML proviene de Hyper Text Markup Language. (En español, Lenguaje de marcado de hipertexto). Su extensión siempre es ".html" o ".htm", cualquiera de los dos está bien.
Antes de empezar, hay ciertas cosas que debes saber con anticipación. Con HTML puedes crear un sitio web, sin duda alguna. Pero...¿Será una página atractiva y dinámica? NO. Definitivamente no. Pero, por HTML se empieza, es como la base de tu página web. Para decorarla vas a necesitar, dependiendo de qué tan dinámica la quieres hacer, CSS, Javascript, JQuery, Python, Ruby, PHP, AJAX, T-SQL y muchos más. No te preocupes, ya que casi todos puedes usarlos junto con HTML. En todo caso, HTML y CSS es un hecho que tienes que aprenderlos. Ellos dos juntos van de la mano, de lo contrario tu base (conformada por HTML) se vería en ladrillos. Pero, juntos (HTML y CSS) ya se vería en cementos. Si quieres más, luego tienes que empaparte con los demás.
Por supuesto, también pueden usar el conocido "bloc de notas" (notepad) en caso de que no tengan Dreamweaver. Pero, es preferible que usen el programa, ya que todo lo voy a hacer ahí para enseñarles.
Abran Dreamweaver y seleccionen "Nuevo HTML" en la primera ventana que aparece. Cuando cargue, aparecerá lo siguiente:
Lo primero que ven es la pestaña del código, pero si quieren pueden hacer click en "Diseño", como se darán cuenta no hay nada. Está absolutamente vacío. ¿Entonces, por qué tanto código para eso? Pronto se darán cuenta de qué hace cada elemento de código que está ahí. En caso de que quieran ver al mismo tiempo qué hace cada código, podrían trabajar en la vista "Dividir". Para empezar, ustedes seguro se darán cuenta de que hay muchas cosas sencillas para insertar en su página, como tablas, formularios, combos, etc. Pero, ¿Dónde está la diversión ahí?. No, ustedes van a escribir código para realizarlo. Además, con código pueden crear muchas más cosas que las que están disponibles en dreamweaver.
Démosle una vista al código
La primera línea que van a encontrar es la siguiente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Esto solamente especifica que el documento que estamos creando es de html. ¿Pero necesita ser tan largo? Absolutamente no. HTML es muy sencillo. Con un poco de inglés ya lo vas a tener dominado. Si quieres, solo pueden escribir lo siguiente en vez de toda esa larga línea:
<!DOCTYPE html>
Háganlo. Borren toda esa línea y escriban eso en su lugar, verán que funciona muy bien. Para entender mejor, enfoquémonos en la estructura de los elementos, ya que todo en HTML funciona con elementos. Cada elemento requiere de etiquetas o también llamados tags, siempre con un tag abierto y otro de cierre. En el caso del que ya vimos (Para especificar qué tipo de documento es) no requiere uno de cierre (Presta atención a esto, algunos NO necesitan, y otros tienen su cierre-propio).
Los tags son así: <NOMBRE_ELEMENTO> contenido </NOMBRE_ELEMENTO>
Los tags son así: <NOMBRE_ELEMENTO> contenido </NOMBRE_ELEMENTO>
Por fin, ha llegado la hora de ver la estructura básica de todas las páginas HTML:
<html>
<head>
<html>
<head>
<title>Documento sin título</title>
</head>
<body>
</body>
</html>
Como se pueden dar cuenta, todo elemento tiene un cierre. <html></html> Todo lo que está dentro de los tags de html, están dentro de tu documento. Por lo tanto, cualquier cosa que quieras hacer tiene que estar DENTRO de <html>SÍ, AQUÍ</html>. Dentro del elemento <html>, aparte de todos los demás elementos que vas a poner después, siempre, pero siempre deben estar:
<head></head> (cabecera) y
<body></body> (cuerpo)
En <head> se colocan las pequeñas características básicas de tu página, como por ejemplo, el nombre de tu página que va a ir en la pestaña de tu web cuando esté en un navegador. Por ejemplo, dentro de <head> puede ir el elemento <title></title> (título). Dentro, tienes que escribir, obviamente, el título de tu página web. Cámbialo a tu antojo.
Hasta ahora va así:
<html>
<head>
<head>
<title>Sitio web</title>
</head>
</html>
Pero no hay nada, solo has especificado el título de tu página. Recuerda bien esto: todo, absolutamente TODO lo que ves en una página web está dentro del elemento <body>.
Ahora ya entiendes más o menos de qué trata cada línea, recuerda bien la estructura básica:
<!DOCTYPE html>
<html>
<head>
<head>
<title>Sitio web</title>
</head>
<body>
</body>
</html>
Ahora veamos cómo se ve en un navegador. Vayan donde está el círculo rojo y elijan el navegador que deseen usar, en mi caso escogí al Google Chrome. Antes de proseguir, le pedirán que lo guarden, recuerden siempre dejarlo con la extensión de ".html". En mi caso, lo llamé "inicio.html".
Hagan click en guardar y automáticamente se abre Google Chrome y podrás ver tu primera página web, aunque claro, toda la página estará en blanco, pero si te percatas, en la pestaña está escrito lo que sea que hayas escrito en tu elemento <title> de <head>.
Antes de que se vayan, dadle la bienvenida a Natsume Asoko, la imagen elegida para HTML ;).
¿Verdad que se está poniendo interesante?
Nos vemos en la próxima lección de HTML.
No hay comentarios:
Publicar un comentario