viernes, 9 de noviembre de 2018

BOOTSTRAP


Bootstrap es una biblioteca multiplataforma o conjunto de herramientas de código abierto para diseño de sitios y aplicaciones web. Contiene plantillas de diseño con tipografía, formularios, botones, cuadros, menús de navegación y otros elementos de diseño basado en HTML y CSS, así como extensiones de JavaScript adicionales. A diferencia de muchos frameworks web, solo se ocupa del desarrollo front-end.
Bootstrap tiene un soporte relativamente incompleto para HTML5 y CSS 3, pero es compatible con la mayoría de los navegadores web. La información básica de compatibilidad de sitios web o aplicaciones está disponible para todos los dispositivos y navegadores. Existe un concepto de compatibilidad parcial que hace disponible la información básica de un sitio web para todos los dispositivos y navegadores. Por ejemplo, las propiedades introducidas en CSS3 para las esquinas redondeadas, gradientes y sombras son usadas por Bootstrap a pesar de la falta de soporte de navegadores antiguos. Esto extiende la funcionalidad de la herramienta, pero no es requerida para su uso.
Bootstrap es modular y consiste esencialmente en una serie de hojas de estilo LESS que implementan la variedad de componentes de la herramienta. Una hoja de estilo llamada bootstrap.less incluye los componentes de las hojas de estilo. Los desarrolladores pueden adaptar el mismo archivo de Bootstrap, seleccionando los componentes que deseen usar en su proyecto.
Los ajustes son posibles en una medida limitada a través de una hoja de estilo de configuración central. Los cambios más profundos son posibles mediante las declaraciones LESS.
El uso del lenguaje de hojas de estilo LESS permite el uso de variables, funciones y operadores, selectores anidados, así como clases mixin.

JavaScript

¿Que es Javascript?


Javascript es un lenguaje de programación utilizado para crear programas encargados de realizar acciones dentro del ámbito de una página web. Con Javascript podemos crear efectos especiales en las páginas y definir interactividades con el usuario. El navegador del cliente es el encargado de interpretar las instrucciones Javascript y ejecutarlas para realizar estos efectos e interactividades, de modo que el mayor recurso -y tal vez el únicocon que cuenta este lenguaje es el propio navegador.

Javascript es un lenguaje con muchas posibilidades, permite la programación de pequeños scripts, pero también de programas más grandes, orientados a objetos, con funciones, estructuras de datos complejas, etc.
 Pues bien, la incrustación de un código de Javascript puede ser de dos formas:

Desde la página HTML

 Para incrustar un código de Javascript desde la misma página HTML se toman en cuenta los siguientes puntos:
 El script se coloca dentro de las etiquetas <head>
Las etiquetas para ejecutar este script son <script> </script> Dentro de estas etiquetas se incluye el atributo “language=javascript” el cual indica que nuestro script se basa bajo este lenguaje (también existen otros lenguajes, por ejemplo vbscript, JScript, etc.).


Desde un archivo externo

 Para llamar un archivo con el código en Javascript basta con colocar las mismas etiquetas de <script> dentro de la cabecera (head) y colocar dos atributos que son type=”text/javascript” y src=”ruta del archivo”.
 El código se guarda en un archivo con extensión .js; que es la extensión de los archivos Javascript y el código ya no se encierra entre los comentarios de HTML.

Mayúsculas y minúsculas 

En Javascript se han de respetar las mayúsculas y las minúsculas. Si nos equivocamos al utilizarlas el navegador responderá con un mensaje de error, ya sea de sintaxis o de referencia indefinida.

Separación de instrucciones 

Las distintas instrucciones que contienen nuestros scripts se han de separar convenientemente para que el navegador no indique los correspondientes errores de sintaxis. Javascript tiene dos maneras de separar instrucciones: la primera es a través del carácter punto y coma (;) y la segunda es a través de un salto de línea.


Variables 

Una variable es un espacio en la memoria donde se almacena un dato, un espacio donde podemos guardar cualquier tipo de información que necesitemos para realizar las acciones de nuestros programas. Por ejemplo, si nuestro programa realiza sumas, será muy normal que guardemos en variables los distintos sumandos que participan en la operación y el resultado de la suma. No podemos utilizar caracteres raros como el signo +, un espacio o un $. También hay que evitar utilizar nombres reservados como variables.

Declaración de variables en Javascript
Javascript cuenta con la palabra “var” que utilizaremos cuando queramos declarar una o varias variables. Como es lógico, se utiliza esa palabra para definir la variable antes de utilizarla.
 var operando1
 var operando2

También se puede asignar un valor a la variable.


Tipos de variables


Numéricas 
Se utilizan para almacenar valores numéricos enteros (llamados integer en inglés) o decimales (llamados float en inglés). En este caso, el valor se asigna indicando directamente el número entero o decimal. Los números decimales utilizan el carácter . (punto) en vez de , (coma) para separar la parte entera y la parte decimal.

Cadenas de texto 
Se utilizan para almacenar caracteres, palabras y/o frases de texto. Para asignar el valor a la variable, se encierra el valor entre comillas dobles o simples, para delimitar su comienzo y su final.

Arrays 

En ocasiones, a los arrays se les llama vectores, matrices e incluso arreglos. No obstante, el término array es el más utilizado y es una palabra comúnmente aceptada en el entorno de la programación. Un array es una colección de variables, que pueden ser todas del mismo tipo o cada una de un tipo diferente. Su utilidad se comprende mejor con un ejemplo sencillo: si una aplicación necesita manejar los días de la semana, se podrían crear siete variables de tipo texto:

var dias = [“Lunes”, “Martes”, “Miércoles”, “Jueves”, “Viernes”, “Sábado”, “Domingo”];

Booleanos 
Las variables de tipo boolean o booleano también se conocen con el nombre de variables de tipo lógico. Una variable de tipo boolean almacena un tipo especial de valor que solamente puede tomar dos valores: true (verdadero) o false (falso). No se puede utilizar para almacenar números y tampoco permite guardar cadenas de texto. Los únicos valores que pueden almacenar estas variables son true y false, por lo que no pueden utilizarse los valores verdadero y falso.
 var clienteRegistrado = false;
var ivaIncluido = true;


Estructuras de control


Nos sirven para realizar unas acciones u otras en función del estado de las variables. Es decir, tomar decisiones para ejecutar unas instrucciones u otras dependiendo de lo que esté ocurriendo en ese instante en nuestros programas. Por ejemplo, dependiendo si el usuario que entra en nuestra página es mayor de edad o no lo es, podemos permitirle o no ver los contenidos de nuestra página.

  • if
  • for
  • while

  • do while
Funciones en Javascript


