Estructura del html y primeros pasos del css

Dreamweaver

Hi!, Ahora vamos a comenzar con todo el cuento de la creación de paginas web con css, lo primero es lo primero. crear un documento en dreamweaver… ó si usas archivos de texto pues creas un index.html

Ahora, como sabes… todo tiene un orden, las etquetas html también, todo html inicia con algo llamado DOCTYPE, son algunas indicaciones como el documento y unos estandares que se manejan para el html, generalmente… para todo html se maneja la siguiente etiqueta:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transición//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>

La anterior etiqueta SIEMPRE va al comienzo de todo documento html, Ahora hay un dato importante. Recuerdas el xml, del que tanto hablan, pues para los que noconosen el xml es un estandar y este maneja etiquetas a la hora de escribirse, por ejemplo los RSS estan basados en xml, entonces digamos en un documento xml tenemos que insertar NOMBRE, APELLIDOS, según las especificaciones el xml debería ir así, con etiquetas según la info que vamos a escribir: <nombre>Andrés</nombre><apellido>Lara</apellido>, si analizamos la etiqueta cuando quiero terminar el contenido la cierro con una etiqueta similar, pero precedida con un / , esto nos indica que la etiqueta termino, ejemplo: <comentario>”Hola pedrito como vas?”</comentario>, ahí el comentario termina con </comentario>, así se puede entender donde comienza las cosas y donde terminan, entonces estos genios… del html comenzaron a trabajar en el html y descubrieron que el html podía ser un xml… ósea si yo comienso una etiqueta la cierro con un </, y todo se dio para que crearan algo llamado xhtml, que quiere decir… un html muy parecido al xml.

Volviendo al tema 😛 la siguiente etiqueta es la html, que es la que me dice si el documento html que estoy haciendo es HTML ó es XHTML, como nosotros vamos a la delantera, y queremos descrestar a todos, vamos a usar el xhtml que es le mas estandar, el que todos usan, así que si en la calle te dicen “OYE TRABAJAS CON HTML, no! eso es del pasado yo trabajo con xhtml!”, entonces seguimos, la etiqueta html va con esta estructura:

<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”es-ES” lang=”es-ES”>

Recuerda que esta etiqueta HTML esta abierta hasta el final, solo se cierra en el ultimo punto, a continuación vemos una etiqueta llamada HEAD y esta etiqueta maneja como su nombre lo dice en español CABEZA en español, esta etiqueta hasta donde se cierra maneja todo lo relacionado con titulos… iconos y otras vainas que a continuación vamos a ver, la estructura del head es simple solo abrimos la etiqueta:

<head>

Ahora vamos con las etiquetas META, son etiquetas que sirve para dar algunos detalles del documento XHTML por ejemplo con la etiqueta META podemos manejar las palabras claves… el autor… y la descripción del sitio, por que no me puedo demorar mucho en la explicación les dejo dos enlaces relacionados con HEAD y con META

Etiqueta head

Etiquetas meta

Y la estructura de las etiquetas meta viene siendo así:

<meta name=”author”
CONTENT=”WebMaster de Los Alpes”>

<meta name=”keywords”
CONTENT=”viajes, ofertas, Los Alpes, Orlando, Nueva Zelanda”>

<meta name=”description”
CONTENT=”La agencia de viajes Los Alpes tiene un gran prestigio en el mundo de las empresas y combina una gran calidad con unos excelentes
precios.”>

Ahora si vamos con una etiqueta importante, la etiqueta TITLE , etiqueta fundamental si queremos hablar del titulo del documento XHTML , ¿Si han visto en las paginas web que aparece el titulo del sitio en la ventana del navegador?, esto lo podemos hacer mediante la eqitueta TITLE , su estructura es la siguiente:

<title>La empresa de mi papa.com</title>

Ahora seguimos con algo que es muy importante entender… por eso es necesario que antes de continuar, creemos una nueva carpeta en donde estamos alojando el index.html, la carpeta deve llamarse “css”, sin comillas, en esta carpeta vamos a guardar los archivos css necesarios a lo largo de toooooodo el blog.

