Nuevas etiquetas semánticas 

jueves, 4 de diciembre de 2014 - Publicado por ThZ KronZ en 17:40





<hgroup> --> Pretende contener un grupo de etiquetas <hx> (al menos dos).


Ejemplo de como se usaria:

<hgroup>
           <h1> Titulo </h1>
           <h2> Subtitulo </h2>
</hgroup>




<time> --> define una fecha y/o una hora (su atributo opcional es datetime indica la fecha y la hora).

Ejemplo de como se usaria:

<time> Mañana </time> es lunes.
<time datetime="2014-12-04"> El dia 5 de Octubre </time>




<mark> --> Remarca parte del texto (como un subrayador).

Ejemplo de como se usaria:

Hoy es <mark> Viernes </mark> y empieza en fin de semana.





<meter> --> Define una medida (Solo lo usaremos para las medidas con un valor minimo y un máximo  conocido).

             Atributos: 

    value: el valor del dato sobre la escala.
    min: el valor minimo posible.
    low: el valor minimo esperado.
    high: el valor maximo esperado.
    max: el valor máximo posible.
    optimun: el valor maximo ideal.


Ejemplo de como se usaria:
Su puntuación es:
<meter value=''14'' min=''0'' max=''20'' low=''8'' high=''l8'' optimum="19.5"> </meter> sobre 20. 
Click para ver el resultado:
Html Su puntuación es: sobre 20.







<figure> --> Puede usarse para reagrupar elementos como imágenes, videos o incluso texto que forma parte de una ilustracion.


La etiqueta <figcaption>, usada de forma conjunta con la etiqueta <figure>, proporciona una leyenda de los elementos.
Ejemplo de como se usaria:

<figure>
<img src=''aerogeneradorl .jpg'' alt=''aerogeneradorl''>
<img src=''aerogenerador2 .jpg'' alt=''aerogenerador2''>
<figcaption>  Algunos aerogeneradores  </figcaption>
</figure>





<details> y <summary> --> <details> indica detalles o contenidos,  mientras que <summary> nos proporciona un resumen de estos elementos.

0 comentarios

Section y Article 

martes, 2 de diciembre de 2014 - Publicado por ThZ KronZ en 13:20
La etiqueta <section> indica que una parte del contenido de la página se refiere a un
tema concreto.

La etiqueta <article> define un contenido del documento que posee una identidad
independiente dentro de la página, como puede ser el artículo de un blog, un post en un
foro o un producto en un sitio comercial.


Click para ver el código usado:
<html>
<head>
<title>Html</title>
<meta charset= "UTF-8">
</head>
<body>
<section>
<h1>Día 1</h1>

<article>
<h2>Artículo 1</h2>
<div>Presentación del artículo 1</div>
<p>Lorem ipsum dolor sit amet , consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor , dignissim sit amet, adipisc i ng nec , ultricies sed , do l or . eras elementum ultrices diam. </p>
</article>
<article>
<h2>Artículo 2</h2>

<div>Presentación del artículo 2</div>
<p>Lorem ipsum dolor sit amet , consectetuer adipiscing elit . Sed non r i sus . Suspendisse lectus tortor , dignissim sit amet , adipiscing nec, ultricies sed, do lor. eras elementum ultrices diam . </p>
</article>
<hr>
</section>
<section>
<h1>Día 2<h1>

<article>
<h2>Artículo 1</h2>
<div>Presentación del artículo 1</div> <p>Lorem ipsum dolor sit amet , consectetuer adipiscing elit . Sed non risus . Suspendisse lectus tortor , dignissim sit amet , adipiscing nec , ultricies sed, dolor. eras elementum ultrices diam.</p> </article>
<hr> </section> </body> </html>
Click para ver el resultado:
Html

Día 1

Artículo 1

Presentación del artículo 1

Lorem ipsum dolor sit amet , consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor , dignissim sit amet, adipisc i ng nec , ultricies sed , do l or . eras elementum ultrices diam.

Artículo 2

Presentación del artículo 2

Lorem ipsum dolor sit amet , consectetuer adipiscing elit . Sed non r i sus . Suspendisse lectus tortor , dignissim sit amet , adipiscing nec, ultricies sed, do lor. eras elementum ultrices diam .

Día 2

Artículo 1

Presentación del artículo 1

Lorem ipsum dolor sit amet , consectetuer adipiscing elit . Sed non risus . Suspendisse lectus tortor , dignissim sit amet , adipiscing nec , ultricies sed, dolor. eras elementum ultrices diam.

