NOTA IMPORTANTE
Estimados usuarios, actualmente estoy desarrollando un blog en el cual trataremos todas las dudas, preguntas o comentarios con respecto al blog o a Blogger, por lo tanto todos los post para la personalización y mejoramiento del blog, asi como las dudas que me han enviado por e mail, periodicamente se estarán pasando en este nuevo blog. La dirección es http://consultorioblog.blogspot.com (que algunos ya han visitado) esto anterior es para evitar que nos confundamos entre los temas de HTML y Blog, y asi mantener un orden y tener ambos conceptos por separado aunque en cada blog, habrán links de uno al otro.
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,
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
Lo primero antes de cualquier cosa, es saber que dependiendo del estilo de plantilla que escogemos, asi puede variar la "plantilla" o codigo html dentro de nuestro blog. No todos son iguales, sin embargo lo básico y las instrucciones son las mismas, las variaciones que hay son la posición de las "sidebar", del "main", colores, tipos de letras, etc. El secreto es ir probando y probando, la perseverancia y constancia es la llave del éxito.
Como dice el dicho: "La práctica hace al maestro..."
Como dice el dicho: "La práctica hace al maestro..."
Conceptos
Muchas veces mencionamos palabras que no sabemos que significan aunque si sabemos que son y para que sirven, bueno no es malo un poco de conocimiento básico...
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.
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
Algo importante que debemos conocer, es como crear listas en el código HTML, ya que dependiendo de nuestro sitio o contenido podríamos llegar a utilizarlo. Existen listas No Ordenadas y listas Ordenadas.
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í:
Marcas
Modelos
Motores
Autos
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í:
CPU
Monitores
Impresores
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
A continuación detallare un breve listado de códigos que pueden ser de utilidad para la aplicación de tus textos en html:
<b>Letra en negrita</b> Letra en negrita
<b>Letra en negrita</b> Letra en negrita
<i>Letra en cursiva</i> Letra en cursiva
<u>Letra subrayada</u> Letra subrayada
<center>Texto centrado</center> Texto centrado
<p align="right">Texto alineado a la derecha</p>
Texto alineado a la derecha
<p align="left">Texto alineado a la izquierda</p>
Texto alineado a la izquierda
<p align="justify">Texto justificado</p>
Texto justificado
<marquee>Texto en movimiento</marquee>
"Eñes y Tildes"
Algo común con el código HTML, es que no reconoce las tildes, las "eñes" y las dieresis (quizás debido a que este lenguaje fue concebido en el idioma inglés, donde estas reglas ortográficas no existen), sin embargo a continuación detallo los códigos para tales detalles:
á = á
é = é
í = í
ó = ó
ú = ú
ñ = ñ
Ñ = Ñ
ü = ü
Ü = Ü
á = á
é = é
í = í
ó = ó
ú = ú
ñ = ñ
Ñ = Ñ
ü = ü
Ü = Ü
Lineas
Los códigos detallados a continuación son prácticos y muy útiles al momento de escribir el código html, para hacer referncias a algunas palabras ó separar un parrafo de otro.
Lineas
<hr> = Linea
Si quieres líneas de colores, después del código "hr" especificas el color de línea que deseas, por ejemplo:
<hr color="red">
Si quieres controlar en grosor de la línea, después de especificar el color, especificas el grosor, por ejemplo:
<hr color="red" size=1>
Si quieres controlar el largo de la línea, después de especificar el grosor, espcificas el largo, por ejemplo:
<hr color="red" size=1 width="250">
Saltos de Linea
<br>Salto<br>Linea
Salto
Linea
Salto
Linea
Tablas
Para especificar u ordenar cierta información, nos vemos en la necesidad de usar "tablas", para ello nos auxiliaremos de los siguientes códigos:
<table border=1><td>Contenido de la tabla</td></table>
<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 |
Si lo deseamos, podemos tener casillas bajo nuestras columnas, de esta forma:
<table border=1><td>Columna 1</td><td>Columna 2</td><td>Columna 3</td><tr><td>Casilla bajo columna1<td>Casilla bajo columna 2<td>Casilla bajo columna 3</td></table>
| 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 "<>"
Talves parezca un tema para alguien extremadamente "principiante", pero una vez me tope con este problema, por lo tanto decidi publicarlo.
Si escribes las etiquetas "<>", asi vacias no hay problema, pero si lo que quieres es mostra una etiqueta con instrucción (por ejemplo <b>texto</b>) lo más seguro es que el Hiper Texto lo interprete como la intrucción de resaltar en negritas la palabra "texto"; asi que hay que escribirlo de otra forma.
Para "<" usamos las letras "& l t ;" (esto unido y sin comillas) y para ">" usamos las letras "& g t ;" (también unido y sin comillas), luego solo nos resta colocar la instrucción del Hiper Texto que queremos mostrar.
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"
Algo muy util para nuestros sitios o blog, son los "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.
"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
Algo muy básico y que no puede faltar en nuestro sitio web o blog, son los famosos "links", por lo menos en Blogger (ó en cualquier programa editor HTML como Dreamweaver o FrontPage) tiene un boton con la forma de una cadena.
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"
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
Para subir imagenes, en HTML, nos auxiliamos del siguiente código:
<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.
<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
Para manipular colores dentro del lenguaje HTML, lo hacemos por medio de códigos usando el prefijo "#" y luego el código, por ejemplo para el color negro sería #000000, para el blanco #ffffff y así sucesivamente.
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.
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.
