Introducción a HTML. Computación Web (2017/18) Jesús Arias Fisteus. Computación Web (2017/18) Introducción a HTML 1
|
|
|
- Benito San Martín Camacho
- hace 6 años
- Vistas:
Transcripción
1 Introducción a HTML Jesús Arias Fisteus Computación Web (2017/18) Computación Web (2017/18) Introducción a HTML 1
2 Hola Mundo! 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>mi primera página HTML</title> 6 </head> 7 <body> 8 <p> Hola Mundo!</p> 9 </body> 10 </html> Computación Web (2017/18) Introducción a HTML 2
3 Ejercicios Práctica 1: Ejercicio 1. Computación Web (2017/18) Introducción a HTML 3
4 La cabecera del documento Elemento head. Suele contener: title: título de la página. link: enlaces a documentos externos (p.e. hojas de estilo, documento RSS, metadatos, etc.) style: hoja de estilo empotrada en el documento. script: programa empotrado en el documento, normalmente Javascript. Computación Web (2017/18) Introducción a HTML 4
5 El cuerpo del documento Elemento body. Contiene la parte del documento que se representa en el navegador web: Texto organizado en párrafos, tablas, imágenes, formularios, etc. Computación Web (2017/18) Introducción a HTML 5
6 Espacios en blanco y salto automático de ĺınea 1 <p> 2 Mú ltiples espacios en blanco consecutivos son 3 tratados como si sólo se tratase de uno. 4 Los caracteres de salto de lí nea o tabuladores 5 son tratados como si simplemente 6 7 fuesen espacios. 8 </p> Computación Web (2017/18) Introducción a HTML 6
7 Comentarios 1 <! -- El texto que aparece entre las marcas 2 de comentario es ignorado por el 3 nav egador web -- > Computación Web (2017/18) Introducción a HTML 7
8 Texto preformateado 1 <pre> 2 public class CircleAreaCalc { 3 4 private BigDecimal pi; 5 6 public CircleAreaCalc(int numdigits) { 7 PiCalc picalc = new PiCalc(numDigits); 8 pi = picalc.compute(); 9 } public BigDecimal area(bigdecimal radius) { 12 BigDecimal area = radius.pow(2); 13 area = area.multiply(pi); 14 return area; 15 } 16 } 17 </pre> Computación Web (2017/18) Introducción a HTML 8
9 Elementos de bloque y elementos de ĺınea Los elementos que contiene el cuerpo del documento pueden ser: Elementos de bloque: hay una separación de ĺınea antes y después del documento. Ejemplos: p, table, div, pre, h1, etc. Elementos de ĺınea: se muestran dentro del flujo normal de una ĺınea, sin forzar saltos de ĺınea. Ejemplos: em, strong, a, img, etc. Computación Web (2017/18) Introducción a HTML 9
10 Marcado semántico de texto Elementos que permiten controlar cómo se presenta el texto: em: énfasis (cursiva típicamente). strong: énfasis fuerte (negrilla típicamente). b: negrilla. i: cursiva. small: comentarios adicionales, como por ejemplo letra pequeña citando avisos legales (p.e. declaración de copyright). Computación Web (2017/18) Introducción a HTML 10
11 Marcado semántico de texto 1 <p> 2 Esta aplicación web le permite <em>comprar</em> 3 o <em>vender</em> <strong>únicamente</strong> 4 objetos de segunda mano. 5 </p> 6 7 <p> 8 <small>el operador del servicio se reserva 9 el derecho a cancelarlo sin previo aviso.</small> 10 </p> Computación Web (2017/18) Introducción a HTML 11
12 Marcado semántico de texto Más elementos que permiten controlar cómo se presenta el texto: cite: para mencionar la fuente de algo (p.e. para citar documentos en la bibliografía). q: para presentar literalmente texto de una documento, dicho por una persona, etc. dfn: para presentar la definición de conceptos importantes. abbr: para presentar un acrónimo o abreviatura. Computación Web (2017/18) Introducción a HTML 12
13 Marcado semántico de texto 1 <p> 2 El científico <cite>albert Einstein</cite> 3 dijo que <q>nunca consideres el estudio como 4 una obligación, sino como una oportunidad 5 para penetrar en el bello y maravilloso 6 mundo del saber.</q> 7 </p> 8 <p> 9 Crear un documento 10 <abbr title="hypertext Markup Language">HTML</abbr> 11 es muy sencillo. 12 </p> 13 <p> 14 Un <dfn>byte</dfn> es una unidad de información 15 compuesta por 8 bits. 16 </p> Computación Web (2017/18) Introducción a HTML 13
14 Marcado semántico de texto Marcado relacionado con los ordenadores: code: código de ordenador. var: variable en un programa. samp: ejemplo de salida de un programa. input: entrada dada a un programa. Computación Web (2017/18) Introducción a HTML 14
15 Marcado semántico de texto Elemento time: Su contenido debe ser una especificación de tiempo (fecha, mes, año, semana, día de la semana, hora, zona horaria, duración de algo, etc.) Puede llevar un atributo datetime con una representación procesable por un ordenador. Si no, el propio contenido debe ser procesable por un ordenador. Computación Web (2017/18) Introducción a HTML 15
16 Marcado semántico de texto 1 <p> 2 El congreso comenzó 3 <time datetime=' '>ayer</time> 4 y durará <time datetime='p3d'>3 días</time>. 5 </p> 6 <p> 7 Correo recibido el <time> t10:00</time>. 8 </p> Computación Web (2017/18) Introducción a HTML 16
17 Imágenes Las imágenes se incluyen con el elemento img. Es un elemento de ĺınea. Además, se debe proporcionar un texto descriptivo. Se puede conservar el tamaño original de la imagen o escalarla a otra altura y/o anchura. Computación Web (2017/18) Introducción a HTML 17
18 Imágenes 1 <p> 2 <img src="logo-uc3m.jpg" alt="logotipo de UC3M"> 3 <img src="logo-uc3m.jpg" width="100" 4 alt="logotipo de UC3M"> 5 <img src="logo-uc3m.jpg" width="100" height="100" 6 alt="logotipo de UC3M"> 7 </p> Computación Web (2017/18) Introducción a HTML 18
19 Hipervínculos Un documento HTML puede enlazar mediante hipervínculos con: Objetos externos: otra página HTML, una posición de otra página HTML, ficheros descargables, etc. Otra posición del propio documento: por ejemplo, enlazar desde una sección del documento hacia otra sección. Computación Web (2017/18) Introducción a HTML 19
20 Hipervínculos 1 <p> 2 La <a href=" 3 Carlos III de Madrid</a> fue fundada en </p> 5 <p> 6 <a href=" 7 <img src="logo-uc3m.jpg"></a> 8 </p> 9 <p> 10 Este <a href=" target="_blank"> 11 hipervínculo</a> se abre en una nueva ventana 12 o pesta~na. 13 </p> Computación Web (2017/18) Introducción a HTML 20
21 Hipervínculos 1 <p> 2 Este tema se trata en mayor profundidad 3 <a href="#p3">posteriormente en este documento</a>. 4 </p> 5 6 <p id="p3"> 7 El tema tiene una complejidad... 8 </p> Computación Web (2017/18) Introducción a HTML 21
22 Listas ordenadas 1 <p> 2 Esto es una lista ordenada (el orden de los 3 elementos de la lista es relevante): 4 </p> 5 <ol> 6 <li>primer punto.</li> 7 <li>segundo punto.</li> 8 </ol> 9 10 <p> 11 Se pueden usar números, letras, etc.: 12 </p> 13 <ol type="a"> 14 <li>primer punto.</li> 15 <li>segundo punto.</li> 16 </ol> Computación Web (2017/18) Introducción a HTML 22
23 Listas no ordenadas 1 <p> 2 Esto es una lista no ordenada (el orden de los 3 elementos de la lista 4 <strong>no</strong> es relevante): 5 </p> 6 <ul> 7 <li>primer punto.</li> 8 <li>segundo punto.</li> 9 </ul> Computación Web (2017/18) Introducción a HTML 23
24 Tablas 1 <table> 2 <thead> 3 <tr> 4 <th>fecha</th> 5 <th>lugar</th> 6 <th>precio</th> 7 </tr> 8 </thead> 9 <tbody> 10 <tr> 11 <td> </td> 12 <td>madrid</td> 13 <td>60</td> 14 </tr> 15 <tr> 16 <td> </td> 17 <td>sevilla</td> 18 <td>50</td> 19 </tr> 20 <tr> 21 <td> </td> 22 <td>málaga</td> 23 <td>50</td> 24 </tr> 25 </tbody> 26 <tfoot> 27 <tr> 28 <td>total:</td> 29 <td></td> 30 <td>160</td> 31 </tr> 32 </tfoot> 33 </table> Computación Web (2017/18) Introducción a HTML 24
25 Secciones Marcado de secciones de un documento: Cabecera: elemento header. Pie de página: elemento footer. Enlaces de navegación: elemento nav. Información secundaria / relacionada: elemento aside. Información de contacto: elemento address. Unidad autocontenida: elemento article. Sección: elemento section. Computación Web (2017/18) Introducción a HTML 25
26 Títulos Marcado de títulos de secciones y otras partes de un documento: Elementos h1, h2, h3, h4, h5 y h6. Computación Web (2017/18) Introducción a HTML 26
27 Secciones 1 2 <article> <header> 3 <h2>apples</h2> 4 <p>tasty, delicious fruit!</p> 5 6 </header> <p>the apple is the pomaceous fruit of the apple 7 8 tree.</p> <section> 9 10 <h3>red Delicious</h3> <p>these bright red apples are the most common 11 found in many supermarkets.</p> </section> <section> <h3>granny Smith</h3> <p>these juicy, green apples make a great 16 filling for apple pies.</p> 17 </section> 18 </article> Computación Web (2017/18) Introducción a HTML 27
28 Agrupación de contenido: div y span A veces conviene agrupar contenido en un único elemento. Por ejemplo: Para aplicar estilos a dicho contenido en su conjunto. Para manipularlo en su conjunto por un programa. Para agrupar en un bloque elementos de ĺınea. Dos elementos sin semántica para agrupar: Elemento div: agrupación de bloque. Elemento span: agrupación de ĺınea. Se ilustrará su uso cuando se explique CSS. Computación Web (2017/18) Introducción a HTML 28
29 Ejercicios Práctica 1: Ejercicio 2.1. Computación Web (2017/18) Introducción a HTML 29
30 Formularios Los formularios permiten que el usuario introduzca información. Se recoge la información mediante controles de distintos tipos: texto, fechas, números, listas, casillas marcables, ficheros, etc. Típicamente se envía la información recogida al servidor mediante una petición HTTP. Computación Web (2017/18) Introducción a HTML 30
31 Formularios 1 <form action=" 2 <label> 3 Texto: <input type="search" name="term"> 4 </label> 5 <input type="submit" value="buscar"> 6 </form> Computación Web (2017/18) Introducción a HTML 31
32 Formularios: elemento input Atributo type hidden text search tel url password number range color Uso oculto, no visible en la página una ĺınea de texto una ĺınea de texto, con semántica de buscar número de teléfono URL absoluta dirección de correo electrónico una ĺınea de texto, para información sensible Número Número en el cual la precisión no es relevante Color Computación Web (2017/18) Introducción a HTML 32
33 Formularios: elemento input Atributo type datetime date month week time datetime-local Uso fecha y hora, con zona horaria UTC fecha (día, mes, año) fecha como mes (mes, año) fecha como semana (número de semana, año) hora, sin zona horaria fecha y hora, sin zona horaria Computación Web (2017/18) Introducción a HTML 33
34 Formularios: elemento input Atributo type checkbox radio file submit image reset button Uso cuadro marcable botón marcable, sólo se marca uno por grupo Fichero Botón de envío Imagen de envío (con coordenadas) Botón de vuelta al estado inicial del formulario Botón genérico Computación Web (2017/18) Introducción a HTML 34
35 Formularios: elemento select Desplegable con varias opciones a elegir. 1 <label for="unittype">select unit type:</label> 2 <select id="unittype" name="unittype"> 3 <option value="1">miner</option> 4 <option value="2">puffer</option> 5 <option value="3" selected>snipey</option> 6 <option value="4">max</option> 7 <option value="5">firebot</option> 8 </select> Computación Web (2017/18) Introducción a HTML 35
36 Formularios: elemento textarea Cuadro de entrada de texto de varias ĺıneas. 1 <textarea name="mensaje" rows="5" cols="80" 2 placeholder="escribe tu mensaje..."></textarea> Computación Web (2017/18) Introducción a HTML 36
37 Formularios: atributos comunes de los controles Atributo name maxlength minlength disabled autofocus autocomplete Uso Nombre del control. Cuando se envía el formulario, se incluyen el nombre y valor del control. Máximo número de caracteres Mínimo número de caracteres Si presente, no se puede interaccionar con el control Si presente, el control recibe el foco al cargarse la página Toma valores on (por defecto) y off. Si el valor es off, el navegador no debe guardar el valor del control ni ofrecer sugerencias de autocompletado para el mismo. Computación Web (2017/18) Introducción a HTML 37
38 Formularios: atributos comunes del elemento input Atributo size readonly required multiple pattern min max step list placeholder Uso Tamaño visible del control (número de caracteres) Si presente, no se puede cambiar el valor Si presente, el control debe tomar un valor no vacío Si presente, se pueden subir múltiples valores para el control Expresión regular para validar el valor Mínimo valor en campos numéricos Máximo valor en campos numéricos Granularidad esperada para un valor numérico Listado de valores sugeridos al usuario (en combinación con el elemento datalist) Pista sobre cómo rellenar el control Computación Web (2017/18) Introducción a HTML 38
39 Formularios: agrupación de controles 1 <fieldset> 2 <legend>display</legend> 3 <div> 4 <label> 5 <input type="radio" name="c" value="0" checked> 6 Black on White 7 </label> 8 </div> 9 <div> 10 <label> 11 <input type="radio" name="c" value="1"> 12 White on Black 13 </label> 14 </div> 15 <div> 16 <label> 17 <input type="checkbox" name="g"> 18 Use grayscale 19 </label> 20 </div> 21 </fieldset> Computación Web (2017/18) Introducción a HTML 39
40 Formularios: sugerencia de valores 1 <label> 2 País <input type="text" name="pais" list="paises"> 3 </label> 4 <datalist id="paises"> 5 <option value="espa~na"> 6 <option value="portugal"> 7 <option value="andorra"> 8 <option value="francia"> 9 </datalist> Computación Web (2017/18) Introducción a HTML 40
41 Formularios: múltiples ficheros 1 <label> 2 Selecciona una o más fotos: 3 <input type="file" name="foto" multiple required> 4 </label> Computación Web (2017/18) Introducción a HTML 41
42 Compatibilidad con navegadores HTML5 está en constante evolución: Algunas características pueden no estar implementadas en determinados navegadores o versiones de navegadores. Es problemático dar soporte a navegadores antiguos y a la vez aprovechar las nuevas características. Recursos útiles: Bibliotecas Javascript, como Modernizr. Información de soporte por navegadores, como Can I Use. Computación Web (2017/18) Introducción a HTML 42
43 Ejercicios Práctica 1: Ejercicio 2.2. Computación Web (2017/18) Introducción a HTML 43
44 Referencias Rob Larsen, Beginning HTML and CSS. Wrox (2013). Acceso en Safari Capítulos 1, 2, 3, 4, 5 y 6. Especificación de HTML 5.1 del W3C: Especificación de HTML5 de WHATWG: current-work/multipage/ Computación Web (2017/18) Introducción a HTML 44
Listado de elementos o etiquetas HTML5
Listado de elementos o etiquetas HTML5 Etiqueta Función Define un comentario Define el tipo de docuemento Define
En HTML, para indicar el orden de tabulación entre los controles de un formulario se emplea
HTML completo Pregunta 1 En HTML, para indicar el orden de tabulación entre los controles de un formulario se emplea Solución: El atributo tabindex Pregunta 2 El elemento de HTML que se emplea para definir
ETIQUETAS HTML 5 Diseño de Sitios Web TUW
Etiqueta Descripción Define un comentario nueva nueva nueva nueva
Formularios HTML. Desarrollo de Aplicaciones Web Departamento Informática y Sistemas Universidad de Murcia Curso 2013/2014
Formularios HTML Desarrollo de Aplicaciones Web Departamento Informática y Sistemas Universidad de Murcia Curso 2013/2014 Declaración de un formulario Elemento clave para el desarrollo de aplicaciones
HTML/XHTML/FORMS. CI-2413 Desarrollo de aplicaciones para Internet Prof. Braulio José Solano Rojas ECCI, UCR
HTML/XHTML/FORMS CI-2413 Desarrollo de aplicaciones para Internet Prof. Braulio José Solano Rojas ECCI, UCR HTML Estructura de un documento HTML Elemento HTML HEAD TITLE META datos BODY HTML HTML
HTML5: Nuevas etiquetas semánticas. Juan Eladio Sánchez Rosas
HTML5: Nuevas etiquetas semánticas Juan Eladio Sánchez Rosas Objetivo Semantics Objetivo de la sesión Presentar y describir las nuevas etiquetas del estándar HTML5 Citar los antecedentes que derivaron
Formularios HTML. Introducción. Elementos de entrada de datos. Entrada de texto
Formularios HTML Tiempo estimado: 20min Son muchos los sitios webs que solicitan datos al usuario como, por ejemplo, sus credenciales, los datos de un nuevo producto o la confirmación de un pedido. Hasta
Etiquetas Básicas (Estructura HTML) Etiquetas Atributos Valores Descripción. Formato de Presentación Etiquetas Atributos Valores Descripción
Etiquetas Básicas (Estructura HTML) Inicio y final del documento html text link alink vlink topmargin (IE) leftmargin (IE) marginheight margin
HTML 5 : Formularios
HTML 5 : Formularios El formulario es una interfaz fundamental en las páginas web para interactuar con el usuario. Esta interacción se genera a través de variados elementos, como cajas para introducir
2- Formularios y JavaScript Course: Developing web- based applica=ons
2- Formularios y JavaScript Course: Developing web- based applica=ons Cris*na Puente, Rafael Palacios 2010- 1 Creación de formularios Formularios Un formulario HTML es una sección de un documento que contiene
Técnicas de visualización
Técnicas de visualización LENGUAJE HTML Máster en Tecnologías de la Información Geográfica Laboratori d Informació Geogràfica i de Teledetecció (LIGIT) Departament de Geografia. UAB Anna Jiménez Introducción
UNIDAD 1 GENERALIDADES HTML
UNIDAD 1 GENERALIDADES HTML GENERALIDADES HTML5 Una página web es un archivo con texto en el que se insertan diferentes etiquetas HTML, para que ese contenido pueda ser interpretado por el navegador web.
Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta ADDRESS ADDRESS CITE CITE B: NEGRITA B: NEGRITA.
En la presente tabla se hace una comparación entre las etiquetas de formato de texto. Netscape no soporta : ni (tachado). Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta
Transparencias de J2EE. Tema 2: HTML. Uploaded by Ingteleco
Transparencias de J2EE Tema 2: HTML Uploaded by Ingteleco http://ingteleco.webcindario.com ingtelecoweb@hotmail.com La dirección URL puede sufrir modificaciones en el futuro. Si no funciona contacta por
Taller de Paginas Web
Taller de Paginas Web Las páginas web son documentos de texto que se comparten en la red. La mecánica es la siguiente : Un ordenador de usuario, que llamarermos cliente, hace una petición a una direccion
HTML HyperText Markup Language. Fernando Pérez Costoya fperez@fi.upm.es
HTML HyperText Markup Language Fernando Pérez Costoya fperez@fi.upm.es Índice Definición Historia y evolución de HTML El fiasco de XHTML HTML 5: la resurrección Un tour por HTML Diseño de aplicaciones
Construcción de formularios en HTML. Formularios. Bases de Datos 2012/2013. Luis Valencia Cabrera
Construcción de formularios en HTML. Formularios Bases de Datos 2012/2013 Luis Valencia Cabrera Contenido Formularios... 2 Controles... 2 Campos de texto... 2 Selección de opciones... 3 Selección de ficheros...
MATRIZ DE VALORACIÓN O RÚBRICA. Actividad de evaluación:
MATRIZ DE VALORACIÓN O RÚBRICA Siglema: DEWE-02 Nombre del Módulo: Nombre del Alumno: Docente evaluador: Grupo: Fecha: Resultado de Aprendizaje: 1.2 Elabora páginas web estáticas haciendo uso del lenguaje
Formularios HTML (práctica)
Formularios HTML (práctica) Tiempo estimado: 20min El objeto de esta práctica es afianzar, reforzar y consolidar los conocimientos teóricos presentados en la lección. Al finalizarla, el estudiante: Habrá
Grupo de Ingeniería del Software. Conceptos básicos de formularios HTML
escuela técnica superior de ingeniería informática HTML Estático: Formularios Departamento de Lenguajes Grupo de Ingeniería del Software Noviembre 2004 Conceptos básicos de formularios HTML Los formularios
HTML5: Fundamentos de una Página Web
HTML5: Fundamentos de una Página Web Programa de Estudio HTML5: Fundamentos de una Página Web Domina el lenguaje más importante para Internet. Aprende a codificar cualquier página basándote en los estándares
Objetivos. El alumno conocerá los elementos indispensables para crear una página web. 1. Crear una página web básica utilizando html.
Objetivos El alumno conocerá los elementos indispensables para crear una página web. Al final de esta práctica el alumno podrá: 1. Crear una página web básica utilizando html. Introducción El lenguaje
HTML: Formularios. Francisco J. Martín Mateos Carmen Graciani Díaz. Dpto. Ciencias de la Computación e Inteligencia Artificial Universidad de Sevilla
Francisco J. Martín Mateos Carmen Graciani Díaz Dpto. Ciencias de la Computación e Inteligencia Artificial Universidad de Sevilla Formularios Un formulario es una zona del cuerpo de un documento HTML con
HTML5 ADAPTADO POR: YIM ISAIAS APESTEGUI FLORENTINO
HTML5 HTML v XHTML HTML5: futuro estándar que unifica HTML y XHTML, pero Aún en desarrollo Dos versiones: W3C y WHATWG XHTML 1: estándar actual, pero sin continuidad Dos formas de codificar HTML5: html
Informática General 2016 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales
UNA / AREA TRANSDEPARTAMENTAL DE ARTES MULTIMEDIALES Licenciatura en Artes Multimediales Informática General 2016 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales HTML Desarrollo
PROGRAMA FORMATIVO DE LA ESPECIALIDAD FORMATIVA
PROGRAMA FORMATIVO DE LA ESPECIALIDAD FORMATIVA PROGRAMACION HTML 5 IFCT088PO PLANES DE FORMACIÓN DIRIGIDOS PRIORITARIAMENTE A TRABAJADORES OCUPADOS PLANES DE FORMACIÓN DIRIGIDOS PRIORITARIAMENTE A TRABAJADORES
Lenguajes de marcado: HTML y XHTML
Tema 2 (primera parte) Lenguajes de marcado: HTML y XHTML http://www.flickr.com/photos/nolanus/5848333881/ 1. Conceptos básicos 2. Formatos básicos 3. Multimedia 4. Secciones de página 5. Formularios 6.
Información general. Últimas noticias
Información general Últimas noticias 1 Registro de miembros Texto informativo { Registro nuevo usuario { 2 Registro de miembros 1) Acceder a secciones privadas de la página. 2) Acceso a contenido descargable
PACK 3 CURSOS PÁGINAS WEB/PROGRAMACIÓN (HTML5, LENGUAJE DE PROGRAMACIÓN PHP Y POSICIONAMIENTO WEB)
PACK 3 CURSOS PÁGINAS WEB/PROGRAMACIÓN (HTML5, LENGUAJE DE PROGRAMACIÓN PHP Y POSICIONAMIENTO WEB) PRECIO: 20 MODALIDAD: Online DURACIÓN: 50h cada curso (Total 150h) HTML 5 OBJETIVOS: HTML5 es un nuevo
XML: HTML y XHTML. Sergio Luján Mora XML-03
XML: HTML y XHTML Sergio Luján Mora sergio.lujan@ua.es XML-03 Vídeo de esta presentación Puedes ver esta presentación en vídeo: http://www.youtube.com/watch?v=edtgmwvngjs XHTML es el lenguaje de marcado
Etiquetas que no pueden contener otras etiquetas (se cierran sobre si mismas) <etiqueta />
Referencia HTML Etiquetas Arte e Internet - Magister Artes Mediales - Universidad de Chile Todas los nombre de etiquetas y atributos deben escribirse en minusculas, los valores de los atributos deben escribirse
Desarrollo y servicios web
Desarrollo y servicios web Luisa Fernanda Rincón Pérez 2015-1 Qué vimos la clase pasada? 1.Presentación general 2. Presentación del curso 3. Conceptos introductorios e ingeniería web 4. Arquitectura web
DESCRIPCIÓN ESPECÍFICA NÚCLEO: Núcleo Sector Comercio y Servicios.
DESCRIPCIÓN ESPECÍFICA NÚCLEO: Núcleo Sector Comercio y Servicios. SUBSECTOR: Informática y Comunicación. Nombre del Módulo: Creación de páginas Webs Código: CSTI0168 total: 60 horas Objetivo General:
GUÍA N 4 DESARROLLO WEB. Programación de Software Ing. Néstor Raúl Suarez Perpiñan Página 1 de 5
Página 1 de 5 Tema: DESARROLLO WEB CON HTML5 Objetivo: Aprender y Aplicar correctamente los principales elementos del HTML Versión 5 para validación de campos FUNDAMENTOS DE HTML5 HTML5 es la más reciente
HTML. Rogelio Ferreira Escutia
HTML Rogelio Ferreira Escutia Características Básicas 2 Estructura HTML es un lenguaje basado en etiquetas. Cada etiqueta tiene un inicio y fin. Las etiquetas se identifican por los símbolos < y > 3 Inicio
2. Nuevas etiquetas de HTML5 y etiquetas que desaparecen
CURSO DE HTML5 1. Historia de HTML Potencial de HTML5 Principales novedades de HTML5 Elementos necesarios para trabajar con HTML5 Editor Navegador 2. Nuevas etiquetas de HTML5 y etiquetas que desaparecen
Documentos HTML. Introducción. Elementos. Atributos de elemento
Documentos HTML Tiempo estimado: 20min Para comenzar nuestra aventura HTML, vamos a introducir el concepto de documento HTML, un archivo de texto en formato HTML. Iniciamos la lección introduciendo el
Curso de Programación en PHP Nivel I
Curso de Programación en PHP Nivel I Facultad de Ciencia y Tecnología Oro Verde - 2012 Capítulo 2: Programación Web Algo de HTML Definición de Formularios Componentes de los Formularios Métodos de Envío
Tema: Creación de Formularios HTML
Tema: Creación de Formularios HTML 1.- Introducción La Web se ha convertido en una poderosa herramienta para las empresas que se dedican a realizar encuestas. En la actualidad es muy común acceder a páginas
2. Acción: El atributo action de la etiqueta <form> es el URL del script PHP que procesa los datos de entrada del formulario.
UNIDAD CERO Crear formularios en HTML. La creación de formularios en html es muy importante en el desarrollo de aplicaciones web dinámicas, tomando en cuenta que estos son los encargados (formularios)
HTML & CSS HTML. PARTE 3. Profesora: Ana Gómiz Escuela Arte Granada Obtubre 2014
05 HTML & CSS HTML. PARTE 3 Profesora: Ana Gómiz Escuela Arte Granada Obtubre 2014 01. Imágenes + Añadir imágenes. + Elegir el formato correcto. + Optimizar imágenes para web. Profesora: Ana Gómiz Escuela
Diseño y desarrollo Web con HTML 5, CSS y Dreamweaver CS 4
Diseño y desarrollo Web con HTML 5, CSS y Dreamweaver CS 4 Código: DWEB003 Duración: 160 Horas Objetivos: Diseño y desarrollo Web con HTML 5 y CSS Dotar al alumno de conocimientos teóricos y prácticos
EL MODELO DE CAJA CSS
EL MODELO DE CAJA CSS Sesión 10 By Ing. David Gil LA ETIQUETA HTML La etiqueta define una división o una sección en un documento HTML. La etiqueta se utiliza para agrupar bloques
DREAMWEAVER CS4 Código: 3492
DREAMWEAVER CS4 Código: 3492 Modalidad: Distancia Duración: Tipo A Objetivos: Aportar al alumno de un modo rápido y sencillo las competencias necesarias para la creación y diseño de páginas Web en Dreamweaver.
A continuación se confeccionara un formulario para el ingreso de un nombre y un botón para el envío del dato ingresado al servidor:
FORMULARIOS BAJO HTML INTRODUCCION A FORMULARIOS Un formulario permite que el visitante al sitio cargue datos y sean enviados al servidor. Es el medio ideal para registrar comentarios del visitante sobre
Creación de Páginas WEB con HTML
Universidad de Cantabria Creación de Páginas WEB con HTML Febrero-2006 Ricardo Sáez Marta Zorrilla Creacion paginas Web con HTML 1 Introducción El servicio WEB utiliza para la transferencia de información
CONTENIDOS DEL CURSO ONLINE DE DISEÑO Y DESARROLLO WEB CON HTML5, CSS Y DREAMWEAVER CS4:
Curso Online Diseño y Desarrollo Web con HTML5, CSS y Dreamweaver CS4 Completo Curso Online de Diseño y Desarrollo Web mediante el lenguaje programación HTML5, la hoja de estilos CSS y el programa de diseño
Unidad II: Lenguaje de marcado
Unidad II: Lenguaje de marcado 2.1 Introducción Un lenguaje de marcado o lenguaje de marcas es una forma de codificar un documento que, junto con el texto, incorpora etiquetas o marcas que contienen información
Unidad Didáctica 2 GENERACIÓN DE DOCUMENTOS WEB CON GUIONES DE SERVIDOR
Unidad Didáctica 2 GENERACIÓN DE DOCUMENTOS WEB CON GUIONES DE SERVIDOR 2.4 FORMULARIOS 18/10/2014 Taboada León IES San Sebastián Huelva 1 Formularios (I) Los formularios permiten al usuario introducir
Sistemas Multimedia. Herramientas multimedia en la web (HTML y Web) Universidad de Los Andes Postgrado en Computación Prof. Isabel M.
Sistemas Multimedia Universidad de Los Andes Postgrado en Computación Prof. Isabel M. Besembel Carrera Herramientas multimedia en la web (HTML y Web) 1 Web WWW (World Wide Web, w3): concebido en 1989 por
Los formularios irán delimitados por las etiquetas <FORM> y </FORM>, la cual tiene dos parámetros:
Formularios en HTML Los formularios nos sirven para solicitar información al usuario y procesarla. El formulario se compondrá de diferentes componentes como campos de texto, botones de opción, listas desplegables,...
HTML5 es el nuevo estándar de HTML. La versión anterior HTML 4.01 apareció en. entonces.
HTML5 Que es HTML5? HTML5 es el nuevo estándar de HTML La versión anterior HTML 4.01 apareció en 1999. El web ha cambiado mucho desde entonces. HTML5 todavía esta en desarrollo, pero muchos browsers ya
HTML5 y CSS3: cómo sacarles partido hoy
HTML5 y CSS3: cómo sacarles partido hoy Jose Florido Madrid Martes 22 Septiembre 2009 www.frontdays.com Objetivo del curso Mostrar el potencial de los nuevos estándares, así como de los navegadores web
Manejo de eventos en JavaScript WEB-TECHNOLOGIES
Manejo de eventos en JavaScript JUAN CARLOS CONDE RAMÍREZ WEB-TECHNOLOGIES Objetivos Entender el uso de Formularios y Eventos con JavaScript. Visualizar la importancia de delegar el manejo de eventos al
Desarrollo de sitios web con PHP y MySQL
Desarrollo de sitios web con PHP y MySQL Tema 3: Formularios José Mariano González Romano mariano@lsi.us.es Tema 3: Formularios 1. Acceso a formularios HTML desde PHP 2. El formulario de PHP 3. Subida
UNIDAD 4: NOCIONES BÁSICAS DE DISEÑO WEB (MAQUETACIÓN HTML) CURSO ELABORACIÓN DE CONTENIDOS FORMATIVOS Plan de Formación Edukanda
UNIDAD 4: NOCIONES BÁSICAS DE DISEÑO WEB (MAQUETACIÓN HTML) CURSO ELABORACIÓN DE CONTENIDOS FORMATIVOS Plan de Formación Edukanda 1 Índice 1. Introducción... 3 2. Objetivos... 4 3. El lenguaje HTML...
HTML, PHP y bases de datos
HTML, PHP y bases de datos Estrella Pulido Cañabate HTML Estructura de un documento HTML Zen and Tumbolia The Zen monk Bassui wrote a letter to one of his disciples
Introducción a HTML Estático 03/02/2017. Introducción a HTML
Introducción a HTML Grupo de Ingeniería del Software y Bases de Datos Departamento de Lenguajes y Sistemas Informáticos Universidad de Sevilla Introducción a las Aplicaciones Web La capa de está formada
DISEÑO WEB CON HTML TECNICATURA DE REDES Y SOFTWARE PROGRAMACIÓN PARA REDES
DISEÑO WEB CON HTML TECNICATURA DE REDES Y SOFTWARE PROGRAMACIÓN PARA REDES Walter Nores www.walternores.com Índice de contenido Introducción al lenguaje HTML...4 El documento web...5 Cabecera...7 Título...7
HTML. HyperText Markup Language (Lenguaje de Marcas de Hipertexto)
HTML HyperText Markup Language (Lenguaje de Marcas de Hipertexto) Introducción Un lenguaje de marcas es una forma de codificar junto con el texto, incorporando etiquetas que contienen información adicional
Introducción a CSS. Aplicaciones Web (2016/17) Jesús Arias Fisteus. Aplicaciones Web (2016/17) Introducción a CSS 1
Introducción a CSS Jesús Arias Fisteus Aplicaciones Web (2016/17) Aplicaciones Web (2016/17) Introducción a CSS 1 Parte I Introducción a CSS Aplicaciones Web (2016/17) Introducción a CSS 2 Hola Mundo!
Diseño y programaciã³n de pã ginas web
Diseño y programaciã³n de pã ginas web Objetivos Con motivo de mostrar a cada usuario cómo diseñar y programar páginas web, este curso pretende formar inicialmente al alumno sobre el lenguaje de programación
Tutorial de enlace entre Formulario Web y Servicio Web REST. Programación en Internet
Tutorial de enlace entre Formulario Web y Servicio Web REST Programación en Internet Angel Manuel Gamaza Domínguez José Miguel Otte Sainz-Aguirre Grado en Ingeniería Informática 20 de septiembre de 2016
Programación de aplicaciones WEB
Programación de aplicaciones WEB Tecnologías del lado del del cliente 1 Tecnologías del lado del cliente Estructura HTML/XHTML Presentación Hojas de estilo (CSS) Comportamiento JavaScript 2 Introducción
Arquitectura de Tecnologías Web Por César Bustamante Gutiérrez. Módulo II: Tecnologias del lado del Cliente Tema 1: HTML5. www.librosdigitales.
1 Que es HTML5? HTML5, en conjunto con CSS3, define los nuevos estándares de desarrollo web, tanto para equipos de escritorio, como para dispositivos móviles y teléfonos celulares. Se abren las puertas
PLAN DE SESIÓN. 1.1 Determina la estructura del sitio web con base en las necesidades del usuario
DATOS GENERALES: Nombre del Módulo: Diseño y elaboración de páginas web Sesión No. 1 Duración 2 horas 1.1 Determina la estructura del sitio web con base en las necesidades del usuario Estructura y compara
Extensiones. Guillermo López Mozilla Hispano
Extensiones Guillermo López Mozilla Hispano Extensiones Qué son? Programilla para extender el comportamiento/visualización de cualquier programa Mozilla Usan la misma tecnología que las aplicaciones Mozilla
Para iniciarnos en el estudio de este curso necesitamos estar familiarizados con ciertos conceptos generales, entre ellos:
Conceptos básicos de la internet y la web Para iniciarnos en el estudio de este curso necesitamos estar familiarizados con ciertos conceptos generales, entre ellos: Internet: Red mundial de computadoras
Índice. HTML HyperText Markup Language. Conceptos básicos. Qué es HTML? Diseño de servicios Web HTML 1
Índice HTML HyperText Markup Language Conceptos básicos Historia y evolución de HTML XHTML vs. HTML HTML dinámico Hojas de estilo (CSS) DOM Diseño de servicios Web 2 DATSI Qué es HTML? Lenguaje de publicación
Universidad de El Salvador Facultad Multidisciplinaria de Occidente Departamento de Ingeniería
Universidad de El Salvador Facultad Multidisciplinaria de Occidente Departamento de Ingeniería Este es un documento para producir documentos en HTML, "Lenguaje de Marcación de Hipertexto", usado en la
Introducción al lenguaje HTML
Introducción al lenguaje HTML LMSGI, módulo del ciclo de FP de Grado Superior, Administración de Sistemas Informáticos en Red Introducción histórica http://prezi.com/eumjkezdlwhj/?utm_campaign=share& utm_medium=copy&rc=ex0share
UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION
CICLO 01-2016 UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION GUIA DE LABORATORIO Nº 2 Nombre de la practica: Introducción y conceptos básicos de CSS Lugar de ejecución:
1.264 Tema 12. HTML Introducción a FrontPage
1.264 Tema 12 HTML Introducción a FrontPage HTML Subconjunto de lenguaje de marcado generalizado estándar (SGML), lenguaje descri ptivo de documentos. SGML está certificado con la norma ISO. La versión
Texto y Organización del contenido
Opciones de formateo de texto y de organización del contenido de una página. Texto y Organización del contenido Bases de Datos 2012/2013 Luis Valencia Cabrera Contenido Organización del texto. Encabezado...
Formularios. La mayoría de los elementos de entrada son visuales y pueden interactuar con el usuario.
Formularios Un formulario HTML es una sección de un documento que contiene contenido normal, código, elementos especiales llamados controles (casillas de verificación (checkboxes), radiobotones (radio
HTML HTML HTML. Diseño de Sitios Web. Qué es HTML?
Diseño de Sitios Web 5 (I) Qué es? Es un lenguaje descriptivo con el cual se describe la estructura del texto y todos los elementos que se muestran en la página. Es el método más usado para publicar documentos
Características avanzadas de HTML y CSS
Características avanzadas de HTML y CSS. 1 de 48 Características avanzadas de HTML y CSS Características avanzadas En esta etapa, que ya somos capaces de crear sin problemas un sitio web sencillo. Vamos
Para declarar un formulario se utiliza la etiqueta FORM que consta básicamente de dos atributos: <FORM ACTION ="programa" METHOD ="método">
FORMULARIOS Los formularios son por excelencia los elementos utilizados para recolectar información de los usuarios que luego es enviada al servidor para ser procesada. Están constituidos por un conjunto
Diseño web. Fundamentos de CSS. Informática 4º ESO
Diseño web Fundamentos de CSS Informática 4º ESO Cascading Style Sheets HTML está bastante limitado a la hora de dar formato a las páginas web HTML fue inventado por científicos Énfasis en el contenido
DISEÑO Y DESARROLLO WEB CON HTML 5, CSS DREAMWEAVER CS4
DISEÑO Y DESARROLLO WEB CON HTML 5, CSS DREAMWEAVER CS4 Código: 1413005 OBJETIVOS: Para diseñar y publicar una página Web, saber maquetar una página Web, saber crear animaciones, etc. CONTENIDOS: DISEÑO
MANUAL PRACTICO DE HTML
MANUAL PRACTICO DE HTML 1 La estructura tiene tres partes cabeza, cuerpo, cierre o fin. MI PC... Aquí iría el contenido que ve el usuario final
METODOLOGÍA DE DESARROLLO DE CONTENIDOS WEB ACCESIBLES ÍNDICE DE CONTENIDO
ÍNDICE DE CONTENIDO Metodología de desarrollo de contenidos web accesibles...1 Estándares de accesibilidad de la UE...2 Desglose por roles...2 Creación de contenidos...2 Diseño...3 Programación...4 Anexo
CSS BÁSICO Hojas de Estilo. Iván Martínez Toro
CSS BÁSICO Hojas de Estilo Iván Martínez Toro ÍNDICE DECONTENIDOS Introducción al CSS. Cómo es CSS? Sintaxis general. Reglas. Selectores. Class. Divy Span. Uso de las hojas de estilo. CSS (CASCADING STYLE
Bases de Datos. Marta Elena Zorrilla Pantaleón. Rafael Duque Medina DPTO. DE MATEMÁTICAS, ESTADÍSTICA Y COMPUTACIÓN
Bases de Datos Tema 05. Prototipo de una aplicación de base de datos Marta Elena Zorrilla Pantaleón Rafael Duque Medina DPTO. DE MATEMÁTICAS, ESTADÍSTICA Y COMPUTACIÓN Este tema se publica bajo Licencia:
Práctica 02. Formularios
Práctica 02. Formularios Página 1 El objetivo de esta práctica es desarrollar un formulario el cual podrá ser visto desde cualquier navegador y desde cualquier equipo de cómputo. En esta práctica aprenderás
Formularios HTML5 El código HTML
Formularios HTML5 Vamos a diseñar un formulario que cumpla con lo siguiente: El cursor estará situado por defecto dentro del primer campo, para que el usuario pueda escribir sin tener que hacer clic en
TEMA 9 CREACIÓN DE PÁGINAS WEB
TEMA 9 CREACIÓN DE PÁGINAS WEB OBJETIVOS Conocer las páginas web y sus elementos. Insertar tablas, capas, enlaces en las páginas web. Crear páginas web con NVU. Crear un sitio web. Configurar un sitio
Desarrollo de sitios Web con HTML5, CSS3, jquery y Responsive Web Design
Desarrollo de sitios Web con HTML5, CSS3, jquery y Responsive Web Design Nivel básico. Duración: 20 horas. Lección 1. Creando tu primera página Web en HTML5. Qué es HTML5 y CSS3? Términos comunes utilizados
FORMULARIO HTML PREPARACION DEL FORMULARIO. Que información debes solicitar al visitante de tu web?
FORMULARIO HTML Con este apunte se realizara un sencillo formulario que creará un nuevo mensaje de e-mail en el computador del usuario; y dicho mensaje se rellenará con tu dirección de e-mail (como destinatario),
Bases del HTML CÓMO SE HACE LA WEB ENTENDIENDO LA ESTRUCTURA DE HTML. Sesión 3 10/09/14. Orígenes. Orígenes
10/09/14 CÓMO SE HACE LA WEB LO QUE VES Bases del HTML CÓMO ES CREADA Sitios pequeños utilizan solamente HTML y CSS. Sesión 3 Sitios más grandes usan CMS, herramientas de blog o comercio de e-commerce.
Practicas de HTML. En un procesador de texto cualquiera teclear el siguiente código
7 Practicas de HTML 1. Pagina básica En un procesador de texto cualquiera teclear el siguiente código Mi primera pagina Web Esta es mi primera pagina, es muy
2.5. Manipular objetos y formularios en una página Web.
2.5. Manipular objetos y formularios en una página Web. Un formulario es una página web en la cual el usuario puede introducir información que posteriormente recibiremos para que sea procesada, por alguna
escuela técnica superior de ingeniería informática
Versión original: Pablo Fernández (noviembre 2006) Actualización: P. Fernandez. Cambios menores en animaciones (Noviembre 2009) Tiempo: 2h escuela técnica superior de ingeniería informática HTML dinámico:
Índice. Capítulo 1. Documentos HTML5... 1
Índice Capítulo 1. Documentos HTML5... 1 1.1 Componentes básicos... 1 1.2 Estructura global... 2 ... 2 ... 2 ... 3 ... 4 ... 5 ... 6 ... 7 1.3 Estructura
www.librosweb.es Introducción a XHTML Javier Eguíluz Pérez
Introducción a XHTML Javier Eguíluz Pérez Sobre este libro... Los contenidos de este libro están bajo una licencia Creative Commons Reconocimiento - No Comercial - Sin Obra Derivada 3.0 (http://creativecommons.org/licenses/by-nc-nd/3.0/deed.es)
Conceptos Teóricos de HTML5 (material extra adicional libro):
Temario de Examen Unidad I Materia: Informática Catedráticos: Víctor Aquino/Débora Santizo Temas: Uso del programa Sublime Text Forma Correcta de guardar archivos html y css (.html y.css) Uso de la etiquetas
CapÍtulo 3: Manejo de Forms.
CapÍtulo 3: Manejo de Forms. El mecanismo básico de interacción entre el usuario y un web-site esta dado por el uso de formularios html, el server envía un formulario que el browser muestra en pantalla
Tomar información por pantalla con JavaScript
Tomar información por pantalla con JavaScript Para lograr interactividad con nuestros usuarios, es necesario reaccionar a sus acciones o permitir que estos ingresen información para que sea manipulada,
Introducción a las aplicaciones WEB
Departamento de Sistemas Informáticos y Computación Universidad Complutense de Madrid 3 de mayo de 2010 Qué es Internet? I LAN: Local Area Network, red de ámbito local. Qué es Internet? II Qué es Internet?
Ministerio de Educación, Cultura y Deporte. HTLM5 en la educación. Módulo 12: Formularios y JavaScript.
Ministerio de Educación, Cultura y Deporte. HTLM5 en la educación Módulo 12: Formularios y JavaScript. Instituto Nacional de Tecnologías Educativas y de Formación del Profesorado 2012 Formularios y JavaScript