SlideShare una empresa de Scribd logo
1 de 8
1 Actividad

     Nombre: Kevin Eduardo Ruiz Portilla Curso: 905



         Qué es HTML

  El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben
  las páginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que
   permite escribir texto de forma estructurada, y que está compuesto por
  etiquetas, que marcan el inicio y el fin de cada elemento del documento.

      Un documento hipertexto no sólo se compone de texto, puede contener
 imágenes, sonido, vídeos, etc., por lo que el resultado puede considerarse
                        como un documento multimedia.

   Los documentos HTML deben tener la extensión html o htm, para que puedan
 ser visualizados en los navegadores (programas que permiten visualizar las
                                páginas web).

      Los navegadores se encargan de interpretar el código HTML de los
  documentos, y de mostrar a los usuarios las páginas web resultantes del
                            código interpretado.

     Versiones de HTML

   En noviembre de 1995 se aprobó el estándar HTML 2.0. para la creación de
 páginas web. Se creó con objetivos divulgativos, orientado a la actividad
 académica, en el que el contenido de las páginas era más importante que el
                                  diseño.

   Pero esta versión del HTML carecía de muchas herramientas que permitieran
controlar el diseño de las páginas y añadir contenido multimedia, por lo que
   Netscape (cuyos navegadores eran los más utilizados por aquellos años)
     comenzó a incluir nuevas etiquetas que no existían en el estándar.

     El comité encargado de establecer los estándares dentro de Internet,
comenzó a trabajar en el borrador de una nueva versión de HTML, el borrador
                                de HTML 3.0.

      Pero este borrador resultó demasiado extenso, al intentar incluir
 numerosos nuevos atributos para etiquetas ya existentes, y la creación de
otras muchas etiquetas nuevas. Por ello, no fue bien aceptado por el mercado
   y varias compañías se unieron para formar un nuevo comité encargado de
    establecer los estándares del HTML. Este comité pasó a llamarse W3C.

     En enero de 1997 se aprobó el estándar HTML 3.2. Este nuevo estándar
 incluía las mejoras proporcionadas por los navegadores Internet Explorer y
 Netscape Navigator, que ya habían realizado extensiones sobre el estándar
                                  HTML 2.0.
En diciembre de 1997 se aprobó el estándar HTML 4.0, creado para
    estandarizar los marcos (frames), las hojas de estilo y los scripts.

            En septiembre de 2001 se aprobó el estándar HTML 4.01.

      Los navegadores.
       Compatibilidad

     Como hemos dicho, el navegador instalado en el
 ordenador del usuario es el que interpreta el código
HTML de la página que visita por lo que a veces puede
ocurrir que dos usuarios visualicen la misma página de
 forma distinta porque tienen instalados navegadores
  distintos o incluso versiones distintas del mismo
                      navegador.

       Los navegadores de hoy en día pretenden ser
compatibles con la última versión de HTML. Es necesario
realizar extensiones de los navegadores para que puedan
       ser compatibles con esta última versión.

       Dos de los navegadores que continuamente están
realizando extensiones son Internet Explorer y Netscape
  Navigator, que realizan extensiones incluso antes de
 que se establezcan los estándares, intentando incluir
    las nuevas funciones incluidas en los borradores.

    Los navegadores tienen que ser compatibles con la
 última versión HTML para poder interpretar el mayor
    número posible de etiquetas. Si un navegador no
   reconoce una etiqueta, la ignora y el efecto que
pretendía la etiqueta no queda reflejado en la página.

  Para realizar las extensiones de estos navegadores se
añaden nuevos atributos a las etiquetas ya existentes,
             o se añaden nuevas etiquetas.


   Como resultado a estas extensiones, habrán páginas cuyo código podrá ser
interpretado completamente por todos los navegadores, mientras que otras, al
 incluir nuevos atributos o etiquetas del borrador de la última versión de
 HTML, solo podrán ser interpretadas en su totalidad en los navegadores más
                                actualizados.

  En este último caso también puede ocurrir que alguna etiqueta de la página
solamente pueda ser interpretada por un navegador concreto, y otra etiqueta
 por un navegador diferente al anterior, por lo que nunca sería visualizada
                   en su totalidad por ningún navegador.

    Uno de los retos de los diseñadores de páginas web es hacer las páginas
 más atractivas utilizando toda la potencia del lenguaje HTML pero teniendo
 en cuentas estos problemas de compatibilidades para que el mayor número de
           internautas vean sus páginas tal como las ha diseñado.
Navegadores más utilizados

                            Internet Explorer




Se dice que muchos de los usuarios que usan Internet Explorer - el navegador más
   popular del mundo - lo hacen porque viene integrado en el Sistema Operativo
    Microsoft Windows y no se aventuran a probar otro, de hecho es objeto de
constantes críticas por su limitado apoyo a estándares web, pero sobre todo por
     sus fallos en la seguridad, mientras que algunas de sus ventajas son la
  posibilidad de abrir varias pestañas en la misma ventana y las mejoras en su
   última versión (IE8) en el soporte de Java script asi como de rendimiento.

                             Mozilla Firefox




  Mozilla Firefox, el segundo navegador más usado, es descendiente de Mozilla
