Curso HTML desde 0. Capitulo 6

• << Capítulo anterior
• Artículos Relacionados
• Capítulo siguiente >>

El capítulo de hoy trata sobre las listas, fundamentales para bastantes usos que tiene CSS (ya vereís que es CSS dentro de poco).

Las listas de html no son más que conjuntos de datos jerarquizados y estructurados.

Los tags más usados para generar listas son <ul></ul> para contener la lista como tal y <li></li> para contener los datos de cada elemento de la lista. En vez de <ul> se puede usar <ol> y la única diferencia que hay es que numera cada uno de los elementos de la lista.

Con esto la teoria ya está acabada, ahora un poco de código... Veréis que las listas se pueden anidar y generar arboles realmente complejos de información.

Código:
<ul>
  <li><a href="http://lordpakus.blogspot.com/"> Página principal </a></li>
  <li>
    <a href="#"> Tutoriales de programación </a>
    <ul>
      <li><a href="#"> Lenguajes </a>
<ul>
 <li><a href="http://lordpakus.blogspot.com.es/p/tutorial-de-programacion-cc.html"> C/C++ </a></li>
 <li><a href="http://lordpakus.blogspot.com.es/p/curso-de-html-desde-cero.html"> WEB </a></li>
 <li><a href="http://lordpakus.blogspot.com.es/p/java-desde-0.html"> Java </a></li>
 <li><a href="http://lordpakus.blogspot.com.es/p/tutorial-de-ensamblador-x86.html"> ASM </a></li>
 <li><a href="http://lordpakus.blogspot.com.es/p/tutorial-batch-bat-script-desde-0.html"> Batch </a></li>
</ul>
      </li>

      <li><a href="#"> Programación gráfica </a>
<ul>
 <li><a href="http://lordpakus.blogspot.com.es/p/lordpakus-game-engine.html"> Motores gráficos </a></li>
 <li><a href="http://lordpakus.blogspot.com.es/p/opengl-desde-0.html"> OpenGL </a></li>
 <li><a href="http://lordpakus.blogspot.com.es/p/directx-desde-0.html"> DirectX </a></li>
 <li><a href="http://lordpakus.blogspot.com.es/p/pakengine.html"> PakEngine </a></li>
 <li><a href="http://lordpakus.blogspot.com.es/p/t utorial-batch-bat-script-desde-0.html"> Batch </a></li>
</ul>
      </li>
      <li><a href="#"> otras opciones </a></li>
      <li><a href="#"> blablablablal </a></li>
    </ul>
  </li>
  <li><a href="#"> bliblibilblib </a></li>
</ul>


Lo que vemos:

• Página principal
• Tutoriales de programación
  • Lenguajes
    • C/C++
    • WEB
    • Java
    • ASM
    • Batch
  • Programación gráfica
    • Motores gráficos
    • OpenGL
    • DirectX
    • PakEngine
    • Batch
  • otras opciones
  • blablablablal
• bliblibilblib

Misma estructura de listas cambiando todos los ul por ol

1. Página principal
2. Tutoriales de programación
   1. Lenguajes
      1. C/C++
      2. WEB
      3. Java
      4. ASM
      5. Batch
   2. Programación gráfica
      1. Motores gráficos
      2. OpenGL
      3. DirectX
      4. PakEngine
      5. Batch
   3. otras opciones
   4. blablablablal
3. bliblibilblib

Nos vemos

Curso HTML desde 0. Capitulo 4

• << Capítulo anterior
• Artículos Relacionados
• Capítulo siguiente >>

Mirando los capítulos anteriores pensareis que poca cosa queda por aprender de lo básico de HTML, pero estáis bastante equivocados. Como mínimo todavía nos quedan las tablas.

Las tablas de HTML no son más que las típicas rejillas de datos (de las hojas de cálculo por ejemplo) que sirven para presentar información de una forma ordenada y clara.

Implementar tablas es bastante sencillo. Toda la tabla estará contenido dentro de los tags <TABLE> </TABLE>. Cada fila que queramos insertar la pondremos mediante <TR> </TR> y los datos de cada celda los pondremos mediante <TD> y </TD>.

Una de las gracias de las tablas de HTML es que dentro de cada celda se puede poner absolutamente lo que se quiera (textos, imágenes, objetos, lo que sea) y además las tablas tienen la particularidad que el borde por defecto no es visible ( se le ha de forzar con un border = "elnumerodepixelesdegrosorquequeramos" dentro del tag TABLE), esto nos permite tanto tener tablas con celdas dibujadas(que es lo que mostraremos abajo) como utilizar tablas para colocar los elementos dentro de nuestra web como queramos. (técnica que se ha usado durante muchos años)

