Warning: Illegal string offset 'userid' in [path]/includes/functions.php on line 509

Warning: Illegal string offset 'userid' in [path]/includes/functions.php on line 512

Warning: Illegal string offset 'membergroupids' in [path]/includes/functions.php on line 441

Warning: Illegal string offset 'membergroupids' in [path]/includes/functions.php on line 443

Warning: Illegal string offset 'usergroupid' in [path]/includes/functions.php on line 452

Warning: Illegal string offset 'usergroupid' in [path]/includes/functions.php on line 518

Warning: Illegal string offset 'userid' in [path]/includes/functions.php on line 518

Warning: Illegal string offset 'usergroupid' in [path]/includes/functions.php on line 518

Warning: Illegal string offset 'userid' in [path]/includes/functions.php on line 518

Warning: Illegal string offset 'userid' in [path]/includes/functions.php on line 509

Warning: Illegal string offset 'usergroupid' in [path]/includes/functions.php on line 518

Warning: Illegal string offset 'userid' in [path]/includes/functions.php on line 518

Warning: Illegal string offset 'usergroupid' in [path]/includes/functions.php on line 518

Warning: Illegal string offset 'userid' in [path]/includes/functions.php on line 518

Warning: Illegal string offset 'userid' in [path]/includes/functions.php on line 509

Warning: Illegal string offset 'usergroupid' in [path]/includes/functions.php on line 518

Warning: Illegal string offset 'userid' in [path]/includes/functions.php on line 518

Warning: Illegal string offset 'usergroupid' in [path]/includes/functions.php on line 518

Warning: Illegal string offset 'userid' in [path]/includes/functions.php on line 518

Warning: Illegal string offset 'userid' in [path]/includes/functions.php on line 509

Warning: Illegal string offset 'usergroupid' in [path]/includes/functions.php on line 518

Warning: Illegal string offset 'userid' in [path]/includes/functions.php on line 518

Warning: Illegal string offset 'usergroupid' in [path]/includes/functions.php on line 518

Warning: Illegal string offset 'userid' in [path]/includes/functions.php on line 518

Warning: Illegal string offset 'userid' in [path]/includes/functions.php on line 509

Warning: Illegal string offset 'usergroupid' in [path]/includes/functions.php on line 518

Warning: Illegal string offset 'userid' in [path]/includes/functions.php on line 518

Warning: Illegal string offset 'usergroupid' in [path]/includes/functions.php on line 518

Warning: Illegal string offset 'userid' in [path]/includes/functions.php on line 518

Warning: Illegal string offset 'userid' in [path]/includes/functions.php on line 509

Warning: Illegal string offset 'usergroupid' in [path]/includes/functions.php on line 518

Warning: Illegal string offset 'userid' in [path]/includes/functions.php on line 518

Warning: Illegal string offset 'usergroupid' in [path]/includes/functions.php on line 518

Warning: Illegal string offset 'userid' in [path]/includes/functions.php on line 518

Warning: Illegal string offset 'userid' in [path]/includes/functions.php on line 509

Warning: Illegal string offset 'usergroupid' in [path]/includes/functions.php on line 518

Warning: Illegal string offset 'userid' in [path]/includes/functions.php on line 518

Warning: Illegal string offset 'usergroupid' in [path]/includes/functions.php on line 518

Warning: Illegal string offset 'userid' in [path]/includes/functions.php on line 518

Warning: Illegal string offset 'userid' in [path]/includes/functions.php on line 509

Warning: Illegal string offset 'usergroupid' in [path]/includes/functions.php on line 518

Warning: Illegal string offset 'userid' in [path]/includes/functions.php on line 518

Warning: Illegal string offset 'usergroupid' in [path]/includes/functions.php on line 518

Warning: Illegal string offset 'userid' in [path]/includes/functions.php on line 518

Warning: Illegal string offset 'userid' in [path]/includes/functions.php on line 509

Warning: Illegal string offset 'usergroupid' in [path]/includes/functions.php on line 518

Warning: Illegal string offset 'userid' in [path]/includes/functions.php on line 518

Warning: Illegal string offset 'usergroupid' in [path]/includes/functions.php on line 518

Warning: Illegal string offset 'userid' in [path]/includes/functions.php on line 518

Warning: Illegal string offset 'userid' in [path]/includes/functions.php on line 509

Warning: Illegal string offset 'usergroupid' in [path]/includes/functions.php on line 518

Warning: Illegal string offset 'userid' in [path]/includes/functions.php on line 518

Warning: Illegal string offset 'usergroupid' in [path]/includes/functions.php on line 518

Warning: Illegal string offset 'userid' in [path]/includes/functions.php on line 518
[Tutorial]: Aprende Html (desde cero)
Comunidad Underground Hispana  

Retroceder   Comunidad Underground Hispana > Programacion > Programacion para webmasters > Html, XHTML, CSS


Like Tree1Me Gusta

Tema Cerrado Crear Nuevo Tema
 
Compartir en twitter LinkBack Herramientas Desplegado
Antiguo 29-ago-2006, 17:30   #1
Veterano
 
