ELEMENTOS

BÁSICOS EN EL
DESARROLLO DE
PÁGINAS WEB
LIC. MIGDALIA MARCELA GARCÍA ALAMILLA
ELEMENTOS
TÍTULOS Y PÁRRAFOS

IMÁGENES

HIPERVÍNCULOS – ENLACES

VIDEO Y SONIDO
TÍTULOS Y PÁRRAFOS
El código HTML tiene varias etiquetas para diferencias el contenido de texto en secciones.
Párrafos
◦ <p> Texto del párrafo </p>

Títulos

Hay hasta 6 etiquetas en HTML para definir títulos y secciones. Todas ellas llevan por defecto el texto en
negritas y son: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. La etiqueta <h1> es la de mayor importancia y por
tanto se utiliza para titulares de la página. La importancia del resto de las etiquetas es descendente.

<h1> Texto de título nivel 1 </h1>

…………
<h6> Texto de título nivel </h6>
IMÁGENES
Para ocupar una imagen en una página HTML debemos guardarla previamente en la carpeta raíz
de nuestra Web o bien tener localizada la URL o dirección de la imagen en otra página web.
Para incluir imágenes usaremos la etiqueta <img> que llevará obligatoriamente el atributo
src=“URL de la imagen”.
Otro atributo recomendado es el atributo alt=“texto”.Suele llevar un texto corto que aparecerá
en el caso de que el navegador no pueda cargar la imagen.

◦ <img src=“URL de la imagen” alt=“texto_explicativo”/>

 ELEMENTO ATRIBUTO SINTAXIS

TAMAÑO DE LA IMAGEN Height (alto) <img src=“imagenes/dibujo.gif”

Width (ancho) alt=“dibujo 1” width=“140”
height=“100”/>

POSICIÓN DE LA IMAGEN Alineación definida por su <p align=“center”><img src=“…”

elemento contenedor <p> alt=“…”></p>

ALINEACIÓN DE IMÁGENES Align=“left” <img src=“objetos/Internet.jpg”

Align=“right” alt=“internet” align=“left”/>
<img src=“objetos/Internet.jpg”
alt=“internet” align=“right”/>

BORDES Y MÁRGENES Border <img src=“objetos/Internet.jpg”

Vspace alt=“internet” width=“200”
hspace align=“left” border=“10”
vspace=“20” hspace=“10”/>
HIPERVÍNCULOS -ENLACES
Los enlaces permiten conectar entre sí, las páginas de un sitio web, así como los elementos
dentro de la misma u otros sitios web. Para enlaces se utiliza la etiqueta <a> la cual lleva en la
mayoría de los casos el atributo href=“…” en el cual llevará el destino del enlace.

<a href=“destino”> Texto del enlace </a>

 ELEMENTO CONCEPTO SINTAXIS

ENLACES EXTERNOS Los dirigidos hacia páginas de otros <a href=http://google.com> Enlace a google</a>
sitios web.

ENLACE LOCAL Son los que nos llevan a otra página del
mismo sitio web que estamos
visualizando.
ENLACES INTERNOS Son los que se dirigen a otras partes
dentro de la misma página.
<a href=“http://ordenador/directorio/archivo>
Texto del enlace</a>
<a href=“#apart3”>Ir al apartado 3</a>
<a name=“apart3”>Apartado 3</a>

ENLACES CON Permiten crear un mensaje de correo <a href=“mailto:mi_correo@servidor.com”>Texto

DIRECCIONES DE dirigido a una dirección. del enlace</a>
CORREO
ENLACE A ARCHIVOS Sirve para apuntar el enlace a un archivo <a href=“../objetos/html.jpg”>Dibujo2</a>
cualquiera, que no sea una página web.

ABRIR UN ENLACE EN Abrir una pestaña nueva para el enlace y <a href=“http://www.yahoo.es” target=“_blank>
UNA PESTAÑA APARTE no sobre la que estoy utilizando. (target) Enlace a Yahoo</a>
VIDEO Y SONIDO
Los navegadores y lenguaje HTML en principio no estaban diseñados para reproducir archivos de
audio y video, sin embargo en la actualidad existen varios formatos de audio y video habituales
en las páginas web.
Se pueden usar una serie de etiquetas, aunque algunas no funcionan en todos los navegadores.

<video src="videos/pelicula.mp4" controls></video>

 ETIQUETA CONCEPTO
A La etiqueta <a> sirve para insertar
audio o video poniendo la ruta del
archivo de audio o video, se ayuda
de la etiqueta iframe que crea una
nueva ventana.
BGSOUND Sirve para insertar sonido de fondo
en las páginas. Su principal
inconveniente es que solo trabaja
con IE
IMG La etiqueta para insertar imágenes
también funciona aunque solo con
IE y no con todos los tipos de
archivos.
EMBED Sirve para insertar audio y video en
la página web.
OBJECT Etiqueta general capaz de incrustar
en el navegador todo tipo de
ficheros.
SINTAXIS
<iframe src=“#” width=“300” height=“225”
name=“video”></iframe>
<a href=“objetos/misojos.swf” target=“video”> Ver
video</a>
<a href=“objetos/pantallablanco.html” target=“video”>
Ver video</a>
<bgsound src=“ruta_fichero” loop=“numero”
volume=“v”></bgsound>
<img dynsrc=“ruta_archivo” loop=“n”
start=“fileopen/mouseover”></img>
<embed src=“ruta_archivo” loop=“numero/true/false”
type=“tipo_archivo”></embed>
<object data=“ruta_archivo” type=“tipo_archivo”
autostart=“true/false”>
<param name=“FileName” value=“ruta_archivo”>
</object>