Elementary Download: ¿Qué es HTML y como funciona?

lunes, enero 31

¿Qué es HTML y como funciona?

Si no sabes absolutamente nada de diseño de paginas web, estas en el lugar correcto en este tutorial aprenderás desde cero como funcionan y de que están hechas las paginas web.

¿Qué es HTML?

HTML, siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el lenguaje de marcado predominante para la elaboración de páginas web
Wikipedia.org

Es un lenguaje muy sencillo y fácil de aprender.

Elementos HTML:

Los documentos HTML estan compuestos por elementos, estos a su vez por etiquetas, atributos y el contenido del elemento, he aqui graficado:

1	<p class="texto">Soy un texto dummy</p>

Este es un elemento de párrafo, <p> viene de paragraph. Todas los elementos tienen como inicial sus nombres en ingles.

sigue con el post.........

Comentarios en HTML

Es importante en un lenguaje de programación que tenga el uso de los comentarios que sirven como guia. Un comentario en HTML empieza con <!—y termina con –>
Ejemplo:

1	<!- este es un texto comentado ->

Una pagina HTML completa

Continuando con este tutorial abre el editor de textos que prefieras (bloc de notas, notepad++, etc) y escribe el siguiente código:

1
2
3
4
5
6
7
8
9
10
11
12

<head>
<title>Barra de titulo</title>
</head>

<body>

<img src="logo.png" width="400px" height="56px"></img>
<h1>Bienvenido a mi pagina</h1>
<p class="texto">Soy un texto dummy</p>

</body>
</html>

Luego guardalo con extensión .html lo abres con el navegador de tu preferencia y deberías de ver algo asi:

Explicación

1. La definición del tipo de documento: <!DOCTYPE html>

Define el tipo de documento, siempre debe de ir en las primeras líneas de código.

2. Elemento raíz: <html></html>

Elemento raíz, que dependen de todos los elementos visibles de la pagina web, dentro de ellas tenemos el <head> y <body>.

3. Cabeza: <head></head>

El head contiene datos propios del documento, aunque es invisible la información que va en el head influye a la pagina, aquí es donde va la etiqueta <title></title> que es lo que muestra la barra de titulo, también es aquí donde se incluyen los archivos CSS y Javascript.

4. El contenido de la pagina web: <body></body>

Dentro de este elemento <body> se encuentra todo lo visible de la pagina web.

5. Una imagen o un logo: <img></img>

img significa image que funciona para colocar imagenes, en src va la ruta de la imagen, en width va el ancho de la imagen y height la altura de la imagen.

6. El titulo de la pagina dentro del body: <h1></h1>

h1 significa Heading 1 y es el elemento mas crucial para el correcto posicionamiento web.

7. Por ultimo el parrafo: <p></p>

El elemento paragraph sirve para contener parrafos.
Eso seria la parte de HTML si quieres ver toda la lista de elementos HTML e información mas detallada sigue este enlace

FUENTE: web.tursos