Bueno amigos segun mis conocimientos a los que recien empiezan les digo 2 cosas, 1 esto parece largo y dificil pero no lo es, yo no puedo decir se hacer paginas ni se programar en HTML por que es demasiado extenso, pero si podemos aprender cosas y aplicarlas, por ejemplo para el manejo de un Foro, blog, sistema de portales necesitamos saber cosas basicas y ahi es donde aplicamos lo que aprendamos.

Les explicare con mis palabras algunas cosas basicas del html

Por lo general para las etiquetas HTML usamos los comandos para abrir y cerrar <></>
Siempre que empecemos un documento en html debe ir encerrado por las etiquetas html(no es del todo necesario pero se aplica)
Ejemplo

Código: Seleccionar todo

<html>
Contenido de la web
</html>
Head
La etiqueta Siguiente es HEAD, entre cuyas funciones tenemos dar un titulo a la pagina, establecer un lenguaje de escritura, establecer un favicon y permitir el uso de scripts
Ejemplo

Código: Seleccionar todo

<head>
<link rel="shortcut icon" href="images/favicon.ico">(Ruta del Favicon)
<title>El titulo de tu pagina web</title>
<!--[if Nombre del scrip.]>
<script defer type="text/javascript" src="ruta del script"></script>
<![endif]-->
<meta http-equiv="Content-Language" content="English" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15" />(Lenguaje de escritura
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />(Este caso se usa si usas CSS)
</head>
Body
Ahora vamos con la etiqueta BODY, su funcion es simple, en este podemos determinar el cuerpo de la web
esto es demaciado vital asi que ojo
Ejemplo

Código: Seleccionar todo

<body>
Aqui va todo lo que quiero que tenga mi web =D
</body>
Aqui les acabe de explicar la estructura de una pagina Web, Ahora vamos con etiquetas de servicio

Añadir Negrilla
Si quienes tener letra en Negrilla simplemente usa el comando <b>
Ejemplo

Código: Seleccionar todo

<b>HTML Basico</b>
Añadir color al Texto
Si quieres tener una letra con un color especial usa la etiqueta <font color>
Ejemplo

Código: Seleccionar todo

<font color="red">Aqui el Texto</font>
Si detallamos podemos cambiar el color en este pedaso "red" podemos usar los colores en Ingles o colores en Codigos les dejo una imagen con los colores y codigos
Imagen


Determinar el tamaño de un texto
Bueno si quieres un tamaño especial en el texto usa el comando <font size>
Ejemplo

Código: Seleccionar todo

<font size="3">Aqui el Texto</font>
Y si detallamos es lo mismop que explique arriba solo cambiamos el numero entre mas alto mas Grande Ej "6" sera mas grande

Rotar Texto de Der. a Izq
Si deseas que el texto se mueva de derecha a izquierda usaremos la etiqueta <marquee>
Ejemplo

Código: Seleccionar todo

<marquee>Mi texto se mueve</marquee>
Hacer parpadear Texto
Si deseas que el texto parpadee usaremos la etiqueta <blink>
Ejemplo

Código: Seleccionar todo

<blink>Mi texto parpadea</blink>
Texto Tachado
Si deseas que el texto se vea tachado usaremos la etiqueta <s>
Ejemplo

Código: Seleccionar todo

<s>Mi texto esta tachado</s>
Texto Italico
Si deseas que tu texto se vea Italico o corrido usaremos la etiqueta <i>
Ejemplo

Código: Seleccionar todo

<i>Mi texto se ve corrido</i>
Texto Subrayado
Si deseas tener un texto subrayado usaremos la etiqueta <u>
Ejemplo
<u>Texto subrayado</u>

Texto Centrado
Si deseas centrar tu texto usaremos la etiqueta <center>
Ejemplo

Código: Seleccionar todo

<center>Mi texto est centrado</center>
Alinear Texto a la Izquierda
Si deseas que tu alinear tu texto al lado izquierdo usaremos la etiqueta <left>
Ejemplo

Código: Seleccionar todo

<left>Mi texto esta a l izquiera</left>
Alinear Texto a la Derecha
Si deseas que tu alinear tu texto al lado derecho usaremos la etiqueta <right>
Ejemplo

Código: Seleccionar todo

<right>Mi texto esta a l derecha</right>
Colocar Imagen
Si deseas colocar una imagen en tu website simplemente usa el comando <img>
Ejemplo

Código: Seleccionar todo

<img src="ruta de la imagen"></img>
Imagen Redireccionable
Si deseas que al Hacer Click Sobre una imagen redirecciones a alguna parte usamos los comandos <a href> y <img>
Ejemplo

Código: Seleccionar todo

<a href="direccion a la que quieres redireccionar" target="_blank" ><img src="ruta imagen"></img></a>
Por que la parte " target="_blank", esto hace que el Link se abra en otra ventana si desean que sea en la misma quitar esta parte

Imagen redireccionable(Agregar a MSN)
Si deseas que al hacer click sobre una imagen te Agreguen al Windows Live Messenger usaremos lo siguiente, solo funciona en Internet Explorer y mientras uses Windows Live Messenger
Ejemplo

Código: Seleccionar todo

<a href="msnim:add?contact=tu msn aqui"><img src="images/msn.png"></img></a>
Saltar Linea en texto
Si quieres saltar una linea a un texto es muy facil solo usar etiqueta <br>
Ejemplo

Código: Seleccionar todo

Este es mi texto y quiero
<br>
que esto quede en la siguiente linea =D
Lista Enumerada
Si quieres hacer una lista es muy sencillo usaremos etiquetas <ol> y <li>
Ejemplo

Código: Seleccionar todo

<ol>
<li>HTML 1</li>
<li>HTML 2</li>
<li>HTML 3</li>
<li>HTML 4</li>
<ol>
y quedara asi

Código: Seleccionar todo

1. HTML 1
2. HTML 2
3. HTML 3
4. HTML 4
Lista No enumerada
Si queremos que no quede enumerado si no marcado por un punto simplemente reemplazamos <ol> por <ul>
Ejemplo

Código: Seleccionar todo

<ul>
<li>HTML 1</li>
<li>HTML 2</li>
<li>HTML 3</li>
<li>HTML 4</li>
<ul>
Espero les aya servido a pesar de no ser lo mejor, pero el objetivo es que llegue a cada uno de Ustedes!
Última edición por The Swash el 30 Dic 2009, 22:44, editado 1 vez en total.
En tu ventana
Y en tu ventana, gritas al cielo pero lo dices callada..
que buen tutorial The Swash, me gusto mucho compañero.



SALUDOS!!
Soy un camaleón, en tu cama, leona ♪
que buen tuto, no sabia que tambien podiamos postear tutoriales de esto, xD yo tengo uno de como crear una web "decente" jeje lo posteare aqui entonces, xD saludos muy bueno y bien explicado
//mHmm..
linkgl estaré esperando ese tutorial, todo lo tuyo tiene calidad


SALUDOS!!
Soy un camaleón, en tu cama, leona ♪
Muy bueno, se te agradece, y tb esperamos el tuto de creación de web de linkgl
Spyren Private Crypter-Binder [Autoit]
Crypter Online 0/35 (Terminado)
Responder

Volver a “Manuales y Tutoriales”