Application Suite y a su vez de Netscape. Su motor de renderizado es Gecko, uno
de los más potentes y versátiles. Al ser de código libre, tiene una comunidad de
desarrolladores para personalizarlo y añadirle extensiones. Es elogiado sobre
 todo por su seguridad a través de los sistemas Sandbox, ssl/tls, y protección
  antiphishing, antimalware e integración con el antivirus. Otras ventajas que
destacan son su rapidez, multiplataforma, navegación por pestañas, bloqueador de
ventanas emergentes, personalización con las extensiones, temas y skins, gestor
                de descargas y soporte para motores de búsqueda.

                                   Safari




  El tercer navegador más usado es Safari, integrado en el mac OS X y también
disponible en versiones ejecutables para Microsoft Windows. Con un alto nivel en
  el cumplimiento de estándares web destacan también de Safari su interfaz de
       navegación por pestañas, bloqueo de ventanas emergentes, organizada
     administración de favoritos, corrección ortográfica, integración con el
   reproductor multimedia QuickTime y manejo de contraseñas integrado bajo el
sistema Keychain. Safari pasa el test Acid 3 - que comprueba el cumplimiento de
                     los estándares del W3 - con el 100/100.

                                    Opera
Opera, definido por muchos como el navegador más completo es también reconocido
 por su gran velocidad y un sencillo gestor de descargas, así como su seguridad
con bloqueo de publicidad, bloqueo ventanas emergentes, protección anti malware,
 y protocolo de seguridad EV SSL, además de navegación por pestañas, soporte de
       estándares (especialmente CSS), soporte para motores de búsqueda,
 personalización de skins y barras, y multiplataforma. Opera es también popular
  en dispositivos como teléfonos celulares de última generación y como Safari,
                      supera al 100 por cien el test Acid3.

Konqueror, de código abierto y parte del proyecto KDE compite con Mozilla en el
 mercado en sistemas del tipo Unix, y Google Chrome destaca por su sistema de
             navegación por pestañas independientes y simplicidad.


              Editores

     Un editor es un programa que nos permiten redactar documentos. Hoy en día
    existen un gran número de editores que permiten crear páginas web sin la
     necesidad de escribir ni una sola línea de código HTML. Estos editores
   disponen de un entorno visual, y generan automáticamente el código de las
       páginas. Al poder ver en todo momento cómo quedará la página en el
  navegador, se facilita la creación de las páginas, y el uso de menús permite
                                 ganar rapidez.

       Estos editores visuales pueden generar en ocasiones código basura, es
     decir, código que no sirve para nada, en otras ocasiones puede ser más
  efectivo corregir directamente el código por lo que resulta necesario saber
              HTML para poder depurar el código de nuestra páginas.


     Algunos de los editores visuales con los
      que podrás crear tus páginas web son
        Macromedia Dreamweaver, Microsoft
      Frontpage, Adobe Pagemill, NetObjects
     Fusion, CutePage, HotDog Proffesional,
   Netscape Composer y Arachnophilia, de los
    cuales algunos tienen la ventaja de ser
                   gratuitos.

     En aula Clic puedes encontrar los cursos
     de Macromedia Dreamweaver y Microsoft
   Frontpage, dos de los editores más usados
                  hoy en día.
Es aconsejable comenzar utilizando una
 herramienta lo más sencilla posible, para
    tener que insertar nosotros mismos el
  código HTML. Esto permite familiarizarse
 con el lenguaje, para poder utilizar algún
 editor visual posteriormente, y depurar el
       código cuando fuera necesario.




    Para crear páginas web escribiendo
directamente el código HTML puedes utilizar

 la herramienta Wordpad o el Bloc de notas

         que proporciona Windows.


 A lo largo de este curso vamos a trabajar con el Bloc de notas para crear
  nuestras páginas, ya que se trata de un editor de textos muy sencillo de
     manejar, que nos permitirá crear páginas a través del código HTML.


     Si no sabes cómo trabajar con el Bloc de notas, te lo explicamos aquí.


   Cuando realices los ejercicios puedes compaginar dos sesiones de la forma
                           que te explicamos aquí.

            Etiquetas
Las etiquetas o marcas delimitan cada uno de los elementos que componen un
documento HTML. Existen dos tipos de etiquetas, la de comienzo de elemento y
                       la de fin o cierre de elemento.

    La etiqueta de comienzo está delimitada por los caracteres < y >. Está
compuesta por el identificador o nombre de la etiqueta, y puede contener una
 serie de atributos opcionales que permiten añadir ciertas propiedades. Su
            sintaxis es: <identificador atributo1 atributo2 ...>

  Los atributos de la etiqueta de comienzo siguen una sintaxis predefinida y
      pueden tomar cualquier valor propio del usuario, o valores HTML
                               predefinidos.

     La etiqueta de final está delimitada por los caracteres </ y >. Está
   compuesta por el identificador o nombre de la etiqueta, y no contiene
                atributos. Su sintaxis es: </identificador>

  Cada uno de los elementos de la página se encontrará entre una etiqueta de
  comienzo y su correspondiente etiqueta de cierre, a excepción de algunos
  elementos que no necesitan etiqueta de cierre. También es posible anidar
