NOTA IMPORTANTE
Espero sea de vuestra comprensión y también de ayuda, asi mismo en ambos blog encontrarán mi dirección electrónica.
Para quienes han agredado un link de este blog... mil gracias, y les suplico agregar el nuevo sitio anteriormente mencionado.
Un amigo muy cercano nos ha pedido el siguiente enlace: http://www.goodanuncios.com espero sea a todos de mucha ayuda e interes.
Saludos,
Intro
Como dice el dicho: "La práctica hace al maestro..."
Conceptos
HTML: es un acrónimo inglés que significa Hyper Text Markup Language ó Lenguaje de Marcas Textuales.
XHTML: es un acrónimo inglés que significa Xtensible Hyper Text Markup Language ó Lenguaje Extensible de Marcado de Hipertexto.
HTTP:// Hyper Text Transfer Protocol ó Protocolo de Transferencia de Hipertexto.
WWW: World Wide Web, es un sistema de navegación que extrae elementos de información de "páginas web"
Web: es un sitio ó página que provee información y está conectada y disponible en la plataforma de Internet.
Internet: es una red mundial de computadoras interconectadas con un conjunto de "Protocolo" (de internet), el más mencionado TCP/IP.
Protocolo de internet: protocolo para la comunicación de datos a través de una red de paqutes conmutados.
Listas
Listas No Ordenadas
Empezamos con la etiqueta
<ul>
y seguimos con la lista de la siguiente forma
<li>Marcas
<li>Modelos
<li>Motores
<li>Autos
y terminamos asi
</ul>
Y se veria así:
Listas Ordenadas
Empezamos con la etiqueta
<ol>
y seguimos con la lista de la siguiente forma
<li>Computadoras
<li>CPU
<li>Monitores
<li>Impresores
y terminamos asi
</ol>
Y se veria así:
- Computadoras
Diferentes códigos para texto
<b>Letra en negrita</b> Letra en negrita
Texto alineado a la derecha
Texto alineado a la izquierda
Texto justificado
"Eñes y Tildes"
á = á
é = é
í = í
ó = ó
ú = ú
ñ = ñ
Ñ = Ñ
ü = ü
Ü = Ü
Lineas
Salto
Linea
Tablas
<table border=1><td>Contenido de la tabla</td></table>
| Contenido de la tabla |
También podemos crear dos o más columnas separadas o encasilladas, por ejemplo:
<table border=1><td>Columna 1</td><td>Columna 2</td><td>Columa 3</td></table>
| Columna 1 | Columna 2 | Columna 3 |
| Columna 1 | Columna 2 | Columna 3 |
| Casilla bajo columna 1 | Casilla bajo columna 2 | Casilla bajo columna3 |
También podemos poner un fondo de color en nuestra tabla, cambiar el color de la letra, de la siguiente forma:
<table border=1 bordercolor="white" bgcolor="black"><td><fontcolor="white">Aqui va el texto dentro de tu tabla</font></td></table>
Aqui te explico cada etiqueta para entenderla un poco mejor:
"Table border" ó Borde de tabla, es lo que está alrededor de nuestra tabla.
"Bordercolor" ó Color de borde que deseamos alrededor de nuestra tabla (Borde de tabla).
"Bgcolor" ó Background color ó Color de Fondo de nuestra tabla.
"Fontcolor" ó Color de fuente para nuestra tabla.
Como escribir las etiquetas "<>"
IMPORTANTE: si eres detallista verás que al final de cada "& l t" ó "& g t" hay un ";" (punto y coma) debes usarlo, sino no funcionará.
Como hacer "anclajes"
"Anclajes", son aquellos vínculos que nos redireccionan a la misma página donde navegamos (no nos envía a otra), dependiendo, puede que nos mande al final de la página y viceversa. Seria como "saltar" en la misma página.
Esto se logra con el siguiente código:
<a href="#identificador">Aqui el link</a>
Luego nos vamos al lugar de la página donde queremos "anclar" el link anterior. Y sería:
<a name="identificador" id="identificador">Pones lo que quieras</a>
El "identificador", puedes cambiarlo por una palabra que sea de tu comodidad, y que no te confunda al momento de usarlo en tu código HTML.
Links


Pero, como hacerlo en HTML o inclusive en un lugar distinto de nuestro blog.
Bueno pues muy simple, nos auxiliamos de la siguiente etiqueta:
<a href=http://www.blogger.com>Haz clic aqui</a>
lo que logramos con esto es que el texto que está entre las etiquetas ("Haz clic aqui") nos haga una referencia o enlace con el sitio web que asignamos, que en el ejemplo es http://www.blogger.com
Si quieres hacer un link para tu E Mail, solo tienes que agregar la función "mailto", de la siguiente forma:
<a href=mailto:tucorreo@gmail.com >Hola</a>
lo que se logra es que la palabra "Hola", hace una referencia a tu correo electrónico.
IMPORTANTE: Si quieres hacer un link dentro de tu plantilla recuerda encerrar entre comillas (" ") la dirección del sitio, desde el "http://.............. hasta el .com"
Imagenes y manipulación
<img src="tuimagen.jpg">
Hay que tener en cuenta que para tener una imagen en nuestro sitio hecho con HTML, debemos tener guardada la imagen en la misma carpeta donde hemos hecho el "Index" del sitio.
Si lo que queremos es subir la imagen al blog, usamos el mismo código, con la diferencia que en vez del nombre "tuimagen.jpg", ponemos la dirección que Blogger asignó a nuestra imagen al momento de haberla subido en una entrada. (Esto se entiende mejor en un post anterior)
Es importante, no olvidar que el nombre de la imagen va entre " " (comillas), con su respectiva extensión, osea .jpg .bmp .gif etc, etc.
Con respecto a la manipulación de imagenes, dentro del mismo código con el que insertamos la imagen usamos otros códigos los cuales detallo a continuación:
Si eres observador, cuando posicionamos el puntero sobre la imagen nos desplega un cuadrito (que generalmente es color beige) en donde nos da, ya sea el nombre de la imagen o algun otro texto. Bien, si quieres poner alguna palabra ó algun mensaje en la imagen usa la etiqueta "alt" dentro del código, de la siguiente forma:
<img src="pepelepoo.jpg" alt="hola a todos los usuarios de html-basico, es un placer tenerles aqui...">
y el resultado

Para controlar los valores anchura o altura de la imagen nos auxiliamos de "Width" para el ancho y "Height" para lo alto, te pongo un ejemplo para usarlo:
<img src="pepelepoo.jpg" width="50" height="75" alt="hola a todos los usuarios de html-basico, es un placer tenerles aqui...">
Resultado

Si quieres controlar la posición de la imagen, nos auxiliamos de "Vspace" para el espaciado vertical y "Hspace" para el espaciado horizaontal, por ejemplo:
<img src="pepelepoo.jpg" width="50" height="75" alt="hola a todos los usuarios de html-basico, es un placer tenerles aqui..." vspace="50" hspace="150">
Resultado

Estos códigos son aplicables para cualquier sitio hecho con HTML como para usarlo en el blog.
Tablas de colores
Hay una infinidad de colores y combinaciones, que seria largo describirlo en este post, sin embargo un buen compañero de lenguaje HTML ha diseñado un sitio con la mayoría de los colores con sus respectivos códigos, este es el enlace.
Espero sea de vuestra ayuda.
