html 5 mÓdulo 1 · estructura bÁsica de una pÁgina toda página web que hagamos en html5 debe...

I.S.F.D. Y T. Nº48 – TECNICATURA SUPERIOR EN

COMUNICACIÓN MULTIMEDIAL – PROGRAMACIÓN WEB – PROF. GUSTAVO RAIMONDO

1

1

HTML 5 – MÓDULO 1

Para abordar HTML 5 vamos a necesitar el software VISUAL STUDIO CODE. Es un software gratuito que puede ser descargado

desde la siguiente página: https://code.visualstudio.com/

Igualmente pueden utilizar cualquier editor de código, inclusive el mismo CHROME.

INTRODUCCIÓN A HTML5

HTML (Hypertext Markup Language) es un lenguaje de marcado (que no es lo mismo que un lenguaje de programación) que

sirve para definir la estructura y la semántica de nuestra página web. HTML fue creado y es mantenido por una organización sin

ánimo de lucro llamada W3C. El W3C es un consorcio formado por más de 400 empresas (entre ellas las que desarrollan los

principales navegadores como Google, Microsoft, Mozilla, Apple...), etc. Desde el consorcio trabajan continuamente en definir

cómo debe evolucionar este lenguaje y otros estándares que conforman la web. Posteriormente los fabricantes de navegadores

preparan los mismos intentando conseguir que un código funcione igual en todos los navegadores. Aunque

desafortunadamente no siempre es así, cada vez es una realidad más cercana. Por tanto, a lo largo de los años las versiones de

HTML han evolucionado: HTML 2.0 (1995), HTML 4.0 (1997), XHTML (2000), HTML5 (2014), etc. con el objetivo de adaptarse a

los nuevos tiempos y así dar soporte a nuevas necesidades (estandarización de los sistemas de audio, vídeo, etc).

ETIQUETAS

En el último estándar de HTML (HTML5) existen más de 100 elementos que nos permitirán crear etiquetas.

Lo primero que debemos saber es que las etiquetas sólo pueden ser de dos tipos:

Las que tienen una apertura y un cierre como en el siguiente caso:

Por ejemplo:

Si nos fijamos las etiquetas siempre están contenidas entre los símbolos < >, y el cierre sólo incluye el nombre del

elemento precedido de una barra lateral "/".

Por otro lado, están los elementos auto-contenidos (los que no se cierran explícitamente)

Por ejemplo:

https://code.visualstudio.com/



2

2

ANIDACIÓN DE ETIQUETAS

También es importante saber que unas etiquetas pueden contener a otras (una o varias), o como se suele decir "que se pueden

anidar".

Por ejemplo:

En este caso vemos que la etiqueta head tiene como contenido a otra etiqueta title. En este caso se dice que: La etiqueta head es

el padre de la etiqueta title y meta. Y que la etiqueta title y meta son hijas de la etiqueta head. La etiqueta title y meta son

hermanas. Si nos fijamos, además, la etiqueta anidada (title) está en una nueva línea y con un nivel de sangrado mayor. Esto es

así por una convención mundial a la que se ha llegado para que los programadores escribamos código de una manera similar,

tanto para hacernos más fácil y comprensible el código cuando este crezca, como para cuando tengamos que compartirlo con

otros programadores.

ORDEN DE APERTURA Y CIERRE

Cuando anidamos etiquetas unas dentro de otras es muy importante cerrarlas en orden. Esto quiere decir que la primera

etiqueta en cerrarse tiene que ser la última que se abrió, este ejemplo sería el incorrecto:

La forma correcta de hacerlo sería:

Recordemos que hay etiquetas que no es necesario cerrarlas por lo que esto sería correcto:

La etiqueta <br> es para realizar un salto de línea



3

3

Antes de continuar con el lenguaje HTML, haremos una pequeña introducción a Visual Studio Code. Si bien utilizaremos ese

programa para poder ejecutar el código, ustedes podrán utilizar cualquier otros como Dreamweaver o hasta inclusive el Chrome.

Visual Studio Code es un editor de código. Lo pueden descargar desde el siguiente link: https://code.visualstudio.com/download

En caso de que lo instalen y aparezca en inglés lo pueden traducir de la siguiente manera.

Estando dentro de Visual Studio Code, pulsa la combinación de teclas (en Windows): Ctrl+Shift+P

Aparecerá una barra superior en Visual Studio Code, donde deberás escribir: config