etiquetas, es decir, insertar etiquetas entre otras etiquetas de comienzo y
                                 de cierre.

  A continuación tenemos un ejemplo en el que tenemos la etiqueta <font...>
                   anidada dentro de la etiqueta <p..>.:

    <p align="center"><font color="#993366" size="4" face="Comic Sans MS,
      Arial, MS Sans Serif">Bienvenidos a www.aulaclic.com</font></p>

             Este código daría como resultado el siguiente texto:

                        Bienvenidos a www.aulaclic.com

     Es importante anidar bien las etiquetas, las etiquetas no se pueden
'cruzar', en nuestro ejemplo hemos empezado por la etiqueta <p..>, antes de
cerrar esta etiqueta hemos puesto la <font..> por lo que antes de cerrar la
       etiqueta <p..> debemos cerrar la etiqueta etiqueta <font..>.

     Mi primera página
Lo primero que tienes que hacer es abrir el Bloc de notas. Para
 abrirlo, puedes dirigirte al menú Inicio, Programas, Accesorios,
                       opción Bloc de notas.

     Seguidamente introduce, en el documento en blanco, el texto
                            siguiente:

                               <html>
                               <head>
                 <title>MI PRIMERA PAGINA</title>
                              </head>
                     <body bgcolor="#FFCC99">
<font color="#CC3300" size="5">Hola, estoy haciendo pruebas.</font>
                              </body>
                              </html>

       Guarda el documento con la extensión htm, con el nombre
 miprimpag.htm. Puedes guardarlo a través del menú Archivo, opción
                              Guardar.

     Pulsando dos veces sobre el icono del archivo miprimpag.htm,
  éste debería abrirse automáticamente en el navegador que tengas
                     instalado en tu ordenador.

    El navegador deberá mostrar una página como la de la derecha.

       Como puedes ver, la página resultante es una página que
                solamente tiene una línea de texto.




     Si observas la barra de título del navegador, verás que el título de la
   página es MI PRIMERA PAGINA. Este título ha sido establecido por la línea
                       <title>MI PRIMERA PAGINA</title>.

      El color de fondo de la página ha sido establecido por la línea <body
                              bgcolor="#FFCC99">.

    El texto Hola, estoy haciendo pruebas. se ha insertado a través de línea
     <font color="#CC3300" size="5">Hola, estoy haciendo pruebas.</font>.

Más contenido relacionado

La actualidad más candente

La actualidad más candente (14)

Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Colegio nacional nicolás esguerra
Colegio nacional nicolás esguerraColegio nacional nicolás esguerra
Colegio nacional nicolás esguerra
 
Colegio nicolás esguerra
Colegio nicolás esguerraColegio nicolás esguerra
Colegio nicolás esguerra
 
El world wide web
El world wide webEl world wide web
El world wide web
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
taller HTML
taller HTML taller HTML
taller HTML
 
Taller HTML
Taller HTMLTaller HTML
Taller HTML
 
Navegadores
NavegadoresNavegadores
Navegadores
 
Trabajo de computacion caractersiticas
Trabajo de computacion caractersiticasTrabajo de computacion caractersiticas
Trabajo de computacion caractersiticas
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Tema 1. aplicaciones web
Tema 1. aplicaciones webTema 1. aplicaciones web
Tema 1. aplicaciones web
 
Unidad 1
Unidad 1Unidad 1
Unidad 1
 
Arquitectura web 2
Arquitectura web 2Arquitectura web 2
Arquitectura web 2
 

Destacado

Clase 01 estructura de directorios
Clase 01 estructura de directoriosClase 01 estructura de directorios
Clase 01 estructura de directoriosSantiago Gonzales
 
Linea del tiempo internet
Linea del tiempo internetLinea del tiempo internet
Linea del tiempo internetNicteL6
 
Gestores de Arranque Grub
Gestores de Arranque GrubGestores de Arranque Grub
Gestores de Arranque Grubacpl92
 
Diapositivas sobre el uso del convertidor de YouTube.
Diapositivas sobre el uso del convertidor de YouTube.Diapositivas sobre el uso del convertidor de YouTube.
Diapositivas sobre el uso del convertidor de YouTube.MajoBermejoG
 
Competencias Básicas y Capacidades-Internet virtual 2008
Competencias Básicas y Capacidades-Internet virtual 2008Competencias Básicas y Capacidades-Internet virtual 2008
Competencias Básicas y Capacidades-Internet virtual 2008Irene Florencia Agudo del Campo
 
Como poner un power point en un blog
Como poner un power point en un blogComo poner un power point en un blog
Como poner un power point en un blogramonrivelli
 
Herramientas web 2.0
Herramientas web 2.0Herramientas web 2.0
Herramientas web 2.0rutha1997
 
