El lenguaje HTML - WordPress.com › 2014 › 06 › 02... · Atributos de tablas y sus miembros...
Transcript of El lenguaje HTML - WordPress.com › 2014 › 06 › 02... · Atributos de tablas y sus miembros...
![Page 1: El lenguaje HTML - WordPress.com › 2014 › 06 › 02... · Atributos de tablas y sus miembros Border: define el grosor del borde de la tabla. Align: alineación del contenido horizontalmente](https://reader036.fdocumento.com/reader036/viewer/2022062603/5f02e7cd7e708231d4069805/html5/thumbnails/1.jpg)
Unidad 1.- Fundamentos de sitios web.
El lenguaje HTML
Desarrollo de aplicaciones Web.
Felipe LC
![Page 2: El lenguaje HTML - WordPress.com › 2014 › 06 › 02... · Atributos de tablas y sus miembros Border: define el grosor del borde de la tabla. Align: alineación del contenido horizontalmente](https://reader036.fdocumento.com/reader036/viewer/2022062603/5f02e7cd7e708231d4069805/html5/thumbnails/2.jpg)
La actividad #1
¿En qué consistió la actividad 1?
¿Qué conceptos aprendimos?– Demos algunos ejemplos.
¿Qué aprendimos sobre HTML?
UTIM - Desarrollo de aplicaciones web :: Felipe LC
![Page 3: El lenguaje HTML - WordPress.com › 2014 › 06 › 02... · Atributos de tablas y sus miembros Border: define el grosor del borde de la tabla. Align: alineación del contenido horizontalmente](https://reader036.fdocumento.com/reader036/viewer/2022062603/5f02e7cd7e708231d4069805/html5/thumbnails/3.jpg)
El lenguaje HTML.
Define la estructura y el contenido de un documento.
El documento puede contener una multitud de elementos.
UTIM - Desarrollo de aplicaciones web :: Felipe LC
![Page 4: El lenguaje HTML - WordPress.com › 2014 › 06 › 02... · Atributos de tablas y sus miembros Border: define el grosor del borde de la tabla. Align: alineación del contenido horizontalmente](https://reader036.fdocumento.com/reader036/viewer/2022062603/5f02e7cd7e708231d4069805/html5/thumbnails/4.jpg)
Documento HTML
<html> <head> <title>Document title</title> </head> <body> Documento content </body><html>
UTIM - Desarrollo de aplicaciones web :: Felipe LC
![Page 5: El lenguaje HTML - WordPress.com › 2014 › 06 › 02... · Atributos de tablas y sus miembros Border: define el grosor del borde de la tabla. Align: alineación del contenido horizontalmente](https://reader036.fdocumento.com/reader036/viewer/2022062603/5f02e7cd7e708231d4069805/html5/thumbnails/5.jpg)
Los elementos del HTML.
Los elementos HTML contienen atributos que identifican, definen y dan forma para modificar su apariencia y como deben adecuarse al documento y su contenido.
Bordes Nombre Identificador Estilos Clase Tamaños Espacios Entre otros atributos que difieren entre elementos.
UTIM - Desarrollo de aplicaciones web :: Felipe LC
![Page 6: El lenguaje HTML - WordPress.com › 2014 › 06 › 02... · Atributos de tablas y sus miembros Border: define el grosor del borde de la tabla. Align: alineación del contenido horizontalmente](https://reader036.fdocumento.com/reader036/viewer/2022062603/5f02e7cd7e708231d4069805/html5/thumbnails/6.jpg)
Elementos para formato de texto.
<b> texto en negrita
<big> texto grande <small> texto pequeño
<strong> texto resaltado tipo negrita <sup> texto superíndice
<sub> texto subíndice
<i> texto en cursiva
<u> texto subrayado
UTIM - Desarrollo de aplicaciones web :: Felipe LC
![Page 7: El lenguaje HTML - WordPress.com › 2014 › 06 › 02... · Atributos de tablas y sus miembros Border: define el grosor del borde de la tabla. Align: alineación del contenido horizontalmente](https://reader036.fdocumento.com/reader036/viewer/2022062603/5f02e7cd7e708231d4069805/html5/thumbnails/7.jpg)
Ejercicio
Crea un documento HTML.
Utiliza elementos de formato de texto en el contenido del documento.
UTIM - Desarrollo de aplicaciones web :: Felipe LC
![Page 8: El lenguaje HTML - WordPress.com › 2014 › 06 › 02... · Atributos de tablas y sus miembros Border: define el grosor del borde de la tabla. Align: alineación del contenido horizontalmente](https://reader036.fdocumento.com/reader036/viewer/2022062603/5f02e7cd7e708231d4069805/html5/thumbnails/8.jpg)
Tablas en HTML
En HTML el elemento <table> define una tabla, los miembros de una tabla son: <tr> Fila <th> Encabezado de fila o columna <td> Celda <caption> Etiqueta o título de tabla
UTIM - Desarrollo de aplicaciones web :: Felipe LC
![Page 9: El lenguaje HTML - WordPress.com › 2014 › 06 › 02... · Atributos de tablas y sus miembros Border: define el grosor del borde de la tabla. Align: alineación del contenido horizontalmente](https://reader036.fdocumento.com/reader036/viewer/2022062603/5f02e7cd7e708231d4069805/html5/thumbnails/9.jpg)
Tablas y XHTML.
XHTML define para elementos que permitan estructurar una tabla: <thead> Encabezado de la tabla <tbody> Cuerpo de la tabla <tfoot> Pie de la tabla
UTIM - Desarrollo de aplicaciones web :: Felipe LC
![Page 10: El lenguaje HTML - WordPress.com › 2014 › 06 › 02... · Atributos de tablas y sus miembros Border: define el grosor del borde de la tabla. Align: alineación del contenido horizontalmente](https://reader036.fdocumento.com/reader036/viewer/2022062603/5f02e7cd7e708231d4069805/html5/thumbnails/10.jpg)
Ejemplo de tabla HTML.
UTIM - Desarrollo de aplicaciones web :: Felipe LC
![Page 11: El lenguaje HTML - WordPress.com › 2014 › 06 › 02... · Atributos de tablas y sus miembros Border: define el grosor del borde de la tabla. Align: alineación del contenido horizontalmente](https://reader036.fdocumento.com/reader036/viewer/2022062603/5f02e7cd7e708231d4069805/html5/thumbnails/11.jpg)
Ejemplo de tabla XHTML.
UTIM - Desarrollo de aplicaciones web :: Felipe LC
![Page 12: El lenguaje HTML - WordPress.com › 2014 › 06 › 02... · Atributos de tablas y sus miembros Border: define el grosor del borde de la tabla. Align: alineación del contenido horizontalmente](https://reader036.fdocumento.com/reader036/viewer/2022062603/5f02e7cd7e708231d4069805/html5/thumbnails/12.jpg)
Atributos de tablas y sus miembros
Border: define el grosor del borde de la tabla. Align: alineación del contenido horizontalmente
(Right, Center, Left, Justify). VAlign: alineación del contenido verticalmente
(Top, Middle, Bottom). Bgcolor: define el color de fondo. Bordercolor: define el color del borde. Cellspacing: define el espacio entre celdas. Cellpadding: define el espacio entre el borde de
celda y su contenido. Colspan: (en td) define el número de columnas
que debe combinar la celda.UTIM - Desarrollo de aplicaciones web :: Felipe LC
![Page 13: El lenguaje HTML - WordPress.com › 2014 › 06 › 02... · Atributos de tablas y sus miembros Border: define el grosor del borde de la tabla. Align: alineación del contenido horizontalmente](https://reader036.fdocumento.com/reader036/viewer/2022062603/5f02e7cd7e708231d4069805/html5/thumbnails/13.jpg)
Ejemplo de tabla XHTML con atributos definidos.
UTIM - Desarrollo de aplicaciones web :: Felipe LC
![Page 14: El lenguaje HTML - WordPress.com › 2014 › 06 › 02... · Atributos de tablas y sus miembros Border: define el grosor del borde de la tabla. Align: alineación del contenido horizontalmente](https://reader036.fdocumento.com/reader036/viewer/2022062603/5f02e7cd7e708231d4069805/html5/thumbnails/14.jpg)
Links o hipervínculos.
El elemento <a> define un hipervínculo, pero deben considerarse sus atributos para que este funcione apropiadamente: href: URL o dirección hacia la que apunta el link. target: Ventana en la cual se pretende abrir el
link(_blank, parent, [nombre del iframe], …). title: Define el texto auxiliar que se mostrará
cuando el usuario coloque el puntero sobre el link.
El texto del link: se escribe entre <a>[texto que se verá en el navegador]</a>
UTIM - Desarrollo de aplicaciones web :: Felipe LC
![Page 15: El lenguaje HTML - WordPress.com › 2014 › 06 › 02... · Atributos de tablas y sus miembros Border: define el grosor del borde de la tabla. Align: alineación del contenido horizontalmente](https://reader036.fdocumento.com/reader036/viewer/2022062603/5f02e7cd7e708231d4069805/html5/thumbnails/15.jpg)
Links o hipervínculos.
UTIM - Desarrollo de aplicaciones web :: Felipe LC
![Page 16: El lenguaje HTML - WordPress.com › 2014 › 06 › 02... · Atributos de tablas y sus miembros Border: define el grosor del borde de la tabla. Align: alineación del contenido horizontalmente](https://reader036.fdocumento.com/reader036/viewer/2022062603/5f02e7cd7e708231d4069805/html5/thumbnails/16.jpg)
Listas
Para crear listas se utilizan los elementos: <UL>: Unordered list <OL>: Ordered list
Para definir los miembros de una lista se utiliza:
<LI> List item
UTIM - Desarrollo de aplicaciones web :: Felipe LC
![Page 17: El lenguaje HTML - WordPress.com › 2014 › 06 › 02... · Atributos de tablas y sus miembros Border: define el grosor del borde de la tabla. Align: alineación del contenido horizontalmente](https://reader036.fdocumento.com/reader036/viewer/2022062603/5f02e7cd7e708231d4069805/html5/thumbnails/17.jpg)
Listas
UTIM - Desarrollo de aplicaciones web :: Felipe LC
![Page 18: El lenguaje HTML - WordPress.com › 2014 › 06 › 02... · Atributos de tablas y sus miembros Border: define el grosor del borde de la tabla. Align: alineación del contenido horizontalmente](https://reader036.fdocumento.com/reader036/viewer/2022062603/5f02e7cd7e708231d4069805/html5/thumbnails/18.jpg)
Definición de listas
En las listas definidas los elementos incluyen una descripción: <DL>: Lista definida
Para definir los miembros de una lista definida se utiliza:
<DT> Define el elemento de la lista<DD> Define la descripción del elemento
UTIM - Desarrollo de aplicaciones web :: Felipe LC
![Page 19: El lenguaje HTML - WordPress.com › 2014 › 06 › 02... · Atributos de tablas y sus miembros Border: define el grosor del borde de la tabla. Align: alineación del contenido horizontalmente](https://reader036.fdocumento.com/reader036/viewer/2022062603/5f02e7cd7e708231d4069805/html5/thumbnails/19.jpg)
Definición de listas
UTIM - Desarrollo de aplicaciones web :: Felipe LC
![Page 20: El lenguaje HTML - WordPress.com › 2014 › 06 › 02... · Atributos de tablas y sus miembros Border: define el grosor del borde de la tabla. Align: alineación del contenido horizontalmente](https://reader036.fdocumento.com/reader036/viewer/2022062603/5f02e7cd7e708231d4069805/html5/thumbnails/20.jpg)
Formularios
Para crear formularios se utiliza <FORM>.
Un formulario representa la estructura de los datos que pretenden enviarse a un destino como. Objeto (que tiene sus atributos).
UTIM - Desarrollo de aplicaciones web :: Felipe LC
![Page 21: El lenguaje HTML - WordPress.com › 2014 › 06 › 02... · Atributos de tablas y sus miembros Border: define el grosor del borde de la tabla. Align: alineación del contenido horizontalmente](https://reader036.fdocumento.com/reader036/viewer/2022062603/5f02e7cd7e708231d4069805/html5/thumbnails/21.jpg)
Elementos de Formularios
<input> elementos de entrada (existen diferentes tipos de elementos de entrada).
<textarea> área de texto. <select> elemento de selección
(Combobox) <option> opción del elemento de
selección.
UTIM - Desarrollo de aplicaciones web :: Felipe LC
![Page 22: El lenguaje HTML - WordPress.com › 2014 › 06 › 02... · Atributos de tablas y sus miembros Border: define el grosor del borde de la tabla. Align: alineación del contenido horizontalmente](https://reader036.fdocumento.com/reader036/viewer/2022062603/5f02e7cd7e708231d4069805/html5/thumbnails/22.jpg)
Atributos de Formulario y sus elementos.
Action: define la url de destino del formulario. Method: define la forma de envío del formulario
(Get, Post) Name: define el nombre del elemento. Type: define el tipo de elemento de entrada. Value: valor del elemento del formulario. Id: identificador del elemento. Enable: elemento habilitado. Readonly: solo lectura. Size: tamaño del elemento. Maxsize: tamaño máximo del elemento.
UTIM - Desarrollo de aplicaciones web :: Felipe LC
![Page 23: El lenguaje HTML - WordPress.com › 2014 › 06 › 02... · Atributos de tablas y sus miembros Border: define el grosor del borde de la tabla. Align: alineación del contenido horizontalmente](https://reader036.fdocumento.com/reader036/viewer/2022062603/5f02e7cd7e708231d4069805/html5/thumbnails/23.jpg)
Formulario: Tipos de <Input type=“[tipo]”>
Button: Botón. Checkbox: Cuadro de selección multiple (Si-No). File: Botón para seleccionar un archivo. Hidden: Elemento oculto. Password: Cuadro de texto para contraseña. Radio: Radio button para selección única. Reset: Botón para limpiar todos los valores del
formulario. Submit: Botón para enviar el formulario. Text: Cuadro de texto.
UTIM - Desarrollo de aplicaciones web :: Felipe LC
![Page 24: El lenguaje HTML - WordPress.com › 2014 › 06 › 02... · Atributos de tablas y sus miembros Border: define el grosor del borde de la tabla. Align: alineación del contenido horizontalmente](https://reader036.fdocumento.com/reader036/viewer/2022062603/5f02e7cd7e708231d4069805/html5/thumbnails/24.jpg)
Formulario
UTIM - Desarrollo de aplicaciones web :: Felipe LC
![Page 25: El lenguaje HTML - WordPress.com › 2014 › 06 › 02... · Atributos de tablas y sus miembros Border: define el grosor del borde de la tabla. Align: alineación del contenido horizontalmente](https://reader036.fdocumento.com/reader036/viewer/2022062603/5f02e7cd7e708231d4069805/html5/thumbnails/25.jpg)
Formulario
UTIM - Desarrollo de aplicaciones web :: Felipe LC
![Page 26: El lenguaje HTML - WordPress.com › 2014 › 06 › 02... · Atributos de tablas y sus miembros Border: define el grosor del borde de la tabla. Align: alineación del contenido horizontalmente](https://reader036.fdocumento.com/reader036/viewer/2022062603/5f02e7cd7e708231d4069805/html5/thumbnails/26.jpg)
Imágenes en HTML
El elemento <img> define la inclusión de una imagen. Su atributo principal es src (Source -
recurso) donde se especifica la url (ruta de ubicación del recurso) de la imagen.
Comparte también otros atributos con los demás elementos de HTML.
<img src=“url de la imagen . Extensión” >Ej: <img src=“img1.jpg” >
UTIM - Desarrollo de aplicaciones web :: Felipe LC
![Page 27: El lenguaje HTML - WordPress.com › 2014 › 06 › 02... · Atributos de tablas y sus miembros Border: define el grosor del borde de la tabla. Align: alineación del contenido horizontalmente](https://reader036.fdocumento.com/reader036/viewer/2022062603/5f02e7cd7e708231d4069805/html5/thumbnails/27.jpg)
Imágenes en HTML
UTIM - Desarrollo de aplicaciones web :: Felipe LC
![Page 28: El lenguaje HTML - WordPress.com › 2014 › 06 › 02... · Atributos de tablas y sus miembros Border: define el grosor del borde de la tabla. Align: alineación del contenido horizontalmente](https://reader036.fdocumento.com/reader036/viewer/2022062603/5f02e7cd7e708231d4069805/html5/thumbnails/28.jpg)
Ejercicio:
Escribir el código html que de forma a la presentación de los datos personales: Nombre Apellidos Edad Asignaturas que cursa. Comentario acerca de HTML.
UTIM - Desarrollo de aplicaciones web :: Felipe LC
![Page 29: El lenguaje HTML - WordPress.com › 2014 › 06 › 02... · Atributos de tablas y sus miembros Border: define el grosor del borde de la tabla. Align: alineación del contenido horizontalmente](https://reader036.fdocumento.com/reader036/viewer/2022062603/5f02e7cd7e708231d4069805/html5/thumbnails/29.jpg)
Ejercicio:
Escribir el código html que genere una tabla con los datos personales (4 filas + encabezados de columna): Nombre Apellidos Edad Asignaturas que cursa. Comentario acerca de HTML.
UTIM - Desarrollo de aplicaciones web :: Felipe LC
![Page 30: El lenguaje HTML - WordPress.com › 2014 › 06 › 02... · Atributos de tablas y sus miembros Border: define el grosor del borde de la tabla. Align: alineación del contenido horizontalmente](https://reader036.fdocumento.com/reader036/viewer/2022062603/5f02e7cd7e708231d4069805/html5/thumbnails/30.jpg)
Ejercicio:
Escribir el código html que represente en forma de lista ordenada y desordenada los registros de la tabla anterior: Nombre y Apellidos.
UTIM - Desarrollo de aplicaciones web :: Felipe LC
![Page 31: El lenguaje HTML - WordPress.com › 2014 › 06 › 02... · Atributos de tablas y sus miembros Border: define el grosor del borde de la tabla. Align: alineación del contenido horizontalmente](https://reader036.fdocumento.com/reader036/viewer/2022062603/5f02e7cd7e708231d4069805/html5/thumbnails/31.jpg)
Meta etiquetas (Meta tags)
El elemento <meta> describe los metadatos para el documento HTML, se agregan dentro de <head></head>, no son visibles en el contenido (en el navegador). Metadatos: Conjunto de datos que describen
de forma más específica y detallada el recurso. Ejemplo:
En HTML, Idioma del documento, fecha de revisión, autor, descripción, codificación de caracteres, entre otras más.
En fotografía, Resolución, apertura focal, distancia focal, sensibilidad ISO, geolocalización, fecha y hora, tamaño del archivo, etc.
UTIM - Desarrollo de aplicaciones web :: Felipe LC
![Page 32: El lenguaje HTML - WordPress.com › 2014 › 06 › 02... · Atributos de tablas y sus miembros Border: define el grosor del borde de la tabla. Align: alineación del contenido horizontalmente](https://reader036.fdocumento.com/reader036/viewer/2022062603/5f02e7cd7e708231d4069805/html5/thumbnails/32.jpg)
Meta etiquetas (Meta tags)
A continuación se enlista algunos metadatos: <meta name="keywords" content=“[palabras
clave separadas por coma], desarrollo web, aplicaciones, html, css" />
<meta name="description" content=“Descripción del documento." />
<meta name="author" content=“Autor del documento" />
<meta http-equiv="content-type" content="text/html;charset=[codificación del documento: UTF-8], ISO 8859-1, etc." />
Generador de metatags en línea: http://www.metatags.com.mx/generador-de-metatags.php
UTIM - Desarrollo de aplicaciones web :: Felipe LC
![Page 33: El lenguaje HTML - WordPress.com › 2014 › 06 › 02... · Atributos de tablas y sus miembros Border: define el grosor del borde de la tabla. Align: alineación del contenido horizontalmente](https://reader036.fdocumento.com/reader036/viewer/2022062603/5f02e7cd7e708231d4069805/html5/thumbnails/33.jpg)
Meta etiquetas (Meta tags) - Ejemplo
UTIM - Desarrollo de aplicaciones web :: Felipe LC
![Page 34: El lenguaje HTML - WordPress.com › 2014 › 06 › 02... · Atributos de tablas y sus miembros Border: define el grosor del borde de la tabla. Align: alineación del contenido horizontalmente](https://reader036.fdocumento.com/reader036/viewer/2022062603/5f02e7cd7e708231d4069805/html5/thumbnails/34.jpg)
Meta etiquetas (Meta tags) - Ejemplo
UTIM - Desarrollo de aplicaciones web :: Felipe LC