El hardware informático tan solo entiende de ceros y unos (sistema binario). La combinación de BITS genera tamaños de palabra, de 8, 16, 32, y

Transcripción

1

2 El hardware informático tan solo entiende de ceros y unos (sistema binario). La combinación de BITS genera tamaños de palabra, de 8, 16, 32, y actualmente 64 BITS. Las personas nos comunicamos en base a los lenguajes naturales, (los idiomas y el sistema de numeración decimal). El lenguaje de bajo nivel (el más cercano a la máquina), se denomina ensamblador. El ensamblador se transforma en código máquina a través de un programa traductor. Existe un paso intermedio que hace una mediación entre el bajo nivel y el lenguaje natural, que son los lenguajes de alto nivel. Hay más de 100 lenguajes de alto nivel, los más habituales son FORTRAN, PASCAL, COBOL, C, LISP, JAVA, BASIC Para transformar los lenguajes de alto nivel en bajo nivel se utilizan programas compiladores o traductores. Para el diseño de páginas WEB se utiliza el código HTML. HTML no es exactamente un lenguaje de programación (aunque tiene similitud), es en realidad un lenguaje de etiquetas.

3

4 En realidad el lenguaje ensamblador no es exactamente lo mismo que el código máquina:

5

6

7 Estos son los dos lenguajes de programación que permiten crear sitios web. Todos los sitios web se basan en estos lenguajes, que son la base de los sitios de internet. Mucha gente confunde (erróneamente) Internet y la Web. La Web es parte de Internet. Internet es un gran paquete que incluye, entre otros: la Web, correos electrónicos, mensajería instantánea, etc. HTML y CSS son la base del funcionamiento de casi todos los sitios web. HTML y CSS son dos "lenguajes" que se precisa saber para elaborar sitios web. Es el navegador web el que hará la traducción (intérprete) entre los lenguajes de programación y lo que se ve en la pantalla.

8 HTML (HyperText Markup Language): apareció por primera vez en 1991 en el lanzamiento de la Web. Su función es la gestión y organización del contenido. Así que en HTML puedes escribir lo que deseas mostrar en la página: texto, enlaces, imágenes. CSS (Cascading Style Sheets, también conocidas como hojas de estilo): su papel es gestionar la apariencia de la página web (diseño, posicionamiento, colores, tamaño de texto...). Este lenguaje ha complementado el código HTML desde Se puede crear un sitio web únicamente en HTML, pero no va a quedar muy estético por la forma como aparecerá la información. Esta es la razón por la que CSS siempre lo completa. HTML define el contenido, CCS permite organizar el contenido y definir la presentación: el color, la imagen de fondo, los márgenes, el tamaño del texto Como te puedes imaginar, CSS necesita una página HTML para funcionar. Es por eso que lo primero que se aprende son los conceptos básicos de HTML antes de lograr el cuidado de la decoración en CSS.

9 Hay muchos programas dedicados a la creación de sitios web. Para iniciarse basta solo con... el bloc de notas, o equivalente en otros sistemas operativos distintos de Windows. Sin embargo, actualmente hay software más potente. Podemos clasificar estos programas de creación de sitios web en dos categorías: WYSIWYG (What You See Is What You Get - lo que ves es lo que obtienes -) se trata de programas muy fáciles de usar, se pueden crear sitios web sin tener que aprender el lenguaje en particular. Entre los más conocidos destaca Dreamweaver. Nosotros utilizaremos uno gratuito: Kompozer. Editores de texto: se trata de programas dedicados a la escritura de código.

10 El navegador es el programa que permite visualizar los sitios web. El trabajo del navegador es leer el código HTML y CSS (principalmente) para mostrar una salida en pantalla.

11 Es aconsejable instalar varios navegadores en el ordenador para asegurarse de que el sitio funciona correctamente en cada uno de ellos. Ejemplos de navegadores son: Google Chrome, Mozilla Firefox, y Explorer. Cada uno muestra la página web de forma ligeramente diferente de otros navegadores.

12 iphone. En el iphone de Apple, se utiliza el navegador Safari Mobile. Esta es una versión ligera y sin embargo muy completa. Android. Los Android se benefician de Mobile Chrome. De nuevo, esta es una versión adaptada al móvil. Windows Phone. Internet Explorer Mobile. El principio es el mismo que para navegadores anteriores: se dedica a la versión móvil.

13 UNA WEB CONTENDRÁ UNA PÁGINA PRINCIPAL, QUE SE LLAMARÁ: INDEX.HTML ESTA PÁGINA PUEDE LLAMAR A IMÁGENES, VIDEOS, OTRAS PÁGINAS TODOS ESTOS ARCHIVOS DEBERÁN ESTAR EN LA MISMA CARPETA. POR LO TANTO, DEBEMOS CREAR UNA CARPETA QUE CONTENDRÁ TODA NUESTA WEB

14 LA ESCRIBIREMOS EN EL BLOC DE NOTAS DE WINDOWS RECUERDA QUE DEBEMOS GUARDARLA CON LA EXTENSIÓN HTML POR EJEMPLO NUESTRO ARCHIVO SE LLAMARÁ: PRUEBA.HTML PERO LO MÁS ADECUADO SERÁ LLAMARLO: INDEX.HTML EL ICONO QUE REPRESENTA EL ARCHIVO DEPENDE DEL NAVEGADOR WEB POR DEFECTO.

15 ETIQUETAS: indican las acciones a realizar, se delimitan por el signo mayor y menor. Ejemplo: <title> POR PAREJAS SE ABREN, CONTIENEN TEXTO Y SE CIERRAN. <title> título </title> HUÉRFANAS SE UTILIZAN PARA INSERTAR UN ELEMENTO EN UN LUGAR CONCRETO, POR EJEMPLO: <br> (indica un salto de línea)%

