Introducci³nh al internet y HTML

MODULO IIIMODULO IIIMODULO IIIMODULO IIIESTRATEGIAS INSTRUCIONALESESTRATEGIAS INSTRUCIONALESESTRATEGIAS INSTRUCIONALESESTRATEGIAS INSTRUCIONALES

INTRODUCCIÓN AL INTERNETINTRODUCCIÓN AL INTERNETINTRODUCCIÓN AL INTERNETINTRODUCCIÓN AL INTERNET

• El internet

• Recursos del internet para la instrucción

• Introducción al HTML

El InternetEl InternetEl InternetEl Internet

CLIENTECLIENTECLIENTECLIENTE SERVIDORSERVIDORSERVIDORSERVIDORMODEMMODEMMODEMMODEM

Términos importantes en una conexiónTérminos importantes en una conexiónTérminos importantes en una conexiónTérminos importantes en una conexión

• IP:IP:IP:IP: PPPProtocolo de IIIInternet)• ISP:ISP:ISP:ISP: PPPProveedor SSSServicio IIIInternet• DominioDominioDominioDominio• DominioDominioDominioDominio• DNSDNSDNSDNS: : : : Servidores de Nombre de DominioServidores de Nombre de DominioServidores de Nombre de DominioServidores de Nombre de Dominio

Funciones de la redFunciones de la redFunciones de la redFunciones de la red

• Servir de correoServir de correoServir de correoServir de correo: transferencia de mensajes y archivos de un sitio a otro.

• Servir de bibliotecaServir de bibliotecaServir de bibliotecaServir de biblioteca: almacenar información para • Servir de bibliotecaServir de bibliotecaServir de bibliotecaServir de biblioteca: almacenar información para que sea consultada por quien la necesite.

• Servir de guía:Servir de guía:Servir de guía:Servir de guía: esto es relacionar las IP con los Dominios, y buscar las paginas que contienen esos sitios.

Correo EléctronicoCorreo EléctronicoCorreo EléctronicoCorreo Eléctronico

• Permite a usuarios enviar mensajes entre ellos, así como archivos de pequeño tamaño a través de la red.

[email protected]

Paginas WEBPaginas WEBPaginas WEBPaginas WEB

• La web es una gran biblioteca donde están colocados en determinadas carpetas una serie de archivos a visualizar.

• Las paginas se escriben en lenguaje HTLM y se leen • Las paginas se escriben en lenguaje HTLM y se leen por medio del HTTP:

– HTLMHTLMHTLMHTLM (Hyper-Text Markup Language = Lenguaje con Marcas de Hiper-Texto)

– HTTPHTTPHTTPHTTP (Hyper-Text Transfer Protocol = Protocolo para Transferir Hiper-Textos).

Páginas WEBPáginas WEBPáginas WEBPáginas WEB

• Todas las paginas almacenadas en los servidores son ubicadas por medio de la

URL (Uniform Resource Locator = Localizador Uniforme de Recursos)Localizador Uniforme de Recursos)

http://www.disneylatino.com/DisneyOnline/fairies/myfairy/manager.htmlhttp://www.disneylatino.com/DisneyOnline/fairies/myfairy/manager.htmlhttp://www.disneylatino.com/DisneyOnline/fairies/myfairy/manager.htmlhttp://www.disneylatino.com/DisneyOnline/fairies/myfairy/manager.html

http://www.google.co.vehttp://www.google.co.vehttp://www.google.co.vehttp://www.google.co.ve

Páginas WEBPáginas WEBPáginas WEBPáginas WEB

http://http://http://http://www.disneylatino.com/www.disneylatino.com/www.disneylatino.com/www.disneylatino.com/DisneyOnline/fairies/myfairy/DisneyOnline/fairies/myfairy/DisneyOnline/fairies/myfairy/DisneyOnline/fairies/myfairy/manager.htmlmanager.htmlmanager.htmlmanager.html