Fácil?? Veamos un ejemplo.

<HTML>
<HEAD>
<TITLE> Curso de HTML desde 0. Capitulo 4 </TITLE>
</HEAD>

<BODY>

<H1> Libros de ciencia ficción </H1>

<TABLE border = "5">
<TR>
<TD>Año</TD>
<TD>Autor</TD>
<TD>Titulo</TD>
<TD>Compralo</TD>
</TR>

<TR>
<TD>1932</TD>
<TD>Aldous Huxley</TD>
<TD>Un mundo feliz</TD>
<TD> <iframe src="http://rcm-eu.amazon-adsystem.com/e/cm?

lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=lord00-21&o=30&p=8&l=as4&m=amazon&f=ifr&ref=ss_til&asins=8497594258" 

style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>
</TD>
</TR>

<TR>
<TD>1948</TD>
<TD>George Orwell</TD>
<TD>1984</TD>
<TD> <iframe src="http://rcm-eu.amazon-adsystem.com/e/cm?

lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=lord00-21&o=30&p=8&l=as4&m=amazon&f=ifr&ref=ss_til&asins=3548234100" 

style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>
</TD>
</TR>

<TR>
<TD>1985</TD>
<TD>Orson Scott Card</TD>
<TD>El juego de Ender</TD>
<TD> <iframe src="http://rcm-eu.amazon-adsystem.com/e/cm?

lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=lord00-21&o=30&p=8&l=as4&m=amazon&f=ifr&ref=ss_til&asins=8496581578" 

style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>
</TD>
</TR>
</TABLE>

</BODY>
</HTML>


Gráficamente se ve tal que así:

Libros de ciencia ficción

Año	Autor	Titulo	Compralo
1932	Aldous Huxley	Un mundo feliz
1948	George Orwell	1984
1985	Orson Scott Card	El juego de Ender

Espero que os haya gustado. Recordad que si queréis aprender tenéis que ir practicando.

Nos vemos

Curso HTML desde 0. Capitulo 3

• << Capítulo anterior
• Artículos Relacionados
• Capítulo siguiente >>

Si ya habéis mirado los capítulos anteriores de este curso ya sabéis lo muy básico de html (poner un texto, una imagen y enlazarle links). Ahora faltaría darle un poco de formato a los textos para se pareciesen más a lo que nosotros queremos:

Encabezados: HTML define 6 tipos diferentes de encabezados de mayor a menor tamaño. Cada uno de los encabezados se definen con el tag <h1>, <h2>, etc...  Ejemplo:

<h1>Encabezado 1</h1>
<h2>Encabezado 2</h2>
<h3>Encabezado 3</h3>
<h4>Encabezado 4</h4>
<h5>Encabezado 5</h5>
<h6>Encabezado 6</h6>

Saltos de linea: HTML define el tag de salto de linea como <br> , aunque también se puede usar el tag <p></p> para definir párrafos... dependerá de lo que queremos hacer. Ejemplo:

Hola
<br>
Adios
<p>
Hola
</p>
<p>
Adios
</p>

Alineación: Si utilizamos la etiqueta <p></p> para definir un párrafo podemos darle valor a un atributo(align) para decirle con que alineamiento queremos el texto de ese párrafo.Ejemplo
<p align = "left">
Hola
</p>

<p align = "center">
Que tal?
</p>

<p align = "right">
Adios
</p>

Lineas horizontales: Hay ocasiones en que nos interesa poner una linea horizonal para separar contenidos dentro de una misma web. Para hacer eso se ha de usar el tag <hr>. Tiene los siguientes parámetros: align, noshade (sin sombra) ,size (grosor en pixeles), width (ancho en porcentaje del tamaño de la pantalla). Por ejemplo:
<hr>
<hr size="20">
<hr size="20" noshade>
<hr align="left" size = "20" width="40%">
<hr align="center" size = "15" width="30%" noshade>
<hr align="right" size = "10" width="40%">

