Guía básica; Introducción al HTML
Friday, November 14, 2008 20:07
Hace algun tiempo despues de aprender HTML leyendo y leyendo, practicando y practicando llegue a la conclusion que seria conveniente crear una guia simple, siquiera basica (no quiero complicar ni asustar a nadie) que animara a que los usuarios vean lo facil que se puede creer una pagina web usando HTML (no quiero ahondar aun no con Javascript, ni PHP, ni Servlets, ajax, ni flash u otros, tal vez si un poco de CSS).
1.- Introduccion al Html
El html es un acronimo del inglés HyperText Markup Language, es decir un Lenguaje de Marcado de Hipertextos (o de Marcas Hipertextuales) el cual se basa en el uso de etiquetas (o tags en inglés). Una etiqueta alterando un contenido tiene la sintaxis siguiente:
[code]<tag>contenido</tag>[/code]
Aqui podemos observar dos clases de etiquetas:
<tag>: Esta es llamada etiqueta de apertura
</tag>: Esta es llamada etiqueta de cerradura
;D Observación:
Las letras de la etiqueta pueden estar en mayúsculas o minúsculas, indiferentemente. Recomiendo usar minusculas en el uso de las etiquetas y si aqui se escriben en algunos casos en mayúsculas sera por cuestiones de notoriedad.
Todo lo que este entre las etiquetas será influenciada por las mismas, por ejemplo:
[code]<b>Este texto esta en negrita</b> [/code]
Dara como resultado:
Este texto esta en negrita
;D Observación:
La etiqueta b nos permite mostrar el texto interior en negrita, esto es solo un ejemplo, asi que si no entendiste aun bien, no te preocupes, lo veremos todo conforme avancemos.
Un documento html es un documento con la terminacion .html o tambien .htm, en el caso nuestro usaremos html (a menos que se diga lo contrario), la extension *.*html nos informa que se trata de un documento en html el cual es facilmente visualizable por nuestro navegador de internet.
Ahora analizaremos la estructura basica de un documento en html. Para denotar que estamos tratando un documento en html, usaremos las etiquetas <html> y </html> al inicio y final del documento respectivamente. Asimismo analizaremos las dos partes principales de este documento, el cual se divide en:
Encabezado: Comprendido entre las etiquetas <head> y <head>.
Cuerpo: Comprendido entre las etiquetas <body> y <body>.
;D Observación:
Dentro del encabezado se inserta la informacion del documento (la cual analizaremos mas adelante) entre la que destaca el titulo (el cual se encuentra comprendido entre las etiquetas <title> y <title>).
Dentro del cuerpo se encuentra toda la parte que es visible y que queremos que aparezca dentro de nuestra pantalla principal.
Con esto obtenemos una estructura general y basica de un documento en html:
[code]
<html>
<head>
<title> Título de mi pagina </title>
</head>
<body>
Este es el contenido de la pagina
[Aqui ademas se insertan las demas etiquetas que alteraran el contenido.
</body>
</html>
[/code]
;D Observación:
Una recomendacion que siempre doy es intentar en lo posible usar sangrias para enmarcar los espacios internos del documento, asi:
[code]
<html>
<head>
<title> Título de mi pagina </title>
</head>
<body>
Este es el contenido de la pagina
[Aqui ademas se insertan las demas etiquetas que alteraran el contenido]
</body>
</html>
[/code]
o así:
[code]
<html>
<head>
<title> Título de mi pagina </title>
</head>
<body>
Este es el contenido de la pagina
[Aqui ademas se insertan las demas etiquetas que alteraran el contenido]
</body>
</html>
[/code]
CONFIGURANDO NUESTRO SISTEMA
En el siguiente capitulo construiremos nuestra primera pagina web usando html, para esto necesitamos antes configurar unos detalles en nuestra pc.
1.- Recomiendo crear una carpeta: Curso html, para mantener aqui todos nuestros documentos en html y mantener un orden jerarquico, esto nos servira luego cuando subamos nuestra pagina web a un servidor o web hosting, asi que habituemonos a mantener un orden.
2.- Luego configuraremos nuestra pc para que podamos ver las extensiones de nuestros documentos html:
Para Windows 95/98:
Seleccione Mi PC, Menú Ver, Opciones (u Opciones de carpetas).
Para Windows Me/XP:
Seleccione Mi PC, Menú Herramientas, Opciones de carpetas.
Luego:
Luego, en la lengüeta “Ver” de esa opción, DESMARQUE(uncheck) la opción “Ocultar extensiones para los tipos de archivos conocidos” o similar.
;DInteresante Pro-tip:
Esta modificacion no solo le ayudará a realizar sus trabajos con mayor seguridad y conocimiento de extensiones sino que al menos le informará de variedad de virus como virus escritos en VBS los cuales contienen una doble extension, por ejemplo .TXT.VBS, donde el sistema solo visualiza *.*txt y puede dejar creer que se trata de un documento de texto, tambien un .TXT.EXE, etc.
3.- Verificar la ruta de acceso al block de notas. La cual es por defecto: INICIO > Programas > Accesorios > Block de notas.
En caso el block de notas no se encuentre aqui busque el programa en MI PC y cree un acceso directo en el escritorio.
;DInteresante Pro-tip:
Tambien se puede acceder al block de notas mediante el menu INICIO > Ejecutar > tipear “notepad” > Aceptar.
En modo abreviado:
1.- Tecla Windows+R.
2.- Tipear “notepad”.
3.- Enter.
… Ahora estamos listos para crear nuestra primera pagina web.
Fuente y Autor; KnxDT
Mull dijo:
November 14th, 2008 a las 8:10 pm
Muy buena guía, enhorabuena.