Scribd
Cargar
11 vistas

PRESENTAXIÓN HTML5

Cargado por

Laura Hidalgo
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 PPTX, PDF, TXT o lee en línea desde Scribd
11 vistas

PRESENTAXIÓN HTML5

Cargado por

Laura Hidalgo
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 PPTX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 57

HTML5

TIC 2
UNIVERSIDAD LABORAL 2018-2019
ASPECTOS
BÁSICOS
ASPECTOS BÁSICOS
Para comenzar a crear nuestras páginas web hemos de ir
componiendo las diferentes etiquetas HTML dentro de un
documento.
Etiquetas HTML

Una etiqueta HTML es un término rodeado por un signo


de menor y otro de mayor
<strong> </strong>
Elemento HTML: El conjunto de las dos etiquetas y el
texto contenido en su interior.

en algunos casos sólo necesitaremos una etiqueta, ya


que reflejamos un elemento puntual o con un
contenido vacío. <hr />

las etiquetas son anidables, por lo que podemos definir


un párrafo (mediante las etiquetas <p> y </p>) y en su
interior incluir una lista de elementos, imágenes, texto
destacado, etc. empleando diferentes etiquetas.
Parámetros de las etiquetas
Muchas etiquetas HTML necesitan modificadores
(parámetros) para funcionar correctamente. Estos se
introducen entre los signos de apertura y cierre para
definir algún matiz concreto del elemento HTML.
<img />
<img src=”fotodelgrupo.jpg” />
<img src=”fotodelaula5.jpg” width=”300px” height=”150px”
/>
Los parámetros se identifican por un término, seguido
de un signo de igual y a continuación, entre comillas, el
valor que le queramos asignar.
cualquier página web incluirá al menos las siguientes etiquetas:

 <html> y </html> colocadas al principio y fin del documento indican


dónde comienza y finaliza la página web.

 <head> y </head> definen un espacio en el que incluiremos contenidos


que no se van a mostrar directamente en el navegador, sino que
describen determinados aspectos del documento, como su título, autor,
los estilos que emplearemos…

 <body> y </body> en su interior se incluye la información que se


mostrará en el navegador. Es el contenido real de la página, estructurado
mediante las diferentes etiquetas.
Junto a las tres etiquetas anteriores podemos encontrar
algunas más que son importantes para que la web se
interprete correctamente:

 <!DOCTYPE> y <?xml> indican qué tipo de


documento estamos generando y a qué normas se
ajusta. Normalmente serán siempre iguales y será
nuestro editor el que se encargue de colocarlas al
principio de la página, cuando sea necesario.
<!DOCTYPE html>

<html>

<head>
EJERCICIO: <title>Mi primera página</title>
Copiamos en el bloc </head>

de notas del <body>

ordenador y lo <p>Mi primera página web.</p>

guardamos con </body>

extensión html: </html>


CREAR PÁGINAS WEB CON
EDITOR DE PÁGINAS WEB
Los editores de páginas web nos evitarán los pasos
más repetitivos y nos protegerán ante errores de
escritura. Dos editores de páginas web son Bluegriffon
y Kompozer.
Código y WYSIWYG

La principal ventaja de los editores de este tipo es que no es


necesario desplegar el navegador para probar cada pequeño
cambio que realicemos. Estamos trabajando con un editor
visual, que va a intentar mostrarnos lo más fielmente posible
la apariencia final de nuestra página web.

Este tipo de editores cuentan con la posibilidad de


mostrarnos la página web tal y como se está creando, para
que podamos modificar cualquier etiqueta que queramos.
Modificar una página web

Hay que incorporar el texto que deseemos y a


continuación ir aplicándole el formato necesario.
Podemos abrir y guardar cada página tantas veces
como deseemos y aplicar las modificaciones que
necesitemos. Cada cambio se muestra, tanto en el
panel de wysiwyg como en el de código fuente.

En el navegador podremos ver los cambios con tan


sólo recargar la página web, para que éste muestre las
últimas modificaciones.
Principales etiquetas para dar formato a un texto

Párrafos

Las etiquetas <p> y </p> se emplean para definir un


