Básicamente vamos a entender que HTML es un "lenguaje de programación” que sirve para diseñar paginas web, donde pagina web es lo que vemos en el navegador.
Para crear estas paginas vamos a usar el documento de texto de win que luego se guarda con extensión .html.
Al documento HTML, como todo código, lo vamos a componer de una serie de comandos que el navegador va a traducir en lo que será nuestra pagina, estos comando van a ser llamados etiquetas y se van a componer así <> para iniciar la etiqueta y </> para finalizar la etiqueta.
Para indicar que estamos trabajando en un documento .html tenemos que meter todo en una etiqueta
| Código: |
<html> </html> |
Dentro de esta etiqueta se pueden distinguir dos partes la cabeza (head) y el cuerpo (body)
| Código: |
| <head> </head> |
| Código: |
| <body> </body> |
En head solo vamos a poner el titulo (title) de la pagina
| Código: |
< title > Aprendiendo HTML </ title > |
Y en body todo lo demás, por ahora el código nos queda así:
| Código: |
| <html> <head> <title> Aprendiendo HTML </title> </head> <body> </body> </html> |
En body vamos a poder poner (como en muchas otras etiquetas) un color de fondo (bgcolor=”color en números binarios”)
va a quedar así:
| Código: |
<body bgcolor=”color en números binarios”> </body> |
Y acá vamos a hacer un parate.
¿El color en números binarios?¿Y como averiguo eso?
Bueno, no desespereis!(jeje) primero vamos a ver como se expresa un color en números binarios, es así #RGB ya no parece tan complicado... pero como es en números binarios quedaría mejor así #RRGGBB, bueno ya tenemos la base, obviamente hay que cambiar "RRGGBB” por otras letras o números, para ya ir teniendo una idea clara vamos a decier que con la letra "F” expresamos el color bien saturado y con el "0” (cero) indicamos la ausencia de color, entonces ya con esto podemos afirmar las siguientes situaciones:
#FFFFFF: Blanco
#000000: Negro
#FF0000: Rojo
#00FF00: Verde
#0000FF: Azul
Pero seria algo pesado aprenderse todas las combinaciones, entonces te voy a enseñar un secretito (es la técnica que utilizo yo, necesitas tener el Photoshop), abren el ps y le hacen clic al cuadradito donde esta seleccionado el color,
Así se les abre el cuadro de selección de colores,
Si miran el cuadro de abajo (el que esta marcado con rojo) van a tener el color seleccionado en la paleta en números binarios y listo tema solucionado, elijen el color que quieran, sin limites!
Como ven en la imagen dos el color es blanco y en número binario es #FFFFFF, ahí comprueban que no les mentí, jeje.
Bueno así terminamos con esta especie de mini-tuto.
Volvamos al tema.
De ahora en mas todo lo que voy a explicar va a ir dentro de la etiqueta body.
Para empezar, vamos a aprender algunos caracteres latinos que no se leen por si solos como es el ejemplo de la letra "ñ”, "Ñ”, de la letra "ü”, "Ü” y de los tildes "á”, "é”, "í”, "ó”, "ú”, "Á”, "É”, "Í”, "Ó”, "Ú”, tampoco va a entender si ponemos ¡, ¿, ", &, <, >. a continuación le pongo una pequeña lista de los códigos para hacer estas letras y símbolos.
| Código: |
<: < >: > &: & ": " á: á é: &aeacute; í: í ó: ó ú: ú Á: Á É: É Í: Í Ó: Ó Ú: Ú ü: ü Ü: &Unml; ñ: ñ Ñ: Ñ ¿: ¿ ¡: ¡ |
(siempre terminan en ; y comienzan con &).
Para que en esta pagina se vea DiseñAr, se debe escribir así DiseñAr.
No siempre es necesario poner los códigos a veces poniendo ñ, á, é o cualquiera de los ya mencionados salen bien pero para no encontrarnos con problemas conviene poner los códigos.
Dicho todo esto ya podemos empezar con lo que va a ser el cuerpo de nuestra web, vamos a ver algo sobre el texto y su alineación.
Si escribimos el codigo de esta forma:
DiseñAr
puro
diseño
La visualisacion va a ser esta:
DiseñAr puro diseño
Para indicarle al texto el momento en que tiene que pasar al próximo renglón hay que finalizarlo así
y para que deje un renglón de por medio ponemos <p>
También podemos hacer un texto predefinido como este:
DiseñAr
puro
diseño!!
codigo:
| Código: |
| <pre>DiseñAr puro diseño!!</pre> |
El texto predefinido tiene como fuente "courier”.
Se puede separar el texto con una línea horizontal como esta:
y se hace así:
| Código: |
| <hr> |
Se le puede editar el espesor agregando size="30” (el 30 indica el nuevo espesor pueden ir probando varios)
código:
| Código: |
<hr size="30”> |
Y agregando width="” podemos cambiar el largo
código:
| Código: |
| <hr width="50”> |
Ahora vamos a ver como hacemos una lista numerada y no numerada como estas:
1. Primero
2. Segundo
3. Tercero
* Primero
* Segundo
* Tercero
código numeradas:
| Código: |
<ol> <li> Primero <li> Segundo <li> Tercero </ol> |
código no numeradas:
| Código: |
| <ul> <li> Primero <li> Segundo <li> Tercero </ul> |
Y también se puede hacer una lista de definición:
DiseñAr
Pagina dedicada al diseño 2d, 3d y web.
código:
| Código: |
<dl> <dt>DiseñAr <dd>Pagina dedicada al diseño 2d, 3d y web. </dl> |
Ahora vamos a ver las cosas que le podemos hacer al texto como ejemplo vamos a citar un texto en negrita, en cursiva y subrayado, para darle estos atributos a un texto vamos a asignarle la etiqueta <b></b>, <i></i> y <u></u> para negrita, cursiva y subrayado respectivamente.
códigos:
| Código: |
| <b>negrita</b> <i>cursiva</i> <u>subrayado</u> |
Para asignarle mas atributos a un texto vamos a utilizar la etiqueta fuente (font):
| Código: |
| <font> </font> |
y dentro de <font> podemos poner size=”tamaño de la fuente del 1 al 7 donde el 1 es el mas chico”, color=”el color de la fuente”, face=”tipo de fuente ejemplo: verdana, arial, courier”, aling=”la alineación, left, center o right”, valing=”subíndice o superíndice, middle, top o bottom”
El color de la fuente ya saben, en números binarios (ver mas arriba).