Dn11 u3 a5_vbol
Dn11 u3 a5_vbolDn11 u3 a5_vbol
Dn11 u3 a5_vbolvrisa1992
 
Como crear un blog
Como crear un blogComo crear un blog
Como crear un blogrojete
 
Ph bioquimica
Ph bioquimicaPh bioquimica
Ph bioquimicaEdu Ajila
 
3 planeacion estrategica
3 planeacion estrategica3 planeacion estrategica
3 planeacion estrategicaSantiago Acurio
 
MetodologíA De Estudio
MetodologíA De EstudioMetodologíA De Estudio
MetodologíA De Estudiojtonni
 
Transformacion por accion
Transformacion por accionTransformacion por accion
Transformacion por accionMindProject
 

Destacado (20)

Yaresi Herrera
Yaresi HerreraYaresi Herrera
Yaresi Herrera
 
Clase 01 estructura de directorios
Clase 01 estructura de directoriosClase 01 estructura de directorios
Clase 01 estructura de directorios
 
Ley1014de2006
Ley1014de2006Ley1014de2006
Ley1014de2006
 
Taller31
Taller31Taller31
Taller31
 
Linea del tiempo internet
Linea del tiempo internetLinea del tiempo internet
Linea del tiempo internet
 
Gestores de Arranque Grub
Gestores de Arranque GrubGestores de Arranque Grub
Gestores de Arranque Grub
 
Diapositivas sobre el uso del convertidor de YouTube.
Diapositivas sobre el uso del convertidor de YouTube.Diapositivas sobre el uso del convertidor de YouTube.
Diapositivas sobre el uso del convertidor de YouTube.
 
Competencias Básicas y Capacidades-Internet virtual 2008
Competencias Básicas y Capacidades-Internet virtual 2008Competencias Básicas y Capacidades-Internet virtual 2008
Competencias Básicas y Capacidades-Internet virtual 2008
 
Como poner un power point en un blog
Como poner un power point en un blogComo poner un power point en un blog
Como poner un power point en un blog
 
Herramientas web 2.0
Herramientas web 2.0Herramientas web 2.0
Herramientas web 2.0
 
Dn11 u3 a5_vbol
Dn11 u3 a5_vbolDn11 u3 a5_vbol
Dn11 u3 a5_vbol
 
Como crear un blog
Como crear un blogComo crear un blog
Como crear un blog
 
Esquema resumen
Esquema resumenEsquema resumen
Esquema resumen
 
Ph bioquimica
Ph bioquimicaPh bioquimica
Ph bioquimica
 
HSE24 Wedding_2012.pdf
HSE24 Wedding_2012.pdfHSE24 Wedding_2012.pdf
HSE24 Wedding_2012.pdf
 
3 planeacion estrategica
3 planeacion estrategica3 planeacion estrategica
3 planeacion estrategica
 
Frases h y s y su significado
Frases h y s y su significadoFrases h y s y su significado
Frases h y s y su significado
 
MetodologíA De Estudio
MetodologíA De EstudioMetodologíA De Estudio
MetodologíA De Estudio
 
Navegadores web
Navegadores webNavegadores web
Navegadores web
 
Transformacion por accion
Transformacion por accionTransformacion por accion
Transformacion por accion
 

Similar a Introducción a html (20)

conceptos basicos HTML
conceptos basicos HTMLconceptos basicos HTML
conceptos basicos HTML
 
Nombres
NombresNombres
Nombres
 
primera c
primera cprimera c
primera c
 
Nombres
NombresNombres
Nombres
 
Informatica 3
Informatica 3Informatica 3
Informatica 3
 
Html
HtmlHtml
Html
 
Colegio nacional nicolas esguerra html
Colegio nacional nicolas esguerra htmlColegio nacional nicolas esguerra html
Colegio nacional nicolas esguerra html
 
Colegio nacional nicolás esguerra
Colegio nacional nicolás esguerraColegio nacional nicolás esguerra
Colegio nacional nicolás esguerra
 
Colegio nacional nicolás esguerra
Colegio nacional nicolás esguerraColegio nacional nicolás esguerra
Colegio nacional nicolás esguerra
 
Fundamentos de lenguaje html
Fundamentos de lenguaje htmlFundamentos de lenguaje html
Fundamentos de lenguaje html
 
Cb fs
Cb fsCb fs
Cb fs
 
Cb fs
Cb fsCb fs
Cb fs
 
Trabajo david rocha
Trabajo david rochaTrabajo david rocha
Trabajo david rocha
 
Trabajo david rocha 2
Trabajo david rocha 2Trabajo david rocha 2
Trabajo david rocha 2
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Juan pablo 903
Juan pablo 903Juan pablo 903
Juan pablo 903
 
Colegio nacional nicolas esgerra
Colegio nacional nicolas esgerraColegio nacional nicolas esgerra
Colegio nacional nicolas esgerra
 
Colegio nacional nicolas esgerra
Colegio nacional nicolas esgerraColegio nacional nicolas esgerra
Colegio nacional nicolas esgerra
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 