bloque de texto que se comporta como un párrafo.
Títulos

Las etiquetas <h1> y </h1> se utilizan para definir un


texto como título, que queremos destacar sobre el resto
del texto. Junto a <h1> contamos con <h2>, <h3> y así
hasta <h6> para diferentes títulos, de mayor a menor
importancia.
Saltos de línea y líneas separadoras

<br/> inserta un salto de línea en el texto. No genera un


nuevo párrafo, sino que parte la línea en dos.

<hr /> inserta un salto de línea en el texto, pero


mostrando una línea horizontal visible.

De este modo podemos tener un título que ocupe varias


líneas, dividido exactamente donde más nos interese.

Podemos emplear estas etiquetas tanto para realizar


pequeñas separaciones en el interior de un párrafo como
fuera de él.
Actividad 1. Texto

Vamos a incorporar algunos bloques de texto a


nuestra página web. Accede a esta página:

http://es.lipsum.com/feed/html, copia los primeros


cuatro bloques de texto y pégalos en una nueva
página web creada con BlueGriffon; posteriormente
guarda la página y comprueba que el texto se ha
dividido en párrafos. Si no es así, lo haremos
manualmente pulsando la tecla Intro al final de cada
párrafo.
Actividad 2. Texto

En la página del ejemplo anterior accede a la versión


del código fuente e inserta esas etiquetas en dos
lugares diferentes dentro de un párrafo y observa el
resultado. Inserta también una línea horizontal entre
dos párrafos. Por último, prueba a insertar uno de esos
elementos dentro de una cabecera y observa el
resultado. De este modo podemos tener un título que
ocupe varias líneas, dividido exactamente donde más
nos interese.
Etiquetas de estructura (1)

<header> y </header>: define un bloque de contenido


que hará las veces de título de la página web.

<footer> y </footer>: define el pie de página.

<nav> y </nav>: incluiremos diferentes enlaces para que


el usuario se desplace entre las partes de nuestra web.

<section> y </section>: para definir grandes secciones


de nuestra página.
Etiquetas de estructura (2)

<article> y </article>: marca los límites de un


contenido específico, como una entrada de un blog o
un artículo en general.

<aside> y </aside>: se emplea para definir un


contenido que está relacionado con la página, pero
que se debe considerar como separado del
contenido principal.
Etiquetas de estructura (2)

• <hgroup> y </hgroup> para cabeceras de


secciones.

• <figure> y </figure> para contenidos multimedia.

• <time> y </time> para definir la fecha del


contenido.

• <mark> y </mark> para definir textos destacados


para referencias.
EJEMPLO

Copia y pega en el bloc de notas el ejemplo que


viene en los apuntes. No te olvides de guardarlo con
la extensión .html y prueba a verla en el navegador.
La cabecera de la página web

Cada página web cuenta con un elemento <head>


colocado antes del <body>.

Esta cabecera general de la página se emplea para


incorporar contenidos que no se mostrarán
directamente, pero que tienen una elevada influencia en
el aspecto que tendrá la página y en su
comportamiento.
La cabecera de la página web

En el interior del elemento <head> podemos añadir los


siguientes elementos:

<title> y </title>: define el título de la página. Es


imprescindible por lo que siempre debemos añadirlo.
Este es el título que se mostrará en la barra de título
del navegador, al hacer un marcador a la página o en
los buscadores de Internet.

<link />: se utiliza para enlazar con recursos


La cabecera de la página web

<link />: enlazar con recursos externos,


generalmente hojas de estilo.

<style> y </style>: nos permite definir estilos


específicos para la página actual. Se suele emplear
en combinación con el anterior.

<base />: define la URL base para el resto de los


enlaces que incluyamos en la página web. Se emplea
en casos muy concretos.
La cabecera de la página web

<script> y </script>: englobar acciones en otros


lenguajes, generalmente Javascript, para conseguir
que la página web realice determinadas tareas.

<meta> y </meta>: no son imprescindibles para el


funcionamiento de la página web, pero su inclusión es
siempre una buena práctica porque permiten
identificar con facilidad algunos parámetros de la
web, como autores, codificación de caracteres, etc.
La etiqueta <meta>

