Qué es el html
Se está descargando tu SlideShare.
×
Eche un vistazo a continuación
Recomendado
Más Contenido Relacionado
Presentaciones para usted (13)
A los espectadores también les gustó (20)
Similares a Ruiz guerra HTML (20)
Más reciente (20)
Ruiz guerra HTML
- 1. Instituto Tecnológico de Nor-Oriente INTECNOR Perito en Industria Alimentaria Informática II Dubley Omar Sandoval Hernández ¿Que es HTML? René Estuardo Ruiz Guerra 5to. Perito en Industria Alimentaria Sección: “B” 9 de febrero de 2015, Llanos de la Fragua, Zacapa
- 2. ¿Qué es y para qué sirve HTML? ¿QUÉ ES Y PARA QUÉ SIRVE HTML? HTML es el lenguaje que se emplea para el desarrollo de páginas de internet. Está compuesto por una seríe de etiquetas que el navegador interpreta y da forma en la pantalla. HTML dispone de etiquetas para imágenes, hipervínculos que nos permiten dirigirnos a otras páginas, saltos de línea, listas, tablas, etc. Podríamos decir que HTML sirve para crear páginas web, darles estructura y contenido. Un ejemplo sencillo de código HTML podría ser: <html> <body> <p>Esto es un párrafo. Bienvenidos a esta página web.</p> </body> </html>
- 3. Este ejemplo está formado por 3 etiquetas HTML. Como podemos observar cada una de las etiquetas debe acabar con su homóloga de cierre. En este caso la etiqueta <html> debe cerrarse con </html>, la etiqueta <body> con </body> y la etiqueta <p> con </p>. Hay muchas más etiquetas que veremos más adelante pero nos debe quedar claro que por cada etiqueta que abramos, deberemos incluir la correspondiente etiqueta de cierre. Así conseguiremos un código HTML bien formado y que los navegadores puedan interpretar sin ambigüedad. Este sencillo ejemplo mostraría por pantalla lo siguiente. ¿Qué ocurriría si una etiqueta que abramos no tiene su correspondiente cierre? Digamos que se trataría de un código HTML mal construido, y los navegadores esto lo pueden interpretar de distintas maneras. Quizás nos muestren la página tal y como esperábamos sin aparente error. Quizás nos muestren una página de error o se quede en blanco el navegador. Nuestro objetivo ha de ser siempre construir páginas HTML bien estructuradas y sin ambiguedades, es decir, hacer un correcto uso del lenguaje para que los navegadores puedan saber exactamente qué es lo que pretendemos mostrar. ALGO DE HISTORIA
- 4. HTML nació públicamente en un documento llamado HTML Tags (Etiquetas HTML), publicado por primera vez en Internet por Tim Berners-Lee en 1991. En esta publicación se describen 22 etiquetas que mostraban un diseño inicial y relativamente simple de HTML. Varios de estos elementos se conservan en la actualidad. Otros se han dejado de usar, y muchos otros se han ido añadiendo con el paso de los años. De esta manera, podemos hablar de que han existido distintas versiones de HTML a lo largo de la historia de internet. Nosotros vamos a trabajar con el HTML estándar actual, que es el utilizado por los navegadores y páginas web de hoy en día. Sin embargo, no vamos a prestarle atención a las versiones y especificidades de cada versión, ya que el objetivo de este curso es aprenderlos fundamentos de HTML y entender cómo funciona, no conocer la sintaxis o especificidades de una versión concreta. ¿Por qué no le damos importancia a la versión? Porque una persona que cuenta con los fundamentos y comprensión básica sobre el lenguaje es capaz de adaptarse a las características particulares de una versión sin problema. En cambio, centrarse en los detalles de una versión sin conocer los fundamentos hará que no tengamos capacidad para comprender lo que hacemos ni para adaptarnos a los continuos cambios que tienen lugar en el ámbito de los desarrollos web. Tim Berners-Lee
- 5. Evolución del HTML hacia marcado o aplicación En los últimos tiempos estamos viendo como el navegador esta pasando de ser un programa a ser un framework. Mi pregunta es, ¿qué tendencia se marca con el HTML5? Seguir siendo un lenguaje de marcado con ciertas características visuales o se tiende a un cambio de base para orientarlo definitivamente hacia la creación de app potentes y flexibles? Y aunque parezca algo de respuesta obvia por la repetición de la cantinela que hacen todos los medios, no dejo de ver, de vez en cuando, pasos atras en la orientación del HTML hacia aplicaciones como es la negativa del W3C a incorporar objetos reales a Javascript o mantener algunas normas antiguas y un poco viejas en css o en HTML.
- 6. 1 - Etiquetas del lenguaje HTML Las Etiquetas El lenguaje HTML es un lenguaje de marcas, estas marcas serán fragmentos de texto destacado de una forma especial que permiten la definición de las distintas instrucciones de HTML, tanto los efectos a aplicar sobre el texto como las distintas estructuras del lenguaje. A estas marcas las denominaremos etiquetas y serán la base principal del lenguaje 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. <ETIQUETA>Elementos Afectados por la Etiqueta</ETIQUETA> Por ejemplo, con la etiqueta siguiente: <B>Texto que será en negrita</B>. Obtendremos:
- 7. Texto que será en negrita Algunas etiquetas no necesitarán la de fin, serán aquellas en las que el final este implícito, por ejemplo <P> párrafo, <BR> salto de línea ó <IMG> inclusión de una imagen. Definen un efecto que se producirá en un punto determinado sin afectar a otros elementos. El uso de mayúsculas o minúsculas en las etiquetas es indiferente, se interpretarán del mismo modo en ambos casos, pero lo normal es expresarlas en mayúsculas para que destaquen con más nitidez del texto normal. Atributos de las Etiquetas Las etiquetas pueden presentar modificadores que llamaremos atributos que permitirán definir diferentes posibilidadesde la instrucción HTML. Estos atributos se definirán en la etiqueta de inicio y consistirán normalmente en el nombre del atributo y el valor que toma separados por un signo de igual. El orden en que se incluyan los atributos es indiferente, no afectando al resultado. Si se incluyen varias veces el mismo atributo con distintos valores el resultado obtenido será imprevisible dependiendo de como lo interprete el navegador. Cuando el valor que toma el atributo tiene más de una palabra deberá expresarse entre comillas, en otro caso no será necesario. Un ejemplo de atributo será: <A HREF="http://www.uca.es">Pagina principal de la UCA</A> En este caso la etiqueta A presenta un atributo HREF cuyo valor es http://www.uca.es. Igualmente una etiqueta podría presentar varios atributos: <HR ALIGN=LEFT NOSHADE SIZE=5 WIDTH=50%> En este caso la etiqueta HR presenta cuatro atributos. El segundo atributo NOSHADE es un caso especial que no presenta valor. El orden en que se especifiquen los atributos no afectarán al resultado final. Etiquetas correctas Todo texto que se encuentre entre los caracteres < y > se considerará una etiqueta, si la etiqueta no fuera una de las validas del lenguaje HTML no será tenida en cuenta, sin causar ningún tipo de error. Dejándose el texto o las etiquetas a las que afectaba como si no existiera la etiqueta extraña. Cuando se comete un error
- 8. sintáctico al expresar una etiqueta o un atributo no se producirá ningún error, simplemente no de obtendrá el efecto que deseábamos. El lenguaje HTML es un lenguaje que evoluciona muy rápidamente y cada nueva versión de los programas navegadores presenta etiquetas nuevas que causan efectos más espectaculares o atributos nuevos de las etiquetas ya existentes. Esto causa que los programas más antiguos no entiendan estas nuevas etiquetas y por tanto las considere erróneas y no realice la acción que deseábamos. Dándose el caso de atributos que son validos solo para un único navegador. Cuando creemos código HTML hay que hacerlo lo más estándar posible para permitir que el documento pueda ser visto de forma efectiva por distintos navegadores en maquinas distintas. Por tanto debemos renunciar a efectos espectaculares que solo tienen validez en un navegador e intentar comprobar como se ve el documento en una variedad de navegadores, ya que las personas que se conectan a nuestras páginas no tendrán en la mayoría de los casos el mismo que nosotros. Tambien es interesante como se vería el documento en los distintos tamaños de la ventana del navegador, teniendo en cuenta que todos no tienen un monitor con la misma resolución. En este manual se han tratado de incluir las características más estándar de HTML y en caso de tratarse de instruccione Leyenda: D: Desaprobado L: Loose DTD (Definición del Tipo de Documento Transicional) F: Frameset DTD (Definición del Tipo de Documento con Marcos) Nombre Etiqueta inicial Etiqueta final Des. DTD Descripción a <a> </a> Origen o destino del vínculo abbr <abbr> </abbr> Abreviatura (p.ej.:WWW, HTTP, etc.) acronym <acronym> </acronym> address <address> </address> Información sobre el autor applet <applet> </applet> D L Applet Java area <area> Prohibido Área de un mapa de imágenes en el lado del cliente b <b> </b> Estilo de texto en negrita base <base> Prohibido URI base del documento basefont <basefont> Prohibido D L Tamaño base de fuente bdo <bdo> </bdo> Anular algoritmo BiDi I18N big <big> </big> Estilo de texto grande blockquote <blockquote> </blockquote> Cita larga body Opcional Opcional Cuerpo del documento br <br> Prohibido Salto de línea forzado
- 9. button <button> </button> Botón caption <caption> </caption> Título de tabla center <center> </center> D L Forma abreviada de DIV align=center cite <cite> </cite> Cita code <code> </code> Fragmento de código de computadora col <col> Prohibido Columna de una tabla colgroup <colgroup> Opcional Grupo de columnas de una tabla dd <dd> Opcional Descripción de una definición del <del> </del> Texto borrado dfn <dfn> </dfn> Definición dir <dir> </dir> D L Lista tipo directorio div <div> </div> Contenedor genérico de idioma/estilo dl <dl> </dl> Lista de definiciones dt <dt> Opcional Término definido em <em> </em> Énfasis fieldset <fieldset> </fieldset> Grupo de controles de un formulario font <font> </font> D L Cambio local de la fuente form <form> </form> Formulario interactivo frame <frame> Prohibido F Subventana frameset <frameset> </frameset> F Subdivisión en ventanas h1 <h1> </h1> Encabezado h2 <h2> </h2> Encabezado h3 <h3> </h3> Encabezado h4 <h4> </h4> Encabezado h5 <h5> </h5> Encabezado h6 <h6> </h6> Encabezado head Opcional Opcional Cabecera del documento hr <hr> Prohibido Separador horizontal html Opcional Opcional Elemento raiz del documento i <i> </i> Estilo de texto en itálica iframe <iframe> </iframe> L Subventana en línea img <img> Prohibido Imagen incluida input <input> Prohibido Control de formulario ins <ins> </ins> Texto insertado isindex <isindex> Prohibido D L Entrada de texto en una sola línea con indicador kbd <kbd> </kbd> Texto que debe introducir el usuario label <label> </label> Texto del rótulo de un campo de formulario
- 10. legend <legend> </legend> Leyenda de un grupo de campos li <li> Opcional Objeto de lista link <link> Prohibido Un vínculo independiente del medio map <map> </map> Mapa de imágenes en el lado del cliente menu <menu> </menu> D L Lista tipo menú meta <meta> Prohibido Metainformación genérica noframes <noframes> </noframes> F Contenedor de contenidos alternativos para la representación no basada en marcos noscript <noscript> </noscript> Contenedor de contenidos alternativos para la representación no basada en scripts object <object> </object> Objeto incluido genérico ol <ol> </ol> Lista ordenada optgroup <optgroup> </optgroup> Grupo de opciones option <option> Opcional Opción seleccionable p <p> Opcional Párrafo param <param> Prohibido Valor de propiedad con nombre pre <pre> </pre> Texto preformateado q <q> </q> Cita corta en línea s <s> </s> D L Estilo de texto tachado samp <samp> </samp> Ejemplo de salida de programas, scripts, etc. script <script> </script> Sentencias de script select <select> </select> Selector de opciones small <small> </small> Estilo de texto pequeño span <span> </span> Contenedor genérico de idioma/estilo strike <strike> </strike> D L Estilo de texto tachado strong <strong> </strong> Énfasis fuerte style <style> </style> Información de estilo sub <sub> </sub> Subíndice sup <sup> </sup> Superíndice table <table> </table> tbody Opcional Opcional Cuerpo de tabla td <td> Opcional Celda de datos de una tabla textarea <textarea> </textarea> Campo de texto multilínea tfoot <tfoot> Opcional Pie de tabla
- 11. th <th> Opcional Celda de encabezado de tabla thead <thead> Opcional Cabecera de tabla title <title> </title> Título del documento tr <tr> Opcional Fila de una tabla tt <tt> </tt> Estilo de texto de teletipo o monoespacio u <u> </u> D L Estilo de texto subrayado ul <ul> </ul> Lista no ordenada var <var> </var> Variable o argumento de un programa
