HTML Básico

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

Deja un comentario