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:

<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.

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:

Click para ver el resultado:

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:

Click para ver el resultado:

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 )

Etiquetas: css, Divisores, pagina web, web

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>

Etiquetas: css, Parrafos

Tipografí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.

Etiquetas: css, Tipografía, Tipografiia

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>

Etiquetas: css, Importar

Notación de los colores

Publicado por ThZ KronZ en 16:40

Hay varios métodos:

Notación hexadecimal RGB:

Se especifican los tres valores de color (rojo, verde y azul) con valores en hexadecimal entre 00 y FF.

color: #ff8800

Notación hexadecimal abreviada:

Esta notación es muy parecida a la anterior, se indica sólo un número para cada valor rojo, verde y azul.

Ejemplo:

(#ff8800) --> abreviada.

color: #f80;

Nombre del color:

También podemos definir un color por su nombre. Los nombres de colores son en inglés, los mismos que sirven para especificar colores con HTML. color: red;

color: red;

Notación de color con porcentajes de RGB:

Se puede definir un color por los distintos porcentajes de valores RGB. Si todos los valores están al 100% el color es blanco. Si todos están al 0% obtendríamos el negro.

color: rgb(33%, 0%, 0%);

Notación por valores decimales de RGB, de 0 a 255:

De una manera similar a la notación por porcentajes de RGB se puede definir un color directamente con valores decimales en un rango desde 0 a 255.

color: rgb(200, 159, 0);

Color transparente:

Para finalizar, podemos comentar que también existe el color transparente, que no es ningún color, sino que específica que el elemento debe tener el mismo color que el fondo donde está. Este valor, transparent, sustituye al color. (Se suele usar en fondos).

background-color: transparent;

Etiquetas: colores, css, Notacion

Comentarios y Unidades de medida

Publicado por ThZ KronZ en 16:25

Estructura del comentario:

Va entre < >, Ejemplo:



Unidades de medida:

Hay dos tipos, si son constantes son valores absolutos, pero si varían según el ordenador que lo este utilizando se llaman valores relativos.

Valores absolutos:

Unidad                    Nombre                          Ejemplo
    pt                          punto                         12pt
    pc                           pica                                  4.5pc
    mm                        milímetro                          24mm
    cm                         centímetro                       2cm
    in                           pulgada (inch)                 0.12in

Valores relativos:

Unidad                    Ejemplo
    em                          2.3em
    ex                            3.4ex
    px                            110px
    %                           54%

Etiquetas: css, medida, Unidades de medida

Selectores

Publicado por ThZ KronZ en 16:09

selector {propiedad: valor;}

Selectores de clase:

Estos se usan para agregar el estilo a unas etiquetas de un tipo determinado, para ello se usa la palabra clave "class".

Como se crean:

.parrafo1 {text-align: left; background-color: red;}

Como se llaman:

<p class="parrafo1"> Párrafo de prueba para comprobar el estilo creado </p>

Selectores de identificador:

Son similares a los selectores de clase, pero estos solo se pueden usar para un único elemento, no para un tipo de etiquetas determinadas el caracter clave es la "#".

Como se crean:

#parrafo2 {text-align: center; background-color: green;}

Como se llaman:

<p id="parrafo2"> Párrafo de prueba para comprobar el estilo creado </p>

Etiquetas: css, Selectores

Estructura básica de CSS

domingo, 9 de noviembre de 2014 - Publicado por ThZ KronZ en 13:21

Sintaxis:

La sintaxis es la siguiente:

<style type="text/css">

selector {propiedad: valor;}

</style>

Ejemplo:

Poner el fondo color plata:

body {background-color: silver;}

Etiquetas: css, Estructura CSS

Estructura Html

viernes, 31 de octubre de 2014 - Publicado por ThZ KronZ en 9:55

Estructura

<!DOCTYPE html>

<html>

<head>

<title>Ejemplo</title>

<meta charset="UTF-8">

</head>

<body>

</body>

</html>

Imagen de fondo

Se debe de poner antes del <body>.

<style type="text/css">
body {background-image: url('ruta de imagen.');}
</style>

Color de fondo

Se debe de poner antes del <body>.

<style type="text/css">
body {background-color: rgb('255,124,23');}
</style>

Etiquetas: Html

Etiquetas más usadas

Publicado por ThZ KronZ en 9:53

<br> ---> Para dar un salto de línea.

<hr> ---> Línea de separación.

<b></b> ---> Para poner algo en negrita.

<strong></strong> ---> Para poner algo en negrita en navegadores para ciegos.

<i></i> ---> Para poner algo en cursiva.

<em></em> ---> Para poner algo en cursiva en navegadores para ciegos.

<sub></sub> ---> Poner algo como subíndice.

<sup></sup> ---> Poner algo como superíndice.

<del></del> ---> Tachado.

<pre></pre> ---> Texto con formato.

<p></p> ---> Texto con formato.

(Cita con tabulación):

<blockquote>

A quien madruga, se le pegan las sábanas.

</blockquote>

(Cita con comillas dobles):

<q>No por mucho madrugar, amacene más temprano</q>

<bdo dir="rtl">texto de derecha a izquierda</bdo><br>

<bdo dir="ltr">texto de izquierda a derecha</bdo>

Títulos de Cabecera (h1 el más grande y h6 el más pequeño).

<h1>Primer Título</h1>

<h2>Segundo Título</h2>

<h3>Tercero Título</h3>

<h4>Cuarto Título</h4>

<h5>Quinto Título</h5>

<h6>Sexto Título</h6>

Etiquetas: Html

Listas

Publicado por ThZ KronZ en 9:53

Ordenada:

<ol start="99"> --> Donde pone 99 lo sustituimos por el valor que queramos queempiece.

<li>Paco</li>

<li>Maria</li>

<li>Juan</li>

<li>Antonio</li>

</ol>

Desordenada:

<ul>

<li>Paco</li>

<li>Maria</li>

<li>Juan</li>

<li>Antonio</li>

</ul>

Lista de Definiciones

<dl>

<dt>HTML</dt>

<dd>Lenguaje de hipertexto</dd>

<dt>CSS</dt>

<dd>Hoja de estilos</dd>

</dl>

Etiquetas: Html

Enlaces y Anclas

Publicado por ThZ KronZ en 9:52

ENLACES:

A otras páginas en una carpeta:

<a href="./nombrecarpeta/nombrearchivo.html" target="_blank">Texto</a>

A páginas externas:

<a href="http://www.enlace.html"> Texto (Tipico pulse aqui)</a>

ANCLAS:

<a href="#Indice"> </a> ---> Sitio donde queramos que se vaya al pulsar

<a id="Indice"></a> --> Donde pulsamos

Etiquetas: Html

Imágenes

Publicado por ThZ KronZ en 9:52

Por ejemplo utilizaremos una imagen de una casa, llamada Casa.jpg y la tenemos en una carpeta llamada img.

Tamaño normal.

<img src="img/Casa.jpg" alt="(Texto Alternativo)">

Más pequeña:

<img src="img/Casa.jpg" height"300" width="200px" alt="(Texto Alternativo)">

Más Grande:

<img src="img/Casa.jpg" width="450" height"700" alt="Cartel Domund 2014">

Ocupa todo el ancho de nuestra web:

<img src="img/Casa.jpg" alt="Cartel Domund 2014" width="100%">

Etiquetas: Html

Audio

Publicado por ThZ KronZ en 9:51

Audio:

<audio src="rutaDelArchivo.mp3" controls (para play,pause, stop..)>

autoplay (autoreproduccion).

loop (bucle).

preload (carge el fichero antes) {none, metadata o auto}.

</audio>

Para cargar un archivo en distintos formatos

<audio controls>

<source src="audio.mp4">

<source src="audio.mp3">

<source src="audio.wma">

</audio>

Etiquetas: Html

Vídeo

Publicado por ThZ KronZ en 9:51

Vídeo:

<video src="rutaDelArchivo.avi" controls (para play, pause,stop...)>

widht heigh ( Tamaño)

autoplay (autoreproduccion).

loop (bucle).

preload (carge el fichero antes) {none, metadata o auto}.

poster="image.png" (miniatura del video)

</video>

ATRIBUTOS DEL VÍDEO:

//// Para cargar un archivo en distintos formatos \\\\

<video controls>

<source src="video.mp4">

<source src="video.mp3">

<source src="video.avi">

</video>

Etiquetas: Html