INFORMATICA Y OCIO

xtremer · Yo soy el foro Registrado: 22 Dic 2006 Mensajes: 868

Autor: Xtremer
Parte 1, dentro de poco la 2da Parte
Bueno no es tan dificil aprender el lenguage HTML en si, ya que pueden utilizar lo mas basico de este, para hacer paginas muy buenas, empezaremos.
Todas las dudas serán aclaradas.!

Toda web comienza con:
<html>
Y finaliza con:
</html>

Dentro de <html> se agrega <head></head>

Que se agrega dentro de HEAD?
<title></tile>
En este agregaremos el titulo que aparecera en la parte superior del navegador de internet.
Ej.:
<head>
<title>Web F3n1x</title>
</head>

Ahora comenzamos con: <body></body>
Definición:
Cuerpo de pagina, en pocas palabras ira toda la información de la web, tablas, celdas, imagenes, etc.

Dentro de Body podemos ingresar que color de fondo queremos que tenga la web.

Como ponemos el color de fondo?
Simple con: bgcolor="#COLOR"
Ej. :
<body bgcolor="#000000">
Aca les doy una lista de un par de colores:
Recuerden que siempre tiene 6 digitos en total (letras o numeros)
NEGRO = #000000
BLANCO = #FFFFFF
ROJO = #FF0000
VERDE = #00FF00
AZUL = #0000FF
CYAN = #00FFFF
MAGENTA = #FF00FF
AMARILLO = #FFFF00
GRIS = #808080
ROSA = #FF8080
VIOLETA = #800080
CELESTE = #80FFFF
MARRON = #800000
NARANJA = #FF8000
LAVANDA = #8000FF
TURQUESA = #00FF80
ORO VIEJO = #BBBB20

Tablas, celdas, con esto se diseña una web.(Dentro del <body>)
<table> Es el inicio de la tabla.
<tr> es una nueva columna, que creamos de forma vertical.
<td> es una nueva columna que se crea de forma horizontal.

<table>
<tr>
<td>PEPE</td>
</tr>
</table>

Ejemplos de <tr>
Queremos una lista de las diferentes series de ANIME/MANGA, en forma vertical.
<table>
<tr>
<td>Dragon Ball</td>
</tr>
<tr>
<td>Narutol</td>
</tr>
<tr>
<td>Pokemón</td>
</tr>
</table>

En este caso se crearía asi:
Dragon Ball
Naruto
Pokemón

Ejemplos de <td>
Hagamos de ejemplo que queremos tener una lista de las diferentes series de ANIME/MANGA, en forma horizontal.
<table>
<tr>
<td>Dragon Ball</td>
<td>Naruto</td>
<td>Pokemón</td>
</tr>
</table>
En este caso diria:
Dragon Ball Naruto Pokemón

Pero yo lo tengo muy junto, como lo separo un poco?
Para los TR
<table>
<tr>
<td>Dragon Ball</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>Naruto</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>Pokemón</td>
</tr>
</table>

  Crea un espacio entre ellos, para no quedar tan unidos.
<tr><td> </td></tr>
Si no se coloca nada entre <td></td>no haremos un espacio como   estaremos diciendo que esta no se muestre, y presentaria problemas la pagina.

Para los <td>
<table>
<tr>
<td>Dragon Ball</td>
<td> </td>
<td>Naruto</td>
<td> </td>
<td>Pokemón</td>
</tr>
</table>

Pero si quiero que no aparesca ese borde blanco y gris?
Escribiremos border="0" dentro de <table>
ej.
<table border="0">
<tr>
<td> </td>
</tr>
</table>
Y este borde desaparecerá

Como unir celdas verticales?
Con Rowspan

Donde se agrega esto?
Se agrega dentro de <td>
Ej.:
<table>
<tr>
<td rowspan="5">Anime</td>
</tr>
<tr>
<td>Dragon Ball </td>
</tr>
<tr>
<td>Naruto</td>
<tr>
<td>Pokemón</td>
</tr>
</tr>
</table>
Quedaría algo asi:

Dragon Ball
ANIME Naruto
Pokemón

Como unir celdas horizontales?
Con Colspan
<table>
<tr>
<td colspan="4">TITULO</td>
</tr>
<tr>
<td>SECCION</td>
<td>SECCION</td>
<td>SECCION</td>
<td>SECCION</td>
</table>
Que hace esto?
Hara que puedas centrar el titulo de forma correcta, en caso de no utilizar el colspan verás que el titulo aunque intentes centrarlo, aparecera a la izquierda.

La tabla que cree me aparece muy a la izquierda y quiero centrarla como hago?
Agregando align="center"
Ej. :
<table align="center">

Puedo poner una dirección de una web en un texto o imagen?
Escribiendo <a href="DIRECCION DE LA WEB">TEXTO O IMAGEN</a>
Ej.:
<a href="www.f3n1x.net">ENTREN</a>

Y puedo hacer que un texto o imagen, si le dan click les muestre una cosa en mi web?
Utilizando <a href=""></a> y <iframe></iframe>
En <a href=""> colocaremos target=""
<a href="informacion.html" target="principal">información</a>

Ahora solo nos falta en donde se abrira este archivo .HTML
Escribiremos <iframe></iframe>
Dentro de este <iframe> pondremos name="principal"

Pero es muy chica la ventana, puedo agrandar la ventana para que vean todo lo que puse en informacion.html ?
Utilizaremos width="" y height=""
width: Modificará el ancho de la ventana.
height: Modificará el alto de la ventana.
Ej.:
<iframe name="principal" width="600" height="400"></iframe>
La altura y ancho depende de ustedes, esto lo deciden, para saber como va quedando les recomiendo guardar el archivo, y abrirlo para ver que tanto ocupa la ventana.

