Tutorial HTML para principiantes parte 1 - PSPStation.org - Tu web de Scene y Tutoriales de PSP, PS3, PC.

Death_note · 28-05-2008

Hola amigos de pspstation, eh decidido aprender el lenguaje de programación HTML para ayudar a algunos amigos en cosas que necesiten y en la Web también, les soy honesto llevo muy poco pero es por eso que pongo el tutorial para que sea de una manera practica y sencilla recuerda que es para principiantes.[hr]

Introducción:

El lenguaje HTML en si es sencillo una vez que agarras la maña, el solo hecho de pensar en aprender algo nuevo es difícil pero eh estado checando varios tutoriales y pues me creo listo para empezar HTML(Lenguaje con el que se crean las paginas Web) trataremos este tutorial de mi hacia ti y no de forma muy estricta y profesional si no de confianza.[hr]

Comenzando:

Pues para comenzar necesitaremos un editor de texto, puede ser cualquiera por ejemplo el bloc de notas o notepad incluido en Windows.

Nota:
Les pongo una forma de abrir sus archivos desde el navegador, para esto no necesitamos Internet.

1.-Al guardar el archivo tenemos que guardarlo con la terminación o formato HTML.
2.-Al abrirlo con IE vamos a "Abrir archivo" o "Ctrl+O" y elegimos nuestro archivo previamente guardado.
3.-Saldrá la pagina con nuestro archivo y veremos como va quedando.

Muy bien comencemos a adentrarnos en materia, para ello es necesario empezar con lo mas básico.[hr]

Estructura:

Uno de los detalles que nunca debes olvidar es que el lenguaje de HTML trabaja con etiquietas o tags mejor conocidas las cuales son de 2 tipos, por ejemplo:

Código:

<TITLE></TITLE>        Son etiquetas que nesesitan cerrarse.
<HR>, 
               Son etiquetas que no nesesitan cerrarse.

La estructura de HTML siempre es la misma por eso es importante que recuerdes esto siempre:

Código:

<HTML>
<HEAD>
<TITLE>Titulo de la pagina</TITLE>
</HEAD>
<BODY>
Aquí va todo el contenido del programa o pagina.
</BODY>
</HTML>

Esto se debe de seguir como una norma. Los demás tags irán dentro de <BODY></BODY>.

Ahora iremos creando una pagina es necesario que vayas viendo tu avance poco a poco en el navegador con tu archivo creado.

Pondremos lo siguiente:

Código:

<HTML>
<HEAD>
<TITLE>El rincón del ocioso</TITLE>
</HEAD>
<BODY>
Pagina de buen rollo y amigos ociosos que quieren compartir cosas.
</BODY>
</HTML>

Abrimos nuestro archivo en el navegador y observamos como nos va quedando, !OJO¡ hacer esto en cada avance para que notes los cambios.

Guardamos el archivo con el nombre que elijamos pero con terminación .HTML, por ejemplo: "rincon.HTML"[hr]

Etiquetas:

Haremos una pauta para analizar las etiquetas mas usadas, recuerda que este tutorial es básico por el cual solo pondré las mas referentes para que notes cambios en los archivos que vayamos a crear.

Código:

<Hx> </Hx>
Estas etiquetas son usadas para resaltar un titulo, se utiliza del 1 al 6 siendo el 1 el mas importante el 2 menos y así sucesivamente, entre mas importante el titulo mas resaltado y grande estará.

Ejemplo:
<H1>Encabezado</H1>
<H2>Encabezado</H2>
<H3>Encabezado</H3>
<H4>Encabezado</H4>

También veremos algunas etiquetas para darle un mayor formato a nuestra pagina, por ejemplo:

Negritas
Itálica
<U>subrayado</U>


<FONT SIZE=x> </FONT>
Sirve para cambiar el tamaño, el número por defecto es el 3, pero se utiliza del 1 al 7.

<CENTER> </CENTER>
Con este centraremos el texto.

También se utilizaran algunas etiquetas separadoras para darle aun más formato.


<PRE> </PRE>
Permite que el texto que se encuentre dentro de ella se visualice tal como se creó en la página origen, respetando espaciado, salto de línea, salto de párrafo, tabulación, etc.



Con esta etiqueta realizamos un salto de línea. (Observar que no se necesita cerrar)




Con esta etiqueta realizamos un salto de párrafo. (Observar que no se necesita cerrar)

<HR>
Esta etiqueta es una línea separadora. Esta etiqueta tiene la posibilidad de ser modificada. 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.
Ejemplo:
<HR>
<HR WIDTH=20% ALIGN=RIGHT SIZE=7>
<HR WIDTH=250 ALIGN=CENTER SIZE=5 NOSHADE>

