Presentación de HTML
               López Claro Martha Angélica

           Modulo: Manejo de aplicaciones por
                    medios digitales

           Profesor: Hernández Ramírez José
                         Abraham

          Carrera: profesional Técnico Bachiller
                        en Informática

                             Grupo: 208
Índice




Datos…………………………………………… ………………………………………………………………. pág. 1
Índice…………………………………………………………………………………………………………….. pág. 2
Historia de HTML ……………………………………………………………………………….. pág. 3
Creación de HTML………………………................................................................. pág. 4
Estructura de HTML………………………………………………………………….………….. pág. 5
Etiquetas de HTML………………………………………………………………………………. pág. 6
Color es imágenes de fondo en HTML……………… ………….………… pág. 7
script HTML………………………………………………………………………………………………. …. pág. 8
Hojas de estilo……………………………........................................................ ………………...pág. 9
HISTORIA HTML

      •   El HTML no es más que una aplicación del SGML
          (Standard Generalized Markup Language), un sistema
          para definir tipos de documentos estructurados y
          lenguajes de marcas para representar esos mismos
          documentos. El término HTML se suele referir a ambas
          cosas, tanto al tipo de documento como al lenguaje de
          marcas.
          A medida que nos afianzamos en el manejo de Internet
          cada uno de nosotros pasa por tres etapas diferentes:
          Al principio solamente conocemos unas pocas páginas,
          luego nos damos cuenta que existen buscadores lo cual
          lo hace más interesante y por último nos damos cuenta
          que en Internet no solamente se puede ver la
          información sino que también se puede publicar. ¿y qué
          otra manera más fácil y más sencilla? Si Internet tiene
          acceso a todos los rincones del mundo.
          Para que varias personas se comuniquen es necesarios
          que éstas hablen un mismo idioma. El lenguaje que
          utilizan las computadoras que están conectadas a
          Internet es HTML. A través de esta monografía
          explicaremos que es HTML, sus orígenes y el proceso
          de creación de una página web
CREACION DE HTML
        •   El entorno para trabajar HTML es simplemente
            un procesador de texto, como el que ofrecen los
            sistemas operativos Windows (Bloc de notas),
            UNIX (el editor vi o ed.) o el que ofrece MS
            Office (Word). El conjunto de etiquetas que se
            creen, se deben guardar con la extensión .HTML
            o .HTML
            Estos documentos pueden ser mostrados por los
            visores o "browsers" de paginas Web en
            Internet, como Netscape Navegador, Mosaico,
            Opera y Microsoft Internet Explorer.
            También existe el HTML Dinámico (DHTML), que
            es una mejora de Microsoft de la versión 4.0 de
            HTML que le permite crear efectos especiales
            como, por ejemplo, texto que vuela desde la
            página palabra por palabra o efectos de
            transición al estilo de anuncio publicitario
            giratorio entre página y página
        •   Para crear una página web se pueden utilizar varios
            programas especializados en esto, como por ejemplo,
            el Microsoft Front Page o el Macromedia
            Dreamweaver 3. Otra forma de diseñar un archivo
            .HTML, es copiar todo en el Bloc de Notas del
            Windows
ESTRUCTURAS DE HTML
          •   Estructura de los documentos de HTML
              Si se tiene en cuenta el contenido del documento,
              todos los documentos de HTML bien escritos
              comparten una estructura en común. Un documento
              de HTML empieza con la etiqueta <HTML>, que es la
              que encerrará el documento actual. Contiene dos
              secciones primordiales: la cabecera y el cuerpo
              encerradas respectivamente por los elementos
              <HEAD> cabeza y <BODY> cuerpo.
              La cabecera puede contener información y siempre
              contiene el titulo del documento encerrado por el
              elemento <TITLE>.
              En el cuerpo se encuentra todo el contenido del
              documento, ya sea, texto, imágenes, sonidos,
              hipervínculos, etc.
              Un documento escrito en HTML contiene las
              siguientes etiquetas en el siguiente orden:
          •   Ejemplo:
              <HTML>
              <HEAD>
              <TITLE> Título de mi página de Internet </TITLE>
              </HEAD>
              <BODY>
              <H1> <CENTER> Primera pagina </CENTER> </H1>
              <HR>
              </BODY>
              </HTML>
