INTRODUCCIÓN
HTML: HYPER TEXT MARKUP LANGUAGE. - Es un lenguaje diseñado para realizar paginas web, es su parte básica es muy
sencillo aprenderlo aunque en la actualidad existen herramientas que nos ayudan
a dar una mejor presentación a la creación de nuestras paginas.
Para empezar a programar en HTML solo necesitaremos algún
editor de texto, un simple notepad, o el block de notas y el Navegador que
tengan en su computador.
Un HTML se
divide en dos grandes secciones:
HEAD
(cabeza)
BODY
(cuerpo)
Casi todas
las órdenes o directivas que existen en este lenguaje comienzan con < > y
terminan con </>. También encontraremos TAGS que no necesitan cerrarse
con </> En el head, colocaremos todo lo que nuestra página HTML necesite
para definir por ejemplo el Título del HTML.
Ejemplo:
<html>
<head>
<title> Mi primer html </title>
</head>
<body>
</body>
</html>
<head>
<title> Mi primer html </title>
</head>
<body>
</body>
</html>
Explicación de cada línea de código.
<HTML> (abro indicando el lenguaje de programación)
<head> (comienza la cabecera del HTML)
<title> Mi primer HTML </title> (aquí, coloco el título)
</head> (cierro la cabecera del HTML para darle paso al body del htm)
<body> (abro el cuerpo, acá colocamos todo lo que queremos que se vea por la pantalla)
Estoy comenzando a programar en HTML, es sencillo y lo voy a aprender muy bien.
</body> (cierro la cuerpo del HTML para darle paso al body del htm)
</HTML> (termino el tag de indicación del lenguaje)
<head> (comienza la cabecera del HTML)
<title> Mi primer HTML </title> (aquí, coloco el título)
</head> (cierro la cabecera del HTML para darle paso al body del htm)
<body> (abro el cuerpo, acá colocamos todo lo que queremos que se vea por la pantalla)
Estoy comenzando a programar en HTML, es sencillo y lo voy a aprender muy bien.
</body> (cierro la cuerpo del HTML para darle paso al body del htm)
</HTML> (termino el tag de indicación del lenguaje)
El tag BODY.- Permite tener unas indicaciones donde le diríamos por
ejemplo, que fondo queremos, si va a ser un color o una imagen, determinar los
colores de los textos (a nivel general).
Explicación
|
Ejemplo
|
bgcolor="el color rgb que gustemos"
|
bgcolor="#FFCC00"
|
backgound="el archivo de imagen"
|
backgound="fondo.jpg"
|
text="color para el texto normal"
|
text="#FFFFFF"
|
link="color para el texto que es vínculo"
|
link="#00FFFF"
|
vlink="color para el vínculo visitado"
|
vlink="#000000"
|
alink="color para el vínculo activo"
|
alink="#FFFF00"
|
Explicación
Ejemplo
|
|
size="el el tamaño de la fuente a utilizar".
En HTML los tamaños de size van del 1 al 7. |
size="2"
|
color="el color de la fuente" Siempre en código RGB
|
color="#CC00FF"
|
face="nombre de la tipografía a utilizar"Arial, verdana, times new
roman, courier, sans serif, helvética, etc.
|
face="arial"
|
Deseo...
|
Coloco...
|
ejemplo
|
Negrita
|
<b> </b>
|
<b>El texto que deseo</b>
|
Itálica o cursiva
|
<i> </i>
|
<i>El texto que deseo</i>
|
Subrayado
|
<u> </u>
|
<u>El texto que deseo</u>
|
Tachado
|
<s> </s>
|
<s>El texto que deseo</s>
|
Superíndice
|
<sup> </sup>
|
<sup>El texto que deseo</sup>
|
Subíndice
|
<sub> </sub>
|
<sub>El texto que deseo</sub>
|
Centrado
|
<center> </center>
|
<center>Lo que desee...</center>
|
El tag es <hr> no hace falta terminarlo como a los demás tags que
hemos visto hasta ahora, si lo que podemos hacer es colocarle unos atributos
para asignarle, una altura determinada, un largo determinado, su alineación, si
quiero o no que tenga sombre y un color determinado:
<HTML>
<head>
<title> Mi primer HTML </title>
</head>
<body background="imágenes/fondo.jpg" text="#FFFFFF">
<font face="verdana" size="3" color="#FFFF66"><b>Estoy comenzando a programar en HTML, es sencillo y lo voy a aprender muy bien.</b></font>
<hr color="#FFCC33" size="20" width="50%" align="center" noshade>
</body>
<head>
<title> Mi primer HTML </title>
</head>
<body background="imágenes/fondo.jpg" text="#FFFFFF">
<font face="verdana" size="3" color="#FFFF66"><b>Estoy comenzando a programar en HTML, es sencillo y lo voy a aprender muy bien.</b></font>
<hr color="#FFCC33" size="20" width="50%" align="center" noshade>
</body>
Nota: El hr funciona sin cerrar, cosa que para los
demás tags que vimos hasta ahora siempre había que cerrarlos con la /.
Deseo...
|
Coloco...
|
Realizar un salto de párrafo.
|
<p>
|
Realiza un Salto de línea.
|
</br>
|
Ejemplo de
las opciones vistas.
<HTML>
<head> <title> Mi Segundo HTML </title> </head> <body background="imágenes/fondo.jpg" text="#FFFFFF"> <font face="verdana" size="3" color="#FFFF66"><b>Estoy comenzando a programar en HTML, es sencillo y lo voy a aprender muy bien.</b></font> <hr color="#FFCC33" size="20" width="50%" align="center" noshade> <p>Realizar un salto de párrafo que no es lo mismo que un salto de línea, por eso acá estoy realizando luego del punto y aparte un salto de párrafo.<p>Realizar un salto de párrafo que no es lo mismo que un salto de línea, por eso acá estoy realizando luego del punto y aparte un salto de párrafo.<p> </body> </HTML> |
Y para terminar por este breve recorrido
por el lenguaje HTML indicaremos como se pone una imagen, y adjuntamos un
atabla correspondiente con sus explicación respectiva.
<img
src="imagenes/monos.jpg" width="640" height="426"
alt="Lindos monos">
Explicación
|
Ejemplo
|
src="la ruta de donde viene la imagen guardada en nuestra carpeta del
sitio".
|
src="imagenes/monos.jpg"
|
alt="mensaje emergente, auxiliar que aparece cuando acercamos el
mouse por encima de la imagen sin hacer click"
|
alt="Lindos monos"
|
align="alineación del texto con respecto a la imagen": Top,
bottom, middle.
|
align="top"
|
border="medida del borde que le quiera asignar a la imagen"
|
border="2"
|
height="alto de la imágen" en píxeles.
|
heigh="450"
|
width="ancho de la imágen" en píxeles.
|
width="250"
|
hspace="espacio horizontal entre la imágen y el texto", en espacios.
|
hspace="2"
|
vspace="margen vertical en puntos, que separa la imágen del
texto"
|
vspace="12"
|
Espero compañeros haber despejado algunas de sus dudas con todo les dejo en este blog algunas direcciones de ejemplos de codigo HTML.
No hay comentarios:
Publicar un comentario