[hr]

Tabla de colores:

En HTML para poder representar colores se utilizan 6 números hexadecimales.

Código:

White           #FFFFFF  	 
Red 	        #FF0000 	
Green          #00FF00        
Blue 	        #0000FF        
Yellow         #FFFF00         
Black 	       #000000        
Aqua 	      #70DB93  
Gray  	      #C0C0C0       
Lime  	      #32CD32        
Maroon      #8E236B        
Navy  	     #23238E         
Silver       #E6E8FA

Estos colores tiene la función de no solo poner el código si no puede ser cambiado por su nombre por ejemplo:

Código:

<FONT COLOR=RED></FONT>
<FONT COLOR=#FF0000></FONT>

Y representamos lo mismo.

También podemos cambiar desde antes en el body los colores que utilizaremos.
Ejemplo:

Código:

<BODY BGCOLOR="#FFFFFF" TEXT="#FF0000" LINK="#00AEFF">

Donde BODY BGCOLOR="#FFFFFF" será el fondo de nuestro documento, TEXT="#FF0000" el color del texto y LINK="#00AEFF" el color de las links o enlaces.

O solo una parte del texto que deseemos, <FONT COLOR="#FF0000">Texto</FONT>

¡Ojo! Debes notar que el código de los colores esta entre "#", si quieres ver mas códigos de colores pasa por aquí.[hr]

Asta aquí terminamos la primera parte del tuto para que no se les haga pesado recuerden estudiar para que sea mas fácil en la próxima parte donde comenzaremos a crear de lleno nuestra primera pagina.

Gladiator · 28-05-2008

Fenomenal tio, Gracias!

yobo · 28-05-2008

que bueno....buen tuto

fastva92 · 28-05-2008

muxas gracias , esperando la segunda parte :P

juliocls · 28-05-2008

De mucha utilidad, gracias

Zaqui · 29-05-2008

;uchas gracias tio, es una gran guía de HTML

Un diéz para el hilo y unos puntitos para ti, que te lo mereces con este gran curro

Gladiator · 29-05-2008

Por cierto, me he fijado en lo de los colres, que tal si pones un enlace a las tablas de colores hexadecimales que puse en el foro de programacion? =D

migueliziosop · 04-07-2009

Esta bien aunque veo algunos errores y unas partes donde se podria expandir. Ahora no puedo ayudar porque estoy desde el PSP. Me gustaria ayudarte en los tutoriales de HTML.
Saludos.

