Scribd
Cargar
25 vistas

HTML 1

El documento proporciona una introducción a los elementos básicos de HTML para construir una página web. Explica que toda página HTML debe comenzar con la etiqueta <html> y finalizar con </html>, y que dentro de esta debe incluir una cabecera <head> y un cuerpo <body>. Además, detalla algunas etiquetas básicas para dar formato al texto como <b>, <i>, <u> y <font>, y ejercicios prácticos para aplicar los conocimientos.

Cargado por

Stefano Andres Herrera Arvay
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
25 vistas

HTML 1

El documento proporciona una introducción a los elementos básicos de HTML para construir una página web. Explica que toda página HTML debe comenzar con la etiqueta <html> y finalizar con </html>, y que dentro de esta debe incluir una cabecera <head> y un cuerpo <body>. Además, detalla algunas etiquetas básicas para dar formato al texto como <b>, <i>, <u> y <font>, y ejercicios prácticos para aplicar los conocimientos.

Cargado por

Stefano Andres Herrera Arvay
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/ 51

HTML

Introducción
 Los páginas que podemos ver con los
navegadores son en su mayoría paginas
HTML.
 Estas páginas no son mas que texto al que se

le han añadido algunas etiquetas.


 Gracias a estas etiquetas el navegador sabe

que debe hacer para presentar estas páginas.


 Estas etiquetas tiene atributos que le indican

como hacer esta tarea.


ELEMENTOS BASICOS PARA
CONSTRUIR UNA PAGINA HTML
La página html mínima
 Toda página consta de etiquetas: < >
 Los símbolos < y > se usan para distinguir

las etiquetas del resto del texto.


 Todo documento o página html comienza

con <html> y termina con </html>.


 Ej:

◦ <html>Aquí comienza la página


◦ </html>Aquí finaliza la página
Ejercicio 1
 Abra un editor de texto, como el Notepad, y
escriba dichas etiquetas en el archivo
“primera página html”.
Cabecera y cuerpo
 Toda página tiene una cabecera
 Toda pagina tiene un cuerpo
 Ej:
 <html>
 <head>
 </head>
 <body>
 </body>
 </html>
Titulo
 Se pone en la cabecera con las etiquetas
 <title></title>.
 Se muestra en el marco del navegaor
 Ej:
 <html>
 <head>
 <title>Mi página web</title>
 <head>
 …
Ejercicio 2
 Añada estas etiquetas (head, title, body) a la
página anterior y vea como queda.
 Fíjese donde queda el titulo y donde se ve el

cuerpo de la página.
Formato del texto
 Negrita(bold): <b></b>
 Italica(italic): <i></i>
 Subrayado(underline): <u></u>
 Texto destacado(emphasis): <em></em>
 Texto muy destacado(strong emphasis):
 <strong></strong>
 subindice: <sub></sub>
 Superindice: <sup></sup>
Formato del texto
 Estas etiquetas se pueden combinar. Esto se
hace anidándolas.
 <b><i><u>texto en negrita, italica y

subrayado</u></i></b>
 Se deben cerrarlas etiquetas en orden inverso

a como se abren
Ejercicio 3
 Escriba una página a partir de la anterior,
cuyo texto sea:
 El texto puede estar en negrita, italica o

subrayado, incluso en negrita, italica o


subrayado.
Formato del texto
 Para cambiar el aspecto del texto se emplea
 <font> y su cierre </font>
 A diferencia de las anteriores emplea

atributos.
 Ej:
 El texto puede cambiar de <font

size=“6”>tamaño</font>
 Tamaños: 1 muy pequeño a 7, muy grande
Formato del texto
 Face: cambia el tipo de letra
 Ej:
 El texto puede cambiar de <font

face=“impact”>tipo de letra</font>
 Color: cambia el color de letra
 Ej:
 El texto puede cambiar de <font

color=“yellow”>color</font>
Ejercicio 4
 Cargue en un archivo html los distintos
ejemplos de la etiqueta <FONT> y vea su
aspecto. Ahora escriba un texto de dos o tres
lineas en, la primera mitad en Arial, la
segunda en Courier New. Ponga tres
tamaños: 2, 4 y 6. incluya una palabra de
tamaño 2 de color rojo, en italica y otra de
tamaño 6 en verde, en italica y con
subrayado.
Formato del texto
 Salto de línea.
 El navegador cambia de línea solo cuando se

le acaba la pantalla, no cuando vea un cambio


de línea en el texto.
 La única forma de forzar un cambio de línea

es mediante la etiqueta:<br>
 Ej:
 <body>
 Este texto<br>
 <br>
Formato del texto
 Ej:
 <body>
 Este texto<br>
 <br>
 <br>
 Estará en<br>
 Varias lineas
 </body>
Formato del texto
 Párrafo
 Para evitar de tener que poner estos saltos de

línea se utiliza la etiqueta de párrafo:


<p></p>.
 Todo lo que esté entre estas etiquetas el

navegador lo tomará como párrafo y lo


presentará como tal.
Formato del texto
 Un párrafo puede estar alineado, atributo
