Tutorial Básico de HTML - Empezar desde cero - by Aripm

Estado
Cerrado para nuevas respuestas
OP
Mensajes
17
Reacciones
0
Puntos
0
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:

google%20logo.jpg


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

tablahtmlix8.png


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

Mensajes
1.795
Reacciones
13
Puntos
0
Ubicación
Santiago, Chile.
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 :D

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
 

Kenzo.

Heroic User
Mensajes
3.141
Reacciones
209
Puntos
1.114
Ubicación
Buenos Aires
Muy buen tuto ;)
Me va a servir para mi web.. cuando tenga ganas de hacerla :D
 

skaparate

EMD Legend
Mensajes
2.350
Reacciones
9
Puntos
850
Ubicación
Chile
Hola aripm, soy nuevo y por eso no había dado las gracias, pero ahora que conozco el tutorial: muchas gracias!!
 
Mensajes
171
Reacciones
0
Puntos
0
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,,
 

Kazuo Atreides

EMD Star
Mensajes
406
Reacciones
50
Puntos
696
Ubicación
Santiago, Chile
oye man como hago para poner una imagen de fondo o un color?

EDIT: porke nadi e me contesta?? :(
 
Última edición:
Mensajes
1
Reacciones
0
Puntos
0
Vaya buena información! La verdad que ya tenia tiempo que quiero saber como dar formato a los textos en html, y no tenia idea solo sabia que se le tenian que poner codigos, pero aqui esta la base de todo, gracias hermano!
 

Marco

Banneado
Mensajes
5.171
Reacciones
1.460
Puntos
0
Muchas gracias por esta corta pero informativa guía :).
Hace poco tiempo que estrene mi propio Tumblr y quiero modificar los temas -que están hechos en HTML- para hacerla más de mi "estilo".

Cincos estrellas al tema. :wah:
 
Estado
Cerrado para nuevas respuestas
Arriba Pie