UTP
Unidad 1: Introducción al lenguaje HTML

HTML, por su sigla de HyperText Markup Language (lenguaje de marcas de hipertexto), hace referencia al lenguaje de marcado para la elaboración de páginas web. Está compuesto por una serie de etiquetasUna etiqueta es un texto incluido entre los símbolos menor que < y mayor que >. rodeadas por corchetes angulares (<,>) que el navegadorPrograma que permite navegar por internet u otra red informática de comunicaciones. interpreta y da forma en la pantalla. HTML dispone de etiquetas para imágenes, hipervínculosUn hipervínculo es un enlace, a una página web, un archivo, imagen, etc. que nos permiten dirigirnos a otras páginas, saltos de línea, listas, tablas, etc.

Navegadores Web
Navegadores Web

HTML también puede describir, hasta un cierto punto, la apariencia de un documento.

HTML es un lenguaje de programación, que nos permiten crear páginas web estáticas, es decir que su información no cambia, y la posibilidad de integrar otros lenguajes de programación como PHP, creando así páginas Web dinámicas, es decir, que su contenido puede cambiar dinámicamente.

La programación de HTML se puede hacer desde cualquier editor de texto y el resultado de su ejecución se puede ver desde cualquier navegadorPrograma que permite navegar por internet u otra red informática de comunicaciones. (Chrome, Mozilla, Opera, etc).

Los documentos HTML se deben guardar con la extensiónSon letras que van al final del nombre del archivo precedidas por un punto las cuales ayudan a diferenciar el tipo de archivo y el tipo de información que este contiene. htm, html o php en el caso que incluya código de PHP. Ejemplo: mi_pagina.html

lanzador
Ejemplo: Estructura Básica de un documento HTML.

Como vemos aquí, todo el documento se encierra entre las etiquetasUna etiqueta es un texto incluido entre los símbolos menor que < y mayor que >. <html> y </html> e internamente contiene las etiquetas <head> </head> y <body> </body> las cuales traducen en español cabeza y cuerpo, respectivamente.

Entre las Etiquetas <head> </head>, pueden ir otras etiquetasUna etiqueta es un texto incluido entre los símbolos menor que < y mayor que >., como por ejemplo <title> </title>, en esta se define el título que queremos que aparezca en la pestaña del navegadorPrograma que permite navegar por internet u otra red informática de comunicaciones.. Un ejemplo de esto, se muestra a continuación:

1
2
<head>
<title>Mi primer página</title>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Dando como resultado:

Título pestaña
Título pestaña

Entre las etiquetasUna etiqueta es un texto incluido entre los símbolos menor que < y mayor que >. <head> </head> se puede especificar el autor de la página, una descripción, la codificación de caracteresLa codificación de caracteres es el método que permite convertir un carácter de un lenguaje natural en un símbolo de otro sistema de representación. etc, utilizando la etiqueta <meta> de la siguiente forma:

1
2
<head>
<meta name="author" content="DAP">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

En nuestro caso debemos establecer la codificación de caracteresLa codificación de caracteres es el método que permite convertir un carácter de un lenguaje natural en un símbolo de otro sistema de representación. en UTF8, esta permitirá que en la página se reconozcan las tildes y otros caracteres propios del español.

Todo lo que va entre las etiquetasUna etiqueta es un texto incluido entre los símbolos menor que < y mayor que >. <head> y </head> no será visible en la página, a excepción del título que aparece en la pestaña con la etiqueta <title> </title>.

Todo lo que será visible irá entre las etiquetasUna etiqueta es un texto incluido entre los símbolos menor que < y mayor que >. <body></body>.

La etiqueta <!DOCTYPE html> indica el tipo de documento, y para este caso está indicando que es un documento html en su última versión, la cual corresponde a HTML5.

Los navegadores aún no soportan en su totalidad HTML5 dado que es una versión relativamente nueva, sin embargo poco a poco lo irán haciendo hasta soportarlos a un 100%.

Estructura Básica de un documento HTML.

Instrucciones:

Observe el código HTML y haga clic en el botón "Correr" para ejecutarlo, puede realizar modificaciones al código y usar botón "Guardar" para almacenar una copia del código fuente.

Código fuente

1
2
<!DOCTYPE html>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Panel de resultados