Como agregar una imagen?
Con <img src="direccion-de-la-imagen/archivo.extension">
Ej.:
<img src="imagenes/menu.jpg">

Cuáles extensiones de imagenes me recomiendan?
.JPG (FOTOS,DIBUJOS)
.GIF (ANIMACIONES)
.PNG (DIBUJOS)

Como hago desaparecer el borde de color de una imagen que le puse una dirección de correo o dirección de una web?
Agregando dentro de <img> border="0"
Ej.:
<a href="www.f3n1x.net"><img src="imagenes/animation.gif" border="0"></a>

Como hago para que aparesca en el centro una imagen o texto?
<center><img src=""></center>
<center>TEXTO</center>
También asi:
<div align="center"><img src=""></div>
Aunque es mas facíl de recordar el 1ro.

Como hago para ponerle Negrita a alguna letra?
<strong>LETRA</strong>
Esto hara mas gruesa la letra.

Como hacer mas grande la letras?
<font size="5">texto</font>

Y si yo quiero agregarle un color a las letras?
<font color="#COLOR">texto</font>

Ejemplo de lo explicado anteriormente
<html>
<head>
<title>Mi Web</title>
</head>
<body bgcolor="#FF6600">
<table border="0" align="center" bgcolor="#FFFFFF">
<tr>
<td colspan="9"><center><a href="f3n1x.net"><img src="imagenes/titulo.jpg" width="600" height="80" border="0"></a></center></td>
</tr>
<tr>
<td bgcolor="#CCCCCC"><center><a href="inicio.html" target="principal">Inicio</a></center></td>
<td> </td>
<td bgcolor="#CCCCCC"><center><a href="noticias.html" target="principal">Noticias</a></center></td>
<td> </td>
<td bgcolor="#CCCCCC"><center><a href="descargas.html" target="principal">Descargas</a></center></td>
<td> </td>
<td bgcolor="#CCCCCC"><center><a href="informacion.html" target="principal">Informacion</a></center></td>
<td> </td>
<td bgcolor="#CCCCCC"><center><a href="afiliados.html" target="principal">Afiliados</a></center></td>
</tr>
<tr>
<td colspan="9"><iframe name="principal" border="0" scrolling="no" frameborder="0" width="600" height="400"></iframe></td>
</tr>
</table>
</body>
</html>

RECOMENDACIONES:
Cuando crees una carpeta para almacenar las imagenes, asegurate de no ponerle acentos.

Asegurate de que hayas colocado la extension correcta de la imagen.

Recorda siempre que comenzas un codigo terminarlo con </nombre del codigo>, sino tendras problemas.
_________________
Ya no presento mis diseños...
Aquellos que no los valoraron, les deseo mala suerte...
La envidia los matará...

upanichad · Moderador Registrado: 21 Ago 2006 Mensajes: 7111

se agredece
_________________

Por el bien de la comunidad respeta y ayudanos a aplicar las NORMAS
http://www.foroz.org/foroz/topic7292.html

IaM_SePia · Yo soy el foro Registrado: 07 Feb 2007 Mensajes: 833

a mi me interesa un tutorial un poco más avanzado, que eso ya lo aprendí, haber si hay más partes, gracias

Saludos
_________________
Sólo hay 10 tipos de personas, las que entendemos código binario, y las que no...

xtremer · Yo soy el foro Registrado: 22 Dic 2006 Mensajes: 868

jeje, dentro de poco estará el más avanzado, hay q tener paciencia Smile

_________________
Ya no presento mis diseños...
Aquellos que no los valoraron, les deseo mala suerte...
La envidia los matará...

deadpsycho666 · Publicado: Jue May 03, 2007 3:28 pm **Título del mensaje**:

buena aportacion xtremer
_________________

Demon Of The Metal

xtremer · Yo soy el foro Registrado: 22 Dic 2006 Mensajes: 868

Grax. ^^
_________________
Ya no presento mis diseños...
Aquellos que no los valoraron, les deseo mala suerte...
La envidia los matará...

r3dd3vil2 · Publicado: Mie May 16, 2007 6:25 am **Título del mensaje**:

Ooops!, se me pasó por completo esto XD
Se merece estár en la RPI Wink

Un saludo!
EDITADO: Me parece que esto:

xtremer · Yo soy el foro Registrado: 22 Dic 2006 Mensajes: 868

Sucede, que no todos saben q es fila apesar de q diga horizontal.
Pero todos saben q es una columna, por eso lo tomo como referencia una columna acostada ^^
_________________
Ya no presento mis diseños...
Aquellos que no los valoraron, les deseo mala suerte...
La envidia los matará...

galcober · Conociendo Foroz Registrado: 25 May 2007 Mensajes: 12

Buena aportación.Yo sé bastante de HTML, con que seguiré este tema para ver el avanzado y seguir aprendiendo.

EDIT: Después de volver a leer el tutorial me he fijado en una cosa, en donde explica de como poner negrita a una palabra o frase lo pone así: <strong> Palabra</strong> , bueno pues yo lo hago de otra manera por si lo quieres meter dentro del tutorial: <b> Palabra </b>.

EDIT 2: Otra cosa que me he fijado es en donde hay que poner colores, se puede hacer como pone en el tutorial (que es la mejor forma), pero si la gente quiere probar, también se puede poner el color en inglés, quedaría así: <font color="red"> Palabra </font>.
Donde pone red, se puede poner cualquier color que quieras, pero siempre en inglés, por ejemplo: red, blue, green, white, black, pink, yellow, purple...

	Índice del Foro Foroz comunity :: Webmasters	Todas las horas están en GMT + 1 Hora
Página 1 de 1