Be Sociable, Share!

lunes, 20 de junio de 2016

HTML 4 ≠ HTML 5

HTML 4

HTML 4


¿SUFRES DE <SPAN> o <DIV>?

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

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


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

miércoles, 15 de junio de 2016

WEB FORM: BÚSQUEDA WEB - FORMULARIO WEB


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
La etiqueta <input>


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
    Métodos de envío <form action>Favoritos
    E.g.: formulario de búsqueda



    • POST 
    datos no visibles
    sin limite
    Ficheros
    E.g.: formulario de registro



    Ejemplo 0:

    Métodos de envío <form action>


    Métodos de envío <form action>

    Ejemplo 1:

    Input





    Para etiqueta form submit tiene atributo para envio de archivos. 
    <form enctype="multipart/form-data">
    <input type= "file..."/>
    </form>



    Formulario de registro
    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:


    Etiqueta Select








    FIELDSET:


    Etiqueta FIELDSET







    ETIQUETAS PARA TABLAS:







    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? 







    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






    Meta Charset: etiqueta para caracteres especiales






    martes, 14 de junio de 2016

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









    HTML (HyperText Markup Language):



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


    Reglas html





    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

    miércoles, 2 de marzo de 2016

    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 c
    onjunto estructurado de textos, gráficos, etc., unidos entre sí por enlaces y conexiones lógicas.


    Multimedia q
    ue 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