Paginas Web 1

Capitulo 1
<head> El elemento va primero, por supuesto, y al igual que el resto de los elementos
estructurales tiene una etiqueta de apertura y una de cierre
<body> . El cuerpo representa la parte visible de todo documento y es especificado entre

etiquetas
<Lang> en la etiqueta de apertura es el único atributo que necesitamos especificar en

HTML5. Este atributo define el idioma humano del contenido del documento que estamos
creando, en este caso es por español.
<name> el atributo esta adentro de la etiqueta
<meta> Algunos cambios e innovaciones fueron incorporados dentro de la cabecera, y uno de

ellos es la etiqueta que define el juego de caracteres a utilizar para mostrar el documento. Ésta
es una etiqueta que especifica cómo el texto será presentado en pantalla
<title> como siempre, simplemente especifica el título del documento, y no hay nada nuevo
para comentar
<table> Las tablas permitían a los diseñadores acomodar datos, texto, imágenes y
herramientas dentro de filas y columnas de celdas, incluso sin que hayan sido concebidas para
este propósito.
<div>Desde imágenes a menús, textos, enlaces, códigos, formularios, cualquier cosa puede ir
entre las etiquetas de apertura y cierre de un elemento
. En otras palabras, la palabra clave div solo especifica una división en el cuerpo, como la
celda de una tabla, pero no ofrece indicio alguno sobre qué clase de división es, cuál es su
propósito o qué contiene.
<header> Este elemento presenta información introductoria y puede ser aplicado en

diferentes secciones del documento. Tiene el propósito de contener la cabecera de
una sección pero también puede ser utilizado para agrupar índices, formularios de
búsqueda, logos, etc…
<nav> Este elemento indica una sección de enlaces con propósitos de navegación, como
menús o índices. No todos los enlaces dentro de una página web tienen que estar
dentro de un elemento <nav>, solo aquellos que forman partes de bloques de
navegación.
<section> Este elemento representa una sección general del documento. Es usualmente
utilizado para construir varios bloques de contenido (por ejemplo, columnas) con el
propósito de ordenar el contenido que comparte una característica específica, como
capítulos o páginas de un libro, grupo de noticias, artículos, etc…
<aside> Este elemento representa contenido que está relacionado con el contenido
principal pero no es parte del mismo. Ejemplos pueden ser citas, información en barras
laterales, publicidad, etc…
<footer> Este elemento representa información adicional sobre su elemento padre. Por
ejemplo, un elemento <footer> insertado al final del cuerpo proveerá información
adicional sobre el cuerpo del documento, como el pie normal de una página web.
Puede ser usado no solo para el cuerpo sino también para diferentes secciones dentro
del cuerpo, otorgando información adicional sobre estas secciones específicas.
<article> Este elemento representa una porción independiente de información relevante
(por ejemplo, cada artículo de un periódico o cada entrada de un blog). El elemento
<article> puede ser anidado y usado para mostrar una lista dentro de otra lista de
ítems relacionados, como comentarios de usuarios en entradas de blogs, por ejemplo.
<hgroup> Este elemento es usado para agrupar elementos H cuando la cabecera tiene
múltiples niveles (por ejemplo, una cabecera con título y subtítulo).
<figure> Este elemento representa una porción independiente de contenido (por ejemplo,
imágenes, diagramas o videos) que son referenciadas desde el contenido principal. Esta es
información que puede ser removida sin afectar el fluido del resto del contenido.
<figcaption> Este elemento es utilizado para mostrar una leyenda o pequeño texto
relacionado con el contenido de un elemento <figure>, como la descripción de una
imagen.
<mark> Este elemento resalta un texto que tiene relevancia en una situación en particular
o que ha sido mostrado en respuesta de la actividad del usuario.
<small> Este elemento representa contenido al margen, como letra pequeña (por
ejemplo, descargos, restricciones legales, declaración de derechos, etc…).
<cite> Este elemento es usado para mostrar el título de un trabajo (libro, película, poema,
etc…).
Cap 2
Selector de Atributo Ahora podemos utilizar otros atributos además de id y class para
encontrar elementos en el documento y asignar estilos. Con la construcción
palabraclave[atributo=valor], podemos referenciar un elemento que tiene un atributo
particular con un valor específico.
Pseudo Clase :nth-child() Esta pseudo clase encuentra un hijo específico siguiendo la
estructura de árbol de HTML.
Pseudo Clase :first-child Esta pseudo clase es usada para referenciar el primer hijo, similar
a :nth-child(1).
Pseudo Clase :last-child Esta pseudo clase es usada para referenciar el último hijo.
Pseudo Clase :only-child Esta pseudo clase es usada para referenciar un elemento que es
el único hijo disponible de un mismo elemento padre.

