Mostrando entradas con la etiqueta html desde 0. Mostrar todas las entradas
Mostrando entradas con la etiqueta html desde 0. Mostrar todas las entradas

sábado, 24 de agosto de 2013

Curso HTML desde 0. Capitulo 3



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



LordPakusBlog

miércoles, 21 de agosto de 2013

Curso HTML desde 0. Capitulo 1



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

LordPakusBlog

Entradas populares