Practica

TRABAJO
NOMBRES: LUZ MARINA CCACCASACA APAZA

ESPECIALIDAD: COMPUTACION E INFORMATICA
HTML5
HTML5 es una combinación de nuevas etiquetas de markup (lenguaje) HTML,propiedades CSS3, Java Script y
algunas tecnologías complementarias de apoyo,pero que técnicamente son independientes de la propia
especificación HTML5. Porello vamos a distinguir entre la especificación HTML5 en sí y la familia HTML5
1. ESTRUCTURA GLOBAL
Los documentos HTML se encuentran estrictamente organizados. Cada parte del documento esta diferenciada,
declarada y determinada por etiquetas especificas.
1.1. DOCTYPE
En primer lugar necesitamos indicar el tipo de documento que estamos creando. Esto en HTML5 es
extremadamente sencillo:
<!DOCTYPE html>
1.2. HTML
La estructura tipo árbol de este lenguaje tiene su raíz en el elemento <html>. Este elemento envolverá el
resto del código.
<!DOCTYPE html>
<html lang=”es”>
</html>
En el atributo lang especificamos el lenguaje humano del contenido del documento.
Para ver otros lenguajes para el atributo lang podemos visitar la siguiente página:
www.w3schools.com/tags/ref_language_codes.asp
1.3. HEAD
Etiqueta de cabecera.
<!DOCTYPE html>
<html lang="es">
<head>
</head>
</html>
1.4. BODY
Etiqueta para el cuerpo de la página, es la parte visible de la página.
<! DOCTYPE html>

<html lang="es">
<head>
</head>
<body>
</body>
</html>
1.5. META
Etiqueta que define el juego de caracteres a utilizar para mostrar el documento.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset=”iso-8859-1”>
</head>
<body>
</body>
</html>
Con la etiqueta meta también podemos incluir otros aspectos como description o keywords
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="iso-8859-1">
<meta name=”description” content=”Ejemplo de HTML5”>
<meta name=”keywords” content=”HTML5, CSS3, Javascript”>
</head>
<body>
</body>
</html>
TITLE
Etiqueta para el titulo del documento.
<!DOCTYPE html>
<html lang="es">
<head>
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5, CSS3, JavaScript">
<title>Este texto es el título del documento</title>
</head>
<body>
</body>
</html>
1.6. LINK
Este elemento es usado para incorporar estilos, códigos javascript, imágenes o iconos desde archivos
externos.
<!DOCTYPE html>
<html lang="es">
<head>
<link rel=”stylesheet” href=”misestilos.css”>
</head>
<body>
</body>
</html>
2. ESTRUCTURA DEL CUERPO
Para entender mejor el uso de las nuevas etiquetas, nos guiaremos con la siguiente imagen donde tenemos
estructurada cada una de las etiquetas y su respectivo uso en maquetación de paginas web.
2.1. HEADER
La etiqueta header sirve para mostrar información de cabecera útil para un documento u otras secciones
principales. Típicamente se utiliza para agregar encabezados, es decir, h1-h6 que definen el título y
subtítulos de la sección, aunque también se puede utilizar para dar información sobre fechas de publicación,
versiones del contenido mostrado, o enlaces de navegación dentro del documento (por ejemplo, enlaces a
la home, información de contacto, o al mapa web de una página). A pesar del nombre de la etiqueta, ésta no
tiene por qué ir situado al principio de HTML, sino que puede estar posicionado en cualquier parte dentro del
documento.
Ejemplo1:
<! DOCTYPE html>

