Unidad 1.- Fundamentos de sitios web. El lenguaje HTML. Desarrollo de aplicaciones Web. Felipe LC

Tamaño: px

Comenzar la demostración a partir de la página:

Download "Unidad 1.- Fundamentos de sitios web. El lenguaje HTML. Desarrollo de aplicaciones Web. Felipe LC"

Luis Miguel Arroyo Cárdenas
hace 6 años
Vistas:

1 Unidad 1.- Fundamentos de sitios web. El lenguaje HTML Desarrollo de aplicaciones Web. Felipe LC

2 La actividad #1 En qué consistió la actividad 1? Qué conceptos aprendimos? Demos algunos ejemplos. Qué aprendimos sobre HTML?

3 El lenguaje HTML. Define la estructura y el contenido de un documento. El documento puede contener una multitud de elementos.

4 Documento HTML <html> <head> <title>document title</title> </head> <body> Documento content </body> <html>

5 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.

6 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

7 Ejercicio Crea un documento HTML. Utiliza elementos de formato de texto en el contenido del documento.

8 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

9 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

10 Ejemplo de tabla HTML.

11 Ejemplo de tabla XHTML.

12 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.

13 Ejemplo de tabla XHTML con atributos definidos.

14 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>

15 Links o hipervínculos.

16 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

17 Listas

18 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

19 Definición de listas

20 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).

21 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.

22 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.

23 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.

24 Formulario

25 Formulario

26 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 >

27 Imágenes en HTML

28 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.

29 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.

30 Ejercicio: Escribir el código html que represente en forma de lista ordenada y desordenada los registros de la tabla anterior: Nombre y Apellidos.

31 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.

32 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 , etc." /> Generador de metatags en línea:

33 Meta etiquetas (Meta tags) - Ejemplo

34 Meta etiquetas (Meta tags) - Ejemplo

Documentos relacionados

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