Más de kevinruiz97

Más de kevinruiz97 (8)

Actividad n. 2
Actividad n. 2Actividad n. 2
Actividad n. 2
 
Actividad n. 2
Actividad n. 2Actividad n. 2
Actividad n. 2
 
MI PRIMERA PAGINA WEB
MI PRIMERA PAGINA WEBMI PRIMERA PAGINA WEB
MI PRIMERA PAGINA WEB
 
Introducción a html
Introducción a htmlIntroducción a html
Introducción a html
 
Tablas clinica
Tablas clinicaTablas clinica
Tablas clinica
 
Tablas clinica
Tablas clinicaTablas clinica
Tablas clinica
 
Concesionario
ConcesionarioConcesionario
Concesionario
 
Museo virtual
Museo virtualMuseo virtual
Museo virtual
 

Último

cortes de luz abril 2024 en la provincia de tungurahua
cortes de luz abril 2024 en la provincia de tungurahuacortes de luz abril 2024 en la provincia de tungurahua
cortes de luz abril 2024 en la provincia de tungurahuaDANNYISAACCARVAJALGA
 
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptx
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptxLINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptx
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptxdanalikcruz2000
 
Clasificaciones, modalidades y tendencias de investigación educativa.
Clasificaciones, modalidades y tendencias de investigación educativa.Clasificaciones, modalidades y tendencias de investigación educativa.
Clasificaciones, modalidades y tendencias de investigación educativa.José Luis Palma
 
PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptx
PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptxPPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptx
PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptxOscarEduardoSanchezC
 
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptx
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptxSINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptx
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptxlclcarmen
 
texto argumentativo, ejemplos y ejercicios prácticos
texto argumentativo, ejemplos y ejercicios prácticostexto argumentativo, ejemplos y ejercicios prácticos
texto argumentativo, ejemplos y ejercicios prácticosisabeltrejoros
 
el CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyz
el CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyzel CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyz
el CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyzprofefilete
 
Herramientas de Inteligencia Artificial.pdf
Herramientas de Inteligencia Artificial.pdfHerramientas de Inteligencia Artificial.pdf
Herramientas de Inteligencia Artificial.pdfMARIAPAULAMAHECHAMOR
 
DE LAS OLIMPIADAS GRIEGAS A LAS DEL MUNDO MODERNO.ppt
DE LAS OLIMPIADAS GRIEGAS A LAS DEL MUNDO MODERNO.pptDE LAS OLIMPIADAS GRIEGAS A LAS DEL MUNDO MODERNO.ppt
DE LAS OLIMPIADAS GRIEGAS A LAS DEL MUNDO MODERNO.pptELENA GALLARDO PAÚLS
 
Historia y técnica del collage en el arte
Historia y técnica del collage en el arteHistoria y técnica del collage en el arte
Historia y técnica del collage en el arteRaquel Martín Contreras
 
Lecciones 04 Esc. Sabática. Defendamos la verdad
Lecciones 04 Esc. Sabática. Defendamos la verdadLecciones 04 Esc. Sabática. Defendamos la verdad
Lecciones 04 Esc. Sabática. Defendamos la verdadAlejandrino Halire Ccahuana
 
OLIMPIADA DEL CONOCIMIENTO INFANTIL 2024.pptx
OLIMPIADA DEL CONOCIMIENTO INFANTIL 2024.pptxOLIMPIADA DEL CONOCIMIENTO INFANTIL 2024.pptx
OLIMPIADA DEL CONOCIMIENTO INFANTIL 2024.pptxjosetrinidadchavez
 
2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdf2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdfBaker Publishing Company
 
Plan Año Escolar Año Escolar 2023-2024. MPPE
Plan Año Escolar Año Escolar 2023-2024. MPPEPlan Año Escolar Año Escolar 2023-2024. MPPE
Plan Año Escolar Año Escolar 2023-2024. MPPELaura Chacón
 
EXPECTATIVAS vs PERSPECTIVA en la vida.
EXPECTATIVAS vs PERSPECTIVA  en la vida.EXPECTATIVAS vs PERSPECTIVA  en la vida.
EXPECTATIVAS vs PERSPECTIVA en la vida.DaluiMonasterio
 
Movimientos Precursores de La Independencia en Venezuela
Movimientos Precursores de La Independencia en VenezuelaMovimientos Precursores de La Independencia en Venezuela
Movimientos Precursores de La Independencia en Venezuelacocuyelquemao
 
La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.amayarogel
 

Último (20)

cortes de luz abril 2024 en la provincia de tungurahua
cortes de luz abril 2024 en la provincia de tungurahuacortes de luz abril 2024 en la provincia de tungurahua
cortes de luz abril 2024 en la provincia de tungurahua
 
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptx
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptxLINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptx
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptx
 
Clasificaciones, modalidades y tendencias de investigación educativa.
Clasificaciones, modalidades y tendencias de investigación educativa.Clasificaciones, modalidades y tendencias de investigación educativa.
Clasificaciones, modalidades y tendencias de investigación educativa.
 
PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptx
PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptxPPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptx
PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptx
 
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptx
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptxSINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptx
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptx
 
Power Point: "Defendamos la verdad".pptx
Power Point: "Defendamos la verdad".pptxPower Point: "Defendamos la verdad".pptx
Power Point: "Defendamos la verdad".pptx
 
texto argumentativo, ejemplos y ejercicios prácticos
texto argumentativo, ejemplos y ejercicios prácticostexto argumentativo, ejemplos y ejercicios prácticos
texto argumentativo, ejemplos y ejercicios prácticos
 
el CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyz
el CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyzel CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyz
el CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyz
 
Herramientas de Inteligencia Artificial.pdf
Herramientas de Inteligencia Artificial.pdfHerramientas de Inteligencia Artificial.pdf
Herramientas de Inteligencia Artificial.pdf
 
DE LAS OLIMPIADAS GRIEGAS A LAS DEL MUNDO MODERNO.ppt
DE LAS OLIMPIADAS GRIEGAS A LAS DEL MUNDO MODERNO.pptDE LAS OLIMPIADAS GRIEGAS A LAS DEL MUNDO MODERNO.ppt
DE LAS OLIMPIADAS GRIEGAS A LAS DEL MUNDO MODERNO.ppt
 
Historia y técnica del collage en el arte
Historia y técnica del collage en el arteHistoria y técnica del collage en el arte
Historia y técnica del collage en el arte
 
Lecciones 04 Esc. Sabática. Defendamos la verdad
Lecciones 04 Esc. Sabática. Defendamos la verdadLecciones 04 Esc. Sabática. Defendamos la verdad
Lecciones 04 Esc. Sabática. Defendamos la verdad
 
La Trampa De La Felicidad. Russ-Harris.pdf
La Trampa De La Felicidad. Russ-Harris.pdfLa Trampa De La Felicidad. Russ-Harris.pdf
La Trampa De La Felicidad. Russ-Harris.pdf
 
OLIMPIADA DEL CONOCIMIENTO INFANTIL 2024.pptx
OLIMPIADA DEL CONOCIMIENTO INFANTIL 2024.pptxOLIMPIADA DEL CONOCIMIENTO INFANTIL 2024.pptx
OLIMPIADA DEL CONOCIMIENTO INFANTIL 2024.pptx
 
2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdf2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdf
 
Unidad 4 | Teorías de las Comunicación | MCDI
Unidad 4 | Teorías de las Comunicación | MCDIUnidad 4 | Teorías de las Comunicación | MCDI
Unidad 4 | Teorías de las Comunicación | MCDI
 
Plan Año Escolar Año Escolar 2023-2024. MPPE
Plan Año Escolar Año Escolar 2023-2024. MPPEPlan Año Escolar Año Escolar 2023-2024. MPPE
Plan Año Escolar Año Escolar 2023-2024. MPPE
 
EXPECTATIVAS vs PERSPECTIVA en la vida.
EXPECTATIVAS vs PERSPECTIVA  en la vida.EXPECTATIVAS vs PERSPECTIVA  en la vida.
EXPECTATIVAS vs PERSPECTIVA en la vida.
 
Movimientos Precursores de La Independencia en Venezuela
Movimientos Precursores de La Independencia en VenezuelaMovimientos Precursores de La Independencia en Venezuela
Movimientos Precursores de La Independencia en Venezuela
 
La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.
 

