1 / 36

HTML (HyperText Markup Language)

HTML (HyperText Markup Language). 1. Una Página básica. Principio esencial uso de ETIQUETAS (TAGS). <XXX> inicio de una orden </XXX> fin de la orden Estructura de un documento en HTML <HTML> <HEAD> Encabezamiento </HEAD> <BODY> Cuerpo </BODY> </HTML>. Encabezamiento

donald
Download Presentation

HTML (HyperText Markup Language)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML(HyperText Markup Language) autora: CATALINA FIOL ROIG cfiolroig@santjosepobrer.com

  2. 1. Una Página básica • Principio esencial uso de ETIQUETAS (TAGS). • <XXX> inicio de una orden • </XXX> fin de la orden • Estructura de un documento en HTML <HTML> <HEAD> Encabezamiento </HEAD> <BODY> Cuerpo </BODY> </HTML> autora: CATALINA FIOL ROIG cfiolroig@santjosepobrer.com

  3. Encabezamiento • <TITLE> • Título de la página • </TITLE> • Cuerpo del programa • Separación del texto en párrafos con una línea en blanco • <P> • Cabeceras o títulos (los tamaños van entre 1 hasta 6) • <H1> texto </H1> • <H2> texto </H2> • <H3> texto </H3> • <H4> texto </H4> • <H5> texto </H5> • <H6> texto </H6> • Centrado • <CENTER> texto </CENTER> • Separadores o barra incrustada • <HR> autora: CATALINA FIOL ROIG cfiolroig@santjosepobrer.com

  4. 2. Dando forma al texto • Separación de párrafos sin una línea en blanco • <BR> • Múltiples líneas en blanco • <BR><P> • <BR><P>… • Negrita • <B> texto </B> • Cursiva • <I> texto </I> • Para fórmulas matemáticas índices y subíndices • <SUP> texto </SUP> (índices)m2 m <SUP> 2 </SUP> • <SUB> texto </SUB> (subíndices)m2m <SUB> 2 </SUB> autora: CATALINA FIOL ROIG cfiolroig@santjosepobrer.com

  5. Listas • Listas desordenadas (no numeradas): sirven para presentar cosas que, por no tener un orden determinado, no necesitan ir precedidas por un número. <UL> <LI>Una cosa <LI>Otra cosa <LI>Otra más </UL> • Listas ordenadas (numeradas): sirven para presentar cosas en un orden determinado. <OL> <LI>Primera cosa <LI>Segunda cosa <LI>Tercera cosa </OL> autora: CATALINA FIOL ROIG cfiolroig@santjosepobrer.com

  6. Listas anidadas: Por ejemplo: <UL> <LI> AA <LI> BB <OL> <LI>BB1 <LI>BB2 </OL> <LI> CC </UL> autora: CATALINA FIOL ROIG cfiolroig@santjosepobrer.com

  7. Ejemplo práctico <html> <head> <title> Mi página Web- 2 </title> </head> <Body> <center> <h1> Mis aficiones </h1> </center> <hr> Sin un orden particular, mis <b> aficiones </b> son las siguientes: <ul> <li>El cine <li>El deporte <ul> <li>Natación <li>Baloncesto </ul> <li> la música </ul> La música que más me gusta es <I> (en orden de preferencia): </I> <ol> <li> el Rock <li> el jazz <li> la música clásica </ol> <Body> </html> autora: CATALINA FIOL ROIG cfiolroig@santjosepobrer.com

  8. Práctica Traduce la siguiente página WEB a su correspondiente código en lenguaje HTML: Nombre del documento: PagRep1-2.html Repaso Capítulos 1 y 2 En esta práctica estudiaremos:    • Listas ordenadas • Negritas • Cursivas • Opciones de párrafo • Centrado • Múltiples líneas en blanco • Enter • Enter + Línea en blanco • Fórmulas • H 2=C 2+C 2 • A n={a1 + a2 + a3 + a4 +….+ ak } • Listas desordenadas • Listas anidadas • Listas combinadas autora: CATALINA FIOL ROIG cfiolroig@santjosepobrer.com

  9. 3. Enlaces con otras páginas • Estructura general de un enlace • <A HREF=“XXX”> YYY </A> • XXX: destino del enlace (Nombre del archivo) • YYY: texto que indica el enlace • Tipos de enlaces: • Enlaces dentro de la misma página • Enlaces con otras páginas • Enlaces con una página fuera de nuestro sistema • Enlaces con una dirección e-mail autora: CATALINA FIOL ROIG cfiolroig@santjosepobrer.com

  10. 1. Enlaces dentro de la misma página <A HREF=“#marca”> YYY </A> #marca: Salta en el sitio de la página dónde hemos puesto la marca. Marca puede ser cualquier nombre. ¿Cómo se pone una marca dentro de un documento? <A NAME=“marca”> </A> Por ejemplo: Si deseo ir al final de este documento <A HREF=“#FINAL1”>Pulsa aquí para ir al final de la primera página </A> <A NAME=“FINAL1”> </A> autora: CATALINA FIOL ROIG cfiolroig@santjosepobrer.com

  11. 2. Enlaces con otra página nuestra <A HREF=“MIPAG1.HTML”>Ejemplo 2 <A> Si queremos que vaya a un sitio concreto de otra página nuestra en vez de ir al principio de la página (a donde va por defecto), es preciso indicarlo mediante una marca: <A HREF=“MIPAG1.HTML#fin_pag”>Ejemplo 2 <A>  En el archivo MIPAG1.HTML colocaremos la marca de final de documento en el final de éste de la siguiente forma: <A NAME=“fin_pag”> </A>  Observación importante: es conveniente tener todos nuestros archivos en el mismo directorio, de lo contrario tendrá que especificarse la ruta. autora: CATALINA FIOL ROIG cfiolroig@santjosepobrer.com

  12. 3. Enlaces con una página fuera de nuestro sistema <A HREF=“http://www.uib.es”>Universidad de las Islas Baleares </A> autora: CATALINA FIOL ROIG cfiolroig@santjosepobrer.com

  13. 4. Enlaces con una dirección e-mail En este caso, sustituimos lo que se ha llamado antes XXX (destino del enlace) por mailto: seguido de la dirección e-mail. <A HREF=“mailto: dirección e-mail”>texto del enlace </A> autora: CATALINA FIOL ROIG cfiolroig@santjosepobrer.com

  14. Ejemplo <html> <head> <title> Mi página web 3 </title> </head> <Body> <center> <h1> Mis páginas favoritas </h1> </center> <hr> Estas son mis páginas favoritas: <p> <a href=“http://www.uib.es”> UIB </a> <br> <a href=“http://www.microsoft.com”> Microsoft </a> <br> <a href=“http://www.google.com”> Buscador google </a> </Body> </html> autora: CATALINA FIOL ROIG cfiolroig@santjosepobrer.com

  15. Contenido de Tecnología de la Información Esta asignatura consta de los siguientes temas: Conceptos básicos Curso HTML Curso Excel Curso Acces (básico) Curso Word Iniciación a la programación estructurada Volver al inicio de la página Web oficial del colegio de San José Obrero de Palma Buzón de sugerencias Curso Conceptos básicos ¿Qué es la informática? ¿Qué es la informática? Aplicaciones Estructura del ordenador Definición de ordenador ¿Cómo funciona un ordenador? Partes que integran un ordenador Sistemas de numeración Sistema Binario Sistema octal Sistema hexadecimal Arquitectura de un PC Estudio de las diferentes partes que integran un PC Práctica Volver a la página principal Práctica: Crear las siguientes páginas con el bloc de notas Contenidos.html Concep_Basic.html cfr@hotmail.com autora: CATALINA FIOL ROIG cfiolroig@santjosepobrer.com

  16. 4. Imágenes • Etiqueta general <IMG SRC=“nombre_imagen.gif”> Si se desea que salga una descripción de la imagen para que en el caso de que no se carge LA IMAGEN se disponga de una breve descripción, se añadiría el comando ALT de la siguiente forma: <IMG SRC=“nombre_imagen.gif” alt=“descripción”> • Posición del título de la imagen <IMG SRC=“IMG1.gif” Align=MIDDLE> Título arriba Título en medio Título abajo <IMG SRC=“IMG1.gif” Align=BOTTOM> <IMG SRC=“IMG1.gif” Align=TOP> autora: CATALINA FIOL ROIG cfiolroig@santjosepobrer.com

  17. Img2.gif Img1.gif • Imagen como enlace a otra página <A HREF=“PAG.HTML”><IMG SRC=“IMG.GIF”> </A> • Borde de la imagen: Si no se desea que aparezca el rectángulo que rodea la imagen para resaltar el vínculo, hay que incluir dentro de la etiqueta de la imagen al atributo BORDER=0. <A HREF=“PAG.HTML”><IMG SRC=“IMG.GIF” BORDER=0> </A> • Imagen que enlaza con otra imagen <A HREF=“IMG1.GIF”><IMG SRC=“IMG2.GIF”> </A> autora: CATALINA FIOL ROIG cfiolroig@santjosepobrer.com

  18. Texto para enlazar con una imagen <A HREF=“IMG.GIF”> Ver la imagen IMG </A> autora: CATALINA FIOL ROIG cfiolroig@santjosepobrer.com

  19. Ejemplo: Copia el siguiente documento y guarda en tu carpeta de trabajo dos imágenes con los siguientes nombres hombre.gif, isla.gif y casa.gif. <HTML> <HEAD> <TITLE> Mi página del web 4 </TITLE> </HEAD> <BODY> <CENTER> <H1> Mi página del web </H1> </CENTER> <HR> Esta es mi página del web. No es muy extensa, pero tiene todos los elementos básicos. Espero que os guste. Poco a poco le iré añadiendo más cosas interesantes. <P> <A HREF=“MIPAG2.HTML”><IMG SRC=“hombre.gif”></A> Mis aficiones <P> <A HREF=“MIPAG3.HTML”><IMG SRC=“Casa.gif”></A> Mis páginas favoritas <CENTER> <H3> Un lugar ideal para mis vacaciones </H3> <IMG SRC=“Isla.gif” ALT=“isla”> </CENTER> </BODY> </HTML> autora: CATALINA FIOL ROIG cfiolroig@santjosepobrer.com

  20. Tecnología de la Información CONCEPTES BÀSICS I QUADERNS DE PRÀCTIQUES DE TECNOLOGIA DE LA INFORMACIÓ PER BATXILLERAT Col·legiSant Josep Obrer Després d’un parell d’anys de docència, de preparar material i estudiar les necessitats dels alumnes per que adquireixin els coneixements necessaris per estudis posteriors , ja sigui a la universitat o en la formació professional de grau superior, en l’àrea de la tecnologia de la informació he cregut convenient editar un material on el seu objectiu fundamental és facilitar pràctiques amb les que es pugui adquirir certa destresa en el maneig de les eines estudiades; amb l’inconvenient de que no és fàcil trobar bibliografia o material exclusivament pràctic que permeti als alumnes practicar i exercitar-se en el maneig de les eines, tot el contrari, el material que s’ofereix explica sobre tot el funcionament d’aquestes. Tornar a l’inici de la Pàgina principal Práctica Presentacio.html Presentación Objetivos del curso Contenido Contenidos.html Presentacio.html TecInf.html autora: CATALINA FIOL ROIG cfiolroig@santjosepobrer.com

  21. 6. Los estándares del HTML La mayoría de las etiquetas son estándar para todos los navegadores. • Etiqueta no estándar: el parpadeo <BLINK> Este texto parpadea </BLINK> • Separador horizontal <HR WIDTH=75%>Ocupará un 75% de su anchura normal <HR WIDTH=300>Tiene una anchura de 300 pixels <HR WIDTH=75% ALIGN=LEFT>Anchura del 75% con respecta a la anchura normal y alineada a la izquierda <HR WIDTH=75% ALIGN=RIGHT>Anchura del 75% con respecta a la anchura normal y alineada a la derecha <HR SIZE=20>Varia el espesor del separador autora: CATALINA FIOL ROIG cfiolroig@santjosepobrer.com

  22. Tamaño de las fuentes <FONT SIZE=5> Texto en tamaño 5 </FONT> Nota 1: Los tamaños del texto van, de menor a mayor, del 1 al 7. El tamaño normal Base es el de 3. Nota 2: Se puede cambiar el tamaño relativamente con respecto al tamaño base de la siguiente forma: <FONT SIZE=+2> Texto en tamaño 5 </FONT> <FONT SIZE=-2> Texto en tamaño 5 </FONT> • Tipos de fuentes Con el atributo FACE se indican varios tipos de fuentes distintas. <FONT FACE=“TAHOMA, VERDANA, IMPACT”> Tipo de Fuente tahoma </FONT> autora: CATALINA FIOL ROIG cfiolroig@santjosepobrer.com

  23. 7. Fondos • Fondo con un color uniforme <BODY BGCOLOR=“#XXYYZZ”> XX es un número indicativo de la cantidad de rojo YY es un número indicativo de la cantidad de verde ZZ es un número indicativo de la cantidad de azul Numeración en Hexadecimal={0,1,2,3,4,5,6,7,8,9, A, B, C, D, E, F} MENOR MAYOR Colores primarios Rojo #FF0000 Verde #00FF00 Azul #0000FF Otros colores Blanco #FFFFFF Negro #000000 Amarillo #FFFF00 Rojo oscuro #AA0000 Rosa # FF7070 autora: CATALINA FIOL ROIG cfiolroig@santjosepobrer.com

  24. Colores del texto y de los enlaces TEXT color del texto LINK color de los enlaces VLINK color de los enlaces visitados <BODY BGCOLOR=“#XXYYZZ” TEXT =“#XXYYZZ” LINK=“#XXYYZZ” VLINK =“#XXYYZZ” > • Cambio del color de una parte del texto <FONT COLOR=“#XXYYZZ”> Texto </FONT> Recuerda que… <FONT FACE=“Arial” SIZE=4 COLOR=“#XXYYZZ”> Texto </FONT> • Fondos con una imagen <BODY BACKGROUND=“IMAGEN.GIF”> autora: CATALINA FIOL ROIG cfiolroig@santjosepobrer.com

  25. Características de la página Tipo de fuente: Tahoma Color de la fuente: Azul pastel Color de fondo: Lila Pastel Color enlaces: Amarillo Color enlaces visitados: Rojo Tamaño títulos: H2 Tamaño fuente: 4 Largo de la barra (HR)=75% Nombre de la página: Word.html Curso de Word 1. Conceptos básicos Práctica 1 Práctica 2 Práctica 3 2. Tablas y tabulaciones Práctica 4 Práctica 5 Práctica 6 3. Herramientas del Word Práctica 7 Práctica 8 Práctica 9 4. Opciones del párrafo Práctica 10 Práctica 11 Práctica 12 5. Trabajo con hojas de cálculo y gráficos Práctica 13 Práctica 14 Práctica 15 6. Hipervínculos, objetos y otras opciones Práctica 16 Práctica 17 Práctica 18 7. Exámenes de prueba Examen 1 Volver a contenidos autora: CATALINA FIOL ROIG cfiolroig@santjosepobrer.com

  26. 8. Alineación y dimensionado de las imágenes • Alineación a la izquierda o a la derecha de una imagen en la página Un ordenador llamado también computadora, es la máquina que hace una serie de operaciones simples (sumas, restas, multiplicaciones, divisiones, lecturas, impresiones, etc.) es un tiempo mínimo y con la máxima seguridad. <IMG SRC=“ordenador.gif” ALIGN=LEFT> La aplicación de la informática comercial cada día llega a más áreas de la sociedad, desde la automatización de ciertos electrodomésticos hasta los grandes ordenadores de ciertas empresas. <IMG SRC=“ordenador.gif” ALIGN=RIGHT> autora: CATALINA FIOL ROIG cfiolroig@santjosepobrer.com

  27. Interrumpir el proceso de rellenado del texto a los lados de la imagen <BR CLEAR=LEFT> Busca el primer margen libre a la izquierda <BR CLEAR=RIGHT> Busca el primer margen libre a la derecha <BR CLEAR=ALL>  Busca el primer margen libre a ambos lados Ejemplo 1: Los periféricos corresponden a los elementos que proporcionan la información al ordenador y a los elementos por los cuales el ordenador suministra los resultados del proceso. <BR CLEAR=RIGHT> Los datos de entrada suministran la información necesaria al ordenador para que pueda resolver un problema. Ejemplo 2: Los periféricos corresponden a los elementos que proporcionan la información al ordenador y a los elementos por los cuales el ordenador suministra los resultados del proceso. <BR CLEAR=LEFT> Los datos de entrada suministran la información necesaria al ordenador para que pueda resolver un problema. autora: CATALINA FIOL ROIG cfiolroig@santjosepobrer.com

  28. Dimensionado de una imagen WIDTH: ancho HEIGHT: alto <IMG SRC=“IMAGEN.GIF” WIDTH=50 HEIGHT=50> <IMG SRC=“boton.gif” WIDTH=50 HEIGHT=25> autora: CATALINA FIOL ROIG cfiolroig@santjosepobrer.com

  29. Objetivos del curso En general, los objetivos que se consideran fundamentales en esta i todas las asignaturas son: ¿Cómo llevar a cabo estos objetivos? Expresión y comprensión de mensajes. Para ello se incidirá en la utilización correcta de los conceptos y terminología especifica del mundo de la informática. Tratamiento de la información. Organizando adecuadamente la información utilizando para ello las herramientas oportunas. Resolución de problemas. Resoldre problemes d’un certa dificultat amb el maneig del programa full de càlcul. Actitudes básicas como la constancia y regularidad. Práctica • Muchas ganas de aprender • Interés • Ilusión • Curiosidad • Constancia • … Volver a la página principal Volver a la página principal ObjetivosII.html autora: CATALINA FIOL ROIG cfiolroig@santjosepobrer.com ObjetivosI.html

  30. 10. Tablas <table> etiquetas </table> • Estructura de una tabla <table border=2> <tr> <td> Text1 </td> <td> Text2 </td> <td> Text3 </td> </tr> <tr> <td> aa </td> <td> bb </td> <td> cc </td> </tr> <tr> <td> dd </td> <td> ee </td> <td> ff </td> </tr> <tr> <td> gg </td> <td> hh </td> <td> ii</td> </tr> </table> autora: CATALINA FIOL ROIG cfiolroig@santjosepobrer.com

  31. Filas con desigual números de celdas <table border=2> <tr> <td> Text1 </td> <td> Text2 </td> <td> Text3 </td> </tr> <tr> <td> aa </td> <td> bb </td> <td> cc </td> </tr> <tr> <td> dd </td> <td> ee </td> </tr> </table> Titular de la tabla <caption> Título de la tabla </caption> Título de la tabla • Celdas de cabecera En lugar de <TD> texto </TD> escribir <TH> texto </TH> y pondrá en negrita y centrado las celdas cabecera. autora: CATALINA FIOL ROIG cfiolroig@santjosepobrer.com

  32. Contenido de las celdas • Imágenes y Enlaces <table> <tr> <td><img src=“img1.jpg”></td> <td valign=TOP>Texto1</td> </tr> <tr> <td align=RIGHT><A href=“mipag1.html”>Enlace </a></td> <td>Texto2</td> </tr> <tr> <td> Texto3</td> <td>Texto4</td> </tr> </table> autora: CATALINA FIOL ROIG cfiolroig@santjosepobrer.com

  33. Posicionamiento del contenido dentro de la celda <table> <tr> <td><img src=“img1.jpg”></td> <td valign=Bottom>Texto1</td> </tr> <tr> <td align=Center><A href=“mipag1.html”>Enlace </a></td> <td>Texto2</td> </tr> <tr> <td> Texto3</td> <td>Texto4</td> </tr> </table> autora: CATALINA FIOL ROIG cfiolroig@santjosepobrer.com

  34. Dimensiones de la tabla Ancho  <table Width=Nº%> Alto <table Height=Nº%> • Combinar celdas: Filas y Columnas <table border=2> <tr> <td colspan=2> Text1 </td> <td> Text2 </td> </tr> <tr> <td rowspan=3> aa </td> <td> bb </td> <td> cc </td> </tr> <tr> <td> ee </td> <td> ff </td> </tr> <tr> <td> hh </td> <td> ii</td> </tr> </table> autora: CATALINA FIOL ROIG cfiolroig@santjosepobrer.com

  35. Color de fondo en las tablas • Color en la totalidad de la tabla <table bgcolor=“#XXYYZZ”> • Color en una celda determinada <td bgcolor=“#XXYYZZ”> texto </td> • Imágenes de fondo en las tablas <table background=“img.jpg”> • Separación entre las celdas de una tabla <table border cellspacing=20> • Separación entre el borde y el contenido dentro de las celdas <table border cellpadding=20> autora: CATALINA FIOL ROIG cfiolroig@santjosepobrer.com

  36. Prácticas: Crea las siguientes tablas utilizando el lenguaje HTML Tabla 1 Tabla 2 Tabla 3 Tabla 4 Tabla 5 autora: CATALINA FIOL ROIG cfiolroig@santjosepobrer.com

More Related