01 ¿Qué Es HTML

Introducción.HTML.
2ºBachillerato TIC II
1) ¿Qué es HTML?
HTML, siglas de HyperText Markup Language (Lenguaje de Marcado
de Hipertexto), es el lenguaje de marcas predominante para la
elaboración de páginas web. Es usado para describir la estructura y el
contenido en forma de texto, así como para complementar el texto con
objetos tales como imágenes.
● Para comenzar sólo son necesarios:

o Un procesador de texto como Notepad o Bloc de Notas para escribir
el documento HTML. Si se usa Word, se debe guardar como 'Sólo
Texto'. El fichero debe tener la extensión .html o .htm
o También podemos usar la pág de edición Codepen.io.
o Podemos usar Visual Estudio Code
o . Lo primero que debemos hacer es descargar el editor de texto
Notepad++ e instalarlo. Para ello nos vamos a ir a la dirección
siguiente: http://notepad-plus-plus.org. Es necesario que hagamos
saber al editor de texto que lo que estamos haciendo es un documento
HTML, para ello iremos en el menú a Lenguaje->H->HTML
o Un navegador del Web.
o Visual Estudio Code (Vecode).
1. En extensiones instala el Spanish Language Pack; Code

Runner y Bracket Pair Colorizer.
2. Crea una carpeta en tu unidad personal dentro de TIC II -

>HTML que se llame Ejercicios.
3. En Archivos de Visual Code agrega esta carpeta allí empezaremos a

crear nuestros archivos en HTML.
● El lenguaje HTML (HyperText Markup Language) usa etiquetas así:

<XXX>inicio
</XXX> cierre
El principio esencial del lenguaje HTML (HyperText Markup

Language) es el uso de las etiquetas (tags). Funcionan de la siguiente
manera:
<XXX> Este es el inicio de una etiqueta.
</XXX> Este es el cierre de una etiqueta.
0
Introducción.HTML. 2ºBachillerato TIC II
Las letras de la etiqueta pueden estar en mayúsculas o

minúsculas, indiferentemente. Lo que haya entre ambas etiquetas
estará influenciada por ellas. Por ejemplo, todo el documento HTML
debe estar entre las etiquetas
<HTML> y </HTML>:
<HTML> [Todo el documento] </HTML>
Para indicar que nuestro documento es HTML en HTML5 es

extremadamente sencillo:
<!DOCTYPE html>
IMPORTANTE: Esta línea debe ser la primera línea del archivo, sin
espacios o líneas que la precedan. De esta forma, el modo estándar
del navegador es activado y las incorporaciones de HTML5 son
interpretadas siempre que sea posible, o ignoradas en caso contrario.
Paréntesis.
¿Que es HTML5?
Es el último estándar de referencia de elaboración de páginas web. El
código HTML5 define la estructura de la página y se complementa con
el CSS para el estilo y con Java Script para la funcionalidad.
Luego de declarar el tipo de documento, debemos comenzar a

construir la estructura HTML. Como siempre, la estructura tipo árbol
de este lenguaje tiene su raíz en elelemento <html>. Este elemento
envolverá al resto del código:
<!DOCTYPE html>
<html lang=”es”>
</html>
El atributo lang en la etiqueta de apertura <html> es el único atributo
que necesitamos especificar en HTML5. Este atributo define el idioma
humano del contenido del documento que estamos creando, en este
caso “es” por español.
El documento en sí está dividido en dos zonas principales:
● El encabezamiento, comprendido entre las etiquetas <HEAD>

y </HEAD>
● El cuerpo, comprendido entre las etiquetas <BODY> y
</BODY>
Dentro del encabezamiento hay información del documento, que no se

ve en la pantalla principal, principalmente el título del documento,
1
comprendido entre las etiquetas <TITLE> y </TITLE>. El título

debe ser breve y descriptivo de su contenido, pues será lo que vean
los demás cuando añadan nuestra página a su bookmark (o agenda
de direcciones).
Etiqueta <META>
Si estás utilizando Notepad++ y obtienes una visualización extraña de las
tildes, por ejemplo “Ejemplo bÃ¡sico” en lugar de “Ejemplo básico” recuerda
elegir como codificación UTF-8 sin BOM. También añade la etiqueta <meta
charset="utf-8"> dentro de la cabecera del código para indicar el juego de
caracteres que se debe emplear.
Hay varios tipos de etiqueta <meta> que pueden ser incluidas para declarar
información general sobre el documento, pero esta información no es
mostrada en la ventana del navegador, es solo importante para motores de
búsqueda y dispositivos que necesitan hacer una vista previa del documento
u obtener un sumario de la información que contiene.
<meta charset="iso-8859-1">
<meta name=”description” content=”Ejemplo de HTML5”>
<meta name=”keywords” content=”HTML5, CSS3,
Javascript”>
Dentro del cuerpo está todo lo que queremos que aparezca en la

