martes, 15 de mayo de 2007
domingo, 6 de mayo de 2007
sábado, 5 de mayo de 2007
HTML - Básico
Nada es imposible, todos somos capaces
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.
Saludos,
# publicado por David : 3:57 PM 11 opiniones
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..."
# publicado por David : 9:14 AM 10 opiniones
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.
# publicado por David : 9:10 AM 2 opiniones
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
Y se veria así:
Marcas
Modelos
Motores
Autos
Listas Ordenadas
Empezamos con la etiqueta
Y se veria así:
Computadoras
CPU
Monitores
Impresores
# publicado por David : 6:19 AM 1 opiniones
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:
Letra en negrita Letra en negrita
Letra en cursiva Letra en cursiva
Letra subrayada Letra subrayada
Texto centrado
Texto centrado
Texto alineado a la derecha
Texto alineado a la izquierda
Texto justificado
Texto en movimiento
# publicado por David : 5:12 PM 6 opiniones
"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:
á = á
é = é
í = í
ó = ó
ú = ú
ñ = ñ
Ñ = Ñ
ü = ü
Ü = Ü
# publicado por David : 1:02 AM 6 opiniones
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
= Linea
--------------------------------------------------------------------------------
Si quieres líneas de colores, después del código "hr" especificas el color de línea que deseas, por ejemplo:
--------------------------------------------------------------------------------
Si quieres controlar en grosor de la línea, después de especificar el color, especificas el grosor, por ejemplo:
--------------------------------------------------------------------------------
Si quieres controlar el largo de la línea, después de especificar el grosor, espcificas el largo, por ejemplo:
--------------------------------------------------------------------------------
Saltos de Linea
Salto
Linea
Salto
Linea
# publicado por David : 12:32 PM 0 opiniones
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:
Contenido de la tabla
También podemos crear dos o más columnas separadas o encasilladas, por ejemplo:
Columna 1 Columna 2 Columna 3
Si lo deseamos, podemos tener casillas bajo nuestras columnas, de esta forma:
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:
Aqui va el texto dentro de tu tabla
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.
# publicado por David : 1:06 PM 4 opiniones
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 texto) 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á.
# publicado por David : 5:20 AM 1 opiniones
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:
Aqui el link
Luego nos vamos al lugar de la página donde queremos "anclar" el link anterior. Y sería:
Pones lo que quieras
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.
# publicado por David : 3:24 PM 4 opiniones
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:
Haz clic aqui
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:
Hola
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"
# publicado por David : 3:06 PM 2 opiniones
Imagenes y manipulación
Para subir imagenes, en HTML, nos auxiliamos del siguiente código:
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:
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:
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:
Resultado
Estos códigos son aplicables para cualquier sitio hecho con HTML como para usarlo en el blog.
# publicado por David : 12:35 PM 3 opiniones
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.
Nada es imposible, todos somos capaces
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.
Saludos,
# publicado por David : 3:57 PM 11 opiniones
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..."
# publicado por David : 9:14 AM 10 opiniones
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.
# publicado por David : 9:10 AM 2 opiniones
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
- Marcas
- Modelos
- Motores
- Autos
y terminamos asi
y seguimos con la lista de la siguiente forma
Y se veria así:
Marcas
Modelos
Motores
Autos
Listas Ordenadas
Empezamos con la etiqueta
- Computadoras
- CPU
- Monitores
- Impresores
y terminamos asi
y seguimos con la lista de la siguiente forma
Y se veria así:
Computadoras
CPU
Monitores
Impresores
# publicado por David : 6:19 AM 1 opiniones
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:
Letra en negrita Letra en negrita
Letra en cursiva Letra en cursiva
Letra subrayada Letra subrayada
Texto centrado
Texto alineado a la derecha
Texto alineado a la derecha
Texto alineado a la izquierda
Texto alineado a la izquierda
Texto justificado
Texto justificado
Texto en movimiento
# publicado por David : 5:12 PM 6 opiniones
"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:
á = á
é = é
í = í
ó = ó
ú = ú
ñ = ñ
Ñ = Ñ
ü = ü
Ü = Ü
# publicado por David : 1:02 AM 6 opiniones
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
= Linea
--------------------------------------------------------------------------------
Si quieres líneas de colores, después del código "hr" especificas el color de línea que deseas, por ejemplo:
--------------------------------------------------------------------------------
Si quieres controlar en grosor de la línea, después de especificar el color, especificas el grosor, por ejemplo:
--------------------------------------------------------------------------------
Si quieres controlar el largo de la línea, después de especificar el grosor, espcificas el largo, por ejemplo:
--------------------------------------------------------------------------------
Saltos de Linea
Salto
Linea
Salto
Linea
# publicado por David : 12:32 PM 0 opiniones
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:
| Contenido de la tabla |
Contenido de la tabla
También podemos crear dos o más columnas separadas o encasilladas, por ejemplo:
| Columna 1 | Columna 2 | Columa 3 |
Columna 1 Columna 2 Columna 3
Si lo deseamos, podemos tener casillas bajo nuestras columnas, de esta forma:
| Columna 1 | Columna 2 | Columna 3 |
| Casilla bajo columna1 | Casilla bajo columna 2 | Casilla bajo 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:
Aqui va el texto dentro de tu tabla
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.
# publicado por David : 1:06 PM 4 opiniones
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 texto) 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á.
# publicado por David : 5:20 AM 1 opiniones
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:
Aqui el link
Luego nos vamos al lugar de la página donde queremos "anclar" el link anterior. Y sería:
Pones lo que quieras
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.
# publicado por David : 3:24 PM 4 opiniones
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:
Haz clic aqui
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:
Hola
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"
# publicado por David : 3:06 PM 2 opiniones
Imagenes y manipulación
Para subir imagenes, en HTML, nos auxiliamos del siguiente código:
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:
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:
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:
Resultado
Estos códigos son aplicables para cualquier sitio hecho con HTML como para usarlo en el blog.
# publicado por David : 12:35 PM 3 opiniones
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.
Suscribirse a:
Entradas (Atom)