http:// http:// http:// http:// www.disneylatino.com/www.disneylatino.com/www.disneylatino.com/www.disneylatino.com/DisneyOnline/fairies/myfairy/ DisneyOnline/fairies/myfairy/ DisneyOnline/fairies/myfairy/ DisneyOnline/fairies/myfairy/ manager.manager.manager.manager.htmlhtmlhtmlhtml

http://www.google.co.ve/index.html

Grupos de Noticias Grupos de Noticias Grupos de Noticias Grupos de Noticias ---- Newsgroups Newsgroups Newsgroups Newsgroups ---- ForosForosForosForos

• Estos son sitios donde un grupo de personas debate y discute un tema en particular.

• En general las respuestas de una discusión se ordenan en forma cronológica; o puede ser ordenan en forma cronológica; o puede ser anidada, o formando algo así como un árbol genealógico de discusión.

• Un moderador o administrador guía el tema y puede, según como siga la discusión: mantener, censurar o cerrar entradas o todo el sitio

Chart Chart Chart Chart ---- CiberCharlaCiberCharlaCiberCharlaCiberCharla

• Se refiere a una comunicación escrita realizada de Se refiere a una comunicación escrita realizada de Se refiere a una comunicación escrita realizada de Se refiere a una comunicación escrita realizada de manera instantánea a través de Internet entre dos o manera instantánea a través de Internet entre dos o manera instantánea a través de Internet entre dos o manera instantánea a través de Internet entre dos o más personas, desde y hasta cualquier parte del más personas, desde y hasta cualquier parte del más personas, desde y hasta cualquier parte del más personas, desde y hasta cualquier parte del mundo. mundo. mundo. mundo.

• Los usuarios del chat (llamados Los usuarios del chat (llamados Los usuarios del chat (llamados Los usuarios del chat (llamados chaterschaterschaterschaters) utilizan ) utilizan ) utilizan ) utilizan seudónimos o alias llamados seudónimos o alias llamados seudónimos o alias llamados seudónimos o alias llamados NickNickNickNick....

• Como es una comunicación inmediata, los charters Como es una comunicación inmediata, los charters Como es una comunicación inmediata, los charters Como es una comunicación inmediata, los charters usan palabras cortadas, siglas y usan palabras cortadas, siglas y usan palabras cortadas, siglas y usan palabras cortadas, siglas y emoticonosemoticonosemoticonosemoticonos para para para para expresar sus ideas.expresar sus ideas.expresar sus ideas.expresar sus ideas.

EmoticonosEmoticonosEmoticonosEmoticonos

: ) Alegría : p Sacar la lengua

; ) Guiño : \ molesto; ) Guiño : \ molesto

: ( Triste : . Atónito

8 ) Gafas : D reir

Blog, Weblog o BitácorasBlog, Weblog o BitácorasBlog, Weblog o BitácorasBlog, Weblog o Bitácoras• Es un sitio web que periódicamente es actualizado y que recopila artículos de uno o varios autores, apareciendo primero el más reciente.

– Comentarios.Comentarios.Comentarios.Comentarios.– Enlaces.Enlaces.Enlaces.Enlaces.– Enlaces inversos.Enlaces inversos.Enlaces inversos.Enlaces inversos.– Fotografías y vídeos.Fotografías y vídeos.Fotografías y vídeos.Fotografías y vídeos.– Sociales.Sociales.Sociales.Sociales.

Construyendo Paginas WEBConstruyendo Paginas WEBConstruyendo Paginas WEBConstruyendo Paginas WEB

• HTML significa Lenguaje de Marcas para Hiper-Textos

<marca> texto etiquetadotexto etiquetadotexto etiquetadotexto etiquetado </marca><marca> texto etiquetadotexto etiquetadotexto etiquetadotexto etiquetado </marca>

<!-– Texto Comentario -->

Paginas en HTMLPaginas en HTMLPaginas en HTMLPaginas en HTML<<<<HTML>HTML>HTML>HTML>

<HEAD><HEAD><HEAD><HEAD><!<!<!>>></HEAD></HEAD></HEAD></HEAD>

<BODY><BODY><BODY><BODY><!<!<!</BODY></BODY></BODY></BODY>

</HTML></HTML></HTML></HTML>

Cabecera en HTML

<HEAD><HEAD><HEAD><HEAD>

<TITLE><TITLE><TITLE><TITLE> nombre de la pagina </TITLE></TITLE></TITLE></TITLE><TITLE><TITLE><TITLE><TITLE> nombre de la pagina </TITLE></TITLE></TITLE></TITLE>

</HEAD></HEAD></HEAD></HEAD>

Cuerpo en HTML

<BODY><BODY><BODY><BODY>Todo el texto que deseemos escribir Todo el texto que deseemos escribir Todo el texto que deseemos escribir Todo el texto que deseemos escribir

</BODY></BODY></BODY></BODY></BODY></BODY></BODY></BODY>

Formato de Títulos en HTML

<H1><H1><H1><H1> Titulo más grandeTitulo más grandeTitulo más grandeTitulo más grande </H1></H1></H1></H1>

<H2><H2><H2><H2> Titulo de segundo nivel Titulo de segundo nivel Titulo de segundo nivel Titulo de segundo nivel </H2></H2></H2></H2><H2><H2><H2><H2> Titulo de segundo nivel Titulo de segundo nivel Titulo de segundo nivel Titulo de segundo nivel </H2></H2></H2></H2>

<H3><H3><H3><H3> Titulo de tercer nivelTitulo de tercer nivelTitulo de tercer nivelTitulo de tercer nivel </H3></H3></H3></H3>

Formato de Títulos en HTMLFormato de Títulos en HTMLFormato de Títulos en HTMLFormato de Títulos en HTML

<P><P><P><P> separador de párrafos separador de párrafos separador de párrafos separador de párrafos </P></P></P></P>Salto de línea Salto de línea Salto de línea Salto de línea <BR><BR><BR><BR>

Línea de separación Línea de separación Línea de separación Línea de separación <LR><LR><LR><LR>Línea de separación Línea de separación Línea de separación Línea de separación <LR><LR><LR><LR>

Formato de Textos en HTMLFormato de Textos en HTMLFormato de Textos en HTMLFormato de Textos en HTML

<B><B><B><B> texto en negrita texto en negrita texto en negrita texto en negrita </B></B></B></B>

<I><I><I><I> Texto en itálica </H2></H2></H2></H2><I><I><I><I> Texto en itálica </H2></H2></H2></H2>

<U><U><U><U> texto subrayado </H3></H3></H3></H3>

Alineación en Textos en HTMLAlineación en Textos en HTMLAlineación en Textos en HTMLAlineación en Textos en HTML<P <P <P <P align = “right”align = “right”align = “right”align = “right” >>>> texto a la derecha texto a la derecha texto a la derecha texto a la derecha </P></P></P></P>

<P <P <P <P align = “left”align = “left”align = “left”align = “left” >>>> texto a la izquierda texto a la izquierda texto a la izquierda texto a la izquierda </P></P></P></P>

<P <P <P <P align = “center”align = “center”align = “center”align = “center” >>>> texto centrado texto centrado texto centrado texto centrado </P></P></P></P>

<P<P<P<P alignalignalignalign ==== “justify”“justify”“justify”“justify” >>>> textotextotextotexto justificado,justificado,justificado,justificado, sesesese usausausausacuandocuandocuandocuando elelelel textotextotextotexto deldeldeldel párrafopárrafopárrafopárrafo eseseses grandegrandegrandegrande </P></P></P></P>

Viñetas en Textos en HTMLViñetas en Textos en HTMLViñetas en Textos en HTMLViñetas en Textos en HTML<UL><UL><UL><UL>

<LI><LI><LI><LI> TomatesTomatesTomatesTomates<LI><LI><LI><LI> ZanahoriasZanahoriasZanahoriasZanahorias<LI><LI><LI><LI> CebollasCebollasCebollasCebollas

