HTML. Bienvenidos! INTRODUCCIÓN HTML: HYPER TEXT MARKUP LANGUAGE.

Transcripción

1 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 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: <body> Estoy comenzando a programar en html, es sencillo y lo voy a aprender muy bien.

2 Ahora vamos a explicar lo que hemos hecho: (abro indincando el lenguaje de programación) (comienza la cabecera del html) (aquí, coloco el título) (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. (cierro la cuerpo del html para darle paso al body del htm) (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 bgcolor="el color rgb que gustemos" backgound="el archivo de imagen" text="color para el texto normal" link="color para el texto que es vínculo" vlink="color para el vínculo visitado" alink="color para el vínculo activo" ejemplo bgcolor="#ffcc00" backgound="fondo.jpg" text="#ffffff" link="#00ffff" vlink="#000000" alink="#ffff00" Agreguemos en el body las siguientes instrucciones: <body bgcolor="#ffcc33" text="#000000"> Estoy comenzando a programar en html, es sencillo y lo voy a aprender muy bien. 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

3 una imágen, se tienen que asegurar de colocar bien la ruta para que la encuentre: Estoy comenzando a programar en html, es sencillo y lo voy a aprender muy bien. 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 , 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 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). color="el color de la fuente" Siempre en código RGB 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. ejemplo size="2" color="#cc00ff" 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 </>:

4 estoy comenzando a programar en html, es sencillo y lo voy a aprender muy bien. Ahora vamos a explicar lo que hemos hecho: (abro indincando el lenguaje de programación) (comienza la cabecera del html) (aquí, coloco el título) (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. aquí, estamos abriendo el tag font, le damos las indicaciones necesarias, colocamos el texto y cerramos el tag fon. (cierro la cuerpo del html para darle paso al body del htm) (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 , sirve para indicarle que lo que coloquemos entre y saldrá en bold. estoy comenzando a programar en html, es sencillo y lo voy a aprender muy bien. Debajo les describo los cambios en la tipografía que pueden realizar: Deseo... Coloco... ejemplo Negrita el texto que deseo

5 Itálica o cursiva el texto que deseo Subrayado el texto que deseo Tachado <s> </s> <s>el texto que deseo</s> Superíndice el texto que deseo Subíndice el texto que deseo 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: estoy comenzando a programar en html, es sencillo y lo voy a aprender muy bien. <hr color="#ffcc33" size="20" width="50%" align="center" noshade> =) 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... 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. Coloco...

6 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. Por eso ahora hagamos el siguiente html: <title> Mi Segundo html </title> estoy comenzando a programar en html, es sencillo y lo voy a aprender muy bien. <hr color="#ffcc33" size="20" width="50%" align="center" noshade> 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. Acuérdense como si estuviéramos escribiendo a máquina, el 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 . =) Para luego colocar en el párrafo los atributos de la fuente colocamos lo siguiente, siempre luego del tag donde abrimos : todo el párrafo y lo termino con 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: Á Á À À Â Â Ä Ä Ã Ã Å Å á á à à â â ä ä ã ã å å É É È È Ê Ê Ë Ë é é è è ê ê ë ë Í Í Ì Ì Î Î Ï Ï

7 í í ì ì î î ï ï Ó Ó Ò Ò Ô Ô Ö Ö Õ Õ ó ó ò ò ô ô ö ö õ õ Ú Ú Ù Ù Û Û Ü Ü ú ú ù ù û û ü ü Ý Ý ý ý ÿ ÿ ñ ñ Ñ Ñ Ç Ç ç ç «» Æ Æ æ æ ß ß µ µ Ð Ð ð ð Þ Þ þ þ ¹ ¹ ² ² ³ ³ ± ± ¼ ¼ ½ ½ ¾ ¾ Ø Ø ø ø < < > > & & " " º º ª ª 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"> =od explicación src="la ruta de donde viene la imagen guardada en nuestra carpeta del sitio". alt="mensaje emergente, auxiliar que aparece cuando acercamos el mouse por encima de la imagen sin hacer click" align="alineación del texto con respecto a la imagen": Top, bottom, middle. border="medida del borde que le quiera asignar a la imagen" height="alto de la imágen" en píxeles. width="ancho de la imágen" en píxeles. ejemplo src="imagenes/monos.jpg" alt="lindos monos" align="top" border="2" heigh="450" width="250"

8 hspace="espacio horizontal entre la imágen y el texto", en espacios. vspace="margen vertical en puntos, que separa la imágen del texto" hspace="2" vspace="12" Nos vemos en la próxima entrega. Paola Fraticola