Documentos de Académico
Documentos de Profesional
Documentos de Cultura
html
HTML
por Paola Fraticola
¡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
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.
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.
<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
http://www.imageandart.com/cursos_online/html/html1.html
Ahora vamos a explicar lo que hemos hecho:
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
<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.
<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
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>
http://www.imageandart.com/cursos_online/html/html1.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
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
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...
<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>
ver ejemplo =)
explicación ejemplo
Paola Fraticola