sábado, 7 de julio de 2018

Lenguaje HTML

HTML (Lenguaje de Marcas de Hipertexto)

El tipo de letra por defecto de las paginas Web es time new roman.
El lenguaje HTML es un lenguaje que maneja una gramática y un vocabulario, propios, y al igual que cualquier otro, se logra manejar bien, cuando se le a puesto empeño, y mucha practica, para su desarrollo.

  • Gramática: son las reglas que dicen como se deben emplear las etiquetas para escribir un documento.
  • Vocabulario: son la etiquetas que se pueden emplear.
El manejo de lenguaje html puede ser utilizado por cualquier editor de texto, como el bloc de notas de windows, pero para un manejo fácil, y sin errores, se puede utilizar 
HTML son las siglas de HyperText Markup Language, que puede traducirse como lenguaje de marcas o marcado de hipertexto.
El lenguaje HTML se emplea para crear las páginas web. Es muy fácil ver el código HTML de una página web, la opción exacta cambia de un navegador a otro y también puede cambiar de una versión a otra de un mismo navegador, pero suelen tener un nombre similar:
  • Ver código fuente de la página en Google Chrome y Mozilla Firefox.
  • Ver código fuente en Internet Explorer y Opera.
El lenguaje HTML tiene muchas etiquetas, pero aplicando el Principio de Pareto (la regla del 80-20), sólo hay que conocer bien el 20% de las etiquetas, ya que con ellas se crea el 80% del contenido de las páginas web. Las etiquetas más importantes son:
  • html--etiqueta principal(raíz)
  • head--etiqueta de cabecera, metadatos(información de la pagina o de como se debe procesar la pagina), lo que se escribe en esta etiqueta, no aparece reflejado en la pagina web
  • meta--
  • title--titulo de la pagina 
  • link
  • style
  • script
  • body--Segunda parte de una pagina web, lo que se escribe entre esta etiqueta si aparece visualizado en la pagina web
  • p--Corresponde a un parrafo
  • strong--Pinta el texto en negrita
  • em--se utiliza para un texto enfatizado(cursiva).
  • img
  • form
  • input
  • select
  • textarea
  • table
  • tr
  • th
  • td
  • blockquote
  • hr
  • ul
  • ol
  • li
  • div
  • span
  • h1,h2,h3,h4,h5,h6-- se emplean para definir los encabezados o títulos en la pagina, los niveles de importancia son h1 mas importante y h6 menos importante.
En las siguientes lecciones vas a aprender la estructura básica de una página web y el uso de las etiquetas que más se suelen utilizar. Pero antes, te proponemos que aprendas algunas cosas de la historia de HTML. Tengamos en cuenta que con html no se define la presentación visual de las paginas web. HTML solo se emplea para la estructura del contenido o información que contenga la pagina web.
Puedes ver mas información sobre html en la pagina web w3schools.com, que podras ver cuando termines este curso, y leer sobre los conceptos básicos. El lenguaje html esta formado por etiquetas que esta encerradas entre los signos < y >, y en la version HTML5 esta formado por mas de 100 etiquetas.

                                                 Elemento
                                                       .
                                                       .  
                     ------------------------------------------------------¬
                     <p class="importante">Esto es un párrafo</p>

Etiqueta = p
Atributo = class
Valor = importante
Contenido = Esto es un párrafo
Etiqueta Fin = /p


El elemento es el componente básico de una pagina web. Las etiquetas pueden ser anidadas, pero tiene que cumplirse ciertas reglas, que se verán mas adelante.

  • Las etiquetas siempre tienen que estar cerradas.
  • El que se abre primero se debe cerrar de ultimas.
  • Las etiquetas deben escribirse en minúsculas
  • Los valores de los atributos deben estar entre comillas
  • Para los nombres de las paginas web, se debe utilizar las letras del alfabeto ingles, los numeros, el guion o el raya al piso.
  • Las extensiones de las paginas web, deben tener extensiones htm o html
Listas existen de tres tipos, listas no ordenadas, listas Ordenadas, Listas de descripción.

  • Listas Ordenadas <ol> se emplea el elemento <li>
  • Listas no ordenadas <ul>  se emplea el elemento <li>
  • Listas de descripción <dl>  se emplea el elemento <dt><dd>
                                            Primer elemento
                                                        Descripción del primer elemento
                                            Segundo Elemento
                                                         Descripción del segundo elemento


Una Lista esta marcada por puntos, circulos o cuadrados, esto se puede hacer mediante el lenguaje CSS.


                                            <ol>


  • En HTML4/5
    • Start -- Indica el valor inicial de la lista
    • type: (a,b,c,d,...), (i,ii,iii,iv,...)--indica el tipo de numeracion
  • En HTML5
    • reversed--indica que la numeracion es decendente,este atributo es un atributo booleano, a si que solo puede tomar el valor de reverse
      • <ol type="I" reverse="reversed">
Las listas de descripcion <dl> se emplea para definir una lista de terminos con cero o mas descripciones por cada termino.
  • Cada termino de la lista se define con <dt>
  • Cada descripcion de un termino se define con <dd>
  • Los elementos no se indican con simbolos, numeros o letras, sino con un aumento del margen izquierdo.
Las listas también pueden ser anidadas.

Los tres errores mas comunes en programación d paginas Web


  1. Saltos de línea. <br/>. Los párrafos se deben separar con su etiqueta, no con saltos de linea.
  2. Espacios en blanco. &nbsp; Los espacios en blanco por presentación se debe manejar con CSS.
  3. Referencias de caracteres. Los caracteres que no están en el lenguaje html, deben estar escritos entre los caracteres & y ;, para las vocales acentuadas en vez de utilizar las & cute; se puede utilizar el lenguaje
    • ISO-8859-1(Latin1)
    • UTF-8



La combinación de los lenguajes HTML, CSS, DOM, JAVASCRIPT se llama DHTML DINAMICO, la de DHTML, XHR, XML, y JSON,  se llama AJAX técnica para desarrollar aplicaciones web.

Aunque se han unido varias tegnologias. (Llamada familia de HTML5)
  • AJAX
  • HTML5
  • CANVAS
  • SVG
  • GEOLOCATION
  • CACHE
  • DATABASE
  • WEB WORKERS







No hay comentarios:

Publicar un comentario