Fecha de Ingreso: agosto-2005
Amigos 0
Mensajes: 741
Gracias: 0
Agradecido 20 veces en 15 mensajes.
Predeterminado [Tutorial]: Aprende Html (desde cero)

Hola

Voy a hacerles un tuto de Html. desde que es, hasta lo que pueda
tomare algunas bases de todos lo manuales que e leido.
Solo les pido que respeten el autor xd by: s/a2h

---------Manual---------

-----como conseguir una páguina web-----

Cita:
visiten primero este post antes de empezar si no tienen páguina web
link:

[Solo usuarios registrados pueden ver los links. REGISTRARSE]



o si no vallan a

[Solo usuarios registrados pueden ver los links. REGISTRARSE]

y registrense
"incluye ftp de hasta 25 mb"
-----¿que es el html?------

Cita:
e econtrado muchas definiones sobre que es el html y la verdad esque
algunas me gustan y otras no. Asi que yo les dare una definición de
sobre lo que es el html.

El HyperText Markup Language o mejor conosido como html es un
lenguaje de programación con uso de tiquetas <tags> que es para
uso exclusivo del diseño web.
---------------------------


-----!introducción al html!-----


Cita:
El lenguaje html como ya lo dije es solo de uso exclusivo
para el diseño web este puede ser convinado con otro lenguaje
de diseño web llamado el php pero al convinarlo tendremos un
archivo de extensión .php .
este lenguaje (html) es considerado uno de los lenguajes
mas faciles de manejar entre otros, pero también es muy
usado por las personas hasta estos días, aunque ya allan
actualmente programas para crear páguinas web no olvidemos
que si enverdad quieren aprender hay que estudiar el lenguaje.
no quiero decir que no usen estos programas, de echo algunas
veces resultan de gran ayuda estos programas algunos ejemplos:
front page, dreamweaver entre otros.
En general el html se utiliza con unas etiquetas o mejor
conosidas como tags que hacen las ordenes señaladas, dependiendo
de que tag.
--------------------------------

-----!requisitos para empezar!-----

Cita:
necesito que para empezar se bajen ya sea el programa front page
o el dreamweaver ya que lo usaremos para hacer nuestras pruebas
de los codecs
-----------------------------------

-----!empesemos!-----

Para empezar antes que nada les voy a decir algo muy importante
que hay que entender del lenguaje html. El lenguaje html tambien
puede ser utilizado para hackear! no se si les valla a enseñar
yo a hacer algunos truquitos de como hacer cosas malas al arranque
de tu web, todo depende de como valla avansando en este tuto mio
asi que desde ahorita les deseo suerte de haber si lo posteo .

Para empezar les dare unas bases rápidas.
para comensar ahi un orden en este lenguaje que se debe de seguir
es algo similar a una carta.

1. primero viene la etiqueta <html> que expresa el comienso del
lenguaje y hasta el final de todo tu codec oviamente se serraria
el lenguaje con esta barra / que expresa el sierre de cualquier
etiqueta </html>

2. despues viene <head> que es el encabesamiento en donde se le
pueden poner algunos trucos y dentro de esta viene un tag que se
llama <tittle> dentro de esta se pondra el título de la páguina
y despues d eponer el título no hay que olvidar serrar la etiqueta
</tittle< y despues la de </head>

3. viene despues lo que es el cuerpo <body> en donde viene el
contenido de la páguina web en donde pondras la información que
quieres mostrar en la páguina y al finalizar el contenido serramos
</body>

Bueno empezemos con un ejemplo simple.
abran el dreamweaver o el front page y vallanse a la parte en donde
tienen que agragar el codec, bien ya ahi ponen lo siguiente:

-----codec-----

<html>
<head>
<tittle>Clases del maestro slash</tittle>
</head>
<body>
<body background="#00ff00">
<h1>aqui va el contenido de la páguina web</h1>
</body>
</html>

-----codec-----

podran observar como en el dreamweaver o en el frontpage hasta
arriba dice el titulo como lo acabamos de indicar y el fondo es me
parece que verde porque en body pusimos un ATRIBUTO llamdo
background que quiere decir fondo. Aqui ahi algo importante cuando
queremos especificar un atributo ahi que poner = y si por alguna
ocación no te sirve especifica mas con comillas ="lo que valla".
Aqui en este codec ahi otra etiqueta llamada <hx> bueno esta etiqueta
es para ponr un conjunto de palabras pero en donde esta la x en la
etiqueta podras marcar el tamaño de la letra "la mas grnade es 1 y me
parece que llega hasta 6, esta podría ser una forma de escritura en tu
web.
a continuación pondre todos los tags que se utilizan para la escritura
en web intentare poner todos

1. <small> salen todas tus palabras en chiquito normalmente esta etiqueta
se usa para los derechos reservados del autor ect.

2. <hx> tus palabras salen en color negro, el tamaño es el que le agregues
a la variable x (lo explicque arriba)

3. <p> esta etiqueta sirve para hacer solo un renglón de tus apuntes