Introducción a html

  • 1. 1 Actividad Nombre: Kevin Eduardo Ruiz Portilla Curso: 905 Qué es HTML El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las páginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto de forma estructurada, y que está compuesto por etiquetas, que marcan el inicio y el fin de cada elemento del documento. Un documento hipertexto no sólo se compone de texto, puede contener imágenes, sonido, vídeos, etc., por lo que el resultado puede considerarse como un documento multimedia. Los documentos HTML deben tener la extensión html o htm, para que puedan ser visualizados en los navegadores (programas que permiten visualizar las páginas web). Los navegadores se encargan de interpretar el código HTML de los documentos, y de mostrar a los usuarios las páginas web resultantes del código interpretado. Versiones de HTML En noviembre de 1995 se aprobó el estándar HTML 2.0. para la creación de páginas web. Se creó con objetivos divulgativos, orientado a la actividad académica, en el que el contenido de las páginas era más importante que el diseño. Pero esta versión del HTML carecía de muchas herramientas que permitieran controlar el diseño de las páginas y añadir contenido multimedia, por lo que Netscape (cuyos navegadores eran los más utilizados por aquellos años) comenzó a incluir nuevas etiquetas que no existían en el estándar. El comité encargado de establecer los estándares dentro de Internet, comenzó a trabajar en el borrador de una nueva versión de HTML, el borrador de HTML 3.0. Pero este borrador resultó demasiado extenso, al intentar incluir numerosos nuevos atributos para etiquetas ya existentes, y la creación de otras muchas etiquetas nuevas. Por ello, no fue bien aceptado por el mercado y varias compañías se unieron para formar un nuevo comité encargado de establecer los estándares del HTML. Este comité pasó a llamarse W3C. En enero de 1997 se aprobó el estándar HTML 3.2. Este nuevo estándar incluía las mejoras proporcionadas por los navegadores Internet Explorer y Netscape Navigator, que ya habían realizado extensiones sobre el estándar HTML 2.0.
  • 2. En diciembre de 1997 se aprobó el estándar HTML 4.0, creado para estandarizar los marcos (frames), las hojas de estilo y los scripts. En septiembre de 2001 se aprobó el estándar HTML 4.01. Los navegadores. Compatibilidad Como hemos dicho, el navegador instalado en el ordenador del usuario es el que interpreta el código HTML de la página que visita por lo que a veces puede ocurrir que dos usuarios visualicen la misma página de forma distinta porque tienen instalados navegadores distintos o incluso versiones distintas del mismo navegador. Los navegadores de hoy en día pretenden ser compatibles con la última versión de HTML. Es necesario realizar extensiones de los navegadores para que puedan ser compatibles con esta última versión. Dos de los navegadores que continuamente están realizando extensiones son Internet Explorer y Netscape Navigator, que realizan extensiones incluso antes de que se establezcan los estándares, intentando incluir las nuevas funciones incluidas en los borradores. Los navegadores tienen que ser compatibles con la última versión HTML para poder interpretar el mayor número posible de etiquetas. Si un navegador no reconoce una etiqueta, la ignora y el efecto que pretendía la etiqueta no queda reflejado en la página. Para realizar las extensiones de estos navegadores se añaden nuevos atributos a las etiquetas ya existentes, o se añaden nuevas etiquetas. Como resultado a estas extensiones, habrán páginas cuyo código podrá ser interpretado completamente por todos los navegadores, mientras que otras, al incluir nuevos atributos o etiquetas del borrador de la última versión de HTML, solo podrán ser interpretadas en su totalidad en los navegadores más actualizados. En este último caso también puede ocurrir que alguna etiqueta de la página solamente pueda ser interpretada por un navegador concreto, y otra etiqueta por un navegador diferente al anterior, por lo que nunca sería visualizada en su totalidad por ningún navegador. Uno de los retos de los diseñadores de páginas web es hacer las páginas más atractivas utilizando toda la potencia del lenguaje HTML pero teniendo en cuentas estos problemas de compatibilidades para que el mayor número de internautas vean sus páginas tal como las ha diseñado.
  • 3. Navegadores más utilizados Internet Explorer Se dice que muchos de los usuarios que usan Internet Explorer - el navegador más popular del mundo - lo hacen porque viene integrado en el Sistema Operativo Microsoft Windows y no se aventuran a probar otro, de hecho es objeto de constantes críticas por su limitado apoyo a estándares web, pero sobre todo por sus fallos en la seguridad, mientras que algunas de sus ventajas son la posibilidad de abrir varias pestañas en la misma ventana y las mejoras en su última versión (IE8) en el soporte de Java script asi como de rendimiento. Mozilla Firefox Mozilla Firefox, el segundo navegador más usado, es descendiente de Mozilla Application Suite y a su vez de Netscape. Su motor de renderizado es Gecko, uno de los más potentes y versátiles. Al ser de código libre, tiene una comunidad de
  • 4. desarrolladores para personalizarlo y añadirle extensiones. Es elogiado sobre todo por su seguridad a través de los sistemas Sandbox, ssl/tls, y protección antiphishing, antimalware e integración con el antivirus. Otras ventajas que destacan son su rapidez, multiplataforma, navegación por pestañas, bloqueador de ventanas emergentes, personalización con las extensiones, temas y skins, gestor de descargas y soporte para motores de búsqueda. Safari El tercer navegador más usado es Safari, integrado en el mac OS X y también disponible en versiones ejecutables para Microsoft Windows. Con un alto nivel en el cumplimiento de estándares web destacan también de Safari su interfaz de navegación por pestañas, bloqueo de ventanas emergentes, organizada administración de favoritos, corrección ortográfica, integración con el reproductor multimedia QuickTime y manejo de contraseñas integrado bajo el sistema Keychain. Safari pasa el test Acid 3 - que comprueba el cumplimiento de los estándares del W3 - con el 100/100. Opera
  • 5. Opera, definido por muchos como el navegador más completo es también reconocido por su gran velocidad y un sencillo gestor de descargas, así como su seguridad con bloqueo de publicidad, bloqueo ventanas emergentes, protección anti malware, y protocolo de seguridad EV SSL, además de navegación por pestañas, soporte de estándares (especialmente CSS), soporte para motores de búsqueda, personalización de skins y barras, y multiplataforma. Opera es también popular en dispositivos como teléfonos celulares de última generación y como Safari, supera al 100 por cien el test Acid3. Konqueror, de código abierto y parte del proyecto KDE compite con Mozilla en el mercado en sistemas del tipo Unix, y Google Chrome destaca por su sistema de navegación por pestañas independientes y simplicidad. Editores Un editor es un programa que nos permiten redactar documentos. Hoy en día existen un gran número de editores que permiten crear páginas web sin la necesidad de escribir ni una sola línea de código HTML. Estos editores disponen de un entorno visual, y generan automáticamente el código de las páginas. Al poder ver en todo momento cómo quedará la página en el navegador, se facilita la creación de las páginas, y el uso de menús permite ganar rapidez. Estos editores visuales pueden generar en ocasiones código basura, es decir, código que no sirve para nada, en otras ocasiones puede ser más efectivo corregir directamente el código por lo que resulta necesario saber HTML para poder depurar el código de nuestra páginas. Algunos de los editores visuales con los que podrás crear tus páginas web son Macromedia Dreamweaver, Microsoft Frontpage, Adobe Pagemill, NetObjects Fusion, CutePage, HotDog Proffesional, Netscape Composer y Arachnophilia, de los cuales algunos tienen la ventaja de ser gratuitos. En aula Clic puedes encontrar los cursos de Macromedia Dreamweaver y Microsoft Frontpage, dos de los editores más usados hoy en día.
  • 6. Es aconsejable comenzar utilizando una herramienta lo más sencilla posible, para tener que insertar nosotros mismos el código HTML. Esto permite familiarizarse con el lenguaje, para poder utilizar algún editor visual posteriormente, y depurar el código cuando fuera necesario. Para crear páginas web escribiendo directamente el código HTML puedes utilizar la herramienta Wordpad o el Bloc de notas que proporciona Windows. A lo largo de este curso vamos a trabajar con el Bloc de notas para crear nuestras páginas, ya que se trata de un editor de textos muy sencillo de manejar, que nos permitirá crear páginas a través del código HTML. Si no sabes cómo trabajar con el Bloc de notas, te lo explicamos aquí. Cuando realices los ejercicios puedes compaginar dos sesiones de la forma que te explicamos aquí. Etiquetas
  • 7. Las etiquetas o marcas delimitan cada uno de los elementos que componen un documento HTML. Existen dos tipos de etiquetas, la de comienzo de elemento y la de fin o cierre de elemento. La etiqueta de comienzo está delimitada por los caracteres < y >. Está compuesta por el identificador o nombre de la etiqueta, y puede contener una serie de atributos opcionales que permiten añadir ciertas propiedades. Su sintaxis es: <identificador atributo1 atributo2 ...> Los atributos de la etiqueta de comienzo siguen una sintaxis predefinida y pueden tomar cualquier valor propio del usuario, o valores HTML predefinidos. La etiqueta de final está delimitada por los caracteres </ y >. Está compuesta por el identificador o nombre de la etiqueta, y no contiene atributos. Su sintaxis es: </identificador> Cada uno de los elementos de la página se encontrará entre una etiqueta de comienzo y su correspondiente etiqueta de cierre, a excepción de algunos elementos que no necesitan etiqueta de cierre. También es posible anidar etiquetas, es decir, insertar etiquetas entre otras etiquetas de comienzo y de cierre. A continuación tenemos un ejemplo en el que tenemos la etiqueta <font...> anidada dentro de la etiqueta <p..>.: <p align="center"><font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans Serif">Bienvenidos a www.aulaclic.com</font></p> Este código daría como resultado el siguiente texto: Bienvenidos a www.aulaclic.com Es importante anidar bien las etiquetas, las etiquetas no se pueden 'cruzar', en nuestro ejemplo hemos empezado por la etiqueta <p..>, antes de cerrar esta etiqueta hemos puesto la <font..> por lo que antes de cerrar la etiqueta <p..> debemos cerrar la etiqueta etiqueta <font..>. Mi primera página
  • 8. Lo primero que tienes que hacer es abrir el Bloc de notas. Para abrirlo, puedes dirigirte al menú Inicio, Programas, Accesorios, opción Bloc de notas. Seguidamente introduce, en el documento en blanco, el texto siguiente: <html> <head> <title>MI PRIMERA PAGINA</title> </head> <body bgcolor="#FFCC99"> <font color="#CC3300" size="5">Hola, estoy haciendo pruebas.</font> </body> </html> Guarda el documento con la extensión htm, con el nombre miprimpag.htm. Puedes guardarlo a través del menú Archivo, opción Guardar. Pulsando dos veces sobre el icono del archivo miprimpag.htm, éste debería abrirse automáticamente en el navegador que tengas instalado en tu ordenador. El navegador deberá mostrar una página como la de la derecha. Como puedes ver, la página resultante es una página que solamente tiene una línea de texto. Si observas la barra de título del navegador, verás que el título de la página es MI PRIMERA PAGINA. Este título ha sido establecido por la línea <title>MI PRIMERA PAGINA</title>. El color de fondo de la página ha sido establecido por la línea <body bgcolor="#FFCC99">. El texto Hola, estoy haciendo pruebas. se ha insertado a través de línea <font color="#CC3300" size="5">Hola, estoy haciendo pruebas.</font>.