Internet y HTML (Hypertext Markup Language)
Anuncio
CURSO DE INTERNET INTERNET: PRINCIPIOS BÁSICOS 1.− Conceptos básicos. 2.− Protocolo de transferencia de ficheros FTP. NAVEGACIÓN 1.− Concepto de INTERNET: Navegación. 2.− El navegador NETSCAPE. 3.− Correo Electrónico INTERNET. CREACIÓN DE PÁGINAS WEB: HTML 1.− Generación de páginas tipo. 2.− Lenguaje HTML. Módem : − Interno: sólo para un ordenador concreto en el que va dentro. − Externo: módulo independiente del ordenador. El módem transforma la señal que sale del ordenador para que sea apta para la línea telefónica. El ordenador, a través del Módem se conecta a la línea telefónica, además se necesita contratar un servidor, (infovia => Telefónica proporciona el OSS para Internet). A través de la línea nos conectamos con un proveedor que proporciona la información de Internet a los usuarios. ORDENADOR ! MÓDEM ! LÍNEA ! PROVEEDOR ! ... ! INTERNET Proveedor: Nos da la conexión a Internet. Es la empresa que pagando, te hace la conexión con la red. URL: Es la dirección que nos permite acceder a cualquier fichero de Internet. Tiene un formato: // proveedor / ruta / nombre del fichero Con el EXPLORER podemos poner http, news, FTP (transferencia de ficheros ; es un servicio que proporciona internet). Dependiendo de la dirección o extensión que tenga el fichero, podemos ver que tiene o qué es: • COM : se trata de una organización comercial. • EDU : es una institución educativa. • INT : es una organización internacional. 1 • NET : es un proveedor de red. • ORG : otras organizaciones. Dependiendo del país: • ES : España. • UK : Reino Unido. • US : EE.UU. • IT : Italia. • FR : Francia. Para guardar una imagen, nos colocamos con el ratón sobre ella y se pulsa la parte derecha de éste, y en guardar imagen. Páginas Web : HTML La extensión html permite describir la estructura del documento. Así la estructura del documento html es de la forma : TÍTULO está siempre en la cabecera. PÁRRAFO LISTAS en el cuerpo del documento FORMULARIOS Ventajas del HTML: − Tiene muy pocas etiquetas. − Está basado en la estructura, no en el aspecto. − Son ficheros compatibles con cualquier visualizador web. − Son ficheros pequeños, rápidos. Desventajas del HTML: − Existe un determinado número de etiquetas, por lo que no se pueden crear más. − Es muy limitado ya que las opciones para realizar la estructura no son muy numerosas. − No se sabe con seguridad como se va a visualizar el documento. Comandos Básicos de HTML Tipos de comandos: • Comandos estructurales: identifican un fichero como fichero html. • Comandos de formatos de párrafos: especifican distintos tipos de párrafos y diferentes niveles de encabezamiento. 2 • Comandos de formato de caracteres: sirven para poner estilos (negrita, cursiva, subrayado...). • Comandos de especificación de listas. • Comandos de Hiperenlace: para ir de un documento a otro. • Comandos de integración : sirven para acceder a información en formato multimedia (videos musicales, películas...). Etiquetas Son realmente las instrucciones que le van a indicar al visualizador como presentar el texto en pantalla. Todas van precedidas del símbolo < y finalizan con el símbolo >. (<nombre de etiqueta>). Van a existir etiquetas con un solo elemento y etiquetas con el mismo nombre que la anterior. <nombre> ...............................</nombre> esto es lo que se verá afectado Para especificar el formato html, la etiqueta es la siguiente: ( se trata de una etiqueta doble, una para abrir el documento y otra que lo cierra). <HTML> ( al ppio) </HTML> (al final) Etiquetas (continuación) Etiqueta de cabecera: <HEAD> ; donde irá el título del documento: <HTML> <HEAD> <TITTLE> ......................</TITTLE> (dentro de la cabecera ) </HEAD> <BODY> (se abre el cuerpo del programa) ..................................... </BODY> (se cierra el cuerpo) </HTML> (se cierra el documento) En html se pueden hacer comentarios: <! − ........−> <BR>: para saltar de línea. El visualizador muestra el contenido de un párrafo adaptándose al contenido de la ventana. <P>: esta etiqueta se pone al final del párrafo y provoca un salto de línea. 3 Especificación de cabecera: sirven para marcar las divisiones de un documento. Existen 6 niveles de cabecera. Desde <H1> hasta <H6>. Todas ellas son etiquetas de apertura y cierre. Si ponemos la cabecera, no es necesario poner cambio de línea entre una y otra, lo hace automáticamente. Las Cabeceras se ponen en el cuerpo de la estructura. A medida que aumenta el número de la cabecera, disminuye el tamaño de la letra. Especificaciones de texto Preformateado: Etiqueta <PRE> </PRE> ; lo que se ponga entre estas etiquetas, el visualizador no respeta como tal. Estilo : etiquetas del estilo de la letra; <B> : negrita. <> : cursiva. <U> : subrayado. Para cambiar el color del fondo: <BODY BGCOLOR=#RRGGBB> Para cambiar el color de todo el texto del documento: <BODY TEXT=#RRGGBB> Para cambiar los colores basta con modificar el código hexadecimal. Los dos primeros bits corresponden al color rojo, los otros dos, al verde, y los otros dos últimos al azul. ff0000 = rojo 00ff00 = verde 0000ff = azul ffff00 = amarillo 000000 = negro Etiquetas (continuación) ffffff = blanco cc00ff = morado ccff33 = verde pistacho Etiquetas de formateo lógico de texto Se utilizan para describir la forma en que se utiliza el texto (no la forma en que se aparece en la pantalla ), son los visualizadores los que determinan la forma en pantalla. Son las siguientes etiquetas: 4 <ADRESS> ..... </ADRESS> : muestra una dirección, generalmente aparece en cursiva. <BLOCKQUOTE> ..... </BLOCKQUOTE> : muestra un sangrado del texto. Se utiliza para hacer citas,.... <CITE> .... </CITE> : Aparece en cursiva, para títulos de libros, películas... <CODE> .... </CODE> : Se utiliza para trozos de código fuente. <DFN> .... </DFN> : Se utiliza para definiciones de palabras. <STRONG> .... </STRONG> : Para poner en negrita. <HR> : Para crear una línea horizontal, no se cierra. Pasos a seguir para crear una página WEB • Planear la página, saber lo que vamos a hacer; contenido de la página ( dirección, naturaleza). • Estructura; el título ( breve y descriptivo ). • Contenido de la página. • Revisar lo realizado. • Firmar la página y poner la dirección. • Comprobar los resultados. Formatos para sacar caracteres que se usan en las etiquetas Para poner los siguientes caracteres: &lt = < &quot = &nbsp = espacio. &gt = > &amp = & Listas NO ORDENADAS : <UL> .. </UL> ; los programas de la lista tienen que ir precedidos de esta e tiqueta. Cada elemento de la lista va precedido de la etiqueta <LI> NO ORDENADAS: Van entre <OL> ... </OL> y cada elemento va precedido de <LI>. Listas de directorios y menus Son listas no ordenadas pero los elementos son más pequeños. <DIR> .. </DIR> <MENU> .. </MENU> Los elementos de la lista se preceden de <LI>. 5 Listas de glosario Son listas que muestran un término y su definición. El término va precedido de <DT>. La definición va precedida de <DD>. La lista en si va entre <DL> .. </DL>. Crear enlaces (vínculos) Los hiperenlaces pueden ser dentro de una misma página, de una página a otro documento, o de una página a otra. El punto de partida y destino se denominan anclas y tienen que ir marcadas por la etiqueta <A> .. </A> . Para introducir un hiperenlace necesitamos dos piezas: 1−. Nombre del fichero (.URL) con la que queremos enlazar. 2−. Texto o imagen que va a ser resaltado en el documento y que va a servir como punto de unión. Formas de crear un hiperenlace: 1−. Para ir a una palabra de la misma página: Pulse <A HREF= #nombre destino> aquí </A> para obtener más información sobre.... ........ <A NAME= nombre destino> </A> 2−. Para ir de una página a otra: <HTML> <!− hiperenlace con otro fichero−> <HEAD> <TITTLE> hiperenlace con otro elemento </TITTLE> </HEAD> <BODY> ................... sobre <A HREF= http://www.alcala.es > aquí</A> 3−.Localizar algo específico dentro de otro fichero distinto al que estamos: 6 <A HREF= http://www.nombre.dominio/nombre.html#nombre destino ></A> Visualizar imágenes Las únicas que podemos poner en los ficheros: .GIF .JPEG <IMG SRC=nombre.ext> <IMG SRC=nombre.ext ALT= [descripción imagen]> (Esta descripción es sólo para visualizadores que no tienen capacidad gráfica). Por defecto, el borde inferior de la imagen está alineado con la línea base del texto , pero se puede cambiar poniendo donde pone ALT MIDDLE (medio) o BOTTOM (abajo) Asociar esa imagen con un hiperenlace <A HREF=nombre destino ><IMG SCR=nombre.ext></A>. Poner color determinado a una frase, texto, letra ... <FONT COLOR = #rrggbb> (palabra, parrafo,...)</FONT> Poner imagen como fondo <BODY BACKGROUND= file:///C|camino/nombre.gif > Centrar una imagen <P ALINGN= center> <IMG SRC= file:///C|camino.nombre WHIATH =numero HEIGHT = número> </P> Centrar texto <CENTER> texto </CENTER> Cambiar el tamaño de las letras <FONT SIZE = + número> texto </FONT> Creación de tablas Con esta instrucción definimos lo que es la tabla: <TABLE COLSPEC = L20L20L20> ancho de la celda ! 7 Si queremos poner un título en la tabla, seguido de esta instrucción pondremos: <CAPTION ALING = top (si queremos el título encima de la tabla ) ó bottom (si queremos el título debajo) > título </CAPTION> de comienzo de filas: <TR> de comienzo de columnas: <TD> Ejemplo: LUNES 2 horas MARTES 3 horas MIERCOLES 4 horas HORARIO <TABLE COLSPEC = L20L20L20> <CAPTION ALING = bottom > HORARIO </CAPTION> <TR><TD> lunes </TD> (fila1!, col 1 !) <TD> martes </TD> (fila1, col 2!) <TD> miércoles </TD> (fila1, col 3!) </TR> (se cierra la fila 1) <TR> <TD> 2 horas </TD> (fila2!, col 1 !) <TD> 3 horas </TD> (fila2, col 2!) <TD> 4 horas </TD> (fila2, col 3!) 8 </TR> (se cierra la fila 2) </TABLE> &Para darle un ancho a la tabla: <TABLE COLSPEC= L20L20L20 WIDTH =15 HEIGHT=30 CELLPADDING= 4 CELLSPACING= 3> NOMBRE APELLIDOS APELLIDOS cellpadding Cellspacing :ancho de las divisiones de dentro. &Para que aparezca resaltado: Poner etiquetas <TH> en lugar de <TD> para resaltar en negrita. <TR><TH>lunes</TH><TH> martes</TH><TH>miercoles</TH></TR> <TR><TD>2 horas</TD><TD> 3 horas</TD><TD>4 horas</TD></TR> &Para cambiar los bordes: Si escribo algo entre fila y columna, cambio la estructura de la tabla. Crea una celda que rompe la simetría de la tabla. <TABLE COLSPEC= L20L20L20 BORDER=1> Curso de Internet: APUNTES 1 Página 1 de 7 9