¡Bienvenidos!
Este
curso está pensado para todos aquellos que no sepan nada de nada
de programación, un caso simple: cuando comencé en este
mundo del internet, al yo ser diseñadora gráfica, pensaba
que sólo tenía que diseñar y listo y que otros se
encarguen del resto (de lo feo como yo le decia... =) jeje ), y acá
me ven, tratando de transmitir todo lo que sé desde lo básico
para que uds. puedan mejorar nuestra internet y todo concepto en la comunicación
visual, desde lo gráfico, como en la programación, por eso,
no se olviden que es muy importante comenzar a trabajar en equipo, un
diseñador y un programador, una dupla excelente.
INTRODUCCIÓN
HTML:
HYPER TEXT MARKUP LANGUAGE.
Sólo
necesitaremos algun editor de texto, un simple notepad, el famoso y casi
sin utilizar el block de notas y el Navegador que tengan en sus ordenadores.
Un html
se divide en dos grandes secciones, las dos no dejan de ser muy importantes
a la hora de programar y diseñar nuestra página.
HEAD
(cabeza) y BODY (cuerpo)
Casi
todas las órdenes y/o directivas que existen en este lenguaje comienzan
con < > y terminan con </>. También encontraremos tags
que no necesitan cerrarse con </> como veremos más adelante.
En el
head, colocaremos todo lo que nuestra página html necesite para
defirnir por ejemplo el Título del html (no nos confundamos con
el nombre que le damos al html al guardarlo, no es lo mismo.), veamos
el ejemplo del título de esta misma página html que están
leyendo: HTML CURSO ONLINE GRATUITO por IMAGE & ART, ese es el título
que tenemos dentro de nuestro head.
También incorporamos en el head los tags u órdenes <Meta>
que nos sirve para mostrar e indicar las palabras claves, descripción,
autor para los buscadores en internet, ellos utilizan estos datos para
agregarnos en sus bases de datos. Existen otras variantes del tag Meta
que en el transcurso lo veremos.
Ahora
llego la hora: vamos a comenzar nuestra primer página Html.
En el
block de notas coloquemos lo siguiente:
<html>
<head>
<title> Mi primer html </title>
</head>
<body>
Estoy comenzando a programar en html, es sencillo y lo voy a aprender
muy bien.
</body>
</html>
|
ver
ejemplo
Ahora
vamos a explicar lo que hemos hecho:
<html>
(abro indincando 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
toooodo 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)
Felicitaciones!,
nuestro primer diente en html.
Ahora
comenzaremos a indicar más tags para comenzar a lograr htmls más
apropiados. Comencemos a trabajar en el body que es lo más importante
para que el espectador pueda ver nuestros diseños htmls.
El
tag BODY permite tener unas indicaciones donde le diríamos
por ejemplo, que fondo queremos, si va a ser un color o una imágen,
determinar los colores de los textos (a nivel general), textos escritos,
textos que son vínculos, vínculos activos o visitados.
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" |
Agreguemos
en el body las siguientes instrucciones:
<html>
<head>
<title> Mi primer html </title>
</head>
<body bgcolor="#FFCC33" text="#000000">
Estoy comenzando a programar en html, es sencillo y lo voy a aprender
muy bien.
</body>
</html>
|
ver
ejemplo
cuando veamos links, vamos a poder agregar las otras indicaciones al body.
descargar
imágen de fondo para ejercicio
Agreguemos
en el body las siguientes instrucciones, pero con el fondo llamando a
una imágen, se tienen que asegurar de colocar bien la ruta para
que la encuentre:
<html>
<head>
<title> Mi primer html </title>
</head>
<body background="imagenes/fondo.jpg" text="#FFFFFF">
Estoy comenzando a programar en html, es sencillo y lo voy a aprender
muy bien.
</body>
</html>
|
ver
ejemplo
Espero
que se hayan dado cuenta que, en este código cambiamos el texto
de color, así con el fondo de la imagen que es en tono oscuro,
la tipografía la vimos de color blanco.
Seguiremos
con el Tag <font>, sirve para darle todas las indicaciones
con respecto a un texto escrito, es decir, que tipo de tipografía,
que tamaño, que color, veamos el siguiente cuadro:
explicación
|
ejemplo
|
size="el
el tamaño de la fuente a utilizar".
Tengamos en cuenta que en html los tamaños de size van del
1 al 7.
Si deseamos un tamaño más grande tendremos que traerlo
como un bitmap o como un estilo (css). |
size="2" |
color="el
color de la fuente"
Siempre en código RGB |
color="#CC00FF" |
face="nombre
de la tipografía a utilizar"
Siempre tratamos de utilizar tipografías, fuentes que TODAS
las máquinas pc o mc o por defecto las que tengan, por eso
vemos las más utilizadas: Arial, verdana, times new roman,
courier, sans serif, helvética, etc. |
face="arial" |
Hasta
ahora, cuando colocábamos el texto luego del tag body, era sólo
la frase sin darle ningún tipo de indicación para su visualización
por eso, el navegador que nos muestra lo que veníamos realizando
hasta ahora nos mostraba todo con las indicaciones prederminadas en nuestro
navegador y no por medio de las indicaciones donde uno como editor html
si puede variar:
Agreguemos
las siguientes instrucciones antes del texto dentro del body, y fíjense
como comenzamos a utilizar lo antes mencionado, el abrir un tag <>
y cerrar el tag </>:
<html>
<head>
<title> Mi primer html </title>
</head>
<body background="imagenes/fondo.jpg" text="#FFFFFF">
<font face="verdana" size="3" color="#FFFF66">Estoy
comenzando a programar en html, es sencillo y lo voy a aprender
muy bien.</font>
</body>
</html>
|
ver
ejemplo
Ahora
vamos a explicar lo que hemos hecho:
<html>
(abro indincando 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
toooodo lo que queremos que se vea por la pantalla)
<body background="imagenes/fondo.jpg" text="#FFFFFF">
<font face="verdana" size="3" color="#FFFF66">Estoy
comenzando a programar en html, es sencillo y lo voy a aprender muy bien.</font>
aquí, estamos abriendo el tag font, le damos las indicaciones necesarias,
colocamos el texto y cerramos el tag fon.
</body>
(cierro la cuerpo del html para darle paso al body
del htm)
</html> (termino el tag de indicación
del lenguaje)
Bien,
me imagino que ahora se sienten agrandados jaja e inclusive ansiosos,
por eso vamos a darle la orden para que la oración que tenemos
en la página esté en negrita, en bold, mas marcada, entonces
vamos a incorporar un tag nuevo que es <b>, sirve para indicarle
que lo que coloquemos entre <b> y </b> saldrá en bold.
<html>
<head>
<title> Mi primer html </title>
</head>
<body background="imagenes/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>
</body>
</html>
|
ver
ejemplo
Debajo
les describo los cambios en la tipografía que pueden realizar:
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> |
Algo
que vamos a incorporar es la linea horizontal, nos sirve para dividir,
para que forme parte de nuestro diseño, etc, queda en la creatividad
de cada uno.
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="imagenes/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>
</html>
|
ver
ejemplo
=)
Se
pudieron dar cuenta entonces que hr funciona sin cerrar, cosa que para
los demás tags que vimos hasta ahora siempre había que cerrarlos
con la /, ahora les voy a explicar que tenemos que colocar para un salto
de párrafo que no es lo mismo que un salto de línea.
Deseo...
|
Coloco...
|
Realizar
un salto de parrafo que no es lo mismo que un salto de línea,
por eso aca estoy realizando luego del punto y aparte un salto de
párrafo.
Realizar
un salto de parrafo que no es lo mismo que un salto de línea,
por eso aca estoy realizando luego del punto y aparte un salto de
párrafo.
|
<p>
|
Ahora
aquí deseo realizar un salto de línea que no es lo mismo
que un salto de párrafo, por eso aca estoy realizando luego
del punto y aparte un salto de linea.
Ahora aquí deseo realizar un salto de línea que no es
lo mismo que un salto de párrafo, por eso aca estoy realizando
luego del punto y aparte un salto de linea. |
</br>
|
Por
eso ahora hagamos el siguiente html:
<html>
<head>
<title> Mi Segundo html </title>
</head>
<body background="imagenes/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 parrafo que no es lo mismo que un salto de línea,
por eso aca estoy realizando luego del punto y aparte un salto de
párrafo.<p>Realizar
un salto de parrafo que no es lo mismo que un salto de línea,
por eso aca estoy realizando luego del punto y aparte un salto de
párrafo.<p>
</body>
</html>
|
Acuérdense
como si estuviéramos escribiendo a máquina, el <p>lo
colocamos cada vez que queríamos hacer dos veces interlineado con
el carro de la máquina. (perdonen los jóvenes jajajaja),
y si queremos un solo interlineado un <br>.
ver
ejemplo
=)
Para
luego colocar en el párrafo los atributos de la fuente colocamos
lo siguiente, siempre luego del tag donde abrimos <p>:
<font face="Arial, Helvetica, sans-serif"
size="2" color="#FFFF00"> todo el párrafo
y lo termino con </font>
Para acentos, porcentajes, todo tipo que comunmente se denomina "caracter
especial" tienen una forma especial para escribirlo en el código
html, por un tema de visualización de navegadores, es decir, se
llegó a un código ASCII como dije antes para asegurarnos
que todos puedan interpretar nuestros caracteres especiales, les paso
una lista a continuación para que la guarden:
Á |
Á |
À |
À |
 |
 |
