Insertar sitio web dentro de nuestro sitio web

Posted on June 23, 2015 by castiblanco

Aveces necesitamos mostrar un sitio web en nuestros artículo o sitios web, muchas de esas veces basta con usar una captura de pantalla para hacer referencia del sitio web, sin embargo, algunas veces necesitamos insertar en nuestro sitio web otro sitio web dinámica, por lo que una captura de pantalla no nos serviría completamente ya que se desactilizaría en un par de días, embeber sería el verbo correcto, lo que necesitamos entonces es embeber un sitio web en otro.

[wp_ad_camp_1]

Con un sitio web embebido, tus lectores pueden navegar en la página que insertaste sin salir de la tuya, lo que resulta útil para tener menos rebote y hacer de la experiencia del usuario algo mejor.

Insertar sitio web dentro de tu sitio web

Con el siguiente código lo harás de una forma rápida y práctica, supongamos que quieres embeber este blog en una artículo de tu WordPress o en cualquier sitio web:

<object data=http://castitec.com/ width="650" height="500"> <embed src=http://castitec.com/ width="650" height="500"> </embed></object>

Obviamente lo único que debes cambiar es la dirección del sitio web que deseas insertar o embeber y el tamaño width y height que quieres que tenga. Así de simple.

Ejemplo del código anterior.

Cómo añadir una imagen con HTML

Posted on June 6, 2015 by castiblanco

Las imágenes son un punto clave, ya que captan la atención del usuario y además este se da una buena idea acerca del tema de la página, por lo tanto es indispensable que hagas uso de ellas en el contenido de tu página web, a continuación te damos una breve explicación y te mostramos el código que debes implementar en tu contenido para adicionar las imagenes que deseas.

[wp_ad_camp_1]

El código HTML para adicionar una imagen en tu página es:

<img src="nombredelaimagen.jpg" alt="logo de la pagina">

Nota: Lo primero que debes tener en cuenta a la hora de adicionar una imagen en tu página es que la imagen debe estar guardada en la misma carpeta en la que guardaste el archivo con extensión .html ya que de lo contrario al recargar tu página esta mostrará un error o tendrá que escribir la ruta completa de tu imagen.

Como redimensionar una imagen en HTML

Esta pregunta es muy frecuente y es útil que sepas que los atributos se pueden editar a continuación te mostramos el código para redimensionar o cambiar el tamaño de una imágen en HTML

<img src="nombredelaimagen.jpg" alt="logo de la pagina" width="150" height="150" >

Los atributos que debes cambiar son width=”150″ o ancho, por el número de píxeles que deseas y height=”150″ que es lo mismo que alto por el número de píxeles que necesites.

Primer Paso

Guarda la imagen que deseas agregar en la misma carpeta en del archivo html

Segundo Paso

Modifica el código de la siguiente manera para adicionar la imagen que acabas de guardar en la carpeta raiz. Recuerda usar el comando de salto de línea para que la imagen no quede seguida del texto tal y como te mostramos a continuación:

<!DOCTYPE html>

<html>

<head>

<meta charaset="utf-8">

<title>Le Panzerotti Delicious </title>

</head>

<body>

<img src="panzerotti.png" alt="logo del restaurante"><br>

<h1> Le Panzerotti Delicious</h1>

<h2> El Restaurante</h2>

<p> Le Panzerotti Delicious ofrece a sus clientes un almuerzo y cena casual envuelta en una atmósfera natural. El menú cambia regularmente con los ingredientes más frescos del mercado. </p>

<h2>Servicio a domicilio</h2>

<p>Sólo diviértete... nosotros nos encargaremos de cocinar.Le Panzerotti Delicious con su servicio a domicilio, puede manejar eventos como refrigerios para grupos pequeños hasta todo lo relacionado con las comidas en el lanzamiento de una corporación. </p>

<h2>Ubicación y Horarios</h2>

<p>Los horarios en el restaurante son flexibles dado que sabemos que hay muchas personas que tienen horarios extendidos.</p>

</body>

</html>

Luego de haber hecho todas las modificaciones correspondientes tu página debe lucir de la siguiente manera con la imgen incluída:

En el siguiente artículo se hablará acerca del cambio de estilo en la página y algunos detalles que son trascendentales en la imagen de la misma.

Cómo estructurar contenido con HTML

Posted on May 9, 2015 by castiblanco

Hoy continuaremos nuestro camino de aprendizaje en el mundo del HTML, anteriormente aprendimos Cómo crear una página simple en html, en base a este conocimiento previo continuamos con este artículo.

[wp_ad_camp_1]

Como habrás notado tu archivo html, aún no está listo le hace falta la estructura básica o el estilo, por esto es importante saber cómo estructurar contenido con HTML para crear cualquier página web, para lo cual te mostraremos el proceso paso a paso a fin de que puedas replicarlo y/o modificarlo según sea tu caso.

Etiquetas a usar HTML

Tu encabezado

Esta etiqueta se usa para darle al texto el estilo y forma del título o encabezado.

Tu encabezado