Tipografias: Todos los editores de texto permiten modificar el tamaño, tipo y formato de las fuentes en las que se està escribiendo. HTML permite modificar las características de una fuente mediante los siguientes tags: <B> (negrita), <I> (cursiva), <STRIKE> (texto tachado), <BIG> (tamaño grande), <SMALL> (tamaño pequeño), <SUB> (subindices), <SUP> (superindices), <U> subrayado. Por ejemplo:
<p>
<B> Negrita </B> <br>
<I> Cursiva </I> <br>
<STRIKE> Tachado </STRIKE> <br>
</p>

<p>
Normal
<BiG> Grande <BIG> Más grande <BIG> Más grande todavía </BIG></BIG></BIG>
</p>

<p>
Normal
<SMALL> Pequeño <SMALL> Más pequeño <SMALL> Más pequeño todavía </SMALL></SMALL></SMALL>
</p>

H<SUB>2</SUB>O  <br>

1<SUP>ero</SUP> <br>

<U> Subrayado </U>

Espero que os haya gustado.

Nos vemos

Curso HTML desde 0. Capitulo 2

• << Capítulo anterior
• Artículos Relacionados
• Capítulo siguiente >>

Hola a todos,

En el capítulo anterior hablamos de como pintar textos y poner links. El capítulo de hoy trata de poner imágenes y usarlas en nuestras webs.

El código del ejemplo es el siguiente (lo podéis copiar-pegar en un notepad y grabarlo con el nombre que queráis y extensión html)

<HTML>
<HEAD>
<TITLE> Curso de HTML desde 0. Capitulo 2 </TITLE>
</HEAD>

<BODY background="http://upload.wikimedia.org/wikipedia/commons/thumb/d/d4/Puerta_OR_con_transistores.jpg/220px-Puerta_OR_con_transistores.jpg">

<H1> Imagenes</H1>

<H2> Esto es una imagen con un link incorporado. Haz click encima. </H2>

<a href="http://lordpakus.blogspot.com.es/" style="background-color: white;" title="">
    <img alt="LordPakusBlog" height="82" src="http://4.bp.blogspot.com/-               ShU_aT6Eayw/T60usvEVp_I/AAAAAAAAAII/qBk-a7i_-
f4/s1600/BannerLordPakus.jpg" width="320" />

</BODY>
</HTML>

Si lo ejecutáis veréis algo de este estilo:

A nivel de explicación es sencilla:

1. Si dentro del tag de body, le pasáis como parámetro un background con una ruta de gráfico, este gráfico se utilizará para ir pintando el fondo.

2. El tag que se encarga de poner imagenes se llama img : <img></img>

3. Se pueden poner links a imagenes facilmente mediante <a> </a>

4. Esas rutas largas y raras no son más que los gráficos usados para este ejemplo

Espero que os haya gustado

Nos vemos

Curso HTML desde 0. Capitulo 1

• << Capítulo anterior
• Artículos Relacionados
• Capítulo siguiente >>

Hola a todos,

HTML es un lenguaje simple y fácil de usar que nos permite implementar paginas web sencillas.

La primera cosa que tenemos de tener clara es que es un lenguaje interpretado por nuestro navegador (Mozilla, Chrome o el que tengáis), así que no se compila y no es necesario tener ninguna herramienta que no sea un navegador y un editor de textos sencillo (con un notepad tendríamos suficiente para empezar.)

El lenguaje html se basa en una estructura arbórea de llaves basada en tags que va definiendo que es lo que queremos en nuestra página web. El objetivo de este curso no es más que descubriros estos tags para que conozcáis todas las posibilidades que tiene este lenguaje. 

Vamos a empezar con el primer ejemplo:

Si copiáis este código en vuestro bloc de notas y haceís un "Guardar como" web.html (el nombre es indiferente lo importante es que la extensión sea html y no txt) ya tendreis vuestra primera página web creada!!!

Dadle dobleclick encima del icono del archivo que hayáis creado (normalmente el icono dependerá del navegador que uséis) y veréis lo siguiente:

Puntos importantes a tener en cuenta:

1. Todo documento  html ha de estar dentro del tag <html>  </html>

2. El tag <HEAD> nos define que saldrá en la pestaña del navegador

3. El tag <BODY> nos define todo aquello que saldrá en nuestra página

4. H1 significa cabecera. Todo aquello que esté dentro de este tag tendrá unos tamaños predeterminados

5. El tag <a> sirve para hacer links a otras páginas, ya sean locales o externas.

6. Todos los tags se cierran con </el_tag_que_queramos_cerrar>

Por ahora, ya está bien como comienzo. En breve empezaremos a hacer cosas un poco más complicadas.

Nos vemos