Podemos considerar una función como una serie de instrucciones que englobamos dentro de un mismo proceso. Este proceso se podrá luego ejecutar desde cualquier otro sitio con solo llamarlo. Las funciones se utilizan constantemente, no sólo las que escribís vos, sino también las que ya están definidas en el sistema, pues todos los lenguajes de programación suelen tener un montón de funciones para realizar procesos habituales.

¿Cómo se escribe una función? Una función se debe definir:
 function nombrefuncion (){ instrucciones de la función ... }

¿Cómo llamar a una función? Para ejecutar una función la tenemos que invocar en cualquier parte de la página. Con eso conseguiremos que se ejecuten todas las instrucciones que tiene la función entre las dos llaves. Para ejecutar la función utilizamos su nombre seguido de los paréntesis. Por ejemplo, así llamaríamos a la función escribirBienvenida() que acabamos de crear. escribirBienvenida()

Se le llama “ámbito de las variables” al lugar donde estas están disponibles. Como Javascript se define dentro de una página web, las variables que declaremos en la página estarán accesibles dentro de ella.

Variables globales 
Como hemos dicho, las variables globales son las que están declaradas en el ámbito más amplio posible, que en Javascript es una página web. Para declarar una variable global a la página simplemente lo haremos en un script, con la palabra var.

Variables locales
También podremos declarar variables en lugares más acotados, como por ejemplo una función. A estas variables les llamaremos locales. Cuando se declaren variables locales sólo podremos acceder a ellas dentro del lugar donde se ha declarado, es decir, si la habíamos declarado en una función solo podremos acceder a ella cuando estemos en esa función.

Funciones y argumentos

 Podemos desear que una función ejecute unos enunciados en los que opere con una serie de valores que no hayamos definido dentro de la misma, sino que los reciba de otra función o enunciado. Esos valores son los argumentos, que se especifican entre los paréntesis que van tras el nombre de la función, y se separan por comas: function nombre_de_la_ función(argumento1,argumento1,…){ …enunciados a ejecutar… }


Eventos 

Eventos del Mouse  reaccionan a diferentes acciones del usuario y pueden ser insertados en cualquier elemento HTML de bloque.

onclick    Al dar un click con el botón iaquierdo del mouse sobre un elemento
ondblclick   Dar doble click sobre un elemento
onmousedown    Cualquier botón del mouse es presionado sobre un elemento
onmouseup   Se libera un botón del mouse sobre un elemento
onmouseover  Solo situar el ratón sobre un elemento
onmousemove  Mover el mouse
onmouseout   Es retirado el ratón de un elemento


Los eventos del mouse pueden utilizarse para la creación de una infinidad de efectos, desde diferentes estilos del puntero, mensajes, menús personalizados para el clic derecho, etc.

<a href=”#” onclick=”FUNCIÓN”>

Cuadros de alertas

Cuando utilizamos alertas, se abre una pequeña ventana o cuadro de dialogo donde aparece el resultado de la variable y el texto que se adicione. Para crear una alerta colocamos dentro del script la palabra alert con el mensaje que queramos que salga.

alert ("GUARDA");

Mensajes de error 
En ocasiones al solicitar el resultado de una variable, Javascript devuelve los siguientes mensajes predeterminados:  NaN: "Not-a-Number", significa que el resultado no es un número. 
Undefined: Indica que a la variable no se le ha asignado ningún valor.
 Infinity: Significa un valor imposible de representar.

domingo, 4 de noviembre de 2018

Dibujos en HTML/ Audio/ Video

Los dibujos en HTML se realizan en el body , puedenser colocados dentro de una seccion.
Los dibujos principales son :

  • Circulo
  • Rectángulo
  • Polígono
Antes de dibujar se coloca la etiqueta SVG con sus medidas (wigth, height) que le dara el lugar donde se realiza en dibujo.
Para dibujar en circulo se coloca la etiqueta: CIRCLE
  <circle cx="50" cy="50" r="50" fill="red"/>
Donde cx es va ser el eje x y cy en eje y (se cuenta en pixeles) r es el radio del circulo y con fill se le da en color.
Para el rectángulo: RECT
 <rect  width="300" heigth ="90" x="50" y="50" fill="red"/>
Para el polígono se usa:POLYGON
<polygon points ="100 100, 200 200, 300 0" style="fill:orange" stroke:black;/>
Points hace referencia a todos los puntos del polígono.


¿Como agregar audio y video en HTML?

Tanto para audio como video se debe tener descargado en nuestros archivos el  audio (mp3) y vídeo (mp4) que queramos introducir a nuestra pagina .
Para el audio la etiqueta <audio>  sus propiedades  principales son: src (direccion del audio) type "audio/mpeg".
Para vídeo usamos la etiqueta <source> que también tendrá src y type :
<source src="video.mp4" type="video/mp4">


lunes, 29 de octubre de 2018

FORMULARIOS

¿Para qué sirven los formularios? 


 Los formularios nos van a permitir, desde dentro de una presentación web, solicitar información al visitante. Estarán compuestos por tantos campos como informaciones queramos obtener. Una vez introducidos los valores en estos campos serán enviados a una URL donde se procesará toda esta información.

 Los formularios permiten obtener información de un cliente que visita una Web. Utilizando esta herramienta un usuario puede enviar datos para que luego sean procesados en el servidor.

 Un formulario contiene dos tipos de elementos: campos de datos y control. Los primeros permiten al usuario introducir información y los segundos indicar qué debe hacerse con esos datos. Los datos son ingresados por el usuario y el control es un proceso que en ciertas ocasiones se realiza para permitir procesar dicha información.

 El formulario no es más que una página escrita en HTML como cualquier otra. Lo que la hace diferente es que permite capturar datos de varias maneras: directamente desde el teclado, escogiendo un valor de una lista desplegable o seleccionando una opción desde botones.


Como crear un formulario

Debe estar encerrado entre la etiqueta FORM , dentro del body.esta etiqueta prsenta tres atributos, los dos primeros atributos de la tabla son de uso obligatorio para cualquier formulario que generemos, ya que establecen dónde enviar la información y cómo enviarla. El parámetro ACTION define qué es lo que debemos hacer con la información obtenida, METHOD puede asumir el valor GET o el valor POST, y definen la manera en la cual los datos son transferidos al servidor.


Controles de formularios :INPUT 

Cuadro de texto

 Esta misma etiqueta, acompañada de TYPE, será la utilizada para insertar la mayoría de los controles, por ejemplo: INPUT TYPE=”text” SIZE=15 MAXLENGTH=15 NAME=”Nombre”