<HTML>
<head>
<title>Mi primer ejemplo</title>
</head>
<body>
<header>
<h1>TITULO</h1>
<h2>Subtitulo</h2>
</header>
</body>
</html>
2.2. NAV
Representa una zona de navegación, donde deberíamos indicar los enlaces más importantes de nuestra
página, podemos ubicarlos en las partes más visibles.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Mi seguna pagina</title>
</head>
<body>
<nav>
<ul>
<li><a href="pagina1.html" target="principal">Pagina 1</a>
</ul>
</nav>
<iframe width=400 height=300 name="principal" src="pagina1.html">
Esta pagina no soporta iframe
</iframe>
</body>
</html>
Para completar el ejemplo, crear 3 paginas distintas con los nombres pagina1.html, pagina2.html y
pagina3.html para obtener el resultado siguiente.
2.3. SECTION
Define un área de contenido única dentro del sitio. En un blog, sería la zona donde están todos los posts. En
un video de youtube, habría un section para el video, uno para los datos del video, otro para la zona de
comentarios.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo HTML5</title>
</head>
<body>
<section>
<h1>Este es mi primer Post</h1>
<p>
El mundo de la informatica
esta evolucionando de una
manera muy apresurada.
</p>
</section>
<section>
<article>
<h3>Comentario 1:</h3>
<p>Muy de acuerdo con tu aporte</p>
</article>
<article>
<h3>Comentario 2:</h3>
<p>Muy buen aporte</p>
</article>
</section>
</body>
</html>
ARTICLE
Define zonas únicas de contenido independiente. En el home de un blog, cada post sería un article. En un
post del blog, el post y cada uno de sus comentarios sería un <article>.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 2</title>
</head>
<body>
<header>
<h1>Articulos Expuestos</h1>
</header>
<article>
<header>
<h2>Articulo #1</h2>
</header>
<p>Este es mi primer articulo
por exponer el dia de hoy</p>
</article>
<article>
<header>
<h2>Articulo #2</h2>
</header>
<p>Este es mi segundo articulo
por exponer el dia de hoy</p>
</article>
</body>
</html>
2.4. ASIDE
Cualquier contenido que no esté relacionado con el objetivo primario de la página va en un aside. En un
blog, obviamente el aside es la barra lateral de información. En el home de un periódico, puede ser el área
de indicadores económicos.
Ejemplo:
A nuestro código anterior agregamos las siguientes líneas para obtener el resultado que se muestra al
final.
<aside>
<h2>Aqui puede ir publicidad</h2>
</aside
FOOTER
El elemento <footer> representa el pié de una sección, con información acerca de la página/sección que
poco tiene que ver con el contenido de la página, como el autor, el copyright o el año.
Ejemplo:
Agregamos las siguientes líneas a nuestro código anterior para obtener el resultado mostrado en la
imagen.
<footer>
<p>Desarrollado por: Wily - Copyright 2013</p>
</footer>
3. EJEMPLO FINAL CON MAQUETACION