Dentro de las opciones que aparecerán, eligen: Configure Display Language.

Luego eligen ES

Reinician el programa y ya lo tienen en español.

Para que podamos luego ver los archivos en el navegador, instalaremos una extensión. Para ello vamos al ícono de extensión que se encuentra a la izquierda de la pantalla.

Luego colocamos en el buscador OPEN IN BROWSER

https://code.visualstudio.com/download



4

4

Elegimos la primera extensión que aparece y la instalamos. A continuación, crearemos una carpeta en algún sitio de nuestra computadora. Una vez creada la carpeta, voy al menú ARCHIVO – ABRIR CARPETA. Busco y selecciono la carpeta creada.

Como pueden observar mi carpeta PRACTICA1 ya se encuentra abierta en el programa.

A continuación, voy a crear un archivo HTML. Para ello presiono en el ícono de nuevo documento.

Le coloco como nombre index.html



5

5

A la derecha se abre una nueva pantalla para colocar el código.

Escribo html y me aparecen las siguientes opciones.

Elijo html:5 puesto que voy a trabajar con la última versión de html. Van a ver que inmediatamente me aparece la estructura básica de un html.

ESTRUCTURA BÁSICA DE UNA PÁGINA

Toda página web que hagamos en HTML5 debe tener una estructura inicial similar a la siguiente:



6

6

<!DOCTYPE html>: indicar al navegador que el código HTML en el que está escrita la página es en la versión 5, o sea que es

HTML5.

<html lang="es"></html>: indica la raíz del documento y todas las etiquetas deben estar incluidas dentro. Además se especifica

el idioma en el que está escrita, es = Español (+idiomas).

<head>…</head>: se usa para envolver otras etiquetas que ofrecen información principalmente a: el navegador, a los

buscadores y a otras páginas (como pueden ser redes sociales, etc). La información especificada dentro del head no se muestra

dentro de la página web que ve el usuario.

<meta charset="UTF-8">: indica al navegador qué tipo de caracteres contiene la página. Con el atributo charset indicamos cuál

de todos los juegos de caracteres disponibles usamos. Con el valor UTF-8 podremos crear contenido en la mayoría de los

sistemas de escritura: español, inglés, francés, etc.

<title>…</Title>: indica el título de nuestra página. Este se muestra en: la pestaña del navegador, el enlace que indexan los

buscadores, etc.

<body>…</body>: contiene todo el contenido visible por el usuario dentro de nuestra página.

A continuación, realizaremos el siguiente ejercicio.

1. En el html creado insertamos un párrafo que diga “Mi primera página Html”

Observen que lo escribí entre las etiquetas BODY. Centro el párrafo.

DEFINICIÓN DE PÁRRAFOS: P

La marca <P> sirve para separar párrafos en HTML. De esta manera los párrafos quedan más espaciados y el texto se vuelve más legible. Por defecto, el párrafo de un documento HTML está justificado a la izquierda. Pero podemos modificar la alineación horizontal de un párrafo mediante el atributo ALIGN de la marca <P>, que puede tomar los valores siguientes.

LEFT: el párrafo es justificado a la izquierda. Valor por defecto.

CENTER: el párrafo es centrado.

RIGHT: el párrafo es justificado a la derecha. Ejemplo: <p align="left">alineamos el texto a la izquierda</p>



7

7

Para visualizar lo que vamos haciendo, lo guardamos. Luego nos dirigimos sobre el nombre del archivo, hacemos un clic con el

botón izquierdo del mouse y presionamos sobre Open in Default Browser.

Ahora vamos a dar dos espacios luego del título con las etiquetas <br> y entre las etiquetas de párrafo colocamos el siguiente texto: “HTML es un lenguaje de marcado que se utiliza para el desarrollo de páginas de Internet”.

RUPTURA DE LÍNEAS: BR.

La marca <BR> introduce un retorno de carro (o salto de línea) en el punto del documento en el que es colocada. Es equivalente al punto y aparte de un texto normal. Esta marca es vacía de manera que no necesita de la etiqueta de fin de marca.

Para darle un formato al título, reemplazaremos las etiquetas de párrafo por las etiquetas <H1>

TÍTULOS DE ENCABEZAMIENTO

HTML dispone de seis cabeceras, o tipos de letra predefinidos de distinto tamaño, que se utilizan para marcar los títulos o resaltes en las páginas. Se activan con el comando <Hn> y se desactivan con </Hn>, donde n es un número de 1 a 6. siendo el número indicativo del tamaño.