ALIGN, a la izquierda (left), derecha(right),
centro(center) o justificado(justify).
 Ej:
 <body>
 <p align=“left”>A la izquierda</p>
 <p align=“right”>A la derecha</p>
 <p align=“center”>Al centro</p>
 <p align=“justify”>justificado</p>
Formato del texto
 Titulos o cabeceras
 Se emplean para ello las etiquetas

<Hx></Hx>, donde x es el nivel.


 Los niveles de importancia van desde el 1 al

6.
 En el medio de las etiquetas se define el

texto.
Formato del texto
 Ej:
 <body>
 <h1>Esta es una cabecera de nivel 1</h1>
 <h2>Esta es una cabecera de nivel 2</h2>
 <h3>Esta es una cabecera de nivel 3</h3>
 <h4>Esta es una cabecera de nivel 1</h4>
 <h5>Esta es una cabecera de nivel 5</h5>
 <h6>Esta es una cabecera de nivel 6</h6>
 </body>
Formato del texto
 Estas cabeceras se pueden alinear
 Mediante el atributo Align pueden estar

alineadas a la derecha, izquierda o al centro.


 Ej:
 <h3 align=“left”>Esta es una cabecera

alineada a la izquierda</h3>
Formato del texto
 Líneas horizontales
 Se usan para dividir la secciones identificadas

con las cabeceras


 Se hacen con la etiqueta <HR>
 Se puede definir el ancho con el atributo

WIDTH.
 Lo mas normal es expresar el ancho de la

línea en porcentaje respecto del ancho de la


página.
Formato del texto
 Ej:
 <body>
 <hr width=“20%”>
 <hr width=“50%”>
 <hr width=“100%”>
 </body>
Formato del texto
 Una línea se puede alinear
 Ej:
 <body>
 <hr width=“20%” align=“left”>
 <hr width=“50%” align=“right”>
 <hr width=“100%” align=“center”>
 </body>
Formato del texto
 También se puede modificar el grosor de la lí
 nea con el atributo SIZE.
 Ej:
 <body>
 <hr width=“60%” size=“1”>
 <hr width=“60%” size=“8”>
 <hr width=“60%” size=“15”>
 </body>
Fondos
 El fondo puede cambiarse de color
 Se empela el atributo: bgcolor de la etiqueta

Body.

 El color va expresado en formato RGB


Fondos
 Formato RGB:
 El intervalo entre dos dígitos hexadecimales

indica un color.
 Ej: 0000FF
 Los dos primeros indican el color rojo
 Los dos segundos indican el color verde
 Los dos últimos indican el color azul
 En el ejemplo 00 rojo

 00 verde
 FF azul
Fondos
 Cada numero puede ir de 0 a 255
 En hexadecimal de 0 a FF
 Un cero significa nada de ese color
 255 significa todo de ese color
 Así, en el ejemplo anterior #0000FF es azul

intenso y puro.
 Aquí se puede ver una lista de los colores
 http://www.mxstudio.com.br/Conteudos/

Dreamweaver/Cores.htm
Fondos
 Para poner una imagen de fondo se utiliza el
atributo: background de la ertiqueta Body.

 Ej:
 <body background=“aguas.gif”>
 Pagina con fondo
 </body>
Fondos
 Puede dejarse fijo el fondo y que el texto se
desplace sobre el fondo.
 Se emplea el atributo bgproperties=“Fixed”
 Ej:
 <body background=“imagen.gif”

bgproperties=“fixed”>
 Pagina con fondo fijo
 </body>
Ejercicio 5
 Pruebe el ejemplo anterior, para lo cual
necesitará una imagen que tenga guardada.
 Vea las diferencias entre un comportamiento

y otro.
Imágenes
 Para incorporar imágenes se utiliza la
etiqueta <IMG>
 El atributo SRC indica que imagen se quiere

cargar y donde se encuentra

 <body>

 <img src=“imágenes/gato.gif”
Imágenes
 Se suele indicar el tamaño de la figura
 Esto le permite saber al navegador:
◦ Cuanto va a ocupar
◦ Permite redefinir cuanto va a ocupar la imagen
modificando el tamaño que originalmente tenia

◦ Para ello se emplean los atributos: WIDTH y HEIGHT


◦ Ej:
◦ <body>
◦ <img src=“imágenes/gato.gif” width=“120”
height=“90”>
◦ </body>
Imágenes
 El atributo ALT se usa para poder mostrar un
texto alternativo si no se muestra la imagen
 Ej:

◦ <body>
◦ <img src=“imágenes/gato.gif” width=“120”
height=“90” alt=“gato”>
◦ </body>
 El alto y ancho generalmente están en pixeles
Imágenes
 Se usan basicamente dos formatos de
imágenes:

◦ GIF
◦ JPG

◦ Estos formatos comprimen las imágenes para


reducir su tamaño y así asegurar una transferencia
mas rápida por la red.
Imágenes
 Formato GIF

 El formato GIF usa 256 colores y se emplea


