Introducción al HTML

915 views

Published on

Introducción al HTML

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
915
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
31
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introducción al HTML

  1. 1. Introducción allenguaje HTML 1
  2. 2. 1. Introducción2. Etiquetas3. Estructura de una página HTML4. El color5. Enlaces6. Mapa de la web7. Formateo de textos y párrafos8. Ver código fuenteIndice 2
  3. 3. 1. IntroducciónResponde a estas preguntas: •¿Qué es Internet? • ¿Cómo nació Internet? • ¿Qué es www? • ¿Qué servicios ofrece Internet además de WWW? • ¿Qué es HTML? Indice 3
  4. 4. 1. IntroducciónEstamos acostumbrados a ver un ordenador como una máquina individual, en la que trabajamos sobre los archivos que tenemos en nuestro disco duro y manejamos algún programa que tenemos instalado.Sin embargo, los ordenadores no sólo pueden trabajar individualmente. También pueden conectarse entre ellos, con lo cual pueden compartir la información. A esto se le denomina “tener los ordenadores en red”, o “red de ordenadores”. Indice 4
  5. 5. 1. IntroducciónInternet no es más que un sistema que conecta a multitud de ordenadores en red para que puedan compartir la información.Internet surgió a finales de los 60, desde el departamento de defensa de los Estados Unidos. Indice 5
  6. 6. 1. Introducción¿Qué es HTML?HTML son las siglas de Hyper Text Markup Lenguage, lenguaje de Hipertexto, y es el lenguaje de mediante el cual se escriben y diseñan las páginas Web.En realidad es mucho más sencillo de lo que parece, porque se escribe como si fuera un documento de texto y es suficiente con un procesador/editor de textos (por ejemplo el Bloc de Notas de Windows) para poder realizar el trabajo. Indice 6
  7. 7. 1. IntroducciónUn documento HTML es simplemente un documento de texto que contiene algunas instrucciones sobre cómo se representarán los elementos.El HTML permite incluir en el diseño de las páginas Webs textos, sonidos e imágenes, combinándolos de acuerdo a nuestras necesidades. Además, podemos incluir enlaces (links) a otras páginas Web. Indice 7
  8. 8. 1. IntroducciónPara poder ver lo que hemos diseñado en HTML necesitamos un navegador. El navegador “entiende” el lenguaje HTML y hace visible lo que hemos escrito usando el citado código.El cliente (ordenador que quiere ver una página ) se conecta al servidor (ordenador que tiene almacenada el código html). El cliente solicita la página al servidor y éste le envía el fichero de texto HTML que el navegador del cliente interpreta. Esto se hace mediante el protocolo HTTP. Indice 8
  9. 9. 1. Introducción¿Qué es un navegador?Los navegadores son los programas informáticos que comprenden” el lenguaje HTML y permiten visualizar las páginas Web.Dos de los más utilizados son: Internet Explorer Mozilla Firefox Indice 9
  10. 10. 1. IntroducciónAplicaciones mínimas para construir una página HTML:• Procesador de textos básico (p.e. Notepad)• Navegador para visualizar el resultado (`p.e. Explorer) Indice 10
  11. 11. 1. IntroducciónEn el editor de textos iremos introduciendo lo que queremos visualizar y cómo queremos hacerlo para que después pueda ser entendido por un navegador. Indice 11
  12. 12. 1. IntroducciónPasos para crear la primera página:• Creamos un directorio dentro “Mis documentos” llamado HTML. Crear directorio Prueba01• Abrir “Block de notas”• Escribir: Página de prueba HTML• Guardar como index.html en el directorio creado• Abrir la página con un navegador• Ya hemos creado nuestra primera página web Indice 12
  13. 13. 1. IntroducciónAparte del block de notas de windows se pueden encontrar muchos editores HTML, más elaborados y complejos, que nos pueden facilitar el trabajo a la hora de programar. Por ejemplo AlleyCode, CoffeeCup, PageBreeze o WebGlu. Sin embargo, este curso lo haremos simplemente con el bloc de notas de windows, porque pretendemos conocer el lenguaje HTML desde su inicio. Sólo así seremos capaces después de sacar todo el rendimiento a los distintos programas que existen en el mercado. Indice 13
  14. 14. 1. IntroducciónEjercicio:Bajar de Internet algún editor de textos que nos ayude a escribir código HTML, por ejemplo, AlleyCode.Abrir la página que hemos creado con el block de notas.Este es nuestro punto de partida Indice 14
  15. 15. 1. IntroducciónSobre los nombres de archivo:El archivo puede tener el nombre que deseemos, no obstante, se recomienda guardar los archivos con algún criterio para facilitar su identificación. Es habitual que la primera página o portada lleve el nombre de “index.htm” o “index.html”. Es una convención que nos ayuda a distinguir la página que dará entrada a todas las demás. Indice 15
  16. 16. 1. IntroducciónEn cuanto a las extensiones, podemos usar indistintamente .htm o .html. Ambos archivos son igualmente interpretados, aunque es recomendable tener el hábito de guardar los archivos siempre con la misma extensión.IMPORTANTE: cuando incluimos archivos o enlaces a ficheros en nuestro código, es importante que las mayúsculas/minúsculas coincidan con el nombre del archivo. De lo contrario podemos encontrarnos con problemas inesperados Indice 16
  17. 17. 1. IntroducciónPodemos grabar los archivos generados en HTML en cualquier directorio creado, pero, al igual que con los nombres, es importante ser muy ordenado en su colocación, ya que cuando enlazamos diferentes páginas Web es vital conocer la ubicación exacta de los archivos. Por ejemplo, las imágenes las agruparemos en una misma carpeta, evitando así que se diseminen entre los distintos archivos. Indice 17
  18. 18. 2. EtiquetasLas etiquetas (tags en inglés) son elementos especiales que sirven para indicarle al navegador cómo tiene que mostrar el texto, las imágenes.... que queremos incluir en nuestra página Indice 18
  19. 19. 2. EtiquetasLa mayoría de las etiquetas están formadas por dos partes, una de Apertura y otra de Cierre:Etiqueta de Apertura: <etiqueta>Etiqueta de Cierre: </etiqueta>Todo lo que introduzcamos entre ellas se verá afectado por el formato que indique la etiqueta. Indice 19
  20. 20. 2. EtiquetasHay otro tipo de etiquetas que no son necesario cerrar como: <BR> que indica un salto de línea <HR> que muestra un separador Indice 20
  21. 21. 2. EtiquetasEjemplo. en el directorio prueba02 crearemos el fichero index.html y guardaremos lo siguiente:Texto sin formatoTexto sin formato <br><b>Texto en negrita</b><br>Texto sin formato Indice 21
  22. 22. 2. EtiquetasEjercicio: crear una página que tenga este aspecto y guardarla en el directorio prueba03: __________________________________ Contenidos del tema: Introducción Etiquetas Estructura de una página HTML Formateo de textos y párrafos Listas Imágenes y color Tablas __________________________________ Indice 22
  23. 23. 2. EtiquetasAtributos: las directivas pueden contener atributos que indican características del elemento al que hacen referencia. Por ejemplo, la directiva FONT puede incluir el color que tendrá el texto al que afecte de la siguiente manera: <FONT color=“red”>Rojo</FONT>Rojo Indice 23
  24. 24. 2. EtiquetasEs muy importante el orden de en que se escriben las etiquetas. Ejemplo (prueba04): <font color=red> Contenidos del tema:<br><br> <font color=green> Introducción<br> Etiquetas<br> Estructura de una página HTML<br> Formateo de textos y párrafos<br> Listas<br></font> Imágenes y color<br></font> Tablas<br> Indice 24
  25. 25. 3. Estructura de una página HTMLLa estructura general de una página web es:<HTML> <HEAD> … </HEAD> <BODY> … </BODY></HTML> NOTA: aunque todo funcione sin estas etiquetas, es conveniente estructurar correctamente las páginas. Indice 25
  26. 26. 3. Estructura de una página HTMLLas etiquetas <HTML> y </HTML> delimitan el principio y final de todo el documento HTML<HTML></HTML> Indice 26
  27. 27. 3. Estructura de una página HTMLDentro de las etiquetas <HTML> y </HTML> podemos distinguir dos partes :• Cabecera: delimitada por las etiquetas <HEAD> y </HEAD>. Lo que pongamos en la cabecera normalmente no se verá en la página, pero sí será muy importante para incluir determinadas informaciones.• Cuerpo: delimitado por las etiquetas <BODY> y </BODY>. Entre estas etiquetas colocamos el contenido que podremos visualizar mediante un navegador. Aquí pondremos todo el texto, imágenes, sonidos, tablas, etc.… Indice 27
  28. 28. 3. Estructura de una página HTMLCabecera: <HEAD> … </HEAD>Aquí podemos encontrar elementos que ayudan a la correcta interpretación del cuerpo como por ejemplo: <TITLE> <META> Indice 28
  29. 29. 3. Estructura de una página HTMLEjercicio: Buscar en Internet un manual HTML y bajarlo para utilizarlo de consulta cuando lo necesitemosEjercicio: buscar la utilidad de cada uno de estos elementos Indice 29
  30. 30. 3. Estructura de una página HTMLCuerpo:<BODY>…</BODY>Es la parte que contiene los contenidos de lapágina, lo que se visualizará en elnavegador Indice 30
  31. 31. 3. Estructura de una página HTMLLa directiva <BODY> puede conteneratributos que permitirán, entre otras cosas,establecer un color de fondo, una imagen defondo, el color del texto por defecto,…Ejemplo: <BODY bgcolor=yellow text=blue> … </BODY> Indice 31
  32. 32. 3. Estructura de una página HTMLEjercicio: Enumerar utilizando el manual losposibles atributos que podemos incluir en BODYEjercicio: Crear una página web con fondo azul,texto amarillo, enlaces en blanco, y enlacesvisitados en verde. Guardar en el directorioprueba05. Indice 32
  33. 33. 4. El color A muchos de los elementos que incluimosen las páginas se les puede asignar color. Cuando utilizamos un atributo de color,éste se puede indicar de dos formas:• Utilizando una de las palabras reservadas a talefecto como por ejemplo: red, purple, black,…• Utilizando un valor numérico hexadecimal querepresenta el color Indice 33
  34. 34. 4. El color En la siguiente tabla podemos ver una lista depalabras reservadas junto al color que representan. A la derecha de cada palabra podemos ver elvalor hexadecimal correspondiente. Indice 34
  35. 35. 4. El color El listado anterior es un listado limitado. Enrealidad podemos usar una cantidad de coloresmayor a la de la tabla anterior. Para ello debemoscodificar los colores mediante una combinación derojo, verde y azul (RGB). Esta combinación se va a expresarmediante un número hexadecimal de 6 dígitos,dos dígitos para el rojo, dos para el verde y dospara el azul. Indice 35
  36. 36. 4. El colorPor lo tanto: FF0000 es el rojo base 00FF00 es el verde base 0000FF es el azul base 000000 es el negro FFFFFF es el blanco Indice 36
  37. 37. 4. El colorPara calcular el valor hexadecimal de un colorpodemos utilizar cualquier programa de dibujo(por ejemplo Paint de windows) o bien programasespecificos como GetColor o EyeDropper.Ejercicio: Visitar la siguiente página:http://www.pagetutor.com/colorpicker/index.html Indice 37
  38. 38. 5. EnlacesLos enlaces o hipertexto o hipervínculos permitenpasar de una página a otra de manera sencilla,simplemente pulsando el ratón sobre un trozo detexto o una imagen.Normalmente, los enlaces o links se identificanpor ser palabras que se diferencian en su color,resaltando entre todas las demás. También, porconvencionalismo, el cursor cambia de forma paratransformarse en una pequeña mano señalando elenlace. Indice 38
  39. 39. 5. EnlacesLa etiqueta <A>…</A> nos permite crear enlacesen nuestras páginas.Para indicar a dónde queremos que salteutilizaremos el atributo href. Por ejemplo siqueremos que salte a la página de google, loindicaremos de la siguiente forma: <A href=“http://www.google.com”> Indice 39
  40. 40. 5. EnlacesLo que pongamos entre <A …> y </A> es lo queaparecerá en la página como hipervínculo, esdecir, donde tendremos que pulsar para saltar ala página de destino.Dentro de dichas etiquetas podremos poner textoo bien alguna imagen. Indice 40
  41. 41. 6. Mapa de la webUna de las tareas más importantes a la hora deconcebir un sitio web es la organización de loscontenidos y el análisis del número de páginasque conformarán nuestro sitio web, así como larelación existente entre ellas. Veamos varios tiposde estructura existentes. Indice 41
  42. 42. 6. Mapa de la webEstructura lineal: Indice 42
  43. 43. 6. Mapa de la webEstructura lineal ramificada: Indice 43
  44. 44. 6. Mapa de la webEstructura jerárquica: Indice 44
  45. 45. 6. Mapa de la webEstructura lineal ramificada: Indice 45
  46. 46. 7. Formateo de texto y párrafosEn este apartado veremos las etiquetas odirectivas que permiten dar formato al texto, esdecir, poder representar saltos de línea,tabuladores y otros separadores que el navegadorno interpreta y además hacer que el texto seamás atractivo mediante los colores, los tipos deletra, el tamaño,…Indice 46
  47. 47. 7. Formateo de texto y párrafosEn los editores de texto basta con pulsar la barraespaciadora tres veces para que se visualicen tresespacios. En HTML hay que indicar esos espaciosde manera especial. Lo mismo ocurre con lostabuladores, saltos de línea,..Indice 47
  48. 48. 7. Formateo de texto y párrafosTenemos el siguiente texto en un archivo HTML:WWW basa su diseño y funcionamiento en varios puntos: La idea de un mundo sin límites para la información El sistema de direcciones URL El protocolo de red HTTP El lenguaje HTML Indice 48
  49. 49. 7. Formateo de texto y párrafosSi visualizamos el texto anterior en un navegadorel resultado es el siguiente:WWW basa su diseño y funcionamiento en varios puntos: La ideade un mundo sin límites para la información El sistema dedirecciones URL El protocolo de red HTTP El lenguaje HTMLNo hay separadores de ningún tipo, solo unaseparación entre palabras Indice 49
  50. 50. 7. Formateo de texto y párrafosEspacios entre caracteres:Para que el navegador muestre más de unespacio entre palabras hay que añadir lo siguientepor cada espacio: &nbsp; Indice 50
  51. 51. 7. Formateo de texto y párrafosCaracteres especiales:Existen caracteres especiales que se suelenutilizar para especificar directivas entre otrascosas, por ejemplo, <>. Para visualizar estoscaracteres y no sean interpretados hay queescribirlos de forma especial, para elloutilizaremos las referencias Indice 51
  52. 52. 7. Formateo de texto y párrafosCaracteres especiales:Las referencias no son más que una formaespecial de escribir caracteres, como ocurre conlos espacios entre caracteres. Por ejemplo, paravisualizar <CENTER> en un navegador sin que seinterprete, debemos poner &lt;CENTER&gt;Indice 52
  53. 53. 7. Formateo de texto y párrafosSaltos de línea:Para visualizar un salto de línea basta con utilizarla etiqueta abierta<BR> Indice 53
  54. 54. 7. Formateo de texto y párrafosPárrafo:Para delimitar un párrafo se antepone la etiqueta<P> al inicio del mismo y </P> al final.Puede parecer que <BR> y <P> hacen lo mismo,insertar una nueva línea, pero no es así.Ejercicio: practicar con ambas para ver ladiferencia Indice 54
  55. 55. 7. Formateo de texto y párrafosPárrafo:Hay dos diferencias fundamentales: <P> deja un espacio mayor entre líneas <P> no se acumulaNOTA: si queremos acumular <P> pondremosentre ellos &nbsp;Indice 55
  56. 56. 7. Formateo de texto y párrafosPárrafo:La directiva <P> puede contener el atributo alignque sirve para alinear el textoIndice 56
  57. 57. 4. Formateo de texto y párrafosAlineación:En los procesadores de texto podemos alinear eltexto a la izquierda, a la derecha,… con un simpleclick de ratón.En HTML existen etiquetas para alinear el texto,pero también podemos hacerlo medianteatributos de algunas directivas. Indice 57
  58. 58. 7. Formateo de texto y párrafosAlineación:Con el atributo ‘align’ de algunas etiquetaspodemos alinear el texto donde queramos. Losvalores que se pueden asignar son left (valor pordefecto), right y centerAgunas de las etiquetas que tienen este atributoson: <P>, <HR>, <DIV>, <COL>, <IMG>,<INPUT>, <TABLE>,... Indice 58
  59. 59. 7. Formateo de texto y párrafosAlineación:Con la directiva <CENTER> podemos alinearelementos al centroSe finaliza con </CENTER>Indice 59
  60. 60. 7. Formateo de texto y párrafosPreformateo del texto:La directiva <PRE> permite que el navegadortenga en cuenta los separadores (espacios,tabuladores,...) existentes en el código fuente.Finaliza con </PRE> Indice 60
  61. 61. 7. Formateo de texto y párrafosEstilos del texto: negrita cursiva subrayado texto tachado subíndice superíndiceEjercicio: Busca la etiqueta para cada uno deestos estilos Indice 61
  62. 62. 7. Formateo de texto y párrafosDirectiva FONT y BASEFONT:<BASEFONT> nos permite establecer el tamaño yel color de fuente para todo el documento<FONT> nos permite cambiar el color, tamaño ytipo de letra establecidos por defecto.Ejercicio: enumera los atributos de la etiquetaFONT Indice 62
  63. 63. 7. Formateo de texto y párrafosEjercicio:Buscar un programa de diseño de letra comoimagen. XaraIndice 63
  64. 64. 8. Ver código fuenteTodas las páginas web tienen su programacióndetrás, y ésta es pública en la mayoría de loscasos. Eso quiere decir que podemos ver elcódigo fuente de la mayoría de las páginas por lasque navegamos en Internet, lo que acaba siendoel mejor método de aprendizaje de todos. Unavez que tengamos la base de conocimientosnecesario, ver el código fuente de las páginasweb que nos gusten es una forma de seguiraprendiendo en este mundo de la programación. Indice 64

×