0 comentarios

Nuevas etiquetas de oganización 

Publicado por ThZ KronZ en 13:03


<header>  </header> reagrupa los elementos del encabezado de página.

<nav> </ nav> indica los elementos de un menú de navegación.

<footer >  </ footer > señala los elementos del pie de página.

<aside> </aside>  indica que se trata de elementos anexos al contenido.


Click para ver el código usado:
<head>
<title>Html5</title>
<meta charset=" iso-8859-1">
</head>
<body>

<img src="Imagen.png">
<h1>Nombre del sitio Web</h1>
<form action="http://www.google.com/search">
<input type= " text" size=" 15" value= "">
<input type="submit" value="Buscar">


</form>
<div>
<a href="index.htm" >Inicio | </a>
<a href="item1.htm" >Item 1 | </a>
<a href="item2.htm" >Item 2 | </a>
<a href="item3.htm" >Item 3 | </a>
<a href="item4.htm" >Item 4 | </a>
<a href="contacto.htm" >Contacto</a>
</div>

<h2>Nombre de la pagina</h2>
<p>Lorem ipsum dolor sit amet , consectetuer a d ipiscing elit. Sed non risus. suspendisse lectus tortor , dignissim s i t amet , adipiscing nec , ultricies sed, dolor . eras elementum ultrices ipsum dolor sit amet , consectetuer adipiscing elit . Sed non risus. suspendisse lectus tortor , d ignissim sit amet , adipiscing nec , ultricies sed , dolor. eras elementum ultrices diam.</p>
<hr>

<p>Copyright 20lx</p>
</body>
Click para ver el resultado:
Html5

Nombre del sitio Web

Nombre de la pagina

Lorem ipsum dolor sit amet , consectetuer a d ipiscing elit. Sed non risus. suspendisse lectus tortor , dignissim s i t amet , adipiscing nec , ultricies sed, dolor . eras elementum ultrices ipsum dolor sit amet , consectetuer adipiscing elit . Sed non risus. suspendisse lectus tortor , d ignissim sit amet , adipiscing nec , ultricies sed , dolor. eras elementum ultrices diam.

Copyright 20lx

0 comentarios

Divisiones de página 

Publicado por ThZ KronZ en 12:46

Elementos de bloque:


Son estos que ocupar por defecto toda la longitud de la ventana del navegador. Se sitúan unas debajo de las otras.

Algunas de ellas son:
<hx> </hx>                                --> Etiquetas de titulo.

<p> </p>                                    --> Etiquetas de parrado.

<blockquote> </blockquote>   -->  Etiquetas de cita.

<hr>                                           --> Etiqueta usada para insertar una
                                                          linea horizontal.

<ol> </ol>                                  -->  Etiqueta para hacer una lista
                                                           ordenada.

<ul> </ul>                                  -->   Etiquetas para hacer una lista
                                                            desordenada.

<dl> </dl>                                  --> Etiquetas para hacer una lista
                                                          de definiciones.

<table> </table>                        --> Etiquetas de tabla.

<form> </form>                        -->  Etiqueta de declaración
                                                           de formularios.


<div>    </div>                           -->  Se usa para dividir la página
                                                          web en "distintas partes"



Elementos de en linea:


Al contrario que los elementos de bloque, los elementos en linea se sitúan siempre uno al lado del otro permaneciendo en el mismo flujo de texto.

Algunas de ellas son:

<b>  </b>             --> Se usa para poner el texto en negrita.

<i>  </i>               --> Se usa para poner el texto en cursiva.

<br>                     --> Se usa para insertar un salto de linea.

<a>  </a>              --> Se usa para los enlaces.

<img>  </img>     --> Se usa para imagenes.

<span>  </span>   --> Se usa para insertar una division en
                                   la linea de texto. (Es muy util para
                                   aplicar una declaracion en las
                                   hojas de estilo )

0 comentarios

Etiquetas: , , ,

Estilo para los parrafos. 

martes, 11 de noviembre de 2014 - Publicado por ThZ KronZ en 9:46
Todo va dentro de la etiqueta <style> y </style>.

