HTML 4 ≠ HTML 5

HTML 4

¿SUFRES DE <SPAN> o <DIV>?

Para estructurar una página web con HTML5, necesitaremos:

<header> <nav> <aside> <footer>

Tipico header html 4

<div id="header">
<h1> MODELO </h1>
</div>

Como deberá ser con html 5

<header>
<h1> MODELO </h1>
</header>

Barra o menu de navegación 
( debe estar etiquetado como una lista)

<div id= "nav">
<ul> ( lista no ordenada)
<li> <a href="LINK"> Principal </a> </li>
<li> <a href= "LINk"> Contacto <a/> </li>
</ul>
</div>

Como deberá ser con Html5

<nav>
<ul>
<li> <a href= "LINK"> Principal </a> </li>
<li> <a href= "LINk"> Contacto <a/> </li>
</ul>
</nav>

Panel con la informacion principal

<div id= "news">
<p> Panel principal Html4</p>
<!-- rest of news..>
</div>

y más html 5 ...

<aside>
<main>
<figcaption>
<footer>
<figure> 
se puede incluir cualquier cosa, como una cita, un fragmento de código, una tabla, etc...

WEB FORM: BÚSQUEDA WEB - FORMULARIO WEB

Los formularios, permiten al usuario introducir datos para que sean enviados a un servidor web para que sean procesados. <BÚSQUEDA WEB - FORMULARIO WEB/>

La etiqueta <input> es la mas usada en formularios

Input no tiene etiqueta de cierre.

Campos de texto

maxlenght= numero de caracteres

Size and value = numeros de caracteres

En definitiva, un formulario web es un elemento basico para cualquier  sitio web.
Etiquetas y atributos que se emplean en un formulario:

input.

text.

checkbox.

radio.

file.

password.

hidden.

button.

submit.

image.

select.

option.

optgroup.

textarea.

label.

fieldset.

legend.

Métodos de envío

• GET

<form action="" method="get">

datos visibles (URL)

Limitada

Favoritos

E.g.: formulario de búsqueda

• POST 

datos no visibles

sin limite

Ficheros

E.g.: formulario de registro

Ejemplo 0:

Ejemplo 1:

Para etiqueta form submit tiene atributo para envio de archivos. 

<form enctype="multipart/form-data">

<input type= "file..."/>

</form>

Atributo de 

<input type= "submit/reset/button/image">

Hay que meter Java script...

Que estoy en proceso de descubriemento, todavía.....

<label for="nombre">Nombre:</label> <input type="text" name="nombre" id="nombre" maxlength="50" />

Label: Esta etiqueta nos permite asignar un texto a un campo de texto. Me explico. Si tenemos por ejemplo en un sector de nuestro sitio web lo siguiente:

<label for=”nombre”>Nombre</label>
<input type=”text” id=”nombre”>

Si utilizamos la etiqueta label, y la asignamos a el campo que la acompaña, hacer click en el texto “Nombre”  es equivalente a hacer click en el campo de texto.

SELECT:

FIELDSET:

ETIQUETAS PARA TABLAS:

¿COMO ENVIAR LOS DATOS?

En el atributo action de la etiqueta <form> que define un formulario se puede indicar un correo electrónico para que los datos se envíen directamente a un correo electrónico. ¿Cómo se hace? 

• Sending_and_retrieving_form_data
• Cómo utilizar el mailto: protocolo en una acción < FORM >
• <form action="mailto:user@example.com" method="get">

MÁS IMPORTANTE: JUEGO DE CARACTERES:

• Utiliza siempre el mismo juego de caracteres.
• Utiliza UTF-8 sin BOM.
• Diferencias entre ISO-8859-1 (Latin1) e ISO-8859-15 (Latin9).
• Cómo se indica el juego de caracteres en HTML (etiqueta meta).
• Diferencias entre HTML4, XHTML1 y HTML5.

HTML 4

¿Cómo se escribe una página web?

HTML (HyperText Markup Language):

Aprender HTML es muy parecido 

a aprender un idioma. 

Herramienta para ayudar en la planificación: http://pencil.evolus.vn/

 Las etiquetas más importantes son:

• html
• head
• meta
• title
• link
• style
• script
• body
• p
• a
• strong
• em
• img
• form
• input
• select
• textarea
• table
• tr
• th
• td
• blockquote
• hr
• ul
• ol
• li
• div
• span

Reglas html: 

La etiqueta principal de una pagina web, es la etiqueta HTML (de inicio y de cierre);
Las etiquetas siempre se tienen que cerrar;
Los documentos tienen que estar bien formados;
Etiquetas en minusculas;
Valores artibutos en comillas;
Extensiones htm or html;
Todos elementos deben tener HEAD ( title);
Proporcionar titulos ricos en contexto ( ayudará en la búsqueda Google);

Fuente:  http://www.w3schools.com/
Index of elements: https://www.w3.org/TR/html4/index/elements.html


RECUERDA: Para definir presentación, iremos usar CSS


LISTAS EN HTML:


Listas no ordenada: <ul>

Lista ordenada: <ol> ( ordered list)

Para estas 3 listas, se emplea el elemento <li> (list item)

Lista de descripción: <dl>, y aqui si emplea <dt> o <dl> ( description list)

Lista anidadas (sublista)

Web se basa:

Hipertexto: Permite crear, agregar, enlazar y compartir información con hyperlink
URL Uniforme resource Locator

Tipos de enlaces: 

<a> enlace </a>
objecto sensible

Intradocumental

<a href= " #destino enlace" > TEXT </a>
<h1 id="destino de enlace"></h1></a>

Extradocumental

<a href= " url #destino enlace" > TEXT </a>


Errores Basicos:

Salto de lineas: <br>  or  html5 <br/>
No crear lista con saltos de lineas


Espacio extra entre dos palabras: &nbsp

PADRE INTERNET x PADRE WEB

PADRE INTERNET

Vinton Cerf es, junto con Robert Kahn, uno de los autores del protocolo TCP, uno de los protocolos fundamentales que controla la transmisión de datos en Internet. Fue creado entre 1973 y 1974. Transmisión de los datos en la Web es por  HyperText Transfer Protocol.

PADRE WEB

Tim Berners-Lee invented the World Wide Web in 1989.

Hipertexto y conectarlo a las ideas de TCP y DNS y ¡ta chan! - La Web.

Las innovaciones que Berners-Lee desarrolló para dar forma a su idea fueron tres: el HTTP (hypertext transfer protocol), que permite que al pinchar sobre un enlace lleguemos a otro documento; las URL (uniform resource location), que son las direcciones por las que encontrar el documento, y el HTML (hypertext markup language), que son las instrucciones por las que se vinculan las páginas y los archivos que contienen.

CON:

Hipertexto conjunto estructurado de textos, gráficos, etc., unidos entre sí por enlaces y conexiones lógicas.

Multimedia que utiliza conjunta y simultáneamente diversos medios, como imágenes, sonidos y texto, en la transmisión de una información.

Hipermedia conjunto estructurado de diversos medios, como textos, gráficos, imágenes y sonidos, unidos entre sí por enlaces y conexiones lógicas para la transmisión de una información.

Una URL traducido al español como Localizador Uniforme de Recursos, es un identificador que designa un recurso en Internet.

UN DNS sistema que realiza la correspondencia entre las direcciones IP y los nombres de dominio.

How To Find My IP Address

http://www.howtofindmyipaddress.com/

How To Find My IP Location

https://www.iplocation.net/

Programación de aplicaciones web: historia, principios básicos y clientes web

Descarga gratuita: http://gplsi.dlsi.ua.es/libros/progapliweb/