Size: Determina la anchura de la caja de texto. El valor por defecto de este atributo es 20 caracteres
 Maxlength: Con este atributo limitamos el número máximo de caracteres que pueden ser escritos en una caja de texto. Si no usamos el atributo MAXLENGTH, el número de caracteres que pueden introducirse en la caja de texto no tendrá límite, las dos son independientes entre si.
 Value: Sirve para especificar un texto que debe aparecer por defecto en la caja de texto, antes de que el usuario escriba nada. Este texto suele ser, en general, o bien instrucciones o bien la respuesta más probable.
 Name: define el nombre que se le da al control, esto puede servir para que el lenguaje dinámico lo tome como lectura y lo pueda manipular como propio.
Placeholder: Un truco común de la usabilidad en formularios web es tener contenido de relleno en los campos de entrada de texto.
 Autofocus: este atributo hace que un campo de formulario adquiera el foco de forma automática cuando se carga una página.


Cuadro de texto para claves

 En ocasiones puede ser conveniente pedir al usuario algún tipo de información confidencial como puede ser una clave de acceso o password.Su etiqueta sera INPUT TYPE=”password” ,Los cuadros de texto para claves también tienen los atributos SIZE, MAXLENGTH, VALUE y ALIGN que vimos en las cajas de texto.

Etiquetar controles 

En el caso de querer incluir una etiqueta a un elemento, utilizamos la etiqueta LABEL  Esta no sólo permite darle texto a un elemento de un formulario, sino que comparte el control del mismo. Esto quiere decir que podemos seleccionar no sólo al elemento sino que también a su rótulo.

Botones 

Un botón nos permite realizar una acción con el formulario que lo contenga. Existen dos tipos básicos de botones: enviar el formulario (envío o submit) y poner todos los campos a sus valores iniciales (restablecimiento o reset). Además de estos dos tipos de botones, existe un botón especial que no posee ninguna acción predefinida y que, por tanto, deberá ser especificada con un lenguaje del lado del cliente. Los botones pueden insertarse a través de la etiqueta (tag) HTML input (botones para enviar y restablecer y botones de imagen) o el elemento HTML button (botones de contenido).
Boton de envio :Este control envía automáticamente el formulario en el que se encuentra, cuando es presionado. Para colocar este boton de se escribe INPUT TYPE=”submit”.
Boton de borrar: reestablecen los controles en un formulario a sus valores iniciales cuando es presionado. Son insertados con la etiqueta (tag) HTML input con el valor “reset” en su atributo “type”.
Botones de imagen: Estos tipos de botones funcionan exactamente como los botones de envío, salvo que los de imagen son representados visualmente con la imagen especificada en el atributo “src” .Los botones de imagen se insertan con el tag HTML input, usando el valor “image” en su atributo “type”.
Botones de contenido o genéricos: Los botones de contenido pueden ser usados como botones de envío o restablecimiento, o bien pueden no tener ninguna acción preestablecida (dependiendo del valor de su atributo “type”). Su característica es que se puede insertar contenido HTML dentro de ellos.

 Radio Buttons

Estos controles reciben también el nombre de botones de radio, como traducción directa de su denominación inglesa radio buttons y porque en general los navegadores suelen darles una forma circular . Para insertar un botón de elección usaremos de nuevo la etiqueta INPUT, pero esta vez el valor del atributo TYPE será radio:  INPUT TYPE=”radio”.Este tipo de controles tiene dos estados o posiciones: seleccionado (ON) o no seleccionado (OFF), estando inicialmente todos en la posición OFF. También es posible especificar que un botón determinado esté seleccionado inicialmente insertando el atributo CHECKED en la etiqueta INPUT de la siguiente manera:INPUT TYPE=”radio” CHECKED.
Los botones de elección suelen ser insertados en los formularios en grupos, dando al usuario la posibilidad de elegir entre una serie de opciones. Cuando pulsamos sobre un botón de radio, lo pasamos a la posición ON y permanecerá en ese estado hasta que pulsemos en otra opción del mismo grupo. Esto es así porque entre los botones de radio de un mismo grupo sólo uno de ellos puede estar seleccionado, por tanto cuando seleccionamos uno, aquel que estuviese seleccionado previamente dejará de estarlo.Para indicar que una serie de botones de elección pertenecen a un mismo grupo debemos incluir el mismo valor en el atributo NAME en todos ellos. Además debemos usar el atributo VALUE para dar un nombre distinto a cada uno de los botones.

Resultado de imagen para radio button html

Cuadro de selección 

Las cajas de selección guardan ciertos parecidos con los botones de radio, pero además permitirán seleccionar varias opciones en una lista  Al igual que dichos botones, tienen dos posiciones: seleccionados o no seleccionados, estando en esta última posición inicialmente (a no ser que hayamos usado el atributo CHECKED). Cada caja de selección es independiente del resto, y por lo tanto, el valor del atributo NAME debe ser diferente en cada una. Para insertar una caja de selección debemos usar de nuevo la etiqueta INPUT, pero esta vez con TYPE=”checkbox”
Resultado de imagen para checkbox html

Cuadros de selección 

Su función será dar a elegir entre una serie de opciones de manera que el usuario pueda elegir una o varias de ellas. Existen dos formas de mostrar estas opciones, como una lista con desplazamiento, o mediante una lista desplegable. Para insertar un cuadro de selección usaremos la etiqueta SELECT, que consta de una instrucción de inicio y de una instrucción de fin, entre las cuales introduciremos las diferentes opciones para el usuario. Para insertar estas opciones usaremos una nueva etiqueta, OPTION, que consta de una única instrucción. Veamos un ejemplo que ilustra el uso de uso de este tipo de control.

Resultado de imagen para select html


Agrupando Elementos

 Dentro de un formulario podemos agrupar los elementos por tema, permitiendo un mejor aspecto. Para ello se utiliza la etiqueta FIELDSET  que permite agrupar elementos de un formulario, creando una caja alrededor de los mismos. La etiqueta LEGEND nos permite colocar un título dentro del grupo, este título puede colocarse arriba (top), abajo (bottom), izquierda (left) o derecha (right).

Resultado de imagen para fieldset html



domingo, 30 de septiembre de 2018

CSS

¿QUE ES CSS?
CSS son las siglas de Cascading Style Sheets (en español, hojas de estilo en cascada), y es un lenguaje que define el estilo de la presentación de páginas de Internet. Se usa comúnmente en conjunto con HTML, donde la parte de HTML define la estructura de la página, y la parte de CSS define la presentación de la página, esto es, aspectos como colores, tipos de letra, márgenes, dimensiones, entre otros.
 Se utiliza para dar formato a documentos HTML y XML, separando el contenido de la presentación. CSS permite a los desarrolladores Web controlar el estilo y el formato de múltiples páginas Web al mismo tiempo.
Entre sus beneficios concretos encontramos:

  •  Control de la presentación de muchos documentos desde una única hoja de estilo. 
  •  Control más preciso de la presentación. 
  • Aplicación de diferentes presentaciones a diferentes tipos de medios (pantalla, impresión, etc.)
