Curso HTML Basico

HTML es la Abreviatura de hipertext Markup Lenguaje o lenguaje de marcas de hipertexto.
Html es
el lenguaje con el que se escriben las páginas web.
¿Qué se puede hacer con este lenguaje?
Por ejemplo especificar las imágenes de la página, los textos o los gráficos. También se puede dar
formato a los textos (tipo, color y tamaño de la fuente).
Todos los archivos de las páginas web tienen extensión .html ó .htm. Las instrucciones (se llaman
tags o etiquetas) de este lenguaje siempre empiezan con el signo < y terminan con > (la instrucción
aparece entre estos dos símbolos). Las instrucciones <html> y </html> sirven para el principio y el
final del documento. Todas las ordenes, etiquetas o tags (es todo lo mismo) acaban con el mismo
nombre pero añadiendo la barra /.
El conjunto de instrucciones de un programa (código fuente), en este caso de una página web, se
puede ver prácticamente en cualquier página que visites en internet. Si abrimos una página,
debajo de la fachada de la página se esconden muchas instrucciones, que podrás ver si pinchas en
ver código fuente en el navegador. Para escribir un código fuente es suficiente un sencillo editor
de texto, como por ejemplo el de bloc de notas.
Para comprobar que lo escrito esta bien y lógicamente para ver la página necesitaras un
navegador, y para colgarla en la red tienes que disponer de conexión a internet, de espacio en un
servidor web, y del software necesario para enviarle los archivos (programa de transferencia de
archivos FTP).
Pero empecemos por crear nuestra primera web muy sencillita.
Para empezar abrimos el editor de textos, por ejemplo el notepad o cualquier otro que tengas. El
notepad es gratis y lo tienes en tu ordenador. Empecemos a escribir el código fuente: Ejemplo
Nº1
<html>
<head>
<title>Esta es mi página web</title>
</head>
<body>
¡Muy buenas! ¡Vamos hacer una página web!
</body>
</html>
OJO Guardalo como ejercicio.html Un vez guardado si pinchas en el icono dos veces abrirás el
archivo con el notepad. De esta forma puedes modificarlo.
Si quieres ver como se ve en el navegador tendrás que seleccionar el archivo (un solo click sobre
el) y después abrir con y selecciona el navegador con el que quieras abrirlo.
1
Vamos analizar un poco el programa. Entre la instrucción head está la cabecera de la página, en
ella se introduce información que normalmente no aparece al visualizarla (solo información para la
persona que trabaje con el programa) y también entre title se pone el nombre de la página que
luego aparecerá en la barra de título de la ventana del navegador.
El cuerpo de la página, es decir el texto que aparecerá en la página se pone con la orden body.
Ahora guarda el documento con extensión .html en el disco duro y ábrelo. Se visualizará lo que
hiciste en el navegador. Para modificarla sin que se abra el navegador, botón derecho abrir con,
bloc de notas o doble click sobre el archivo. El código da igual en mayúsculas que en minúsculas.
Otras etiquetas en html:
Br cuando quieras introducir un salto de línea (no hace falta /br)
p delimita un párrafo. Se ocupa de que los textos mas largos se dividan automáticamente (hace los
cambios de línea de un párrafo automáticamente).La longitud de la línea queda definida por el
ancho de la ventana.
H1 resalta titulares. El tamaño del titular se controla con el número (h3 la línea será mas pequeña.
Hay hasta el 6).
Hr nos pondrá una línea donde la pongamos que ocupará toda la página. No hace falta poner la
instrucción final (con barra /).Si va seguido de width =30% la línea ocupará el 30%. Si le sigue
size=10 especificamos el grosor. Ejemplo <hr size=10 width=50%>
Align= después del igual puede ir center para centrar, right para alinear a la parte derecha y left
para alinear a la izquierda. Ejemplo: alineará el párrafo centrándolo. <hr size=10
width=80% align=center>. Para el color de la línea font color=”green” (ver más adelante font)
 tamaño de letra. A mayor número mayor la letra.