De todas las etiquetas <meta>, debemos incluir al


menos una que defina qué tipo de codificación de
caracteres estamos empleando.

Teniendo en cuenta que nuestra web puede ser vista


en cualquier lugar del mundo, la codificación de
caracteres se encargará de que un ciudadano japonés,
por ejemplo, pueda ver correctamente nuestra página y
no una serie de caracteres ininteligibles. Hoy en día
emplearemos siempre la codificación UTF-8.
La etiqueta <meta>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<meta content="Antonio Paniagua" name="author">

<meta content="Prácticas para el material de HTML"


name="description">

<meta content="html, cabeceras, etiquetas, estilos, párrafos"


name="keywords">
Cabeceras sencillas

En BlueGriffon seleccionaremos la opción


Formato>Propiedades de página (debemos estar en
el modo wysiwyg para que esté activa) y en el cuadro
de diálogo que se despliega, podremos editar las
principales etiquetas meta, así como el idioma en el
que está creada la página web.
Actividad 3. Cabecera de la página

Para entender el funcionamiento del elemento script,


probaremos a añadir este pequeño código dentro de la
página web, entre el <head> y el </head>
<script type="text/javascript">
var d = new Date();
alert ("Hoy es "+ d.toLocaleString() );
</script>
RESUMEN: Etiquetas fundamentales
<p>: párrafos.

<h1> .. <h6>: encabezados.

<br>: salto de línea.

<hr>: línea horizontal.

<header>, <footer>, <nav>, <section>, <article>, <figure>, <aside>

<title>: título.

<meta>: información sobre la página.

<style> y <link>: para trabajar con hojas de estilo.

<script>: para añadir acciones extra a la página.


FORMATOS
Para acertar al elegir la apariencia de una página web,
debemos seguir algunas recomendaciones básicas:

 No mezclar demasiados colores ni tamaños de letra.


• Realizar un boceto previo, definir los tamaños y
colores con los que vamos a trabajar…
 Realizar muchas pruebas.
 No importa cuántos efectos sepamos aplicar, no hace
falta que lo demostremos en una misma página.
 Observar las combinaciones de color que podemos
ver, por ejemplo, en un anuncio que nos resulte
agradable, en otra página web…
Hay algunas etiquetas que se emplean para
destacar pequeñas porciones de un párrafo o de
una frase.

 <strong> y </strong>: para destacar una parte del texto. Normalmente


el texto incluido entre esas etiquetas se representa en negrita.
 <em> y </em>: se emplea para enfatizar un texto; habitualmente se
representa en cursiva.
 <i> e </i>: hacen que un texto se muestre en cursiva. La estética es
similar al caso anterior, aunque su significado desde la óptica del
lenguaje HTML es diferente.

Ejemplo: <p>El bloque siguiente es muy


<strong><em>importante</em></strong></p>
Etiquetas de formato de texto

Junto a <strong> y <em> tenemos otras etiquetas


destinadas a dar sentido a una parte concreta de la página
web:

• <dfn> para definiciones


• <code> para bloques de código informático
• <samp> para ejemplos
• <kbd> para texto de teclado
• <var> para definir una variable
• <cite> para una cita.
ESTILOS: CSS

Todo lo que tiene que ver con la parte estética de la web


se deja a CSS.
CSS es el acrónimo de Cascade Style Sheet (hojas de
estilo en cascada). Apareció con HTML4. Nos proporciona
todos los elementos que necesitemos para modificar la
apariencia de nuestra página web.

Con CSS definiremos cómo debe mostrarse un elemento


HTML concreto, estableciendo el tamaño, color, tipografía
o bordes.
CSS: VENTAJAS

Con CSS separamos las cuestiones de diseño de las del


contenido, obteniendo algunas ventajas. Las dos más
importantes son:
 Se vuelve muy sencillo modificar cuestiones de
diseño a través de un sitio web complejo: Podemos
cambiar el tipo de letra de todo un portal web con tan sólo modificar
una línea de un archivo.

 Las páginas son más limpias, cargándose más


