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: , , ,