Ul para empezar una lista de palabras. Cada palabra de la lista va con la órden li. Ejemplo:
<ul>
<li> manzanas
<li> platanos
</ul>
Con <li> haces que en cada palabra aparezca con una viñeta con apariencia de lista.
Hacer lo mismo pero poniendo <ol> en lugar de <li>. Con la orden ol en vez de ul aparecerá una
lista numerada.
 lo que se ponga entre las dos órdenes aparecerá subrayado.
<center> </center> texto centrado.
 texto en negrita.
 cursiva.
2
 subíndice. Ejemplo H2O resultado H2O. Con SUP sería superíndice.
Para tipo, tamaño y color de letra (también para las líneas) se empieza por font.
Con se modifica la fuente del texto que viene a continuación hasta la orden
. OJO Si no se pone esta última afectará a todo el texto hasta el final del documento.
Con se cambia el color. Se puede usar un alias para cada color . El alias suele ser el nombre del color pero en ingles (black, blue, green, red, white,
etc.) Con se modifica el tamaño de la letra.
<Bgcolor=”yellow”> pone el color amarillo.
Si lo ponemos dentro de body afectará al fondo de la pagina. <body bgcolor=”yellow”> pone la

página con fondo amarillo.
Si queremos poner un fondo de una imagen de archivo se pone background=”archivo.jpg” dentro

de body. El archivo de la imagen debe estar en la misma carpeta del archivo html.
Imágenes en html (solo .jpg y .gif)
Antes de insertar las imágenes debemos de tenerlas guardadas en la misma carpeta donde esta
el resto de la página (es lo más cómodo).
La etiqueta es:
<img src=”imagen1.jpg”>
el img indica al navegador que se cargará una imagen, y src=” “ determina donde se encuentra la
imagen. Si no se especifica nada más que el nombre del archivo considera que está en la misma
carpeta que el resto. Para que el texto recorra las imágenes (alrededor de la imagen), en vez de
dejar espacios en blanco a su lado, pon detrás del nombre del archivo align=right. En este caso el
texto queda demasiado pegado a la imagen, si pones hspace=7 lo separa de la imagen (el número
marca la distancia, mayor número más distancia).
Todo junto quedará:
<img src=”imagen1.jpg” align=left hspace=7>. Inserta una imagen en la página.
También se puede modificar el tamaño de la imagen. Se pone detrás del nombre del archivo
height=150 determinando así la altura. La anchura la pone el para que quede proporcionada.
Suponemos width=120 se especifica el ancho (el alto automáticamente).
Para hacer que la imagen cambie cuando pasamos el cursor del ratón sobre ella, se tiene que
hacer un rollovers.
Dentro de la instrucción de la imagen y a continuación de la ultima orden debemos de escribir
3
onmouseover= “this.src=‘nuevoarchivo.jpg’” para decirle la nueva imagen. Fíjate doble comilla
para todo y comilla simple para el nombre de la imagen. Para sacar la comilla simple desde el
teclado pulsa la tecla de la interrogación ? pero sin apretar la tecla mayúsculas. Además debes
poner
onmouseout="this.src='una.jpg'" para decirle la imagen que estará en reposo. Un Ejemplo:
<img src="una.jpg" onmouseover="this.src='dos.jpg' " onmouseout="this.src='una.jpg' "