Soportes de CSS en los navegadores

El trabajo del diseñador web siempre está limitado por las posibilidades de los navegadores que utilizan los usuarios para acceder a sus páginas. Por este motivo es imprescindible conocer el soporte de CSS en cada uno de los navegadores más utilizados del mercado.

Estilos
Selectores :

  •  Los selectores de etiquetas HTML, se utilizan escribiendo el nombre de la etiqueta a la que le aplicaremos el estilo. 
  • Los selectores de identificador, se usan para aplicar estilos solo a las etiquetas identificadas con un nombre. 
  • El tercer selector es el de clase, se escribe en el documento CSS comenzando con un punto seguido del nombre que le queramos poner a la clase, de esta forma: .mi_clase. 

Formas de implementación

  Hoja de estilos externa: Esta es la forma más versátil , un fichero externo contiene todo nuestro código CSS de manera que es completamente independiente el código propio de la página web de su código de formato. 

 Hoja de estilos interna (la etiqueta style):  consiste en incluir el código CSS en la cabecera del sitio (etiquetas head del documento HTML), concretamente dentro de las etiquetas <style> </style>


 Estilos en línea (el atributo style):  el navegador interpreta el código (tanto HTML como CSS) lineal mente de izquierda a derecha y de arriba a abajo (tal y como leemos nosotros). Por eso, si lo primero que hacemos es incluir una hoja de estilos externa, luego implementamos una hoja de estilos interna y posteriormente le damos un estilo a una etiqueta HTML concreta, el estilo que visualizaremos será el de la etiqueta HTML por ser el último que el navegador ha leído. 

Estilo en línea 

Una de las formas más simples e intuitivas de dotar de estilos al código HTML es usando el atributo style que admiten la mayoría de las etiquetas HTML.

Estilo definido para toda una página 

Podemos definir, en la cabecera del documento, estilos para que sean aplicados a toda la página.

Font-size 

Una vez seleccionado el tipo de letra, se puede modificar su tamaño mediante la propiedad font-size. Además de todas las unidades de medida relativa y absoluta y el uso de porcentajes.
 tamaño_absoluto: indica el tamaño de letra de forma absoluta mediante alguna de las palabras clave, tales como xx-small, x-small, small, medium, large, x-large, xx-large. 
 tamaño_relativo: indica de forma relativa el tamaño de letra del texto mediante dos palabras clave (larger, smaller) que toman como referencia el tamaño de letra del elemento padre. 


lunes, 24 de septiembre de 2018

TAREA

¿Que es el UTF-8?


 Es una norma de transmisión de longitud variable para codificación de caracteres codificados utilizando Unicode, creada por Rob Pike y Ken ThompsonUTF-8 usa grupos de bytes para representar el estándar de Unicode para los alfabetos de muchos de los lenguajes del mundo. Es especialmente útil para la transmisión sobre sistemas de correo de 8 bits
.

Button type

El elemento HTML <input type="button"> es una versión específica del elemento <input>, que se usa para crear un botón en el que se puede hacer click sin ningún valor por defecto. Ha sido sustituido en HTML5 por el elemento <button>.
Los navegadores generan un controlador para un botón clickable sin valor por defecto. El botón puede contener cualquier texto. El controlador puede varíar de un navegador a otro.

PAGINA  file:///C:/Users/Gerardo/Desktop/tarea.html

viernes, 7 de septiembre de 2018

Clase 3:Listas y Tablas

Listas y Tablas


Un sitio web puede tener varias formas de organizar la información en la página y una de las opciones pueden ser las listas y tablas.

Básicamente cuando se habla de lista, hablamos de cómo organizar objetos lineales (generalmente textos). Lo podemos hacer de dos maneras: ordenadas o no.
Ordenada se refiera que enumera, es decir

  1.     
  2.     
  3.       
No ordena se refiere que usa items, por ejemplo
  •     
  •       
  •       
Para definir una lista en html:

Primero hay que definir el tipo de lista.
Después deben insertarse cada uno de los elementos de lista.
Al crear una lista  deberemos indicar su inicio y su fin. Para empezar una etiqueta para cada tipo distinto de lista -por ejemplo, para crear una lista no ordenada-, será necesario usar la etiqueta UL (su instrucción de inicio será <UL>)
 Una vez que hemos abierto la lista deberemos insertar, como dijimos antes, cada uno de sus elementos. Para ello usaremos una nueva etiqueta (o dos en algún caso) que dependerá del tipo de lista. En el caso de la lista no ordenada los elementos se introducen con la etiqueta de una única instrucción LI, ejemplo
<UL>
<LI> Argentina
<LI>Brasil
</UL>

Una lista no ordenada nos muestra un conjunto de elementos relacionados entre sí, pero sin ningún tipo de orden. La etiqueta que utilizamos en este caso es <UL> Utilizamos la etiqueta <LI> para identificar cada elemento de la lista. Tiene su atributo TYPE que puede tomar uno de los siguientes valores: “circle” (circulo sin relleno), “square” (cua-drado), “disc” (circulo con relleno).

Podemos definir el tipo de viñeta empleada para cada elemento. Para ello debemos especificarlo por medio del atributo type incluido dentro de la etiqueta de apertura<UL>  si queremos que el estilo sea válido para toda la lista, o dentro de la etiqueta <LI>si queremos hacerlo específico de un solo elemento:
 <UL TYPE="tipo de viñeta">
Donde tipo de viñeta puede ser uno de los siguientes:

  • circle: marcas en forma de circulo (por defecto) 
  • square: marcas en forma de cuadrado 
  • disk: marcas en forma de disco 
  • none: no utilizar ningún tipo de marca  








Las listas ordenadas nos permiten mostrar un conjunto de elementos o sucesos con un orden estricto.
Para incluir tales elementos, HTML nos ofrece la etiqueta <OL>   Como resultado podemos encontrar un conjunto de líneas perfectamente enumeradas.
La etiqueta <OL> posee una serie de atributos: por ejemplo TYPE que nos permite definir el estilo de numeración (A,B,C, 1,2,3 etc.), también con el atributo START definimos el valor inicial de la lista. De la misma manera la etiqueta <LI> posee dos atributos TYPE y VALUE, que cumplen igual función que para la etiqueta <OL>.
Del mismo modo que para las listas desordenadas, las listas ordenadas ofrecen la posibilidad de modificar el estilo como lo dijimos anteriormente. En concreto nos es posible especificar el tipo de numeración empleado eligiendo entre números (1, 2, 3...), letras (a, b, c...) y sus mayúsculas (A, B, C,...) y números romanos en sus versiones mayúsculas (I, II, III,...) y minúsculas (i, ii, iii,...).
 Para realizar dicha selección hemos de utilizar, como para el caso precedente, el atributo type, el cual será situado dentro de la etiqueta <OL>

  •  1 Para ordenar por números. 
  •  a Por letras del alfabeto. 
  •  A Por letras mayúsculas del alfabeto. 
  •  i Ordenación por números romanos en minúsculas 
  •  I Ordenación por números romanos en mayúsculas 
