para incluir imágenes en un documento HTML. • Requiere del atributo src cuyo valore será la URL de la imagen • El atributo alt también es obligatorio y sirve para agregar un equivalente en texto para la imagen <img src="/imageness/logo.jpg" alt="Logo de la Comunidad PHP Puebla">
tag “anchor” (ancla) se usa para rodear texto o una imagen que se usará para provocar que el navegador se dirija a otra página. • El texto que se encuentra entre las etiquetas es lo que se muestra al usuario, usualmente como texto subrayado en color azul. • Cuando el usuario hace clic en el texto el navegador abre el documento especificado en el atributo href
consiste de 3 elementos básicos <table>, <tr> y <td> • <tr> indica el inicio/fin de una fila • <td> delimita cada celda en la tabla, sus dos atributos más comunes son: • colspan. Especifica el número de columnas que la celda debe ocupar. • rowspan. Especifica el número de filas que la celda debe ocupar
un título a una tabla • <th> Agrega una celda de encabezado • <tbody> Define donde inicia y termina el cuerpo de una tabla • <tfoot> Define donde inicia y termina el footer de una tabla
permite a un usuario ingresar datos. • La información que se ingresa se manda a un servidor en un grupo de datos que consisten del nombre de los elementos y sus valores • El procesamiento de los datos es tarea de un form handler, el cual es un script diseñado para manejar e interpretar los datos enviados.
• <form> Es el lemento a través del cual el usuario puede ingresar información – Requiere de los atributos action y method, los cuales son la URL del form handler y el método HTTP por el cual se envían los datos, respectivamente. – El valor por default de action es la URL del documento actual y el valor por default de action es get (el otro valor válido es post) <form method=”get”></form>
• <input> Muchos de los elementos de un formulario se crean con este elemento. • Sus 3 atributos más comunes son name, type y value – name: identifica el control para que el valor enviado pueda ser procesado al enviar los datos – type: Específica el tipo de control (por default text) – value: Especifica el valor inicial de un elemento
• <select> Crea un control de selección con un menú de opciones a elegir. • El elemento select es un contenedor de elementos option u optgroup • Si se agrega el atributo multiple, se podrá elegir más de un valor
• <textarea> crea un control de texto multilinea, cuyo objetivo es poder capturar textos muy largos • Su tamaño es definido por los atributos cols y rows
• <fieldset> sirve para agrupar varios controles relacionados • <legend> proporciona un título para un elemento fieldset • <label> crea una etiqueta o nombre para un elemento en específico
es una reformulación de versiones previas de HTML (incluye elementos de HTML4 y HTML 1) y está diseñado con el objetivo de funcionar en cualquier plataforma, con navegadores antiguos y que sea capaz de manejar errores de forma elegante • HTML5 incluye la redefinición de elementos HTML, la inclusión de nuevos elementos e incluye el uso de nuevas tecnologías como video, audio y canvas.
<section> Su objetivo es agrupar contenido de forma temática. Ejemplos de section son los capítulos de un libro o las partes de una tesis • <nav> Se usa para delimitar una sección con elementos de navegación (enlaces a otros documentos). Los elementos de navegación deben ser relevantes
<article> Representa un elemento autocontenido que puede ser usado o distribuido de forma independiente, por ejemplo el post de un blog, o un artículo en una revista • <aside> Es un elemento con información relacionada con el contenido principal. Por ejemplo bloques de anuncios o de navegación
<hgroup> este elemento se utiliza para agrupar encabezados h1..h6 cuando un titulo tiene subtitulos por ejemplo • <header> este elemento usualmente contiene el título de una sección, puede usarse para delimitar un índice de contenido, logos, o un formulario de búsqueda por ejemplo
<footer> es usado para incluir un pie de página para la seccion a la cual pertenece o al documento HTML. No es obligatorio al final de cada sección. Ejemplos son: apéndices, información de copyright, etc. • <time> representa una hora o fecha • <mark> representa un bloque de contenido que debe resaltarse
los elementos desconocidos? • Cada navegador tiene una lista de los elementos que soporta, los elementos fuera de esa lista se tratan como desconocidos. – ¿Qué apariencia tienen estos elementos? – ¿Puede contener otros elementos (cuáles)? • Los navegadores responden a esas preguntas de forma diferente
los elementos desconocidos? • Navegadores anteriores a IE9 no permiten dar estilo a elementos desconocidos • Si IE no reconoce un elemento lo insertará como un elemento vacío sin hijos. Todos los elementos que se esperaban dentro del elemento se encontraran al mismo nivel del elemento vacío • HTML5shiv (ó shim) <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></ script> <![endif]--> •
Puebla</h1> <p class="tagline"> Comunidad de desarrolladores PHP en Puebla </p> </div> <header> <h1>PHP Puebla</h1> <p class="tagline"> Comunidad de desarrolladores PHP en Puebla </p> </header>
<p class="tagline"> Comunidad de desarrolladores PHP en Puebla </p> </header> <header> <hgroup> <h1>PHP Puebla</h1> <h2> Comunidad de desarrolladores PHP en Puebla </h2> </hrgoup> </header>
HTML5 define una forma estándar de incluir video con el elemento <video> • http://caniuse.com/ Es un excelente recurso para saber que elementos HTML5 son soportadas por qué navegadores y en que versiones
se habla de video se piensa en formato .avi y .mp4, en ambos casos se trata de formatos contenedores, similar a un archivo .zip. • Los formatos contenedores solo indican cómo guardar la información, no en que formato. • Ejemplos: – mp4 – ogg – flash
Cuando hablamos de ver videos, nos referimos a una combinación de streams, uno de video y uno de audio. • Cuando ves un video el reproductor de video hace 3 tareas 1.Interpreta el formato contenedor 2.Decodifica el stream de video y lo muestra en tu pantalla 3.Decodifica el stream de audio y lo manda a tus bocinas
Un codec de video es un algoritmo por el cual se codifica el stream de video • Codec es una combinación de las palabras encoder y decoder • Tres codecs de video más importantes – H.264, también conocido como MPEG-4 Advanced Video Coding. – Theora – VP8
Como en el caso de los videos, los codecs de audio son algoritmos para codificar/decodificar streams de audio • Tres codecs de audio más importantes – Mp3 – AAC, Advanced Audio Coding – Vorbis
<video> tiene como atributo requerido src que representa la URL hacia el archivo de video que quieres reproducir. Opcionalmente puedes definir el ancho y alto máximos del contenedor de video <video src="pr6.webm" width="320" height="240"></video> <video src="pr6.webm" width="320" height="240" controls></video> <video src="pr6.webm" width="320" height="240" preload></video> <video src="pr6.webm" width="320" height="240" autoplay></video>
placeholder coloca texto dentro de un control input mientras el elemento esté vacío y no tenga el foco <form> <input name="q" placeholder="Búsqueda por tema"> <input type="submit" value="Buscar"> </form>
required indica al navegador que solo se puede enviar la información si el control se llenó apropiadamente <input type="text" required aria-required="true"> • También debe incluirse el atributo a fin de dar soporte a los screen-readers
pattern permite indicar, a través de una expresión regular, que formato deben tener los datos ingresados en un control. • Por ejemplo, podemos indicar que un password debe tener una longitud de 6 caracteres (que no sean espacios en blanco) <input type="password" name="password" required pattern="\S{6,}">
Muchos sitios usan Javascript para colocar el cursor en el primer elemento de un formulario. • HTML introduce el atributo autofocus que coloca el cursor en el elemento que tenga este atributo de forma automática <form> <input name="q" autofocus> <input type="submit" value="Search"> </form>
• HTML5 define el nuevo tipo de control email para capturar direcciones de correo electrónico <form> <input type="email"> <input type="submit" value="Enviar"> </form>
el control de tipo number que permite capturar números y definir el rango de valores que se pueden capturar. <input type="number" min="0" max="10" step="2" value="6">
comphppuebla
arkw
yui_knk
takter00
kawayu
irof
hayatokudou
har1101
rkaga
matsuo_atsushi
youkidearitai
taiseiyamamotoan
simotin13
codingconduct
chriscoyier
wjessup
shlominoach
inesmontani
schlessera
nikkihalliwell
katarinadahlin
palkan
matthewcrist
greggifford