8

8

Prueba con las etiquetas H2 o H5 y observa las diferencias. El tamaño mayor es el correspondiente al número 1. <H1>Nivel de encabezado 1</H1> <H2>Nivel de encabezado 2</H2> <H3>Nivel de encabezado 3</H3> <H4>Nivel de encabezado 4</H4> <H5>Nivel de encabezado 5</H5> <H6>Nivel de encabezado 6</H6> Pueden experimentar en el ejemplo anterior, cambiando el número para comprobar el efecto que se logra. Los títulos de encabezado requieren la marca de fin, y siempre provocan un salto de línea, aunque no se le indique.

Ahora colocaremos negrita a la palabra HTML. Lo hacemos con la etiqueta <b>

Prueba colocando las demás etiquetas que aparecen a la derecha Si bien ahora les estoy enseñando cómo darle formato a un texto, esto luego lo haremos con CSS.

DANDO ESTILO AL TEXTO

Las marcas de estilo de texto especifican el tipo de letra (negrita, cursiva, ...), tamaño, color que se desea que aparezca el texto. Algunas de las marcas que permiten especificar la tipografía de los caracteres son las siguientes:

<B>Negrita (Bold)</B>

<I>Cursiva (Italic)</I>

<BLINK>Parpadeante (Blink)</BLINK>

<TT>Tamano fijo (TypeWriter)</TT>

<EM>énfasis (Emphasis)</EM>

<STRONG>Gran énfasis (Strong)</STRONG>

<U>Subrayado (Underline)</U>

Todas estas marcas requieren etiquetas de comienzo y fin, y se pueden anidar.



9

9

TAMAÑO DEL TEXTO

Para modificar el tamaño se utiliza el atributo SIZE de la marca <FONT>, de la manera siguiente: <FONT SIZE="tamaño">Texto</FONT> El comando <FONT> requiere la etiqueta de cierre. HTML define siete tamaños de letra distintos, siendo el tamaño 3 el que se adopta por defecto. Sin embargo, la mayoría de los navegadores permiten establecer cuál es la correspondencia real del tamaño 3. Así, se puede hacer que el tamaño 3 corresponda a una fuente Arial de 16, o a una Times de 8. Existen dos formas de establecer el tamaño de un trozo de texto.

Tamaño de texto absoluto. <FONT SIZE=”argumento”>Texto</FONT> donde argumento es un número entre 1 y 7

Tamaño de letra relativos. <FONT SIZE=”argumento”>Texto</FONT> donde argumento es una cadena de caracteres que nos indica, con un signo + ó -, el número de veces que esa fuente va ser mayor o menor que el tamaño de la fuente por defecto.

El uso de tamaños relativos nos permite olvidarnos de cuál es el tamaño de letra que se está utilizando en el momento actual, por lo que, en general, será preferible a utilizar tamaños de letra absolutos. Si queremos modificar el tamaño de todo el texto del documento, una forma de hacerlo sería englobar todo el cuerpo del documento en una etiqueta con el tamaño de letra que queremos utilizar. Así escribiremos algo parecido a lo que sigue:

Sin embargo, hay otra forma de hacerlo más elegante y legible, utilizando la siguiente etiqueta:

Esta etiqueta puede situarse en cualquier lugar del documento. Sin embargo, como se trata de una etiqueta que afecta a todo el documento, para mantener la legibilidad lo más lógico es colocarlo en la cabecera. Si fijamos un tamaño de letra básico distinto del 3, debemos tener en cuenta que es posible que alguno de los tamaños relativos no pueda llevarse a cabo, puesto que se sale de los límites especificados. Le cambiamos el tamaño al párrafo. Vayan variando el tamaño (del 1 al 7) para ver la diferencia.



10

10

COLORES DEL TEXTO

Para dar color a un texto se utiliza el comando siguiente:

En un principio la forma de especificar un color en HTML, era mediante el formato hexadecimal. Consistía en tres números hexadecimales (números expresados en base 16) de dos dígitos cada uno. Con un número hexadecimal de dos dígitos podemos expresar hasta 256 valores distintos. El primer número hexadecimal nos va a indicar la cantidad de rojo que tiene nuestro color, el segundo la cantidad de verde, y el tercero la cantidad de azul (el blanco será FFFFFF, el negro 000000). Esta forma de definir los colores como combinación de los colores rojo, verde, y azul se denomina RGB (red - green - blue). Afortunadamente, la mayoría de los visualizadores, al menos en sus últimas versiones, admiten otra forma de insertar colores. En lugar de expresarlos, en formato hexadecimal, se expresan como cadena de caracteres. Esta cadena es el nombre del color en inglés. Para dar color a todo el texto del documento podemos hacerlo con:

Para especificar el color de fondo del documento deberemos utilizar:



11

11

Ahora le colocaremos color verde a todo el texto. Vean que directamente lo agregué a la etiqueta Font ya creada.

Le colocamos un fondo a nuestra página…



12

12

LISTAS

Las listas en HTML proporcionan una forma de clasificar la información, y hacer que ésta sea más inteligible por parte del visitante de las páginas.

LISTAS ORDENADAS: OL.

También llamadas listas numeradas son aquellas en las que cada elemento tiene delante un número que indica el orden del elemento dentro del conjunto de la lista. La marca para crear una lista ordenada es <OL> .... </OL>. Son obligatorias las etiquetas de comienzo y fin de estas marcas. Cada elemento de la lista ordenada se identifica escribiéndolo dentro de la marca <LI> ....</LI>. Con la marca LI no es necesario introducir un retorno de carro detrás de cada elemento de la lista. Es posible especificar el tipo de numeración que se dará (números arábigos, números romanos, letras, etc.), por defecto se sigue la numeración árabe. Las listas numeradas pueden ser anidadas una dentro de otra.

LISTAS DESORDENADAS: UL.

También llamadas listas no numeradas son listas en las que no es necesario numerar de alguna manera los elementos que la componen, sino que cada elemento tiene delante un símbolo (un punto, un cuadrado, etc..). La forma de especificar una lista desordenada es mediante la marca <UL>. Las etiquetas de comienzo y fin de esta marca son obligatorias. Cada elemento de la lista se identifica mediante la marca <LI>. También es posible en las listas desordenadas especificar el símbolo que va a aparecer delante de cada elemento de la lista. Las listas desordenadas también pueden ser anidadas una dentro de otra. A continuación, escriban “los elementos son la estructura básica de html”, en la siguiente línea “los elementos tienen dos propiedades básicas:” y luego colocan con viñetas las siguientes palabras: Atributos y contenidos. Noten que las listas comienzan con la etiqueta <ul> y luego por cada elemento la etiqueta <li>.



13

13

INSERCIÓN DE IMÁGENES EN HTML

La etiqueta que utilizaremos para incluir imágenes en el código HTML es <img>, que tiene dos atributos requeridos, u obligatorios, y otros opcionales. El primer atributo obligatorio es src, que proviene de la abreviatura de source (fuente, en inglés). A través de él, le indicamos al navegador la URL de la imagen que queremos mostrar. El segundo atributo obligatorio es alt, que se utiliza para describir el contenido de la imagen en un texto breve de hasta 1024 caracteres. Veamos, a continuación, un ejemplo de uso de la etiqueta <img>:

Noten que cuando colocan img en Visual Studio Code y luego le dan enter ya aparece el código escrito, sólo tienen que rellenar el nombre y la ubicación de la imagen y el texto alternativo. Una aclaración: en el ejemplo anterior la imagen logo.jpg está en la misma carpeta que la página web. Si la imagen estaría en otra tendríamos que colocar la ruta en src, por ejemplo:

Cuando trabajamos con sitios web siempre es importante tener todos los archivos organizados en carpetas. Los atributos width y height se aplican para definir el ancho y el alto con el que se muestran las imágenes en la página HTML.



14

14

ACTIVIDAD

1. Crear una carpeta llamada Ejercicio1.

2. Abrimos la carpeta en Visual Studio Code.

3. Crear una página con el nombre receta.html (como la que aparece más abajo), teniendo en cuenta:

a. Color de fondo.

b. Color del texto.

c. Encabezados.

d. Viñetas.

e. Cursivas de Ingredientes y Preparación.

f. Imagen. Deben crear una carpeta llamada Imagen y colocarla dentro de la carpeta Ejercicio1. Esto

lo hacemos para organizar mejor nuestro sitio.

4. Colocarle a la página web el título “Recetas de cocina” (desde head)

5. Comprimir toda la carpeta (rar) y entregarla en tarea de classroom.

Fecha de entrega: 21 de mayo.

html 5 mÓdulo 1 · estructura bÁsica de una pÁgina toda página web que hagamos en html5 debe...

Documents