[Curso de html]

Archivado
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
//Iniciamos el título del documento <br />Ejercicio 1 //El nombre del documento <br /> //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:



Ejercicio 1


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
//Iniciamos el título del documento <br />Ejercicio 2 //El nombre del documento <br /> //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:



Ejercicio 2


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
//Iniciamos el título del documento <br />Ejercicio 3 //El nombre del documento <br /> //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:


Ejercicio 3



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
Plata escribió:Programación en html
Html es un lenguaje de programación

dios mío ¿HTML un lenguaje de programación? Oooh ¿Y los bucles y las condiciones? ¿Y las variables?
Es un lenguaje de maquetado.

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

Frontpage es un programa pésimo que hace lo que quiere, usa etiquetas y atributos propietarios y utiliza tablas para maquetar. Dreamweaver no es mucho mejor.


Se empezara primero con el block de notas de toda la vida

Es bloc de notas


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

No. Las etiquetas h vienen de headers. Sirven para definir la estructura del documento indicando los títulos. El que tengan mayor tamaño que el texto normal es circunstancial porque bien podría no ser así si lo defines en la hoja de estilo.


//Color del fondo

Para todo lo relacionado con la presentación se debería usar un CSS, pero bueno. Por cierto es #FF0000, todo junto
1º
que no tenag bucles no quiere decir que no se un lenguaje d programación, sinrve para prgramar.

2º-los headers
en ese caso precisamente estan mata aumentar la letra

3º -las faltas
si leiste la parte final pone que soy humano...

4º el dreamweaver es posiblemente el mejor d todos los editores, o sino actualizalo...

P.D:probexo y dejo el wod

Adjuntos

html.zip (0 Bytes)

Plata escribió:1º
que no tenag bucles no quiere decir que no se un lenguaje d programación, sinrve para prgramar.

No te encabezones porque no es así. No sirve para programar. Si dices que HTML sirve para programar es que no sabes el significado de la palabra programar. Así de simple.

2º-los headers
en ese caso precisamente estan mata aumentar la letra

No. Los headers están para indicar que son títulos y ya. Para cambiar el tamaño de la letra usas la propiedad font-size.

3º -las faltas
si leiste la parte final pone que soy humano...

Si tú te leíste a tí mismo, dijiste que te las indicáramos. Y hay alguna más, pero esa duele a la vista y se repite unas cuantas veces durante el texto

4º el dreamweaver es posiblemente el mejor d todos los editores, o sino actualizalo...

Ni de coña.
eeh peña, buen rollito.

Wikipedia tiene las respuestas de to

HTML
El lenguaje html, es un lenguaje marcado, osea, k es un lenguaje echo con etiquetillas, k interpreta el navegador, pero gracias a este lenguaje, se le puede añadir al del html o por hay codigo de programacion (del palo bucles, if ...), como el asp, js, bla bla bla, jeje

El dreamweawer, puede k no sea el mejor editor de textos, pero es el k las empresas utilizan, ejej osea, k hay k tar al loro, y la verdad, k rula bastante bien aunke el NVU tb tira bien, es una buena alternativa.

NVU for life, jaja.

bueno, saludos, y paz [angelito]
es un lenguaje echo con etiquetillas, k interpreta el navegador, pero gracias a este lenguaje, se le puede añadir al del html o por hay codigo de programacion (del palo bucles, if ...), como el asp, js, bla bla bla, jeje

No. Hay etiquetas para incluir scripts en páginas HTML, escritos en Javascript, VBScript o lo que sea. Y ASP, JSP o PHP lo que hacen es usar un código de programación para poder generar páginas web dinámicas. Es decir, puedes incluir código de algún lenguaje de programación dentro de una página web, pero el HTML no es un lenguaje de programación.


El dreamweawer, puede k no sea el mejor editor de textos, pero es el k las empresas utilizan, ejej osea, k hay k tar al loro, y la verdad, k rula bastante bien

No. Es el que utiliza la gente que no tiene mucha idea de desarrollo web o bien quiere realizar algún prototipo rápido.
zootropo escribió:No. Es el que utiliza la gente que no tiene mucha idea de desarrollo web


[qmparto] [qmparto] [qmparto] [qmparto] [plas]

no coments.
zootropo escribió:No. Es el que utiliza la gente que no tiene mucha idea de desarrollo web o bien quiere realizar algún prototipo rápido.
Y segun tu que es lo mejor para crear paginas web? Es que estoy interesado en aprender.
Gracias!! ^^
adriantxu escribió:Y segun tu que es lo mejor para crear paginas web? Es que estoy interesado en aprender.
Gracias!! ^^


no se pero hagas lo que hagas siempre te va a hacer falta algo de html, tanto si haces las paginas en xml aplicandoles xsl, tanto si usas javascript para realizar cosas de la pagina o como si usas PHP. yo que tu aprendia HTML y CSS para comenzar, es decir nada que dreamweaver no te pueda brindar xD
Ningún diseñador que se precie utilizaría un editor WYSIWYG porque el resultado va a ser una página que en el peor de los casos tenga etiquetas propietarias y no se vea correctamente en todos los navegadores, y en el mejor de los casos usará tablas para maquetar o estará MUY MUY lejos de acercase a pasar el nivel A del WAI. Y si no, por el simple hecho de que seas tú el que elija qué va a tener la web, no el editor.

Dreamweaver no es un mal programa, pero si le quitas las características WYSIWYG pierde la mitad de su gracia.

