curso paginas web

Estructura Basica de un documento HTML

Con este articulo damos inicio oficialmente al Curso gratis de Paginas web.

Estructura Basica de un documento

Para que un documento sea considerado HTML hay que definirselo al Navegador, siendo la estructura la siguiente:

<!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”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Documento sin título</title>
</head>

<body>
</body>
</html>

La estructura nunca cambia, siempre es la misma, asi que todo el contenido de la pagina web va dentro de la etiqueta BODY:

<body> –> Inicio de etiqueta

AQUI ESCRIBES EL CONTENIDO DE LA PAGINA WEB

</body> –> fin de etiqueta

Sintaxis de una Etiqueta

Las etiquetas en HTML definen el cambio o formato a aplicar a una seleccion, para ello cada etiqueta tiene una funcion especifica, pero la sintaxis es siempre la misma “<” simbolo de menor que, indica el inicio de la definicion de una etiqueta,  “>” simbolo mayor que, indica el final de una etiqueta, por ejemplo “<p>”, “<strong>”, “<a>”, “<blockquote>”, “<head>”.

Como vimos mas arriba, el contenido o la forma de seleccionar en HTML lo hacemos indicando manualmente el lugar de inicio y de fin de una etiqueta, de esta forma esa etiqueta afectará unicamente a ese texto o imagen.

Ejemplo:

<font color=”red”>Este texto es rojo</font>pero este no

Del ejemplo podemos ver como funcionan las etiquetas; FONT es la etiqueta porque se encuentra mas proxima a “<” el atributo es COLOR y el valor es RED, FONT tiene 3 atributos posibles “FACE”, “COLOR” y “SIZE”, Face para el tipo de letra, Color para los colores de letra y Size para el tamaño de letra, en otro post explicaremos con mas detenimiento como funcionan estos atributos, lo impotante en este momento es que entiendas la sintaxis de una etiqueta HTML.

Bueno, los comentarios son bienvenidos, espero que el video te sea de mucha utilidad. Cualquier duda que tengas o sugerencia es bienvenida.

13 comments on “Estructura Basica de un documento HTML

  1. Hola Walter, tu video me gusto muchisimo, pero no alcanso a entender como hiciste para hacer las 4 primeras paginas en el curso de Dreamweaver ya que en el video no se ve, me podrias explicar por favor.

  2. Hola Walter, eres lo mejor del mundo en favores que Dios te bendiga muchísimo. Tanto tiempo que he querido aprender hacer paginas Wed, y tu me has motivado. muchas gracias.

    • Juan Alberto, muchas gracias por tus palabras, bienvendo al blog y que alegre haber servido de motivación. Cualquier duda en cualquiera de los video tutoriales hazla en los comentarios y con gusto te responderé a la brevedad. Bendiciones

  3. ALGUIEN QUE ME EXPLIQUE QUE PROGRAMA SE USA PARA DISEÑO DE PAG WEB?? PORQ SOY DISEÑADORA GRÁFICA, PERO JAMAS EN VIDA HICE UNA PAG WEB.. UN MILLÓN DE GRACIAS.

  4. hola walter

    Dios te Bendiga, realmente es maravilloso lo que estas haciendo, muchos queremos aprender pero por ajenas circunstancia no lo podemos hacer, pero realmente me llena de felicidad que personas como tu nos permitan tener esa oportunidad y de una forma gratuita. quiero crear una pagina web para donarla a la iglesia donde me congrego y la ayuda que tu nos brindas a travez de este sitio y los videos son muy completos para empezar a conocer y crear la pagina.
    Dios Bendice la obra de tus manos, muchas gracias.

    • Muchas gracias por el comentario y las Bendiciones Maria Angelica, es muy grato saber que los tutoriales del curso son de utilidad. No dudes en compartir estos videos con tus amigos, son gratuitos y les voy agregando nuevo material periódicamente.

  5. Dios te Bendiga, es maravilloso lo que muchos queremos aprender y no podemos hacer, pero realmente me llena de felicidad que personas como ustede nos permitan tener esa oportunidad una forma gratuita.
    Y Dios Bendice .

  6. Oye, me gusta aprender gracias por compartir tus conocimientos al mundo…. una pregunta, al funal del tutorial dices que visitemos tu blog para mas información detallada, pero cual es tu blog? me confundo un poco, no es este tu blog??

  7. Hola Walter! Me podrías decir si para hacer una página web se requiere de algún tipo de programa especial ó si sólo teniendo el programa photoshop se puede crear a partir de éste? Ojalá que no estés tan ocupado y puedas responder a mi pregunta. Gracias por todos tus tutoriales. Saludos y bendiciones.

    • Estimado Juan Carlos, el diseño de paginas web no depende exclusivamente de un programa dado que todo se hace desde el lenguaje, lo que existen son editores que ayudan a que la tarea sea más fácil y divertida en un ambiente “hecho para humanos”, Dreamweaver es un ejemplo de programa de edición de páginas web, pero puedes crear una pagina web desde el Bloc de Notas u otro editor de textos planos (Notepad ++ por ejemplo). Con respecto a Photoshop éste te ayuda a diseñar los botones y la interfaz en general pero debes pasarlo luego de hacer toda la interfaz a HTML, puedes hacer los cortes en Photoshop y hacer llamados a las imagenes y crear las clases con imagenes de fondo desde CSS a fin que el sitio quede lo más parecido posible a la interfaz previamente diseñada en Photoshop.

      En conclusión: Vas a utilizar Photoshop para “dibujar” los iconos, combinar los colores y darte una idea más clara de como se verá el sitio al final, luego vas a utilizar Dreamweaver (puedes utilizar un editor de textos planos) para armar el sitio web y luego un programa Cliente FTP para subir los datos al servidor (yo utilizo Filezilla)

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>