Clase 5 lenguaje html

CLASE 5
“Redacción de noticias y
Lenguaje HTML para la creación
y mejora de páginas web”
Lics. en Periodismo y Comunicación Social
FCH-UNSL
(Año 2014)
CREATIVE COMMONS RECONOCIMIENTO-NOCOMERCIAL-
COMPARTIRIGUAL 3.0 UNPORTED LICENSE

LENGUAJE HTML
<HTML>
<HEAD> ENCABEZADO
<TITLE> Título de la página </TITLE>
</HEAD>
<BODY> CUERPO
[Aquí se escriben las etiquetas que
permiten visualizar la página]
</BODY>
</HTML>
HTML (HyperText Markup Language) es un lenguaje de creación de
páginas web compuesto por una estructura básica de
programación (Encabezado y Cuerpo) y un contenido (texto,
imágenes, tablas, audios, videos, etc.)…

Su estructura básica de programación se compone de
etiquetas que cumplen la función de “comandos” que
permiten el agregado de contenido a una página web.
Mientras éstas se escriben se trabaja en Vista Diseño y
cuando se visualiza el efecto de las mismas en un
navegador de páginas web se trabaja en Vista Usuario…
LENGUAJE HTML
<HTML> COMIENZO DE LA PÁGINA WEB
<HEAD> ENCABEZADO
</HEAD>
<BODY> CUERPO
[Aquí se escriben las etiquetas que
permiten visualizar la página]
</BODY>
</HTML> FIN DE LA PÁGINA WEB
VISTA DISEÑO VISTA USUARIO