28-05-2008	#1
Death_note Elite Fecha de Ingreso: Apr 2008 Ubicación: Mundo shinigami Mensajes: 708 Gracias: 0 Agradecido 1 vez en 1 mensaje.	Tutorial HTML para principiantes parte 1 Hola amigos de pspstation, eh decidido aprender el lenguaje de programación HTML para ayudar a algunos amigos en cosas que necesiten y en la Web también, les soy honesto llevo muy poco pero es por eso que pongo el tutorial para que sea de una manera practica y sencilla recuerda que es para principiantes.[hr] Introducción: El lenguaje HTML en si es sencillo una vez que agarras la maña, el solo hecho de pensar en aprender algo nuevo es difícil pero eh estado checando varios tutoriales y pues me creo listo para empezar HTML(Lenguaje con el que se crean las paginas Web) trataremos este tutorial de mi hacia ti y no de forma muy estricta y profesional si no de confianza.[hr] Comenzando: Pues para comenzar necesitaremos un editor de texto, puede ser cualquiera por ejemplo el bloc de notas o notepad incluido en Windows. Nota: Les pongo una forma de abrir sus archivos desde el navegador, para esto no necesitamos Internet. 1.-Al guardar el archivo tenemos que guardarlo con la terminación o formato HTML. 2.-Al abrirlo con IE vamos a "Abrir archivo" o "Ctrl+O" y elegimos nuestro archivo previamente guardado. 3.-Saldrá la pagina con nuestro archivo y veremos como va quedando. Muy bien comencemos a adentrarnos en materia, para ello es necesario empezar con lo mas básico.[hr] Estructura: Uno de los detalles que nunca debes olvidar es que el lenguaje de HTML trabaja con etiquietas o tags mejor conocidas las cuales son de 2 tipos, por ejemplo: Código: <TITLE></TITLE> Son etiquetas que nesesitan cerrarse. <HR>, Son etiquetas que no nesesitan cerrarse. La estructura de HTML siempre es la misma por eso es importante que recuerdes esto siempre: Código: <HTML> <HEAD> <TITLE>Titulo de la pagina</TITLE> </HEAD> <BODY> Aquí va todo el contenido del programa o pagina. </BODY> </HTML> Esto se debe de seguir como una norma. Los demás tags irán dentro de <BODY></BODY>. Ahora iremos creando una pagina es necesario que vayas viendo tu avance poco a poco en el navegador con tu archivo creado. Pondremos lo siguiente: Código: <HTML> <HEAD> <TITLE>El rincón del ocioso</TITLE> </HEAD> <BODY> Pagina de buen rollo y amigos ociosos que quieren compartir cosas. </BODY> </HTML> Abrimos nuestro archivo en el navegador y observamos como nos va quedando, !OJO¡ hacer esto en cada avance para que notes los cambios. Guardamos el archivo con el nombre que elijamos pero con terminación .HTML, por ejemplo: "rincon.HTML"[hr] Etiquetas: Haremos una pauta para analizar las etiquetas mas usadas, recuerda que este tutorial es básico por el cual solo pondré las mas referentes para que notes cambios en los archivos que vayamos a crear. Código: <Hx> </Hx> Estas etiquetas son usadas para resaltar un titulo, se utiliza del 1 al 6 siendo el 1 el mas importante el 2 menos y así sucesivamente, entre mas importante el titulo mas resaltado y grande estará. Ejemplo: <H1>Encabezado</H1> <H2>Encabezado</H2> <H3>Encabezado</H3> <H4>Encabezado</H4> También veremos algunas etiquetas para darle un mayor formato a nuestra pagina, por ejemplo: Negritas Itálica <U>subrayado</U> <FONT SIZE=x> </FONT> Sirve para cambiar el tamaño, el número por defecto es el 3, pero se utiliza del 1 al 7. <CENTER> </CENTER> Con este centraremos el texto. También se utilizaran algunas etiquetas separadoras para darle aun más formato. <PRE> </PRE> Permite que el texto que se encuentre dentro de ella se visualice tal como se creó en la página origen, respetando espaciado, salto de línea, salto de párrafo, tabulación, etc. Con esta etiqueta realizamos un salto de línea. (Observar que no se necesita cerrar) Con esta etiqueta realizamos un salto de párrafo. (Observar que no se necesita cerrar) <HR> Esta etiqueta es una línea separadora. Esta etiqueta tiene la posibilidad de ser modificada. 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. Ejemplo: <HR> <HR WIDTH=20% ALIGN=RIGHT SIZE=7> <HR WIDTH=250 ALIGN=CENTER SIZE=5 NOSHADE> [hr] Tabla de colores: En HTML para poder representar colores se utilizan 6 números hexadecimales. Código: White #FFFFFF Red #FF0000 Green #00FF00 Blue #0000FF Yellow #FFFF00 Black #000000 Aqua #70DB93 Gray #C0C0C0 Lime #32CD32 Maroon #8E236B Navy #23238E Silver #E6E8FA Estos colores tiene la función de no solo poner el código si no puede ser cambiado por su nombre por ejemplo: Código: <FONT COLOR=RED></FONT> <FONT COLOR=#FF0000></FONT> Y representamos lo mismo. También podemos cambiar desde antes en el body los colores que utilizaremos. Ejemplo: Código: <BODY BGCOLOR="#FFFFFF" TEXT="#FF0000" LINK="#00AEFF"> Donde BODY BGCOLOR="#FFFFFF" será el fondo de nuestro documento, TEXT="#FF0000" el color del texto y LINK="#00AEFF" el color de las links o enlaces. O solo una parte del texto que deseemos, <FONT COLOR="#FF0000">Texto</FONT> ¡Ojo! Debes notar que el código de los colores esta entre "#", si quieres ver mas códigos de colores pasa por aquí.[hr] Asta aquí terminamos la primera parte del tuto para que no se les haga pesado recuerden estudiar para que sea mas fácil en la próxima parte donde comenzaremos a crear de lleno nuestra primera pagina. __________________

28-05-2008	#4
fastva92 Espia Fecha de Ingreso: Apr 2008 Ubicación: CaCeReSS¡¡ CC¡¡ Mensajes: 118 Gracias: 0 Agradecido 0 veces en 0 mensajes.	Re: Tutorial HTML Para Principiantes Parte 1 muxas gracias , esperando la segunda parte :P __________________ :P GANA DINERO POR INTERNET HACIENDO CLIC AKI (muy facil) =)

28-05-2008	#5
juliocls Crack Fecha de Ingreso: Apr 2008 Ubicación: México Mensajes: 1,041 Gracias: 0 Agradecido 1 vez en 1 mensaje.	Re: Tutorial HTML para principiantes parte 1 De mucha utilidad, gracias __________________

