Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CURSO SOBRE HTML

330 views

Published on

CURSO PRACTICO Y SENCILLO PARA APRENDER EL LENGUAJE HTML, PARA APRENDICES.

  • Be the first to comment

  • Be the first to like this

CURSO SOBRE HTML

  1. 1. DISEÑO DE PAGINAS WEB SErvI-WEBStING “rOBErt” AGOStO, 2010 tEól-INfOrmátIcO rOBErtO rOmErO • HTML (HiperText Markup Language) • El cuerpo del documento • Caracteres especiales • Imágenes • Alineación y formato de texto • Listas • Enlaces • Tablas • Formularios • Tipos de controles • Maquetación INTRODUCCIÓN AL HTML
  2. 2. DISEÑO DE PAGINAS WEB SErvI-WEBStING “rOBErt” AGOStO, 2010 tEól-INfOrmátIcO rOBErtO rOmErO •HTML trata de definir la estructura de los documentos, aunque también tenga alguna posibilidad de modificar su apariencia. •Se puede definir la estructura de un documento como la relación que mantienen las partes del mismo entre ellas. •Esto contrasta con el uso de los procesadores de texto que consideran solo la apariencia de los documentos, y casi nunca su estructura. HTML (HiperText Markup Language)
  3. 3. DISEÑO DE PAGINAS WEB SErvI-WEBStING “rOBErt” AGOStO, 2010 tEól-INfOrmátIcO rOBErtO rOmErO Etiqueta: un código que se inserta en el contenido del documento para determinar la estructura del mismo (<TAG> y </TAG>). Atributo: aporta información adicional que modifica el comportamiento de las etiquetas (atributo="valor"). Navegador: Programa especializado en evaluar las etiquetas y el contenido de un documento HTML y de mostrarlo conforme a las posibilidades del sistema. También se encarga de solicitar nuevos documentos según HTTP. TERMINOLOGÍA
  4. 4. DISEÑO DE PAGINAS WEB SErvI-WEBStING “rOBErt” AGOStO, 2010 tEól-INfOrmátIcO rOBErtO rOmErO <HTML> <HEAD> <!­­ esto es la cabecera del documento ­­> <META NAME=valor CONTENT=contenido> <TITLE> Aquí va el titulo del documento</TITLE> <link rel="stylesheet" type="" text/css="" href="estilos/css.css“> <script language="JavaScript" type="text/javascript" src="validacion.js"> </script> </HEAD> <BODY> <!­­ este es el cuerpo del documento ­­> </BODY> </HTML> EL CUERPO DEL DOCUMENTO
  5. 5. DISEÑO DE PAGINAS WEB SErvI-WEBStING “rOBErt” AGOStO, 2010 tEól-INfOrmátIcO rOBErtO rOmErO ETIQUETA <HTML> •Marca el comienzo y el final del documento. •En la práctica este par de etiquetas puede parecer opcional, sobre todo la de cierre, pues muchos navegadores admiten documentos sin ella, pero esto puede confundir a otros navegadores que rechazarán la página Web o la mostrarán de manera impredecible. •Cualquier etiqueta del documento debe aparecer entre el par de etiquetas <HTML> y </HTML>. EL CUERPO DEL DOCUMENTO
  6. 6. DISEÑO DE PAGINAS WEB SErvI-WEBStING “rOBErt” AGOStO, 2010 tEól-INfOrmátIcO rOBErtO rOmErO ETIQUETA <HEAD> <TITLE> <LINK> •La etiqueta <HEAD> Contiene las definiciones globales a todo el documento •El título del documento: <TITLE> título </TITLE> que será mostrado en la barra de título del browser, por lo que deben ser cortos y representativos. •Relaciones entre este documento y otros documentos Web para determinar un mismo modo de impresión, hojas de estilo o scripts: <LINK>. •<SCRIPT> Incluye código de lenguajes del lado del cliente o hace referencia a archivos donde están descritos los script. EL CUERPO DEL DOCUMENTO
  7. 7. DISEÑO DE PAGINAS WEB SErvI-WEBStING “rOBErt” AGOStO, 2010 tEól-INfOrmátIcO rOBErtO rOmErO ETIQUETA <META> •<META NAME=valor CONTENT=contenido> •El modo en que el documento debe ser tratado o información utilizable por motores de búsqueda y otros: <META>. •Author identifica el autor que creó la página, y algunas veces el nombre del editor HTML usado para crear la página. •Description da una explicación de la página o de su uso, y suele ser utilizado por los motores de búsqueda para hacer un resumen de la página. •Copyright es el aviso oficial de derechos de copia de la página. EL CUERPO DEL DOCUMENTO
  8. 8. DISEÑO DE PAGINAS WEB SErvI-WEBStING “rOBErt” AGOStO, 2010 tEól-INfOrmátIcO rOBErtO rOmErO ETIQUETA <BODY> <BODY [bgcolor=valor] [onload=accion] [onunload=accion]> </BODY> •Determina la parte visible del documento. Bgcolor: determina el color de fondo en tres códigos hexadecimales o alguno de los 16 colores predefinidos (white, black, blue, green, etc). Onload: determina el script a ejecutar cuando la página ha sido cargada y antes de ser mostrada. Onunload: lo mismo que en el caso anterior pero cuando la página se abandona para ir a otra. EL CUERPO DEL DOCUMENTO
  9. 9. DISEÑO DE PAGINAS WEB SErvI-WEBStING “rOBErt” AGOStO, 2010 tEól-INfOrmátIcO rOBErtO rOmErO La etiqueta <IMG> sirve para situar imágenes en una página. Esta etiqueta no tiene etiqueta de cierre. <img src=”RUTA DE IMAGEN” border=0 width = ”2” height=”9”> IMAGENES
  10. 10. DISEÑO DE PAGINAS WEB SErvI-WEBStING “rOBErt” AGOStO, 2010 tEól-INfOrmátIcO rOBErtO rOmErO •Encabezamientos <H1..5> •Párrafos <P> •Nueva Línea <BR> •Texto Preformateado <PRE> •Modificación de la Apariencia <EM>, <STRONG> etc. ALINIACIÓN Y FORMATEO DE TEXTO
  11. 11. DISEÑO DE PAGINAS WEB SErvI-WEBStING “rOBErt” AGOStO, 2010 tEól-INfOrmátIcO rOBErtO rOmErO ENCABEZAMIENTO •<Hn> encabezado de nivel n </Hn> •HTML permite definir 6 niveles de encabezados, siendo el 1 el más importante. •Los browsers utilizan un tipo de letra mayor y más negrita para un nivel que para el siguiente. •Un encabezado ocupa siempre una línea en exclusiva. •Sirven para simular los títulos de capítulos, secciones, etc. pero no determinan que los párrafos que les siguen pertenezcan a capítulo o sección alguna. ALINIACIÓN Y FORMATO DE TEXTO
  12. 12. DISEÑO DE PAGINAS WEB SErvI-WEBStING “rOBErt” AGOStO, 2010 tEól-INfOrmátIcO rOBErtO rOmErO PARRAFO •<P> esto es un párrafo </P> •Un párrafo comienza en una línea nueva y se mantiene junto. •Aunque la etiqueta de cierre es opcional y se puede omitir se recomienda su utilización siempre. •Cada párrafo debe especificar su alineamiento con el atributo align, si no se les aplicará el por defecto (align=right). •Se pueden introducir saltos de línea dentro de un párrafo con <BR>, etiqueta que no se cierra. ALINIACIÓN Y FORMATO DE TEXTO
  13. 13. DISEÑO DE PAGINAS WEB SErvI-WEBStING “rOBErt” AGOStO, 2010 tEól-INfOrmátIcO rOBErtO rOmErO FONT La etiqueta FONT se emplea para formatear el tipo y tamaño del texto en algunos puntos del documento específicos. <FONT FACE="arial" SIZE=5 COLOR=red>Tipo para formatear </FONT> ALINIACIÓN Y FORMATO DE TEXTO
  14. 14. DISEÑO DE PAGINAS WEB SErvI-WEBStING “rOBErt” AGOStO, 2010 tEól-INfOrmátIcO rOBErtO rOmErO TEXTO PREFORMATEADO •<PRE> texto tal cual queremos que aparezca </PRE> •Permite describir la forma en que queremos que aparezca un texto, respetando el espaciado y los saltos de línea. •El texto es presentado con una fuente de paso fijo. ALINIACIÓN Y FORMATO DE TEXTO
  15. 15. DISEÑO DE PAGINAS WEB SErvI-WEBStING “rOBErt” AGOStO, 2010 tEól-INfOrmátIcO rOBErtO rOmErO ENFATIZACIÓN •El mismo efecto se puede conseguir con <I> y <B> pero perdemos el significado estructural de que queremos enfatizar algo, quedándonos exclusivamente en la forma física final. ALINIACIÓN Y FORMATO DE TEXTO
  16. 16. DISEÑO DE PAGINAS WEB SErvI-WEBStING “rOBErt” AGOStO, 2010 tEól-INfOrmátIcO rOBErtO rOmErO •HTML proporciona un conjunto de etiquetas especiales para gestionar las listas, teniendo algún control sobre su apariencia. •Las listas se pueden anidar. •Listas Ordenadas: muestran un conjunto de items numerados para mostrar algún tipo de jerarquía o importancia. •Listas Sin Orden: muestran un conjunto de items sin que el orden en que son mostrados implique grado de importancia o de jerarquía alguno. LISTAS
  17. 17. DISEÑO DE PAGINAS WEB SErvI-WEBStING “rOBErt” AGOStO, 2010 tEól-INfOrmátIcO rOBErtO rOmErO <OL> <LI> item 1 </LI> <LI> item 2 </LI> ... <LI> item n </LI> </OL> •Se puede controlar el número inicial de la serie: <OL start=numero>. •También se puede elegir el conjunto de caracteres que identifica cada item en la lista: <OL type=tipo>, con tipo a elegir entre 1 para arábico, a o A para alfabético e i o I para romano. LISTAS ORDENADAS
  18. 18. DISEÑO DE PAGINAS WEB SErvI-WEBStING “rOBErt” AGOStO, 2010 tEól-INfOrmátIcO rOBErtO rOmErO <UL> <LI> item 1 </LI> <LI> item 2 </LI> ... <LI> item n </LI> </UL> •Se puede controlar el tipo de indicador de los items: <UL bullet=tipo> donde tipo es uno a elegir entre circle, square y disc. LISTAS DESORDENADAS
  19. 19. DISEÑO DE PAGINAS WEB SErvI-WEBStING “rOBErt” AGOStO, 2010 tEól-INfOrmátIcO rOBErtO rOmErO <UL> <LI> item 1 </LI> <LI> item 2 </LI> ... <LI> item n </LI> </UL> •Se puede controlar el tipo de indicador de los items: <UL bullet=tipo> donde tipo es uno a elegir entre circle, square y disc. LISTAS DESORDENADAS
  20. 20. DISEÑO DE PAGINAS WEB SErvI-WEBStING “rOBErt” AGOStO, 2010 tEól-INfOrmátIcO rOBErtO rOmErO •<A name=nombre href=destino> origen </A> •Los hiperenlaces son la esencia del Web. •Permiten ir de un documento a otro siguiendo los caminos que han sido marcados por los creadores de los documentos Web. •Tienen dos componentes: el ancla fuente y el ancla destino. •Un ancla es una zona con nombre dentro de un documento HTML. HIPER ENLACES
  21. 21. DISEÑO DE PAGINAS WEB SErvI-WEBStING “rOBErt” AGOStO, 2010 tEól-INfOrmátIcO rOBErtO rOmErO Tiene dos usos: Como ancla para definir una referencia dentro de un documento. <a name=“inicio”>Inicio:</a> Como enlace a otra página ó a un ancla. <a href=“#inicio” target=“_self”>Inicio</a> <a href=“../../index.html” target=“algunframe”>Indice</a> <a href=“http://www.google.com/search?q=escafandra” target=“_blank”> Búsqueda de Escafandra en Google</a> HIPER ENLACES
  22. 22. DISEÑO DE PAGINAS WEB mISION SUcrE EDO. SUcrE SEPtIEmBrE, 2008 PrOf. lUIS BrItO PrOf. vIctOr UzcAtEGUI •<TABLE> Tag de Inicio de la tabla. •<CAPTION> Establece título a la tabla. •<TR> Especifica cada fila. •<TH> Declara el encabezado de cada columna. •<TD> delimita cada celda dentro de cada fila (Columnas). TABLAS
  23. 23. DISEÑO DE PAGINAS WEB SErvI-WEBStING “rOBErt” AGOStO, 2010 tEól-INfOrmátIcO rOBErtO rOmErO La etiqueta <TABLE> puede tener los siguientes atributos: align: controla la colocación dentro de la página y acepta los valores left, right o center. width: determina la anchura de la tabla en pixels o en un porcentaje de la anchura de la ventana del browser, 50% por ejemplo. border: determina la anchura en pixels del borde si lo hay. cellspacing: el espacio en pixels entre celdas. cellpadding: el espacio en pixels entre el final de la celda y su contenido. TABLAS
  24. 24. DISEÑO DE PAGINAS WEB SErvI-WEBStING “rOBErt” AGOStO, 2010 tEól-INfOrmátIcO rOBErtO rOmErO •Un formulario es una manera que provee HTML para interactuar con el usuario quien necesita procesar cierta información. •Es una sección de un documento que contiene texto, etiquetas, elementos especiales llamados controles con sus etiquetas a través de los cuales se recopila la información deseada. •Generalmente el procesamiento de la información se realiza en el servidor web, pero también se puede enviar la información a un correo electrónico. FORMULARIOS
  25. 25. DISEÑO DE PAGINAS WEB SErvI-WEBStING “rOBErt” AGOStO, 2010 tEól-INfOrmátIcO rOBErtO rOmErO <HTML> <HEAD> … </HEAD> <BODY> <FORM action = “…..” method = “….” > …… </ FORM> ….. Action: indica la acción a realizar (enviar a un correo, al servidor) method: indica como será enviado FORMULARIOS
  26. 26. DISEÑO DE PAGINAS WEB SErvI-WEBStING “rOBErt” AGOStO, 2010 tEól-INfOrmátIcO rOBErtO rOmErO ATRIBUTO ACTION Especifica un agente de procesamiento “URL HTTP”: envia los datos a un programa en un servidor. <form action=“http://mipagina/programa" method="post"> “URL mailto”: envia los datos a una dirección de correo electrónico. <form action="mailto:direcciondelcorreo@correo.com" method="post" enctype="text/plain"> FORMULARIOS
  27. 27. DISEÑO DE PAGINAS WEB SErvI-WEBStING “rOBErt” AGOStO, 2010 tEól-INfOrmátIcO rOBErtO rOmErO ATRIBUTO METHOD Especifica el método utilizado para enviar los datos Get (valor por defecto) los datos a enviar se añaden al URL (valor del atributo action) separados por el símbolo “?”, se usa generalmente cuando se desea hacer consulta del servidor. Post los datos introducidos se incluyen en el cuerpo del formulario y se los envía. Se usa generalmente para procesos de actualización de datos. FORMULARIOS
  28. 28. DISEÑO DE PAGINAS WEB SErvI-WEBStING “rOBErt” AGOStO, 2010 tEól-INfOrmátIcO rOBErtO rOmErO Tipos de controles • Campos de texto o contraseña • Campos áreas de texto • Casillas de verificación (checkbox) • Botones de opción (radiobuttons) • Campo de selección (combobox ) • Botones FORMULARIOS
  29. 29. DISEÑO DE PAGINAS WEB SErvI-WEBStING “rOBErt” AGOStO, 2010 tEól-INfOrmátIcO rOBErtO rOmErO CUADRO DE TEXTO O CONTRACEÑA Cuadros de texto Puede ser De una sola línea <Input Type = “Text” name=“Nombre” Size=“25” Maxlength=“20”> De varias lineas <Textarea name=“Comentarios” Cols=“30” Rows=“10”> Escriba comentarios … </Textarea> Con Contraseña: <input type="password" name="contraseña"> FORMULARIOS
  30. 30. DISEÑO DE PAGINAS WEB SErvI-WEBStING “rOBErt” AGOStO, 2010 tEól-INfOrmátIcO rOBErtO rOmErO BOTONES DE RADIO <input Type = “radio” name = “sexo” value = “Hombre” checked> <input Type = “radio” name = “sexo” value = “Mujer”> Se comportan igual que las casillas de verificción pero si comparten el mismo nombre son mutuamente excluyentes. FORMULARIOS
  31. 31. DISEÑO DE PAGINAS WEB SErvI-WEBStING “rOBErt” AGOStO, 2010 tEól-INfOrmátIcO rOBErtO rOmErO CASILLAS DE SELECCIÓN Son del tipo si/no, on/off o verdadero/false <input Type = “checkbox” name = “opcion” value = “ON” checked> • Pueden compartir el mismo nombre (name). • El atributo checked hace que este preseleccionada. FORMULARIOS
  32. 32. DISEÑO DE PAGINAS WEB SErvI-WEBStING “rOBErt” AGOStO, 2010 tEól-INfOrmátIcO rOBErtO rOmErO LISTAS DE OPCIONES Listas de Opciones (Select): <select name="transporte"> <option>Carro</option> <option Selected>Avión</option> <option>Tren</option> <option>Barco</option> </select> FORMULARIOS
  33. 33. DISEÑO DE PAGINAS WEB SErvI-WEBStING “rOBErt” AGOStO, 2010 tEól-INfOrmátIcO rOBErtO rOmErO BOTONES Submit: los datos del formulario son enviados por el método correspondiente. <input Type = “submit” value = “Enviar” > Reset: Restablece todos los controles a sus valores iniciales <input Type = “reset” value = “borrar” > FORMULARIOS
  34. 34. DISEÑO DE PAGINAS WEB SErvI-WEBStING “rOBErt” AGOStO, 2010 tEól-INfOrmátIcO rOBErtO rOmErO •Podemos definir la distancia entre líneas del documento. •Se puede aplicar identado a las primeras líneas del párrafo. •Podemos colocar elementos en la página con mayor precisión, y sin lugar a errores. •Y mucho más, como definir la visibilidad de los elementos, margenes, subrayados, tachados... • Se definen atributos en las páginas utilizando unidades como: Pixels (px) , porcentaje (%), Pulgadas (in), Puntos (pt) , Centímetros (cm) MAQUETACIÓN
  35. 35. DISEÑO DE PAGINAS WEB SErvI-WEBStING “rOBErt” AGOStO, 2010 tEól-INfOrmátIcO rOBErtO rOmErO Pequeñas partes de la página <p> Esto es un párrafo en varias palabras <SPAN style="color:green">en color verde</SPAN>. resulta muy fácil. </p> Estilo definido para una etiqueta <p style="color:#990000"> Esto es un párrafo de color rojo. </p> <p style="color:#000099“> Esto es un párrafo de color azul. </p> MAQUETACIÓN
  36. 36. DISEÑO DE PAGINAS WEB SErvI-WEBStING “rOBErt” AGOStO, 2010 tEól-INfOrmátIcO rOBErtO rOmErO Estilo definido en una parte de la página Con la etiqueta <DIV> podemos definir secciones de una página y aplicarle estilos con el atributo style, es decir, podemos definir estilos de una vez a todo un bloque de la página. <div style="color:#000099; font-weight:bold"> <h3>Estas etiquetas van en <i>azul y negrita</i></h3> <p> Seguimos dentro del DIV, luego permanecen los etilos </p> </div> MAQUETACIÓN
  37. 37. DISEÑO DE PAGINAS WEB SErvI-WEBStING “rOBErt” AGOStO, 2010 tEól-INfOrmátIcO rOBErtO rOmErO Estilo definido para toda una página <html> <head> <title>Ejemplo de estilos para toda una p&aacute;gina</title> <STYLE type="text/css"> <!-- H1 {text-decoration: underline; text-align:center} P {font-Family:arial,verdana; color: white; background-color: black} BODY {color:black;background-color: #cccccc; text-indent:1cm} // --> </STYLE> </head> <body> <h1>P&aacute;gina con estilos</h1> Bienvenidos... <p>Siento ser tan hortera, pero esto es un ejemplo sin m&aacute;s importancia</p> </body> </html> MAQUETACIÓN
  38. 38. DISEÑO DE PAGINAS WEB SErvI-WEBStING “rOBErt” AGOStO, 2010 tEól-INfOrmátIcO rOBErtO rOmErO Estilo definido para todo un sitio web Creamos el fichero con la declaración de estilos MAQUETACIÓN P  {  font-size : 12pt;  font-family : arial,helvetica;  font-weight : normal;}  H1  { $ font-size : 36pt;  font-family : verdana,arial;  text-decoration : underline;  text-align : center;  background-color : Teal;} TD { font-size : 10pt; font-family : verdana,arial; text-align : center; background-color : 666666;} BODY { background-color : #006600; font-family : arial; color : White;}
  39. 39. DISEÑO DE PAGINAS WEB SErvI-WEBStING “rOBErt” AGOStO, 2010 tEól-INfOrmátIcO rOBErtO rOmErO Enlazamos la página web con la hoja de estilos •rel="STYLESHEET" indicando que el enlace es con una hoja de estilos •type="text/css" porque ela archivo es de texto, en sintaxis CSS •href="estilos.css" indica el nombre del fichero fuente de los estilos MAQUETACIÓN
  40. 40. DISEÑO DE PAGINAS WEB SErvI-WEBStING “rOBErt” AGOStO, 2010 tEól-INfOrmátIcO rOBErtO rOmErO Enlazamos la página web con la hoja de estilos <html> <head> <link rel="STYLESHEET" type="text/css" href="estilos.css"> <title>P&aacute;gina que lee estilos</title> </head><body> <h1>P&aacute;gina que lee estilos</h1> Esta p&aacute;gina tiene en la cabecera la etiqueta necesaria para enlazar con la hoja de estilos. Es muy f&aacute;cil.<br><br> <table width="300" cellspacing="2" cellpadding="2" border="0"> <tr> <td>Esto est&aacute; dentro de un TD, luego tiene estilo propio, declarado en el fichero externo</td></tr> <tr> <td>La segunda fila del TD</td> </tr> </table></body> </html> MAQUETACIÓN
  41. 41. DISEÑO DE PAGINAS WEB SErvI-WEBStING “rOBErt” AGOStO, 2010 tEól-INfOrmátIcO rOBErtO rOmErO Definir estilos utilizando clases <html> <head> <title>Ejemplo de la utilizaci&oacute;n de clases</title> <STYLE type="text/css"> .fondonegroletrasblancas {background-color:black;color:white;font-size:12;font- family:arial} .letrasverdes {color:#009900} </STYLE> </head> <body> <h1 class=letrasverdes>Titulo 1</h1> <h1 class=fondonegroletrasblancas>Titulo 2</h1> <p class=letrasverdes> Esto es un p&aacute;rrafo con estilo de letras verdes</p> <p class=fondonegroletrasblancas> Esto es un p&aacute;rrafo con estilo de fondo negro y las letras blancas. Es todo!</p> </body> </html> MAQUETACIÓN
  42. 42. DISEÑO DE PAGINAS WEB Estilo en los enlaces <html> <head> <title>Ejemplos de estilo en enlaces</title> <STYLE type="text/css"> A:link {text-decoration:none;color:#0000cc;} A:visited {text-decoration:none;color:#ffcc33;} A:active {text-decoration:none;color:#ff0000;} A:hover {text-decoration:underline;color:#999999;font-weight:bold} </STYLE> </head> <body> <a href="http://dominioinexistente.nofunciona.com">Enlace normal</a> <a href="enlaces.html">Enlace visitado</a> Pulsar este enlace para verlo activo, poner el rat&oacute;n por encima para que cambie. </body> </html> MAQUETACIÓN SErvI-WEBStING “rOBErt” AGOStO, 2010 tEól-INfOrmátIcO rOBErtO rOmErO
  43. 43. DISEÑO DE PAGINAS WEB SErvI-WEBStING “rOBErt” AGOStO, 2010 tEól-INfOrmátIcO rOBErtO rOmErO Atributos de las capas •Position (relative , absolute) •Top •Left •Height •Width •Visibility (visible , hidden , inherit ) MAQUETACIÓN

×