Puede que en algún caso deseemos comenzar nuestra enumeración por un número o letra que no tiene por qué ser necesariamente el primero de todos. Para solventar esta situación, podemos utilizar un segundo atributo, start, que tendrá como valor un número. Este número, que por defecto es 1, corresponde al valor a partir del cual comenzamos a definir nuestra lista. Para el caso de las letras o los números romanos, el navegador se encarga de hacer la traducción del número a la letra correspondiente. 

Listas de Definición 

Son aquellas en donde podemos presentar el texto de diferentes formas y se utilizan cuando anidamos listas. Anidar es insertar dentro de una lista otra. Esta puede ser de distintos tipos o también podemos incluir una definición.

Para incluir listas de definiciones utilizamos la etiqueta <DL>   ésta marca el comienzo y el fin de la lista. Estas listas constan de dos elementos: términos y definiciones. Para incluir un término se usa la etiqueta <DT>  y para incluir una definición la etiqueta <DD>  Como se puede apreciar las etiquetas tienen cierre, y este tipo de lista se utiliza para definir un término con su descripción.

Anidando listas…



Tablas

Una tabla en un conjunto de celdas organizadas dentro de las cuales podemos alojar distintos contenidos.  
Una tabla nos permite organizar y distribuir los espacios de la manera más optima. Nos puede ayudar a generar texto en columnas como los periódicos, prefijar los tamaños ocupados por distintas secciones de la página o poner de una manera sencilla un pie de foto a una imagen.
 Las tablas son definidas por las etiquetas <TABLE> </TABLE>   luego se colocan todas las otras etiquetas, textos e imágenes que darán forma y contenido a la tabla.
Las tablas son descriptas por líneas de izquierda a derecha. Cada una de estas líneas es definida por otra etiqueta y su cierre: <tr> </tr>   dentro de cada línea, habrá diferentes celdas. Cada una de estas celdas será definida por otro par de etiquetas: <td> </td> .

Atributos para filas y celdas

 Height y width nos ayudan a definir las dimensiones de nuestras celdas de una forma absoluta (en pixels o puntos de pantalla) o de una forma relativa.
Los atributos rowspan y colspan son también utilizados frecuentemente Rowspan: indica el número de filas que ocupará la celda. Por defecto ocupa una sola fila. Colspan: indica el número de columnas que ocupará la celda. Por defecto ocupa una sola columna.
 Cellspacing: especifica cuánto espacio debería dejar el agente de usuario entre el lado izquierdo de la tabla y el lado izquierdo de la columna que está más a la izquierda, entre la parte superior de la tabla y el lado superior de la fila que está más arriba, y lo mismo para los lados derecho e inferior. 
 Cellpadding : Este atributo especifica la
cantidad de espacio entre el borde de la celda y sus contenidos

Bordes y colores

 Para mejorar el aspecto de nuestras tablas, lo primero que querremos hacer es jugar con la anchura del borde. Para ello se ha definido el parámetro border de la etiqueta <TABLE>  que define la anchura de todos los bordes de la tabla en pixels. Si se especifica con valor 0, el borde no se visualiza.
El color del borde lo controla el parámetro bordercolor, que se aplica al tag <td> ,  Este parámetro toma valores hexadecimales o nombres de colores predefinidos, según el alfabeto inglés.
 También podemos modificar el color de fondo de cada celda de forma independiente, aplicando el parámetro bgcolor al tag <td>  Los colores se especifican de igual forma.

jueves, 30 de agosto de 2018

Clase 2: Progamar con HTML

¿Que se necesita para comenzar a programar?




  •  Editor de texto para escribir el código fuente: puede ser Notepad ++ , o Bloc de notas (aplicación que trae incorporada windows). Existen otros editores como Kompozer, podés utilizar otro con el que te sientas cómodo.

Notepad++ 

Es un programa para editar código fuente de cualquier lenguaje de programación.Es de estos editores que ofrecen ayudas muy útiles para "tirar líneas de código", como resaltado de colores, posibilidad de editar varios documentos a la vez, menús contextuales, auto-completar código, etc.  además es gratuito.
Entre las características que ofrece Notepad++ podemos destacar:

  • Coloreado de código para más de 40 lenguajes de programación diferentes, entre los que se incluyen todos los que un desarrollador del web podría tocar, como HTML, Javascript, ASP, SQL, PHP, CSS, Pitón, Ruby, etc.
  • Impresión a color de los códigos
  • Permite definir el resaltado de sintaxis para nuevos lenguajes de programación que necesite el usuario.
  • Autocompletado de código, también configurable por el usuario o extensible por medio de descargas bajo demanda del programador.
  • Multi-Documento
  • Multi-Vista, lo que significa que puedes tener más de una vista de un mismo código, con por ejemplo dos versiones del mismo documento.
  • Permite realizar acciones de Buscar / Reemplazar utilizando incluso expresiones regulares para definir los patrones a reemplazar.
  • Deteción automática del estado del documento, que puede ayudarnos en caso que queramos guardar un archivo que había sido modificado por otro usuario o programa.
  • Otras utilidades como Zoom, soporte para varios idiomas, puntos de marca, resaltado de paréntesis u sangría, creación de macros, etc. 

Kompozer

