El lenguaje HTML - WordPress.com › 2014 › 06 › 02... · Atributos de tablas y sus miembros...

Unidad 1.- Fundamentos de sitios web.

El lenguaje HTML

Desarrollo de aplicaciones Web.

Felipe LC

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

El lenguaje HTML.

Define la estructura y el contenido de un documento.

El documento puede contener una multitud de elementos.


Documento HTML

<html> <head> <title>Document title</title> </head> <body> Documento content </body><html>


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.


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


Ejercicio

Crea un documento HTML.

Utiliza elementos de formato de texto en el contenido del documento.


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


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


Ejemplo de tabla HTML.


Ejemplo de tabla XHTML.


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

Ejemplo de tabla XHTML con atributos definidos.


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>


Links o hipervínculos.


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


Listas


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


Definición de listas


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


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.


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.


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.


Formulario


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


Imágenes en HTML


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.


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.


Ejercicio:

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


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.


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


http://www.metatags.com.mx/generador-de-metatags.php

Meta etiquetas (Meta tags) - Ejemplo


El lenguaje HTML - WordPress.com › 2014 › 06 › 02... · Atributos de tablas y sus miembros...

Documents

Transcript of El lenguaje HTML - WordPress.com › 2014 › 06 › 02... · Atributos de tablas y sus miembros...