Curso de HTML « Nicolás Flores, Diseñador Multimedial

Curso de HTML

11 de diciembre de 2007 | 7:26 pm

Cumpliendo promesas, inauguro los tutoriales para aprender diseño web desde cero.

A quién le puede interesar?

A quienes no sepan absolutamente nada de diseño web pero que se mueren por hacer páginas.
A los que saben algo, pero quieren aprender más, quizás queriendo volverse profesionales de la web.
A los que se dedican a diseño web… les extrañará ver la cantidad de cosas que no saben aún .

A estos últimos les digo que si bien mis palabras pueden sonar soberbias, la idea es más bien que se lo tomen como un desafío profesional, tal vez personal.

O si prefieren destruirme, los invito a que encuentren los miles de errores que seguro existen y me los hagan saber, así añado sus correcciones para ir perfeccionando las técnicas de todos (no olviden de dónde aprendieron lo que saben, y que está bueno devolver algo de lo mismo).

Introducción

Antes de entrar de lleno en el armado y diseño de páginas web, hagamos una breve reseña de aquellos conceptos que a lo largo del curso se van a ir mencionando, y que pasarán a formar parte de un lenguaje común:

www

WWW (World Wide Web): es el sistema propio de internet. Concebido como un sistema de información por hipertexto. Esto quiere decir que los elementos mostrados en pantalla (texto o imágenes) pueden vincularse entre sí o hacia otras fuentes de información. Es un sistema global y público, por lo que puede accederse desde diversas plataformas en cualquier parte del mundo.
Navegador: Es el programa con el que “navegaremos” un documento. Es aquel que se interactua con el servidor, devolviendo las peticiones solicitadas.
Servidor: aloja los documentos que componen un sitio web. Mediante el protocolo HTTP se comunica con el navegador.
HTTP: siglas para “Hyper Text Transfer Protocol” (protocolo de transferencia de hipertexto). Es el protocolo de comunicación de la world wide web, el lenguaje en común, entre todos los actores.
URL: siglas para “Uniform Resource Locator” (localizador uniforme de recursos), es la dirección que localiza una información dentro de internet.
HTML: siglas para “Hyper Text Market Language” (lenguage de marcado para hipertexto). Es el lenguaje en el que se estructuran los documentos que serán leidos por servidores y navegadores.

Lenguaje HTML

El lenguaje que interpretan los navegadores web es el html. Por lo que para hacer una página web necesitamos conocerlo.

Un documento html es un archivo de texto. La diferencia entre un archivo .txt y uno .html radica en las etiquetas presentes en este último. Las etiquetas sirven para orientar al navegador en la forma de estructurar el contenido (títulos, subtítulos, párrafos, listas, etc). En este punto profundizaremos más adelante. Por ahora debemos tener presente que para crear un archivo .htm o .html sólo nos hace falta un editor de texto, desde un simple bloc de notas a alguno más complejo. Recomiendo el Notepad++, aparte de ser el bloc de notas que todos conocemos, trae incorporados otros lenguajes de programación que nos permite una mejor visualización por medio de colores, aparte de ser gratuito y Open Source.

En un futuro veremos que el principal problema que econtraremos es la falta de compromiso de algunas empresas de software al momento de diseñar navegadores que respondan a los estándares divulgados para la correcta interpretación del lenguaje empleado en un documento html. Esto implica un trabajo extra del diseñador al no sólo diseñar una página, sino a corroborar la correcta interpretación de la misma por diferentes navegadores.

¿Lenguaje de marcado? ¿etiquetas?

La base de la sintaxis de este código es la etiqueta. Por ejemplo:

<etiqueta>texto de prueba</etiqueta>

La primera etiqueta activa una orden que afecta a nuestro contenido, siendo la segunda etiqueta con el signo “/” por delante la que pone fin a la misma.

Veamos un ejemplo práctico. Para obtener un texto con negrita, la etiqueta es <b>. Por lo que si queremos lograr:

texto de prueba

El código html será:

texto de <b>prueba</b>

Nuestra primera página

Un documento html cuenta con una estructura a respetar para la correcta visualización por parte de los navegadores. Una estructura básica es:

<html>
<head>
<title>Título de la página</title>
</head>
<body>
Contenido de la página (textos e imágenes)
………..
………..
</body>
</html>

Lo que vemos es que todo el documento está contenido en la etiqueta <html>, luego contamos con un encabezado, y finalmente un cuerpo. Con esto en mente, crearemos nuestra primera página. Si en un editor de texto escribimos el siguiente código:

<html>
<head>
<title>Curso de HTML</title>
</head>
<body>
Hola mundo!
</body>
</html>

Lo guardamos como ejemplo_1.htm y lo abrimos en nuestro navegador:

Ejemplo 1

Ya empezamos a escribir en lenguaje html.

Algunas consideraciones en el manejo de archivos:

Utilizar siempre minúsculas en los nombres de los archivos.
Los espaciados entre palabras pueden crear problemas. En vez de nombrar “ejemplo 1.htm”, es preferible “ejemplo_1.htm”.
Se pueden usar las extensines .htm o .html, ambas son válidas. Por una cuestión de orden, se recomienda usar sólo una de ellas en nuestros sitios.
Al nombrar el archivo jamás usar tildes ni caracteres especiales, como “ñ”.

Pueden ver el ejemplo_1.htm.

Esta obra está bajo una licencia de Creative Commons.

decime lo que pensás...

Nicolás Flores

Diseñador Multimedial

Yaestabaregistrado.com

Filmabonito

Playroad

OD Real Estate

Bien Cortado

Tercer Ojo

Coramina Lenceria

Experiencia:

Hablemos:

Conectate:

Arte Digital

Te gusta lo que viste?

Exposición:

El blog del Turu

pero no soy blogger

« ir al inicio

Curso de HTML

Introducción

Lenguaje HTML

¿Lenguaje de marcado? ¿etiquetas?

Nuestra primera página