Aprende HTML - Tutorial para Principiantes - IONOS

Digital Guide
 15.11.19 | Desarrollo web
   
Productos asociados
Hosting para
MyWebsite
agencias
Ofrece Ver tarifas fiable
un servicio
y de alto rendimiento a
tus clientes con un pack
hosting de IONOS.
Ver packs 
Tutorial básico de HTML: crea tu propio

proyecto web
Artículos
A finales de los años 1980, Tim Berners-Lee desarrolló los Favoritos
fundamentos de Internet mientras trabajaba en un proyecto interno
en la Organización Europea para la Investigación Nuclear (CERN) que
¿Cuánto cuesta una
debía permitir el intercambio transnacional de información en su página web?
red de laboratorios, distribuida entre Francia y Suiza. Como base de
Usa nuestra visión de
esta infraestructura, el informático utilizó el lenguaje de hipertexto,
conjunto para hacer una
un tipo de escritura que transmite información mediante
estimación realista de los
hipervínculos (hyperlinks) y se escribe con lenguajes de marcado
como el Hypertext Markup Language o HTML, desarrollado por
costes de tu web...
Berners-Lee expresamente para el proyecto.
Junto a otros componentes como el protocolo de transferencia HTTP, ¿Cómo vender por
el localizador URL, así como los navegadores y los servidores web,
Internet?
HTML constituye, aún tres décadas después, la piedra angular de la Descubre 5 pasos para
interconexión digital global. Esto hace que aprender a utilizar este vender con éxito tus
lenguaje web se cuente entre los primeros deberes de cualquier productos en Internet...
desarrollador. En este tutorial de HTML se han recopilado los
principios básicos de este lenguaje de marcado, así como algunos
consejos de HTML para principiantes, para que tus primeros pasos Mejorar la presencia
en el mundo del desarrollo web sean firmes y tus conocimientos online de tu web
sólidos. Desde el SEM hasta el
display marketing o el
móvil, te mostramos los
Índice
métodos más
1. ¿Qué es HTML?
importantes...
2. Qué software necesitas para escribir código HTML
3. Introducción a HTML: crear la primera página
4. HTML básico: cómo estructurar un texto con etiquetas
Página web de
5. Componer la estructura interna de una página web con HTML
restaurante
6. Cómo puedes incluir imágenes, vídeos o gráficos en tu página web
7. Cómo enlazar páginas y contenidos: la importancia de los Una página web es la
hipervínculos primera toma de contacto
8. La recta final: lanzar la página online para muchos clientes y te
9. CSS y JavaScript: por qué HTML solo es el comienzo
ayuda a convertir a los
interesados en visitantes
¿Qué es HTML? satisfechos...
El lenguaje de marcado de hipertexto hace parte de aquellos

lenguajes informáticos que las máquinas pueden entender y que Tiendas de artesanía
facilitan la interacción con el hombre. Marcándolos como tales, HTML
Cómo presentar y vender
permite definir y articular titulares, párrafos, listas, tablas o gráficos
productos artesanales
en una web, de tal forma que cualquier navegador que pueda
online de manera rápida,
interpretar el código puede mostrar visualmente cada elemento.
fácil y rentable...
Mediante los metadatos, HTML también puede proporcionar
información adicional, como por ejemplo, sobre el autor. Hoy día, y al
contrario de lo que ocurría en sus inicios, HTML solo se usa para
estructurar la página internamente y no para definir su aspecto
visual, algo de lo que se ocupan lenguajes como CSS (Cascading Style
Sheets).
HTML se desarrolló a partir del hoy ya casi desaparecido

metalenguaje SGML (Standard Generalized Markup Language),
estándar ISO reconocido (8879:1986) del que heredó su forma de
escribir. Esta escritura se basa en definir cada elemento con un par
de etiquetas o tags rodeadas por corchetes angulares, compuesto
por la de inicio <> y la de cierre </>. Algunos elementos no
requieren de esta última, como el <br>, que además carece de
contenido. Además de las etiquetas, los siguientes atributos de
HTML también recuerdan a su predecesor:
Declaración del tipo de documento: aquí se proporciona

información sobre la versión de HTML utilizada, como, por
ejemplo: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
Empleo de entidades HTML: los signos de puntuación, los

caracteres con tilde o los símbolos especiales se traducen en
entidades HTML para poder visualizarse en el navegador (p.
ej., ñ para "ñ" o é para "é").
Comentarios: los comentarios ocultos para el navegador pero

visibles para los programadores se integran con la etiqueta <!-
- -->
Atributos: los atributos amplían la definición de los elementos

y siguen el esquema <etiqueta atributo="variable">
Qué software necesitas para escribir código

HTML
En los inicios de nuestro breve curso de HTML es menester aclarar

de qué manera se puede escribir HTML y qué aportan las diferentes
opciones, puesto que, por un lado, al no tener grandes requisitos, es
suficiente con disponer de un simple editor de texto como el que se
encuentra en cualquier sistema operativo y, por el otro, es verdad
que algunas aplicaciones especiales ofrecen algunas facilidades a la
hora de escribir. Dicho esto, ¿cuál es la mejor alternativa si se quiere
aprender a escribir HTML?
Editor de texto
No es necesario disponer de ningún software especial para escribir