Al igual que en el caso anterior la etiqueta h2 es simplemente un encabezado, se podría usar como subtítulo o similar, cabe aclarar que se puede usar h3, h4, h5, etc… Todo depende de las necesidades que tengas.

Párrafos

Esta etiqueta se usa para encapsular cada párrafo que tengas en tu página.

Primer Paso

Abre tu documento de texto, el mismo que guardaste con la extensión .html y modifica el documento de la siguiente manera:

Ejercicio 1 Le Panzerotti Delicious

Le Panzerotti Delicious

El Restaurante

Le Panzerotti Delicious ofrece a sus clientes un almuerzo y cena casual envuelta en una atmósfera natural. El menú cambia regularmente con los ingredientes más frescos del mercado.

Servicio a domicilio

Sólo diviértete... nosotros nos encargaremos de cocinar.Le Panzerotti Delicious con su servicio a domicilio, puede manejar eventos como refrigerios para grupos pequeños hasta todo lo relacionado con las comidas en el lanzamiento de una corporación.

Ubicación y Horarios

Los horarios en el restaurante son flexibles dado que sabemos que hay muchas personas que tienen horarios extendidos.

El resultado de las modificaciones deberían lucir como sigue:

Una etiqueta adicional pero no menos importante es el salto de línea sólo debes poner <br> en donde desees el salto de línea y es todo.

Seguramente pensarás que aún le faltan imágenes, colores y que la fuente no es de tu agrado pero, no te preocupes en el siguiente artículo encontrarás las herramientas que deseas para hacer este tipo de ajustes.

Cómo crear una página simple en html

Posted on May 1, 2015 by castiblanco

Introducción al HTML

En el siguiente artículo te mostraremos la manera en la que te puedes familiarizar con el lenguaje de marcado HTML que es el utilizado para estructurar el contenido en los sitios web.

[wp_ad_camp_1]
Primer Paso

Lo primero que debes hacer, es tener a la mano el contenido que deseas utilizar en este ejercicio, pero si no lo quieres hacer puedes tomar el siguiente texto como referencia.

Le Panzerotti Delicious

El Restaurante

Le Panzerotti Delicious ofrece a sus clientes un almuerzo y cena casual envuelta en una atmósfera natural. El menú cambia regularmente con los ingredientes más frescos del mercado.

Servicio a domicilio

Sólo diviértete… nosotros nos encargaremos de cocinar. Le Panzerotti Delicious con su servicio a domicilio, puede manejar eventos como refrigerios para grupos pequeños hasta todo lo relacionado con las comidas en el lanzamiento de una corporación.

Ubicación y Horarios

Los horarios en el restaurante son flexibles dado que sabemos que hay muchas personas que tienen horarios extendidos.

Paso dos

Crea una nueva carpeta en tu escritorio y llámala ejemplo, acontinuación, abre un nuevo documento de texto, copia y pega el contenido anterior o el de tu preferencia.

Algunos comandos HTML para empezar

Todos los documentos o páginas en HTML tiene una estructura en la cual deben ser escritos, los definiremos como siguen:

Este comando se usa para hacerle saber al navegador que el documento que creaste es de tipo HTML y siempre irá al inicio de tu documento o página web.

Esta etiqueta se usa al inicio de la página web para definir que en dicha página se está usando el lenguaje de marcado HTML.

Dentro del inicio de la estructura de tu página web hay una serie de partes claves, esta por ejemplo hace referencia al encabezado, el cual es un elemento descriptivo que contiene la información correspondiente tanto al tipo codificación de caracteres usada () en la página web como también que palabras o frases (tu título) que se mostrarán en la pestaña del navegador cuando se despliegue la página web.

Ahora veamos el paso uno y dos funcionado en un ejemplo.





Le Panzerotti Delicious 


Le Panzerotti Delicious

El Restaurante

Le Panzerotti Delicious ofrece a sus clientes un almuerzo y cena casual envuelta en una atmósfera natural. El menú cambia regularmente con los ingredientes más frescos del mercado.

Servicio a domicilio

Sólo diviértete... nosotros nos encargaremos de cocinar. Le Panzerotti Delicious con su servicio a domicilio, puede manejar eventos como refrigerios para grupos pequeños hasta todo lo relacionado con las comidas en el lanzamiento de una corporación.

Ubicación y Horarios

Los horarios en el restaurante son flexibles dado que sabemos que hay muchas personas que tienen horarios extendidos.

Paso Tres

Modifica tu documento de texto hasta tenerlo como se mostró anteriormente, y guarda tu archivo de texto con la siguiente extensión .html

Paso Cuatro

Abre tu navegador, ya sea Chrome o Firefox, haz click en Archivo o File, luego de eso busca la opción Abrir archivo u Open, luego de eso escoge el archivo que hemos estado trabajando, y ábrelo para que puedas ver cómo va tu progreso.

Tu página web debe lucir muy similar a esta:

Notarás que el texto aún no tiene un estilo ni hay saltos de línea para diferenciar entre los párrafos y títulos pero eso lo haremos en el siguiente artículo.