Scribd
Cargar
201 vistas27 páginas

Aprendo HTML

Este documento proporciona una introducción básica a HTML, incluyendo una definición de HTML, los elementos básicos como encabezados, párrafos y enlaces, y cómo crear un documento HTML simple. También explica cómo ver el código fuente HTML de una página web existente.

Cargado por

Angel Rafael Sarmiento Marte
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
201 vistas27 páginas

Aprendo HTML

Este documento proporciona una introducción básica a HTML, incluyendo una definición de HTML, los elementos básicos como encabezados, párrafos y enlaces, y cómo crear un documento HTML simple. También explica cómo ver el código fuente HTML de una página web existente.

Cargado por

Angel Rafael Sarmiento Marte
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 27

Introducción 

HTML
HTML es el lenguaje de marcado estándar para crear páginas web.

¿Qué es el HTML?
 HTML significa lenguaje de marcado de hipertexto
 HTML es el lenguaje de marcado estándar para crear páginas web
 HTML describe la estructura de una página web
 HTML consiste en una serie de elementos
 Los elementos HTML le dicen al navegador cómo mostrar el
contenido
 Los elementos HTML etiquetan piezas de contenido como "este es
un encabezado", "este es un párrafo", "este es un enlace", etc.

Un documento HTML simple


Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>

Ejemplo explicado
 La <!DOCTYPE html>declaración define que este documento es un
documento HTML5
 El <html>elemento es el elemento raíz de una página HTML.
 El <head>elemento contiene metainformación sobre la página HTML.
 El <title>elemento especifica un título para la página HTML (que se
muestra en la barra de título del navegador o en la pestaña de la
página)
 El <body>elemento define el cuerpo del documento y es un
contenedor para todos los contenidos visibles, como encabezados,
párrafos, imágenes, hipervínculos, tablas, listas, etc.
 El <h1>elemento define un encabezado grande
 El <p>elemento define un párrafo.

¿Qué es un elemento HTML?


Un elemento HTML se define mediante una etiqueta de inicio, algo de
contenido y una etiqueta de finalización:

< tagname > El contenido va aquí ... < / tagname >


El elemento HTML es todo, desde la etiqueta de inicio hasta la etiqueta
de finalización:

< h1 > Mi primer encabezado < / h1 >


< p > Mi primer párrafo. < / p >

Start tag Element content End tag

<h1> My First Heading </h1>

<p> My first paragraph. </p>

<br> None none

Nota: Algunos elementos HTML no tienen contenido (como el elemento


<br>). Estos elementos se llaman elementos vacíos. ¡Los elementos
vacíos no tienen una etiqueta final!
Navegadores web
El propósito de un navegador web (Chrome, Edge, Firefox, Safari) es
leer documentos HTML y mostrarlos correctamente.

Un navegador no muestra las etiquetas HTML, pero las usa para


determinar cómo mostrar el documento:
Estructura de página HTML
A continuación se muestra una visualización de la estructura de una
página HTML:

<html>

<head>

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

</head>

<cuerpo>

<h1> Este es un encabezado </h1>

<p> Este es un párrafo. </p>

<p> Este es otro párrafo. </p>

</body>

</html>

Nota: Solo el contenido dentro de la sección <body> (el área blanca


arriba) se mostrará en un navegador.
Editores HTML
Un simple editor de texto es todo lo que necesitas para aprender
HTML.

Aprenda HTML usando el Bloc de notas


o TextEdit
Las páginas web se pueden crear y modificar utilizando editores HTML
profesionales.

Sin embargo, para aprender HTML, recomendamos un editor de texto


simple como Notepad (PC) o TextEdit (Mac).

Creemos que usar un editor de texto simple es una buena manera de


aprender HTML.

Siga los pasos a continuación para crear su primera página web con el
Bloc de notas o TextEdit.

Paso 1: Abra el Bloc de notas (PC)


Windows 8 o posterior:

Abra la pantalla de inicio (el símbolo de la ventana en la parte inferior


izquierda de su pantalla). Escriba Bloc de notas .

Windows 7 o anterior:

Abra Inicio > Programas> Accesorios> Bloc de notas
Paso 1: abre TextEdit (Mac)
Abrir Finder> Aplicaciones> TextEdit

También cambie algunas preferencias para que la aplicación guarde los


archivos correctamente. En Preferencias> Formato> elija "Texto
sin formato "

Luego, en "Abrir y guardar", marque la casilla que dice "Mostrar archivos


HTML como código HTML en lugar de texto formateado".

Luego abra un nuevo documento para colocar el código.

Paso 2: Escribe algo de HTML


Escriba o copie el siguiente código HTML en el Bloc de notas:

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>
Paso 3: guarda la página HTML
Guarde el archivo en su computadora. Seleccione Archivo> Guardar
como en el menú del Bloc de notas.