rápido, con menos errores y más accesibles en
todos los sentidos.
APLICAR ESTILOS: TRES FORMAS

En un archivo externo: definimos una serie de reglas CSS


en un archivo, que enlazaremos desde nuestra página web,
en la cabecera de la misma.

En la cabecera de la página web: en la cabecera


podemos indicar las reglas CSS, afectando sólo a la página
web en cuestión.

En la página web: dentro de un elemento concreto de la


página web, mediante el parámetro style que se puede
establecer para cualquier etiqueta.
ESTILOS (1)

Vamos a dar estilo a estos dos elementos HTML:

<h1>Qué entendemos por un párrafo</h1>

<p>Un párrafo de texto se compone de un bloque de texto


independiente con una apariencia concreta, delimitado por
un espacio superior y otro inferior.</p>
ESTILOS (2)

<h1 style="color: rgb(200, 20, 20); font-family:


Helvetica,Arial,sans-serif;">Qué entendemos por un
párrafo</h1>

<p style="font-style: italic; color: rgb(20, 20, 200);">Un


párrafo de texto se compone de un bloque de texto
independiente con una apariencia concreta, delimitado
por un espacio superior y otro inferior.</p>
LA ETIQUETA <span>

Con <span> seremos capaces de realizar una


agrupación dentro de un bloque de texto.

Continúa con el ejemplo anterior:

<h1>Qué entendemos por un <span style="color: rgb(0, 153,


0);">párrafo</span></h1>

<p color:="rgb(20, 20, 200);">Un párrafo de texto se compone de


un<span style="font-weight: bold; color: rgb(255, 0, 0);">bloque de
texto independiente</span> con una apariencia concreta, delimitado
por un espacio superior y otro inferior.</p>
Aplicar estilos con un editor web (1)

Barras de herramientas
Debajo de la barra de botones de la aplicación
encontramos dos barras dedicadas a la aplicación de
estilos al contenido de la página web.

• Los botones representados por !, !! y C, corresponden


respectivamente a Énfasis, Énfasis mayor y Code y
aplicarán al texto las etiquetas <em>, <strong> y
<code>, que destacan el texto visualmente, pero
también semánticamente.
Aplicar estilos con un editor web (2)

• Los botones B, I y U se corresponden


respectivamente con negrita, cursiva y subrayado.

• La alineación de los párrafos se controla mediante


los cuatro botones que aparecen en esa barra, que
se corresponden con Alineación izquierda,
Centrado, Alineación derecha y Justificada.
Menú de formato

En el menú formato encontramos algunas opciones más


relacionadas con la aplicación de estilos específicos al
texto
Propiedades de estilo

La aplicación de estilos con BlueGriffon o Kompozer se


convierte en un proceso muy simple gracias al editor de
estilos. Este panel se despliega haciendo clic en el botón
Establecer estilos CSS o en el menú
Paneles>Propiedades de estilo.
ACTIVIDADES CSS

Actividad 1. Estilo

Realiza un ejemplo en el que aplicar en un par de frases


algunos de los estilos vistos hasta ahora. Puedes repetir
exactamente los mismos con tan sólo copiarlos y pegarlos.

Actividad 2. Aplicar estilos con un editor web

Realiza una modificación de toda la página web utilizando


esta técnica de selección de la página. Prueba a cambiar el
tipo de letra y el color de fondo de la página.
TEMA 3: ENLACES

• Los enlaces externos son aquellos que creamos en nuestra


web, para que los usuarios puedan acceder a otro sitio web
concreto o a un punto del mismo. En estos casos,
necesitaremos conocer la URL del sitio en concreto.

• Para crear un enlace, necesitamos decidir qué parte de


nuestra página será el enlace. Normalmente utilizaremos
una palabra, una frase o una imagen.

• Para crear un enlace utilizamos la etiqueta <a> y el


parámetro href para indicar la dirección a la que queremos
acceder. Este elemento también cuenta con una etiqueta de
cierre </a>.
EJEMPLO:

<p>Para localizar el significado de una palabra, accede al


