Programación en html

Este curso esta dedicado para que todos los que queráis aprender ha hacer páginas Web con estos tutoriales aprendáis ha hacer lo que se os antoje.

Antes de empezar, dejo claro que este tutorial esta en su sitio y que tengo autorización del administrador, jiXo, para colgarlo aquí.

Para todas las dudas: plata._.17@hotmail.com

Cuando ponga el segundo bloque pasare este a un pdf, de momento os dejo el Word para descargar.

Bien vamos a empezar.

Aquí un índice de todo lo que vamos a dar en este bloque, el bloque A:
A) Empezando con cosas simples.
1.-¿Qué es html?
2.-La importancia de Internet.
3.-Como se estructurará el curso
4.-Material para empezar el curso
5.-Configurando el entorno
6.-Aprendiendo nuestras primeras líneas de código
7.-Dimensiones y tamaños de las letras
8.-Usando colores de fondo

1.-¿Qué es html?

Html es un lenguaje de etiquetas muy usado en la creación de paginas Web, los mas usados son html y php.
Tiene muchos programas y utilidades, y es fácil a poco que estudies, no os requerirá mucho tiempo aprender a hacer una página Web decente.


2.-La importancia de Internet

Internet se ha convertido en la mayor red de información, y por tanto la mas usada del mundo.
Para que esto haya sido posible mucha gente ha publicado de forma sencilla su página Web para poder transmitir información a otros usuarios.

3-Como se estructurará el curso

En este curso vamos a aprender a usar los dos programas que te pueden faltar para el desarrollo Web, que son los siguientes:
Microsoft Office FrontPage
Macromedia Dreamweaver

Se empezara primero con el block de notas de toda la vida, después se pasara a Microsoft Office FrontPage y después a Macromedia Dreamweaver.
Aprenderemos un nivel normal con Microsoft Office FrontPage y uno avanzado con Macromedia Dreamweaver.

4.-Material para empezar el curso

Microsoft Office FrontPage (no se da soporte a esta descarga)
Macromedia Dreamweaver (no se da soporte a esta descarga)
Block de notas (viene con Windows integrado)
Resto de material que usaremos mas adelante (cuando lleguemos aparecerán las descargas)

5.-Configurando el entorno

Bien, ahora vamos a hacer que se vean las extensiones de los documentos, iremos a una carpeta cualquiera y clickaremos en los siguientes sitios:
Herramientas>Opciones de carpeta>Ver y deseleccionáis la casilla Ocultar las extensiones de archivo para tipos de archivos conocidos (Las opciones de debajo de la lista) y le dais Aplicar>Aceptar.

Bien, ahora crearemos una carpeta que se llama curso_html donde queramos, ya sea en el escritorio, en mis documentos, etc…

Bien, dentro de esa carpeta vamos a guardar todos los ejercicios en subcarpetas.

6.- Aprendiendo nuestras primeras líneas de código

Vamos a empezar con nuestro primer documento en html, en la carpeta que mande crear en el anterior apartado, vamos a crear una carpeta llamada ejercicio_uno, y así sucesivamente con los demás…

Ahora crearemos dentro de la carpeta ejercicio_uno un documento de texto llamado index.html

***Nota:*** Nunca uséis mayúsculas ni ñ, ni dejéis espacios en los nombres de los documentos y/o carpetas, puede daros problemas con los vínculos.

Ahora haré una breve explicación del código que valla poniendo y después lo pondré entero.

//Señalamos que es un documento en html
// Iniciamos la cabeza
//Cerramos title
//Cerramos la cabecera
//Iniciamos el cuerpo
Holaaaaaaa //Escribimos texto
//Cerramos el cuerpo
//Cerramos el encabezado de html

El código que deberíais poner seria este:






Holaaaaaaa



Ahora guardáis el block de notas.
Se debería llamar index.txt, pues le cambiáis el nombre y le llamáis index.htm, os dice que le vais a cambiar de formato, le das a aceptar y abre el documento.
Allí aparecerá tu primera página Web.

7.- Dimensiones y tamaños de las letras:

Ahora lo vamos a complicar un poco mas, vamos a poner las letras de distintos tamaños.

Vamos ha hacer como dije en el ejercicio anterior, en la carpeta curso_html creamos una carpeta esta vez llamada ejercicio_2, y dentro creamos un block de notas llamado index.txt

Ahora la explicación:


//Señalamos que es un documento en html
// Iniciamos la cabeza
//Cerramos title
//Cerramos la cabecera
//Iniciamos el cuerpo

//Tamaño de la letra, según variáis ese número va a ser mas grande o mas pequeña la letra.
Curso de html. //Texto que escribimos

//Cerramos el tamaño

//Tamaño mas pequeño que el anterior
Curso de html //Texto que escribimos

//Cerramos el tamaño

//Tamaño mas pequeño que el anterior
Curso de html

//Cerramos el tamaño
//Cerramos el cuerpo
//Cerramos el encabezado de html

Y el código completo, el que debéis tener en el block de notas sería este:

Curso de html

Curso de html

Curso de html

Ahora guardáis el block de notas.
Se debería llamar index.txt, pues le cambiáis el nombre y le llamáis index.htm, os dice que le vais a cambiar de formato, le das a aceptar y abre el documento.
Allí aparecerá el ejercicio completado.

8.-Usando colores de fondo

Ya sabéis en la carpeta curso¬_html una carpeta llamada ejercicio_tres y dentro un block de notas llamado index.txt

Para los colores variaremos un trocito del código para cambiar el color, os dejo el código y el color resultante:

Valores Color resultante
FF0000 Rojo
FFFF00 Amarillo
25A7BB Azul agua
00FF00 Verde oscuro
FF00FF Rosa
ACB312 Dorado
0000FF Azul oscuro
00FFFF Azul claro
6047B6 Morado

Después de la tabla de atrás vamos a explicar el código:

//Señalamos que es un documento en html
// Iniciamos la cabeza
//Cerramos title
//Cerramos la cabecera
//Iniciamos el cuerpo
//Color del fondo
Curso de html //Escribimos texto
Ejercicio 3 //Escribimos texto
//Cerramos el cuerpo
//Cerramos el encabezado de html
Y el código entero seria:






Curso de html
Ejercicio 3



Ahora guardáis el block de notas.
Se debería llamar index.txt, pues le cambiáis el nombre y le llamáis index.htm, os dice que le vais a cambiar de formato, le das a aceptar y abre el documento.
Allí aparecerá el ejercicio completado.
Esta es la parte mas difícil del cursillo, pues es en la única parte donde se usan códigos hasta dentro de mucho.
El siguiente bloque tratará de Microsoft Office FrontPage y de su uso.
***NOTA:*** Soy humano, y tengo errores, si veis algún fallo o faltas de ortografía me lo decís
Salu2