3. Que es una etiqueta y cual es su sintáxis para su manejo en html5?
4. Etiquetas básicas que maneja html5 con ejemplos
5. Manejo de tablas en Html5, Realizar un ejemplo
5. Manejo de formularios en HTML, realizar un ejemplo
Nota: insertar videos que nos visualicen como trabajar con las etiquetas anteriores...
Actividad Html5
1. Crear una tabla en Html5 con la hora, los dias de la semana y las clases que reciben por dia y en la parte superior debe aparecer horario de clase y una imagen que tenga ver con ingeniería o tecnolgía de sistemas.
2. Realizar el siguiente formulario con codigo Html5....
Nota: al terminar cada punto tomarle una foto a la imagen y subirla al igual que codigo html guardado como txt... e insertarlo en el sitio Web de cada uno....
Crea tu propia web gratis: https://www.webnode.esActividad 2
HISTORIA DEL HTML
¿Que es html?
EL HTML es un lenguaje de programación para la elaboración de páginas web, basado en el uso de etiquetas encerradas por corchetes angulares (<>) el cual se utiliza para traducir la estructura y la información en forma de texto, con la posibilidad de agregar objetos como imágenes, videos etc. En la actualidad el HTML es complementado por otras tecnologías como las Hojas de Estilo en Cascada (CSS), el JavaScript entre otras.
Creador del html
El origen del lenguaje HTML se remonta al físico Tim Berners-Lee, un trabajador del CERN (Organización Europea para la Investigación Nuclear) quien a finales de 1989 propuso el lenguaje HTML junto con el protocolo HTTP, cuya finalidad era crear un medio para poder compartir información entre diversos “grandes” físicos de la época que trabajaban por todo el mundo.
Orígenes del HTML
El primer documento que se publicó de manera formal, sobre la estructura del HTML se publicó en el año de 1991 con el nombre de: “HTML Tags“, simplemente texto en donde se explican las etiquetas que se usan en HTML. Este documento aun se encuentra disponible para su consulta en la web: HTML Tags.
Tal y como explica el documento, en HTML se utilizan etiquetas de apertura y de cierre (solo en algunas excepciones no) en donde se abre con los corchetes angulares y se cierra de igual manera con los corchetes pero anteponiendo un (/).
Es decir: <Title></Title>
Versiones de HTML
El primero en salir fue el HTML 1, sin embargo no fue considerado un estándar, por lo que muchas veces se considera al HTML 2 como la primera versión del HTML.
HTML 2: Presentado en el año de 1995, el HTML 2 es considerado la primera versión del HTML, el cual no soportaba tablas y donde la declaración explícita de los elementos body, html y head es opcional.
HTML 3.2: Esta versión se lanzó en el año de 1997 gracias al organismo de estandarización llamado W3C (World Wide Web Consortium). El cual incorporó los últimos avances de las páginas web como applets de Java y texto que fluye alrededor de las imágenes.
HTML 4.0: Lanzada en 1998. Entre sus novedades más destacadas se encuentran las hojas de estilos CSS, la posibilidad de incluir pequeños programas o scripts en las páginas web, mejora de la accesibilidad de las páginas diseñadas, tablas complejas y mejoras en los formularios.
HTML 4.01: salió a la luz en 1999 como una revisión y actualización de la versión HTML 4.0, por lo que no incluye novedades significativas.
HTML 5: quinta revisión importante del lenguaje básico de la World Wide Web, el cual especifica dos variantes de sintaxis para HTML: el clásico HTML (text/html), y la variante conocida como HTML5 y una variante XHTML conocida como sintaxis XHTML5. Este nuevo estándar aun no es tan utilizado pero su potencial es mucho mayor a las versiones anteriores, el cual incluye interesantes mejoras como nuevos elementos y etiquetas.
El HTML (Hyper Text Markup Language) es el lenguaje de programación con el que se escriben las páginas web. Es un lenguaje muy sencillo que permite confeccionar archivos de texto mostrándolo de forma estructurada y atractiva, con enlaces (hyperlinks) que hacen referencia a otros documentos o fuentes de información relacionada, y que permite incorporar archivos multimedia como gráficos, sonidos, imágenes, videos, etc.
El HTML fue creado originalmente por Tim Berners-Lee. Luego en los años 90 se desarrollo con el crecimiento de la Web (Internet). Durante este tiempo, el HTML se ha desarrollado gracias a la colaboración de todos los programadores y usuarios de Internet.
El HTML ha pasado de varias versiones unas más sencillas y otras mucho más complejas y a pesar de no haberse logrando nunca un consenso en las discusiones sobre los estándares del HTML, y así en el año 1996 se llego a la versión 3.2 de HTML que fue una de las más sólidas y completas sobre la que posteriormente se desarrollaría el HTML que actualmente usamos.
Esta evolución tan anárquica del HTML ha supuesto toda una serie de inconvenientes y deficiencias que se han superado gracias a la introducción de nuevas tecnologías que ayudaron a organizar, perfeccionar y automatizar el funcionamiento de las páginas web. Entre ellas podemos nombrar las CSS (Cascading Style Sheets u Hojas de Estilo en Cascada), el lenguaje JavaScript, etc.
Otro inconveniente que ha tenido el HTML ha sido la gran variedad de navegadores existentes en el mercado que no son capaces de interpretar de igual manera el código de las páginas web, por lo que obligan al webmaster o encargado de las páginas web, a comprobar que la mayoría de los navegadores leen correctamente las páginas web.
Además de los navegadores necesitaremos otra herramienta importante como son los editores de HTML. Es recomendable en un principio usar el Bloc de notas, para poder familiarizarnos lo antes posible con el código y prestarle la máxima atención al código HTML. Más adelante veremos otros editores de HTML.
html es un lenguaje de programacion que ha ido evolucionando actualmente contamos con html5 que es la ultima version, actualmente cuenta tambien con herramientas tecnologicas como son css y javascript, html inicialmente fue creado con el fin de transmitir informacion entre grandes fisicos, se dice que la primer version es html2 pues la primera no fue considerada un estandar,y asi fue evolucionando html 3.2, 4.0, 4.01 y el mas importante que tenemos actualmente html5.
imagen de:
https://www.identi.li/index.php?topic=160473 (año 2015).
Comentario
El video explica breve pero explicitamente cual es la finalidad de html, su historia, porque es importante y cuales son las tecnologias asociadas a este lenguaje, al ver este video se resolveran muchas de las preguntas usuales y las no tan ususales respecto a este importante lenguaje de programacion.
Estructura basica de una pagina web en HTML5
Mi Aporte:
Html5 brinada importantes herramientas con una gran facilidad de manejo, como todo aprendizaje requiere dedicacion, pero como observamos su estructura basica es algo simple de comprender, una vez se lee y comprende, con practica y empeño se pueden realizar unos muy lindos diseños e interesantes paginas web, este es solo el primer paso aprender su estructura basica, de ahora en adelante solo queda aprender mucho mas sobre este interesante lenguaje.
Comentario
Evideo contiene una importante informacion de lo que es el desarro web con html5, es una introccion en mi opinion bastante completa y entretenida.
Que es una etiqueta y cual es su sintáxis para su manejo en html5?
El lenguaje HTML es un lenguaje de marcas, estas marcas serán fragmentos de texto destacado de una forma especial que permiten la definición de las distintas instrucciones de HTML, tanto los efectos a aplicar sobre el texto como las distintas estructuras del lenguaje. A estas marcas las denominaremos etiquetas y serán la base principal del lenguaje HTML. En documento HTML será un fichero texto con etiquetas que variarán la forma de su presentación.
Una etiqueta será un texto incluido entre los símbolos menor que < y mayor que >.. El texto incluido dentro de los símbolos será explicativo de la utilidad de la etiqueta. Por ejemplo:
Existe normalmente una etiqueta de inicio y otra de fin, la de fin contendrá el mismo texto que la de inicio añadiéndole al principio una barra inclinada /. El efecto que define la etiqueta tendrá validez para todo lo que este incluido entre las etiquetas de inicio y fin, ya sea texto plano o otras etiquetas HTML.
<ETIQUETA>Elementos Afectados por la Etiqueta</ETIQUETA>
Por ejemplo, con la etiqueta siguiente:
<B>Texto que será en negrita</B>.
Obtendremos:
Texto que será en negrita
Algunas etiquetas no necesitarán la de fin, serán aquellas en las que el final este implícito, por ejemplo <P> párrafo, <BR> salto de línea ó <IMG> inclusión de una imagen. Definen un efecto que se producirá en un punto determinado sin afectar a otros elementos.
El uso de mayúsculas o minúsculas en las etiquetas es indiferente, se interpretarán del mismo modo en ambos casos, pero lo normal es expresarlas en mayúsculas para que destaquen con más nitidez del texto normal.
Lista de Elementos HTML5
Elemento raíz
Elemento Descripción
<html> Representa la raíz de un documento HTML o XHTML. Todos los demás elementos deben ser descendientes de este elemento.
Metadatos del documento
Elemento Descripción
<head> Representa una colección de metadatos acerca del documento, incluyendo enlaces a, o definiciones de, scripts y hojas de estilo.
<title> Define el título del documento, el cual se muestra en la barra de título del navegador o en las pestañas de página. Solamente puede contener texto y cualquier otra etiqueta contenida no será interpretada.
<base> Define la URL base para las URLs relativas en la página.
<link> Usada para enlazar JavaScript y CSS externos con el documento HTML actual.
<meta> Define los metadatos que no pueden ser definidos usando otro elemento HTML.
<style> Etiqueta de estilo usada para escribir CSS en línea.
Scripting
Elemento Descripción
<script> Define ya sea un script interno o un enlace hacia un script externo. El lenguaje de programación es JavaScript
<noscript> Define una contenido alternativo a mostrar cuando el navegador no soporta scripting.
Secciones
Elemento Descripción
<body>
Representa el contenido principal de un documento HTML. Solo hay un elemento <body> en un documento.
<section> This element has been added in HTML5 Define una sección en un documento.
<nav> This element has been added in HTML5 Define una sección que solamente contiene enlaces de navegación
<article> This element has been added in HTML5 Define contenido autónomo que podría existir independientemente del resto del contenido.
<aside> This element has been added in HTML5 Define algunos contenidos vagamente relacionados con el resto del contenido de la página. Si es removido, el contenido restante seguirá teniendo sentido
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> Los elemento de cabecera implementan seis niveles de cabeceras de documentos; <h1> es la de mayor y <h6> es la de menor impotancia. Un elemento de cabecera describe brevemente el tema de la sección que introduce.
<header> This element has been added in HTML5 Define la cabecera de una página o sección. Usualmente contiene un logotipo, el título del sitio Web y una tabla de navegación de contenidos.
<footer> This element has been added in HTML5 Define el pie de una página o sección. Usualmente contiene un mensaje de derechos de autoría, algunos enlaces a información legal o direcciones para dar información de retroalimentación.
<address> Define una sección que contiene información de contacto.
<main>This element has been added in HTML5 Define el contenido principal o importante en el documento. Solamente existe un elemento <main> en el documento.
Agrupación de Contenido
Elemento Descripción
<p> Define una parte que debe mostrarse como un párrafo.
<hr> Representa un quiebre temático entre parrafos de una sección o articulo o cualquier contenido.
<pre> Indica que su contenido esta preformateado y que este formato debe ser preservado.
<blockquote> Representa una contenido citado desde otra fuente.
<ol> Define una lista ordenada de artículos.
<ul> Define una lista de artículos sin orden.
<li> Define un artículo de una lista ennumerada.
<dl> Define una lista de definiciones, es decir, una lista de términos y sus definiciones asociadas.
<dt> Representa un término definido por el siguiente <dd>.
<dd> Representa la definición de los terminos listados antes que él.
<figure> This element has been added in HTML5 Representa una figura ilustrada como parte del documento.
<figcaption> This element has been added in HTML5 Representa la leyenda de una figura.
<div> Representa un contenedor genérico sin ningún significado especial.
Semántica a nivel de Texto
Elemento Descripción
<a> Representa un hiperenlace , enlazando a otro recurso.
<em> Representa un texto enfatizado , como un acento de intensidad.
<strong> Representa un texto especialmente importante .
<small> Representa un comentario aparte , es decir, textos como un descargo de responsabilidad o una nota de derechos de autoría, que no son esenciales para la comprensión del documento.
<s> Representa contenido que ya no es exacto o relevante .
<cite> Representa el título de una obra .
<q> Representa una cita textual inline.
<dfn> Representa un término cuya definición está contenida en su contenido ancestro más próximo.
<abbr> Representa una abreviación o un acrónimo ; la expansión de la abreviatura puede ser representada por el atributo title.
<data> This element has been added in HTML5 Asocia un equivalente legible por máquina a sus contenidos. (Este elemento está sólamente en la versión de la WHATWG del estandar HTML, y no en la versión de la W3C de HTML5).
<time> This element has been added in HTML5 Representa un valor de fecha y hora; el equivalente legible por máquina puede ser representado en el atributo datetime.
<code> Representa un código de ordenador .
<var> Representa a una variable, es decir, una expresión matemática o contexto de programación, un identificador que represente a una constante, un símbolo que identifica una cantidad física, un parámetro de una función o un marcador de posición en prosa .
<samp> Representa la salida de un programa o un ordenador.
<kbd> Representa la entrada de usuario o usuaria, por lo general desde un teclado, pero no necesariamente, este puede representar otras formas de entrada de usuario o usuaria, como comandos de voz transcritos.
<sub>,<sup> Representan un subíndice y un superíndice, respectivamente.
<i> Representa un texto en una voz o estado de ánimo alterno, o por lo menos de diferente calidad, como una designación taxonómica, un término técnico, una frase idiomática, un pensamiento o el nombre de un barco.
<b> Representa un texto hacia el cual se llama la atención para propósitos utilitaros. No confiere ninguna importancia adicional y no implica una voz alterna.
<u> Representa una anotación no textual sin-articular, como etiquetar un texto como mal escrito o etiquetar un nombre propio en texto en Chino.
<mark> This element has been added in HTML5 Representa texto resaltado con propósitos de referencia, es decir por su relevancia en otro contexto.
<ruby> This element has been added in HTML5
Representa contenidos a ser marcados con anotaciones ruby, recorridos cortos de texto presentados junto al texto. Estos son utilizados con regularidad en conjunto a lenguajes de Asia del Este, donde las anotaciones actúan como una guía para la pronunciación, como el furigana Japonés.
<rt> This element has been added in HTML5 Representa el texto de una anotación ruby .
<rp> This element has been added in HTML5 Representa los paréntesis alrededor de una anotación ruby, usada para mostrar la anotación de manera alterna por los navegadores que no soporten despliegue estandar para las anotaciones.
<bdi> This element has been added in HTML5 Representa un texto que debe ser aislado de sus alrededores para el formateado bidireccional del texto. Permite incrustar un fragmento de texto con una direccionalidad diferente o desconocida.
<bdo> Representa la direccionalidad de sus descendientes con el fin de anular de forma explícita al algoritmo bidireccional Unicode.
<span> Representa texto sin un significado específico. Este debe ser usado cuando ningún otro elemento semántico le confiere un significado adecuado, en cuyo caso, provendrá de atributos globales como class, lang, o dir.
<br> Representa un salto de línea.
<wbr> This element has been added in HTML5 Representa una oportunidad de salto de línea, es decir, un punto sugerido de envoltura donde el texto de múltiples líneas puede ser dividido para mejorar su legibilidad.
Ediciones
Elemento Descripción
<ins> Define una adición en el documento.
<del> Define una remoción del documento.
Contenido incrustado
Elemento Descripción
<img> Representa una imagen.
<iframe> Representa un contexto anidado de navegación, es decir, un documento HTML embebido.
<embed> This element has been added in HTML5 Representa un punto de integración para una aplicación o contenido interactivo externo que por lo general no es HTML.
<object> Representa un recurso externo, que será tratado como una imagen, un sub-documento HTML o un recurso externo a ser procesado por un plugin.
<param> Define parámetros para el uso por los plugins invocados por los elementos <object>.
<video> This element has been added in HTML5 Representa un video , y sus archivos de audio y capciones asociadas, con la interfaz necesaria para reproducirlos.
<audio> This element has been added in HTML5 Representa un sonido o stream de audio.
<source> This element has been added in HTML5 Permite a autores o autoras especificar recursos multimedia alternativos para los elementos multimedia como <video> o <audio>.
<track> This element has been added in HTML5 Permite a autores o autoras especificar una pista de texto temporizado para elementos multimedia como <video> o <audio>.
<canvas> This element has been added in HTML5 Representa un área de mapa de bits en el que se pueden utilizar scripts para renderizar gráficos como gráficas, gráficas de juegos o cualquier imagen visual al vuelo.
<map> En conjunto con <area>, define un mapa de imagen.
<area> En conjunto con <map>, define un mapa de imagen.
<svg> This element has been added in HTML5 Define una imagen vectorial embebida.
<math> This element has been added in HTML5 Define una fórmula matemática.
Datos tabulares
Elemento Descripción
<table> Representa datos con más de una dimensión.
<caption> Representa el título de una tabla.
<colgroup> Representa un conjunto de una o más columnas de una tabla.
<col> Representa una columna de una tabla.
<tbody> Representa el bloque de filas que describen los datos contretos de una tabla.
<thead> Representa el bloque de filas que describen las etiquetas de columna de una tabla.
<tfoot> Representa los bloques de filas que describen los resúmenes de columna de una tabla.
<tr> Representa una fila de celdas en una tabla.
<td> Representa una celda de datos en una tabla.
<th>
Representa una celda encabezado en una tabla.
Formularios
Elemento Descripción
<form> Representa un formulario, consistendo de controles que puede ser enviado a un servidor para procesamiento.
<fieldset> Representa un conjunto de controles.
<legend> Representa el título de un <fieldset>.
<label> Representa el título de un control de formulario.
<input> Representa un campo de datos escrito que permite al usuario o usuaria editar los datos.
<button> Representa un botón .
<select> Represents un control que permite la selección entre un conjunto de opciones.
<datalist> This element has been added in HTML5 Representa un conjunto de opciones predefiniddas para otros controles.
<optgroup> Representa un conjunto de opciones, agrupadas lógicamente.
<option> Representa una opción en un elemento <select>, o una sugerencia de un elemento <datalist>.
<textarea> Representa un control de edición de texto multi-línea.
<keygen> This element has been added in HTML5 Representa un control de par generador de llaves.
<output> This element has been added in HTML5 Representa el resultado de un cálculo.
<progress> This element has been added in HTML5 Representa el progreso de finalización de una tarea.
<meter> This element has been added in HTML5 Representa la medida escalar (o el valor fraccionario) dentro de un rango conocido.
Elementos interactivos
Elemento Descripción
<details> This element has been added in HTML5 Representa un widget desde el que un usuario o usuaria puede obtener información o controles adicionales.
<summary> This element has been added in HTML5 Representa un resumen, título o leyenda para un elemento <details> dado.
<command> This element has been added in HTML5 Representa un comando que un usuario o usuaria puede invocar.
<menu> This element has been added in HTML5 Representa una lista de comandos .
Ver también
Un conjunto de documentos sobre HTML5.
La referencia de todos las etiquetas HTML, incluso elementos no validos en HTML5.
Otra manera de listar las etiquetas: la Tabla Periodica de elementos HTML5 por Josh Duck.
Como se puede observar html 5 cuenta con una enorme variedad de etiquetas una para cada cosa para el color del texto, el parrafo, el fondo, el color, la sintaxis, entre otras y todas a su vez pueden ser conmbinadas combinaciones que permiten crear novedosas paginas web e interesante diseños, aqui estan todos claramente explicados para que sea mas sencilla su comprension y a la hora de aplicarlas o trabajar con ellas sea mas simple recordarlas.
Comentario
HTML5 etiquetas basicas de contenido
2013-02-11 18:36:10
Hoy voy a explicaros las etiquetas mas básicas para realizar una página completa en HTML5 junto con un ejemplo explicativo para que se pueda entender con mayor claridad.
Hasta ahora habíamos explicado que es HTML5 y como empezar a crear un página web, pero no habíamos dotado de nada de contenido a nuestra página. Bien, pues vamos a ver que etiquetas necesitamos y como se usan.
Encabezados
En primer lugar, todo página html5 necesita un encabezado, Si bien es verdad que no es imprescindible para hacerlo funcionar es altamente recomendable, pues si creamos un página web para que sea encontrada por otros usuarios, los motores de búsqueda dan suma importancia a estas etiquetas.Nos referimos a las famosas etiquetas "h", del ingles "Heading", que significa encabezado. tenemos 6 etiquetas de encabezado numeradas del 1 al 6 según su importancia.
<h1> , <h2>, <h3>, <h4>, <h5>, y <h6>
Así la etiqueta h1 es la mas importante de nuestro documento html y la etiqueta h6 sería la etiqueta menos importante. De esta manera la primera etiqueta que debemos introducir sería la etiqueta h1, la cual ha de darnos una descripción general de toda la página, seguido de la etiqueta h2 para el siguiente encabezado y así ir definiendo una estructura clara y semántica del contenido.
Párrafos
Una vez que tenemos claras las etiqutas "h" o heading es la hora de introducir los párrafos que anuncian nuestras etiquetas de encabezado o "h"
Para nuestros párrafos utilizaremos la etiqueta <p> de párrafo. Cada vez que envolvamos un texto con estas etiquetas estaremos indicando al navegador que interprete ese texto como un único párrafo, bien sencillo verdad?.
Saltos de linea
Si quisiéramos incluir un salto de linea, podremos usar la etiqueta <br/>. Esta etiqueta tiene auto cierre igual que nos pasaba con las etiquetas <meta>, cerramos la etiqueta en la misma etiqueta de apertura con el símbolo "/".
Linea horizontal
También tenemos otra útil etiqueta, <hr/>, la cual también se usa cerrando la en la misma etiqueta de apertura al igual que las etiquetas <meta> y <br>, y sirve para imprimir una linea horizontal en el documento.
Etiquetas semánticas HTML5
Bien ya hemos vista algunas de las principales etiquetas para insertar el contenido en nuestra página web, pero aun no hemos dicho nada de donde y como usarlas. Y es que HTML5 provee unas nuevas etiquetas semánticas para poder declarar las partes del documento que estamos usando.
Etiqueta Article
Normalmente, cada documento html que creemos tendrá una temática propia. Digamos que si estamos haciendo la página principal de una pagina de frutas hablaremos sobre las variedades de frutas, por ejemplo. Todo el contenido, párrafos, encabezados y demás elementos de ese contenido los envolveremos en la etiqueta <article>. Esto significa que todo lo contenido dentro de esta etiqueta es una unidad semántica y podríamos trasladarla a cualquier otro lado fuera de la página que no perdería su sentido.
Etiqueta section
dentro de nuestra página de frutas, podríamos hablar de manzanas por un lado, de las peras por otro lado, y de plátanos por otro lado. Pues cada "sección" de frutas donde hablamos de una fruta en particular, la consideramos una sección y usamos para ello la etiqueta <section>. Es importante notar que la diferencia mas notable con la etiqueta article es que si separamos el contenido de la etiqueta <section> de la página dejaría de tener sentido. Lo cual es su principal diferencia y forma de diferenciar la etiqueta <article> con <section>.
etiqueta footer
Por último para acabar nuestro documento html5 vamos a introducir un pie de página donde incluyamos los créditos. Para esta tarea HTML5 cuenta con la etiqueta <footer>. Aunque su uso puede ser mas amplio, en principio solo la vamos a usar para el pie de página. Pero también se podría usar por ejemplo para el pie de una etiqueta <article>.
Ahora os dejo la continuación del código del capitulo anterior completado con lo que hemos aprendido hoy. Ademas no estaría nada mal que fueses investigando por tu propia cuenta.
<!doctype html>
<html>
<head>
<meta charset=”utf-8“>
<title>Página de frutas</title>
<meta name=”description” content=“Página de variedades de frutas“/>
<meta name=”author” content=”Joao Maria Arranz“/>
<link rel=”shortcut icon” href=”favicon2.ico” type=”image/x-icon“/>
<link rel=”stylesheet” href=”css/style.css“/>
</head>
<body>
<article>
<h1>Las frutas mas ricas y sabrosas </h1>
<p> Vamos a presentar las pricipales frutas mas saludables y ricas </p>
<section>
<h2>Las manzanas </h2>
<p>Las manzanas son ricas en.....Un texto completo sobre manzanas </p>
</section>
<hr/>
<section>
<h2>Las peras </h2>
<p>Las peras son ricas en.....Un texto completo sobre peras </p>
</section>
</article>
<footer>
AQUI ESCRIBIREMOS EL PIE DE PÁGINA
</footer>
</body>
</html>
Comentario
Una tabla básica
Las tablas se usan con profusión en las páginas Web, muchas veces debido a que son el único instrumento con el que se cuenta, para asegurarse que las cosas estarán en su sitio. Para definir una tabla se usan las etiquetas:
<TABLE> y </TABLE> son las etiquetas donde está contenida la tabla
<TR> y </TR> son las etiquetas que indican el comienzo y fin de una fila (<th> y </th> si es una fila de cabecera)
<TD> y </TD> señalan una celda.
La tabla se va definiendo declarando una fila y a continuación las celdas que contiene esa fila, luego otra fila y sus celadas, etc. No es necesario que todas las filas contengan el mismo número de celdas.
La tabla (2x2) más sencilla que podemos hacer es la siguiente
El resultado no es muy brillante, pero vamos a ir viendo las distintas posibilidades que tenemos para mejorarlo.
Atributos de la etiqueta TABLE
Todos los atributos son opcionales
BORDER="4". Indica el tamaño del borde en píxels, en este caso 4. Si no se indica nada carece de borde
WIDTH="5" o WIDTH="50%". Es el ancho de la tabla, puede especificarse en valor absoluto (5 píxels) o como un porcentaje (50% del ancho disponible)
CELLSPACING="2". Es el espacio entre las celdas, por defecto es 2
CELLPADDING="5". Es el espacio entre el contenido de las celdas y el borde de las mismas, por defecto es 1
ALIGN=" left", "right", "center". Alinea la tabla a la izquierda , derecha o en el centro.
Otro ejemplo
Atributos de las etiquetas de fila y celda
Las etiquetas que soportan las filas y las celdas son
WIDTH="30". Ancho de toda la fila o celda. También se puede dar en %
ALIGN=" left", "right", "center". Alinea el contenido a la izquierda, derecha o centro
VALIGN="top" , "middle" o "bottom". Alinea el contenido verticalmente arriba, en medio o abajo
BGCOLOR="#AACCEE". Pone un fondo del color especificado a la celda o fila
COLSPAN=3. Especifica el número de columnas que abarca la fila
ROWSPAN=2. Especifica el número de filas que abarca la columna
Tercer ejemplo. Fijate en la etiqueta TH, que sustituye a TR, resalta su contenido con negrita, por eso se usa para los títulos
Como ves, se pueden ir modificando los comandos básicos para obtener la tabla que deseemos.
extraido de: https://platea.pntic.mec.es/~abercian/guiahtml/tablas.htm
La estructura de los formularios con HTML 5 no varía en nada con las versiones más antiguas de HTML aunque añadiendo muchas funciones, es decir para crear un formulario con nombre, e-mail, edad y pagina web como el que utilizaremos de ejemplo:
Su codigo sería:
<form id="form1" name="form1" method="post" action="consultar.php">
Nombre: <input type="text" name="nombre" id="nombre" />
Edad:<input type="text" name="edad" id="edad" />
E-mail:<input type="text" name="email" id="email" />
Web:<input type="text" name="web" id="web" />
</form>
Como podemos ver en el codigo todos los campos de texto son type="text" ya sea para numero en caso de edad o para URL en este caso con el nombre de web, también existen existen otros "types" como password para que el texto se viera con asteriscos.
En el caso de HTML5 tiene muchos "type" diferentes, cada uno específico para cada tipo de datos, són los siquientes:
text Para introducir texto, simplemente.
search Específico para input en un buscador.
url Específico para direcciones de página web. Requiere https:// o http: simplemente.
tel Se supone que para números de teléfono aunque no he conseguido que haga nada.
email El nombre lo dice.
password Escribe el contenido en asteriscos.
De tiempo datetime, date, month, week, time y datetimelocal.
number Específico para numeros.
range Sale una barra para elegir un número entre un rango, el número hay que indicarlo entre un min="10" y un max="12" (los números son de ejemplo.)
checkbox Para seleccionar y deseleccionar.
radio button Para seleccionar, uno obligatorio.
Ahora aplicando estos types a nuestro ejemplo de formulario anterior quedaría así:
<form id="form1" name="form1" method="post" action="consultar.php">
Nombre: <input type="text" name="nombre" id="nombre" />
Edad:<input type="range" max="100" min="5" name="edad" id="edad" />
<output onformchange="value = edad.value">0</output>
E-mail:<input type="email" name="email" id="email" />
Web:<input type="url" name="web" id="web" />
</form>
Como vemos esta vez hemos tenído que introducir un "output" que será un número mostrando la edad que ha señalado en el type="range" (solo funciona en Opera), como ahora veremos ese type "range" crea una barra desplazable para señalar el numero deseado.
Podemos pensar que esto de los type está muy bien pero que obtenemos el mismo resultado con type="text" simplemente. Pero para sacarle el máximo partido a todo este tutorial y grácias a HTML 5 tenemos el parámetro " required "
que se tendrá que añadir a las lineas de codigo de los imput que sean obligatorios, es decir, que no puedan tener un valor en blanco, gracias a este "required" el formulario no será enviado si algun campo está en blanco.
Pensemos un poco, si ponemos cada type correctamente con los datos que pedimos y además añadimos el "required" el formulario no será enviado hasta que en el campo email este relleno por un email correcto y lo mismo pasa con los demás type por ejemplo el URL.
De esta manera que hemos aprendido podremos validar formularios sin ningún esfuerzo y sin necesidad de javascript. El codigo finalmente quedaría así:
<form id="form1" name="form1" method="post" action="consultar.php">
Nombre: <input type="text" name="nombre" id="nombre" required/>
Edad:<input type="range" max="100" min="5" name="edad" id="edad" />
<output onformchange="value = edad.value">0</output>
E-mail:<input type="email" name="email" id="email" required/>
Web:<input type="url" name="web" id="web" required/>
<input type="submit" name="enviar" id="enviar" value="Enviar">
</form>
Con este codigo se puede jugar todo lo que quieras, podemos hacer por ejemplo que cuando el valor introducido sea correcto, es decir, que en un campo email hayan introducido un email el campo pase de ser de color rojo a verde, simplemente sería introducir entre el "head" el siquiente codigo:
<head>
<style>
#for input:valid { background:green;}
#for input:invalid { background:red;}
</style>
</head>
Este codigo modifica los colores de todos los input cuando son válidos o inválidos pero si no queremos que cambien todos los imput podemos añadir labels con cualquier nombre. Introducimos entre el "#for" y "input" una palabra, por ejemplo "este". Y encerramos el input que queramos modificar con esos colores con etiquetas que se llamen igual, en este caso "este". Aqui el codigo de ejemplo:
<head>
<style>
#for este input:valid { background:black;}
#for input:valid { background:green;}
#for input:invalid { background:red;}
</style>
</head>
<body>
<form id="for">
<p>Name: <este><input type="text" name="name" required></este></p>
<p>E-mail: <input type="email" name="email" required></p>
<p>URL: <input type="url" name="url" required></p>
<p>Edad: <input type="range" name="edad"></p>
<p><input type="submit" value="enviar"></p>
</form>
</body>
tomado de
https://www.tutorialeshtml5.com/2010/06/formulario-en-html-5-i.html