16 <html> <head> </head> <body> </body> </html>

17 <html> <head> <title> MI PRIMERA WEB</title> </head> <body> </body> </html>

18 <html> <head> <title> MI PRIMERA WEB</title> </head> <body> <h1>saludos DESDE SANTOÑA!!!!<h1> </body> </html>

19 <BR> Realiza un salto de línea. Esta etiqueta no necesita cerrarse. <P> Realiza un salto de párrafo. Tampoco necesita cerrarse. <CENTER> </CENTER> Posiciona el texto seleccionado en el centro de la página. También puede aplicarse a gráficos. <Hx> </Hx> Se utiliza para resaltar encabezados. La x son números que van del 1 al 6, siendo el 1 el encabezado más grande y resaltado, el 2 un poco menos y así sucesivamente. Ejem: <H1>Encabezado</H1> <H2>Encabezado</H2> <H3>Encabezado</H3> <H4>Encabezado</H4>

20 <FONT SIZE=x> </FONT> Sirve para cambiar el tamaño de las letras. La x es un número que indica el tamaño de la letra y va del 1 al 7. El número predeterminado es el 3. Texto en <B>Negritas</B> Texto en <I>Itálica</I> Texto <U>subrayado</U> bold italics underline

21 <HR> Se utiliza como línea separadora. Tiene algunos atributos que la modifican. WIDTH indica la longitud, SIZE indica la altura, ALIGN la colocación de la línea y NOSHADE que no tenga relieve y además le añade un color gris más fuerte. Ejem: <HR> <HR WIDTH=20% ALIGN=RIGHT SIZE=7> <HR WIDTH=250 ALIGN=CENTER SIZE=5 NOSHADE>

22 <html> <head> <title> mi documento HTML </title> </head> <body> <H1> <CENTER> IES MARQUÉS DE MANZANEDO </CENTER> </H1> <H2> IES MARQUÉS DE MANZANEDO </H2> <BR> <BR> <BR> <H3> IES MARQUÉS DE MANZANEDO </H3> <H4> IES MARQUÉS DE MANZANEDO </H4> <H5> IES MARQUÉS DE MANZANEDO </H5> </body> </html>

23 La etiqueta <img> tiene varias propiedades como son: border, width, height, alt Ejemplo con propiedades de imágen en HTML <img src="imagenhtml.jpg" border="0" width="10" height="10«> El ancho y alto (width, height) se coloca en pixeles y deben corresponder al tamaño original de la imagen para que no se distorcione. Los formatos soportados por el explorer son jpg, gif y png.

24 El código tiene que ser así (y estar entre <body> y </body>) <img src="el nombre de la imagen.jpg"> y si no esta en la misma carpeta que el código HTML tendrás que indicar la ruta: <img src="el nombre de la carpeta donde esta/el nombre de la imagen.jpg">

25 Los enlaces o hipervínculos, también llamados hipertextos son los textos o los objetos sobre los que podemos hacer clic para que nos lleven a otra parte del documento, a otra página web en el mismo sitio o a otra página de Internet, entre otras funciones. Lo más habitual es que el cursor tome la forma de una pequeña mano cuando pasa sobre un hipervínculo.

26 <a (espacio) href= (la dirección URL que queremos) > + (Texto a mostrar) </a> LISTO. YA ESTÁ. Quedaría así: <a href= " Página de Google</a>

27 <HTML> </HTML> <HEAD> </HEAD> <BODY> </BODY> <TITLE>Historia de Internet</TITLE> <h2>en esta página explicaremos brevemente los inicios de la red de redes.</h2><br> <h3>introducción</h3><p> El mundo de las telecomunicaciones ha tenido un crecimiento acelerado en los últimos años, en el que <b>internet</b> ha sido pieza clave. Hace unas décadas atrás, cuando el Departamento de Defensa de los Estados Unidos desarrollaba una red de comunicaciones que fuera capaz de soportar un ataque externo durante la guerra fría, nadie se imaginó que después de transferir el control de esa red llamada <u>arpanet</u> a los investigadores universitarios, ésta crecería exponencialmente involucrando significativamente a toda la sociedad. <A HREF=" GOOGLE </A> <hr> <font size=2>documento creado en Febrero del 2000</font>

28

29 Para que nuestra página esté visible a todo el mundo las 24h del día y para siempre se precisa crear un dominio y buscar un alojamiento en un servidor de Internet. Suelen ser de pago (se abona una cantidad anual) pero también los hay gratuitos. IMPRESCINDIBLE: Disponer de una cuenta de mail, y apuntar las contraseñas que generemos para que no se nos olviden.

30 Hosting es una palabra del Ingles que quiere decir hospedar o alojar. Aplicado al Internet, significa poner una pagina web en un servidor de Internet para que ella pueda ser vista en cualquier lugar del mundo entero con acceso al Internet. Domino Es un nombre y una dirección en el Internet. Por ejemplo:

31 ÁREA DE CLIENTES. CREAR UNA NUEVA CUENTA. COMPLETAR, NOMBRE, Y CONTRASEÑA. IMPORTANTE RECORDAR TODOS LOS DATOS, (APUNTARLOS EN UN DOCUMENTO DE TEXTO O EN EL CUADERNO).

32

33 EXISTE UNA APLICACIÓN QUE SE LLAMA FILEZILLA QUE NOS PERMITIRÁ, PREVIA CONEXIÓN A NUESTRO HOSTING, SUBIR NUESTRA WEB.

34

35 EJEMPLO DE PAG. WEB CREADA CON COMPOZER: porando/index.htm

36

37

38

39