miércoles, 18 de julio de 2012

INTRODUCCION AL HTML (Segunda Parte)



El HTML (HiperText Markup Language) es el lenguaje utilizado para representar documentos en la WWW (World Wide Web). Además de texto normal incluye también, elementos multimedia (gráficos, vídeo, audio) y existen enlaces (links) que permiten saltar a otras partes del documento o a otro sitio cualquiera de Internet.
Otra característica muy importante de este lenguaje es que es portable, es decir, se pueden visualizar las páginas con cualquier sistema operativo y, por supuesto también crearlas.
En la actualidad (noviembre 1999), Netscape y Microsoft siguen sin ponerse de acuerdo en el estándar del lenguaje. Microsoft ha asumido las directrices del ww3, pero no así Netscape, que implementa etiquetas propias, de modo que las páginas no se visualizan igual en el Navigator y en el Explorer.
Las etiquetas constituyen la filosofía de este lenguaje. Por medio de ellas se pueden controlar los elementos tipográficos del texto: tipo, color y tamaño de las fuentes, el estilo (negrita, cursiva, etc), así como también la inclusión de tablas, listas, formularios, la inserción de fotos, sonidos, fondos, los enlaces mencionados anteriormente. etc.
Las etiquetas se pueden modificar por medio de sus atributos, éstos son del tipo atributo="valor" y se colocan detrás del nombre de la etiqueta
El nombre de la etiqueta y sus atributos se colocan entre los símbolos < y > y normalmente se usan dos, una de inicio y otra final, para conseguir el efecto deseado.
Por ejemplo si escribimos
El texto se verá rojo y en tamaño un poco menor de lo normal
Se verá como El texto se verá rojo y en tamaño un poco menor de lo normal
El uso de estas etiquetas, y por ende el aprendizaje del HTML, no es difícil. Precisamente el objetivo de esta pequeña guía es servir de introducción y referencia de las características más usadas del HTML
¿Cómo empiezo a escribir HTML?
Para comenzar tan sólo necesitas un editor de texto para escribir las páginas y un navegador para visualizarlas.
El editor no debe formatear el texto. Usa el Bloc de notas (Notepad) en Windows 95 o 98. Se carga muy rápido y además es el programa que se abrirá por defecto desde el navegador.
Las etiquetas y sus atributos se pueden escribir en mayúsculas o minúsculas. El lenguaje ignora, también, los espacios en blanco seguidos, donde sólo cuenta uno de ellos.
Una vez que hayas escrito una página, guárdala en un fichero con extensión .htm o .html. Cuando hagas doble click sobre él se abrirá el navegador y te mostrará la página.
Para ver el contenido de los ficheros anteriores (los acabados en htm o html) con el Bloc de notas puedes crear un acceso directo al mismo en la carpeta "SendTo" del directorio "Windows" y te aparecerá como opción en "Enviar a " cuando hagas click con el botón derecho del ratón sobre el fichero.
Otro modo es abrir el fichero con el Explorer y luego, con el cursor colocado sobre el texto (no sobre imágenes) pulsar el botón derecho y elegir "Ver código fuente". En el Comunicator también se puede "Ver el origen" pero en un visor propio que no permite modificar el texto
Ten cuidado con el nombre de los ficheros, pues los servidores donde se alojan las páginas distinguen mayúsculas de minúsculas y no es lo mismo Inicio.htm que inicio.htm
¿Qué necesito para crear una página Web?
Lo primero que debes tener claro es qué contenidos va a tener tu página. Por ejemplo, si vas a hacer una página sobre tu Instituto, ¿qué vas a poner?: las enseñanzas que se cursan, los proyectos que estáis llevando a cabo, un poco de historia del pueblo o ciudad donde esté enclavado el centro, las actividades extraescolares que realiza el centro, etc.
Una vez decidido esto ¿qué necesitas? De entrada, el doble de tiempo que calcules para realizarla. Además necesitarás:
  •       Un navegador. Aunque hay más, parece que el Explorer y el Netscape son los mejores.
  •       Un editor de Html (que bien puede ser el que viene con los navegadores) o bien escribir todo el código a mano.
  •       Hacer las fotos que vas a poner y escanearlas (esto suele llevar bastante tiempo si no se ha hecho antes) Puedes hacerlo en el CPR.
  • Un programa gráfico para retocar las imágenes, mira en la página de imágenes.
  •       Espacio en un servidor que albergue la página. Si tienes cuenta en el PNTIC puedes subir unos 250 KB, que son suficientes para una página sencilla
  •       Un programa para subir la página al servidor, puede ser el WS_FTP que localizarás en http://www.ipswitch.com
  • Dar de alta la página en algunos buscadores (Alta Vista, Olé, etc) y también en el PNTIC si la página está relacionada con la educación. Si no haces esto, solamente podrán visitar tu página quienes conozcan la dirección exacta.