dentro de la carpeta css, crea un archivo llamado: “principal.css”, sin comillas, y a continuación dentro del archivo inserta el siguiente código:

@charset “utf-8”;
/* CSS Document */

Esa porción de código SIEMPRE deve ir SIEMPRE, ahora que creamos el archivo .css continuamos en index.html, ahora para llamar al archivo css que acabamos de crear, utilizamos una instrucción muy simple:

<style type=”text/css” media=”screen”>
  <!– @import url(css/principal.css);–>
</style>

Con esta instrucción, estamosagregando el archivo css, con esto permitimos que el archivo css quede en el caché, como algunas imagenes.

Ahora el paso ultimo seria cerrar la etiqueta </head>, para indicar que hasta ahí va todo.

A continuación abrimos una etiqueta llamada BODY, y el código seria así:

<body>

Repasemos hasta ahora como tenemos el código aproximadamente:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”es-ES” lang=”es-ES”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<meta name=”author”
CONTENT=”WebMaster de Los Alpes”>
<meta name=”keywords” CONTENT=”viajes, ofertas, Los Alpes, Orlando, Nueva Zelanda”>
<meta name=”description” CONTENT=”La agencia de viajes Los Alpes tiene un gran prestigio en el mundo de las empresas y combina una gran calidad con unos excelentes precios.”>
<link rel=”shortcut icon” href=”img/favicon.ico” mce_href=”img/favicon.ico” type=”image/x-icon” />
<title>La empresa de mi papa</title>

<style type=”text/css” media=”screen”>
  <!– @import url(css/basico.css);–>
  </style>
</head>
<body>

Ahora dentro del body va el contenido del xhtml, desde tablas hasta imagenes, todo lo que vayamos a trabajar, lo anteriormente colocado es esencial para poder laborar con estos documentos ya que se hace gura que aya compatibilidad entre navegadores y entre dispositivos anteriormente comentados.

Para cerrar solo quedaría colocar las etiquetas finales que seria finalizar la etiqueta BODY y HTML:

</body>
</html>

y pues el código quedaría algo así:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”es-ES” lang=”es-ES”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<meta name=”author”
CONTENT=”WebMaster de Los Alpes”>
<meta name=”keywords” CONTENT=”viajes, ofertas, Los Alpes, Orlando, Nueva Zelanda”>
<meta name=”description” CONTENT=”La agencia de viajes Los Alpes tiene un gran prestigio en el mundo de las empresas y combina una gran calidad con unos excelentes precios.”>
<title>La empresa de mi papa</title>
  <style type=”text/css” media=”screen”>
  <!– @import url(css/principal.css);–>
  </style>
</head>
<body>

</body>
</html>

Espero que les aya servido para comenzar, APENAS ES LO BASICO, mas adelante iremos con mas, mañana comenzamos ya completamente con las clases 😛 chau!.

Anuncios
Acerca de

Programador, usuario Linux e hincha de Millonarios de Colombia

Tagged with: , , , , , , , , , , , , ,
Publicado en Css para principiantes, manuales
5 comments on “Estructura del html y primeros pasos del css
  1. oscar sanchez dice:

    hola, tengo unas hojas de estilo que me pasaron, pero no las se como llamarla,
    estas tienes una carpeta que se llama _layouts y dos subcarpetas, imagenes y 3082 y en estas incluyen los archivos C:\Documents and Settings\soporte\Mis documentos\_layouts\3082\STYLES estan las paginas css
    pero no que se hace primero, o que hago.
    gracias

  2. lorenzo dice:

    esa pregunta que haces es un poco rara ponle el nombre que quieras
    sms videos porno

  3. Anibal dice:

    Se que es algo viejo el post, pero hay algo que me gustó mucho, el

    [b]”se hace gura”[/b], más allá de que debería ser “asegura” (de asegurar) me resultó muy gracioso que alguien se haga gura…

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Sígueme en Twitter
Categorías
Flickr Photos
¡Apareció Linux!

Mirando de lado

Café

Más fotos
A %d blogueros les gusta esto: