Este documento presenta una introducción a la programación en Internet. Explica conceptos básicos como Internet, correo electrónico y etiquetas HTML para crear sitios web. Describe los elementos fundamentales para construir la estructura y contenido de una página web, incluyendo encabezados, párrafos, imágenes y enlaces.
2. Salvedades:
Toda la información contenida en la siguiente presentación ha sido extraída de la web tal cual,
no se removerán hipervínculos ni corregirán errores del origen.
El propósito del curso es evaluar como se han llegado a conformar dichos sitios web desde su
concepto básico hasta la plataforma que hoy en día representan.
Randy Valverde Valverde.
4. Internet…
El concepto Internet tiene sus raíces en el idioma inglés y se encuentra conformado por el
vocablo inter (que significa entre) y net (proveniente de network que quiere decir red
electrónica). Es un término que siempre debe ser escrito en mayúscula ya que, hace referencia a
“La Red” (que conecta a las computadoras mundialmente mediante el protocolo TCP/IP) y sin un
artículo que lo acompañe (el/la) para hacerle referencia.
Fuente: http://concepto.de/internet/#ixzz4KGaSV76g
http://www.randyvv.com/
7. Correo electrónico
El correo electrónico (en inglés: electronic mail, comúnmente abreviado e-mail2 o email3 ) es un
servicio de red que permite a los usuarios enviar y recibir mensajes (también denominados
mensajes electrónicos o cartas digitales) mediante redes de comunicación electrónica. El
término «correo electrónico» proviene de la analogía con el correo postal: ambos sirven para
enviar y recibir mensajes, y se utilizan "buzones" intermedios (servidores de correo). Por medio
del correo electrónico se puede enviar no solamente texto, sino todo tipo de archivos digitales,4
si bien suelen existir limitaciones al tamaño de los archivos adjuntos.
Fuente: https://es.wikipedia.org/wiki/Correo_electr%C3%B3nico
http://www.otrogeek.net/2013/01/los-10-mejores-proveedores-de-servicios.html/
http://www.randyvv.com/
8. Etiquetas: Formato de texto
Salida Etiquetas requeridas
El texto en negritas. El <B>texto</B> en negritas.
El texto en itálicas. El <I>texto</I> en itálicas.
El texto en formato teletipo. El <TT>texto</TT> en formato teletipo.
El texto en 2 tamaños más grandes y en rojo. El
tamaño puede ser un valor absoluto en el rango
1..7.
El <FONT SIZE = +2 COLOR = "RED"> texto </FONT> en 2
tamaños más grandes y en rojo. El
tamaño puede ser ...
Utilizar la dirección de e-mail claudio@acm.org
para contactarme.
Utilizar la dirección de e-mail <ADDRESS>
claudio@acm.org </ADDRESS> para contactarme.
http://www.randyvv.com/
9. Etiquetas: Encabezamiento, párrafos, lineas
http://www.randyvv.com/
Salida Etiquetas requeridas
Encabezado H1 <H1>Encabezado H1<H1>
Encabezado H3 <H3>Encabezado H3<H3>
Encabezado H6 <H6>Encabezado H6<H6>
Salida Etiquetas requeridas
Última oración del párrafo. Primera
oración del nuevo párrafo.
Última oración ... <P>
Primera oració del ...
Una oración
sobre otra.
Una oración <BR> sobre otra.
10. Etiquetas: Primer sitio web
http://www.randyvv.com/
<HTML>
<HEAD>
<TITLE>Título de la página</TITLE> ...
</HEAD>
<BODY> Aquí iría el contenido de la página
</BODY>
</HTML>
Entre las etiquetas <html> y <head> se suelen colocar otras opcionales, como
por ejemplo:
<meta name="description" content="Información sobre el Centro,las
enseñanzas que se pueden cursar, los departamentos didácticos">
<meta name="keywords" content="educación,enseñanza,instituto, profesores,
alumnos">
11. Etiquetas: Primer sitio web
http://www.randyvv.com/
<HTML>
<HEAD>
<TITLE>Título de la página</TITLE> ...
</HEAD>
<BODY> Aquí iría el contenido de la página
</BODY>
</HTML>
Entre las etiquetas <html> y <head> se suelen colocar otras opcionales, como
por ejemplo:
<meta name="description" content="Información sobre el Centro,las
enseñanzas que se pueden cursar, los departamentos didácticos">
<meta name="keywords" content="educación,enseñanza,instituto, profesores,
alumnos">
12. Etiquetas: Imagenes
http://www.randyvv.com/
La marca <IMG> no necesita cierre y su sintaxis correcta es:
<IMG SRC="immagine.gif">
El uso de texto para comentar las imágenes es una regla fundamental que debemos observar en la creación de
sitios web por varias razones:
<IMG SRC="immagine.gif" ALT="Obra de K. Haring">
En los ejemplos vistos hasta ahora, no hemos especificado las medidas de la imagen que el navegador se ha
encargado de buscar automáticamente. Es posible definir la anchura y la altura de la imagen gracias a los
atributos width y height, respectivamente:
<IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 ALT="Obra de K. Haring">
donde WIDTH=178 es la dimensión horizontal (ancho) de la imagen expresada en píxel, y HEIGHT=180 la
dimensión vertical (alto).
13. Etiquetas: Imagenes
http://www.randyvv.com/
Con el atributo BORDER podemos aplicar un borde a la imagen. Los valores son numéricos y van
expresados en píxel. Si impostamos el valor BORDER en 0, la imagen no va recuadrada. Cuando
omitimos este atributo, el navegador no aplica ningún borde, pero si la imagen es también un enlace
automáticamente se le asignará un BORDER=1. La sintaxis correcta es:
<IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 BORDER=2 ALT="Obra de K. Haring">
El atributo ALIGN define la posición de la imagen respecto al texto colocado inmediatamente antes o
después de la misma. Existen varias opciones para el atributo ALIGN
ALIGN=top
ALIGN=middle
ALIGN=bottom
ALIGN=left
ALIGN=right
15. Etiquetas: Enlaces
http://www.randyvv.com/
El elemento <A> (la A corresponde al inglés Anchor) necesita una marca de apertura y una de cierre y
entre ellas podemos insertar texto, imágenes y otros elementos multimedia.
Para que funcione, el elemento <A> debe estar asociado a otros atributos. De éstos, el más
importante es HREF (abreviatura del inglés Hypertext Reference), que contiene el URL o página donde
ir. La sintaxis es:
<A HREF="http://www.htmlpoint.com">Visita HTMLpoint</A>
Hasta ahora hemos analizado los enlaces con recursos externos o con páginas diversas de un mismo
sitio. Sin embargo, podemos asimismo crear enlaces con puntos específicos de un mismo documento
gracias al código <A NAME="ancora">. En otras palabras, si con los enlaces examinados hasta ahora
llegamos a un documento, con <A NAME> llegamos a una parte concreta del documento.
Inserta la marca <A NAME="ancora">
En el enlace desde el que quieres llegar al punto del nuevo documento, inserta la siguiente sintaxis:
<A HREF="#ancora">Visita HTMLpoint</A>