Para este ejemplo final vamos a recordar todas las etiquetas vistas en esta parte, para el diseño de una
página web.
<!DOCTYPE html>
<html lang="es">
<head>
<link rel="stylesheet" href="misestilos.css">
</head>
<body>
<header>
<h1>Este es el título principal del sitio web</h1>
</header>
<nav>
<ul>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
<li>contacto</li>
</ul>
</nav>
<section>
<article>
<header>
<h1>Título del mensaje uno</h1>
</header>
<p>Este es el texto de mi primer mensaje</p>
<footer>
<p>comentarios (0)</p>
</footer>
</article>
<article>
<header>
<h1>Titulo del mensaje dos</h1>
</header>
<p>Este es el texto de mi segundo mensaje</p>
<footer>
<p>comentarios (0)</p>
</footer>
</article>
</section>
<aside>
<blockquote>Mensaje número uno</blockquote>
<blockquote>Mensaje número dos</blockquote>
</aside>
<footer>
Derechos Reservados © 2010-2011
</footer>
</body>
</html>
Elementos
<p>
Define una parte que debe mostrarse como un párrafo.
<hr>
Representa un quiebre temático entre parrafos de una sección o articulo o cualquier contenido.
<pre>
Indica que su contenido esta preformateado y que este formato debe ser preservado.
<blockquote>
Representa una contenido citado desde otra fuente.
<ol>
Define una lista ordenada de artículos.
<ul>
Define una lista de artículos sin orden.
<li>
Define un artículo de una lista ennumerada.
<dl>
Define una lista de definiciones, es decir, una lista de términos y sus definiciones asociadas.
<dt>
Representa un término definido por el siguiente <dd>.
<dd>
Representa la definición de los terminos listados antes que él.
<figure>
Representa una figura ilustrada como parte del documento.
<figcaption>
Representa la leyenda de una figura.
<div>
Representa un contenedor genérico sin ningún significado especial.
Semántica a nivel de Texto
Elemento
<a>
Representa un hiperenlace , enlazando a otro recurso.
<em>
Representa un texto enfatizado , como un acento de intensidad.
<strong>
Representa un texto especialmente importante .
<small>
Representa un comentario aparte , es decir, textos como un descargo de responsabilidad o una nota
de derechos de autoría, que no son esenciales para la comprensión del documento.
<s>
Representa contenido que ya no es exacto o relevante .
<cite>
Representa el título de una obra .
<q>
Representa una cita textual inline.
<dfn>
Representa un término cuya definición está contenida en su contenido ancestro más próximo.
<abbr>
Representa una abreviación o un acrónimo ; la expansión de la abreviatura puede ser representada
por el atributotitle.
<data>
Asocia un equivalente legible por máquina a sus contenidos. (Este elemento está sólamente en la
versión de la WHATWG del estandar HTML, y no en la versión de la W3C de HTML5).
<time>
Representa un valor de fecha y hora; el equivalente legible por máquina puede ser representado en el
atributo datetime.
<code>
Representa un código de ordenador .
<var>
Representa a una variable, es decir, una expresión matemática o contexto de programación, un
identificador que represente a una constante, un símbolo que identifica una cantidad física, un
parámetro de una función o un marcador de posición en prosa .
<samp>
Representa la salida de un programa o un ordenador.
<kbd>
Representa la entrada de usuario o usuaria, por lo general desde un teclado, pero no necesariamente,
este puede representar otras formas de entrada de usuario o usuaria, como comandos de voz
transcritos.
<sub>,<sup>
Representan un subíndice y un superíndice, respectivamente.
<i>
Representa un texto en una voz o estado de ánimo alterno, o por lo menos de diferente calidad, como
una designación taxonómica, un término técnico, una frase idiomática, un pensamiento o el nombre de
un barco.
<b>
Representa un texto hacia el cual se llama la atención para propósitos utilitaros. No confiere ninguna
importancia adicional y no implica una voz alterna.
<u>
Representa una anotación no textual sin-articular, como etiquetar un texto como mal escrito o etiquetar
un nombre propio en texto en Chino.
<mark>
Representa texto resaltado con propósitos de referencia, es decir por su relevancia en otro contexto.
<ruby>
Representa contenidos a ser marcados con anotaciones ruby, recorridos cortos de texto presentados
junto al texto. Estos son utilizados con regularidad en conjunto a lenguajes de Asia del Este, donde las
anotaciones actúan como una guía para la pronunciación, como el furigana Japonés.
<rt>
Representa el texto de una anotación ruby .
<rp>
Representa los paréntesis alrededor de una anotación ruby, usada para mostrar la anotación de
manera alterna por los navegadores que no soporten despliegue estandar para las anotaciones.
<bdi>
Representa un texto que debe ser aislado de sus alrededores para el formateado bidireccional del
texto. Permite incrustar un fragmento de texto con una direccionalidad diferente o desconocida.
<bdo>
Representa la direccionalidad de sus descendientes con el fin de anular de forma explícita al algoritmo
bidireccional Unicode.
<span>
Representa texto sin un significado específico. Este debe ser usado cuando ningún otro elemento
semántico le confiere un significado adecuado, en cuyo caso, provendrá de atributos globales como
class, lang, o dir.
<br>
Representa un salto de línea.
ESTILOS CSS3
Hoja de estilo en cascada o CSS (siglas en inglés de cascading style sheets) es un lenguaje usado para definir y
crear la presentación de un documento estructurado escrito en HTML o XML2 (y por extensión en XHTML). El World
Wide Web Consortium (W3C) es el encargado de formular la especificación de las hojas de estilo que servirán de
estándar para los agentes de usuario o navegadores.
La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su
presentación.
La información de estilo puede ser definida en un documento separado o en el mismo documento HTML. En este
último caso podrían definirse estilos generales con el elemento «style» o en cada etiqueta particular mediante el
atributo «style»
A diferencia de CSS2, que fue una única especificación que definía varias funcionalidades, CSS3 está dividida en
varios documentos separados, llamados "módulos".
Cada módulo añade nuevas funcionalidades a las definidas en CSS2, de manera que se preservan las anteriores
para mantener la compatibilidad.Los trabajos en el CSS3, comenzaron a la vez que se publicó la recomendación
oficial de CSS2, y los primeros borradores de CSS3 fueron liberados en junio de 1999. 8
Debido a la modularización del CSS3, diferentes módulos pueden encontrarse en diferentes estados de su
desarrollo,9 de forma que a fechas de noviembre de 2011, hay alrededor de cincuenta módulos publicados, 8 tres de
ellos se convirtieron en recomendaciones oficiales de la W3C en 2011: "Selectores", "Espacios de
nombres" y "Color".Algunos módulos, como "Fondos y colores", "Consultas de medios" o "Diseños
multicolumna" están en fase de "candidatos", y considerados como razonablemente estables, a finales de 2011, y
sus implementaciones en los diferentes navegadores son señaladas con los prefijos del motor del mismo
FUNCIONES DE CSS3
Cada cierto tiempo van saliendo nuevas propiedades CSS3, todas ellas muy útiles y sencillas, pero no todas son
completamente soportadas por la mayoría de los navegadores.
Hoy nos vamos a centrar en una lista de novedades para CSS3 que sí pueden ser usadas hoy, debido a su gran
compatibilidad con los navegadores:
1. TRcomplementarias de apoyo,pero que técnicamente son independientes de la propia especificación HTML5.

