HTML Desde Cero Crear Web Con Etiquetas y Códigos

Inicio
 Electricidad
 Electronica
 Informatica
 Mecanismos
 Estructuras
 Dibujo Tecnico
 Materiales
 Neumatica Hidraulica
 Ejercicios
APRENDE A CREAR UNA WEB

DESDE CERO EN HTML
COMPARTE HTML
Twittear
Seguir a @TecnologiaArea
Comparte www.areatecnologia.com
OTRAS WEBS INTERESANTES
Tecnologia Industrial
Tecnologias
Ciencias
Blog de Tecnologia
HTML es la Abreviatura
de hipertext Markup
Lenguaje o lenguaje de
marcas de hipertexto. Html
es un lenguaje con el que
se diseñan las páginas
web.
¿Qué se puede hacer

con este lenguaje?
Por ejemplo determinar

en que lugar del
documento se deben de
ver las imágenes, 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.
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.
 
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.jp
g” 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
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='un
a.jpg'" para decirle la
imagen que estará en
reposo. Un Ejemplo:
<img src="una.jpg"
onmouseover="this.src='d
os.jpg' "
onmouseout="this.src='un
a.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.areatecn
ologia.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>
</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.
Si te ha gustado haz click

en Me Gusta, Gracias:
Twittear Seguir a
@TecnologiaArea
© Se permite la total o
parcial reproducción del
contenido, siempre y
cuando se reconozca y se
enlace a este artículo como
la fuente de información
utilizada.
TAMBIEN TE PUEDE INTERESAR
Qué es Informática
Informatica Básica
Lenguajes de Programacion
Redes Informaticas
Fundamentos de Programación
Nuevas Tecnologias y Productos Tecnologicos
Noticias Sobre Tecnologia

HTML Desde Cero Crear Web Con Etiquetas y Códigos

Cargado por

Información del documento

Título original

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

HTML Desde Cero Crear Web Con Etiquetas y Códigos

Cargado por

Copyright:

Formatos disponibles

Inicio

APRENDE A CREAR UNA WEB

OTRAS WEBS INTERESANTES

¿Qué se puede hacer

Por ejemplo determinar

Todos los archivos de las

Para comprobar que lo

Pero empecemos por

Para empezar abrimos el

OJO Guardalo como

Si quieres ver como se

Vamos analizar un poco

Hr nos pondrá una línea

Align= después del igual

Ul para empezar una lista

Con <li> haces que en

Hacer lo mismo pero

<u> </u> lo que se

<i> </i> cursiva.

Para tipo, tamaño y color

Con <font face

Antes de insertar las

Para hacer que la

Los hipervínculos suelen

Todas estas órdenes

La etiqueta para poner

Pon las ordenes de

Si quieres centrar el link

Esto es para hacer un

Vamos hacer una web

Ves que facil es hacer

Esta etiqueta se puede

Loop le dice que el

OJO el archivo debe

Si te ha gustado haz click

TAMBIEN TE PUEDE INTERESAR

Nuevas Tecnologias y Productos Tecnologicos

Noticias Sobre Tecnologia

También podría gustarte