Demo Blog

tuto de html

by Skhack on Nov.22, 2009, under , , , , ,

Hola aquí os dejo un Tuto básico de HTML:

Para empezar necesitamos un editor de texto como el block de notas o el notepad, no uséis el Word porque no va funcionar.

Voy a empezar explicando un poco como funciona el HTML:

-El htm es un lenguaje interpretado no compilado, por lo que el navegador de Internet, como por ejemplo Internet Explorer o mozilla firefox, lo va a interpretar.

-El lenguaje HTML se escribe por etiquetas, ya veréis como son cuando empiece a explicar para que sirven.
Ahora ya voy a explicar mas detalladamente cOmo programar en HTML:

<HTML> es lo que se pone al principio de todo

</HTML> es lo que se pone al final de todo

<HEAD> es lo que abre la cabecera y suele contener la información que no se muestra en la página Web

</HEAD> cierra la cabecera

<BODY> es lo que abre el cuerpo que es la parte del documento que se muestra en el navegador

</BODY> cierra el cuerpo

<title></title> le da un titulo a la pagina Web. Va dentro del head

Este seria el esquema de una pagina Web:

<html>
<head>
<title> TITULO </title>
</head>
<body>
</body>
</html>

------------------------------------

<H1>, <H2>, <H3>... son títulos de encabezamiento y son propiedades del cuerpo, osea del body

<B> indica el texto en negrita*
>* Ambas son propiedades del cuerpo
<I> indica el texto en cursiva*

Si quieres establecer los colores de la pagina Web habría que establecerlos en la etiqueta body

<BODY bgcolor=""text="">

bgcolor sirve para establecer el color de fondo

text sirve para establecer el color del texto

Entre las comillas va el color que queráis que o bien lo ponéis en ingles o bien en hexadecimal, yo os aconsejo lo 2º

Aquí os dejo una pequeña lista de colores en hexadecimal:

CIAN #00FFFF / NEGRO #000000 / AZUL #0000FF / FUCSIA #FF00FF


GRIS #808080 / VERDE #008000 / VERDE #00FF00 / MARRON #800000
LIMA

AZUL #000080 / VERDE #808000 / PURPURA #800080 / ROJO #FF0000
MARINO OLIVA

PLATEADO #C0C0C0/ AZUL #008080 / BLANCO #FFFFFF / AMARILLO #FFFF00
VERDOSO
--------------------------------------

Ahora seguiré explicando mas etiquetas del body

<P>, </P> sirven para separar párrafos

<FONT COLOR="#......"> varia el color del texto

<BLOCQUOTE> sirve para hacer sangrados

<HR> dibuja una línea separadora. Esta etiqueta no hace falta cerrarla

Para insertar imágenes se utiliza la etiqueta <img scr="dirección de la imagen">

Para centrar la imagen se añade a la etiqueta anterior: ...align="center">

Si se quiere la imagen a la derecha...align="right">

Si se quiere a la izquierda...align="left">

Ejemplo: <img scr="dirección de la imagen" align="left">

Para poner contorno a la imagen añade a la etiqueta anterior: ...border="10">

Ejemplo: <img scr="dirección de la imagen "align="right" border="10"> *NOTA: "10" es el grosor del contorno

Si quieres que al pasar el puntero del ratón por encima de la imagen salga un mensaje tienes que añadirle a la etiqueta anterior: ...alt="ejemplo">

Ejemplo: <img scr="dirección de la imagen "align="right" border="10"alt="ejemplo">

para poner un enlace se utiliza esta etiqueta: <a href="dirección del enlace">ejemplo</a>

<marquee> </marquee> para poner una marquesina, es decir, un texto en movimiento.

------------------------------------------------------------

Ahora os dejo el código de lo que seria una página Web (bastante simple) para que lo probéis:

*NOTA: No hagáis caso a los scripts si no sabéis usarlos.

<html>
<head>
<title> prueba </title>
<meta name="Skhack">
</head>
<BODY bgcolor="#000000"text="#00ff00">
<p align="center"> <input type="button" onclick="javascript:window.close()" value="Cerrar Ventana" style="font-family: Verdana; font-size: 8 pt; color: #000080; background-color: #C0C0C0; border-style: solid">
<hr>
<marquee> HOLA SOY SKHACK </marquee>
<hr>
<big> ESTO ES UNA PRUEBA DE HTML </big>
<br>
<br>
<a href="http://llamemoslo-x.blogspot.com" align="center"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp7rzB1r20V2UHnorkz_0NSWKfJ8WR8Pxw-Mrn16x_wHJosHkLVObv-UrsCyWKVzF4XgQ8E2RfiYxqE8tqG6uANaQqZEYLzrfr2AN69x0UE60RgqIBoY967OKGqqpUmVW9Zwwj4lnDe2yh/s400/hacker_symbol.jpg" align="center"> </a>
<br>
</body>
</html>

Ahora os voy a regalar un script muy simple de javascript que os da un mensaje de bienvenida (lo tenéis que poner en el head):

<script type="text/javascript"> alert("aquí el mensaje que quieras poner"); </script>
0 comentarios more...

0 comentarios

Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!