web • Profesor de licenciatura/maestría • Organizador de la Comunidad PHP Puebla • http://twitter.com/ComPHPPuebla • http://facebook.com/ComPeHPPuebla • http://github.com/ComPHPPuebla
El objetivo es balancear la teoría y la práctica • El taller está divido en cuatro partes (una por clase) 1)Introducción a HTML 2)Introducción a HTML5 3)Introducción a CSS 4)Introducción a CSS3
HyperText Markup Language (HTML) es el código 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 función y el propósito de las etiquetas (markup) • Estas etiquetas no se muestran y son distintas al contenido real que envuelven
Las etiquetas en HTML están rodeadas por los símbolos < y > para distinguirlas del texto ordinario • El símbolo < marca el inicio de la etiqueta, seguido del nombre de la etiqueta y termina con el símbolo >. Por ejemplo: <p>
Los nombres de etiquetas en HTML5 se pueden escribir en mayúsculas o minúsculas, pero normalmente, y para facilitar su lectura, se escriben en mínusculas • La mayoría 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 / <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 vacíos, los cuales no poseen contenido. Por ejemplo <br>
La etiqueta de apertura de un elemento puede contener atributos que proporcionan más información 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 • Los atributos deben aparecer solo en las etiquetas de apertura • Algunos elementos requieren ciertos atributos de forma obligatoria, mientras que otros son opcionales
en línea • Todos los elementos HTML se pueden dividir en dos tipos básicos: – Elementos en bloque y – Elementos en línea • Un elemento en bloque es aquel que contiene un bloque significativo de contenido que debería mostrarse en su propia línea. Por ejemplo; párrafos, tablas y listas
en línea • Los elementos en línea usualmente contienen menos texto y se muestra junto a otro texto en la misma línea, cómo cuando se enfatizan palabras en una oración • La mayoría de los elementos en bloque pueden contener otros elementos en bloque y todos pueden contener texto y otros elementos en línea
en línea • 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 línea se ignoran • Y varios espacios en blanco consecutivos se convierten en uno solo
Indica la clase o clases a las cuales un elemento pertenece. Cualquier número 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
HTML inicia con una declaración de tipo de documento (Document Type Declaration, también conocido como doctype) • XHMTL 1.0 strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd"> • HTML5 <!doctype html>
El elemento head contiene información sobre el documento HTML, incluyendo palabras clave, enlaces a otros documentos que usa como archivos CSS y JavaScript • A excepción del elemento title que se muestra en la barra de título del navegador, ningún elemento dentro de head se muestra en el contenido de la página HTML
• Cada documento disponible en Internet se encuentra en una dirección única llamada Uniform Resource Locator (URL) • http://www.examples.com/example/example.html Protocolo Hostname Dominio Prefijo Path Archivo Nombre Extensión
URL relativa son direcciones hacia recursos en el mismo sitio que se referencian a través del path o del archivo • Por ejemplo: • examples/chapter1/example.html • ../../example.html
<link> define las relaciones entre dos documentos. Su uso más 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 más comun es text/css para hojas de estilo externas. • rel: define la relación entre el documento HTML y el documento al que se hace referencia, su valor más común es stylesheet. Ejemplo: <link rel="stylesheet" type="text/css" href="main.css" media="screen" />
<meta> Este elemento contiene información sobre tu página. El término meta se refiere a metadatos, datos de los datos. Su uso más comun es para describir información sobre la descripción y palabras clave del documento, y el tipo de codificación. – Atributos • name. El nombre del atributo que describe a content • description: El valor del metadato – Ejemplo: <meta name="description" content="Esta es una introducción a HTML"> <meta charset=”utf-8”>
<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>
<title> Permite agregar un título a un documento HTML, se muestran en la barra de título de los navegadores y se usa como valor por default cuando se marca una página como favorita. <title>Introducción a HTML</title>
Todo el contenido de un documento HTML se encuentra en el elemento body. • El elemento body va después del elemento head y debe cerrarse antes de la etiqueta de cierre del elemento html.
semántica es el estudio del significado del lenguaje, el término también es usado para referirse al significado de un elemento o atributo HTML • Nuestro objetivo es mantener separados el contenido y la presentación del documento y debemos elegir el elemento más siginifcativo que se adecue mejor a su contenido
<p> sirve para delimitar párrafos • <h1>...<h6> Los “headings” sirven como títulos y separan las diferentes secciones de contenido de un documento. El elemento <h1> se usa para designar el título principal de un documento. • Ejemplo: <h1>HTML5</h1> <p>HTML5 introduce nuevos elementos</p>
<address> Su objetivo es proporcionar información de contacto para la persona u organización responsable del documento HTML <address> Luis Montealegre<br> Desarrollador web<br> http://www.comunidadphppuebla.com </address>
<pre> El elemento pre define un bloque preformateado donde el texto se muestra tal cual está en el código fuente. <pre> Texto preformateado que conserva los saltos de línea y espacios en blanco </pre>
Listas. Una lista es una colección 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
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>
<ol> Una lista ordenada contiene elementos que están diseñados para ser leidos en una secuencia específica. Cómo 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>
<dl> Una lista de definiciones es una colección de elementos (dt) y sus descripciones (dd) • <dt> Una definición esta relacionado con la descripción que aparezca después • <dd> El elemento dd contiene la descripción del elemento dt con el que está relacionado.
<em> Se usa para agregar énfasis a una palabra o frase • <strong> Se usa para agregar más enfasis que el elemento <em> • <abbr> Es usada para describir abreviaciones • <acronym> Es usado para describir acrónimos • <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.
Crea una división en un documento agrupando diferentes elementos y es semánticamente neutral • <span> Es la versión en línea de un <div> y se usa para separa una porción de texto de forma arbitraria
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 símbolos hay dos formas de representar un caracter especial – El nombre de una entidad – Una referencia numérica
nombre de entidad es simplemente un nombre para referirse a un símbolo en particular. El nombre de entidad para el símbolo < es lt (<) • Una referencia númerica es número precedido con el símbolo # que representa su número unicode. El mismo símbolo < se representa con el número 38 (&)
comphppuebla
tk3fftk
kyoko_nr_nr
minodriven
maroon8021
gunnarmorling
nrslib
ryokatsuse
naruse
mnch
makicamel
o0h
bkeepers
addyosmani
jakevdp
smashingmag
katarinadahlin
mkilby
zakiyama
brettharned
stephenakadiri
jdejongh
baasie
mayatellez
