HTML CSS Javascript

HTML CSS Javascript

Introducción al desarrollo de páginas WEB,

HyperText Markup Language HTML

Según Wikipedia, el lenguaje de marcas para hipertexto (HTML-HyperText Markup Language)

HTML es un estándar definido por el Consorcio World Wide Web (World Wide Web Consortium, abreviado W3C)...https://www.w3.org/

Fuente: http://dev.xguru.net/html5/src/html5timeline.png

Estándares provistos por W3C en el diseño WEB y aplicaciones

Estructura de una página HTML

Detalle de tags por categoría

Elementos básicos en HTML

PARRAFOS

ENLACES

HEADINGS desde <h1> hasta <h6>

IMAGENES

LISTAS

BOTONES

Layouts

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_layout_float

ANSI fue el charset por defecto en Windows.En HTML 4 es 8859-1. En HTML 5 es UTF-8.

Conjuntos de caracteres - Charsets

ANSI fue el charset por defecto en Windows.En HTML 4 es 8859-1. En HTML 5 es UTF-8.

Línea de indicación de "responsive"

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Tipos de documentos - Doctype

La declaración <!DOCTYPE> debe ser la primera línea en un documento HTML. NO es un tag de HTML, NO es case-sensitive. Es una instrucción para que el browser conozca la verión de HTML en la que está escrito el documento. En HTML5 En HTML 4.0 strict

DocTypes válidos y elementos que permite

Esto es HTML 3

Distintas especificaciones

Con la evolución del HTML se van generando distintas especificaciones de la sintaxis del lenguaje de marcas.

Esto es XHTML

Abrir enlace detallado de HTML

Tipos de input

Tags que permiten la captura de datos del usuario.

En HTML5

Radiografía de un elemento HTML

Atributos de un elemento en HTML

Detalle de atributos globales

Detalle de atributos específicos

Validación de especificaciones

La validación de una página web es el proceso para asegurar que las páginas del sitio web se ajustan a los estándares definidos por varias organizaciones, principalmente el W3C.El W3C ofrece gratuitamente el Servicio de Validación de Marcado.

La validación es muy importante, porque asegura que las páginas web son interpretadas de la misma forma por software diferente.

Lo nuevo en HTML5

HTML5 es la nueva versión de HTML, tiene más etiquetas y por lo tanto más opciones de diseño.

Abrir enlace detallado de HTML5

Ejemplo de uso de <details>

Cascading Style Sheet

Hojas de Estilo en Cascada (CSS)

Es un lenguaje de estilo de hojas usado para describir la presentación de las páginas web. CSS permite la separación del contenido del documento de la presentación del documento (disposición, colores, fuentes, etcétera).

Abrir enlace detallado de CSS

Hojas de Estilo en Cascada (CSS)

CSS 2.1 es un lenguaje de estilo para páginas que indican al browser cómo debe aparecer los elementos disuestos en una página por ejemplo, fuentes y espaciado.La posibilidad de separar el estilo de presentación del documento del contenido del documento, CSS favorece la creación de páginas web y el mantenimiento del sitio.

Abrir enlace detallado de CSS

Características particulares de CSS

Herencia en la jerarquía:Si se aplica un estilo a un elemento (parent) que contiene otros elementos internos, éstos heredan el mismo estilo .

Las reglas tienen dos partes:Un selector : indica al browser los elementos que deben ser afectados por la regla. Hay distintos tipos de selectores Una declaración: es la que indica al browser el conjunto de propiedades a aplicar. Hay varios tipos de propiedades.

Sintaxis de un elemento CSS

Es un lenguaje de estilo de hojas usado para describir la presentación de las páginas web. CSS permite la separación del contenido del documento de la presentación del documento (disposición, colores, fuentes, etcétera).

CSS 2.1 tiene más de 90 propiedades..La última especificación es CSS 3

Características particulares de CSS

ReglasUn selector, seguido de un conjunto de propiedades encerradas en corchetes [ ] Selector Type: indica que tipo de instancia del elemento HTML (tag) – Class: nombre de clase precedido por "." – ID: identificador precedido por “#” – Pseudo-classes: nombre de pseudo-clases Propiedad y valor: Seguidos de coma Espacio es opcional (cuando es requerido el valor con su unidad, no debe llevar espacio antes) Punto y coma entre propiedades.

Ejemplo de una propiedad

class: Atributo que puede añadirse a elementos HTML para identificarlos desde la hoja de estilo para accederlos o asignarles un estilo particular <p class="footer"> La sintaxis del selector de clase debe indicar el elemento específico con el atributo del class-name. p.footer { color: blue; } Si no se indica el elemento, se aplica a todos los del documento .important {color: red;} <p class="important"> Bla, bla, bla. </p> <ul class="important"> <li>Bla, bla.</li> <li>Bla.</li> </ul>

Otras propiedades

background color text link model layout

Características particulares de CSS

Características particulares de CSS

Tres formas de conectar HTML con CSS

– Externa (linking): Se pueden enlazar varias páginas al mismo estilo. – Internal (embedded): Útil cuando el estilo se usa únicamente en una página determinada – Inline: Útil cuando el estilo se usa únicamente en un elemento de la página.

Conectando HTML con CSS

<link rel="stylesheet" href="style.css" type="text/css" media="screen" /> -href: – Indica al browser donde localizar la hoja de estilo (URL relativa o absoluta) • rel: – Indica al browser que debe esperar (una hoja de estilo o una hoja alternativa) - type: – Indica el tipo de documento enlazado (text/css, text/javascript) - media: - Indica al browser que la hoja de estilo se aplicará a cierto tipo de dispositivo: screen (Computer display), print (Printer), projection (Projector), aural (Speech synthesizer), braille (Braille line), tty:( Console (text) display), tv (Television), all (All devices (default value))

Conectando HTML con CSS

JavaScript

Introducción a Javascript

"Javasript es un lenguaje interpretado para programar el comportamiento de una página WEB.Una página web dinámica es aquella que incorpora efectos como texto que aparece y desaparece, animaciones, acciones que se activan al pulsar botones y ventanas con mensajes de aviso al usuario. A principios de los años 90, la mayoría de usuarios que se conectaban a Internet lo hacían con módems a una velocidad máxima de 28.8 kbps. En esa época, empezaban a desarrollarse las primeras aplicaciones web y por tanto, las páginas web comenzaban a incluir formularios complejos. Con unas aplicaciones web cada vez más complejas y una velocidad de navegación tan lenta, surgió la necesidad de un lenguaje de programación que se ejecutara en el navegador del usuario. de modo que su tiempo de respuesta no fuera mucho .

Formato de JS en una página HTML

Sintaxis

JavaScript despliega resultados de 4 formas distintas: innerHTML. : escribe en un elemento HTML document.write() : escribe en la salida del HTML window.alert() : escribe en una ventana emergente. console.log(): escribe en la consola del browser.

Sintaxis

Sintaxis

"Javasript es maneja el concepto de script (trozo de código que se forma de una o más instrucciones que se escriben bajo una sintaxis similar a la del resto de lenguajes de programación.Las palabras reservadas por JavaScript son: break, case, catch, continue, default, delete, do, else, finally, for, function, if, in, instanceof, new, return, switch, this, throw, try, typeof, var, void, while, with Las instrucciones se concluyen con punto y coma ( ; )