Calificación:
  • 1 voto(s) - 4 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Manual de lenguaje HTML (Parte I)
#1
[img]http://i.i.imgur.com/nAp1q.gif[/img]

Las páginas que nos encontramos en Internet, las páginas web, están construidas en un lenguaje de etiquetas denominado lenguaje html.

Esto quiere ser un sencillo curso para que seas capaz, en relativamente poco tiempo, de realizar tus primeras páginas web escribiendo el código correspondiente, antes de pasar a ver algún editor de código concreto (Dreamweaver por ejemplo) que simplifican enormemente la tarea.

¿Por qué entonces no empezar directamente con el editor?

Porque es muy importante tener ciertos conocimientos del lenguaje ante posibles problemas que, sin lugar a dudas, se nos van a presentar al editar nuestras páginas.

1.- Antes de empezar.

Sitúate con el puntero del ratón sobre cualquier punto vacío de esta página que estás leyendo en estos momentos. Pulsa el botón derecho de tu ratón. Se abrirá el siguiente menú contextual:

[img]http://roble.pntic.mec.es/apuente/html/im/a00.gif[/img]

Si, en vez del Explorer o Chrome, estás leyendo esta página con el Firefox, el menú contextual será algo distinto:

[img]http://roble.pntic.mec.es/apuente/html/im/a01.png[/img]

Verás algo así:

En el caso de que estés con el Explorer o Chrome veras así

[img]https://i.imgur.com/dzJJPnQ.png?1[/img]

En el caso de que estés con Firefox veras así

[img]https://i.imgur.com/AbttuR4.png?1[/img]

Pues bien, en ambos casos, estás visualizando el código fuente que da origen a la página que estás leyendo en estos momentos.
Probablemente tanto símbolo extraño y palabras algo raras te sorprenderán y te llevarán a la idea de que "esto es muy difícil" y "no es para mí". Tranquilo. Sin ser fácil, el lenguaje html está al alcance de cualquier persona, y las cosas, paso a paso, se pueden hacer algo más sencillas.

2.- Empezando.

El código fuente, se escribe en un procesador de texto. Nosotros lo vamos a hacer con el Bloc de notas. Para abrir el Bloc de Notas, le damos a Inicio > Todos los programas > Accesorios > Bloc de notas. Se abrirá una ventana como ésta:

[img]http://roble.pntic.mec.es/apuente/html/im/a04.png[/img]

Dependiendo de cómo esté configurado tu ordenador, quizá no encuentres el Bloc de notas en esta ruta.

A continuación debes saber que las dos etiquetas fundamentales dentro de las cuales tiene que ir nuestro código fuente son <html> como etiqueta de apertura y </html> como etiqueta de cierre. Después, todo lo que será visible al visitar la página con el navegador, debe de estar entre las etiquetas <body> cuerpo, en inglés, como etiqueta de apertura y </body> como etiqueta de cierre.

Nota: Las etiquetas también se pueden escribir con letras mayúsculas: <HTML> <BODY>...Nosotros vamos a optar por las minúsculas por ser lo que se está imponiendo de acuerdo con las últimas normas.

Vamos a escribir algo en nuestra página. Por ejemplo "[email protected]". Lo escribiremos entre <body> y </body>. Nuestro código quedará así:

[img]http://roble.pntic.mec.es/apuente/html/im/a05.png[/img]

<html>
<body>
[email protected]
</body>
</html>

Ahora tenemos que guardar nuestro documento en alguna parte del ordenador con un nombre y ¡muy importante! y una extensión especial. El nombre va a ser index (ya veremos porqué este nombre más adelante) y su extensión .html

También se podría guardar con la extensión .htm (el resultado es exactamente el mismo).

El sitio puede ser cualquier parte del ordenador. Para tenerlo accesible, lo vamos a guardar en el Escritorio: Le damos a Archivo > Guardar

[img]http://roble.pntic.mec.es/apuente/html/im/a06.png[/img]

Nos aparecerá la ventana de selección de directorio:

[img]http://roble.pntic.mec.es/apuente/html/im/a07.png[/img]

Elegimos Escritorio y le llamamos index.html

