04-mar-2007, 01:34
|
|||
|
|||
Tutorial Básico de HTML - Empezar desde cero - by Aripm
Bueno como es bastante la gente que pregunta cómo hacer una web, decidí hacer este manual de html para quienes quieran aprender desde cero a hacer una pág. web adaptada a su gusto
 Aquí va el tutorial Creación de Webs – Tutorial básico de HTML – HTML desde cero - by Aripm © Índice 1. Estructura básica 2. Textos 3. Enlaces 4. Imágenes 5. Música y Vídeos 6. Recopilación de ejemplos 7. Tabla de Colores HTML 8. Ampliación <body></body> 9. Resumiendo... 1. Estructura básica Aquí tenemos la estructura básica de una página web en HTML: <html> <head> <title></title> </head> <body> </body> </html> Explicación de qué contienen esos tags en su interior: <html></html> --> Incluyen en su interior todo el contenido de la página. <head></head> --> Cabecera de la página. En ella va el título <title>aquí el título</title> <body></body> --> Aquí se encuentra todo el contenido de la página. (texto, fotos...) 2. Textos 2.1. Alineación de textos Al igual que en cualquier programa de edición de textos, podemos justificar el texto a la izquierda, derecha, centrarlo o justificarlo. Explicación: <p align=”left”>aquí el texto</p> <p align=”right”>aquí el texto</p> <p align=”center”>aquí el texto</p> <p align=”justify”>aquí el texto</p> En el primer caso, lo que escribiésemos en donde dice aquí el texto, nos lo alinearía a la izquierda. En el segundo caso lo alinearía a la derecha, en el tercero lo centraría, y en el cuarto justificaría los márgenes. 2.2 Tamaño, color y tipo de letra Las opciones de los textos van entre los tags <font> y </font>. Las distintas opciones que pueden llevar los tags tags <font> y </font> son las siguientes: size, color, type. Por lo consiguiente, <font size=”3” color=”FF0000” type=”Arial”>aquí el texto</font>, significaría que lo que escribiésemos en aquí el texto saldría en tamaño 3, color rojo* y escrito en el tipo de letra Arial. *Los colores en HTML se escriben según su valor hexadecimal. Más adelante encontraréis la Tabla de Colores, para que sepáis cuál es cuál. 2.3 Negrita, Cursiva y Subrayado Para escribir en negrita se usan los tags <b>aquí el texto</b> Para escribir en cursiva se usan los tags <i>aquí el texto</i> Para escribir un texto subrayado se usan los tags <u>aquí el texto</u> Por lo tanto, si escribimos <b><i><u>Hola</b></i></u>, nos aparecerá Hola en la página. 3. Enlaces 3.1. Enlace simple Para añadir un enlace (link) a una página, se usan los tags <a href=”aquí la web”>aquí el texto a mostrar</a> Ejemplo: <a href=”http://www.google.es”>Clica aquí para ir a Google</a> mostraría en pantalla lo siguiente: Clica aquí para ir a Google. 3.2 Enlace con imágenes Mirar el apartado del punto 4: Enlazar mostrando imágenes 4. Imágenes 4.Imágenes (entre <body> y </body>) Se usa el tag <img src=”link en el que se ubica la imagen”> Ejemplo: si pusiésemos <img src=”http://fgiasson.com/blog/media/google%20logo.jpg”> Nos saldría:  4.1.Alineación de imágenes Exactamente lo mismo que el punto 2.1. de este mismo tutorial. Si cambiásemos el aquí el texto por <img src=”link en el que se ubica la imagen”> podríamos alinear la imagen a izquierda, derecha, o centrarla. 4.2.Opciones de imágenes <img src=”link en el que se ubica la imagen” height=”altura px” width=”anchura px” alt=”texto a mostrar”> Explicación: height=”altura px” --> Permite modificar a nuestro gusto la altura de la imagen insertada estableciendo su tamaño en píxels. width=”altura px” --> Permite modificar a nuestro gusto la anchura de la imagen insertada estableciendo un número que será su tamaño en píxels. alt=”texto a mostrar” --> Muestra el texto que queramos al pasar el puntero por encima de la imagen insertada. Ejemplo: <img src=”http://fgiasson.com/blog/media/google%20logo.jpg” height=”100” width=”100” alt=”Google”> Nos mostraría la imagen de más arriba con un tamaño de 100x100 píxels y mostraría el texto Google cuando le pasasemos el puntero por encima. 4.3.Enlazar mostrando imágenes <a href=”link del sitio”><img src=”ubicación de la imagen”></a> 5. Música y Vídeos 5.1.Poner música de fondo en tu web <bgsound src=”enlace del archivo de audio”> Otras opciones: <bgsound src=”enlace del archivo de audio” autostart=”true” loop=”true”> Explicación: autostart=”true” --> Hacer que al entrar a la web el audio empieze a sonar. Cambiar true por false para que esto no ocurra. loop=”true” --> Hacer que cuando acabe de reproducir el sonido de fondo empieze a sonar de nuevo, y así infinitas veces. Cambiar true por false para que solamente se escuche una vez. 5.2.Reproducción de Vídeos <embed src=”enlace del vídeo”> Otras opciones: <embed src=”enlace del vídeo” height=”altura px” width=”anchura px” autostart=”true” loop=”true”> height=”altura px” y width=”anchura px” --> De la misma forma que en las imágenes podíamos establecerles un tamaño en píxels, con el vídeo podemos hacer lo mismo estableciendo un número de píxels de altura y anchura. autostart=”true” y loop=”true” --> Explicado en el punto 5.1. 6. Recopilación de ejemplos 6.1.Texto alineado al centro, con letra Arial de tamaño 3, de color rojo, en negrita, cursiva y subrayado. <p align=”center”><font color=”#FF0000” size=”3” type=”Arial”><b><i><u>aquí el texto</b></i></u></font></p> 6.2.Enlace alineado a la izquierda con una imagen de tamaño 100x100 píxels que nos lleva a otra web si le clicamos y a su vez nos muestra un texto si le pasamos el cursor por encima. <p align=”left”><a href=”enlace del sitio”><img src=”enlace de la imagen” height=”100” width=”100” alt=”texto a mostrar cuando se le pasa el cursor por encima”></a></p> 6.3.Vídeo alineado a la derecha con ejecución automática y repetición una vez reproducido, en un reproductor de 300x300 píxels. <p align=”right”><embed src=”enlace del vídeo” height=”300” width=”300” autostart=”true” loop=”true”></p> 7. Tabla de colores HTML  8. Ampliación <body></body> Son muchas las opciones que pueden ir dentro del tag <body>. Aquí explicaré unas cuantas que son útiles, por si queréis hacer uso de ellas: <body onkeydown=”return false” oncontextmenu=”return false” bgcolor=”color” text=”color” link=”color” vlink=”color” alink=”color”>contenido de la página</body> Explicación: onkeydown=”return false” --> Cuando quien está navegando por tu web pulsa una tecla, el teclado no le responde. Útil para evadir la gente que se dedica a hacer Ctrl+C y Ctrl+V para copiar cosas de una web a otra, puesto que cuando hagan Ctrl+C no se copiará ningún texto. oncontextmenu=”return false” --> Desactiva por completo el botón derecho del ratón. También es útil para evadir a los copiones. bgcolor=”color” --> Establece el color del fondo de tu web. link=”color” --> Establece el color que tendrán el texto de los vínculos en tu web. vlink=”color” --> Establece el color que tendrán los vínculos visitados. alink=”color” --> Establece el color que tendrán los vínculos activos. 9. Resumiendo... Espero que este tutorial sobre lo más básico en HTML haya sido de gran ayuda a aquellos que querían crear una web en HTML y no tenían ni idea de su programación. Un saludo, Aripm PD: Espero opiniones      
