Le decimos a los buscadores nuestras palabras clave para que sean buscadas
Enviado por alejo.h0711 • 16 de Marzo de 2017 • Trabajo • 1.055 Palabras (5 Páginas) • 264 Visitas
HTML 5
Estandar conformado por 3 arquitecturas
Css Javascript Html
Html Estructura
Css Apariencia
JavaScript Interactividad y animacion
etiquetas
<html lang="es">
lenguaje que va a contener nuestra pagina web
<meta charset="iso-8559-1">
codificacion de caracteres pagina web
<meta name="description" content="contenido pagina web">
Le decimos a los buscadores de que va nuestra pagina web
<meta name="keywords" content="html, css">
Le decimos a los buscadores nuestras palabras clave para que sean buscadas
<link rel="stylesheet" href="mihojadeestilos.css">
Sirve para agregar a nuestro documento html una hoja de estilos
<div></div>
Modelo de caja contenedor
<ul></ul>
Construye listas desordenadas
<ol></ol>
Construye lista ordenada
<blockquote></blockquote>
Define una seccion para una cita de otra fuente
<article></article>
Agrupa contenidos similares
<hgroup></hgroup>
Sirve para agrupar las etiquetas <h> de titulos y subtitulos
<figure></figure>
Sirve para insertar contenido de cualquier tipo
<img>
Sirve para insertar imagen en formatos jpg gif png nota:<img> va dentro de <figure>
<figcaption></figcaption>
Agrega pies de imagenes y debe ir dentro de etiqueta <figure>
----------------------------------------------------------------------
ORGANIZACION DEL BODY EN HTML5
<header></header> cabecera del documento
<nav></nav> barra de navegacion
<aside></aside> Barra lateral
<section></section> contenido Principal
<footer></footer> Informacion institucional o pie de pagina
-----------------------------------------------------------------------------------------------------
Etiqueta Uso Semantico en HTML 5
<mark></mark> Marcar un texto sin importancia ni enfasis. (Deacuerdo a las sircunstancias del momento)
<em></em> Para indicar enfasis. Sustituye a la etiqueta <i></i> que marca en cursiva el codigo
<strong></strong> Marcar texto importante
<b></b> En desuso
<small></small> Presentar textos legales
<cite></cite> Titulos de libros, canciones, peliculas, trabajos propios etc.
<address></address> Para informacion de contacto. Debe ir dentro del footer
<time></time> Representa fechas y horas
<time datetime="2016-12-12" pubdate> atributo datetime="formato de fecha segun estandares" pubdate
------------------------------------------------------------------------------------------------------
CSS
--
Existen 3 selectores principales de
Etiqueta Consiste en poner el nombre de la etiqueta y modifica todas las etiquetas con el mismo nombre
Id Consiste en #nombreIdentificativo para dar estilo solo a las etiqueta identificada de ese modo
Clase
--
Propiedad
Float Rompe el flujo de como se colocan los contenedores en una pagina web
Margin Separacion que existe desde los bordes hacia lo que halla despues
Clear Consiste en romper el funcionamiento del Float y que lo considere como un elemento normal
Padding Consiste en darle separacion desde los bordes al contenido del contenedor
-------
todo va dentro de la etiqueta a donde vamos a colocar el estilo
ejemplo.
body{
}
Modelo Caja Contenedor
Dice que toda atiqueta colocada en tu html por defecto tiene un contenedor al 100% del ancho de la pagina
-------
atributos:
background-color: #FFFF; color de fondo
display: inline; ya no ocupa el 100% de la pantalla si no solo el ancho al contenido que tenga
width: 00px; ancho en pixeles
height: 00px; alto en pixeles
-----------------------------------------------------------------------------------------------------------------------
Nuevas Reglas
<span></span> No agrega nada de formato por si sola pero se le puede agregar estilo especifico
border-radius: 5px redondea las esquinas de un contenedor
font: bold 36px Verdana, Geneva, sans-serif; Estilo de fuente bold=negrita 36px=tamaño Verdana=tipos
box-shadow: #999 5px 5px 10px; Sombreado: color desplazamiento vertical desplazamiento horizontal difuminacion en px
@font-face{ Para insertar nuestras propias fuentes y es requerimiento que este en la carpeta raiz
font-family: 'miFuente';
src:url('Starfish.ttf');
}
background: -moz-linear-gradient(left, #00F, #3FF); Degradado lineal (por la izquierda, color fuerte, color claro)
background: -webkit-radial-gradient(center, ellipse, #00F, #3FF); Degradado de tipo elipse
color: rgba(0,0,0,0.7); Transparencia al texto rgba(123,189,89,0.5)
outline: 2px dashed #00F; Le damos un estilo al borde del contendor
outline-offset: 15px; Le damos un espacio al borde
-webkit-transform:scale(0.5); Conseguimos escalar el elemento
-webkit-transform:rotate(50deg); Conseguimos rotar el elemento
-webkit-transform:skew(30deg); Conseguimos cambiar la perpectiva
-webkit-transition:-webkit-transform 2s ease 0.1s; Le decimos al elemento que lo haga en cierto tiempo 'importante'
#principal:hover{ Conseguimos que al pasar el cursor por el elemento identificado rote ciertos grados
-webkit-transform:rotate(5deg);
-webkit-transform:scale(0.5); conseguimos que al pasar el curso el elemento incremente
}
-----------------------------------------------------------------------------------------------------------------------
Nuevos Selectores
Selector que permite apuntar a aquellos elementos con la etiqueta name
ej.
p[name="miselementos"]{color: red;}
<p name="miselementos"></p>
En etiqueta html se debe agragar el name="...." al que quieras hacer referencia
...