-->

Ffffffffff

dddd





Escribe tu consulta y pulsa en INTRO: Type Here HOMEPAGEPROGRAMACIÓN BASICA BLOGGINGPROGRAMACIÓN BASICA Códigos HTML Para Paginas Web En Bloc De Notas 100 Codigos HTML para paginas web en bloc de notas Manejar HTML puede servirte tanto para crear una web desde cero como para potenciar un sitio web creado con algún gestor (estilo WordPress). Por ello decidí dividir este artículo sobre códigos HTML para paginas web en dos partes: Primera parte: en esta estudiaremos la estructura básica del HTML y además te dejaré códigos HTML para páginas web en Bloc de notas. Con esto podrás, desde cero, crear tu sitio web. Segunda parte: aquí daré varios trucos de HTML, útiles tanto para aquellos que quieren crear su Web solo con HTML como para quienes usan algún gestor de contenido (WordPress). Post que te puede interesar: 18 increíbles códigos CSS para potenciar tu sitio web Tabla de contenidos Primera Parte: Códigos HTML Para Páginas Web Estructura básica de un documento HTML Edición De Texto En HTML Codigos HTML Para Páginas Web En Bloc De Notas Segunda Parte: Trucos HTML Para Tu Sitio Web 1- Poner en tu web un texto con Movimiento (Arriba-Abajo) 2- Inserta el famoso botón de “Ir Arriba”. Imagen modificable (solo cambia la URL) 3- Añade una atractiva Marquesina con el texto que quieras 4- Contenido oculto (ejemplo: código html) con botón “Mostrar” 5- Titulo en la barra de direcciones con movimiento 6- Insertar un simple botón: “Imprimir Página Actual” 7- Añade el juego Mario Bross en tu sitio web. (Mas juegos en Games68.com) 8- Texto (modificable) con un Efecto Parpadeante 9- Interesante código HTML para insertar lluvia en tu pagina 10- Al pasar el mouse por un link se desplegará una ventana explicando la función del mismo 11- Inserta una caja para poner códigos HTML 12- Abrir una pagina en Popup 13- Pequeño widget que da en tiempo real el número de usuarios activos en tu web 14- Inserta un Pequeño y Bonito Calendario en tu Página Web 15- Efecto de sangre cayendo desde la parte superior de tu web 16- El Pájaro de Twitter volando por toda tu página web o blog 17- Opciones en casilla que abren un enlace al seleccionarse. 18- Logra un efecto de subrayado cuando pasas el mouse sobre un link 19- Código HTML para insertar pequeño widget de Horoscopos en tu web 20- Un solo botón y varios enlaces 21- Widget para mostrar la fecha exacta en tu web 22- Crear un botón para abrir un enlace 23- Inserta un formulario de suscripción para tus visitantes 24- Código para un banner que se abre en una nueva ventana 25- Colocar el buscador de Google 26- Colocar una cuenta regresiva Primera Parte: Códigos HTML Para Páginas Web No te puedo tirar códigos si no entiendes la estructura básica. Presta atención a lo que sigue, ya que es tan fácil como importante, no quiero que metas la pata desde el arranque.. jeje Estructura básica de un documento HTML La estructura de un documento Html, comienza siempre con la etiqueta y termina con la etiqueta de cierre . En el interior de estas dos etiquetas, existen dos espacios que son el encabezamiento y el cuerpo. El encabezamiento esta delimitado por las etiquetas de apertura y de cierre. Esta parte está destinada a definir ciertas características de nuestra web, por ejemplo pueden introducirse codigos css. También en el encabezamiento se posiciona el título de la ventana de nuestra página web la cual empieza con la etiqueta y cierra con la etiqueta . La segunda parte de un documento HTML es el cuerpo, inicia con la etiqueta y culmina con la etiqueta , en esta parte es donde se concentra el contenido de nuestra web, prácticamente la mayor parte del código se desarrolla en esta parte. Podemos ver más claramente el orden de las etiquetas antes mencionadas en la siguiente tabla: ETIQUETA FUNCIÓN Empieza un documento HTML Zona de cabecera Zona de título Termina zona de título Termina zona de cabecera Zona de cuerpo del documento Termina zona de cuerpo del documento Termina documento HTML Las etiquetas tienen propiedades, las cuales son descritas por medio de los Atributos. Un atributo es una opción que permite proporcionar detalles acerca de cómo una etiqueta afectará el contenido. ¿Buscas una plantilla para WordPress? No siga buscando. Aprovecha estos increíbles descuentos para Divi de Elegant Themes, la mejor plantilla multi-propósito premium de WordPress. Descuento Del 20 % Plan Yearly Access Descuento Del 10 % Plan Lifetime Access Recuerda que no solo estas adquiriendo Divi sino también las demás 87 plantillas premium de Elegant Themes y sus fabulosos plugins (Divi Builder, Bloom, Monarch). Nota: Este artículo contiene enlaces de afiliado, por los que recibiré una comisión en caso de una venta. Solo recomiendo los mejores productos del mercado que obviamente uso para mi blog. Ninguna página debe carecer de título ya que el explorador lo buscará para identificarla, además es fundamental a la hora de la indexación por parte de los buscadores. Habiendo aprendido la estructura básica del HTML podemos escribir un sencillo código como el siguiente. Este es solo un ejemplo Aqui se encuentra el contenido de la web Lo único que se verá en la pagina del ejemplo es el texto “Aqui se encuentra el contenido de la web”, ya que se encuentra dentro del la etiqueta . En lo que sigue veremos como dar formato al texto. Post que te puede interesar: Ejemplo de Paginas web en HTML y CSS + Tutorial de edicion Edición De Texto En HTML Para la edicion de textos se usan etiquetas y atributos, comencemos viendo los atributos más destacados: Face: fuente. nombre de la fuente, o fuentes. Color: color del texto. número hexadecimal o texto predefinido. Size: tamaño del texto. valores del 1 al 7, siendo por defecto el 3, o desplazamiento respecto al tamaño por defecto, añadiendo + o – delante del valor Por ejemplo, para insertar el texto: Aquí se encuentra en contenido de la web Habría que escribir: Aquí se encuentra el contenido de la web Otra forma de darle tamaño al texto es mediante la etiqueta con x que va creciendo de 1 en 1. Teniendo

