Monografias.com > Computación > Programación
Descargar Imprimir Comentar Ver trabajos relacionados

Capacitación de herramientas para el desarrollo web




Enviado por Pablo Turmero



    Monografias.com

    HTML, Historia y Elementos del LenguajeContenidos
    Lenguaje de Hipertexto HTML
    ¿Qué es HTML?
    Historia del HTML
    ¿Qué es el World Wide Web Consortium?
    Herramientas necesarias para usar HTML
    ¿Qué es DOM?
    Elementos del Lenguaje
    Principales Tags
    Paleta de Colores

    Monografias.com

    ¿Qué es HTML?
    Es un lenguaje de formato de texto que a través de sus etiquetas determina la forma en como se presenta el contenido en el cliente.
    Los navegadores interpretan estas etiquetas.

    Monografias.com

    Historia del HTML
    Existen 4 versiones de HTML:
    HTML 1.0:
    Aceptado por todos los browser.
    Fue utilizado en sus comienzos por Mosaico.
    Define elementos estándares como encabezamiento, párrafos, referencias a imágenes y hipervínculos.
    HTML 2.0:
    Se convierte en el estándar oficial a partir de noviembre de 1995.
    Se encuentran publicado como estándar en el W3C(RFC 1866)

    Monografias.com

    Historia del HTML
    Existen 4 versiones de HTML:
    HTML 3.0 – 3.2:
    Se convierte en lenguaje oficial a partir de enero de 1997.
    Las especificaciones se encuentran en el W3C.
    Se agregan tags como applet y tablas en entre otros.
    HTML 4.0:
    Se convierte en lenguaje oficial a partir de julio de 1997.
    Reconoce uso de frames,CSS,Javascript, VBScript.
    La última especificación liberada fue 1999 como HTML 4.01.

    Monografias.com

    Reformulaciones de HTML
    XHTML :
    Extensible Hypertext Markup Language
    Describe las especificaciones que deben tenerse en cuenta para generar código estricto.

    XML
    Extensible Markup Language
    Es un metalenguaje.
    Describe contenido de lo que etiqueta no presentación.

    Monografias.com

    ¿Qué es el World Wide Web Consortium?
    Es un organización que se encarga de promover el desarrollo en la WEB a través de estándares y documentación.
    El sitio web es http://w3c.org

    Monografias.com

    Herramientas necesarias para usar HTML

    Procesador de texto o editor de HTML.
    Un Browser.
    No es necesario un servidor WEB.

    Monografias.com

    ¿Qué es DOM?

    El DOM( Modelo de Objetos de documentos) permite acceder a la página y a sus elementos a través de una estructura jerárquica de objetos con atributos y métodos.
    Javascript es un lenguaje de manipulación de objetos.
    Permite realizar efectos, como rollover, menús emergentes que se conocen como DHTML.

    Monografias.com

    EJEMPLO DE DOM
    < html>
    < head>
    < title>Ejemplo< /title>
    < /head>
    < body>
    < h1>Titulo de la página< /h1>
    < /body>
    < /html>

    Monografias.com

    ¿Qué es un TAG?
    Es un marcador que define el como debe ser presentado en el navegador parte de un documento.
    Los Tag comienzan y terminan por estándar. Caso Explorer y Netscape.
    < table>…..< /table>
    Algunos tags tienen atributos que definen otras características.
    < img src=“/Imagenes/logo.gif”>
    src representa la ruta de la imagen.

    Monografias.com

    Tags Básicos
    < html>..< /html>
    Marca el inicio de un documento html.
    < head>..< /head>
    Marca el inicio de la sección de encabezado.
    < title>..< /title>
    Establece el título de un documento.
    < meta>..< /meta>
    Permite especificar información acerca del documento.
    < body>..< /body>
    Contiene el contenido del documento.

    Monografias.com

    Estructura de un documento HTML
    Todos los documentos html deben contar con los tags básicos.
    Se debe definir plantillas HTML.
    Previo a lo anterior se debe contar con una estructura de directorios ya definidas.

    Monografias.com

    Ejemplo de plantilla HTML
    1. Vaya al block de notas (NotePad)
    2. Escriba lo siguiente:
    < html>
    < head>
    < title>Plantilla Base< /title>
    < meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    < meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
    < meta name="keywords"content="Temas y palabras claves de búsquedas">
    < meta name="description"content="Plantilla de HTML">
    < link rel="stylesheet" href="css/principal.css" type="text/css">
    < script type="text/javascript" language="JavaScript">< /script>
    < /head>
    < body>
    < h1>< center>Plantilla Estándar de HTML< /center>< /h1>
    < !– Aqui debe ir el contenido del documento que será diferente por
    por cada htm–>
    < /body>
    < /html>

    Monografias.com

    Ejemplo de plantilla HTML
    3. Menú archivo, guardar como y colóquele nombre ejemplo.htm.
    4. En el Browser visualice lo anterior.

    Monografias.com

    Consideraciones de HTML
    Los comentarios en HTML comienzan con
    < !– y finalizan con –>. Son sumamente útiles en el caso de las plantillas.
    La extensión de la plantilla puede ser htm o html.
    Los nombres de los archivos se rigen por las misma convenciones.

    Monografias.com

    Tag Link
    Pertenece a la sección encabezado del documento html(head).
    Permite establecer una relación entre el documento y otros documentos.
    Permite modularizar la página.
    Dentro de sus atributos se encuentran:
    href: URL en donde se encuentra el documento relacionado.
    rel: identifica el tipo de documento relacionado.

    Monografias.com

    Ejemplo Tag Link
    En la plantilla ejemplo.htm se encuentra dentro de la sección head :
    < link rel="stylesheet" href="css/principal.css" type="text/css">

    Define que el documento a enlazar contiene los
    estilos del documentos, y estos se encuentran en
    la carpeta css y el archivo se llama principal.css

    Monografias.com

    Tag Script
    Pertenece a la sección encabezado del documento html(head) o bien el cuerpo del documento html(body).
    Define que lo escrito dentro de este tags debe ser interpretado como un lenguaje script.
    Permite modularizar la página.
    Dentro de sus atributos se encuentran:
    Language: especifica el lenguaje del script.
    Type: pueden ser dos valores text/javascript o text/vbscript

    Monografias.com

    Ejemplo Tag Script
    En la plantilla ejemplo.htm se encuentra dentro de la sección head :
    < script type="text/javascript“ language="JavaScript">
    //Código Javascript
    < /script>

    Lo que se escriba dentro de esta sección debe ser
    interpretado con Javascript.

    Monografias.com

    ¿Qué son los Meta Tags?
    Pertenecen a la sección encabezado(head) del documento.
    El propósito de un Meta Tags es proveer de información que es relevante para los browser o motores de búsqueda.
    Ejemplo de un Tag Meta:
    < meta name=“keywords” content=“html,dhtml”>

    Monografias.com

    Tipos de Meta Tags
    < meta name=“keywords” content=“valores”>
    Permite especificar palabras claves que los buscadores pueden utilizar.
    < meta name=“Autor” content=“Ra”>
    Permite especificar el autor del documento.
    < meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    Permite generar encabezados HTTP.

    Monografias.com

    Tipos de Meta Tags
    < meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
    Permite generar encabezados HTTP.
    Existen generadores de Meta Tags.
    http://www.orbitas.com/go2search/metatags

    Monografias.com

    Tags de Textos, Formatos y Párrafos
    < h1>< h2>< h3>< h4>< h5>< h6>
    Se utiliza para crear los títulos de los documentos.(Van en la sección body.
    < strong>..< /strong>
    Permite dar mayor enfásis a un texto.
    < p>..< /p>
    Define el comienzo de un párrafo.
    < center>..< /center>
    Permite centrar un texto.

    Monografias.com

    Tags de Textos, Formatos y Párrafos
    < br>..< /br>
    Produce un quiebre de línea.
    < i>..< /i>
    Permite definir un texto con estilo italic.
    < blockquote>..< /blockquote>
    Señala un bloque identado.
    < div>..< /div>
    Ofrece un mecanismo genérico para agregar estructura a un documento. Genera un quiebre de línea.

    Monografias.com

    Tags de Textos, Formatos y Párrafos
    < span>..< /span>
    Permite definir un bloque de texto dentro de un documento.
    < LI>..< /LI>
    Define cada elemento de una lista.

    Monografias.com

    Ejercicio de utilización de Tags Básicos
    1. Vaya al notepad.
    2. Abra el archivo ejemplo.htm
    3. Guarde como formatobasico.htm
    4. Cambie el título de la página por “Utilización de Tags Básico”.
    5. Agregue el Meta Tags autor, y coloquele su nombre.Guarde los cambios.
    6. Modifique el Meta Tags Description por “Ejemplos de utilización de Tags Básicos”

    Monografias.com

    Ejercicio de utilización de Tags Básicos
    7. Modifique el Tag Keywords con “html básico”.
    8. Guarde los cambios.
    9. Posicionese en la sección Body.
    10. Escriba un título a la página en formato h1 y centrado y que diga “Página de Formatos Básicos en HTML”. Guarde los cambios.
    11.Agregue un comentario en la línea anterior indicando lo que hace.
    12.Agregue dos quiebres de línea.

    Monografias.com

    Ejercicio de utilización de Tags Básicos
    13. Agregue un subtítulo en formato h2, que diga, “Audiencia en Internet”. Guarde los cambios.
    14. Agregue dos quiebres de línea.
    15. Escriba “Importante Noticia”, en donde importante debe ir en negrita y con estilo italic.Guarde los cambios.
    16. Agregue dos quiebres de línea.
    17. Escriba el siguiente texto en forma identada:
    ““La audiencia de Internet en la mayor parte de los países es masculina, incluyendo España, donde la audiencia es un 60% masculina y un 40% femenina,” dijo Richard Goosey, Director Internacional de Estadística y Análisis de NetRatings“

    Monografias.com

    Ejercicio de utilización de Tags Básicos
    18. Agregue dos quiebres de línea.
    19. Agregue un título en en formato h3, que diga “Empresas del rubro de estudios de Audiencia”
    20. Agregue dos quiebres de línea.
    21. Escriba dos elementos de un Lista, que son “Interating”,”Cerifica”, ambos en estilo italic.
    22. Guarde los cambios.
    23. Visualice en el browser.

    Monografias.com

    Imágenes y sus atributos
    Se utiliza el tag < img>.
    Los atributos de este Tag son:
    Border: numérico, indica si la imagen tiene contorno.
    Width : Define el ancho de una imagen.
    Height: Define el alto de una imagen.
    Alt : Texto alternativo que se mostrará en caso de que la imagen no pueda ser mostrada.

    Monografias.com

    Ejemplo de utilización del Tag Imagen
    1. Vaya al Notepad.
    2. Abra el archivo ejemplo.htm
    3. Guardar como imagen.htm
    4. Cambie el título por “Uso de Imagen”
    5. Agregue el Meta Tags Autor y escriba su nombre.
    6. Cambie el Meta Tags description por “Uso de el tag Imagen”
    7. Cambie el Meta Tags Keywords con los valores “Imágenes”. Guarde los cambios.

    Monografias.com

    Ejemplo de utilización del Tag Imagen
    8. En la sección del body, escriba como título en formato < h1> “Bienvenido a Java” y que este se encuentre centrado.
    9. Agregue dos quiebres de línea.
    10. Guarde los cambios.
    11. Agregue la Imagen penduke.gif especificando width con 164 y height en 115 y alt como “Logo de java sun” y el src en ruta local penduke.gif”. Si se utiliza un servidor web, entonces debe hacerse referencia al directorio virtual y con “/”.
    12. Guarde los cambios y Visualice en el Browser.

    Monografias.com

    Consideraciones de precarga de Imagen
    Recuerde que cada vez que en documento se encuentra un tag img, se abre una nueva conexión al servidor para traer la imagen.
    El tamaño incide en el tiempo de descarga de una página. Utilice formatos que permitan el entrelazado.
    Utilice precarga de imágenes, para almacenarlas en el cache del browser.

    Monografias.com

    Links y sus Atributos
    ¿Qué es un Hipervínculo?
    Es una referencia a un archivo que se encuentra ya sea en el mismo sitio o en otro.
    Un link interno es un archivo que se encuentra dentro del sitio.
    Un link externo es un archivo que se encuentra fuera del sitio.

    Monografias.com

    Consideraciones de hipervínculos Externos
    Los links externos deben abrirse en ventanas independientes(pop up).

    En algunos casos es necesario pedir autorización de las empresas para su utilización.

    Monografias.com

    Links y Atributos
    Se define a través del Tag < a>..< /a>(Anchor)
    Dentro de los tags comienzo y fin se escribe el texto a desplegar. Ejemplo:
    < a href=“#”>Postulaciones< /a>a Informática.
    El usuario ve Postulaciones a Informática
    Los atributos de este Tag son:
    Href: este atributo define una url, nombre de archivo o bien javascript a ejecutar. También puede ir # que involucra que permanecer en la misma página.
    Target: donde se ejecutará la acción del link.

    Monografias.com

    Links y Atributos
    Se pueden definir links dentro de un mismo documento. Ejemplo < a name=“top”>< /a>
    Luego un link puede hacer referencia a esa zona del documento como:
    < a href=“#top”>Ir al principio< /a>

    Monografias.com

    Ejemplo de utilización de Tag a
    1.Vaya al notepad.
    2.Abra el archivo imagen.htm
    3.Guarde el archivo como imagenlink.htm
    4.Cambie el Meta Tag Description por “Utilización de Links en un documento”
    5.Cambie el Meta Tag Keywords por “link, imágenes”
    6. Cambie el tag title por “Uso de Link”
    7.Guarde los cambios.

    Monografias.com

    Ejemplo de utilización de Tag a
    6.Posicionese en la sección body, y después del tag < img> agregue dos quiebres de líneas.
    7.Agregue un título en formato h2, centrado, que diga “Links de Interés”
    8. Agregue un quiebre de línea. Guarde los cambios.
    9. Agregue un elemento a una lista que diga Sitio Oficial de Java y que al momento de presionar Java lleve al sitio http://www.java.sun.com.
    10. Agregue otro elemento a la lista que diga Tutoriales de Java Gratis y que al momento de presionar Tutoriales lleve al sitio http://programacion.com/java/. Guarde los cambios.

    Monografias.com

    Ejemplo de utilización de Tag a
    11. Agregue otro elemento a la lista que diga “Introducción a la programación orientada al objeto y que cuando se presione cualquier parte del texto lleve a la página http://www.elcampusdigital.com/Ubicaciones/Eidos/Cursos/java/tema1/D369854L.html.
    Guarde los cambios y visualice en el browser.

    Monografias.com

    Links

    Tutoriales Varios
    http://www.devguru.com
    http://www.w3schools.com
    http://www.zvon.org
    http://www.programacion.com/html/tutorial.curso.1.html
    Historia del HTML
    http://www.cneq.unam.mx/cursos/paginas/06html.html
    http://www.ramon.org/xml/articulos/intro_xhtml-xhtml.htm

    Nota al lector: es posible que esta página no contenga todos los componentes del trabajo original (pies de página, avanzadas formulas matemáticas, esquemas o tablas complejas, etc.). Recuerde que para ver el trabajo en su versión original completa, puede descargarlo desde el menú superior.

    Todos los documentos disponibles en este sitio expresan los puntos de vista de sus respectivos autores y no de Monografias.com. El objetivo de Monografias.com es poner el conocimiento a disposición de toda su comunidad. Queda bajo la responsabilidad de cada lector el eventual uso que se le de a esta información. Asimismo, es obligatoria la cita del autor del contenido y de Monografias.com como fuentes de información.

    Categorias
    Newsletter