ETIQUETAS DE HTML
        •   . En documento HTML será un fichero texto con
            etiquetas que variarán la forma de su
            presentación.
        •       Una etiqueta será un texto incluido entre los
            símbolos menor que < y mayor que >.. El texto
            incluido dentro de los símbolos será explicativo
            de la utilidad de la etiqueta. Por ejemplo:
        •   <B> Letra Negrita, del inglés Bold (negrita).
            <TABLE> Definirá una tabla. <IMG> Inclusión
            de una IMaGen.
        •       Existe normalmente una etiqueta de inicio y
            otra de fin, la de fin contendrá el mismo texto
            que la de inicio añadiéndole al principio una
            barra inclinada /. El efecto que define la
            etiqueta tendrá validez para todo lo que este
            incluido entre las etiquetas de inicio y fin, ya
            sea texto plano o otras etiquetas HTML.
Color es imágenes de fondo en HTML


                  •   Para insertar una imagen como fondo de la página
                      utilizamos Background dentro de <BODY>:
                  •   <BODY background=”imagen.jpg”>
                  •   insertaría “imagen.jpg” como fondo de la página.
                      Normalmente, las imágenes que se utilizan como
                      fondo son texturas pequeñas que, al repetirse varias
                      veces, da la sensación de tener una imagen muy
                      grande.
                  •   Ten en cuenta el tamaño de la imagen de fondo, ya
                      que, si es demasiado grande, podría hacer que la
                      carga de la página se hiciera muy lenta.
                  •   Si en lugar de una imagen de fondo quieres
                      simplemente establecer un color liso lo puedes hacer
                      utilizando bgcolor:
                  •   <BODY bgcolor=red>
                  •   haría que el color de fondo de la página fuera rojo.
                  •   Evidentemente si estableces un color de fondo y,
                      además, una imagen, la imagen tapará
                      completamente al color. No tiene sentido utilizar
                      conjuntamente bgcolor y background
Scripts HTML
     •   Se debe especificar el atributo type de todos los
         elementos SCRIPT de un documento. El valor del
         atributo type de un elemento SCRIPT prevalece
         sobre el languaje de scripts por defecto de ese
         elemento.
     •   En este ejemplo, declaramos que el lenguaje de
         scripts por defecto es "text/tcl". Incluimos un
         SCRIPT en la cabecera, cuyo script se localiza en
         un fichero externo y que está en el lenguaje de
         scripts "text/vbscript". También incluimos un
         SCRIPT en el cuerpo, que contiene su propio script
         escrito en "text/javascript".
     •   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
         4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
         <HTML> <HEAD> <TITLE>Un documento con
         SCRIPT</TITLE> <META http-equiv="Content-
         Script-Type" content="text/tcl"> <SCRIPT
         type="text/vbscript"
         src="http://algunsitio.com/progs/vbcalc">
         </SCRIPT> </HEAD> <BODY> <SCRIPT
         type="text/javascript"> ...algo en JavaScript...
         </SCRIPT> </BODY> </HTML>
HOJAS DE ESTILO

        •   Las hojas de estilo representan un avance importante para
            los diseñadores de páginas web, al darles un mayor rango
            de posibilidades para mejorar la apariencia de sus páginas.
        •   La utilización de extensiones propietarias del HTML
        •   Conversión del texto en imágenes
        •   Utilización de imágenes para controlar el espacio en blanco
        •   La utilización de tablas para la organización de las páginas
        •   Escribir programas en lugar de usar HTML
        •   Estas técnicas incrementan considerablemente la
            complejidad de las páginas web, ofrecen una flexibilidad
            limitada, sufren de problemas de interoperabilidad, y crean
            dificultades para las personas con discapacidades.
        •   Las hojas de estilo resuelven estos problemas al mismo
            tiempo que reemplazan al limitado rango de mecanismos de
            presentación del HTML. Con las hojas de estilo es más fácil
            especificar la cantidad de espacio entre líneas, el sangrado
            de las líneas, los colores a utilizar para el texto y el fondo, el
            tamaño y estilo de las fuentes, y otros muchos detalles.