Estamos ante un programa sencillo para realizar páginas web en vista diseño, lo que técnicamente se llama WYSIWYG (what you see is what you get, lo que ves es lo que obtienes). Esto quiere decir que puedes crear sitios web directamente escribiendo texto sobre Kompozer, como si fuera un editor de texto normal y sin tener que escribir el código fuente HTML necesario para construir la página. Cuando quieres insertar otros contenidos, como imágenes o enlaces, tienes que utilizar botones de la barra de herramientas, que te muestran formularios para especificar las propiedades de los elementos, como el archivo de la imagen, el texto alternativo, o en el caso de un enlace, la dirección donde se dirige, etc.
Esto simplifica bastante la tarea de las personas que quieren empezar a crear sus páginas web, porque no tienen que aprender HTML. Simplemente tenemos que aprender a manejar Kompozer, con sus menús, formularios, etc. Pero no hay que engañarse, porque utilizar un programa de este estilo, como mínimo, requerirá unos conocimientos básicos para aprender a manejar archivos de diversos tipos, conexiones FTP, y otras características propias de la publicación en Internet. A la hora de maquetar contenidos en una web, lo que se hace con Komposer, también viene bien saber las distintas propiedades que podemos aplicar a los elementos de la página para cambiar su apariencia, colocación o comportamiento.
Kompozer ayuda bastante a la hora de diseñar la web, pero además tiene diversas herramientas para facilitar también la publicación de una página en un servidor. Dispone de un gestor de sitios (site manager), en el que podemos configurar un acceso por FTP al servidor web donde está alojada la página. A través de ese gestor podemos abrir archivos que estén en el servidor para editarlos directamente con Kompozer y luego guardarlos en el servidor con el botón "Publish". También podemos crear nuevos archivos en Kompozer y subirlos a un servidor que tengamos configurado en el gestor de sitios. El mismo gestor de sitios lo podemos utilizar también para acceder a directorios y ficheros que tengamos en local en nuestro ordenador, configurando un sitio sin indicar los datos de FTP, sino indicando el directorio de nuestro disco duro donde están los archivos de la web.

  •  Galería de imágenes: esta te ayudara para salir al paso en caso de que no tengas conexión a internet, arma una con formatos .jpg, .png, .gif (dichos formatos son los que soporta HTML).
  •  Un editor de imágenes: si necesitás retocar alguna imagen podés utilizar cualquier aplicación que uses en Multimedia 1 o Diseño Web (Photoshop, Fireworks, etc. o alguna con la que te identifiques o te sea fácil de usar). 
  •  Un servidor (Host): podés conseguir uno gratuito subscribiéndote a él, o podés adquirir uno pago. La idea es que tengas tu propio espacio para subir tus trabajos y presentarlos en caso de que lo necesites. 

Comenzando con HTML5
¿Qué son las etiquetas?

  Son elementos dentro del código de hipertexto que funcionan como una especie de marca, que le otorga a la sección encerrada dentro de la etiqueta una característica específica, como color de fuente, tamaño, tipo de elemento y hasta la sección que ocupa dentro del archivo HTML, o en este caso HTML5.
Las etiquetas se inician de la siguiente manera: ‹› y se cierran con: ‹/›

 Etiquetas semánticas: etiquetas que indican qué es el contenido que contienen, en lugar de como se debe formatear al mostrar el documento HTML en un cliente web.
Son las que sirven para definir el esquema principal del documento, como HEADER, ARTICLE, FOOTER, etc. Todas esas etiquetas semánticas nos indican qué es el contenido que engloban y cuál es su relación con el conjunto de elementos del documento HTML.

¡A programar!

 La primera línea de código es la declaración <!DOCTYPE HTML>  de un documento HTML. Esta etiqueta indica qué versión de HTML se utiliza en el documento, para que los navegadores puedan aplicar la gramática y sintaxis correspondiente al él. La versión de HTML5 simplifica mucho esta directiva. Las versiones anteriores HTML usaban declaraciones más complicadas para varios formatos HTML.

 La directiva <HTML>  aparece una vez al principio de la página web y de nuevo con una barra añadida ( </HTML>) al final y le indica al navegador que todo lo que se encuentra entre ellas es código html y se debe interpretar como tal.

Con la directiva <HEAD>  y </HEAD>se delimita la cabecera del documento que suele contener información sobre el mismo como título, idioma, palabras clave, autor, etc. La información que se especifique en la cabecera no es mostrada por el navegador al usuario con la única excepción de la etiqueta <TITLE> y </TITLE> esta sirve para especificar el título del documento y es visualizada en la barra de título de la ventana correspondiente al programa navegador.

 La directiva  <BODY> delimita el cuerpo de un documento html y engloba todo el contenido que se ve en una página web: titulares, texto, imágenes, listas, tablas, formularios.



<HEADER> </HEADER> : Es el elemento que abre la web. Normalmente lleva ubicado el logotipo o el texto representativo. En los casos que la web lleve publicidad, también se suele ubicar el banner de cabecera dentro de él.


<NAV> </NAV>: Representa a todos los enlaces de navegación que llevan a las distintas secciones de nuestra web. Es una de las partes más importante, pues debe ser fundamental para que el usuario sea capaz de navegar por las categorías y páginas.



<SECTION> </SECTION>: Es la etiqueta que viene a sustituir por defecto al <DIV>
, y lo que indica es que estamos en una sección distinta, como si de un capítulo de un libro se tratase.



<ARTICLE> </ARTICE>: La etiqueta article está diseñada para contener una unidad propia de información y contenido, que a su vez puede tener su cabecera (header), cuerpo (section) y pie de artículo (footer). Un section puede contener varios artículos independientes.



<ASIDE> </ASIDE>: Viene a sustituir al sidebar o barra lateral, aunque su uso es para llenarlo de contenido que no esté relacionado directamente con esa página, por ejemplo un listado de enlaces, anuncios, iconos sociales, etc.



<FOOTER> </FOOTER>
: Representa el pie de página, presente en casi todas las webs. Nos sirve para ubicar los datos de contacto, algo de información extra, iconos sociales, actualizaciones de twitter, etc. Permite inclusive un segundo menú de navegación.



Etiquetas y atributos
Las etiquetas pueden presentar modificadores que llamaremos atributos, los que nos permitirán definir diferentes posibilidades de la instrucción HTML. Estos atributos se definirán en la etiqueta de inicio y consistirán normalmente en el nombre del atributo y el valor que toma, separados por un signo de igual. El orden en que se incluyan los atributos es indiferente y no afecta al resultado. Si se incluye varias veces el mismo atributo con distintos valores, el resultado obtenido será imprevisible dependiendo de cómo lo interprete el navegador. Cuando el valor que toma el atributo tiene más de una palabra, deberá expresarse entre comillas, en otro caso no será necesario.


Los atributos se incluyen siempre dentro de la etiqueta de inicio y llevan inmediatamente detrás el signo igual (“=”) con los valores de dichos atributos entre comillas (“”).


Etiquetas lógicas y físicas 

Los estilos físicos formatean cada porción de texto atendiendo tan sólo a cómo debe aparecer finalmente en pantalla, sin preocuparse en absoluto en qué peso o papel desempeña cada parte del documento en el esquema total del mismo.

<B>: muestra el texto en un tipo de letra más grueso.
<I>: muestra el texto inclinado (en cursiva).
<U>: subraya el texto.
<TT>: utiliza un tipo de letra no proporcional.
<BIG>: muestra el texto con un tipo de letra más grande. 
<SMALL>: utiliza un tipo de letra menor
<S>: utiliza un tipo de letra tachado. 
<SUB>:escribe como subíndice. 
<SUP>: escribe como superíndice.  