<style type="text/css">


  p{ 
color: red;
    text-decoration: underline;  (subrayar)          
                               line-through;  (tachar)          
                               overline; (linea por encima del texto)
                               none;  (su decoración no sea subrayada, esto se suele usar
                                           en las etiquetas de link <a>)



     text-transform: capitalize; (Primera letra de cada palabra en mayúscula)
                                uppercase;  (todo a mayúsculas)
                                lowercase; (todo minúscula)
                                none; (deja las palabras tal y como están)
  
    text-indent: 23%; (Se puede dar en %)

                      23px;  (Se puede dar en pixeles)


/// ------ InterLineado ------ \\\

letter-spacing: normal;    (la separación que llevan las letras, por defecto ,                                             se pueden poner positivos y negativos)

word-spacing: normal ;   (la separación que llevan las palabras, por defecto ,                                             se pueden poner positivos y negativos)

line-height: normal;   (Es el interlineado(separación entre renglones),por                                             defecto , se pueden poner positivos y negativos)



 /// ------ Espacios en Blanco ------ \\\


white-space: normal; (espacios en blanco normal)
                   pre; (Nos respetara todos los espacios en blanco tal cual vengan)
nowrap; (Se usa para evitar que el navegador meta saltos de linea automático)



 /// ------ Alineaciones ------ \\\

(Estas nos valen para poder centrar el texto)


text-aling: right; (Alineado a la derecha)
                left: (Alineado a la izquierda)
                auto;(Alineación automática)
                center;(Centrada)
                 justify;(Justificada)





/// ------ Alineación Vertical ------ \\\

 vertical-align:  sub; (Para escribir un sub-índice (es referente a la linea))
 sup (Para escribir un super-índice (es referente a la linea))
                         top: (Eleva el texto  (es referente al párrafo))
 botton; (Baja el texto  (es referente al párrafo))
                      5px;Un numero positivo alinea el texto por encima ,un negativo                                    lo hace por debajo.)
                       5%;(Un porcentaje positivo alinea el texto por encima ,un
                                  negativo lo hace por debajo.)




/// ------ Texto ------ \\\   

direction: rtl; (de derecha a izquierda)
                 ltr; (escritura normal)


(Si lo aplicamos al parrafo marcamos los bordes)
width: 24px; (Ancho)          
height: 24px; (Alto)

      }

</style>

0 comentarios

Etiquetas: ,

Tipografía 

lunes, 10 de noviembre de 2014 - Publicado por ThZ KronZ en 17:30


Todo va dentro de la etiqueta <style> y </style>.
 .parrafo1 {text-align: left; background-color: red;}

 

Importar tu propia fuente por si el usuario no la tiene instalada:

@font-face  {font: "miFuente"; src: ('./font/miFuente.ttf') ;}






Trabajaremos todo lo relacionado con las tipografías sobre la etiqueta h1 

h1{
 font-family: "Arial","Helvetica","serif";      --> Usamos este atributo para cargar varias fuentes.
 font-style: italic ;   --> Usamos este atributo para poner todos los h1 en cursiva.
 font-variant: small-caps (o normal) ; --> Usamos este atributo para cambiar el tamaño de las mayúsculas.
 font-weight: 500 ;   --> Usamos este atributo para poner el texto en negrita, siguiendo una escala que
                                       va desde el (100-900) va de 100 en 100.
                                        El valor 500 se corresponde con el tipo de letra "normal"
                                        El valor 700 se corresponde con el tipo de letra "negrita"
                                        El valor 900 se corresponde con el tipo de letra "más llamativo"

 font-size: xx-small, x-small, small, smaller medium, large, xx-large, x-large, large, larger  ;   --> Usamos este atributo para los distintos tamaños de letra.


Otra forma de indicar el tamaño es:

 font: 12pt


}





p{ font: 12pt/1.5 bold italic Arial; } --> Con esta etiqueta indicamos que la fuente va a 12 pixeles, el 1.5 se refiere al interlineado, y los distintos tipos de tipografía.


0 comentarios

Etiquetas: , ,

Importar hojas de css. 

Publicado por ThZ KronZ en 16:56
Hay dos formas:

Con la ruta del archivo.css:


Se agregará en el encabezado, entre las etiquetas <head> y </head>.

<link rel="stylesheet" type="text/css" href="ruta/ejemplo.css">


La anterior línea de código nos indica:

rel="stylesheet" --> Es un enlace relativo a una hoja de estilo.

href="ruta/ejemplo.css"  --> Es la ruta donde se encuentra nuestro css externo.





Importando el archivo.css:

Para usar este tenemos que tener en cuenta la palabra clave "@import"

Su estructura es:  @import url(fichero.css);


Esto va entre las etiquetas <style> y </style>.


Ejemplo:

<style type="text/css">

        @import ./carpeta/ejemplo (ficheroDePrueba.css);

</style> 







0 comentarios

Etiquetas: ,