sobretodo con imágenes pequeñas como
iconos. No se suele usar con fotos porque da
más calidad el formato JPG.
Imágenes
 Formato JPG

 El formato JPG usa 16.7 millones de colores,


por lo que se emplea con imágenes de alta
resolución.
 Todas las fotos de buena calidad usan este

formato.
Imágenes
 Se pueden alinear al igual que los párrafos y
cabeceras, mediante el atributo ALIGN
 Se alinea respecto al texto que la rodea, no

respecto a la página donde está.


 Se puede alinear

◦ A la izquierda(left)
◦ A la derecha(right)
◦ Al centro(center)
◦ Arriba(top)
◦ Abajo(bottom)
◦ Al medio(middle)
Ejercicio 6
 Cargue una imagen, especifique el alto y el
ancho de la misma, y modifique estos valores
para ver como cambia la figura.
 Añádale el atributo ALT, active la opción de

no cargar imágenes en el navegador y vea


como queda.
 Ponga algo de texto alrededor de la imagen y

pruebe los distintos valores del atributo


ALIGN. Por ultimo a partir de la imagen de un
punto construya líneas de distintos grosores.
Enlaces
 Se basan en la etiqueta <a> </a>

 El atributo mas importante es href, que es el


destino del enlace, es decir el URL.

 Se puede poner cualquier URL válida, esto es,


dentro de la misma pagina, en la misma
maquina o en otra máquina.
Enlaces
 Rutas

 Existen dos tipos de rutas

◦ Rutas absolutas

◦ Rutas relativas
Enlaces
 Rutas absolutas

◦ Las rutas absolutas son el camino que ha de seguir el


navegador para encontrar el archivo, definidas desde el
principio, como por ejemplo:
◦ http://www.midominio.com/carpeta/archivo.ext
◦ Esta es la ruta absoluta para un archivo llamado
archivo.ext que está dentro de la carpeta, estando ésta
directamente dentro de mi dominio.
◦ Las rutas absolutas se suelen utilizar nada más para
enlazar a archivos que están fuera del dominio de nuestra
página web. De hecho es la única manera de hacerlo.
Como inconveniente... hay que escribir demasiado
(http:www.dominio.....).
Enlaces
 Rutas relativas

 Las rutas relativas son el camino a seguir DESDE la


página HASTA el archivo. En este caso no hay que
escribir http://www.midominio....,sino solo indicar
los pasos que hay que dar para llegar desde la página
en cuestión, hasta el archivo correspondiente.
Enlaces

 En general los enlaces tienen la siguiente


estructura
 <A HREF="URL"> Texto del enlace</A>
Enlaces
 Enlace a otro lugar del mismo documento
 En este caso la URL se sustituye por un marcador en la
misma página. El marcador puede ser texto colocado en
el lugar al que queremos saltar. No importa lo que sea
ya que no se verá.
Veamos un ejemplo para saltar al inicio de esta página.
Escribiríamos en el lugar desde el que queremos saltar:
 <A HREF="#inicio"> Ir al Inicio</A>

Y en el sitio exacto adonde queremos saltar, debemos


poner la siguiente etiqueta:

<A NAME="inicio"> </A>


Enlaces
 Enlace a otra página local
 En este caso la URL se dará de forma relativa (igual
que para poner un fondo a la página). Por ejemplo si
tenemos dos páginas en el mismo directorio
pagina1.htm y pagina2.htm y queremos poner un
enlace desde la pagina1.htm a la pagina2.htm
debemos escribir
 <a href="pagina2.htm">Ir a pagina2</a>
Enlaces
 Enlace a una dirección de Internet
 Ahora la URL debe darse de forma absoluta, tal como
la ves en la ventana de dirección del navegador, es
decir:
 <A
HREF="http://centros4.pntic.mec.es/ies.de.cistierna"
>IES Cistierna</A>
Enlaces
 Enlaces usando imágenes
 Para que una imagen sea un enlace hay que colocarla
en el lugar del texto del enlace.
 Ej:
 <A HREF=" #inicio"><img
src="gifs/imagen.gif"></A>
En este caso es importante no olvidar el
atributo ALT
 Para suprimir la linea que parece alrededdor

de la imágen se debe poner el atributo


BORDER a cero.
Ejercicio 7
 Haga un enlace de texto a Microsoft, salvelo y
vea su aspecto en el navegador, haga clic en
el enlace para ver su funcionamiento.
 Sustituya el texto por una imagen, luego

suprima la línea que aparece alrededor de la


imagen y vea como queda.
 Ahora haga que apunte a un archivo html

local, que este en su máquina.


Enlaces
 Enlace con una dirección de correo
 Este es un enlace un poco diferente, veamos

un ejemplo
 <A HREF="mailto: [email protected]">

[email protected] </A>
 que se ve como [email protected] y que

al pulsarlo se abre el programa de correo que


tenga configurado, con la dirección en el
campo correspondiente.
Enlaces
 Si se desea abrir el enlace en una nueva
ventana se utiliza el atributo TARGET.
 La opción por defecto es la ventana actual:
 (target=“_self”)
 Nueva ventana: target=“_blank”

También podría gustarte