Los estilos lógicos se caracterizan porque en ellos hacemos un estudio lógico de cada parte del documento, observando la importancia que tiene en el global del mismo distinguiendo entre cabeceras, citas, subíndices, comienzos de capítulo, etc., por lo que formatearemos cada parte del documento de acuerdo a su importancia en el conjunto global. 

<STRONG>: muestra el texto en un tipo de letra más fuerte, normalmente en negrita.
<EM>: muestra el texto enfatizado, normalmente en cursiva.
<CODE>: suele utilizarse para mostrar algún tipo de código, suele usar un tipo de fuente no proporcional. 
<BLOCKQUOTE>: bloque de texto indentado. 

Etiquetas Anidadas 

 Las etiquetas HTML5 suelen ir en parejas y también vimos que es posible incluir unas etiquetas dentro de otras. Esto es lo que precisamente se llama anidamiento. Por ejemplo:
<B>negrita</ B>
<B><I>cursiva y negrita</I></B>


El < META CHARSET = "UFT-8"> es el tipo de carácter que usamos en toda la pagina.

Saltos de Línea
 El salto de línea está definido con la etiqueta <BR> . Es utilizado cuando queremos terminar una línea sin necesidad de terminar con el párrafo. La etiqueta <BR> obliga a saltar de línea donde quiera que la ubiquemos. 

Parrafos
<P>: esta etiqueta sirve para separar párrafos.

Cabeceras
 En un documento HTML es posible definir seis tipos distintos de cabeceras que serán normalmente el título del documento y los distintos sub-apartados que lo forman. 
Las etiquetas que definen las cabeceras serán <H1> indica el tirulo mayor <H2> corresponde al tirulo menor <H3> sirve para colocar un subtitulo<H4> corresponde a un subtitulo 2<H5> este realiza un subtitulo 3.


Las Imágenes y HTML

 Un documento HTML puede incorporar imágenes o gráficos, no sólo como fondo del documento (con el atributo BGCOLOR de la etiqueta <BODY>) sino dentro del propio cuerpo del documento. Existen distintos tipos de imágenes: 
  • Jpg: (con extensión JPG) son imágenes en color real (paleta de colores RGB de 24 bits) comprimidas mediante un algoritmo matemático. Se emplean cuando la imagen precisa una gran cantidad de colores (fotografías principalmente), prevaleciendo la calidad de la imagen y su colorido sobre el tamaño del archivo. 
  •  Gif: En el formato GIF, las imágenes sólo se representan mediante una paleta de 256 colores, por lo que no permiten la presentación de imágenes muy complejas. Son las más empleadas por su pequeño tamaño. Puede escogerse uno de los 256 colores para hacerlo transparente, con lo que el navegador no representa dicho color en el documento, viéndose su fondo. 
  •  Gif animado: Consiste en una serie de imágenes en formato GIF (y por tanto en 256 colores) que se alternan en la pantalla del ordenador, obteniéndose una película. El GIF animado puede repetirse un número determinado de veces o indefinidamente, de forma que la película se repita ininterrumpida mente, volviendo al principio cuando se ve la última imagen.
  •  PNG: (Portable Network Graphics) es un formato gráfico basado en un algoritmo de compresión sin pérdida para bitmaps. Este formato fue desarrollado en buena parte para solventar las deficiencias del formato GIF y permite almacenar imágenes con una mayor profundidad de color.

¿Cómo insertar imágenes?

<IMG>: Para insertar una imagen en un documento HTML se emplea la etiqueta , que carece de etiqueta de cierre. Por el contrario presenta varios atributos, uno de los cuales, el atributo SRC, es imprescindible para su funcionamiento. 
 SRC: El atributo SRC es indispensable dentro de la etiqueta , ya que especifica la URL (absoluta o relativa) de la imagen que se desea insertar en el documento HTML. Así, para insertar una imagen llamada foto.jpg que se encuentre en el directorio imágenes, respecto a la ubicación del documento, escribiremos: 
<IMG SRC=”imagenes/foto.jpg”>

Si por el contrario la imagen se halla en el directorio imágenes del sitio www.dominio.ar, deberemos indicar:
<IMG SRC=”http://www.dominio.ar/ imagenes/foto.jpg”>

lunes, 13 de agosto de 2018

Clase 1: Introducción al Lenguaje de Marcas de Hipertexto HTML


¿Qué es HTML?


Si buscas en GOOGLE o en cualquier otro buscador la definición de HTML, probablemente encontrarás está:

“HTML es un lenguaje de programación que se utiliza para el desarrollo de páginas de Internet. Se trata de la siglas que corresponden a HyperText Markup Language, es decir, Lenguaje de Marcas de Hipertexto”.

No obstante, este tipo de definiciones no nos dice mucho porque la definición es técnica. Para algunas personas al leer esto, piensan que HTML incluye el diseño gráfico de las páginas web, sin embargo, eso no es cierto ya que HTML sólo sirve para indicar como va ordenado el contenido de una página web. Esto lo hace por medio de las marcas de hipertexto las cuales son etiquetas conocidas en inglés como tags.

Para entender que son las etiquetas vamos a imaginar que tienen que hacer un ensayo sobre algún tema, consideraremos que el ensayo será nuestra página web y la manera en la que va ordenado un ensayo es por un título, la introducción, el desarrollo y la conclusión, si se tiene en cuenta que esto nos dice cómo debe ir nuestro ensayo podemos considerar que éstas serían las etiquetas porque nos dicen la estructura que lleva, es decir, la forma en que se acomoda el texto en nuestro ensayo. Cabe mencionar que las etiquetas no sólo sirven para ordenar nuestro contenido sino que ayudan a los buscadores como Google, Yahoo search y muchos otros a encontrar la información por medio de las etiquetas.

Ahora que entendemos el concepto de etiquetas, necesitamos poder identificarlas. Éstas se caracterizan porque van dentro de los caracteres menor que < y mayor que >, como en este ejemplo: <Aquí dentro va el nombre de la etiqueta>

Aunque eso no es todo debido a que deben tener un inicio y un fin. El inicio de una etiqueta es normal, en otras palabras lleva los dos caracteres que mencioné anteriormente y dentro de estos se encuentra el nombre, sin embargo, existe una diferencia para el fin de la etiqueta ya que antes de escribir el nombre de la etiqueta debemos escribir una diagonal /. Como en este ejemplo:
<Inicio de la etiqueta>
</Fin de la etiqueta>

Existes ciertas excepciones con el fin de las etiquetas, ya que algunas usualmente sólo se utilizan con el inicio de la etiqueta, ejemplos de esto son las etiquetas BR (salto de línea), IMG (etiqueta para poner una imagen), entre otras.



¿Qué es una pagina web?


