Informática

Internet y HTML (Hypertext Markup Language)

Compartir 0 Me sirvió 0 No me sirvió

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.
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.

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.

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.

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:

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:

<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.

Los elementos de la lista se preceden de <LI>.

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....

........

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:

Visualizar imágenes

Las únicas que podemos poner en los ficheros:

.GIF

.JPEG

(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

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:

ancho de la celda !

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>

&Etiqueta de comienzo de filas:

<TR>

&Etiqueta de comienzo de columnas:

<TD>

Ejemplo:

LUNES	MARTES	MIERCOLES
2 horas	3 horas	4 horas

HORARIO

<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!)

</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.

Curso de Internet: APUNTES

Página 1 de 7

Tal vez te pueda interesar:

Descargar

Enviado por:	Joglar A
Idioma:	castellano
País:	España

Palabras clave:

Páginas Web WWW (World Wide Web)Buscadores Portal Vertical Horizontal Comunicaciones FTP (File Transfer Protocol)Netscape

Te va a interesar