pantalla principal (texto, imágenes, etc.)
Por tanto, la estructura queda de esta manera:
(Podemos ir probando todo esto en una página web que se llama
jsbin.
También podemos usar el anteriormente nombrado Notepad++.
<!DOCTYPE html>
<HTML lang=”es”>
<HEAD>
<meta charset="iso-8859-1">
<meta name=”description” content=”Ejemplo de
HTML5”>
<meta name=”keywords” content=”HTML5, CSS3,
Javascript”>
<TITLE> Título de la página </TITLE>
</HEAD>
<BODY>
[Aquí van las etiquetas que se visualizan en

la página]
2
</BODY>
</HTML>
● Para separar el texto en párrafos usar la etiqueta <P> (sin cierre).
● El texto puede tener unas cabeceras, comprendidas entre las etiquetas

<H1> y </H1>, <H2> y </H2>, etc. (hasta el número 6).
● <CENTER> y </CENTER> centra todo lo que esté dentro de ella.
● Separadores (horizontal rules) se consiguen con la etiqueta <HR> (sin cierre).

Realiza el siguiente documento html de tal forma que te quede como se indica.
Ejercicio 1.
******
Primera página.
Procuraré que en título de la página aparezca “Ejercicio 1”.
Esta es mi primera página, aunque todavía es muy sencilla.
Aquí va un párrafo en otro tamaño.
Mi nombre y apellidos.
******
● Las líneas en blanco no son necesarias. De hecho, podría estar todo en

una sola línea.
● Una etiqueta puede estar anidada dentro de otra.
● Obsérvese además la falta de las tildes.
● Guardamos el fichero con el nombre de

ejercicio01_01_apellido_nombre.html.
El lenguaje HTML está evolucionando constantemente, la última versión de

HTML que se está desarrollando se llama HTML5 y permite varias cosas que
las anteriores versiones no permitían como por ejemplo la inserción de
3
multimedia, y la separación más evidente de los diferentes bloques de una

pág web, es decir la estructura.

01 ¿Qué Es HTML

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

01 ¿Qué Es HTML

Cargado por

Copyright:

Formatos disponibles

Introducción.HTML.

● Para comenzar sólo son necesarios:

o Visual Estudio Code (Vecode).

1. En extensiones instala el Spanish Language Pack; Code

2. Crea una carpeta en tu unidad personal dentro de TIC II -

3. En Archivos de Visual Code agrega esta carpeta allí empezaremos a

● El lenguaje HTML (HyperText Markup Language) usa etiquetas así:

El principio esencial del lenguaje HTML (HyperText Markup

</XXX> Este es el cierre de una etiqueta.

Las letras de la etiqueta pueden estar en mayúsculas o

Para indicar que nuestro documento es HTML en HTML5 es

Luego de declarar el tipo de documento, debemos comenzar a

El documento en sí está dividido en dos zonas principales:

● El encabezamiento, comprendido entre las etiquetas <HEAD>

Dentro del encabezamiento hay información del documento, que no se

comprendido entre las etiquetas <TITLE> y </TITLE>. El título

Dentro del cuerpo está todo lo que queremos que aparezca en la

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

[Aquí van las etiquetas que se visualizan en

● Para separar el texto en párrafos usar la etiqueta <P> (sin cierre).

● El texto puede tener unas cabeceras, comprendidas entre las etiquetas

● <CENTER> y </CENTER> centra todo lo que esté dentro de ella.

● Separadores (horizontal rules) se consiguen con la etiqueta <HR> (sin cierre).

Procuraré que en título de la página aparezca “Ejercicio 1”.

Esta es mi primera página, aunque todavía es muy sencilla.

Aquí va un párrafo en otro tamaño.

● Las líneas en blanco no son necesarias. De hecho, podría estar todo en

● Una etiqueta puede estar anidada dentro de otra.

● Obsérvese además la falta de las tildes.

● Guardamos el fichero con el nombre de

El lenguaje HTML está evolucionando constantemente, la última versión de

multimedia, y la separación más evidente de los diferentes bloques de una

También podría gustarte