Se conoce como página web al documento que forma parte de un sitio web y que suele contar con enlaces (también conocidos como hipervínculos o links) para facilitar la navegación entre los contenidos.

 Las páginas web están desarrolladas con lenguajes de marcado como el HTML, que pueden ser interpretados por los navegadores. De esta forma, las páginas pueden presentar información en distintos formatos (texto, imágenes, sonidos, videos, animaciones), estar asociadas a datos de estilo o contar con aplicaciones interactivas.

Entre las múltiples características que tiene una página web y que sirven para identificarla se encuentran las siguientes: cuenta con información textual y también con material de tipo audiovisual, está dotada de un diseño atractivo, está optimizada y ejerce como la tarjeta de presentación de una empresa, una persona o un profesional concreto.

 En los últimos años, dado el avance y presencia que tiene Internet en nuestras vidas, muchas son las empresas que se han puesto en marcha y han creado su página web. Y es que han descubierto que la misma les sirve para darse a conocer al mundo, para conseguir captar nuevos clientes y, por tanto, para mejorar sus resultados económicos.

En este sentido, es importante saber que para poder conseguir que dicho espacio en la Red sea absolutamente efectivo y permita alcanzar los citados objetivos hay que tener en cuenta una serie de criterios fundamentales:

Tiene que tener un diseño atractivo para poder llamar la atención del usuario y conseguir que navegue por ella. En este sentido, ese atractivo se conseguirá ofreciendo información de calidad así como materiales de diversa índole tales como animaciones, vídeos, imágenes…

Es vital que se realice con ella las consabidas tareas de estrategia SEO y de optimización. Sólo de esa manera se logrará que la misma sea visible y conocida.
Es posible distinguir entre las páginas web estáticas (cuyos contenidos son predeterminados) y las páginas web dinámicas (que generan contenidos al momento de solicitar información a un servidor de web a través de lenguajes interpretados como JavaScript).

Un conjunto de páginas web, por lo tanto, forman un sitio web. Las páginas suelen estar reunidas bajo un dominio común para que el sitio en cuestión sea accesible desde una misma dirección en Internet.

La inmensa totalidad de páginas que forman los sitios web dan lugar a lo que se conoce como World Wide Web, Web, Red o, simplemente, Internet, que es el universo virtual donde está reunida la información digital del ciberespacio.


Historia del HTML


 Tim Berners-Lee, da a conocer a la prensa que estaba trabajando en un sistema que va a permitir acceder a ficheros en línea que funcionaba sobre redes de computadoras o máquinas electrónicas basadas en el protocolo TCP/IP.
A principios de 1990, define por fin el HTML como un subconjunto del conocido SGML y crea algo más valioso incluso, el World Wide Web.
Tim Berners-Lee creó el proyecto World Wide Web (Tejido o Telaraña Mundial), así como un sistema que facilitaba la lectura de información, mediante un programa de navegación. Sería el primer navegador web, llamado WorldWideWeb, y desarrollado durante la segunda mitad del año 1990; siendo tiempo después rebautizado como Nexus, para evitar confusiones por su nombre que era igual al de la tecnología que representaba
.Los trabajos para crear un sucesor del HTML, denominado HTML +, comenzaron a finales de 1993. HTML+ se diseñó originalmente para ser un superconjunto del HTML que permitiera evolucionar gradualmente desde el formato HTML anterior. A la primera especificación formal de HTML+ se le dio, por lo tanto, el número de versión 2 para distinguirla de las propuestas no oficiales previas. Los trabajos sobre HTML+ continuaron, pero nunca se convirtió en un estándar, a pesar de ser la base formalmente más parecida al aspecto compositivo de las especificaciones actuales.
El borrador del estándar HTML 3.0 fue propuesto por el recién formado W3C en marzo de 1995. Con él se introdujeron muchas nuevas capacidades; por ejemplo, facilidades para crear tablas, hacer que el texto fluyese alrededor de las figuras y mostrar elementos matemáticos complejos. Aunque se diseñó para ser compatible con HTML 2.0, era demasiado complejo para ser implementado con la tecnología de la época, y cuando el borrador del estándar expiró en septiembre de 1995, se abandonó debido a la carencia de apoyos de los fabricantes de navegadores web. El HTML 3.1 nunca llegó a ser propuesto oficialmente, y el estándar siguiente fue el HTML 3.2, que abandonaba la mayoría de las nuevas características del HTML 3.0 y, a cambio, adoptaba muchos elementos desarrollados inicialmente por los navegadores web Netscape y Mosaic. La posibilidad de trabajar con fórmulas matemáticas que se había propuesto en el HTML 3.0 pasó a quedar integrada en un estándar distinto llamado MathML.
En 1997, HTML 4.0 se publicó como una recomendación del W3CHTML 4.0 adoptó muchos elementos específicos desarrollados inicialmente para un navegador web concreto, pero al mismo tiempo comenzó a limpiar el HTML señalando algunos de ellos como «desaprobados» .
HTML 4.0 implementa características como XForms 1.0 que no necesitan implementar motores de navegación que eran incompatibles con algunas páginas web HTML. En 2004 la W3C reabrió el debate de la evolución del HTML, y se dieron a conocer las bases para la versión HTML5. No obstante, este trabajo fue rechazado por los miembros del W3C y se daría preferencia al desarrollo del XML.
Tiempo despues en 2004, cuando se fundó el grupo de trabajo WHAT con miembros de Apple, la Fundación Mozilla y Opera Software. Dos años después consiguieron uno de sus principales apoyos, pues el W3C(World Wide Web Consortium) decidió abandonar XHTML y comenzó a trabajar con WHAT.
2008 fue un gran año para este lenguaje, pues se finalizó su primera versión. Esto permitió que Firefox 3, el navegador de Mozilla, fuese compatible con HTML5. Más adelante se sumarían Internet ExplorerGoogle Chrome y Safari.
Poco a poco se fueron sumando compañías y se fue abandonando el uso de tecnologías como Flash. De hecho, en septiembre de 2011, 34 de las 100 páginas con más tráfico según el ranking de Alexa utilizaban este lenguaje.

HTML5 (HyperText Markup Language, versión 5) es la quinta revisión importante del lenguaje básico de la World Wide WebHTML. HTML5 especifica dos variantes de sintaxis para HTML: una «clásica», HTML (text/html), conocida como HTML5, y una variante XHTML conocida como sintaxis XHTML5 que deberá servirse con sintaxis XML (application/xhtml+xml). Esta es la primera vez que HTML y XHTML se han desarrollado en paralelo. La versión definitiva de la quinta revisión del estándar se publicó en octubre de 2014.XHTML (eXtensible HyperText Markup Language), es básicamente HTML expresado como XML válido. Es más estricto a nivel técnico, pero esto permite que posteriormente sea más fácil al hacer cambios o buscar errores entre otros.