Porello vamos a distinguir entre la especificación HTML5 en sí y la familia HTML5
4. Conceptos básicos sobre estilos

4.1. Estilos en línea
Una de las técnicas más simples para incorporar estilos CSS a un documento HTML es la de asignar los
estilos dentro de las etiquetas por medio del atributo style.
<!DOCTYPE html>
<html>
<head>
<title>Este es el título del documento</title>
</head>
<body>
<p style="font-size: 20px">Mi texto</p>
</body>
</html>Las nuevas reglas
4.2. Plantillas
Creamos un nuevo documento:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Nuevos Estilos CSS3</title>
<link rel="stylesheet" href="nuevocss3.css">
</head>
<body>
<header id="principal">
<span id="titulo">Estilos CSS Web 2.0</span>
</header>
</body>
</html>
Ahora creamos el documento nuevocss3.css y aplicamos el siguiente estilo:
body{
text-align: center;
}
#principal{
display: block;
width: 500px;
margin: 50px auto;
padding: 15px;
text-align: center;
border: 1px solid #999999;
background: #DDDDDD;
}
#titulo {
font: bold 36px verdana, sans-serif;
}
Hasta el momento solo hemos aplicado estilos comunes, nada novedoso.
4.3. Border-radius
Nuevo estilo para CSS3 que nos permite redondear las esquinas de nuestras cajas del documento.
Para probar este nuevo estilo, remplazamos el código anterior por este nuevo:
body {
text-align: center;
}
#principal {
display: block;
width: 500px;
margin: 50px auto;
padding: 15px;
text-align: center;
border: 1px solid #999999;
background: #DDDDDD;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
}
#titulo {
}
La propiedad border-radius en este momento es experimental por lo que debemos usar los prefijos –moz-
y –webkit para que funcionen en navegadores basados en motores Gecko y WebKit, como Firefox, Safari y
Google Chrome.
Si deseamos que todas las esquinas tengan la misma curvatura entonces solo declaramos un solo valor,
pero si deseamos tener diferentes curvaturas para cada esquina entonces declaramos los cuatro valores
como en el siguiente caso:
border-radius: 20px 10px 30px 50px;
También podemos dar forma a las esquinas declarando un segundo grupo de valores separados por una
barra. Los valores a la izquierda de la barra representarán el radio horizontal mientras que los valores a la
derecha representan el radio vertical. La combinación de estos valores genera una elipsis:
-moz-border-radius: 20px / 10px;

-webkit-border-radius: 20px / 10px;
border-radius: 20px / 10px;
4.4. Box-shadow
El nuevo estilo para CSS3, box-shadow, nos permite agregar sombras a nuestras cajas de una manera
sencilla.
Para aplicar nuestro nuevo estilo solo copiamos el siguiente código después de la línea border-radius.
-moz-box-shadow: rgb(150,150,150) 5px 5px;