Pseudo Clase :not() Esta pseudo clase es usada para referenciar todo elemento excepto el
declarado entre paréntesis.
Selector > Este selector referencia al elemento de la derecha cuando tiene el elemento de
la izquierda como padre. Por ejemplo, div > p referenciará cada elemento <p> que
es hijo de un elemento <div>.
Selector + Este selector referencia elementos que son hermanos. La referencia apuntará al
elemento de la derecha cuando es inmediatamente precedido por el de la izquierda.
Selector ~ Este selector es similar al anterior, pero en este caso el elemento de la derecha no
tiene que estar ubicado inmediatamente después del de la izquierda.
Cap3
border-radius Esta propiedad genera esquinas redondeadas para la caja formada por el
elemento. Posee dos parámetros diferentes que dan forma a la esquina.
box-shadow Esta propiedad crea sombras para la caja formada por el elemento. Puede tomar
cinco parámetros: el color, el desplazamiento horizontal, el desplazamiento vertical, el valor
de difuminación, y la palabra clave inset para generar una sombra interna.
text-shadow Esta propiedad es similar a box-shadow pero específica para textos. Toma
cuatro parámetros: el color, el desplazamiento horizontal, el desplazamiento vertical, y
el valor de difuminación (por ejemplo, text-shadow: #000000 5px 5px 10px).
@font-face Esta regla nos permite cargar y usar cualquier fuente que necesitemos.
Primero, debemos declarar la fuente, proveer un nombre con la propiedad fontfamily y

especificar el archivo con src (por ejemplo, @font-face{ font-family:
linear-gradient(posición inicio, color inicial, color final) Esta función puede ser aplicada a
las propiedades background o background-image para generar un gradiente lineal.
Los atributos indican el punto inicial y los colores usados para crear el gradiente.
radial-gradient(posición inicio, forma, color inicial, color final) Esta función puede ser
aplicada a las propiedades background o background-image para generar un
gradiente radial.
rgba() Esta función es una mejora de rgb(). Toma cuatro valores: el color rojo (0-255), el
color verde (0-255), el color azul (0-255), y la opacidad (un valor entre 0 y 1).
hsla() Esta función es una mejora de hsl(). Puede tomar cuatro valores: el tono (un valor
entre 0 y 360), la saturación (un porcentaje), la luminosidad (un porcentaje), y la
opacidad (un valor entre 0 y 1).
outline Esta propiedad fue mejorada con la incorporación de otra propiedad llamada
outline-offset. Ambas propiedades combinadas generan un segundo borde
alejado del borde original del elemento (por ejemplo, outline: 1px solid
#000000; outline-offset: 10px;).
border-image Esta propiedad crea un borde con una imagen personalizada.
transform Esta propiedad modifica la forma de un elemento. Utiliza cuatro funciones
básicas: scale (escalar), rotate (rotar), skew (inclinar), y translate (trasladar o
mover).
transition Esta propiedad puede ser aplicada para crear una transición entre dos estados de un
elemento.
Cap 4
Canvas Esta API es una API de dibujo, específica para la creación y manipulación de
gráficos. Utiliza métodos Javascript predefinidos para operar.
Drag and Drop Esta API hace que arrastrar y soltar elementos con el ratón en la pantalla
sea posible también en la web.
Geolocation Esta API tiene la intención de proveer acceso a información correspondiente
con la ubicación física del dispositivo que está accediendo a la aplicación. Puede
retornar datos como la latitud y longitud utilizando diferentes mecanismos (como
información de la red o GPS).
Web Storage Esta API introduce dos atributos para almacenar datos en el ordenador del
usuario: sessionStorage y localStorage.
Indexed Database Esta API agrega la capacidad de trabajar con bases de datos del lado del
usuario. El sistema fue desarrollado independientemente de previas tecnologías y
provee una base de datos destinada a aplicaciones web.
File Este es un grupo de APIs desarrollada para proveer la capacidad de leer, escribir y
procesar archivos de usuario.
XMLHttpRequest Level 2 Esta API es una mejora de la vieja XMLHttpRequest destinada a
la construcción de aplicaciones Ajax. Incluye nuevos métodos para controlar el
progreso de la operación y realizar solicitudes cruzadas (desde diferentes orígenes).
Cross Document Messaging Esta API introduce una nueva tecnología de comunicación
que permite a aplicaciones comunicarse entre sí a través de diferentes cuadros o
ventanas.
WebSockets Esta API provee un mecanismo de comunicación de dos vías entre clientes y
servidores para generar aplicaciones en tiempo real como salas de chat o juegos en
línea.
Web Workers Esta API potencia Javascript permitiendo el procesamiento de código detrás
de escena, de forma separada del código principal, sin interrumpir la actividad normal
de la página web, incorporando la capacidad de multitarea a este lenguaje.
History Esta API provee la alternativa de incorporar cada paso en el proceso de una
aplicación dentro del historial de navegación del navegador.
Offline Esta API apunta a mantener las aplicaciones funcionales incluso cuando el
dispositivo es desconectado de la red.

Paginas Web 1

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Paginas Web 1

Cargado por

Copyright:

Formatos disponibles

Capitulo 1

<body> . El cuerpo representa la parte visible de todo documento y es especificado entre

<Lang> en la etiqueta de apertura es el único atributo que necesitamos especificar en

<name> el atributo esta adentro de la etiqueta

<meta> Algunos cambios e innovaciones fueron incorporados dentro de la cabecera, y uno de

<header> Este elemento presenta información introductoria y puede ser aplicado en

búsqueda, logos, etc…

dentro de un elemento <nav>, solo aquellos que forman partes de bloques de

propósito de ordenar el contenido que comparte una característica específica, como

capítulos o páginas de un libro, grupo de noticias, artículos, etc…

laterales, publicidad, etc…

ejemplo, un elemento <footer> insertado al final del cuerpo proveerá información

del cuerpo, otorgando información adicional sobre estas secciones específicas.

<article> Este elemento representa una porción independiente de información relevante

(por ejemplo, cada artículo de un periódico o cada entrada de un blog). El elemento

ítems relacionados, como comentarios de usuarios en entradas de blogs, por ejemplo.

relacionado con el contenido de un elemento <figure>, como la descripción de una

o que ha sido mostrado en respuesta de la actividad del usuario.

ejemplo, descargos, restricciones legales, declaración de derechos, etc…).

el único hijo disponible de un mismo elemento padre.

declarado entre paréntesis.

es hijo de un elemento <div>.

elemento de la derecha cuando es inmediatamente precedido por el de la izquierda.

elemento. Posee dos parámetros diferentes que dan forma a la esquina.

cuatro parámetros: el color, el desplazamiento horizontal, el desplazamiento vertical, y

el valor de difuminación (por ejemplo, text-shadow: #000000 5px 5px 10px).

Primero, debemos declarar la fuente, proveer un nombre con la propiedad fontfamily y

las propiedades background o background-image para generar un gradiente lineal.

entre 0 y 360), la saturación (un porcentaje), la luminosidad (un porcentaje), y la

opacidad (un valor entre 0 y 1).

outline-offset. Ambas propiedades combinadas generan un segundo borde

#000000; outline-offset: 10px;).

border-image Esta propiedad crea un borde con una imagen personalizada.

transform Esta propiedad modifica la forma de un elemento. Utiliza cuatro funciones

básicas: scale (escalar), rotate (rotar), skew (inclinar), y translate (trasladar o

gráficos. Utiliza métodos Javascript predefinidos para operar.

sea posible también en la web.

Geolocation Esta API tiene la intención de proveer acceso a información correspondiente

información de la red o GPS).

usuario: sessionStorage y localStorage.

usuario. El sistema fue desarrollado independientemente de previas tecnologías y

provee una base de datos destinada a aplicaciones web.

procesar archivos de usuario.

XMLHttpRequest Level 2 Esta API es una mejora de la vieja XMLHttpRequest destinada a

la construcción de aplicaciones Ajax. Incluye nuevos métodos para controlar el

progreso de la operación y realizar solicitudes cruzadas (desde diferentes orígenes).

que permite a aplicaciones comunicarse entre sí a través de diferentes cuadros o

de la página web, incorporando la capacidad de multitarea a este lenguaje.

aplicación dentro del historial de navegación del navegador.

También podría gustarte