Taller HTML Basico v1.5

Escuela Colombiana de Carreras Industriales
Mayo de 2016
Fundamentos de Informtica
Diseado por Ing. Javier Vsquez
V1.5
Taller HTML Bsico

Observaciones: Con este taller paso a paso conoceremos las
herramientas bsicas para crear una pgina web en lenguaje
HTML, y adems nos servir para reconocer algunas de las
etiquetas ms relevantes usadas en este lenguaje.
Estructura de una pgina
<html>
<head>
</head>
<body>
</body>
</html>
NOTA: Antes de empezar es necesario crear una carpeta
en el escritorio, en esa carpeta meteremos todo lo que
hagamos de la pgina web.
1.- Colocar un titulo a la pgina web y visualizar en el
navegador
Para colocar un titulo a la pagina web solo es necesario escribir
entre las etiquetas <head> </head> otra etiqueta que
llamaremos <title> </title> y dentro de las mismas el nombre
de la pagina web.
Ejemplo: Vamos a llamar a nuestra pgina web mi web.
El cdigo seria el siguiente:
<html>
<head>
<title> mi web </title>

Mayo de 2016
V1.5
</head>
<body>
</body>
</html>
Este cdigo como ya sabemos lo escribimos en el bloc de notas
que
se
encuentra
en
inicio>todos
los
programas>accesorios>bloc de notas, despus de copiar
cuidadosamente el cdigo, le damos guardar como, y el nombre
siempre ser index.html esto debido a que es la pagina principal.
Despus lo guardamos en la carpeta que creamos al comienzo
en el escritorio, luego de guardado lo ejecutamos y
evidenciamos que se cambi el nombre en la pestaa de la
pagina web.
Hacer captura de pantalla del resultado y pegarlo en el
apartado de evidencias que corresponde a la ltima hoja
de este taller.
2.- Establecer color de fondo de la pgina web
A travs de la etiqueta <body> se puede establecer el color o el
fondo de la pgina web.
El color de fondo se establece mediante el atributo bgcolor al
que es posible asignarle un color representado a travs de su
nombre o a travs de un cdigo que representa un color.
Ejemplo: Vamos a hacer que la pagina web tenga un color azul
de fondo
<html>
<head>
</head>
<body bgcolor=#0000FF>
</body>

Mayo de 2016
V1.5
</html>
O tambin se puede escribir:
<html>
<head>
</head>
<body bgcolor=blue>
</body>
</html>
Muchas veces no queremos el color puro si no con algn
degradado o una componente de otro color, para esto usamos la
tabla de colores que esta a continuacin.

Mayo de 2016
V1.5
La evidencia para este numeral ser adicionar un fondo verde.

La idea es que no sea un verde puro. Se hace captura de
pantalla y se coloca en el apartado de evidencias.
3.- Establecer una imagen de fondo

Para establecer una imagen de fondo se utiliza el atributo
background indicando la ruta de la imagen. Es importante
aclarar que la imagen debe estar descargada y guardada en la
carpeta que se creo en el escritorio, ya que si no es as, el
navegador jams encontrar la imagen.

Mayo de 2016
V1.5
Para insertar una imagen de fondo se debe utilizar la etiqueta

<body background="nombre del archivo con extension ">, por
ejemplo para insertar una imagen de fondo que se llama paisaje,
la etiqueta debe ser <body background= paisaje.jpg>
En este numeral la evidencia ser insertar una imagen de fondo
de cualquier tamao y hacer su respectiva captura de pantalla.
4.- Insertar un ttulo en el cuerpo de la pgina Web
Para insertar los ttulos de cualquier pgina web es necesario
conocer la etiqueta respectiva y tener en cuenta que entre ms
grande es el nmero que acompaa la etiqueta, ms pequeo
ser el ttulo, con esto sabremos que el nmero 1 nos dar el
ttulo ms grande, para este caso la etiqueta sera <H1>.
Otra caracterstica importante de los ttulos en una pgina web,
es que tenemos que saber si va centrado (center), al costado
derecho (right), o al costado izquierdo (left), aunque
generalmente el ttulo principal va centrado, para realizar esto
debemos decirle align= center.
Por ejemplo, para establecer el ttulo Bienvenidos y que su
posicin sea centrada, el cdigo seria el siguiente:
<html>
<head>
</head>
<body>
<H1 align="right"> Bienvenidos </H1>
</body>
</html>
La evidencia en este numeral es insertar un ttulo centrado ms
un subttulo alineado al costado izquierdo.
5.- Insertar un prrafo

Mayo de 2016
V1.5
Generalmente los textos de una pgina deben agruparse en

prrafos, para que esto sea posible en html el texto debe
insertarse entre las etiquetas <p> y </p>, tambin es posible
cambiar la alineacin de cada uno de los prrafos, para hacer
esto se debe modificar el atributo align, cuyos valores pueden
ser left, rigth, center, justify. Por ejemplo para insertar el texto
alineado a la izquierda: en este espacio encontrar las
diferentes herramientas para crear su sitio web, el cdigo
debera ser:
<html>
<head>
</head>
<body>
<P align="right"> en este espacio encontrar las diferentes
herramientas para crear su sitio web </P>
</body>
</html>
Como evidencia, debe realizar un prrafo de mnimo 10 lneas y
justificarlo.

Mayo de 2016
V1.5
EVIDENCIAS
Nota: En este espacio se evidenciaran las actividades que
se han realizado en el taller, lo nico que se debe hacer es
hacer una captura de pantalla y pegarlo organizadamente
segn se solicite.
1.- Titulo de la pgina web editada
2.-Color de fondo de la pgina web
3.- Imagen de fondo de la Pgina web

Mayo de 2016
V1.5
4.- Titulo de la Pgina Web
5.- Prrafos de la Pgina Web

Mayo de 2016
V1.5

Taller HTML Basico v1.5

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Taller HTML Basico v1.5

Uploaded by

Copyright:

Available Formats

Escuela Colombiana de Carreras Industriales

Taller HTML Bsico

Escuela Colombiana de Carreras Industriales

Escuela Colombiana de Carreras Industriales

Escuela Colombiana de Carreras Industriales

La evidencia para este numeral ser adicionar un fondo verde.

3.- Establecer una imagen de fondo

Escuela Colombiana de Carreras Industriales

Para insertar una imagen de fondo se debe utilizar la etiqueta

5.- Insertar un prrafo

Escuela Colombiana de Carreras Industriales

Generalmente los textos de una pgina deben agruparse en

Escuela Colombiana de Carreras Industriales

2.-Color de fondo de la pgina web

3.- Imagen de fondo de la Pgina web

Escuela Colombiana de Carreras Industriales

4.- Titulo de la Pgina Web

5.- Prrafos de la Pgina Web

Escuela Colombiana de Carreras Industriales

You might also like