;

;

;

; etc. Estas etiquetas no solo dan tamaño sino también jerarquizan al texto. Siendo el texto que coloques en la etiqueta

el titulo principal de la página y los demás

,

, etc subtitulos. Es muy importante respetar y estructurar con estas etiquetas tus páginas para una mejorar indexación de tu contenido. Para resaltar los textos existen varias etiquetas: negrita negrita cursiva cursiva subrayado subrayado tachado tachado máquina de escribir máquina de escribir Por ejemplo, para insertar el texto: Aquí se encuentra el contenido de la web Habría que escribir: Aquí se encuentra el contenido de la web Codigos HTML Para Páginas Web En Bloc De Notas Vamos a aplicar lo que aprendimos para escribir un código HTML y crear una web desde un bloc de notas. Lo primero que debes hacer es abrir un bloc de notas y escribir el código. Como ejemplo puedes tomar el siguiente: Este es solo un ejemplo

Este Es El Título Principal De La Página

Aqui podemos colocar alguna introducción al contenido que encontrarás… bla bla bla

Este Es Un Subtítulo De La Página

Aqui se encontrará el desarrollo con todo lo que quieras.. Si prestaste atención habrás visto que añadí el atributo bgcolor dentro de la etiqueta , esto permite dar color al fondo del sitio. Puedes seleccionar el color en formato hexadecimal, personalmente siempre saco los colores de esta web. Además hice uso de la etiqueta
para centrar el título y subtitulo

y

