Html desde casa - Lección 1 ( Ejemplo básico de página, etiquetas básicas y ejemplos )

02-Dec-2013

El HTML es un lenguaje de maquetación web, que es analizado y procesado por los navegadores para enseñar, como producto final una página como ésta.

 

Concepto de HTML.

Las siglas HTML derivan de la frase "Hypertext Markup Language" o en español "Lenguaje de Marcas de Hipertexto", haciéndo referencia al lenguaje de marcado para la elaboración de páginas web.

 

Es un estándar que sirve de referencia para la elaboración de páginas web.

Está actualmente a cargo de W3C, una organización dedicada a la estandarización de casi todas las tecnologías ligadas a la web.

 

El lenguaje HTML se basa en la referenciación, por ejemplo: Si desea añadir un elemento ya sea una imágen o un video, éste no se incrusta directamente en el código sino que se hace referencia a la ubicación de dicho elemento mediante el texto.

 

 

Ejemplo básico de html.

<html>

<head>

     <title>Título de la página </title>

 

</head>

<body>

    <h1>Encabezado de página 1 </h1>

    <h2>Encabezado de página 2 </h2>

    <h3>Encabezado de pagina 3 </h3>

 

    <p>

         Párrafo texto de prueba <i>Italic</i> <b>Negrita</b>

         <i><b>Italic negrita </b></i> ------------------

   </p>

 

</body>

</html>

Etiquetas.

Las etiquetas son símbolos o referencias que se utilizan para maquetar una página web. Se escriben con corchetes angulares ( < , > ) y generalmente requeiren ser abiertas y cerradas <Etiqueta>Contenido</Etiqueta> donde < > simboliza el principio de la etiqueta y < / > simboliza su fin.

 

Como se puede apreciar en el ejemplo anterior, el diseño de la página depende de las etiquetas que utilicemos.

 

Etiquetas más utilizadas.

 

Cabecera de la página: Se cargan aquí todos los scripts y/o elementos que requiera la página al inicializarla.

<head> .... </head>

 

Título de la página: Se ubica dentro de la etiqueta <head>

<title>Título de la página.</title>

 

Cuerpo de la página: se ubican aquí los elementos de la página.

<body> ... </body>

 

Título de cabecera.

Ejemplos: <h1>Encabezado tipo 1</h1>, <h2>Encabezado tipo 2</h2>

 

Texto en negrita: Se utiliza para expresar un texto en negrita.

<b> Texto en negrita </b> o <strong> Texto en negrita </strong>

Texto en negrita.

Texto inclinado o italic:

<i> Texto inclinado </i>

Texto inclinado

 

Color de texto.

<font color ="Color a utilizar">Texto </font>

Ejemplo:

<font color="red">Texto rojo.</font>

Texto rojo.

Combinando etiquetas:

Es posible combinar las etiquetas, podiendo así usar los atributos que brinda cada una.

Por ejemplo:

Un texto inclinado y en negrita se expresaría en html de la siguiente manera.

<b><i>Texto inclinado y en negrita </i></b>

 

Y se vería de la siguiente manera.

Texto inclinado y en negrita.

 

Respetando siempre el orden en el que se abrieron al cerrarlo. <b> <i>, por lo tanto antes de cerrar la <b> debes cerrar <i>.

 

En la próxima lección encontrarás ejemplos y explicaciones sobre cómo insertar imágenes html.

 



Comentarios. -