4. <u> sirve para subrayar una o un conjunto de palabras

5. <i> aparenta le letra en cursiva

6. <b> hace una o un conjunto de palabras negritas (gruesas)

7. <br> sirve para hacer un cambio de ringlón sin sierre de esta etuiqtera

ejemplo:

escribes

hola <br> como estas?

obtienes

hola
como estas?

8. <ul> y <li> la etiqueta <ul> produce una lista de palabras con
puntos, y cada palabra se define por la etiqueta <li>

ejemplo:

escribes

<ul>
<li>tu nombre:</li>
<li>tu apellido:</li>
<li>tu segundo apellido:<l/i>
<ul>

obtienes

. tu nombre:
. tu apellido:
. tu segundo apellido:

9. <ol> y <li> la etiqueta <ol> produce una lista de palabras con
numeros ordenadamente, y cada palabra se define por la etiqueta <li>

ejemplo:

escribes

<ol>
<li>tu nombre:</li>
<li>tu apellido:</li>
<li>tu segundo apellido:<l/i>
<ol>

obtienes

1. tu nombre:
2. tu apellido:
3. tu segundo apellido:

10. <font> La etiqueta <FONT> permite cambiar la fuente y puede tener hasta
tres atributos: SIZE, COLOR y FACE.

SIZE define el tamaño del texto.
Puede ser cualquier valor de 1 a 7. El tamaño real depende del
navegador.

COLOR define el color del texto comprendido entre las etiquetas
<FONT> y </FONT>.
El color está dado como un código de valor tri-hexadecimal de la
siguiente forma #RRGGBB, para los valores rojo, verde y azul
respectivamente.

FACE define el nombre de la fuente que se debe utilizar.
ES posible indicar varios nombres. En este caso, el navegador
utilizará la primera fuente que encuentre.
Se puede combinar todos estos atributos para lograr un formato
original:

ejemplo:

<FONT SIZE="+1" COLOR="#FF0000" FACE="Times New Roman, Times, serif">
Mi texto aparece en rojo y con la fuente Times</FONT>

bueno creo que eso es todos los tags de escritura.
Ahora me pasare a un tema interesante que es el como agregar un imagen
y como hacer vinculos o mejor conosidos como links

por ultimo para dejar este tema les ensañare como acomodar los textos.



-----¿que es un vinculo o link?-----

un vinculo o link es una o muchas palabras que te transportan por asi
desirlo a otra páguina web con solo darle un click al vinculo.

-----¿cuando saber cuando ahi un vinculo?-----

los vinculos generalmente se representan, al pasar sobre la palabra
o las palabras con un color distintivo hacia las otras palabras de la
web. Y otra forma de detectarlas esque al pasar ensima, el cursor cambia
a una mano generalmente.

-----¿como hacer un vinculo?------

Bueno existe algo que se llama ancla que se utiliza para muchas cosas
una d ella es hacer vinculos para así tener la páguina donde vas y
lo que aparecería en tu web para darle click es como algo virtual.
pero para hacer un vinculo tienes que convinar la ancla con el atributo
href que es el atributo que te llevara a el destino despues al ancla se
le da una señal para acultar el vinculo y mostrar palabras en la web
que giaran a el vinculo jeje es como cultar el vinculo xd.
espero que me este explicando xd


ejemplo:

<a href="la web">lo que saldra en la web</a>

esto se puede convinar con los formatos de textos que deje arriba para
así centrar ect.

-----¿como poner una imagen en mi web?-----

La etiqueta que nos sirve para incluir imágenes en nuestras páginas
del WEB es muy similar a la de enlaces a otras páginas,
La única diferencia es que, en lugar de indicar al programa navegador
el nombre y la localización de un documento de texto HTML para que
lo cargue, se le indica el nombre y la localización de un archivo que
contiene una imagen.

Una vez que se haya localizado su imagen en un directorio del
directorio raíz de documentos de su sitio, debería indicar una
posición para él en su página. Es allí que viene la etiqueta <IMG>.

ejemplo:

<IMG SRC="imagenes/imagen.gif">

La etiqueta <IMG> necesita al menos un atributo para trabajar: SRC,
cuyo valor es la localización y el nombre del archivo que contiene
la imagen que se debe visualizar.

Dos otros atributos: WIDTH y HEIGHT son opcionales, pero se recomienda
utilizarlos y son muy útiles. Los valores que toman definen la anchura
y la altura de una imagen, y permiten al navegador conocer por
adelantado el tamaño de la imagen de manera que este pueda organizar
el texto de manera consecuente. Estos valores también permiten aumentar
o reducir el tamaño de una imagen para obtener croquis.

Otro atributo, ALT, permite añadir una descripción que aparece en la
pantalla cuando no se puede encontrar el recurso de imagen en el lugar
esperado.

Este es un ejemplo de inserción de una imagen con todos los atributos
que hemos visto en:

<IMG SRC="images/my_image.gif" WIDTH="250" HEIGHT="100" alt="Holiday photo">