-webkit-box-shadow: rgb(150,150,150) 5px 5px;
box-shadow: rgb(150,150,150) 5px 5px;
La propiedad box-shadow necesita de al menos tres valores. El primero es el color. Este valor fue
construido aquí utilizando la función rgb(). Los siguientes dos valores, expresados en pixeles, establecen el
desplazamiento de la sombra. Este desplazamiento puede ser positivo o negativo. Valores negativos
posicionarán la sombra a la izquierda y arriba del elemento, mientras que valores positivos crearán la
sombra a la derecha y debajo del elemento. Valores de 0 o nulos posicionarán la sombra exactamente
detrás del elemento, permitiendo la posibilidad de crear un efecto difuminado a todo su alrededor.
Un cuarto valor que se puede agregar es la distancia de difuminación.
box-shadow: rgb(150,150,150) 5px 5px 10px;
El último valor posible para box-shadow no es un número sino más bien una palabra clave: inset. Esta
palabra clave convierte a la sombra externa en una sombra interna, lo cual provee un efecto de profundidad
al elemento afectado.
4.5. Text-shadow
Para crear sombras para figuras irregulares como textos, existe una propiedad especial llamada text-
shadow.
Para aplicar nuestro nuevo estilo remplazamos el ya existente para el id “titulo” de la siguiente manera:
#titulo {
text-shadow: rgb(0,0,150) 3px 3px 5px;
}
Los valores para text-shadow son similares a los usados para box-shadow. Podemos declarar el color de
la sombra, la distancia horizontal y vertical de la sombra con respecto al objeto y el radio de difuminación.
4.6. @font-face
La propiedad @font-face permite a los diseñadores proveer un archivo conteniendo una fuente específica
para mostrar sus textos en la página. Ahora podemos incluir cualquier fuente que necesitemos con solo
proveer el archivo adecuado:
#titulo {
font: bold 36px MiNuevaFuente, sans-serif;
text-shadow: rgb(0,0,150) 3px 3px 5px;
}
@font-face {
font-family: 'MiNuevaFuente';
src: url('font.ttf');
}
4.7. Gradiente lineal
Agregamos el siguiente código en #principal después de la línea de box-shadow:
background: -webkit-linear-gradient(top, #FFFFFF, #006699);

background: -moz-linear-gradient(top, #FFFFFF, #006699);
Los gradientes son configurados como fondos, por lo que podemos usar las propiedades background o
background image para declararlos. La sintaxis para los valores declarados en estas propiedades es
linear-gradient(posición inicio, color inicial, color final). Los atributos de la función linear-gradient() indican
el punto de comienzo y los colores usados para crear el gradiente. El primer valor puede ser especificado en
pixeles, porcentaje o usando las palabras clave top, bottom, left y right. El punto de comienzo puede ser
remplazado por un ángulo para declarar una dirección específica del gradiente:
background: -webkit-linear-gradient(30deg, #FFFFFF, #006699);

background: -moz-linear-gradient(30deg, #FFFFFF, #006699);
También podemos declarar los puntos de terminación para cada color:
background: -webkit-linear-gradient(top, #FFFFFF 50%, #006699 90%);

background: -moz-linear-gradient(top, #FFFFFF 50%, #006699 90%);
4.8. Gradiente radial
La sintaxis estándar para los gradientes radiales solo difiere en unos pocos aspectos con respecto a la
anterior. Debemos usar la función radial-gradient() y un nuevo atributo para la forma:
background: -webkit-radial-gradient(center, circle, #FFFFFF 0%, #006699 200%);

background: -moz-radial-gradient(center, circle, #FFFFFF 0%, #006699 200%);
La posición de comienzo es el origen y puede ser declarada en pixeles, porcentaje o una combinación de
las palabras clave center, top, bottom, left y right. Existen dos posibles valores para la forma (circle y
ellipse) y la terminación para el color indica el color y la posición donde las transiciones comienzan.

Practica

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Practica

Uploaded by

Copyright:

Available Formats

TRABAJO

NOMBRES: LUZ MARINA CCACCASACA APAZA

En el atributo lang especificamos el lenguaje humano del contenido del documento.

Etiqueta para el cuerpo de la página, es la parte visible de la página.

<! DOCTYPE html>

Etiqueta que define el juego de caracteres a utilizar para mostrar el documento.

2. ESTRUCTURA DEL CUERPO

<! DOCTYPE html>

3. EJEMPLO FINAL CON MAQUETACION

1. TRcomplementarias de apoyo,pero que técnicamente son independientes de la propia especificación HTML5.

4. Conceptos básicos sobre estilos

Creamos un nuevo documento:

Ahora creamos el documento nuevocss3.css y aplicamos el siguiente estilo:

Hasta el momento solo hemos aplicado estilos comunes, nada novedoso.

border-radius: 20px 10px 30px 50px;

-moz-border-radius: 20px / 10px;

-moz-box-shadow: rgb(150,150,150) 5px 5px;

box-shadow: rgb(150,150,150) 5px 5px 10px;

4.7. Gradiente lineal

Agregamos el siguiente código en #principal después de la línea de box-shadow:

background: -webkit-linear-gradient(top, #FFFFFF, #006699);

background: -webkit-linear-gradient(30deg, #FFFFFF, #006699);

También podemos declarar los puntos de terminación para cada color:

background: -webkit-linear-gradient(top, #FFFFFF 50%, #006699 90%);

4.8. Gradiente radial

background: -webkit-radial-gradient(center, circle, #FFFFFF 0%, #006699 200%);

You might also like