29-05-2008	#6
Zaqui Maestro Fecha de Ingreso: Apr 2008 Ubicación: Frente al ordenata XD Mensajes: 2,438 Gracias: 0 Agradecido 1 vez en 1 mensaje.	Re: Tutorial HTML para principiantes parte 1 ;uchas gracias tio, es una gran guía de HTML Un diéz para el hilo y unos puntitos para ti, que te lo mereces con este gran curro __________________ Lectura recomendable para todos los users de la web, aquí lo tenéis todoNovatos Leer si o si) Spoiler: Mostrar Todo lo que buscas o necesitas de PSP, lo tienes aqui: Spoiler: Mostrar General PSP Recopilación: Tutoriales staff y users Recopilación: Custom Firmwares Mochila del aprendiz v3 Sceene PSP Recopilación: Sceene (aplicaciones y plugins) Recopilación: emuladores para PSP Recopilación: juegos homebrew PSP Área técnica PSP Listado de errores mas comunes de PSP Personalización PSP Recopilación: tutoriales, temas tuning... Programación PSP Recopilación: tutoriales & sources codes Todo lo que buscas o necesitas de PS3, lo tienes aqui: Spoiler: Mostrar General PS3 Indice de tutoriales PS3 Todo lo que buscas o necesitas de Wii, lo tienes aqui: Spoiler: Mostrar General Wii Indice de tutoriales para Wii Todo lo que buscas o necesitas de PC, lo tienes aqui: Spoiler: Mostrar General PC Recopilación: tutoriales, manuales y trucos PC Recopilación: emuladores PC Normas de la comunidad

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado

28-05-2008	#2
Gladiator Dios de la Guerra Fecha de Ingreso: Apr 2008 Ubicación: Donde Tu No Estes...^^ Mensajes: 3,205 Gracias: 0 Agradecido 6 veces en 5 mensajes.	Re: Tutorial HTML para principiantes parte 1 Fenomenal tio, Gracias! __________________ Lectura recomendable para todos los users de la web, aquí lo tenéis todoNovatos Leer si o si) Spoiler: Mostrar Todo lo que buscas o necesitas de PSP, lo tienes aqui: Spoiler: Mostrar General PSP Recopilación: Tutoriales staff y users Recopilación: Custom Firmwares Sceene PSP Recopilación: Sceene (aplicaciones y plugins) Recopilación: emuladores para PSP Recopilación: juegos homebrew PSP Área técnica PSP Listado de errores mas comunes de PSP Personalización PSP Recopilación: tutoriales, temas tuning... Programación PSP Recopilación: tutoriales & sources codes Todo lo que buscas o necesitas de PS3, lo tienes aqui: Spoiler: Mostrar General PS3 Indice de tutoriales PS3 Todo lo que buscas o necesitas de Wii, lo tienes aqui: Spoiler: Mostrar General Wii Indice de tutoriales para Wii Todo lo que buscas o necesitas de PC, lo tienes aqui: Spoiler: Mostrar General PC Recopilación: tutoriales, manuales y trucos PC Recopilación: emuladores PC Normas de la comunidad

28-05-2008	#3
yobo Maestro Fecha de Ingreso: Apr 2008 Ubicación: Frente al PC Mensajes: 1,692 Gracias: 0 Agradecido 4 veces en 1 mensaje	Re: Tutorial HTML Para Principiantes Parte 1 que bueno....buen tuto __________________

04-07-2009	#8
migueliziosop Merodeador Fecha de Ingreso: Sep 2008 Ubicación: Coderly Hills :P Mensajes: 72 Gracias: 0 Agradecido 0 veces en 0 mensajes.	Re: Tutorial HTML para principiantes parte 1 Esta bien aunque veo algunos errores y unas partes donde se podria expandir. Ahora no puedo ayudar porque estoy desde el PSP. Me gustaria ayudarte en los tutoriales de HTML. Saludos. __________________ Ya a llegado..Migueliziosop anda suelto..

Temas Similares
Tema	Autor	Foro	Respuestas	Último mensaje
Herramienta para pasar de bbcode a html	Zheive	Rincón del Webmaster	0	09-04-2010 12:10 PM
[Tutorial] Linux para Windowseros -1ra Parte-	brujitosexy	GNU/Linux	2	07-02-2010 07:09 PM
imagen para la parte trasera de mi psp	kvin	El Basurero	2	16-01-2010 06:16 PM
[Tutorial] - Crea tus propios juegos - Genero: Plataformas - Parte I	DeViaNTe	Tutoriales	3	25-10-2009 09:36 AM
[Tutorial] Optimizar sistemas Debian y derivados (Parte 1)	gothic_soul	GNU/Linux	8	20-07-2009 11:22 PM

(0 miembros y 1 visitantes)