|
|
|
||||
|
||||
|
Tutorial Básico de HTML - Empezar desde cero - by Aripm
|
|
04-mar-2007, 19:19
|
||||
|
||||
|
Mal agradecidos ¬¬
Excelente tutorial, resume todo lo básico, excelente para las personas que se inician en el desarrollo de páginas webs y están medios perdidos  Lo que sí habría sido bueno aclarar, lo del <div> y lo que son las CSS, cómo un dato nada más. Por lo demás, muchas gracias Saludos
|
|
17-oct-2007, 02:12
|
||||
|
||||
|
Re: Tutorial Básico de HTML - Empezar desde cero - by Aripm
Muy buen tutorial, pss yo me estoy haciendo una pagina web
para mi servidor de el juego RPG Lineage 2, i keria saber si alguien me puede pasar una pagina, ke me recomienden, claro ke sea gratos =),, i ke sirva para este tuto, bueno espero respuestas desde yua gracias,,
|
|
21-dic-2007, 01:22
|
||||
|
||||
|
Re: Tutorial Básico de HTML - Empezar desde cero - by Aripm
oye man como hago para poner una imagen de fondo o un color?
EDIT: porke nadi e me contesta??  Última edición por ~Dark MDT fecha: 22-ene-2008 a las 02:24.
|
 |
| Herramientas | |
| Desplegado | |
|
|
Temas Similares para: Tutorial Básico de HTML - Empezar desde cero - by Aripm
|
||||
| Tema | Autor | Foro | Respuestas | Último mensaje |
| Recopilación de Guías de Juegos | Sky Angel | Guías | 303 | 18-may-2008 23:28 |
| Guias Para The Legend Of The Zelda | DeLuXe | Guías | 7 | 26-mar-2008 21:38 |
| Guias Para The Legend Of The Zelda | DeLuXe | Guías | 6 | 28-feb-2008 14:40 |
| duda sobre zero 4 | RoLiOnE | GBA | 23 | 04-nov-2007 05:54 |
| Guias de emudesc (solo aportes) | bruno001 | Guías | 2 | 10-abr-2007 22:51 |
Mode Lineal
