viernes, 28 de noviembre de 2014

Encabezados (h1 a h6)

Los encabezados en html van desde h1 a h6 donde h1 es el de tamaño mayor por defecto
y veamos algo de codigo y como seria interpretado


<h1>este es un encabezado h1 </h1>

<h2> este es un encabezado h2 </h2>

<h3> este es un encabezado h3 </h3>

<h4> este es un encabezado h4 </h4>

<h5> este es un encabezado h5 </h5>

<h6> este es un encabezado h6 </h6>

pd: no pruebe esto en un blog, los blog están condicionados por el css que utiliza la plantilla del blog y no mostrara los encabezados tal cual son.

como se veria el codigo anterior en el blog:

este es un encabezado h1

este es un encabezado h2

este es un encabezado h3

este es un encabezado h4

este es un encabezado h5

este es un encabezado h6

vea que la etiqueta <title></title> va entre las etiquetas <html></html>, tambien vea que talvez nuestro ? no aparezca en el titulo como tal eso lo veremos luego.
si no sabes como probar el codigo (como probar tu codigo)
luego de probar el codigo deveria quedar asi:

recuerde que entre las etiquetas body(cuerpo de la pagina) no escribimos nada por lo tanto la pagina la vera en blanco.

jueves, 27 de noviembre de 2014

elemento p (parrafos)

el elemento p indica que todo lo que esta entre <p> y </p> se representara como parrafo

ejemplo:


<p> 

Aliquam tristique viverra vehicula. Pellentesque habitant morbi 
tristique senectus et netus et malesuada fames ac turpis egestas. 
Quisque ut ornare ex. Morbi varius, eros non maximus tincidunt, nisl 
odio blandit nulla, sit amet commodo ante tellus sodales orci. Fusce 
vitae magna sed diam convallis lobortis at quis purus.

</p>

¿Que es HTML y CSS?

HTML-¿que significa HTML?
bueno, las siglas HTML significan Hypertext Markup Lenguage,el cual es el lenguaje que describe la estructura de las paginas web y fue creado por Tim Berners-Lee fundador de la W3C a principio de los 90(1990).

Ejemplo
<html>
<head>

</head>
<body></body>
</html>

CSS
las siglas CSS significan Cascading Style Sheets(Hojas de estilo en cascada) y se le usa para dar estilos no tiene por que ser html.
Su uso en general es para darle estilos a las paginas web.

ejemplo:

p{
color:black;
}

hipervinculos , links

La etiqueta a de html sirve para definir un link dentro de la pagina o fuera de la misma donde el texto entre la etiqueta <a></a> sera el texto del link y lo definido por href sera la ruta hacia el la pagina deseada
Ejemplo de uso
<a href="www.google.com" >link</a>

Cuerpo de Pagina (body)

El cuerpo de la pagina se define con la etiquetas <body></body>

dentro del elemento body podemos incluir otros elementos, en general en este elemento se colocan elementos los cuales le daran forma a la pagina.

pruebe este código:


<html>

  <head>

    <title>titulo de la pagina</title>

  </head>

  <body>

    <h1>soy un encabezado</h1>

    <p>soy un texto</p>

  </body>

</html>

vea que lo que pusimos en body es lo que aparece en nuestra pagina, tanto fondo como imágenes, y otros elementos que darán forma la pagina irán en body. En pocas palabra lo que va en body es lo que le presentaremos o la herramienta con la que interactuaremos con el usuario.

elemento table

El elemento table representa datos en forma de tabla en pantalla y todo lo que este entre las etiquetas<table></table> estara dentro de la tabla.

no debe usar el elemento tabla para aderir elementos contenedores(layouts),ejemplo div,main,section,article otros.
las tablas tienen filas y columanas dadas por sus decendientes.(elementos tr y td respectivamente)

Ejemplo de tabla:

hola	mundo
soy	Agustin

<table>
<tr>
    <td></td>
    <td></td>
</tr>
<tr>
    <td></td>
    <td></td>
</tr>
</table>
tr (table row)- define las filas de la tabla, cada sera una fila td (table data)- td define las celdas donde estaran los datos, cada
dato
sera una celda diferente.

elementos etiquetas y atributos

¿Que es un elemento?
los elementos son la estructura basica de html

¿Que es una etiqueta ?
las etiquetas marcan donde empieza un elemento y donde termina

¿Que es un atributo?
los atributos le dan forma y funcionalidad a un elemento, cada elemento tiene sus atributos o no.
ejemplo el elemento body no posee atributos aunque eso poco importa porque podemos poner otros elementos dentro de el.

vea la siguiente imagen:

vea que los elementos estan compuestos de etiquetas y atributos y de el nombre del mismo. el nombre del elemento A es section, el del elemento B es p no se preocupe en saber que es lo que hace cada elemento solo comprenda que un elemento siempre estara compuesto por una etiqueta o 2 y que puse tener atributos o no.

Ejemplos:
elemento de 1 etiqueta:
<br/>

elemento con atributo
<a href="google.com">enlace a google<a>

elemento dentro de otro
<body>
   <section>
      <section class="x">
         <p>un texto<p>
      </section>
      <section class="x">
         <p>un texto<p>
      </section>

</section>

</body>

Lista ordenada

la lista ordenada esta compuesta por un elemento ol y uno o varios elementos li que son los elementos pertenecientes a la lista.


<ol>

   <li>elemento 1</li>

   <li>elemento 2</li>

   <li>elemento 3</li>

</ol>

los puntos de la lista ordenada se veran de diferente manera segun los atributos que le sean asignados. un ejemplo seria:


<ol start="3" reversed type="numeric" >

  <li>sample1</li>

  <li>sample2</li>

  <li>sample3</li>

</ol>

estos atributos los he puesto de esta manera para que tenga una idea de los atributos que una lista puede tener, recuerde que los atributos los puede poner via CSS

sample1
sample2
sample3

elemento th

elemento th define una celda de encabezado en una tabla y por lo general van dentro de las etiquetas <thead></thead>
ejemplo:

<table>
   <thead>
      <tr>
          <th>bla bla</th>
          <th>bla bla</th>
      </tr>
   </thead>
   <tbody>
       <tr>
   <td>info</td>
           <td>info</td>
       <tr>
   </tbody>
</table

elemento th	elemento th
info	info

Lista de definición

la lista de definición o descriptiva es una lista de terminos y descripciones y los elementos que la conforman son DL,DT y DD. DL - define que se trata de una lista de definición. DT - elemento que contiene el termino a definir. DD - elemento que contiene la definición.

<dl> <dt>termino 1<dt> <dd>definicion del termino 1<dd> <dt>tarmino 2<dt> <dd>definicion del termino 2<dd> </dl>

termino 1
: definicion del termino 1
tarmino 2
: definicion del termino 2

miércoles, 26 de noviembre de 2014

Cabecera de Pagina ( head )

la etiqueta head, tambien llamada cabecera contiene informacion la cual va en otras etiquetas contenidas entre <head></head>

etiquetas que pueden ir entre la etiqueta head:

<title> -con la etiqueta title definimos el titulo de la pagina(es obligatoria)
<meta> -con meta podemos definir las palabras con la que se puede encontrar la pagina.
<link> - la etiqueta link se puede usar para relacionar la pagina a css o javascript la mayoria de las veces pero tiene usos mas amplios.
<script> - se la usa para colocar un script
<style>- dar estilo o forma a la pagina

probemos una pagina sin:
<head>
</head>

Vera que la etiqueta head es necesaria. La verdad que es medio dificil olvidar de poner la etiqueta head ya que siempre necesitaremos ponerle titulo a la pagina asi tambien como las palabras con las que se puede encontrar la pagina pero bueno al fin saber lo que pasa si no se coloca dicha etiqueta no mata a nadie.

codigo:


<html>

   <body>
    
<p>prueba sin head</p>
  
</body>

</html>

Lista no-ordenada

las listas no ordenadas usan la etiqueta ul - la cual significa unordened list en ingles y la etiqueta li(list). pero que es el ul en la lista, es el elemento formato que tendra la lista al ser ul es una lista no ordenada por lo tanto cada elemento de la lista tendra un punto delante de esta o un cuadrado o forma y li es el elemento que indica que es un miembro de la lista.


<ul>

  <li>bread</li>

  <li>coffee beans</li>

  <li>milk</li>

  <li>butter</li>

</ul>


bread
coffee beans
milk
butter

elemento tbody

El elemento tbody (table body) hace referencia a el cuerpo de la tabla, y represeta u bloque de filas.
la mayoria de las veces se utiliza para poder dar un estilo a la tabla.
ejemplo:
css:

<style type="text/css">
 table tbody{ color: red;}
</style>

html:


<table>

   <thead>

       <tr>

         <td>title1</td>

         <td>title2</td>

      </tr>

   </thead>

   <tbody>

      <tr>

         <td>info 1</td>

         <td>info 2</td>

      </tr>

      <tr>

         <td>info 3</td>

         <td>info 4</td>

      </tr>

</tbody> 

</table>

title1	title2
info 1	info 2
info 3	info 4

elementos contenedores

bueno en los elementos contenedores que así los llamo yo porque el nombre sección dado W3 se confunde con el elemento section que también es un elemento contenedor.

Este es uno de los grandes cambios que ha tenido html desde la versión 4 a 5 así que hay que explicarlo de manera adecuada para que no se arme un enredo como los que visto por ahí.

primero que nada hay que explicar porque el cambio, el elemento div era el único elemento contenedor utilizado en html4.

¿Usted preguntara pero ese que tiene de malo?

Para los desarrolladores nada,de echo es mucho mas fácil acordarse de solo un elemento.los nuevos elementos se usan mas por semántica tenga en cuenta que cuando este haciendo el programa sabrá por que hizo cada div pero que hay cuando regrese para modificar esa maquetación dentro de 2 semanas supongamos o un mes.

¿section article y div son iguales?
Absolutamente no.lo esplicare luego cuando los de por separado y como usar article y section.

listas de elementos contenedores

html 4 y html 5
elemento div

html 5( dare un listado no muy largo para no enredadarlo)

elementos contendores
elemento div
elemento main
elemento aside
elemento nav
elemento footer
elemento header
elemento hgroup
elemento section
elemento article
otros

martes, 25 de noviembre de 2014

Aviso de modificación del blog

Cada blog puede tener hasta un máximo de 20 páginas según la página de ayuda de blogger, así que si eres un blogger o estas por construir uno debes de tener en cuenta esto, no te pase como a mí que voy a tener que modificar este blog para poder seguir.

Segunda cosa a tener en cuenta es que en las páginas no puedes poner etiquetas las cual lo he tratado de solucionar por medio de JQuery pero sin resultados.

Así resumiendo estos asuntos la página puede no funcionar correctamente, el menú de la izquierda será el que tenga más problemas los siguientes días, si el menú de la izquierda tiene un tema y no puede ir al link deseado revise las entradas probablemente este el modificado ahí. Gracias por su comprensión.

JQuery functions