height=100 align=left hspace=34>
Realiza un cambio en la imagen de la página para que consigamos este efecto.
Hipervínculos en html (enlaces a otros sitios)
Los hipervínculos suelen mostrarse en azul, pero como a veces el color del fondo no deja que se
vea bien se puede modificar con link=color, del mismo modo si ponemos alink=color tiene como
efecto que al hacer clic en el, aparezca en el, el color puesto, y si ponemos vlink=color le indica el
color con el que se queda después de a ver pinchado en el link para saber que ya hemos pulsado y
hemos ido a ese sitio.
Todas estas órdenes se ponen dentro de body para que afecte a todos los links de nuestra
página.
La etiqueta para poner un link es <a> y la dirección se pone detrás de href.= y entre comillas.
Entre esto y </a> se pone el texto que aparecerá en el link. Practica y coloca este link en la página
<a href=http://www.areatecnologia.com>pagina de tecnologia</a>.
Pon las ordenes de colores del link dentro de body y comprueba los colores.
Si quieres centrar el link pon antes de <a> la etiqueta <center>
Si queremos poner un vínculo a la página archivo.html de nuestro sitio web (ojo la página deberá
estar en la misma carpeta que la que tiene el vínculo), sería:
<a href="archivo.htm">Texto de referencia</a>
Esto es para hacer un vinculo a otra página dentro de nuestro sitio web (deben de estar todas las
páginas en la misma carpeta).
Vamos hacer una web completa:
Ejemplo Nº2:
<html>
<head>
<title>Esta es mi página web</title>
4
</head>
<body bgcolor="green">

¡Muy buenas! ¡ Vamos hacer una página web!</body>

<hr size=10 width=80% align=center font color="red">
 
Estamo empezando a realizar nuestra página web por eso practicamos para poner color de
fondo, cambiar el tamaño de la letra y
poner líneas divisorias
Este párrafo lo alineamos a la derecha
 Este está alineado a la izquierda y letra courier
 Y este está centrado
 
Vamos a poner viñetas y en negrita

<ul>
<li> primero de la lista
<li> segundo de la lista
</ul>
 Estas letras son diferentes y de color rojo
</body>
</html>
Ves que facil es hacer una página web.
Insertar música en la página con html
Se recomienda solo archivos .mid (MIDI de menos de 60KB mejor. Tambien se pueden meter
WAVE y MP3). Imaginemos que queremos insertar el archivo imagine.mid:
<BGSOUND SRC="imagine.mid" LOOP=INFINITE>
Esta etiqueta se puede poner en cualquier sitio pero es preferible dentro de body.
Loop le dice que el archivo se repita indefinidamente.
OJO el archivo debe estar en el mismo sitio que la página, en caso de no ser así hay que
especificar la ruta completa.

Curso HTML Basico

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Curso HTML Basico

Cargado por

Copyright:

Formatos disponibles

HTML es la Abreviatura de hipertext Markup Lenguaje o lenguaje de marcas de hipertexto.

¿Qué se puede hacer con este lenguaje?

Pero empecemos por crear nuestra primera web muy sencillita.

Otras etiquetas en html:

Br cuando quieras introducir un salto de línea (no hace falta /br)

<center> </center> texto centrado.

<b> </b> texto en negrita.

<i> </i> cursiva.

<Bgcolor=”yellow”> pone el color amarillo.

Si lo ponemos dentro de body afectará al fondo de la pagina. <body bgcolor=”yellow”> pone la

Si queremos poner un fondo de una imagen de archivo se pone background=”archivo.jpg” dentro

Imágenes en html (solo .jpg y .gif)

Todo junto quedará:

<img src=”imagen1.jpg” align=left hspace=7>. Inserta una imagen en la página.

Dentro de la instrucción de la imagen y a continuación de la ultima orden debemos de escribir

onmouseout="this.src='una.jpg'" para decirle la imagen que estará en reposo. Un Ejemplo:

<img src="una.jpg" onmouseover="this.src='dos.jpg' " onmouseout="this.src='una.jpg' "

Realiza un cambio en la imagen de la página para que consigamos este efecto.

Hipervínculos en html (enlaces a otros sitios)

<a href=http://www.areatecnologia.com>pagina de tecnologia</a>.

Si quieres centrar el link pon antes de <a> la etiqueta <center>

<a href="archivo.htm">Texto de referencia</a>

Vamos hacer una web completa:

Ves que facil es hacer una página web.

Insertar música en la página con html

<BGSOUND SRC="imagine.mid" LOOP=INFINITE>

Loop le dice que el archivo se repita indefinidamente.

También podría gustarte