FUNDAMENTOS DE HTML

Hola les doy esta hoja exclusivamente para aprender un poco de html y personalizacion de las entradas que vayamos haciendo:
asi como en poo tambien se pueden poner comentarios en html se ponen asi:
bueno si quieres comprobar aqui mismo deje un comentario con el texto
                            Este es un comentario ¿no me viste verda?
compruebalo ve a html y alli estara de una forma parecida al sigiente texto
<!---- de esta forma se escribe un comentario----> 

ETIQUETAS

las etiquetas tienen esta forma:

<etiqueta>

Claramente eso no existe pero se van a mostrar las mas fundamentales para la construcción de un texto estructurado.
         las etiquestas suelen estar abiertas y cerradas de esta manera:
            <h1> UN TITULO </h1>
Como veran la etiqueta se compone de menor que (<) etiqueta y mayor que (>) abren asi <label> y cierran asi </label>. 

Etiquetas de titulo

hay 6 etiquetas de titulos:
FORMA DE ESCRIBIR:

<h1> Titulo 1 </h1>

<h2> Titulo 2 </h2>

<h3> Titulo 3 </h3>

<h4> Titulo 4 </h4>

<h5> Titulo 5 </h5>

<h6> Titulo 6 </h6>

COMO SE VE:

Titulo 1

Titulo 2

Titulo 3

Titulo 4

Titulo 5

Titulo 6

 ==========================================================

Etiquetas de párrafo

los parrafos o texto normal se encierran entre las siguientes etiquetas:

<p> aqui un parrafo  </p> 

FORMA DE ESCRIBIR:

<p>

Hola les doy esta hoja exclusivamente para aprender un poco de html y personalizacion de las entradas que vayamos haciendo:

</p>
FORMA EN QUE SE VE:

Hola les doy esta hoja exclusivamente para aprender un poco de html y personalizacion de las entradas que vayamos haciendo:
sip igual.
ahora los renglones son de esta forma:
<br>
y es una sola etiqueta, no tiene cierre, cuando se agrega verás que se pone un renglón.

si quieres una palabra o parrafo centrado tienes que poner esto 
<center>
<h1> esto esta centrado</h1>
</center>

esto esta centrado

viñetas / Listas

bien ahora queremos hacer una lista usualmente los agremamos para mas rapido asi:

- lista           *lista

-lista            *lista 

-lista            *lista

Para agregar una lista hay que agregar  lo siguiente,donde:

• div conforma una caja que encierra a las palabras
• ul indica que es un lista con viñetas
• li son las listas en si

________________________________________________________________

SE ESCRIBE:

<div>

         <ul>
                  <li>lista</li>
                  <li>lista</li>
                  <li>lista</li>
         </ul>

</div>
________________________________________________________________
SE VE:

• lista
• lista
• lista

==========================================================

Si queremos tener lista numerica en vez de poner ul se pone ol

_______________________________________________________________

<div>

<ol>
<li>no</li>
<li>nop</li>
<li>nel</li>
</ol>

</div>

_______________________________________________________________

1. no
2. nop
3. nel

ESTILOS

A lo anterios se le pueden  agregar  estilos, de color, de fondo, de tamaño, margenes, acciones entre otras cosas:

en el html se pueden agregar estilos de dos formas, o bien, se le puede agregar directamente alas palabras de esta forma (los atributos se ponen en inglés):

SE ESCRIBE:

        <h1 style='background:white; color:purple; font-size:15px;'> TITULO 1 </h1>

SE VE:

TITULO 1

 o tambien, se puede poner la etiqueta <style></style> y ala etiqueta que no esta cerrada se le asigna una clase lo que quieras, tomemos el mismo ejemplo del titulo pero ahora sera con h2:
SE ESCRIBE:
<!------ donde titulo es la clase que pones---------->
      <h2 class='titulo'> Titulo 1</h2>

     <style>

             //este es un comentario dentro de los estilos
            /* Se llama la clase poniendo la palabra que declaraste como clase                            anteponiendole un punto y abriendo corchetes */
           // font-size es el tamaño de la letra. 

       .titulo {
              background: cyan; 
              color: blue; 
              font-size: 30px; 
          }

     </style>
SE VE:

Titulo 1

ENLACES

bien ahora los enlaces vean este ejemplo:
_____________________________________________________________
SE ESCRIBE:
<p>
Este es un texto de prueba, vamos a poner en la palabra desarrollo sustentable el enlace de nuestro blog para que cuando le des clic te lleve al blog la palabra está a continuacion.
<!----------- center es para que la palabra este centrada href es la que contiene el link entre las apostrofes o comillas y target="_blank" es para que el link se abra e una nueva pestaña------------>
<label>dale clic a la palabra de abajo</label>
     <center>
 <a href="https://desarrollosustentablekfoj.blogspot.com" target="_blank"> desarrollo sustentable</a>
    <center>
</p>
==========================================================
SE VE:
Este es un texto de prueba, vamos a poner en la palabra desarrollo sustentable el enlace de nuestro blog para que cuando le des clic te lleve al blog la palabra está a continuacion.
  dale clic a la palabra de abajo
desarrollo sustentable

imagenes en linea

este es el link de la imagen de inicio esa del planeta con molinos de viento
                                http://i66.tinypic.com/i3xrw8.jpg
esa imagen la voy a insertar tal y como lo hicimos con la palabra desarrollo sustentable
_________________________________________________________________SE ESCRIBE:
<img class="imagen" src="http://i66.tinypic.com/i3xrw8.jpg" >
<style>
.imagen{
width:89px; /* largo de la imagen*/
height:50px; /* ancho de la imagen*/
}
</style>
_________________________________________________________________
SE VE:

cuadros 

termino con esto de los cuadros y tablas 

la etiqueta <div></div> dije que era una caja y lo es, vean esto:

______________________________________________________________

SE ESCRIBE:

<div style=" width:200px; height:70px background:purple; color:yellow;">

<p> bien este texto está dentro de un cuadro de color morado y las letras deben de ser amarillas</p>

</div>

SE VE:

bien este texto está dentro de un cuadro de color morado y las letras deben de ser amarillas

ahora un boton. rojo y cuando se le pone el raton encima cambie a azul-
para los estilos se puede poner:
class="unaclase" y se invoca como    .unaclase { estilos }
id="unaclase" y se invoca como #unaclase { estilos }
_______________________________________________________________
             <div id="rojo">
<center>
botón
</center>
         </div>

  <style>   
#rojo{
background: red;
color: yellow;
width: 200px;"
}
#rojo:hover{
background: blue;
color:white;
}   
     </style>
______________________________________________________________
SE VE:
el botoncito no hace nada

botón

con esto termino esta introduccion, espero y le entiendas un poco.