La mayoría de la gente que utiliza Dreamweaver, que es mucha, no se suele preocupar de cosas como la accesibilidad o los estándares de la W3C.

Yo, como siempre que tengo que escribir algo de XHTML es combinado con código JSP o PHP suelo utilizar Eclipse con algún que otro plugin instalado, que es el IDE que suelo usar para todo. Y si no, vim a pelo con resaltado de sintaxis y a correr. Pero me han hablado muy bien de NVU y de Quanta (Linux).

[qmparto] [qmparto] [qmparto] [qmparto] [plas]

no coments.

Aunque no es mi campo principal tengo algo de experiencia en el desarrollo web. Y no me refiero a escribir páginas HTML 4.0 estáticas maquetadas con tablas. Algún tutorial relacionado con la materia que he escrito:

http://mundogeek.net/wiki/doku.php?id=tutorial_de_javascript
http://mundogeek.net/wiki/doku.php?id=construye_tu_propia_extension_para_firefox
http://mundogeek.net/archivos/2005/10/15/instalar-php-y-mysql/
http://mundogeek.net/archivos/2006/04/03/apache-y-tomcat-en-linux/
http://mundogeek.net/archivos/2005/09/30/instalar-un-servidor-web-apache/
http://mundogeek.net/archivos/2007/01/25/jsp-javaserver-pages/
http://mundogeek.net/archivos/2007/01/26/servlets/
http://mundogeek.net/archivos/2007/01/27/hibernate/
http://mundogeek.net/archivos/2007/01/27/jdbc/

...



Por favor, ¿alguien más le puede decir al creador de la entrada que HTML no es un lenguaje de programación? Que parece ser que de mí no se fía.
Por favor, ¿alguien más le puede decir al creador de la entrada que HTML no es un lenguaje de programación? Que parece ser que de mí no se fía.


HTML no es un Lenguaje de Programación!!!.

zootropo veo que entiendes del tema, al ver este comentario asi sin más:
No. Es el que utiliza la gente que no tiene mucha idea de desarrollo web


Pos me sentí algo ofendido, ya que yo no es que aga muchas webs, incluso abre utilizado mas el bloc de notas, y el gedit, que el dreamweawer, peró nose, el NVU, yo diria que es algo parecido al dreamweawer, seria como comparar el Microsoft Word, con el Open Office Word. También esque tus respuestas son algo contundentes, jeje.

bueno saludos, y paz jeje.
Si, ha sido un comentario un tanto radical, pero no por el programa en sí, que es un gran programa, sino por la forma en la que estaba seguro que lo iba a utilizar el autor de la entrada.

Totalmente fuera de lugar. Lo lamento si he ofendido.
A mi gusto lo major para maquetar html es Scite y lo de estilos en el html es del siglo pasado [burla2]


CSS rules
Buenas, alguien me podría decir algun buen tutorial de CSS en castellano? Alguno que conozcais y sepais que es sencillito para ir empezando?
Saludos y gracias
Esto, si.. perdon, teniais razon, coji mis viejos apuntes y vi k en html ponia lenguaje d etiquetas [decaio]

otra cosa, yo sigo apoyando k el dreamweaver es de los mas profesionales que puedes encontrar, te sirve para varios lenguajes web, puedes usar las capas, tiene linea d tiempo...
pero para esa ultima hay k actualizarle...

sino dime tu cual editor t parece mejor
me han sangrado los ojos cuando he visto html lenguaje de programación.
joder, no e recivido tantas indirectas en mi vida
xD
Plata escribió:Esto, si.. perdon, teniais razon, coji mis viejos apuntes y vi k en html ponia lenguaje d etiquetas [decaio]

otra cosa, yo sigo apoyando k el dreamweaver es de los mas profesionales que puedes encontrar, te sirve para varios lenguajes web, puedes usar las capas, tiene linea d tiempo...
pero para esa ultima hay k actualizarle...

sino dime tu cual editor t parece mejor


El mejor editor es gedit, o si estas en windows notepad++, el resto son pijadas para acabar antes.

PD: Eclipse tampoco se libra, gedit hasta la muerte.
nunca habia oido hablar d el, lo provare...
Cyberdemon escribió:Buenas, alguien me podría decir algun buen tutorial de CSS en castellano? Alguno que conozcais y sepais que es sencillito para ir empezando?


En castellano tienes desarrollo web, que puede que lo conozcas. Tambien tiene tutos de html, js, aps, php ...

Luego tb esta w3schools , te vas a la seccion de CSS, esa web es muy buena, tiene muchos ejemplos, tambien tiene mas lenguajes web, lo malo que esta en ingles, pero ingles easy, ejje. Lo mejor son los ejemplos, estan echos de una manera, que los puedes hacer en la web (osea, que no tienes que abrir el bloc de notas ni na),.

Plata el gedit, es una especie de bloc de notas, pero se podria decir que mas potenten, ya que se le puede añadir plugins, para que sea mas potente segun lo que se quiera buscas, no te vallas a pensar que es un Dreamweawer, o algo asi, ejje

el gedit, si tubiera un boton para hacer la publicaciones web, osea, k si le dieras el F5, por ejemplo, se ejecutara la web, seria PERFERCTO, ejje

sabeis si se puede acer eso que comento, y tb sabies si este editor esta para windows,?? o solo es para linux¿

Plata animos, jeje.

saludos
Hola tío, pues muchas gracias, mañana con más calma me pongo a mirar la web que me comentas :)
Saludos
20 respuestas
Archivado
Volver a General