2014 CENET 2 Qu es HTML? HyperText Markup Language (HTML) es el cdigo usado para convertir texto ordinario en texto estructurado que pueda ser utilizado en la Web HTML est formado por un grupo de marcadores llamados tags o etiquetas que rodean las diferentes partes de un texto, las cuales indican la funcin y el propsito de las etiquetas (markup) Estas etiquetas no se muestran y son distintas al contenido real que envuelven Etiquetas, elementos, atributos
2014 CENET 3 Las etiquetas en HTML estn rodeadas por los smbolos < y > para distinguirlas del texto ordinario El smbolo < marca el inicio de la etiqueta, seguido del nombre de la etiqueta y termina con el smbolo >. Por ejemplo: Etiquetas, elementos, atributos
2014 CENET 4 <p> Los nombres de etiquetas en HTML5 se pueden escribir en maysculas o minsculas, pero normalmente, y para facilitar su lectura, se escriben en mnusculas La mayora de las etiquetas vienen pares, una etiqueta de apertura, para indicar el inicio de un segmento y una etiqueta de cierre. Las etiquetas de cierre inician con una diagonal / Etiquetas, elementos, atributos
2014 CENET 5 <p>Hola Mundo</p> Estos pares de etiquetas y su contenido forman un elemento, y los elementos son los principales componentes de los documentos HTML Algunas etiquetas representan elementos vacos, los cuales no poseen contenido. Por ejemplo <br> Etiquetas, elementos, atributos
2014 CENET 6 La etiqueta de apertura de un elemento puede contener atributos que proporcionan ms informacin sobre el elemento Un atributo consiste de un nombre seguido de su valor, separados por el signo =, por ejemplo: <p class=important>Hola Mundo</p> Los valores de los atributos deben, de preferencia, estar rodeados por comillas simples o dobles. La etiqueta de apertura de un elemento puede incluir varios atributos separados por espacios Etiquetas, elementos, atributos
2014 CENET 7 Los atributos deben aparecer solo en las etiquetas de apertura Algunos elementos requieren ciertos atributos de forma obligatoria, mientras que otros son opcionales Elemento
Etiqueta apertura Contenido Etiqueta cierre
Etiquetas, elementos, atributos
2014 CENET 8 <p class=important>Hola Mundo</p>
Nombre Valor
Atributo Elementos en bloque y en lnea
2014 CENET 9 Todos los elementos HTML se pueden dividir en dos tipos bsicos: Elementos en bloque y Elementos en lnea Un elemento en bloque es aquel que contiene un bloque significativo de contenido que debera mostrarse en su propia lnea. Por ejemplo; prrafos, tablas y listas Elementos en bloque y en lnea
2014 CENET 10 Los elementos en lnea usualmente contienen menos texto y se muestra junto a otro texto en la misma lnea, cmo cuando se enfatizan palabras en una oracin La mayora de los elementos en bloque pueden contener otros elementos en bloque y todos pueden contener texto y otros elementos en lnea Elementos en bloque y en lnea
2014 CENET 11 Los elementos pueden anidarse, es decir, podemos tener elementos dentro de elementos Los espacios que se almacenan en un documento HTML se colapsan cuando un navegador los muestra en pantalla Los saltos de lnea se ignoran Y varios espacios en blanco consecutivos se convierten en uno solo
2014 CENET 12 Atributos estndar class. Indica la clase o clases a las cuales un elemento pertenece. Cualquier nmero de elementos pueden pertenecer a una clase. Un solo elemento puede pertenecer a muchas clases id. Especifica un identificador nico para un elemento style. Especifica las propiedades CSS de un elemento
2014 CENET 13 Atributos estndar title. Proporciona un ttulo a un elemento. La mayora de los navegadores lo muestran como un tooltip
2014 CENET 14 Comentarios Los comentarios en HTML son notas que no se muestran en el navegador y que se pueden leer revisando el cdigo fuente <!-- Este texto no se mostrar -->
2014 CENET 15 Estructura de un documento HTML <!doctype html> <html lang="es"> <head> <title>Mi primera pgina Web</title> </head> <body> <p>HTML es fcil!</p> </body> </html>
2014 CENET 16 Doctype Un documento HTML inicia con una declaracin de tipo de documento (Document Type Declaration, tambin conocido como doctype) XHMTL 1.0 strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1s trict.dtd"> HTML5 <!doctype html>
2014 CENET 17 rbol de documento Una forma prctica de ver la estructura de un documento HTML es como un rbol. Con todos los elementos conectados como ramas
2014 CENET 18 El elemento head El elemento head contiene informacin sobre el documento HTML, incluyendo palabras clave, enlaces a otros documentos que usa como archivos CSS y JavaScript A excepcin del elemento title que se muestra en la barra de ttulo del navegador, ningn elemento dentro de head se muestra en el contenido de la pgina HTML
2014 CENET 19 Componentes de una URL Cada documento disponible en Internet se encuentra en una direccin nica llamada Uniform Resource Locator (URL) Protocolo Hostname Path Archivo
http://www.examples.com/example/example.html
Prefijo Dominio Nombre Extensin
2014 CENET 20 URLs relativas Una URL relativa son direcciones hacia recursos en el mismo sitio que se referencian a travs del path o del archivo Por ejemplo: examples/chapter1/example.html ../../example.html Elementos de head
2014 CENET 21 <link> define las relaciones entre dos documentos. Su uso ms frecuente es para referirse a las hojas de estilo que usa el documento href. La URL que apunta al documento al que se hace referencia type: Especifica el Multipurpose Internet Mail Extensions (MIME) del documento. El valor ms comun es text/css para hojas de estilo externas. rel: define la relacin entre el documento HTML y el documento al que se hace referencia, su valor ms comn es stylesheet. Ejemplo: <link rel="stylesheet" type="text/css" href="main.css" media="screen" /> <meta> Este elemento contiene informacin sobre tu pgina. El trmino meta se refiere a metadatos, datos de los datos. Su uso ms Elementos de head
2014 CENET 22 comun es para describir informacin sobre la descripcin y palabras clave del documento, y el tipo de codificacin. Atributos name. El nombre del atributo que describe a content description: El valor del metadato Ejemplo: <meta name="description" content="Esta es una introduccin a HTML"> <meta charset=utf-8> Elementos de head
2014 CENET 23 <script> Permite integrar lenguajes de scripting en un documento HTML. Atributos type. Describe el tipo MIME del script que se va a incluir. src: La URL del documento que contiene el script Ejemplo: <script type=text/javascript src=jquery.js></script> Elementos de head
2014 CENET 24 <style> Su propsito es insertar informacin de estilo (CSS) dentro del documento Ejemplo: <style type="text/css"> p { text-color: #fff; } </style> Elementos de head
2014 CENET 25 <title> Permite agregar un ttulo a un documento HTML, se muestran en la barra de ttulo de los navegadores y se usa como valor por default cuando se marca una pgina como favorita. <title>Introduccin a HTML</title>
2014 CENET 26 El elemento <body> Todo el contenido de un documento HTML se encuentra en el elemento body. El elemento body va despus del elemento head y debe cerrarse antes de la etiqueta de cierre del elemento html.
Elementos de body
2014 CENET 27 Estructura semntica La semntica es el estudio del significado del lenguaje, el trmino tambin es usado para referirse al significado de un elemento o atributo HTML Nuestro objetivo es mantener separados el contenido y la presentacin del documento y
2014 CENET 28 debemos elegir el elemento ms siginifcativo que se adecue mejor a su contenido <p> sirve para delimitar prrafos <h1>...<h6> Los headings sirven como ttulos y separan las diferentes secciones de contenido de un documento. El elemento <h1> se usa para designar el ttulo principal de un documento. Ejemplo: <h1>HTML5</h1> <p>HTML5 introduce nuevos elementos</p> Elementos de body
2014 CENET 29 <address> Su objetivo es proporcionar informacin de contacto para la persona u organizacin responsable del documento HTML <address> Ismael Haro<br> Desarrollador web<br> </address> Elementos de body
2014 CENET 30 <pre> El elemento pre define un bloque preformateado donde el texto se muestra tal cual est en el cdigo fuente. <pre> Texto preformateado que conserva los saltos de lnea y espacios en blanco </pre> Elementos de body
2014 CENET 31 Listas. Una lista es una coleccin de elementos relacionados. En HTML existen 3 tipos de listas: listas ordenadas, listas no ordenadas y listas de definiciones <ul> Lista no ordenada, es usada cuando los elementos de la lista no requiere de un orden particular como la lista de ingredientes de una receta Elementos de body
2014 CENET 32 Cada elemento de una lista (ordenada y no ordenada) vive dentro su propio elemento <li> <ul> <li>2 cucharadas de aceite de oliva</li> <li>1/2 cucharada de sal</li> </ul> Elementos de body
2014 CENET 33 <ol> Una lista ordenada contiene elementos que estn diseados para ser leidos en una secuencia especfica. Cmo los pasos de una receta <ol> <li>Combina el agua, aceite, dos terceras partes de la harina en un recipiente grande y mezclalos</li> <li>Agrega de forma gradual el resto de la harina hasta que tome forma, evita que se ponga muy seca.</li> </ol> Elementos de body
2014 CENET 34 <dl> Una lista de definiciones es una coleccin de elementos (dt) y sus descripciones (dd) <dt> Una definicin esta relacionado con la descripcin que aparezca despus <dd> El elemento dd contiene la descripcin del elemento dt con el que est relacionado. Elementos de body
2014 CENET 35
<dl> <dt>Pasta</dt> <dd>Un plato preparado que contiene pasta como su principal ingrediente</dd> </dl>
2014 CENET 36 Elementos de frase <em> Se usa para agregar nfasis a una palabra o frase <strong> Se usa para agregar ms enfasis que el elemento <em> <abbr> Es usada para describir abreviaciones <acronym> Es usado para describir acrnimos <abbr> y <acronym> deben, de preferencia, incluir la(s) palabra(s) completa(s) en su atributo title <br> Inserta un salto de linea en un bloque de t texto <hr> Crea una linea horizontal que sirve para dividir secciones de texto.
2014 CENET 37 Elementos multipropsito <div> Crea una divisin en un documento agrupando diferentes elementos y es semnticamente neutral <span> Es la versin en lnea de un <div> y se usa para separa una porcin de texto de forma arbitraria
2014 CENET 38 Caracteres especiales HTML incluye un grupo de referencias de caracteres que ofrecen una forma de representar caracteres especiales en un documento HTML Una referencia de caracter inicia con un & y termina con ; Dentro de esos smbolos hay dos formas de representar un caracter especial El nombre de una entidad Una referencia numrica
2014 CENET 39 Caracteres especiales Un nombre de entidad es simplemente un nombre para referirse a un smbolo en particular. El nombre de entidad para el smbolo < es lt (<) Una referencia nmerica es nmero precedido con el smbolo # que representa su nmero
2014 CENET 40 unicode. El mismo smbolo < se representa con el nmero 38 (&) Continuar....