• TomatesTomatesTomatesTomates• ZanahoriasZanahoriasZanahoriasZanahorias• CebollasCebollasCebollasCebollas<LI><LI><LI><LI> CebollasCebollasCebollasCebollas

</UL></UL></UL></UL>• CebollasCebollasCebollasCebollas

Color de Pantalla y en Texto en HTMLColor de Pantalla y en Texto en HTMLColor de Pantalla y en Texto en HTMLColor de Pantalla y en Texto en HTML

<BODY <BODY <BODY <BODY BGCOLOR = #XXXXXXBGCOLOR = #XXXXXXBGCOLOR = #XXXXXXBGCOLOR = #XXXXXX TEXT = #YYYYYYTEXT = #YYYYYYTEXT = #YYYYYYTEXT = #YYYYYY>>>>El fondo de la pantalla tendrá el color El fondo de la pantalla tendrá el color El fondo de la pantalla tendrá el color El fondo de la pantalla tendrá el color XXXXXXXXXXXXXXXXXXXXXXXXY todo el texto del documento (a menos que Y todo el texto del documento (a menos que Y todo el texto del documento (a menos que Y todo el texto del documento (a menos que existan otras internas) tendrá el color existan otras internas) tendrá el color existan otras internas) tendrá el color existan otras internas) tendrá el color YYYYYYYYYYYYYYYYYYYYYYYYexistan otras internas) tendrá el color existan otras internas) tendrá el color existan otras internas) tendrá el color existan otras internas) tendrá el color YYYYYYYYYYYYYYYYYYYYYYYY</BODY></BODY></BODY></BODY>

La etiqueta FONTLa etiqueta FONTLa etiqueta FONTLa etiqueta FONT

<FONT <FONT <FONT <FONT COLOR = #XXXXXXCOLOR = #XXXXXXCOLOR = #XXXXXXCOLOR = #XXXXXX SIZE = “X”SIZE = “X”SIZE = “X”SIZE = “X” FACE = “nombre FACE = “nombre FACE = “nombre FACE = “nombre de la letra”de la letra”de la letra”de la letra” >>>>

El texto entre estas marcas tendrá el color XXXXXX, el El texto entre estas marcas tendrá el color XXXXXX, el El texto entre estas marcas tendrá el color XXXXXX, el El texto entre estas marcas tendrá el color XXXXXX, el tamaño X (un número entre 1 y 7, siendo el normal 3) y la tamaño X (un número entre 1 y 7, siendo el normal 3) y la tamaño X (un número entre 1 y 7, siendo el normal 3) y la tamaño X (un número entre 1 y 7, siendo el normal 3) y la tamaño X (un número entre 1 y 7, siendo el normal 3) y la tamaño X (un número entre 1 y 7, siendo el normal 3) y la tamaño X (un número entre 1 y 7, siendo el normal 3) y la tamaño X (un número entre 1 y 7, siendo el normal 3) y la letra definida por la instrucción FACEletra definida por la instrucción FACEletra definida por la instrucción FACEletra definida por la instrucción FACE

</FONT></FONT></FONT></FONT>

Caracteres EspecialesCaracteres EspecialesCaracteres EspecialesCaracteres Especiales

&#&#&#&# 64646464,,,,& & & & a a a a acute,acute,acute,acute,& & & & n n n n tilde,tilde,tilde,tilde,

¿¿¿¿¡¡¡¡ºººº

= @= @= @= @= á= á= á= á= ñ= ñ= ñ= ñ

= ¿= ¿= ¿= ¿= ¡= ¡= ¡= ¡= = = = °°°°

¡¡¡¡ºººº

<<<<>>>>

&&&&""""

= ¡= ¡= ¡= ¡= = = = °°°°Espacio en blancoEspacio en blancoEspacio en blancoEspacio en blanco

= <= <= <= <= >= >= >= >= &= &= &= &= "= "= "= "

Introducci³nh al internet y HTML

Documents

Transcript of Introducci³nh al internet y HTML