LOG IN
Usuario:

Contraseña:


Últimos temas
» Navbar desplegable sencilla
Dom Jun 17, 2018 2:06 pm por Ysamar

» Modulo de Afiliados 40x40 [Todas las versiones]
Vie Jun 15, 2018 6:44 pm por Ysamar

» 2 Galeria Html Elegante
Miér Jun 13, 2018 8:57 pm por Ysamar

» [PHPBB3]Agregar amigos desde el perfil y dejar mensaje en su muro...
Miér Jun 13, 2018 8:02 pm por Ysamar

» [PHPBB3] Contenido por defecto en la respuesta rapida.
Miér Jun 13, 2018 7:56 pm por Ysamar

» Botón "ir al muro" (mensajes de los visitantes)
Miér Jun 13, 2018 7:49 pm por Ysamar

» ¿No quieres publicidad
Miér Jun 13, 2018 7:37 pm por Ysamar

» Efecto Lightbox automatico en imagenes [Foroactivo]
Miér Jun 13, 2018 7:27 pm por Ysamar

» Skin: Glow Theme [Adaptado por: 15-tronos]
Miér Mayo 09, 2018 1:08 am por profesional

Estadísticas
Tenemos 2352 miembros registrados.
El último usuario registrado es Jhunky.

Nuestros miembros han publicado un total de 41228 mensajes en 3360 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.