Ä |
Ä |
à |
à |
Å |
Å |
á |
á |
à |
à |
â |
â |
ä |
ä |
ã |
ã |
å |
å |
É |
É |
È |
È |
Ê |
Ê |
Ë |
Ë |
é |
é |
è |
è |
ê |
ê |
ë |
ë |
Í |
Í |
Ì |
Ì |
Î |
Î |
Ï |
Ï |
í |
í |
ì |
ì |
î |
î |
ï |
ï |
Ó |
Ó |
Ò |
Ò |
Ô |
Ô |
Ö |
Ö |
Õ |
Õ |
ó |
ó |
ò |
ò |
ô |
ô |
ö |
ö |
õ |
õ |
Ú |
Ú |
Ù |
Ù |
Û |
Û |
Ü |
Ü |
ú |
ú |
ù |
ù |
û |
û |
ü |
ü |
Ý |
Ý |
ý |
ý |
ÿ |
ÿ |
ñ |
ñ |
Ñ |
Ñ |
Ç |
Ç |
ç |
ç |
¡ |
¡ |
¿ |
¿ |
Ž |
´ |
· |
· |
ž |
¸ |
« |
« |
» |
» |
š |
¨ |
Æ |
Æ |
æ |
æ |
ß |
ß |
µ |
µ |
Ð |
Ð |
ð |
ð |
Þ |
Þ |
þ |
þ |
¢ |
¢ |
£ |
£ |
€ |
¤ |
¥ |
¥ |
¹ |
¹ |
² |
² |
³ |
³ |
|
­ |
× |
× |
÷ |
÷ |
± |
± |
Œ |
¼ |
œ |
½ |
Ÿ |
¾ |
Ø |
Ø |
ø |
ø |
¬ |
¬ |
< |
< |
> |
> |
& |
& |
|
|
" |
" |
º |
º |
ª |
ª |
© |
© |
® |
® |
° |
° |
Š |
¦ |
§ |
§ |
¶ |
¶ |
¯ |
¯ |
IMÁGENES, SU INCORPORACIÓN EN HTML
Ha
llegado el momento de la incorporación de las imágenes,
el tag que utilizaremos es el <img> de esta manera la estamos llamando
y ahora hay que indicarle la ruta.
<img src="imagenes/monos.jpg" width="640"
height="426" alt="Lindos monos">
ver
ejemplo =oD
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" |
Nos
vemos en la próxima entrega.
|