LOG IN
Usuario:

Contraseña:


Últimos temas
» [PHPBB3] Estadísticas Y ¿Quien esta en Linea? como PUNBB.
Dom Ago 20, 2017 1:29 am por +Luigi!

» [PHPBB3] Recuadro a el contenido y el titulo de "¿Quien esta en Linea?".
Dom Ago 20, 2017 1:27 am por +Luigi!

» Free Forum Ranks
Lun Ago 14, 2017 3:10 am por sukerwold

» RPG Forum Ranks (Double Pack)
Lun Ago 14, 2017 3:09 am por sukerwold

» [MEGAPACK] Todos los iconos que necesitas para tu foro en un solo lugar!! -Proximamente PSD- INCLUYE EPS
Lun Ago 14, 2017 1:33 am por osmardj

» info del user al dar clic al nombre del user en el index
Vie Ago 04, 2017 10:22 pm por tyhr

» Nebula Resource Pack
Jue Ago 03, 2017 6:41 pm por Aikazen

» Skin Teen Pro9x [ PunBB ]
Lun Jun 05, 2017 3:39 am por profesional

» Ranks 3
Miér Mayo 31, 2017 11:17 pm por zotinyx

Estadísticas
Tenemos 2351 miembros registrados.
El último usuario registrado es sukerwold.

Nuestros miembros han publicado un total de 41211 mensajes en 3358 argumentos.
Afiliados





No estás conectado. Conéctate o registrate

Ver el tema anterior Ver el tema siguiente Ir abajo  Mensaje [Página 1 de 1.]


1 Clase 3 - Atributos y su aplicación en tablas el Miér Ene 18, 2012 10:46 pm

Curso WEBD: HTML – Clase 3

Hola! Continuaremos con el mismo código de la clase anterior, agregándole atributos a nuestras etiquetas.
- Abrimos nuestro documento en Notepad++

Código:
<html>
   <head>
      <title>Mi primer página HTML</title>
   </head>
   <body bgcolor="#a5cbfa">
      <h1>WebDesign Curso</h1> <br>
      <p align="center">Creando una página HTML</p>
      
      <h3>Título más Pequeño</h3>
      <p><i>Este es un </i><b>segundo párrafo.</b></p>
   </body>

</html>

Nuestra página no tiene un formato agradable, son solo textos en un fondo celeste.
Vamos a hacer lo mismo que he hecho con el body:
<body bgcolor="#a5cbfa">
Como pueden ver, nuestra etiqueta tiene junto a ella bgcolor="#a5cbfa". Esto es un atributo.
Los atributos le asignan un formato a nuestras etiquetas para hacerlas más agradables, dándole color, tamaño, etc.

La estructura de un atributo es Nombre=”Valor y se coloca dentro de una etiqueta:

<body bgcolor="#a5cbfa">


Listado de atributos: clic aquí

Ahora que sabemos lo que es un atributo, creamos una tabla y le asignamos un fondo y un borde:

Las tablas se definen con las etiquetas <table></table>
Dentro de esta etiqueta se colocarán filas y columnas.
- <tr></tr> son las filas
- <td></td> son las columnas

De este modo, si tenemos una tabla de este tipo:
Código:
<table>
  <tr>
   <td>Contenido</td>
   <td>Contenido</td>
  </tr>
</table>

Tendremos una tabla de dos columnas y una fila, así:
Contenido Contenido

Ahora vamos a cambiar la palabra “Contenido” por lo que ya hemos escrito en nuestro documento.
Me refiero a:
- <p align="center">Creando una página HTML</p>
- <h3>Título más Pequeño</h3>
<p><i>Este es un </i><b>segundo párrafo.</b></p>

Tendremos como resultado:
Código:

<table>
      <tr>
     <td><p align="center">Creando una página HTML</p></td>
     <td><h3>Título más Pequeño</h3><p><i>Este es un </i><b>segundo párrafo.</b></p></td>
      </tr>
</table>

Si guardamos y visualizamos el documento, veremos algo así:

Sigue siendo una página muy aburrida, no? Vamos a agregarle unos atributos:
Colocamos dentro de la etiqueta <TABLE>:
- width="700" Este atributo hace que la tabla tenga 700 píxeles de ancho.
- bgcolor="#fff" Este atributo le asigna un color de fondo blanco (#fff) a la tabla
- height="400" El height es el alto, nuestra tabla tendrá 400px de alto.
- border="1" El atributo Border asigna un borde a la tabla.
- align="center" Para alinear la tabla al centro.

Resultado:
Código:
<table width="700" bgcolor="#fff" height="400" border="1" align="center">

Codigo Final:
Código:
<html>
   <head>
      <title>Mi primer página HTML</title>
   </head>
   <body bgcolor="#a5cbfa">
      <h1>WebDesign Curso</h1> <br>
      <table width="700" bgcolor="#fff" height="400" border="1" align="center">
         <tr>
            <td><p align="center">Creando una página HTML</p></td>
            <td>
               <h3>Título más Pequeño</h3>
               <p><i>Este es un </i><b>segundo párrafo.</b></p>
            </td>
         </tr>
      </table>
      
      
   </body>

</html>
Ahora si, guardamos y veremos un gran cambio:


Eso es todo! damos por finalizada la tercera clase de html!
Saludos! Encantado

Ver perfil de usuario http://www.webdesignforo.net

Esto me lo sabia lo admito pero aclare las principales dudas, gracias.

Ver perfil de usuario http://www.aikayweb.activo.ws

Yo igual lo sabia pero ahora tengo muchas mas aclaraciones que antes

Ver perfil de usuario

Genial ahora se algo de HTML xD

Ver perfil de usuario http://animepng.blogspot.com

es algo complicado pero sencillo ;D

Ver perfil de usuario http://www.webdesignforo.net/

Gracias por el tutorial. El principio me es de mucha ayuda para entender mas en la profundidad

Un beso

Ver perfil de usuario

Si... Recuerden que:

si quieres darle un estilo a una Div, simplemente tienes que:
Si el div es por ejemplo

Contenido de la div

el css debe de ser:
#contenido {
Aquí pones el estilo que quieres pasa ese div
}

Ver perfil de usuario

Muy buena clase, nunca está de más tener presente lo básico de HTML. Sonrisa

Ver perfil de usuario http://www.webdesignforo.net/

tenia la idea de como hacerlo pero ya me quedo claro todo gracias...

Ver perfil de usuario

Buenas noches, llevo días buscando esto, muchas gracias por la sencillez y lo bien explicado que esta.

Ver perfil de usuario

Contenido patrocinado


Ver el tema anterior Ver el tema siguiente Volver arriba  Mensaje [Página 1 de 1.]

Permisos de este foro:
No puedes responder a temas en este foro.