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


 <!-- <meta charset="iso-8859-1">    Con este juego de caráteres nos asegura la compatibilidad a nivel mundial, pero tiene menos carácteres que UTF-8 -->




<!-- <meta charset="iso-8859-15">    Es una mejora del iso-8859-1  -->



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


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>

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%">




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>                                                 

                                        

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>