Foros de Emudesc

aripm · #1 04-mar-2007, 02:34

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:

aquí el texto
aquí el texto
aquí el texto
aquí el texto

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 y .
Las distintas opciones que pueden llevar los tags tags y son las siguientes: size, color, type.

Por lo consiguiente, aquí el texto, 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 aquí el texto
Para escribir en cursiva se usan los tags aquí el texto
Para escribir un texto subrayado se usan los tags aquí el texto

Por lo tanto, si escribimos Hola, 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.

aquí el texto

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.

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

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.

<embed src=”enlace del vídeo” height=”300” width=”300” autostart=”true” loop=”true”>

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

Zen · #2 04-mar-2007, 20: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

ElMaestro · #3 11-mar-2007, 05:40

Gracias por el tutorial me fue muy de ayuda

Kenzo. · #4 11-mar-2007, 18:06

Muy buen tuto

Me va a servir para mi web.. cuando tenga ganas de hacerla

Psyfurius · #5 26-mar-2007, 06:06

Muy buen... Tutorial, lo utilizaré de referencia.

skaparate · #6 09-oct-2007, 05:35

Hola aripm, soy nuevo y por eso no había dado las gracias, pero ahora que conozco el tutorial: muchas gracias!!

Frox · #7 17-oct-2007, 03:12

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

~Dark MDT · #8 21-dic-2007, 02:22

oye man como hago para poner una imagen de fondo o un color?

EDIT: porke nadi e me contesta??

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

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	19-may-2008 00:28
Guias Para The Legend Of The Zelda	DeLuXe	Guías	7	26-mar-2008 22:38
Guias Para The Legend Of The Zelda	DeLuXe	Guías	6	28-feb-2008 15:40
duda sobre zero 4	RoLiOnE	GBA	23	04-nov-2007 06:54
Guias de emudesc (solo aportes)	bruno001	Guías	2	10-abr-2007 23:51