ClubEnsayos.com - Ensayos de Calidad, Tareas y Monografias
Buscar

Le decimos a los buscadores nuestras palabras clave para que sean buscadas


Enviado por   •  16 de Marzo de 2017  •  Trabajo  •  1.055 Palabras (5 Páginas)  •  264 Visitas

Página 1 de 5

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

...

Descargar como (para miembros actualizados) txt (11 Kb) pdf (66 Kb) docx (18 Kb)
Leer 4 páginas más »
Disponible sólo en Clubensayos.com