Denomine el archivo "index.htm" y configure la codificación en UTF-


8 (que es la codificación preferida para archivos HTML).

Sugerencia: Puede usar .htm o .html como extensión de archivo. No


hay diferencia, depende de usted.
Paso 4: ver la página HTML en su
navegador
Abra el archivo HTML guardado en su navegador favorito (haga doble
clic en el archivo o haga clic con el botón derecho y elija "Abrir con").

El resultado se parecerá mucho a esto:


Editor en línea de W3Schools -
"Pruébelo usted mismo"
Con nuestro editor en línea gratuito, puede editar el código HTML y ver
el resultado en su navegador.

Es la herramienta perfecta cuando quieres probar el código


rápidamente. También tiene codificación de colores y la capacidad de
guardar y compartir código con otros:

Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
Ejemplos básicos de HTML
❮ AnteriorPróximo ❯

En este capítulo mostraremos algunos ejemplos básicos de HTML.

No se preocupe si usamos etiquetas que aún no conoce.

Documentos HTML
Todos los documentos HTML deben comenzar con una declaración de
tipo de documento: <!DOCTYPE html>.

El documento HTML en sí comienza <html>y termina con </html>.

La parte visible del documento HTML está entre <body>y </body>.

Ejemplo
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

Inténtalo tú mismo "

La declaración <! DOCTYPE>


La <!DOCTYPE>declaración representa el tipo de documento y ayuda a los
navegadores a mostrar las páginas web correctamente.

Solo debe aparecer una vez, en la parte superior de la página (antes de


cualquier etiqueta HTML).

La <!DOCTYPE>declaración no distingue entre mayúsculas y minúsculas.

La <!DOCTYPE>declaración para HTML5 es:

<!DOCTYPE html>

Encabezados HTML
Los encabezados HTML se definen con las etiquetas <h1>to <h6>.

<h1>define el encabezado más importante. <h6>define el encabezado


menos importante: 

Ejemplo
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

Inténtalo tú mismo "


Párrafos HTML
Los párrafos HTML se definen con la <p>etiqueta:

Ejemplo
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

Inténtalo tú mismo "

Enlaces HTML
Los enlaces HTML se definen con la <a>etiqueta:

Ejemplo
<a href="https://www.w3schools.com">This is a link</a>

Inténtalo tú mismo "

El destino del enlace se especifica en el hrefatributo. 

Los atributos se utilizan para proporcionar información adicional sobre


elementos HTML.

Aprenderá más sobre los atributos en un capítulo posterior.

Imágenes HTML
Las imágenes HTML se definen con la <img>etiqueta.

El archivo fuente ( src), el texto alternativo ( alt) width, y heightse


proporcionan como atributos:

Ejemplo
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="14
2">

Inténtalo tú mismo "


¿Cómo ver la fuente HTML?
¿Alguna vez has visto una página web y te has preguntado "¡Hola!
¿Cómo hicieron eso?"

Ver código fuente HTML:


Haga clic derecho en una página HTML y seleccione "Ver código fuente
de la página" (en Chrome) o "Ver código fuente" (en Edge), o similar en
otros navegadores. Esto abrirá una ventana que contiene el código
fuente HTML de la página.

Inspeccionar un elemento HTML:


Haga clic derecho en un elemento (o un área en blanco) y elija
"Inspeccionar" o "Inspeccionar elemento" para ver de qué elementos
están compuestos (verá tanto el HTML como el CSS). También puede
editar el HTML o CSS sobre la marcha en el panel Elementos o Estilos
que se abre.
Ejemplos básicos de HTML
❮ AnteriorPróximo ❯

En este capítulo mostraremos algunos ejemplos básicos de HTML.

No se preocupe si usamos etiquetas que aún no conoce.

Documentos HTML
Todos los documentos HTML deben comenzar con una declaración de
tipo de documento: <!DOCTYPE html>.

El documento HTML en sí comienza <html>y termina con </html>.

La parte visible del documento HTML está entre <body>y </body>.

Ejemplo
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

Inténtalo tú mismo "

La declaración <! DOCTYPE>


La <!DOCTYPE>declaración representa el tipo de documento y ayuda a los
navegadores a mostrar las páginas web correctamente.

Solo debe aparecer una vez, en la parte superior de la página (antes de


cualquier etiqueta HTML).

La <!DOCTYPE>declaración no distingue entre mayúsculas y minúsculas.

La <!DOCTYPE>declaración para HTML5 es:

<!DOCTYPE html>

Encabezados HTML
Los encabezados HTML se definen con las etiquetas <h1>to <h6>.

<h1>define el encabezado más importante. <h6>define el encabezado


menos importante: 

Ejemplo
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

Inténtalo tú mismo "


Párrafos HTML
Los párrafos HTML se definen con la <p>etiqueta:

Ejemplo
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

Inténtalo tú mismo "

Enlaces HTML
Los enlaces HTML se definen con la <a>etiqueta:

Ejemplo
<a href="https://www.w3schools.com">This is a link</a>

Inténtalo tú mismo "

El destino del enlace se especifica en el hrefatributo. 

Los atributos se utilizan para proporcionar información adicional sobre


elementos HTML.

Aprenderá más sobre los atributos en un capítulo posterior.

Imágenes HTML
Las imágenes HTML se definen con la <img>etiqueta.

El archivo fuente ( src), el texto alternativo ( alt) width, y heightse


proporcionan como atributos:

Ejemplo
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="14
2">

Inténtalo tú mismo "


¿Cómo ver la fuente HTML?
¿Alguna vez has visto una página web y te has preguntado "¡Hola!
¿Cómo hicieron eso?"

Ver código fuente HTML:


Haga clic derecho en una página HTML y seleccione "Ver código fuente
de la página" (en Chrome) o "Ver código fuente" (en Edge), o similar en
otros navegadores. Esto abrirá una ventana que contiene el código
fuente HTML de la página.

Inspeccionar un elemento HTML:


Haga clic derecho en un elemento (o un área en blanco) y elija
"Inspeccionar" o "Inspeccionar elemento" para ver de qué elementos
están compuestos (verá tanto el HTML como el CSS). También puede
editar el HTML o CSS sobre la marcha en el panel Elementos o Estilos
que se abre.
Atributos HTML
❮ AnteriorPróximo ❯

Los atributos HTML proporcionan información adicional sobre


elementos HTML.

Atributos HTML
 Todos los elementos HTML pueden tener atributos
 Los atributos proporcionan información adicional sobre
elementos
 Los atributos siempre se especifican en la etiqueta de inicio
 Los atributos generalmente vienen en pares nombre / valor
como: nombre = "valor"

El atributo href
La <a>etiqueta define un hipervínculo. El hrefatributo especifica la URL de
la página a la que va el enlace:

Ejemplo
<a href="https://www.w3schools.com">Visit W3Schools</a>
Inténtalo tú mismo "

Aprenderá más sobre enlaces en nuestro capítulo Enlaces HTML .

El atributo src
La <img>etiqueta se usa para incrustar una imagen en una página
HTML. El srcatributo especifica la ruta a la imagen que se mostrará:

Ejemplo
<img src="img_girl.jpg">
Inténtalo tú mismo "

Los atributos de ancho y alto


La <img>etiqueta también debe contener los atributos widthy height, que
especifican el ancho y el alto de la imagen (en píxeles):

Ejemplo
<img src="img_girl.jpg" width="500" height="600">
Inténtalo tú mismo "

El atributo alt
El altatributo requerido para la <img> etiqueta especifica un texto
alternativo para una imagen, si la imagen por alguna razón no se puede
mostrar. Esto puede deberse a una conexión lenta, a un error en
el srcatributo, o si el usuario usa un lector de pantalla.
Ejemplo
<img src="img_girl.jpg" alt="Girl with a jacket">
Inténtalo tú mismo "

Ejemplo
Vea lo que sucede si intentamos mostrar una imagen que no existe:

<img src="img_typo.jpg" alt="Girl with a jacket">


Inténtalo tú mismo "

Aprenderá más sobre las imágenes en nuestro capítulo Imágenes HTML .

El atributo de estilo
El styleatributo se usa para agregar estilos a un elemento, como color,
fuente, tamaño y más.

Ejemplo
<p style="color:red;">This is a red paragraph.</p>
Inténtalo tú mismo "

Aprenderá más sobre estilos en nuestro capítulo Estilos HTML .

El atributo lang
Siempre debe incluir el langatributo dentro de la <html>etiqueta para
declarar el idioma de la página web. Esto está destinado a ayudar a los
motores de búsqueda y navegadores.

El siguiente ejemplo especifica el inglés como idioma:

<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
Los códigos de país también se pueden agregar al código de idioma en
el lang atributo. Entonces, los dos primeros caracteres definen el idioma
de la página HTML, y los dos últimos caracteres definen el país.

El siguiente ejemplo especifica inglés como idioma y Estados Unidos


como país:

<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>

Puede ver todos los códigos de idioma en nuestra Referencia de códigos


de idioma HTML .

El título de atributo
El titleatributo define información adicional sobre un elemento.

El valor del atributo de título se mostrará como información sobre


herramientas cuando pase el mouse sobre el elemento:

Ejemplo
<p title="I'm a tooltip">This is a paragraph.</p>
Inténtalo tú mismo "

Sugerimos: usar siempre atributos en


minúsculas
El estándar HTML no requiere nombres de atributo en minúsculas.

El atributo de título (y todos los demás atributos) se pueden escribir con


