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

• En realidad el lenguaje ensamblador no es exactamente lo

mismo que el código máquina:

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

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

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

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

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

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

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

• 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

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

• 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)%

<html>

<head>

</head>

<body>

</body>

</html>

• <html>

• <head>

<title> MI PRIMERA WEB</title>

</head>

• <body>

</body>

• </html>

<html>

<head>

<title> MI PRIMERA WEB</title>

</head>

<body>

<h1>SALUDOS DESDE SANTOÑA!!!!<h1>

</body>

</html>

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

• <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> bold

• Texto en <I>Itálica</I> italics

• Texto <U>subrayado</U> underline

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

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

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.

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

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.

<a (espacio) href= ” (la dirección URL que queremos) ”> +

(Texto a mostrar) </a>

LISTO. YA ESTÁ. Quedaría así:

<a href= "HTTP://GOOGLE.ES">

Página de Google</a>

<HTML>

<HEAD>

<TITLE>Historia de Internet</TITLE>

</HEAD>

<BODY>

<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="HTTP://GOOGLE.ES"> GOOGLE </A>

<hr>

<font size=2>Documento creado en Febrero del 2000</font>

</BODY>

</HTML>

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

• 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:

www.cuartodelmarques.ddns.net

https://www.hostinger.es/

• ÁREA DE CLIENTES.

• CREAR UNA NUEVA CUENTA.

• COMPLETAR, NOMBRE, EMAIL Y CONTRASEÑA. IMPORTANTE

RECORDAR TODOS LOS DATOS, (APUNTARLOS EN UN

DOCUMENTO DE TEXTO O EN EL CUADERNO).

• EXISTE UNA APLICACIÓN QUE SE LLAMA FILEZILLA QUE NOS

PERMITIRÁ, PREVIA CONEXIÓN A NUESTRO HOSTING, SUBIR

NUESTRA WEB.

https://filezilla-project.org/download.php

EJEMPLO DE PAG. WEB CREADA CON COMPOZER:

http://personales.unican.es/alvareze/multimedia/master/2_Incor

porando/index.htm