Presentación

  • 1.
    Presentación de HTML López Claro Martha Angélica Modulo: Manejo de aplicaciones por medios digitales Profesor: Hernández Ramírez José Abraham Carrera: profesional Técnico Bachiller en Informática Grupo: 208
  • 2.
    Índice Datos…………………………………………… ………………………………………………………………. pág.1 Índice…………………………………………………………………………………………………………….. pág. 2 Historia de HTML ……………………………………………………………………………….. pág. 3 Creación de HTML………………………................................................................. pág. 4 Estructura de HTML………………………………………………………………….………….. pág. 5 Etiquetas de HTML………………………………………………………………………………. pág. 6 Color es imágenes de fondo en HTML……………… ………….………… pág. 7 script HTML………………………………………………………………………………………………. …. pág. 8 Hojas de estilo……………………………........................................................ ………………...pág. 9
  • 3.
    HISTORIA HTML • El HTML no es más que una aplicación del SGML (Standard Generalized Markup Language), un sistema para definir tipos de documentos estructurados y lenguajes de marcas para representar esos mismos documentos. El término HTML se suele referir a ambas cosas, tanto al tipo de documento como al lenguaje de marcas. A medida que nos afianzamos en el manejo de Internet cada uno de nosotros pasa por tres etapas diferentes: Al principio solamente conocemos unas pocas páginas, luego nos damos cuenta que existen buscadores lo cual lo hace más interesante y por último nos damos cuenta que en Internet no solamente se puede ver la información sino que también se puede publicar. ¿y qué otra manera más fácil y más sencilla? Si Internet tiene acceso a todos los rincones del mundo. Para que varias personas se comuniquen es necesarios que éstas hablen un mismo idioma. El lenguaje que utilizan las computadoras que están conectadas a Internet es HTML. A través de esta monografía explicaremos que es HTML, sus orígenes y el proceso de creación de una página web
  • 4.
    CREACION DE HTML • El entorno para trabajar HTML es simplemente un procesador de texto, como el que ofrecen los sistemas operativos Windows (Bloc de notas), UNIX (el editor vi o ed.) o el que ofrece MS Office (Word). El conjunto de etiquetas que se creen, se deben guardar con la extensión .HTML o .HTML Estos documentos pueden ser mostrados por los visores o "browsers" de paginas Web en Internet, como Netscape Navegador, Mosaico, Opera y Microsoft Internet Explorer. También existe el HTML Dinámico (DHTML), que es una mejora de Microsoft de la versión 4.0 de HTML que le permite crear efectos especiales como, por ejemplo, texto que vuela desde la página palabra por palabra o efectos de transición al estilo de anuncio publicitario giratorio entre página y página • Para crear una página web se pueden utilizar varios programas especializados en esto, como por ejemplo, el Microsoft Front Page o el Macromedia Dreamweaver 3. Otra forma de diseñar un archivo .HTML, es copiar todo en el Bloc de Notas del Windows
  • 5.
    ESTRUCTURAS DE HTML • Estructura de los documentos de HTML Si se tiene en cuenta el contenido del documento, todos los documentos de HTML bien escritos comparten una estructura en común. Un documento de HTML empieza con la etiqueta <HTML>, que es la que encerrará el documento actual. Contiene dos secciones primordiales: la cabecera y el cuerpo encerradas respectivamente por los elementos <HEAD> cabeza y <BODY> cuerpo. La cabecera puede contener información y siempre contiene el titulo del documento encerrado por el elemento <TITLE>. En el cuerpo se encuentra todo el contenido del documento, ya sea, texto, imágenes, sonidos, hipervínculos, etc. Un documento escrito en HTML contiene las siguientes etiquetas en el siguiente orden: • Ejemplo: <HTML> <HEAD> <TITLE> Título de mi página de Internet </TITLE> </HEAD> <BODY> <H1> <CENTER> Primera pagina </CENTER> </H1> <HR> </BODY> </HTML>
  • 6.
    ETIQUETAS DE HTML • . En documento HTML será un fichero texto con etiquetas que variarán la forma de su presentación. • Una etiqueta será un texto incluido entre los símbolos menor que < y mayor que >.. El texto incluido dentro de los símbolos será explicativo de la utilidad de la etiqueta. Por ejemplo: • <B> Letra Negrita, del inglés Bold (negrita). <TABLE> Definirá una tabla. <IMG> Inclusión de una IMaGen. • Existe normalmente una etiqueta de inicio y otra de fin, la de fin contendrá el mismo texto que la de inicio añadiéndole al principio una barra inclinada /. El efecto que define la etiqueta tendrá validez para todo lo que este incluido entre las etiquetas de inicio y fin, ya sea texto plano o otras etiquetas HTML.
  • 7.
    Color es imágenesde fondo en HTML • Para insertar una imagen como fondo de la página utilizamos Background dentro de <BODY>: • <BODY background=”imagen.jpg”> • insertaría “imagen.jpg” como fondo de la página. Normalmente, las imágenes que se utilizan como fondo son texturas pequeñas que, al repetirse varias veces, da la sensación de tener una imagen muy grande. • Ten en cuenta el tamaño de la imagen de fondo, ya que, si es demasiado grande, podría hacer que la carga de la página se hiciera muy lenta. • Si en lugar de una imagen de fondo quieres simplemente establecer un color liso lo puedes hacer utilizando bgcolor: • <BODY bgcolor=red> • haría que el color de fondo de la página fuera rojo. • Evidentemente si estableces un color de fondo y, además, una imagen, la imagen tapará completamente al color. No tiene sentido utilizar conjuntamente bgcolor y background
  • 8.
    Scripts HTML • Se debe especificar el atributo type de todos los elementos SCRIPT de un documento. El valor del atributo type de un elemento SCRIPT prevalece sobre el languaje de scripts por defecto de ese elemento. • En este ejemplo, declaramos que el lenguaje de scripts por defecto es "text/tcl". Incluimos un SCRIPT en la cabecera, cuyo script se localiza en un fichero externo y que está en el lenguaje de scripts "text/vbscript". También incluimos un SCRIPT en el cuerpo, que contiene su propio script escrito en "text/javascript". • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>Un documento con SCRIPT</TITLE> <META http-equiv="Content- Script-Type" content="text/tcl"> <SCRIPT type="text/vbscript" src="http://algunsitio.com/progs/vbcalc"> </SCRIPT> </HEAD> <BODY> <SCRIPT type="text/javascript"> ...algo en JavaScript... </SCRIPT> </BODY> </HTML>
  • 9.
    HOJAS DE ESTILO • Las hojas de estilo representan un avance importante para los diseñadores de páginas web, al darles un mayor rango de posibilidades para mejorar la apariencia de sus páginas. • La utilización de extensiones propietarias del HTML • Conversión del texto en imágenes • Utilización de imágenes para controlar el espacio en blanco • La utilización de tablas para la organización de las páginas • Escribir programas en lugar de usar HTML • Estas técnicas incrementan considerablemente la complejidad de las páginas web, ofrecen una flexibilidad limitada, sufren de problemas de interoperabilidad, y crean dificultades para las personas con discapacidades. • Las hojas de estilo resuelven estos problemas al mismo tiempo que reemplazan al limitado rango de mecanismos de presentación del HTML. Con las hojas de estilo es más fácil especificar la cantidad de espacio entre líneas, el sangrado de las líneas, los colores a utilizar para el texto y el fondo, el tamaño y estilo de las fuentes, y otros muchos detalles.