Un aspecto muy importante a tener en cuenta es el tamaño de las imágenes,
pues una imagen grande supone un archivo grande, y esto puede resultar
en un tiempo excesivo de carga, con el consiguiente riesgo de que
quien está intentando cargar nuestra página se canse de esperar,
y desista de ello.

Para elegir la posición de la imagen con respecto al texto hay distintas
posibilidades. La más sencilla es colocarla entre dos párrafos, con un
titular a un lado. Los navegadores más actuales (como el Netscape
Navigator y el Microsoft Internet Explorer) permiten que el texto
pueda rodear a la imagen.
De momento nos vamos a limitar a escoger la posición del titular
con respecto a la imagen. Se puede poner arriba, en medio o abajo
del lado de la imagen. Para ello se añade el comando ALIGN a la
etiqueta, de la siguiente manera:


<IMG SRC="isla.gif" ALIGN=TOP>
Titular alineado arriba

<IMG SRC="isla.gif" ALIGN=MIDDLE>
Titular alineado en medio

<IMG SRC="isla.gif" ALIGN=BOTTOM>
Titular alineado abajo

Si se quieren lograr diseños fantasticos y rodear con textos los
gráficos exactamente igual que en las revistas se pueden usar los
comando o atributos conjuntamente con la etiqueta
<IMG SRC= "imagen.gif">, ALIGN=. Donde quiera que se desee que
aparezca una imagen basta con insertar:


<IMG SRC="/camino/imagen.gif" ALIGN=LEFT>
Alinea la pagina a la izquierda

<IMG SRC="/camino/imagen.gif" ALIGN=CENTER>
Alinea la pagina al centro

<IMG SRC="/camino/imagen.gif" ALIGN=RIGHT>
Alinea la pagina a la derecha

Si se quiere interrumpir el proceso de rellenado del texto a los
lados de la imagen, para que salte hasta debajo de ella, es decir,
dejar un espacio en blanco parcialmente, se pueden emplear las
siguientes extensiones de la etiqueta <BR>:


<BR CLEAR=LEFT>
Busca el primer margen libre (clear) a la izquierda.

<BR CLEAR=RIGHT>
Busca el primer margen libre a la derecha.

<BR CLEAR=ALL>
Busca el primer margen libre a ambos lados.



Un ejemplo para aclarar esto:

<IMG SRC="imagen.gif" ALIGN=LEFT> Este texto esta a un lado de la
imagen.

<BR> Este tambien esta a un lado de la imagen, en la linea siguiente.

<BR CLEAR=LEFT> Este otro texto, en cambio, ha buscado el primer margen
libre a la izquierda.

Otra posibilidad muy interesante es la de utilizar una imagen
como enlace a otra página. Para estos casos se utilizan generalmente
imágenes pequeñas (iconos), aunque se puede usar cualquier tipo de imagen.

entonces convinamos la etiqueta <a> con <img> de la siguiente forma:

<a href="la url"><img src="imagenes/tu imagen.gif>

dando como resultado al darle click a la imagen que te lleve a la url
indicada por el atributo href, además le puedes agregar a la etiqueta
<img> los atributos que vimos anteriormente.

Imágenes vinculadas

Una imagen puede vincularse fácilmente; basta con colocarla entre las
etiquetas <A HREF> y </A>. Una técnica más potente, llamada cartografía
de imágenes, puede asociar vínculos a áreas específicas de una imagen.

Ejemplo:

<MAP NAME="map">
<AREA href="page1.html" alt="Access Guide" shape="rect" coords="0,0,100,100">
<AREA href="page2.html" shape="poly" coords="200,200,200,0,300,20,300,180">
<AREA href="page3.html" shape="circle" coords="150,150,50">
</MAP>
<IMG SRC="image.gif" usemap="#map">

hemos creado tres áreas de vínculo en la imagen image.gif. éstas están
agrupadas bajo una etiqueta <MAP> que las representa en la imagen mediante
el atributo usemap de la etiqueta <IMG>. Cada región está definida de
manera precisa mediante una etiqueta <AREA>.

La primera área es un rectángulo (con el atributo shape="rect"), cuyas
esquinas superior izquierda e inferior derecha están definidas por las
coordenadas de píxel (0,0) y (100,100), respectivamente. Su vínculo
asociado apunta a la página page1.html.

La segunda área es un polígono (con el atributo shape="poly"), cuyos
vértices están definidos por las coordenadas (200,200), (200,0), (300,20)
y (300,180). La forma que resulta es un trapecio, cuyo lado derecho es
menor que el izquierdo. Su vínculo asociado apunta a la página page2.html.

La tercera área es un círculo (con el atributo shape="circle"), que tiene
un centro definido por las coordenadas (150,150) y un radio de 50 píxeles.
Su vínculo asociado apunta a la página page3.html.

En todo caso, estas coordenadas se refieren a la imagen; las coordenadas
(0,0) indican la esquina superior izquierda de la imagen.

tablas