Su trabajo requiere del uso de un procesador de textos básico (por ej.
Bloc de Notas) donde se escribe de forma manual el código de
programación de la página. Esto requiere conocer el funcionamiento de
cada una de las etiquetas del lenguaje HTML.
Las etiquetas se escriben entre llaves angulares (< >) y suelen tener
una fase de apertura y de cierre (indicada por el símbolo ( / )…
VISTA DISEÑO
<HEAD> ENCABEZADO
</HEAD>
<BODY> CUERPO
[Aquí se escriben las etiquetas que permiten visualizar la página]
</BODY>

El código fuente de una página web puede ser
visualizado a través del comando VerCódigo fuente
(u otro similar) en cualquier navegador…
VISTA DISEÑO

Visualización ampliada de los diferentes comandos
escritos en lenguaje HTML…
VISTA DISEÑO

Constituye otro de los modos en los que se debe ubicar el
creador de una página web: cómo verá la página el
usuario lector.
La Vista Usuario es posible en la medida que el archivo
generado en el Bloc de Notas se guarde con extensión
.HTML, lo que producirá como efecto su apertura en el
Navegador de páginas web predeterminado…
VISTA USUARIO

La extensión .HTM/ .HTML. se coloca de forma manual,
mediante las configuraciones manuales de los campos
“Nombre” y “Tipo” del comando “ArchivoGuardar
como”…
VISTA USUARIO

Permiten el agregado de contenido a una
página web de forma muy sencilla. Entre las
de más fácil manejo se encuentran:
• <HTML> Y </HTML>
• <HEAD> y </HEAD>
• <BODY> y </BODY>
• <TITLE> y </TITLE>
• <P>
• <H1> </H1> o <H2> </H2>… y …<H6> </H6>
• <CENTER> y </CENTER>
• <HR>…
CREANDO PÁGINAS EN HTML
ETIQUETAS SIMPLES

• <HTML> y </HTML> indican principio y fin
de la página web que se está creando.
• <HEAD> y </HEAD> indican principio y fin
del encabezado de la página. En el mismo se
coloca información general, como título de
la página, información para robots de
búsqueda de información, códigos de
programación que se utilizarán en la
página, etc.
• <BODY> y </BODY> indican principio y fin
del cuerpo de la página. En el mismo se
coloca su contenido: texto, imágenes,
enlaces, audio, video, etc…
ETIQUETAS SIMPLES

<HTML>, <HEAD> y <BODY>
ETIQUETAS SIMPLES
<HEAD> ENCABEZADO
</HEAD>
<BODY> CUERPO
[Aquí se escriben las etiquetas que permiten visualizar la página]
</BODY>

• <TITLE> y </TITLE> especifica el título
de la página.
• <P> agrega una o más líneas vacías al
texto.
• <H1> </H1> o <H2> </H2>…y … <H6> </H6>…
especifican el tamaño del texto, siendo
H1 el más grande.
• <CENTER> y </CENTER> alinea un texto al
centro del renglón.
• <HR> coloca una línea horizontal del
largo de la pantalla…
ETIQUETAS SIMPLES

<TITLE>, <P>, <H1>…<H6>, <CENTER> y <HR>
ETIQUETAS SIMPLES
<HTML>
<HEAD>
<TITLE> El Informante </TITLE>
</HEAD>
<BODY>
<H1>
<CENTER> Primera pagina </CENTER>
</H1>
<HR>
Un periódico en el que nosotros y vos hacemos la
diferencia en la información…
<P>
</BODY>
</HTML>

<TITLE>, <P>, <H1>…<H6>, <CENTER> y <HR>
ETIQUETAS SIMPLES

• <BR> separa párrafos.
• <B> y </B> coloca un texto en
negrita.
• <I> y </I> coloca un texto en
cursiva.
• <U> y </U> subraya un texto.
• <BLOCKQUOTE> y </BLOCKQUOTE>
destaca una cita textual dentro de
un texto…
MÁS ETIQUETAS SIMPLES

ETIQUETAS EN HTML
<BR>, <B>, <I>, <U> y <BLOCKQUOTE>
ETIQUETAS SIMPLES

• <OL> </OL> enumera elementos con
números.
• <UL> </UL> enumera elementos con
viñetas…
ETIQUETAS DE NUMERACIÓN
DE ELEMENTOS
Ambas etiquetas trabajan en conjunción con
la etiqueta <LI>.

<OL> (Listas con números)
ETIQUETAS DE NUMERACIÓN DE
ELEMENTOS

<UL> (listas con viñetas)
ETIQUETAS DE NUMERACIÓN DE
ELEMENTOS

<HREF>
ETIQUETAS DE ENLACES O
HIPERVÍNCULOS
Permite que al cliquear sobre un texto
éste pueda ser redirigido hacia otro
texto, una imagen, un audio, video, e
incluso a otro sitio web.
Su forma general es:
<A HREF=“dirección web o ruta local del
destino del enlace"> Término al que se le
asocia el enlace </A>…

<HREF>
HIPERVÍNCULOS

<HREF> y sus atributos
HIPERVÍNCULOS
Admite diversos modificadores de los
que podemos mencionar a “target” que
cumple diversas funciones:
•“_blank”: muestra el enlace en
una nueva página.
•“_self”: muestra el enlace en la
misma página…

<HREF> y sus atributos
HIPERVÍNCULOS
Uso del modificador: “_blank”

<HREF> y el enlace a un email
HIPERVÍNCULOS
<A HREF="mailto: dirección de email">
Texto del enlace </A>…

<HREF> y el enlace a un email
ETIQUETAS DE ENLACES O HIPERVÍNCULOS

ETIQUETAS DE FONDO DE LA
PÁGINA
Se utilizan al interior de la etiqueta Body y
permiten modificar la forma o colores del fondo de
la página y los enlaces: sin visitar, activos y
visitados.
• <BGCOLOR> permite modificar el color de fondo
de la página
• <BACKGROUND> permite agregar una imagen de
fondo
• <LINK> modifica el color de los enlaces sin
visitar
• <VLINK> modifica el color de los enlaces
visitados
• <ALINK> modifica el color de los enlaces
activos…

BGCOLOR
PÁGINA
Modifica el color de fondo de una
página admitiendo variantes que
expresan al color en letras o en
código hexadecimal:
<BODY BGCOLOR=“red”>
<BODY BGCOLOR=“FFFF00”>…
El color en código hexadecimal difiere de acuerdo a la
paleta de colores considerada.

BGCOLOR
PÁGINA

PALETA DE
COLORES EN
HEXADECIMAL
#0000FF blue
#008000 green
#008080 teal
#00FF00 lime
#00FFFF aqua
#800000 maroon
#800080 purple
#808000 olive
#808080 gray
#C0C0C0 silver
#FF0000 red
#FF00FF fuchsia
#FFFF00 yellow

PALETA DE
COLORES EN
HEXADECIMAL
#000000 #000033 #000066 #000099 #0000CC #0000FF
#003300 #003333 #003366 #003399 #0033CC #0033FF
#006600 #006633 #006666 #006699 #0066CC #0066FF
#009900 #009933 #009966 #009999 #0099CC #0099FF
#00CC00 #00CC33 #00CC66 #00CC99 #00CCCC #00CCFF
#00FF00 #00FF33 #00FF66 #00FF99 #00FFCC #00FFFF
#330000 #330033 #330066 #330099 #3300CC #3300FF
#333300 #333333 #333366 #333399 #3333CC #3333FF
#336600 #336633 #336666 #336699 #3366CC #3366FF
#339900 #339933 #339966 #339999 #3399CC #3399FF
#660000 #660033 #660066 #660099 #6600CC #6600FF
#660033 #663333 #663366 #663399 #6633CC #6633FF
#666600 #666633 #666666 #666699 #6666CC #6666FF
#669900 #669933 #669966 #669999 #6699CC #6699FF
#990000 #990033 #990066 #990099 #9900CC #9900FF
#993300 #993333 #993366 #993399 #9933CC #9933FF
#996600 #996633 #996666 #996699 #9966CC #9966FF
#999900 #999933 #999966 #999999 #9999CC #9999FF
#CC0000 #CC0033 #CC0066 #CC0099 #CC00CC #CC00FF
#CCCC00 #CCCC33 #CCCC66 #CCCC99 #CCCCCC #CCCCFF
#CCFF00 #CCFF33 #CCFF66 #CCFF99 #CCFFCC #CCFFFF
#FF0000 #FF0033 #FF0066 #FF0099 #FF00CC #FF00FF
#FFCC00 #FFCC33 #FFCC66 #FFCC99 #FFCCCC #FFCCFF
#FFFF00 #FFFF33 #FFFF66 #FFFF99 #FFFFCC #FFFFFF

BACKGROUND
PÁGINA
Se utiliza dentro de la etiqueta Body
de una página web para colocar una
imagen de fondo.
<BODY BACKGROUND=“dirección web o ruta
local del destino del enlace”>

BACKGROUND
PÁGINA

LINK, VLINK Y ALINK
ETIQUETAS DE FONDO DE LA PÁGINA

TABLAS
Permiten el ordenamiento de uno o más datos en celdas
rectangulares distribuidas en filas y columnas:
<TABLE BORDER>
<TR>
<TD>fila1-celda1</TD> <TD>fila1-celda2</TD> <TD>fila1-
celda3</TD>
</TR>
<TR>
<TD>fila2-celda1</TD> <TD>fila2-celda2</TD> <TD>fila2-
celda3</TD>
</TR>
</TABLE>
<TR> indica la fila y <TD> indica la columna de la tabla.

TABLAS (Vista Diseño)

TABLAS (Vista Usuario)

TABLAS y atributos
Existen diversos modificadores del comando Table,
entre ellos:
• BORDER que modifica el ancho del borde <TABLE
BORDER=2>
• BGCOLOR que modifica el color de fondo de la
tabla <TABLE BORDER BGCOLOR="#00FF00">
• HEIGHT que modifica el alto de la tabla <TABLE
HEIGHT=200>
• VALIGN que pemite modificar la alineación del
contenido
<TD VALIGN=TOP> Arriba </TD>
<TD VALIGN=BOTTOM> Abajo </TD>

TABLAS y atributos

INSERCIÓN DE ELEMENTOS
MULTIMEDIALES
Permiten insertar o complementar la
información textual con imágenes, audio,
video, etc.
Utiliza las etiquetas:
•<IMG> </IMG> para la inserción de
imágenes.
•<BGSOUND> para colocar sonido de fondo
a una página.
•IFRAME, EMBED U OBJECT que permite
embeber objetos multimediales (audio,
video y presentaciones con
diapositivas, entre otros) dentro de un
sitio web.

INSERCIÓN DE ELEMENTOS MULTIMEDIALES
Permite la inserción de imágenes fijas o
animadas. Su forma general es:
<IMG SRC=“dirección web o ruta local del
destino del enlace”>
Entre los distintos modificadores que admite
se tienen:
•Height y Width: para modificar alto y ancho
de la imagen
•Alt: para asociar un texto a la imagen
•Align: top, middle, bottom, texttop, etc.
•Border: para cambiar el grosor del borde,
etc.
IMG

IMG
Al momento de referenciar una imagen se debe tener clara su
ubicación dentro del disco rígido. En general, todas las imágenes
deben alojarse dentro de una misma carpeta.

IMG

BGSOUND
Permite colocar un sonido de fondo a la página. Su
forma general es:
<BGSOUND SRC=“dirección web o ruta local del
destino del enlace”
Algunos de sus modificadores son:
•Loop: posibilita la repetición del sonido.
•Volume: indica el volumen con el que se escuchará
ese audio (-10.000…10.000)
•Balance: indica la distribución del volumen (-
10.000…10.000)
La elección del sonido de fondo para una página debe ser atinada,
puesto que en muchos casos pueden resultar molestos, o bien, deberían
admitir su desactivación por parte del usuario lector.

BGSOUND

EMBEBER UN AUDIO
Los audios se suben en un sitio externo
(como Goear o Dilandau), diferente de dónde
se publican los contenidos. Este sitio
provee la información para embeber el audio
desde cualquier otro sitio web.

EMBEBER UN AUDIO
Al embeber un audio éste se incorpora a la página anexándose a la
misma permitiendo desde allí su reproducción.

EMBEBER UN VIDEO
Los videos se suben
a un sitio externo,
diferente de donde
se publican los
contenidos (por ej.
Youtube o Vimeo).
Este sitio provee la
información para
embeber el audio
desde cualquier otro
sitio web.

EMBEBER UN VIDEO (usando Iframe)
Al chequear la sintaxis brindada por un sitio web se debe chequear que esta esté escrita
correctamente. El omitir por ej. “http:” es motivo de error en los navegadores.

EMBEBER UN VIDEO (usando Object)

PLUGINS NECESARIOS
Para poder visualizar los audios y videos de un sitio web es
necesario disponer del Plugin “Shockwave Flash” instalado en
la computadora.
Este puede descargarse e instalarse desde la Web o bien
anexarse desde los plugins de un navegador…

Especifican información esencial para el navegador tal como:
Versión del lenguaje HTML con la que se está trabajando: la Versión 4
está estable mientras que la Versión 5 se encuentra en fase de
experimentación. La primera línea de código que se coloca antes de la
etiqueta html es:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
http://www.w3.org/TR/html4/strict.dtd>
OTRAS ETIQUETAS FUNDAMENTALES
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>

Juego de caracteres utilizado en cada página Web: que permite
la visualización de caracteres alfanuméricos y especiales.
Las líneas de código posibles luego de <head> son:
• <meta name="tipo_contenido" content="text/html;" http-
equiv="content-type" charset="utf-8">
• <meta http-equiv="content-type" content="text/html;
charset=iso-8859-1“>
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<meta name="tipo_contenido" content="text/html;" http-
equiv="content-type" charset="utf-8">
</HEAD>
<BODY>
</BODY>
</HTML>
OTRAS ETIQUETAS FUNDAMENTALES

FIN DE PRESENTACIÓN…
Elaborado por Prof. Viviana M. Ponce
vmponce@unsl.edu.ar
CREATIVE COMMONS RECONOCIMIENTO-NOCOMERCIAL-
COMPARTIRIGUAL 3.0 UNPORTED LICENSE

Clase 5 lenguaje html

Más contenido relacionado

La actualidad más candente

Destacado

Similar a Clase 5 lenguaje html

Más de Viviana Mercedes Ponce

Último

Clase 5 lenguaje html