un código HTML limpio y ordenado. Un editor de texto como Notepad
de Windows o su equivalente en Mac, TextEdit, en texto sin formato,
es suficiente. Este programa no permite cambiar el aspecto del texto,
tarea que recae directamente en el código HTML. En teoría se
podrían utilizar también procesadores de texto como Microsoft Word
u OpenOffice Writer, pero no tiene mucho sentido hacerlo si se
quiere aprender HTML, porque no se van a utilizar todas sus
funciones, las cuales, además, podrían frenar el proceso de
aprendizaje. En definitiva, para aprender a escribir HTML, la decisión
más acertada es utilizar un editor de textos al uso como el que se
encuentra instalado en cualquier sistema operativo.
Editores de HTML
Un paso intermedio entre los editores de texto y los programas más

complejos lo constituyen aquellos editores con una funcionalidad
más completa que incluye, por ejemplo, la de destacar
cromáticamente las etiquetas, de modo que proporciona una visión
general muy clara sobre el código que se ha escrito y permite, así,
detectar errores sintácticos más rápidamente. Otra función estándar
muy útil es la de autocompletar, que propone formas de ampliar o
completar las etiquetas, incluso cerrándolas automáticamente.
Muchos editores disponen, además, de una función de vista
preliminar que permite ir comprobando el resultado de lo que se
lleva escrito.
Para los usuarios de Windows, un editor de texto muy recomendable

es Notepad++, de código abierto y distribuido con licencia General
Public, mientras que los usuarios de sistemas unixoides pueden
recurrir a la solución gratuita Vim.
Editores con visualización en tiempo real
Una alternativa muy atractiva, hoy incluida en casi la mayor parte de