Las tablas pueden parecer un modo sencillo de disponer el texto en
columnas o quizás de añadir un titular a una ilustración, pero hay
modos de sacar un gran partido de una característica aparentemente
sencilla. La etiqueta <TABLE> puede ser una poderosa herramienta de
formato. Se puede hacer por ejemplo, no mostrar el borde de una tabla
en absoluto. Tambien se puede hacer uso de la etiqueta <TABLE> para
ubicar texto e imagenes con precisión, en prácticamente casi cualquier
lugar de una página.

Estructura de una tabla

Vamos a ver ordenadamente (de fuera hacia dentro) las etiquetas
necesarias para confeccionar las tablas.

<TABLE>
[resto de las etiquetas]

</TABLE>
Es la etiqueta general, que engloba a todas las demás.

<TABLE BORDER=n>
[resto de las etiquetas]

</TABLE>
Presenta los datos tabulados con un borde, haciendo las tablas más
atractivas, y el grosor es de n pixeles.

<TR>
[etiquetas de las distintas celdas de la primera fila]

</TR>
Permite formar cada fila de la tabla. Hay que repetirla tantas
veces como filas queremos que tenga la tabla.

<TD>
[contenido de cada celda (imágenes, texto, etc.)]

</TD>
Permite formar las distintas celdas que contendrá cada fila de
la tabla. Hay que repetirlas tantas veces como celdas queramos que
tenga la fila.

<TH>
[encabezamiento de tabla]

</TH>
Es utilizada para colocar encabezamientos en negrita sobre las
columnas

EJEMPLO

<HTML>
<HEAD>
<TITLE> Página de prueba para tablas</TITLE>
</HEAD>
<BODY>
<TABLE BORDER>
<TR>
<TH>Columna 1</TH> <TH> Columna 2</TH> <TH> Columna 3</TH>
<TD>fila1 - c elda1</TD> <TD>fila1 - celda2</TD>
<TD>fila1 - celda3</TD>
</TR>
<TR>
<TD>fila2 - celda1</TD> <TD>fila2 - celda2</TD>
<TD>fila2 - celda3</TD>
</TR>
</TABLE>
<BR>[Aquí van las etiquetas que visualizan la página]
</BODY>
</HTML>

¿Qué pasa si el numero de celdas de una fila es distinto al de otra?

Pues el navegador forma el número de filas y columnas que haga falta,
dejando espacios en blanco en las filas que tengan menos celdas.

Titular de tabla
Se puede añadir un titulo a la tabla, es decir un texto situado
encima de la tabla que indica cuál es su contenido. Se consigue
con la etiqueta <CAPTION> y </CAPTION>. Por ejemplo:

<CAPTION> Esta es mi primera tabla </CAPTION>

<CAPTION ALIGN=TOP>TITULO</CAPTION>
Coloca él titulo sobre la tabla.

<CAPTION ALIGN=BOTTOM>TITULO</CAPTION>
Coloca él titulo bajo la tabla.

Contenido de las celdas

Solo se ha puesto hasta ahora en el ejemplo, texto normal dentro de las distintas celdas. Pero se puede poner en ellas cualquier otro elemento de los que van en un documento HTML, como imágenes, enlaces, etc. No hay más que poner dentro de la etiqueta de la celda la etiqueta correspondiente a una imagen, un enlace, etc.

EJEMPLOS:

Con una imagen

<TABLE BORDER>
<TR>
<TD> <IMG SRC="imagen.gif"> </TD>
</TR>
</TABLE>

Con un enlace

<TABLE BORDER>
<TR>
<TD><A HREF="index.html"> Mi página principal </A></TD>
</TR>
</TABLE>



Posicionamiento del contenido dentro de la celda
Normalmente, el contenido de una celda está alineado a la izquierda.
Pero se puede cambiar esto añadiendo dentro de la etiqueta de la celda
los siguientes atributos:

<TD ALIGN=CENTER> Al centro </TD>
<TD ALIGN=RIGHT> A la derecha </TD>
<TH ALIGN=LEFT> Cabecera a la izquierda </TH>

El alineamiento por defecto en el sentido vertical es en el medio.
También se puede cambiar, añadiendo dentro de la etiqueta de la celda
los siguientes atributos:

<TD VALIGN=TOP> Arriba </TD>
<TD VALIGN=BOTTOM> Abajo </TD>

Variando las dimensiones de la tabla
El navegador se encarga normalmente de dimensionar el tamaño
total de la tabla de acuerdo con el número de filas, de columnas,
por el contenido de las celdas, espesor de los bordes, etc.

A veces nos puede convenir forzarle para que la tabla tenga
unas dimensiones totales mayores que las que le corresponden,
tanto en anchura como en longitud. Esto se consigue añadiendo dentro
de la etiqueta de la tabla los atributos WIDTH y HEIGHT igual a un
porcentaje de la dimensión de la pantalla, o a una cifra que equivale
al número de pixels.

Por ejemplo, si colocamos:

<TABLE WIDTH=60%>

O, por ejemplo ponemos:

<TABLE HEIGHT=200>

Celdas que abarcan a otras varias