respectivamente. Las demás etiquetas y atributos que use las hemos visto anteriormente. 🙂 ¿Buscas una plantilla para WordPress? No siga buscando. Aprovecha estos increíbles descuentos para Divi de Elegant Themes, la mejor plantilla multi-propósito premium de WordPress. Descuento Del 20 % Plan Yearly Access Descuento Del 10 % Plan Lifetime Access Recuerda que no solo estas adquiriendo Divi sino también las demás 87 plantillas premium de Elegant Themes y sus fabulosos plugins (Divi Builder, Bloom, Monarch). Nota: Este artículo contiene enlaces de afiliado, por los que recibiré una comisión en caso de una venta. Solo recomiendo los mejores productos del mercado que obviamente uso para mi blog. Para visualizar este sencillo sitio web debes guardar el bloc de notas con la extensión .html. Sigue mis pasos, Archivo –> Guardar como… Añade al final del nombre de tu archivo la extensión .html y dale click en Guardar. Eso te generará un icono del navegador que tengas por defecto con el nombre que le diste a archivo. Si abres el archivo que acabas de generar podrás visualizar el sencillo sitio web que acabamos de crear. Consejo Uno: Una buena forma de aprender HTML es leer códigos de otras webs, eso te ayudará a ir amigandote con el lenguaje. El acceder al HTML de cualquier web es bien sencillo, abre dicho sitio con Google Chrome y presiona Ctrl+U. Eso te abrirá una nueva ventana con el código fuente de la página. Te recomiendo que comiences leyendo sitios web sencillos, ya que de lo contrario podrá confundirte. Consejo Dos: Si vas a armar tu página con HTML pero no quieres perder tiempo en escribir todo el código pásate por este sitio web desde el cual puedes descargar excelentes plantillas html gratuitas. Si te decides a descargar alguna plantilla aprovecha para darle una hojeada a como están escritas.. 😉 Segunda Parte: Trucos HTML Para Tu Sitio Web Como ya te dije anteriormente, y dejo claro en el título, aquí te daré muchos trucos. He recopilado estos códigos HTML para páginas web de varios foros y páginas webs, los que aquí dejo son todos los que logre que funcionen. Igualmente si tienes problema con alguno de estos trucos dímelo en la caja de comentarios así lo reviso. 🙂 1- Poner en tu web un texto con Movimiento (Arriba-Abajo) AQUI VA EL TEXTO QUE DESEES 2- Inserta el famoso botón de “Ir Arriba”. Imagen modificable (solo cambia la URL)

Ir arriba
3- Añade una atractiva Marquesina con el texto que quieras

Aquí tu texto

4- Contenido oculto (ejemplo: código html) con botón “Mostrar”
Clic Para Mostrar El Contenido 5- Titulo en la barra de direcciones con movimiento 6- Insertar un simple botón: “Imprimir Página Actual”

Imprimir Contenido

7- Añade el juego Mario Bross en tu sitio web. (Mas juegos en Games68.com) Super Mario flash | juegos online gratuito con Games68.com 8- Texto (modificable) con un Efecto Parpadeante

AÑADE AQUI EL TEXTO QUE QUIERAS

9- Interesante código HTML para insertar lluvia en tu pagina ¿Buscas una plantilla para WordPress? No siga buscando. Aprovecha estos increíbles descuentos para Divi de Elegant Themes, la mejor plantilla multi-propósito premium de WordPress. Descuento Del 20 % Plan Yearly Access Descuento Del 10 % Plan Lifetime Access Recuerda que no solo estas adquiriendo Divi sino también las demás 87 plantillas premium de Elegant Themes y sus fabulosos plugins (Divi Builder, Bloom, Monarch). Nota: Este artículo contiene enlaces de afiliado, por los que recibiré una comisión en caso de una venta. Solo recomiendo los mejores productos del mercado que obviamente uso para mi blog. 10- Al pasar el mouse por un link se desplegará una ventana explicando la función del mismo

Opciones.

Página principal
Trucos PC
Glosario

11- Inserta una caja para poner códigos HTML

AQUI VA LO QUE TU QUIERAS, CAMBIA ESTE TEXTO.

Hover Me to Preview

Lorem Ipsum

Dolor sit amet, consectetur adipiscing elit.

Publicar un comentario

0 Comentarios