sistemas de gestión de contenidos y de diseño de páginas web,
consiste en utilizar los editores conocidos comoWYSIWYG, que
permiten escribir viendo el resultado en tiempo real. Las siglas
equivalen a "What You See Is What You Get" ("Lo que ves es lo que
obtienes") y es el principio que fundamenta a estos programas,
desarrollados con el objetivo de permitir crear código HTML sin
conocimientos sobre lenguaje de marcado. Funcionando de forma
parecida a como lo hace un procesador de textos, el texto se articula
utilizando las funciones predeterminadas disponibles en el menú,
sin tener que escribir manualmente las etiquetas, que el editor
genera en un segundo plano. Esto tiene, sin duda, sus ventajas, pero
no a la hora de aprender HTML, incluso aunque se pueda acceder en
todo momento a la vista de código. BlueGriffon o Dreamweaver de la
casa Adobe son dos de las muchas opciones de editores con vista
preliminar en tiempo real.
Introducción a HTML: crear la primera página
En el primer paso de nuestro tutorial de HTML mostraremos cómo

crear una página sencilla que se podrá visualizar en el navegador.
Esta página no es un documento HTML válido, estructurado según
determinados estándares de calidad, sino una mera página de
prueba. Tanto para la creación de esta página como para el resto de
ejemplos contenidos en este manual de HTML básico se toma el
editor Notepad++ como herramienta de referencia, de modo que si
usas otro programa diferente, tendrás que tener en cuenta que los
pasos podrían variar.
Abre el editor y guarda un documento nuevo con el nombre de test.

Como formato de archivo escoge "Hypertext markup language file"
para que el navegador pueda entender más adelante que se trata de
una página de HTML y lo abra como tal. En el caso que utilices el
editor de textos simple, selecciona "Todos los archivos" como
formato de archivo y la codificación UTF-8. En este editor hay que
indicar manualmente que se trata de un documento HTML. Lo
haremos guardando el archivo con el nombre test.html.
Este documento debería poder mostrarse en tu navegador haciendo

doble clic sobre él, pero como aún no tiene ningún contenido verás
una página en blanco. En el siguiente paso añadimos entonces un
texto de prueba como "This is my first webpage!" ("Esta es mi
primera página web"). Guardamos el documento y lo volvemos a
abrir. Deberías ver algo así al abrirlo en el explorador:
Vista preliminar de una primera página web con contenido
HTML básico: cómo estructurar un texto con

etiquetas
Así habrás creado una primera página web, incluso sin haber escrito
ni una línea de código. Si, de la misma manera, intentas añadir un
texto bien articulado con títulos y párrafos, pronto te darás cuenta
de que es imposible hacerlo sin etiquetas. Cualquier formato
añadido, por ejemplo, con un procesador de texto, desaparecerá de
la vista en el navegador cuando abras el documento HTML: los
puntos aparte desaparecen, los espacios se eliminan, etc. La solución
pasa indefectiblemente por marcar todos los componentes formales
de texto como tales mediante los elementos estructuradores
adecuados, que no es otra cosa que adentrarnos en el mundo de las
etiquetas de HTML.
Definir párrafos con la etiqueta <p>
Este elemento, cuya nomenclatura proviene del inglés "paragraph"

("párrafo") es necesario para crear separaciones por párrafos. Con la
etiqueta de inicio <p> se marca dónde comienza el párrafo y con el
de cierre </p> dónde acaba. El texto se escribe entre estas dos
etiquetas.
En todas las versiones de HTML, excepto en XHTML, el tag de cierre

es opcional, aunque conviene acostumbrarse a usarlo no solo
durante el aprendizaje sino también porque denota un buen estilo.
Puedes probar a marcar párrafos con la etiqueta <p> en tu página

de prueba, añadiendo otra frase ("This is the second paragraph of
my first webpage" en este ejemplo o "Este es el segundo párrafo de
mi primera página web") a aquella primera y marcándolas con la
etiqueta, por ejemplo, así:
1 <p>This is my first webpage!</p>

2 <p>This is the second paragraph of my first webpa
Nota: en realidad no sería necesario separar las frases como hemos

hecho aquí, ya que al navegador, que solo es capaz de interpretar las
etiquetas, poco le importa cómo lo leamos nosotros. Si se ha escrito
así es meramente por una mejor visualización.
Este sería el resultado en la ventana del explorador:
Vista de la página de prueba en el navegador con un nuevo párrafo
Añadir títulos y subtítulos con la etiqueta <h>
Los títulos también se cuentan entre los elementos básicos de un

texto bien estructurado. Gracias a los marcadores estructurales no
solo puedes señalar un título como tal sino que también tienes la
posibilidad de crear una jerarquía de títulos principales y
secundarios. Para ello cuentas con las etiquetas <h1> hasta <h6>,
aunque <h1> representa el titular principal de cada subpágina y solo
habría que usarlo una única vez, al contrario que todos los demás a
partir de <h2>.
Aquí, es importante mantener la jerarquía correcta y no utilizar los

diferentes niveles al azar para que tanto el lector como el buscador
puedan entender la estructura del texto a partir de los diferentes
títulos.
Para añadirle a esta primera página de prueba un título principal y

un título secundario puedes utilizar los siguientes comandos:
1 <h1>Main heading: my first webpage</h1>

2 <p>This is my first webpage!</p>
3 <h2>Second heading</h2>
4 <p>This is the second paragraph of my first webpa
Nota: al tratarse de un documento HTML muy sencillo sin metadatos,

algunos navegadores, como Firefox, no muestran los acentos o
caracteres especiales de forma correcta. Para este test sería
recomendable utilizar Google Chrome o traducirlos a entidades
HTML.
En el explorador se verá de la siguiente manera:
Vista de la página de prueba en el explorador con título principal y secundario
Destacar palabras o fragmentos de texto: <i>,

<em>, <b> y <strong>
Entre los elementos básicos de formato de HTML se encuentran

también aquellas etiquetas que permiten destacar de alguna forma
tanto palabras aisladas como frases o fragmentos de texto, con la
finalidad de dirigir el foco de atención del lector a elementos clave
de contenido o funcionales y ayudarle a percibirlos. Para acentuar
frases, expresiones técnicas, citas o reflexiones en cursiva podemos
utilizar las etiquetas <i> (itálica) y <em> (énfasis). No obstante,
conviene utilizar con prudencia la cursiva, ya que frena la lectura.
Más importantes son, sin embargo, los elementos <b> (negrita) y
<strong> (énfasis fuerte), que destacan en negrita aunque con
diferencias en cuanto a su utilización. La etiqueta <b> debería
utilizarse para marcar aquellos elementos sobre los que se ha de
llamar especialmente la atención del usuario, mientras que <strong>
está prevista para destacar contenido relevante.
Lo veremos ampliando nuestra página de prueba con algunas

etiquetas de formato:
1 <h1>Main heading: <i>my first webpage</i></h1>

2 <p>This is my<strong>first</strong>first webpage
3 <h2>Second heading</h2>
4 <p>This is the second paragraph of my <em>first w
5 <p><b>Note</b>:Typical example for the<b>-tag.</p
Nota: para que el ejemplo de código HTML del pasaje añadido no se

muestre como texto plano hemos traducido los corchetes (< y >)
como entidades HTML (< y >). Hay que seguir teniendo en
cuenta los acentos y otros caracteres especiales.
Vista en el navegador de la página de prueba con formato
Crear listas con las etiquetas <ul>, <ol> y <li>
No solo a la hora de hacer la compra recurrimos a las listas. También

en la edición de textos se revelan como un medio muy útil para
descongestionar párrafos y optimizar la lectura. Con HTML se
pueden crear listas con o sin numeración (con viñetas o puntos) con
las etiquetas <ol> ("ordered list"=lista ordenada) o <ul> ("unordered
list"=lista desordenada) respectivamente. Para definir los puntos de
la lista se utiliza <li>, que solo se puede usar si se combina con las
dos etiquetas de listado mencionadas.
Ahora podrás probarlo en tu página de prueba:
1 <ul>
2 <li>first unordered-list item</li>
3 <li>second unordered-list item</li>
4 <li>third unordered-list item</li>
5 </ul>
Nota: recuerda que puedes escribir el texto que prefieras. En este

caso la elección del inglés como idioma de los ejemplos solo tiene
motivos editoriales.
El resultado debería parecerse a esto:
Página de prueba con lista con viñetas
Si, por el contrario, quieres crear una lista numerada solo hay que
cambiar la etiqueta que define el tipo de lista y marcarla como lista
ordenada con <ol>:
1 <ol>
2 <li>first ordered-list item</li>
3 <li>second ordered-list item </li>
4 <li>third ordered-list item </li>
5 </ol>
Como consecuencia, en lugar de las viñetas aparece una lista

numerada:
Página de prueba con una lista numerada de tres elementos <li>
Presentar información en tablas: <table>, <tr> y

<td>
Durante mucho tiempo fue habitual utilizar las tablas de HTML tanto
para presentar datos complejos de una forma más sencilla, como
también para estructurar por entero el diseño de una página web o
para subdividir el texto en varias columnas. Sin embargo, con el
aumento de la popularidad de CSS este papel extra de las tablas
pasó a un segundo plano, de tal modo que hoy las tablas asumen
únicamente la función para lo que fueron pensadas, es decir, la
presentación de datos de forma ordenada. Las tablas se componen,
por lo menos, de estos tres elementos:
<table>: esta etiqueta marca el inicio y el cierre de una tabla

en HTML, aunque por sí sola no informa al navegador de
aspectos necesarios para mostrarse como el número de filas o
de columnas.
<tr>: con el elemento "table row" (fila de la tabla) se añaden

tantas filas a la tabla como sea necesario.
<td>: las columnas completan la estructura básica de una

tabla. Para ello necesitamos el tag "table data" (datos de la
tabla), que se subordina a una etiqueta <tr>, puesto que,
dentro de una fila, se crean varias celdas (una por columna). El
contenido de una celda se sitúa entre la etiqueta de inicio <td>
y el de cierre </td>.
Creamos a continuación una tabla sencilla para entender la

estructura de tabla en HTML. En nuestra prueba se compone
únicamente de una línea y dos columnas:
1 <table>
2 <tr>
3 <td>first data field</td>
4 <td>second data field</td>
5 </tr>
6 </table>
Al mostrar la vista preliminar en el explorador, pronto se detecta que

la tabla no se muestra como debería, pues ni se distinguen las dos
columnas ni se reconoce siquiera si se trata de una tabla. La
explicación es más sencilla de lo que parece y es que, por defecto,
las celdas de HTML no tienen borde. Esta característica tan propia de
las tablas se marca ampliando la etiqueta <table> con el atributo
border y la variable 1, como en nuestro ejemplo:
1 <table border="1">
2 <tr>
3 <td>first data field</td>
4 <td>second data field</td>
5 </tr>
6 </table>
Abre ahora tu documento HTML en tu navegador y observa la tabla

resultante.
Nota: HTML5 ya no soporta el atributo border, una función que ha

asumido CSS.
Vista en el navegador de una tabla sencilla de dos celdas con borde
A pesar de su sencillo formato, HTML también permite destacar los

títulos de las columnas. Para ello se ha de marcar la fila
correspondiente con la etiqueta <thead> (table head) y marcar las
celdas como <th>. Con este código de abajo diseñas una tabla con
cuatro filas, tres columnas y títulos:
1 <table border="1">
2 <thead>
3 <tr>
4 <th>Column heading 1</th>
7 </tr>
8 </thead>
9 <tr>
10 <td>1</td>
11 <td>2</td>
12 <td>3</td>
13 </tr>
14 <tr>
15 <td>4</td>
16 <td>5</td>
17 <td>6</td>
18 </tr>
19 <tr>
20 <td>7</td>
21 <td>8</td>
22 <td>9</td>
23 </tr>
24 </table>
Vista en el navegador de una tabla de HTML con títulos de columna en negrita
Componer la estructura interna de una página

web con HTML
En el siguiente capítulo de este tutorial de HTML nos ocupamos de la

estructura básica de una página web. Los documentos HTML no solo
contienen texto, enlaces y otro tipo de contenido como imagen o
vídeo, sino también los ya mencionados metadatos, que revelan al
navegador, pero también a los crawlers de los buscadores, cómo han
de leer la página.
Algunos de estos metadatos son invisibles al usuario que abre una

página, pero otros se muestran en la pestaña del título, en el
historial o como titular de los resultados del buscador.
Reducido a sus elementos mínimos necesarios, el código básico de

una página de HTML en castellano sería algo así:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="description" content="Here you can
6 <title>Learn HTML: The basic framework</title>
7 </head>
8
9 <body>
10 </body>
11
12 </html>
Un documento HTML se compone, según este ejemplo, de las tres

secciones DOCTYPE, head (cabecera) y body (cuerpo del documento),
aunque el primero, al tratarse de la definición del tipo de documento
que viene a continuación, es el único que ha de figurar antes de la
etiqueta <html> que encierra el contenido del archivo. DOCTYPE
permite indicar a la aplicación que lee el documento qué estándar
ha seguido su programador. En este caso es HTML5, un tipo de
documento que cualquier navegador puede reconocer y que permite
tanto el uso del código actual como los más antiguos, razón por la
cual es conveniente utilizarlo, en especial si se está aprendiendo a
escribir con HTML.
En la cabecera, enmarcada por la etiqueta <head>, hemos incluido la

codificación de caracteres que ha de usar el navegador (meta
charset), la metadescripción, relevante para el buscador (meta
name="description") o el título de la página web (title), que aparece
en la parte superior del navegador. Además de estos, que aunque
opcionales son muy recomendables para favorecer una buena
valoración por parte del buscador, también se pueden añadir
numerosos metadatos. La única excepción la constituye el elemento
<title>, puesto que constituye el único obligatorio en un documento
HTML, junto a la definición del tipo de documento. Más tarde se
añadirá un vínculo al archivo CSS a la cabecera donde están
contenidos los aspectos de diseño y formato.
La etiqueta <body> marca lo que el navegador ha de mostrar al

usuario.
Nota: las etiquetas para la estructura básica de HTML son

opcionales, es decir, podrían, en teoría, no incluirse. En este caso, el
navegador crearía de forma automática las etiquetas <html>, <head>
y <body> y les subordinaría los elementos correspondientes. Sin
embargo, lo normal es crearlas. El desglose facilita la legibilidad del
documento, lo cual beneficia especialmente a los principiantes.
Cómo puedes incluir imágenes, vídeos o

gráficos en tu página web
No hay duda que el texto es el componente principal de cualquier

página web, pero estímulos visuales en la forma de imágenes, fotos o
gráficos tienen una gran influencia en la experiencia del usuario, lo
que las hace imprescindibles si se aspira a diseñar una buena
página. Habitualmente se utilizan estos tres formatos, soportados
por todos los navegadores:
JPG: el formato JPG se utiliza para fotos, o gráficos semejantes a

fotografías, con un fuerte contraste y una gran diversidad
cromática, ya que puede representar más de 16 millones de
colores y comprimir considerablemente los archivos, aunque
vaya ligado a una pérdida de calidad de la imagen.
PNG: este es el formato de los gráficos y los logos, ya que

puede representar entre 256 (PNG8) y 16,7 millones de colores
(PNG24) y, al contrario que JPG, comprime sin pérdida
cualitativa. Como contrapartida, el archivo es más grande.
GIF: los archivos en formato GIF solo pueden representar 256

colores, aunque son muy utilizados en el desarrollo web
porque permite crear pequeñas animaciones, elementos de
navegación o gráficos sencillos.
La etiqueta que permite añadir una imagen a un archivo HTML es

<img> ("image"=imagen), a la que se añade el directorio donde está
almacenada la imagen para que el navegador sepa adónde ha de ir
a buscarla. Para ello se utiliza el atributo src, del inglés "source"
(fuente), así como la ruta del archivo.
Es recomendable crear una subcarpeta con el nombre "Imágenes"

en el directorio del proyecto que también contiene el documento
HTML y guardar en ella todas las imágenes que se vayan a utilizar en
la web.
La imagen de ejemplo de nuestro tutorial de HTML se llama

grafico1.png y se encuentra en la mencionada carpeta "Imágenes".
De este modo, la línea de código que deberíamos escribir para
integrar este elemento visual en la web sería:
1 <img src="images/graphic1.png" />
Existen otros atributos de imagen, como la anchura (width), la altura

(height) o el texto alternativo, cuyo uso es muy recomendable. Definir
el tamaño de la imagen en anchura y altura permite al navegador
reservar un espacio para ella ya durante la carga de la página, de tal
forma que, durante ese lapso de tiempo y hasta que esté cargada
por completo, puede ir mostrando paralelamente otros contenidos
menos pesados en la ventana del navegador sin que tenga que
concluir el proceso de descarga del archivo de imagen, lo que
frenaría la carga de la web en su conjunto.
El atributo alt, por otro lado, permite escribir un texto alternativo

para la imagen, que aparece cuando esta no se puede mostrar y que
conviene incluir en el repertorio básico de HTML por tres motivos:
Favorece la accesibilidad de la página porque ofrece

información sobre la fotografía en caso de problemas de
visualización.
Ayuda a los robots de los buscadores a clasificar la imagen y

cuenta como contenido extra para su posicionamiento.
Así lo dictan las especificaciones de uso de HTML.
Ampliada con estos atributos que hemos mencionado, la frase de

código HTML resultaría así:
1 <img src="images/graphic1.png" width="960" height
Nota: Las variables '960' y '274' para la anchura y la altura

corresponden, respectivamente, a la medida original de la imagen
gráfica. El navegador calcula automáticamente su equivalencia en
píxeles.
Vista en el navegador de la imagen integrada en el documento HTML (Fuente de

la imagen: https://pixabay.com/es/haga-clic-aqu%C3%AD-bot%C3%B3n-sitio-
web-1312391/
Cómo enlazar páginas y contenidos: la

importancia de los hipervínculos
Los hiperenlaces o hipervínculos, nombre procedente de la voz

inglesa "hyperlink" y popularmente conocidos como "links", son la
principal razón del éxito sin precedentes de la world wide web y no
pueden faltar en un curso de introducción a HTML. Sin estas
referencias electrónicas que conducen al usuario de una a otra
página o que inician alguna acción, como podría ser la descarga de
un documento, no podría existir una interconexión como la que
ofrece la red de redes. Se pueden distinguir tres tipos de enlace:
Internos: los enlaces internos articulan una página web y

guían al usuario en su navegación. Esta estructura interna
puede tener diversas formas, desde una lineal, por ejemplo, en
la cual el usuario puede ir de una subpágina a otra de la web
en un determinado orden, a una de tipo arbóreo, en la que el
usuario escoge a dónde ir desde la página principal. También
es posible utilizar enlaces internos en una misma página, cuya
función podría consistir en dirigir al usuario al principio del
texto una vez ha llegado al final.
Externos: estos son los vínculos que envían al usuario a otra

web y se usan para ofrecerle un valor añadido o recomendar
una oferta diferente. En este caso, si se quiere evitar una
valoración negativa en el buscador, conviene evitar un exceso
de enlaces externos, así como también hay que controlar
regularmente la calidad del contenido que se enlaza y el
propio funcionamiento del enlace.
Otros enlaces: no todos los vínculos enlazan a documentos

HTML. Algunos también refieren a la descarga de un
documento, abren el cliente de correo electrónico o activan el
visor de PDF.
Enlaces internos: así articulas tu proyecto
Con el tiempo podrás aplicar las nociones adquiridas en este curso

de HTML en la estructuración de proyectos más complejos, pero
antes comenzaremos enlazando dos páginas. Será necesario que
crees otra página que puedas enlazar a aquella primera test.html .
Esta nueva página ha de tener un nombre diferente, targetpage.html
("página objetivo"), por ejemplo, y ha de guardarse en el mismo
directorio que la primera.
Para generar un vínculo se utiliza la etiqueta de HTML <a>, que

deriva de "anchor", ancla en castellano, y cuya función es
simplemente indicar que la información enmarcada es un enlace.
Esto hace que siempre necesite un atributo, href (hiperreferencia),
que señale a dónde dirige en enlace. El texto del enlace que el
navegador muestra por defecto en azul y subrayado se escribe
enmarcado en la etiqueta <a>.
Incluyendo la siguiente línea de código en la página de prueba la

enlazamos a la segunda página (target page):
1 <a href="targetpage.html">Jump to target page</a>
Si el hipervínculo funciona correctamente debería abrirse una

página vacía, ya que aún no se ha realizado ninguna acción en esta
segunda página. En el siguiente paso incluimos en esta nueva
página otro enlace interno que redirija a la original (previous page):
1 <a href="test.html">Back to previous page</a>
Nota: si la página a enlazar no se encuentra en el directorio principal

hay que indicar la ruta que lleva a la subcarpeta donde está
guardada, subcarpeta/targetpage.html . En el enlace a la primera
habría que indicar también la subcarpeta y la página: <a
href="../test.html">.
Enlazar a contenidos externos
Para crear un enlace externo en una página no se necesita una

etiqueta diferente, pero tampoco es necesario saber en qué
directorio se encuentra la página a enlazar, puesto que referir a un
contenido ajeno solo requiere conocer la dirección web completa o
URL donde se encuentra, que ya contiene toda la información
necesaria. No obstante, como este contenido no reside en tu propio
servidor web no tienes ningún tipo de influencia en la calidad del
enlace, por lo que se hace necesaria una revisión regular.
Es importante invertir tiempo en la redacción de un texto preciso y

atractivo para el enlace, puesto que palabras vacías como "aquí"
proporcionan al usuario muy poca información sobre lo que va a
encontrar si hace clic en él.
Prueba incluir un enlace externo en tu página con la siguiente línea

de código, que genera un vínculo a nuestra Guía Digital:
1 <p>HTML tutorial and numerous guides on the topic

2 <a href=" https://www.ionos.com/digitalguide ">IO
3 </p>
Estos hipervínculos alejan a tus visitas de tu página y aunque

pueden regresar pulsando el botón de "vuelta atrás" del navegador
(←) no se puede confiar en que lo hagan. Existe, no obstante, la
posibilidad de que la página enlazada se abra automáticamente en
una pestaña o una ventana nueva, de modo que la primera página
(tu página) se mantenga abierta: el atributo target describe en
donde se ha de abrir el documento enlazado y con la variable _blank
(en blanco) se especifica su apertura en una nueva ventana.
Esto se escribe de la siguiente forma:
1 <a href="https://www.ionos.com/digitalguide" targ
La recta final: lanzar la página online
En esta introducción a HTML, hemos visto cómo crear y enlazar dos

documentos HTML, sin embargo, solo has podido ver estas páginas
en tu navegador. Si quieres mostrárselas a otras personas verás que
no es posible, porque tanto las hojas de HTML, como las imágenes
que has incluido en ellas, se encuentran localizados en tu
ordenador, por lo que no se pueden entregar al navegador que hace
la petición. Si quieres mostrar al mundo tus logros has de registrar
el proyecto en la red y contratar el servicio de alojamiento más
adecuado para tu proyecto.
El primer paso consiste en encontrar un dominio (dirección web)

para el proyecto y registrarlo en un proveedor de Internet como
IONOS, que ofrece un servicio online de registro de dominios. Una
vez hecho esto, el siguiente paso consiste en proporcionar el
fundamento más adecuado al proyecto instalando y configurando un
servidor web propio o alquilándolo en un proveedor de alojamiento
web, siendo esta última, la opción más indicada para aquellos con
menos experiencia. Alquilando un servidor web evitas ocuparte tú
mismo de la selección, la instalación y el mantenimientodel software
para el servidor, pudiendo escoger el paquete que garantiza el
espacio de almacenamiento que necesita tu proyecto.
Finalmente, se han de subir los documentos HTML que componen tu

web al espacio web que tienes a tu disposición. Para ello necesitas
un programa de transferencia de archivos o FTP (File Transfer
Protocol). Este programa cliente permite intercambiar datos con el
servidor FTP de tu proveedor mediante el protocolo que le da
nombre. En este artículo de nuestra guía presentamos una excelente
selección de programas FTP. Toda la información que necesites para
acceder al servidor FTP, así como otro tipo de indicaciones o
instrucciones, la proporciona el proveedor donde alquilas el espacio
web. Ten en cuenta que al subir los documentos al servidor FTP la
estructura de archivos no se ve modificada, por lo que merece la
pena cuidar este aspecto desde el principio.
CSS y JavaScript: por qué HTML solo es el

comienzo
A lo largo de nuestro curso de HTML básico hemos mencionado que

si bien este lenguaje constituye el fundamento de toda página web,
su papel en el desarrollo web moderno ya no incluye tareas de
diseño visual, labor que recae en el lenguaje de hojas de estilo CSS o
Cascading Style Sheets. CSS permite definir el color de los distintos
elementos de una página, su composición básica o el formato de los
pasajes de texto, de los títulos o de otros elementos de contenido,
otorgando a las páginas un aspecto visual atractivo y
contemporáneo. Esta estricta separación entre contenido (código) y
diseño facilita enormemente el análisis y el mantenimiento de los
proyectos más complejos. Todo esto hace que sea necesario
ocuparse de este lenguaje web una vez ya familiarizados con HTML.
Aún no hemos mencionado otro componente básico del diseño web

moderno como JavaScript, con cuya ayuda se incluyen elementos
dinámicos en las páginas en HTML que permiten a los usuarios
interactuar con la página. Estos pueden ser galerías de imágenes,
menús de navegación dinámicos o la descarga de datos externos.
En cualquiera de los casos, los desarrolladores web cuentan con un

repertorio de fragmentos de código o code snippets que se pueden
integrar fácilmente en las hojas HTML. Aun así, es recomendable
desarrollar un cierto grado de comprensión básica de ambos
lenguajes de programación para implementarlos correctamente o
saber encontrar el error en caso de problemas.
 15.11.19 | Desarrollo web
   
Tutoriales JavaScript CSS HTML
Artículos similares
Cómo Nociones ¿Cuáles son las

comprimir CSS básicas sobre novedades que
y mejorar el HTML5 ofrece HTML
rendimiento de  07.02.2020 5.1?
una web | Desarrollo web
 02.03.2020
| Desarrollo web
 18.07.2019 | Diseño web HTML5 es el nuevo
Encontrar elementos lenguaje de Internet, Ha pasado mucho
estructurales sin embargo hay tiempo hasta que el
directamente en el desarrolladores web anhelado HTML5 viera
código HTML no es muy que siguen usando la luz en otoño de 2014
común. Colores, lenguajes de hipertexto y ahora, con HTML 5.1,
fuentes y tamaños de anticuados, como HTML se ha puesto a
otros elementos HTML 4.01 o XHTML, que disposición la primera
son definidos precisan de numerosos actualización del
normalmente en las plugins externos que estándar web. A este
llamadas hojas de ponen en peligro tanto respecto se han dado
estilo, como por la compatibilidad como numerosos cambios,
ejemplo CSS. Si se trata la seguridad de las entre los que destaca
de una web compleja, páginas web. Al la adaptación sencilla
el número de archivos contrario, HTML5 hace al diseño web
CSS necesarios para su posible la directa responsivo. Sin
correcto integración de embargo, a estos se
funcionamiento será elementos multimedia suman diversas
mayor, lo que puede e interfaces de novedades en HTML,
tener un impacto programación basadas como el hecho de que
significativo en el en... algunos elementos y
tiempo de carga. Así,... atributos...
           
Tutorial básico Compilador e

de HTML: crea intérprete:
tu propio definición y
proyecto web diferencias
 15.11.2019  24.03.2020
| Desarrollo web | Desarrollo web
En la época de los Con el paso de los

sistemas de gestión de años, los lenguajes de
contenidos y plantillas programación se han
para el diseño web, ido simplificando cada
aprender HTML parece vez más con el fin de
hoy una tarea facilitar su escritura y
superflua e utilización lo máximo
innecesaria, y en posible. En este
realidad es todo lo sentido, uno de los
contrario. En cuanto se aspectos más
presentan problemas importantes de
de funcionamiento en cualquier lenguaje es
una página o esta optimizar la legibilidad
requiere la inclusión del código escrito. Para
de elementos que los procesadores
dinámicos, se revelará informáticos puedan
la necesidad de contar interpretarlo, se
con conocimientos en requiere un
HTML. En este compilador o
completo tutorial de intérprete que lo...
HTML para...
       
  
Empresa Uso de Cookies Privacidad Centro de Ayuda

© 2021 1&1 IONOS España S.L.U.

Aprende HTML - Tutorial para Principiantes - IONOS

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Aprende HTML - Tutorial para Principiantes - IONOS

Cargado por

Copyright:

Formatos disponibles

Digital Guide

 15.11.19 | Desarrollo web

Tutorial básico de HTML: crea tu propio

Berners-Lee expresamente para el proyecto.

El lenguaje de marcado de hipertexto hace parte de aquellos

HTML se desarrolló a partir del hoy ya casi desaparecido

Declaración del tipo de documento: aquí se proporciona

Empleo de entidades HTML: los signos de puntuación, los

Comentarios: los comentarios ocultos para el navegador pero

Atributos: los atributos amplían la deﬁnición de los elementos

Qué software necesitas para escribir código

En los inicios de nuestro breve curso de HTML es menester aclarar

No es necesario disponer de ningún software especial para escribir

Un paso intermedio entre los editores de texto y los programas más

Para los usuarios de Windows, un editor de texto muy recomendable

Editores con visualización en tiempo real

Una alternativa muy atractiva, hoy incluida en casi la mayor parte de

Introducción a HTML: crear la primera página

En el primer paso de nuestro tutorial de HTML mostraremos cómo

Abre el editor y guarda un documento nuevo con el nombre de test.

Este documento debería poder mostrarse en tu navegador haciendo

Vista preliminar de una primera página web con contenido

HTML básico: cómo estructurar un texto con

Deﬁnir párrafos con la etiqueta <p>

Este elemento, cuya nomenclatura proviene del inglés "paragraph"

En todas las versiones de HTML, excepto en XHTML, el tag de cierre

Puedes probar a marcar párrafos con la etiqueta <p> en tu página

1 <p>This is my first webpage!</p>

Nota: en realidad no sería necesario separar las frases como hemos

Este sería el resultado en la ventana del explorador:

Vista de la página de prueba en el navegador con un nuevo párrafo

Añadir títulos y subtítulos con la etiqueta <h>

Los títulos también se cuentan entre los elementos básicos de un

Aquí, es importante mantener la jerarquía correcta y no utilizar los

Para añadirle a esta primera página de prueba un título principal y

1 <h1>Main heading: my first webpage</h1>

Nota: al tratarse de un documento HTML muy sencillo sin metadatos,

En el explorador se verá de la siguiente manera:

Vista de la página de prueba en el explorador con título principal y secundario

Destacar palabras o fragmentos de texto: <i>,

Entre los elementos básicos de formato de HTML se encuentran

Lo veremos ampliando nuestra página de prueba con algunas

1 <h1>Main heading: <i>my first webpage</i></h1>

Nota: para que el ejemplo de código HTML del pasaje añadido no se

Vista en el navegador de la página de prueba con formato

Crear listas con las etiquetas <ul>, <ol> y <li>

No solo a la hora de hacer la compra recurrimos a las listas. También

Ahora podrás probarlo en tu página de prueba:

Nota: recuerda que puedes escribir el texto que preﬁeras. En este

El resultado debería parecerse a esto:

Página de prueba con lista con viñetas

Como consecuencia, en lugar de las viñetas aparece una lista

Página de prueba con una lista numerada de tres elementos <li>

Presentar información en tablas: <table>, <tr> y

<table>: esta etiqueta marca el inicio y el cierre de una tabla

<tr>: con el elemento "table row" (ﬁla de la tabla) se añaden

<td>: las columnas completan la estructura básica de una

Creamos a continuación una tabla sencilla para entender la

Al mostrar la vista preliminar en el explorador, pronto se detecta que

Abre ahora tu documento HTML en tu navegador y observa la tabla

Nota: HTML5 ya no soporta el atributo border, una función que ha

Vista en el navegador de una tabla sencilla de dos celdas con borde

A pesar de su sencillo formato, HTML también permite destacar los