A veces puede interesarnos que una celda se extienda sobre otras
varias. Esto se consigue añadiendo dentro de la etiqueta de la celda
los atributos COLSPAN=número para extenderse sobre un número
determinado de columnas, o ROWSPAN=número para extenderse
verticalmente sobre un número determinado de filas.
Por ejemplo, en la primera tabla del ejemplo anterior vamos a
añadir una fila con una sola celda, que abarca a dos columnas:

<TR> <TD COLSPAN=2> Celda sobre 2 columnas </TD> <TR>
O, en la misma tabla, vamos a añadir una celda en la primera fila,
pero que abarque también a la siguiente:

<TD ROWSPAN=2> Celda junto a 2 filas </TD>

Color de fondo en las tablas

Podemos conseguir que las tablas tengan un color de fondo,
siguiendo un procedimiento totalmente análogo al empleado para
que una página tenga un color de fondo uniforme (según vimos en
el capítulo 7). Para ello debemos utilizar el atributo
BGCOLOR="#XXYYZZ", visto en dicho capítulo.

Se puede conseguir:

<TABLE BORDER BGCOLOR="#XXYYZZ">
[resto de las etiquetas]
</TABLE>

La totalidad de la tabla tendrá un color de fondo.

<TD BGCOLOR="#XXYYZZ">

[contenido de la celda]

</TD>
Solamente una celda determinada tendrá un color de fondo,
distinto al del resto de la tabla.







Imágenes de fondo en las tablas

El Explorer de Microsoft soporta la colocación de imágenes de fondo en el interior de las tablas, de una manera análoga a como se hace en una página (según vimos en el capítulo 7). Para ello debemos, utilizar el atributo BACKGROUND="imagen.gif" o BACKGROUND="imagen.jpg", visto en dicho capítulo.

Si se utiliza dentro de la etiqueta <TABLE> la imagen en cuestión se multiplicará detrás de todas las celdas.

(Con el Netscape no se verá ninguna imagen de fondo, sólo con el Explorer)

Si, por el contrario, sólo se pone este atributo dentro de la etiqueta de una celda concreta (<TD> o <TH>), entonces la imagen de fondo se verá sólo en esa celda.



Separación entre las celdas de una tabla

Por defecto, la separación entre las distintas celdas de una tabla es de dos pixels. Pero se puede variar esto con el atributo CELLSPACING, que se pone dentro de la etiqueta TABLE.

Por ejemplo, para obtener una separación de 20 pixels entre celdas ponemos:

<TABLE BORDER CELLSPACING=20>

A primera vista parece como si esto fuera lo mismo que si hubiéramos aumentado el espesor de los bordes. Pero para comprobar que no es así, hagamos que en el caso anterior, tenga además unos bordes de 5 de espesor:

<TABLE BORDER=5 CELLSPACING=20>



Separación entre el borde y el contenido dentro de las celdas

Por defecto, la separación entre el borde y el contenido dentro de las celdas es de un pixel. Se puede cambiar esto con el atributo CELLPADDING, que se pone dentro de la etiqueta TABLE.

Por ejemplo, para obtener una separación de 20 pixels entre el contenido y los bordes, dentro de cada celda:

<TABLE BORDER CELLPADDING=20>



Se puede combinar este atributo con CELLSPACING (visto en el apartado anterior).

Por ejemplo, una tabla con bordes de 5 de espesor, separación entre celdas de 15 y separación del contenido con respecto a los bordes de las celdas de 20, lo obtendríamos con:

<TABLE BORDER=5 CELLSPACING=15 CELLPADDING=20>

Imagen de fondo

No sólo se colocan imágenes en un texto. Gracias a la etiqueta <BODY>
y a su atributo BACKGROUND, también pueden aparecer como fondo de una
página.

Ejemplo:

<BODY BGCOLOR="#000000" LINF="#0000FF" VLINK="#000080" BACKGROUND="background.gif">

Se utiliza la imagen background.gif como un diagrama, visualizada de
manera repetida en el fondo (como mosaico). Si no se puede encontrar,
se visualizará como fondo el color especificado o predeterminado.

---------manual---------

Bueno es el fin de este manual xd alguna duda pues se las respondere con gusto y recuerde el autor jaja
salu2
Cangri_Hack le gusta esto.
__________________

Follow me: @infomundoorg
Da like:

[Solo usuarios registrados pueden ver los links. REGISTRARSE]

s/a2h está desconectado  
Los Siguientes 3 Usuarios Agradecieron a s/a2h por Este Mensaje:
Cangri_Hack (22-may-2013), elias697 (13-mar-2011), supremo01 (14-jul-2011)
Antiguo 31-ago-2006, 16:10   #2
damiguero
Guest
 
Amigos
Mensajes: n/a
Predeterminado Re: tutorial: Aprende Html (desde cero)

solo te recomendaria que le quites el "code" para que se note mejor y se tenga una mejor lectura...

salu2
 
Antiguo 31-ago-2006, 16:26   #3
Veterano
 
Fecha de Ingreso: agosto-2005
Amigos 0
Mensajes: 741
Gracias: 0
Agradecido 20 veces en 15 mensajes.
Predeterminado Re: tutorial: Aprende Html (desde cero)