Y sobretodo bastante tiempo para el mantenimiento de la página: comprobar los enlaces, actualizar las fotos, el contenido, etc.
Estructura básica de un documento HTML

Todos los documentos Html tienen la estructura que se muesta a continuación, aunque la etiqueta //*()*// puede ser sustituida por //*()*//para un tipo de páginas que dividen la ventana del navegador en varios cuadros (frames).
Entre las etiquetas //*( y )*// se suelen colocar otras opcionales, como por ejemplo:
//*En este caso las etiquetas le indican a los buscadores el contenido de nuestras páginas (description) y algunas palabras clave (keywords) para su localización.

*//
La cabecera es la sección comprendida entre //*( y . )*// . En ella se encuentra necesariamente el título (entre las etiquetas //*()).
El título de la página debe describir su contenido por ejemplo:
//*( )*//
no valdría en cambio //*( )*//ya que esto no dice nada por si solo
Dentro de la cabecera también se suele incluir código en JavaScript, que se reconoce porque va comprendido entre las etiquetas
//*
*//
El cuerpo (body) del documento html es normalmente lo más importante. Es aquí donde debemos colocar el contenido de nuestra página: texto, fotos, etc.
El cuerpo está delimitado por las etiquetas //* ( y ) *// y La etiqueta //*()*// suele contener algunos atributos, a saber:
BGCOLOR parámetro usado para especificar el color de fondo de la página. El color se define como una terna de números (#rrggbb) en base hexadecimal en el orden rojo, verde, azul (Red, Green, Blue). También se puede usar el nombre en inglés de los colores predefinidos en los navegadores.
Sintaxis: o //*( o ) *//
Una buena ayuda para la seleccion de colores con #rrggbb la puedes encontrar en: Paleta de Colores
TEXT, parametro usado para definir el color del texto por omision. Su formato es el mismo que el de BGCOLOR. Si no se pone nada es negro.
LINK, VLINK, ALINK, parámetros usados para especificar el color por omision de: texto con enlace, enlace ya visitado y enlace activo.
Los colores por omision son LINK=blue, VLINK=purple y ALINK=red. El formato es el mismo que BGCOLOR.
BACKGROUND, parámetro usado para especifica la ruta y nombre de archivo (URL) de la imagen que será usanda como fondo del documento. Esta se verá como mosaico para cubrir toda la ventana si es pequeña (lo habitual).
Sintaxis: //*()*//
Es conveniente especificar la ruta de modo relativo, esto quiere decir que si cambiamos el directorio completo donde están nuestras páginas, desde C:\ a C:\webs por ejemplo, la ruta especificada debe seguir siendo válida.
Por ejemplo si la página desde la que hacemos el enlace se
encuentra en el directorio Aprendiendo Html y queremos poner como fondo la imagen fondo.gif, que se encuentra en gifs, se debe poner://*(<BODY BACKGROUND="gifs/fondo.gif">)*//
Si la página estuviese en ejemplos se pondría://*()*//
Fíjate en ../ pues es lo que indica al navegador que debe acudir al directorio superior

By. Alexander D. Florez B.


Fuentes:

53 comentarios:

  1. Me parecio interante el video sobre el HTML porque enseña claramente como hacerlo. Porfin pude entrar a el blog: 7°4

    ResponderEliminar
  2. me enseño aunque yo sabia pero me aclaro unas dudas que tenia

    Christian Amin Alvarez 8º1

    ResponderEliminar
  3. Aprendi Acerca de un atributo en html y me enseño algunas dudas

    Yirney paola Alfaro Ortiz 8°2

    ResponderEliminar
  4. Me parecio interante el video sobre el HTML porque enseña claramente como hacerlo y Aprendi Acerca de un atributo en html.

    Maria Camila Romero Gonzalez 8º2

    ResponderEliminar
  5. ME AGRADO ESTE VÍDEO YA QUE APRENDÍ SOBRE COMO CAMBIAR LOS COLORES DE FONDO, ESTRUCTURA DE HTML Y QUE ES HTML

    MARIA VICTORIA JAIMES RAMIREZ
    OCTAVO DOS

    ResponderEliminar
  6. me parecio interesante porque aprendi sobre el HTML Y nos enseña como hacerlo y tambien acerca de un atributo de HTML.
    KAREN TATIANA MORALES 8°2

    ResponderEliminar
  7. Este video me parecio muy bueno porque aprendi mucho sobre que es html, cual es su estructura y acerca del atributo en html
    MAYERLYS ALVAREZ 8º2

    ResponderEliminar
  8. Este video me parecio muy interesante porque me enseño sobre los atributos en html y sobre que es html,
    VALENTINA NAVARRO 8º2

    ResponderEliminar
  9. este vídeo me pareció muy bueno e interesante porque me enseño su estructura acerca del atributo en html
    PAMELA BERSINGER BENAVIDES 8-2

    ResponderEliminar
  10. Este video es muy interesante aprendi sobre html y los atributos que tiene
    Angie Julieth Moreno 8º2

    ResponderEliminar
  11. es muy educativo y aprendi mucho sobre html

    ESTEFANY MEZA 8-1

    ResponderEliminar
  12. es muy educativo y enseña mucho sobre html

    Dannys gomez 8º1

    ResponderEliminar
  13. en este video se puede apresiar lo que se puede aser con el html

    Angie sofia orozco c. 8º1

    ResponderEliminar
  14. En este vídeo se logra apreciar los atributos y ventajas que tiene el html
    ADRIANA QUECHO 8-2

    ResponderEliminar
  15. Me parecio interante el video sobre el HTML porque enseña claramente como hacerlo y Aprendi Acerca de un atributo en html.
    MAIRA FORERO 8-2

    ResponderEliminar
  16. Me parecio interante el video sobre el HTML porque enseña claramente como hacerlo y Aprendi Acerca de un atributo en html.

    cristian aguilera
    8-2

    ResponderEliminar
  17. es mejor que el primer video ojala falten pocas partes para terminar rapido

    deibith emmanuel gonzalez velandia 8º1

    ResponderEliminar
  18. kevin eduardo sosa sanabria 8-1

    me parecio muy buen video por que nos muestran un poco mas de lo que es html

    ResponderEliminar
  19. Me parece que el vídeo nos enseña muchas cosas y todas esas cosas nos servirá para algo en lo que queda de nuestras vidas.

    TATIANA YIZETH TOVAR JAIMES
    E.N.S.C.R.
    8°1

    ResponderEliminar
  20. Cada vez que veo uno vídeo de estos voy a aprendiendo mas y mas gracias por subir estos vídeos tan interesantes.

    JENNIFER JULIETH MARTINEZ GARCIA
    E.N.S.C.R
    8°2

    ResponderEliminar
  21. estos vídeos realmente nos enseña paso a paso sobre el html y que por supuesto llegara un momento de nuestras vidas que lo necesitaremos.

    Shirley Andrea Cala Perez
    8-2
    E.N.S.C.R

    ResponderEliminar
  22. MONICA PAOLA HERNANDEZ
    estos videos son muy inetresantes es como reforzar lo visto en clase pero con algo mas de profundizacion.. gracias profe por subir los videos..
    ESCUELA NORMAL SUPERIOR CRISTO REY
    8°1

    ResponderEliminar
  23. Un vídeo y una información genial, precisa y sobre todo muy entendible, que nos sirve para nuestro crecimiento y sobre todo para nuestra información tecnológica.

    José Gabriel Anaya Rincón
    8°2
    E.N.S.C.R

    ResponderEliminar
  24. SULY PAOLA PARRA ARIZA 8-1

    ME PARECIO MUY IMPORTANTE PORQUE VOY APRENDIENDO POCO A POCO EN BASE DE LOS VIDEOS

    ResponderEliminar
  25. Con este video aprendí muchas cosas que no tenia ni idea,gracias profe,por compartirlo.
    MARIA ALEJANDRA OCHOA PLATA-8°2.
    E.N.S.C.R

    ResponderEliminar
  26. Este video tuvo una informaciòn precisa,interesante y muy entendible, que me sirve para un buen futuro en la informaciòn tecnologica.

    Valentina Olea Cortès
    8º3
    E.N.S.C.R.

    ResponderEliminar
  27. ME GUSTO MUCHO PORQ YA SE COMO CAMBIAR EL COLOR DE LAS LETRAS Y DE LA PAGINA

    MANUEL ALDANA
    8-4

    ResponderEliminar
  28. Es un vídeo interesante,con el que aprendí algo que me puede servir para el futuro. Buena información muy precisa.
    Marialejandra Zapata
    8º3
    E.N.S.C.R.

    ResponderEliminar
  29. Gracias a este vídeo voy entendiendo mejor el tema. Nos facilita más nuestro aprendizaje y está claro e interesante.
    Adriana Alquichire Arzuza
    8°1

    ResponderEliminar
  30. este es un video muy interesante gracias por tomarse el tiempo de escribirlo ya que hemos aprendido mucho
    KELLY JOHANNA MOLANO VEGA 8-3

    ResponderEliminar
  31. el video de la tercer parte estuvo muy interesante.. gracias profe por profundizar los tmas vistos en clase con estos videos
    MONICA PAOLA HERNANDEZ
    E.N.S.C.R
    8°1

    ResponderEliminar
  32. muy buen vídeo gracias profesor con el aprendo mucho JUAN PABLO AMOROCHO ACOSTA 8-1

    ResponderEliminar
  33. Gracias a este video entendi y aprendi muchas cosas que no sabia, me parecio muy interesante.
    ANGIE XIMENA MEDINA ORTIZ
    8°1

    ResponderEliminar
  34. es te video me parecio muy interesante con el cual podemos aprender cosas nuevas
    geraldine andrea jacome
    8°5
    enscr

    ResponderEliminar
  35. buena, estaba super cool y me enseño mucho

    melissa echeverria rueda y valentina diaz
    8.3

    ResponderEliminar
  36. Muy interesante, logré comprender el tema.

    8º3

    ResponderEliminar
  37. Hola profe:

    Gracias por el video, esta muy interesante, entendible y completo, gracias a el entendi mejor el tema, con el pude aprender cosas nuevas que me ayudaran en el futuro.

    Laura Daniela Estupiñan Castillo
    8°4

    ResponderEliminar
  38. fue muy interezante y educativo el html fue muy bueno
    luisa fernanda camargo garcia
    8-5

    ResponderEliminar
  39. con este video aprendi cosas que me ayudaron para entender mejor el tema

    maria alejandra hernandez mejia
    grado:8-4

    ResponderEliminar
  40. Entendí muy bien el tema,ya que en el se explica todo ,gracias profe.
    MARIA ALEJANDRA OCHOA PLATA-8°2
    E.N.S.C.R

    ResponderEliminar
  41. Muy interesante el vídeo y la información pues nos enseña los atributos de body, y bgcolor
    para utilizarlos bien a la hora de hacer nuestra página web.
    José Gabriel Anaya Rincón
    8º2

    ResponderEliminar
  42. estaba muy completo, tenia buenos conceptos y estaba muy bien explicado

    -valentina diaz cobos 8-3

    ResponderEliminar
  43. Gracias por este video que me ayudo mucho en la creacion de mi pagina

    Juan Felipe Madrid López

    8*2

    ResponderEliminar
  44. Un vídeo y una información genial, precisa y sobre todo muy entendible, que nos sirve para nuestro crecimiento y sobre todo para nuestra información tecnológica.
    jeison florez campuzano
    8-2

    ResponderEliminar
  45. Gracias por subir vídeos como estos, cada día aprendo cada vez más.
    MAYRA ALEJANDRA QUINTERO PANESSO.
    8º2.

    ResponderEliminar
  46. Un vídeo y una información genial, precisa y sobre todo muy enteresante
    Maria Jose Silva Barrragan
    8°2

    ResponderEliminar
  47. Un vídeo y una información genial, precisa y sobre todo muy enteresante
    Maria Jose Silva Barrragan
    8°2

    ResponderEliminar
  48. Un vídeo y una información genial, precisa y sobre todo muy entendible, que nos sirve para nuestro crecimiento y sobre todo para nuestra información tecnológica
    sawi cardenas

    8·2

    ResponderEliminar
  49. fue muy interesante con eso aprendi muchas cosas nuevas hoy
    liyibeth andrade 8-1

    ResponderEliminar
  50. este video me enseño su estructura acerca del atributo en html. david chavez 8-1

    ResponderEliminar
  51. Gracias a los videos, hemos podido realizar las distintas actividades propuestas y ademas hemos podido aprender con la ayuda de ellos. *.*

    Jose Daniel Mancipe Rangel. 8°4

    ResponderEliminar