<a href=”http://buscon.rae.es”>diccionario de la RAE</a>.
Luego regresa a nuestra página.</p>
EJEMPLO 2

<p>Podemos completar esta información en las siguientes páginas web: </p>


<br><a href=”http://www.rae.es/rae/gestores/gespub000020.nsf/voTodosporId
/2CDF85BBF055C349C1257168003A3E51?OpenDocument”>Recursos
lingüisticos</a>.
<br><a href=”http://es.wikipedia.org/wiki/Diccionario_de_la_lengua_espa
%C3%B1ola”>Entrada de la wikipedia sobre el Diccionario de la RAE</a>.
<p></p>
EJERCICIO 1:

En una página web incorpora tres enlaces a diferentes


medios de comunicación o a páginas de tu interés.
ENLACES CON UN EDITOR HTML

Sigamos estos pasos para crear un enlace:

1. Introduciremos el texto que queremos que se convierta en


enlace.
2. Seleccionaremos ese texto con el ratón.
3. Haremos clic en el icono Enlace (en forma de cadena).
4. En el cuadro de diálogo que aparece, escribiremos la
dirección de la página web o la pegaremos, si la habíamos
copiado previamente desde el navegador.
5. Al hacer clic en Aceptar, nuestro enlace estará ya listo.
Enlazar con un recurso específico

<h1>Música</h1>

<p>Haz clic para descargar <a


href="http://www.rtve.es/resources/TE_SALALBA/mp
3/2/8/1286271765182.mp3">el archivo de
audio</a>.</p>
estamos enlazando directamente con un archivo mp3
situado en Internet.
Archivos para descargar

No siempre enlazaremos con archivos que se van a mostrar


en el ordenador. Podemos utilizar estas técnicas para
facilitar recursos a nuestros usuarios, para que se
descarguen en su ordenador. Así, si enlazamos con un
documento de texto propio de un editor, un archivo zip, una
presentación, etc. el navegador intentará interpretarlo; pero
si no lo consigue, hará que el archivo se descargue para
que el usuario pueda trabajar con él.
Actividad 2:

En la misma carpeta de una página web


almacenaremos un par de archivos de vídeo o de audio,
así como alguna imagen y probaremos a enlazar con
esos archivos. Comprobaremos lo que sucede al hacer
clic sobre cada enlace en cada caso.
Enlaces entre páginas del mismo sitio

Un sitio web suele componerse de varias páginas web.


Todas esas páginas mantienen una relación entre si, por lo
que necesitaremos conectarlas utilizando enlaces.
Necesitaremos realizar varios enlaces desde la página
principal (la llamada index.html) hacia las otras páginas
del sitio. Y aquí es donde viene la principal diferencia entre
crear enlaces a otros sitios web o dentro de un mismo sitio
web.
Referencias relativas y absolutas

Si desde la página index.html del ejemplo anterior quiero


enlazar con la página presentación.html que se encuentra
en la misma carpeta, podría hacerlo con el método absoluto:
<a href=”http://www.misitioweb.com/presentacion.html”>Accede a la
presentación</a>

o mediante un sencillo enlace relativo:


<a href=”presentacion.html”>Accede a la presentación</a>

El segundo método es el correcto. Dado que las dos


páginas están en la misma carpeta, sólo necesito indicar
su nombre.
Referencias relativas y absolutas

En resumen, las tres técnicas para direccionar un enlace son:


 Si las páginas están en la misma carpeta: indicamos el
nombre de los archivos nada más.
 Si está en una o varias subcarpetas: indicamos las
subcarpetas con una / como separador (por ejemplo,
documentos/2014/proyecto.html).
 Si está en una o varias carpetas anteriores a la actual:
utilizamos .. para retroceder en la estructura (por
ejemplo ../../propuestas.html nos llevaría a un archivo
Actividad 3:

Retomando el ejemplo en el que enlazábamos con


diferentes archivos multimedia (Actividad 2), moveremos
esos archivos a una carpeta que crearemos, dentro de
la que contiene a nuestra página web. Al probar los
enlaces de nuevo, no funcionarán. Debemos corregir las
direcciones para hacerlos funcionar de nuevo.

También podría gustarte