Introducción
HTML significa «Lenguaje de Marcado de Hypertexto» por sus siglas en ingles «HyperText Markup Language», es un lenguaje que es utilizado para la elaboración de páginas web.
HTML no es un lenguaje de programación, HTML genera únicamente páginas web estáticas, sin embargo, HTML se puede usar en conjunto con diversos lenguajes de programación para la creación de páginas web dinámicas.
HTML sirve para describir la estructura básica de una página Web y organizar la forma en que se muestra su contenido, HTML permite incluir enlaces (links) hacia otras páginas o documentos.
HTML es un lenguaje de marcado descriptivo que se escribe en forma de etiquetas para definir la estructura de una página web y su contenido como texto, imágenes, entre otros, de modo que HTML es el encargado de mostrar en el navegador la página web.
HTML trabaja con «etiquetas» que se identifican con los símbolos <> que identifican códigos. Se definen etiquetas de apertura <etiqueta> y de cierre </etiqueta>. Todo lo que se escribe entre estas etiquetas toma la propiedad buscada.
Mi primera página Web
Para comenzar a escribir una página Web, en u nivel básico, necesitamos un editor de texto plano, puede ser Notepad en windows o uno gratis como Notepad++ que identifica los códigos y etiquetas con colores. El archivo se debe guardad con extensión .html para que los navegadores puedan leer el archivo y mostrar la página.
Todas las páginas html comienzan con la etiqueta de inicio <html> y terminan con </html>
<html>
</html>
Las páginas html se dividen en un encabezado y un cuerpo. Para el encabezado tenemos que poner las etiquetas
<head>
</head>
Por lo tanto estructura principal de una página queda
<html>
<head>
</head>
</html>
Necesitaos definir lo que mostrara el navegador, esto se define con las etiquetas de cuerpo <body> y </body>
<html>
<head>
</head>
<body>
</body>
</html>
Ahora que tenemos la estructura principal vamos a escribir nuestro primer texto
<html>
<head>
<title>Mi primera Pagina</title>
</head>
<body>
Mi primera Página Web
</body>
</html>
Guardamos el archivo en formato texto con el nombre de inicio.html, se recomienda no usar caracteres que no reconozca el idioma inglés como ñ o acentos. Ademas es recomendable no dejar espacios en blanco en el nombre del archivo.
Formato del texto
Para cambiar los atributos de las letras utilizamos la etiqueta <font> </font> (fuente o tipo de letra). El color o el tamaño son atributos de esta etiqueta
Si queremos poner las letras de distinto tamaño empleamos el atributo SIZE=»» dentro de la etiqueta <font>, por ejemplo
<FONT SIZE=»+1″>este texto se ve con mayor tamaño</FONT>
Se ve así
este texto se ve muy grande
Si queremos aun mayor tamaño ponemos un número mayor. Por ejemplo
<FONT SIZE=»+4″>este texto se ve muy grande</FONT>
este texto se ve muy grande
NEGRITA
Para poner el texto en negrilla utilizamos la etiqueta<b>…</b> de «bold» en inglés
Esto es <b>negrita</b> en HTML
Esto es negrita en HTML
CURSIVA
Para poner texto en cursiva se utiliza la etiqueta <i>…</i> de «italian» en inglés
Este texto esta <i>texto en cursiva</i>
Este texto esta texto en cursiva
SUBRAYADO
Para subrayar esto se utiliza la etiqueta <u>…</u> del inglés «underline»
Este texto está <u>subrayado</u>
Este texto está subrayado
PARRAFOS Y SALTO DE LÍNEA
La étiqueta que define un párrafo es <p>…</p>, esta etiqueta tiene atributos que se verán más adelante.
La etiqueta que permite un salto de línea es <br>, esta etiqueta no tiene una de cierre.
COLOR AL TEXTO
Podemos cambiar el color de texto dentro de la página, para esto utilizamos la etiqueta <font>…</font> y del parámetro COLOR, por ejemplo
<font color=red>este texto está en color rojo</font>
este texto está en color rojo
ALINEAR TEXO
Para alinear el texto utilizamos el atributo «align» dentro de la etiqueta de párrafo <p>…</p>
<p align=left>texto alineado a la izquierda</p>
texto alineado a la izquierda
<p align=right> texto alineado a la derecha</p>
texto alineado a la derecha
<p align=center> texto centrado </p>
texto centrado
LINEA HORIZONTAL
La etiqueta para crear una linea horizontal es <hr>, está etiqueta no tiene una de cierre.
Linea de 100 pixeles
<hr width=100>
Línea de 400 pixeles
<hr width=400>
Línea que ocupa un 60% del ancho de la ventana del navegador
<hr width=60%>
Línea que ocupa un 100% del ancho de la ventana del navegador
<hr width=100%>
Línea de 10 pixeles de ancho
<hr size=10>
Línea de 20 pixeles de ancho y que ocupe un 50% de la ventana del navegador
<hr size=20 width=50%>
ENCABEZADOS
Las etiquetas que se utilizan para mostrar texto como títulos dentro de la página web son de las más grande ala más pequeña:
<h1>…</h1>
<h2>…</h2>
<h3>…</h3>
<h4>…</h4>
<h5>…</h5>
<h6>…</h6>
Ejemplos:
Titulo 1
Titulo 2
Titulo 3
Titulo 4
Titulo 5
Titulo 6
ENLACES O VINCULOS
La etiqueta que permite que al hacer un click sobre una palabra, texto, imágenes, etc. nos habrá un vínculo es <a href=»nombre»>…</a>, por ejemplo
Vínculo a <a href=https://es.wikipedia.org>Wikipedia en español</a>
Vínculo a Wikipedia en español