mayúsculas o minúsculas, como título o TÍTULO .

Sin embargo, W3C recomienda atributos en minúsculas en HTML


y exige atributos en minúsculas para tipos de documentos más estrictos
como XHTML.
En W3Schools siempre usamos nombres de atributo en minúsculas.

Sugerimos: Citar siempre los valores de


los atributos
El estándar HTML no requiere comillas alrededor de los valores de los
atributos.

Sin embargo, W3C recomienda cotizaciones en HTML


y exige cotizaciones para tipos de documentos más estrictos como
XHTML.

Bueno:
<a href="https://www.w3schools.com/html/">Visit our HTML
tutorial</a>

Malo:
<a href=https://www.w3schools.com/html/>Visit our HTML tutorial</a>

A veces tienes que usar comillas. Este ejemplo no mostrará el atributo


de título correctamente, ya que contiene un espacio:

Ejemplo
<p title=About W3Schools>
Inténtalo tú mismo "
 En W3Schools siempre usamos comillas alrededor de los valores de los
atributos.

Cotizaciones simples o dobles?


Las comillas dobles alrededor de los valores de los atributos son las más
comunes en HTML, pero también se pueden usar comillas simples.

En algunas situaciones, cuando el valor del atributo contiene comillas


dobles, es necesario utilizar comillas simples:

<p title='John "ShotGun" Nelson'>


O viceversa:

<p title="John 'ShotGun' Nelson">


Inténtalo tú mismo "

Resumen del capítulo


 Todos los elementos HTML pueden tener atributos
 El hrefatributo de <a>especifica la URL de la página a la que va el
enlace
 El srcatributo de <img>especifica la ruta a la imagen que se
mostrará
 Los atributos widthy heightde <img>proporcionan información sobre
el tamaño de las imágenes.
 El altatributo de <img>proporciona un texto alternativo para una
imagen.
 El styleatributo se usa para agregar estilos a un elemento, como
color, fuente, tamaño y más
 El langatributo de la <html>etiqueta declara el idioma de la página
web.
 El titleatributo define información adicional sobre un elemento.

Ejercicios HTML
Ponte a prueba con ejercicios
Ejercicio:
Agregue una "información sobre herramientas" al siguiente párrafo con el
texto "Acerca de W3Schools".

<p  = "Acerca de W3Schools"> W3Schools es un sitio de


desarrollador web. </p>

Enviar respuesta "

Comience el ejercicio
Referencia de atributo HTML
Una lista completa de todos los atributos para cada elemento HTML se
encuentra en nuestra: Referencia de atributos HTML .

Encabezados HTML
❮ AnteriorPróximo ❯

Los encabezados HTML son títulos o subtítulos que desea mostrar en


una página web.

Ejemplo

Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Inténtalo tú mismo "

Encabezados HTML
Los encabezados HTML se definen con las etiquetas <h1>to <h6>.

<h1>define el encabezado más importante. <h6>define el encabezado


menos importante.

Ejemplo
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Inténtalo tú mismo "

Nota: Los navegadores agregan automáticamente algunos espacios en


blanco (un margen) antes y después de un encabezado.

Los encabezados son importantes


Los motores de búsqueda utilizan los encabezados para indexar la
estructura y el contenido de sus páginas web.

Los usuarios a menudo hojean una página por sus encabezados. Es


importante utilizar encabezados para mostrar la estructura del
documento.

<h1>los encabezados deben usarse para los encabezados principales,


seguidos de los <h2>encabezados, luego los menos importantes <h3>, y
así sucesivamente.
Nota: Use encabezados HTML solo para encabezados. No use
encabezados para hacer que el texto sea GRANDE o en negrita .

Encabezados más grandes


Cada encabezado HTML tiene un tamaño predeterminado. Sin embargo,
puede especificar el tamaño de cualquier encabezado con
el styleatributo, utilizando la font-sizepropiedad CSS :

Ejemplo
<h1 style="font-size:60px;">Heading 1</h1>

Inténtalo tú mismo "

Ejercicios HTML
Ponte a prueba con ejercicios
Ejercicio:
Use la etiqueta HTML correcta para agregar un encabezado con el texto
"Londres".

<p> Londres es la capital de Inglaterra. Es la ciudad más


poblada del Reino Unido, con un área metropolitana de más de
13 millones de habitantes. </p>

Enviar respuesta "

Comience el ejercicio
Referencia de etiqueta HTML
La referencia de etiqueta de W3Schools contiene información adicional
sobre estas etiquetas y sus atributos.

Tag Description

<html> Defines the root of an HTML document

<body> Defines the document's body

<h1> to <h6> Defines HTML headings

Para obtener una lista completa de todas las etiquetas HTML disponibles,
visite nuestra Referencia de etiquetas HTML .

También podría gustarte