Hola ;D
probare haber como se ve xd :
salu2
__________________

Follow me: @infomundoorg
Da like:

[Solo usuarios registrados pueden ver los links. REGISTRARSE]

s/a2h está desconectado  
Antiguo 01-dic-2006, 14:10   #4
Novato
 
Fecha de Ingreso: agosto-2006
Amigos 0
Mensajes: 41
Gracias: 0
Agradecido 1 vez en 1 mensaje.
Predeterminado Re: tutorial: Aprende Html (desde cero)

Gracias, muy buena recompilacion de info, segui asi q vas de 10!!!

Saludos
__________________
[move][glow=blue,10,000]<br />[color=white]�`~*'�^v-�-()-&gt;�[: Tu Agredecimiento Ayuda!!! :]�&lt;-()-�-v^�'*~��[/glow][/move]
Damage está desconectado  
Antiguo 29-jun-2007, 13:13   #5
Gran Colaborador
 
Avatar de Ronnyldinho
 
Fecha de Ingreso: febrero-2007
Ubicación: C.R
Amigos 6
Mensajes: 1.838
Gracias: 0
Agradecido 9 veces en 8 mensajes.
Predeterminado Re: [Tutorial]: Aprende Html (desde cero)

oye que buen manual como para defenderse

ja ja

bueno seguire buscando gracias brother
__________________
Código:
Follow me -> @r_badilla
  
Ronnyldinho está desconectado  
Antiguo 16-jul-2008, 18:51   #6
Habitual
 
Fecha de Ingreso: junio-2008
Amigos 0
Mensajes: 235
Gracias: 4
Agradecido 1 vez en 1 mensaje.
Predeterminado Re: [Tutorial]: Aprende Html (desde cero)

excelente manual..yo me quede con algunas dudas pero son de menor importancia..buen aporte..sigue asi..
__________________
Indagamos en el conocimiento y nos llaman criminales, existimos sin distinciones, de piel, sin nacionalidad, sin influencia religiosa... y nos llaman criminales,ustedes construyen bombas, organizan guerras, asesinan,mienten y nos hacen creer que es por nuestro bien y nosotros somos los criminales, nuestro unico crimen es la curiosidad y ser mas listos que ustedes algo que jamas nos podran perdonar
neco123 está desconectado  
Antiguo 16-jul-2008, 18:58   #7
Gran Colaborador
 
Avatar de Ronnyldinho
 
Fecha de Ingreso: febrero-2007
Ubicación: C.R
Amigos 6
Mensajes: 1.838
Gracias: 0
Agradecido 9 veces en 8 mensajes.
Predeterminado Re: [Tutorial]: Aprende Html (desde cero)

Cita:
Iniciado por neco123
excelente manual..yo me quede con algunas dudas pero son de menor importancia..buen aporte..sigue asi..
Pues aqui estamos para ayudarte solo postea tus dudas y te ayudamos amigo
__________________
Código:
Follow me -> @r_badilla
  
Ronnyldinho está desconectado  
Antiguo 10-dic-2008, 20:00   #8
Miembro
 
Fecha de Ingreso: octubre-2008
Amigos 0
Mensajes: 56
Gracias: 0
Agradecido 0 veces en 0 mensajes.
Predeterminado Re: [Tutorial]: Aprende Html (desde cero)

ehm, hola, me pasa algo muy POCO comun, le dije a un amigo que tiene "mas o menos" experiencia en esto... y me dijo que no sabe por que no es O.o

es asi, yo hago un archivo .html asi exacto como vos pusiste

<html>
<head>
<tittle>Clases del maestro slash</tittle>
</head>
<body>
<body background="#00ff00">
<h1>aqui va el contenido de la páguina web</h1>
</body>
</html>


exactamente igual, despues, lo guardo .html y lo abro... y si habre con firefox todo bien, pero no me aparecen las letras de color cito... y me aparece el mismo codigo, o sea en la pagina q se abre me aparece

<html>
<head>
<tittle>Clases del maestro slash</tittle>
</head>
<body>
<body background="#00ff00">
<h1>aqui va el contenido de la páguina web</h1>
</body>
</html>

respuestas lo mas antes posible plz.. quiero progresar <.<
__________________
jozyv93 está desconectado  
Antiguo 10-dic-2008, 23:44   #9
Gran Colaborador
 
Avatar de Ronnyldinho
 
Fecha de Ingreso: febrero-2007
Ubicación: C.R
Amigos 6
Mensajes: 1.838
Gracias: 0
Agradecido 9 veces en 8 mensajes.
Predeterminado Re: [Tutorial]: Aprende Html (desde cero)

Compa los errores son muy sencillo de verlos... MIra


<html>
<head>
<tittle>Clases del maestro slash</tittle>
</head>
<body>
<body background="#00ff00">
<h1>aqui va el contenido de la páguina web</h1>
</body>
</html>


1- El primero error es que estas repitiendo dos veces la etiqueta inicial <body>
<body>
<body background="#00ff00">

Como puedes ver, la estas abriendo dos veces..... solo es una vez..

2- Los titulares son con la etiqueta <title></title> con una sola t y no con dos.

3- Nunca le estas especificando el color que debe tener....
Yo te sugiero que lo hagas de esta forma.

<html>
<head>
<title>Clases del maestro slash</title>
</head>
<body background="#00ff00">
<h1 style="color:blue;">aqui va el contenido de la pagina web</h1>
</body>
</html>


Con eso, el color que saldrá como texto será azul.

O lo puedes hacer de esta otra forma

<html>
<head>
<title>Clases del maestro slash</title>
<style type="text/css">
body {
background-color: #00ff00;
}
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>aqui va el contenido de la pagina web</h1>
</body>
</html>


Como puedes ver. En ambas utilizo una combinacion de css y xhtml


un saludo...

cualquier duda CREA UN POST APARTE y nos comentas tu problema.... un saludo

__________________
Código:
Follow me -> @r_badilla
  
Ronnyldinho está desconectado  
Antiguo 11-dic-2008, 21:45   #10
Miembro
 
Fecha de Ingreso: octubre-2008
Amigos 0
Mensajes: 56
Gracias: 0
Agradecido 0 veces en 0 mensajes.
Predeterminado Re: [Tutorial]: Aprende Html (desde cero)

ah, no se con precision por que pasaba eso, pero lo solucione, yo me baje el "frontpage expres" y despues, cuando acia el code, y lo guardaba, lo abri con el block de notas, y me aparecio algo distinto, despues, lo ise al code en el block de notas, y me abrio la pagina como la ise, entonces, mejor sigo haciendo en el block de notas.





:-*
__________________
jozyv93 está desconectado  
Antiguo 11-dic-2008, 22:06   #11
Gran Colaborador
 
Avatar de Ronnyldinho
 
Fecha de Ingreso: febrero-2007
Ubicación: C.R
Amigos 6
Mensajes: 1.838
Gracias: 0
Agradecido 9 veces en 8 mensajes.
Predeterminado Re: [Tutorial]: Aprende Html (desde cero)

Front Page tira mucho código basura.... es mejor el bloc de notas....
__________________
Código:
Follow me -> @r_badilla
  
Ronnyldinho está desconectado  
Antiguo 15-dic-2008, 13:48   #12
Veterano
 
Fecha de Ingreso: mayo-2008
Amigos 3
Mensajes: 624
Gracias: 0
Agradecido 7 veces en 6 mensajes.
Predeterminado Re: [Tutorial]: Aprende Html (desde cero)

Tambien podria hacer esto para no enliarte con los CSS antes de aprender HTML

<html>
<head>
<title>Clases del maestro slash</title>
</head>
<body background="#00ff00">
<h1><font color="blue">aqui va el contenido de la pagina web</font></h1>
</body>
</html>


Y el error que tenias es como dijo ronNy no puede haber falta en los nombres de las etiquetas EJ. <tittle> <title>
__________________
<br />

[Solo usuarios registrados pueden ver los links. REGISTRARSE]

<br />

[Solo usuarios registrados pueden ver los links. REGISTRARSE]

<br /><br />

[Solo usuarios registrados pueden ver los links. REGISTRARSE]

digitalstabler está desconectado  
Antiguo 25-mar-2009, 06:38   #13
jechu030
Guest
 
Amigos
Mensajes: n/a
Predeterminado Re: [Tutorial]: Aprende Html (desde cero)

Muy buen tutorial amigo
te mereses un 10 xD

Saludos

PD:
sigue asi con esos tutos que estan buenos :P
 
Antiguo 27-may-2009, 16:04   #14
Veterano
 
Fecha de Ingreso: agosto-2005
Amigos 0
Mensajes: 741
Gracias: 0
Agradecido 20 veces en 15 mensajes.
Predeterminado Re: [Tutorial]: Aprende Html (desde cero)

Hola!!

Jaja muchas gracias a todos!

salu2!!
__________________

Follow me: @infomundoorg
Da like:

[Solo usuarios registrados pueden ver los links. REGISTRARSE]

s/a2h está desconectado  
Antiguo 02-nov-2009, 01:49   #15
Veterano
 
Fecha de Ingreso: mayo-2009
Amigos 0
Mensajes: 719
Gracias: 0
Agradecido 3 veces en 2 mensajes.
Predeterminado Re: [Tutorial]: Aprende Html (desde cero)

j0cker,a la tarde me pongo que ahora no tengo tiempo Gracias
lFanatic está desconectado  
Tema Cerrado

Herramientas
Desplegado

Normas de Publicación
No puedes crear nuevos temas
No puedes responder mensajes
No puedes subir archivos adjuntos
No puedes editar tus mensajes

Los Códigos BB están Activado
Las Caritas están Activado
[IMG] está Activado
El Código HTML está Desactivado
Trackbacks están Activado
Pingbacks están Activado
Refbacks están Activado





Portal Hacker
Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
SEO by vBSEO 3.6.0