Observa que en "Tipo" no hemos cambiado nada. No es necesario al haber incluído la extensión .html en el nombre del archivo.

Podemos visualizarlo para ver si la página funciona....

3.- Mi primera página.

Ya podemos ir al Escritorio para abrir nuestra página.

Si el navegador predeterminado es el Explorer, el icono de nuestra página se visualizará así [img]http://roble.pntic.mec.es/apuente/html/im/a09.png[/img] Si el navegador predeterminado es Chrome se visualizará así [img]https://i.imgur.com/bbEVut0.png[/img]

Si, en cambio, es el Firefox el navegador predeterminado, el icono de nuestra página será éste: [img]http://roble.pntic.mec.es/apuente/html/im/a08.png[/img]

Vamos a ver nuestra página: Hacemos doble clic sobre el icono que guardamos en el escritorio y se nos abrirá una ventana en el navegador así...

[img]http://roble.pntic.mec.es/apuente/html/im/a15.png[/img]

La verdad no es una página muy espectacular pero... los comienzos deben ser humildes.

A partir de este momento, es conveniente tener el navegadore minimizado en la barra de tareas para actualizar y visualizar rápidamente los cambios efectuados.

[img]http://roble.pntic.mec.es/apuente/html/im/a19.png[/img]

4.- Mejorando la página.

4.1.- Centrar el texto.

Si queremos que nuestro saludo: "[email protected]" aparezca en el centro de la página, escribimos la etiqueta <center> y la etiqueta de cierre </center> entre del saludo

El código quedaría así:

[img]http://roble.pntic.mec.es/apuente/html/im/a20.png[/img]

<html>
<body>
<center>
[email protected]
</center>
</body>
</html>


Guardamos los cambios: (con dar a guardar, ya se guarda automáticamente en el mismo icono que esta en el escritorio)

[img]http://roble.pntic.mec.es/apuente/html/im/a21.png[/img]

comprobamos los resultados (lo recuperamos desde la barra de tareas)

le damos al botón actualizar o a la tecla F5 de nuestro teclado [img]http://backstage.blogs.com/the411faq/images/2008/07/10/f5_key_keyboard.jpg[/img]

Y veremos nuestro saludo en el centro de la página así:

[img]http://roble.pntic.mec.es/apuente/html/im/a23.png[/img]


Ver la segunda parte AQUÍ

Creado por: DiosOne



FUENTE: Tutorial INDEXhn
España 
Twitter Web 
[Imagen: osxwaKU.gif]
WWW
#2
Esto es lo basico del html no tiene mucho pero buen tutorial esta bien explicado


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  lenguaje de programacion. easy english 3 84 05-03-2018, 09:47 AM
Último mensaje: efbsfcd
Sonrisa Login->html+js+ajax+php wpadilla 2 225 05-11-2017, 12:39 PM
Último mensaje: piensaengrande
  PRIMER PAGINA WEB HTML DEL MUNDO Smithcanal 27 848 21-10-2017, 01:47 AM
Último mensaje: ReyNexo23
  [Duda] Qué lenguaje me recomiendan para empezar Backend? Kamasado 5 294 03-07-2017, 05:42 AM
Último mensaje: ArtuGar
  Plantillas HTML Responsive Free Profesionales gassip 16 669 13-06-2017, 03:45 AM
Último mensaje: gassip
  lenguaje de programacion. easy english 5 303 11-06-2017, 03:05 AM
Último mensaje: mispracticas2009
Música [Aporte] Reproductor de audio html djsmokingcr 11 626 02-05-2017, 03:04 AM
Último mensaje: gassip
  [Tutorial] Métodos para redireccionar URLs (HTML, PHP y Javascript wiston3 1 295 01-12-2016, 11:12 PM
Último mensaje: zeuz
  Expandir etiquetas HTML en documento .php con EMMET gassip 2 393 18-11-2016, 07:28 PM
Último mensaje: DaveNPlay
  [Aporte] PcTag: Información HTML KesiaMuller 0 306 28-10-2016, 05:42 AM
Último mensaje: KesiaMuller



Usuarios navegando en este tema: 1 invitado(s)