Vamos a ver como podemos poner las fotos e imgenes que queramos en nuestra web, poner imgenes es una tarea casi imprescindible para que nuestra web quede ms navegable y con un mejor estilo. Debis tener en cuenta que las imgenes que queramos subir deben estar en formato JPG, GIF o PNG.Para definir las caractersticas de nuestra imagen, tendremos que tener en cuenta los siguientes atributos que pondremos en el interior de la etiqueta de imagen ():src- Este atributo es obligatorio e indica el nombre del archivo (que lo pondremos entre comillas) en este campo se debe poner el URL que nos llevar a la imagen u fotografa.align- Permite controlar la alineacin de una fotografa con respecto al texto o a otras imgenes en esa lnea, para llevar a cabo esta tarea necesitamos los campos bottom (abajo), middle (en medio), top (arriba), left (izquierda), right (derecha).alt- Entre comillas se podr poner un texto que si da error o no mientras que se carga podrn leer.width- Este atributo es opcional pero yo os lo recomiendo ya que ayudis al navegador, en este campo ponis el ancho de la imagen u fotografa.height-Esta es la hermana de width, dijimos que en width indicbamos el ancho de la imagen en esta indicamos el alto de la imagen y claro, pues tambin se recomienda.border- Esta es la prima de height y de width, en este campo se debe poner el ancho del borde de la imagen (si es que lleva claro).Ahora os pondr un ejemplo de ello: - See more at: http://www.webtaller.com/html/gestion-de-imagenes-con-html/#sthash.DqOjoBnK.dpufCreacin de mapas en HTMLVamos a ver un script en el que podremos gestionar este tipo tan especial de imgenes.Un mapa es una imagen que permite realizar diferentes hiperenlaces en funcin de la "zona" de la imagen que se pulse.Las directivas para crear mapas sony.La directivaidentifica al mapa y tiene el parmetro name para indicar el nombre del mapa.La directivadefine las areas sensibles de la imagen. Tiene los siguientes parmetros obligatorios :shape= "tipo"Indica el tipo de area a definir.coords= "coordenadas"Indica las coordenadas de la figura indicada con shape.href= "URL"Indica la direccin a la que se accede si se pulsa en la zona delimitada por el area indicada.Los tipos de area pueden ser los siguientes :rectArea rectangular. Se deben especificar las coordenadas de la esquina superior izquierda y las de la esquina inferior derecha.polyPolgono. Se deben especificar las coordenadas de todos los vrtices del polgono. El visor se encarga de "cerrar" la figura.circleCirculo. Se debe especificar en primer lugar las coordenadas del centro del crculo y a continuacin el valor del radio (en puntos).Si dos areas se superponen, se ejecutar la que se encuentre en primer lugar en la definicin del mapa. Es importante definir una ltima area que abarque la totalidad del grfico para direccionar a una URL "por defecto", con el objeto de contemplar el caso de que no se pulse sobre un area definida.Veamos un ejemplo completo.

Para activar el mapa debemos indicar la imagen a mostrar, indicando que dicha imagen es tratada por un mapa. Para ello escribiramos la siguiente directiva :

Si tu visor tiene la capacidad de gestionar mapas (Netscape 2.x o Ms-Explorer 2.x o superiores), prueba a pulsar sobre alguna parte del mapa que hemos definido y que te aparecer a continuacin:

Como podemos observar, el proceso mas laborioso es el de determinar las coordenadas. Existen programas como MAPTHIS que permiten realizar este proceso de una manera sencilla, simplemente definiendo las zonas con el raton. El programa MAPTHIS permite abrir una imagen tipo .GIF y marcar las zonas sensibles. Este programa creara un fichero con extension .map que contendra en su interior las coordenadas de cada area. Con esta informacin nos sera mucho mas facil escribir nuestro mapa. Puedes buscar este programa en Shareware.com buscando por mpths.- See more at: http://www.webtaller.com/html/creacion-de-mapas-en-html/#sthash.Z3A8kwEF.dpufSeguramente muchos de ustedes tenian la duda de cmo insertar una pelcula o animacin realizada en Flash dentro de tu sitio, y si todavia no encontraste la respuesta, este artculo es para vos.La forma de incluirlo es poniendo un cdigo html dentro de la pgina, el cdigo absoluto para todos los archivos de Flash es el siguiente:

Notarn las las etiquetas y , la primera es reconocida por Internet Explorer, mientras que la otra lo es por Netscape, de esta manera su archivo de Flash se ver en ambos navegadores.Igualmente, hay otras etiquetas que deben ser tomadas en cuenta. Como CLASSID que es especifico de la etiqueta Object, esta le dice al Internet Explorer que cargue automaticamente el plugin de ActiveX actual en caso de no estar instalado. Tambin hay que contar con la etiqueta PLUGINPAGE (propiedad de la etiqueta EMBED), tiene como funcin especificar la URL para descargar el plugin Shockware correspondiente. Hay muchas otras etiquetas que pueden ser agregadas, pueden ver todas ellas enMacromedia.A continuacin, el cdigo completo que necesitars para incorporar el archivo Flash es el siguiente:

- See more at: http://www.webtaller.com/html/insertar-archivo-flash-en-html/#sthash.ONrY3ETw.dpufArchivos que contienen las plantillas

La plantilla es una carpeta que contiene en su interior una pgina web como tal y otros archivos auxiliares:index.html. Es el archivo principal de la pgina web, dando dos clics en l vers el estilo y aspecto de la pgina.images. Subcarpeta que contiene las imgenes que utiliza la pgina. Los archivosstyle.cssodefault.cssson archivos del estilo.Si no posees conocimiento de edicin, solo te ser necesario para crear tu pgina modificar el archivo index.html, los otros no ser necesario tocarlos.

Comenzar a editar la plantilla

Abre el archivoindex.htmlcon al programa con el que vas a editarlo.Todas las pginas web se dividen en dos secciones: El rea del HEAD que es todo lo que se encuentre entre las etiquetas y , solo contiene informacin propia de la pgina para el navegador, nada de lo que se encuentre dentro de esa rea se mostrar al usuario.En esa rea solo es necesario reemplazar el contenido del ttulo, el texto entre las etiquetas: y .

La otra seccin es el rea del BODY, es todo lo que se encuentre entre las etiquetas y , contiene toda la informacin que se muestra en el navegador.En esta rea ser donde introduzcas toda la informacin que tienes preparada.El rea del body est dividida en varias secciones segn la estructura de la pgina, el comienzo y final de cada una est sealada por comentarios.

Que son los comentarios en las pginas web?

Los comentarios son lneas que tienen el siguiente formato:Se usan como indicacin, no se muestran en el navegador.Los ms usados en las plantillas significan lo siguiente:Logo = rea del logotipo de la paginaMen = Barra de men con vnculos a otras pginas.Search = Cuadro de bsquedas.Content = rea de contenido en la columna principal.Sidebar = Barra lateral, algunas plantillas la tren a la derecha, otras a la izquierda.Footer = El pie de pgina.

Insertar el texto en la plantilla

Todas las reas de texto en las plantillas, para diferenciarlas fcilmente aparecen en el idioma latn, te dars de cuenta rpidamente. Sustituye cada una por el texto que tienes preparado de antemano.Las platillas estn en ingls, por lo que tambin tendrs que sustituir los nombres predeterminados de los vnculos como Home (Inicio), Contact (Contacto), etc.

Como editar y crear los vnculos en la plantilla

Los vnculos en todas las pginas web tienen el siguiente formato:Texto del vnculoEl caracter: # = Sustityelo por la direccin URL de la pgina donde ser enviado el usuario al dar un clic en el vnculo, hay dos opciones: El vnculo conduce a otra pgina en la misma carpeta o directorio del sitio.En ese caso solo es necesario reflejar el nombre de archivo de la pgina, por ejemplo:Texto del vnculoEl nombre de la pgina no puede contener espacios y tiene que incluir la extensin de archivo .html. El vnculo conduce a una pgina externa en internet.En ese caso solo es necesario reflejar la direccin URL de dicha pgina, puede obtenerse fcilmente accediendo a ella con el navegador y copiando la direccin que aparece en la barra de direcciones, un ejemplo es:Texto del vnculo Texto del vnculo = Es el vnculo que aparece en la pgina web, generalmente es de color azul y al dar un clic con el ratn conduce a la pgina de referencia.

Cmo insertar imgenes en la pgina?

Puedes agregar imgenes para que se muestren en la pgina, para eso primero cpialas a la carpetaimageny dales un nombre adecuado.Para mostrar las imgenes es necesario insertar en el lugar donde se desean que aparezca la siguiente etiqueta:

Sustituye en cada caso los siguientes valores: src="images/nombreimagen.jpg" Es la ruta a la ubicacin de la imagen. width="940" Ancho de la imagen en pixeles. height="255" Altura de la imagen en pixels. alt="Descripcion de la imagen"Las medidas de la imagen puedes conocerla fcilmente ya que aparecen en la ficha Propiedades al dar un clic derecho con el ratn en cada una.

Cuadro de bsqueda para buscar con Google en Internet

Los cuadros de bsquedas que poseen las plantillas ninguno es funcional, puedes reemplazarlos por el siguiente que permite buscar cualquier trmino usando Google.

Cmo crear varias pginas web con la misma plantilla?

Un sitio web de solo una pgina no es funcional, lo ideal es que tenga varias, aunque sea para comenzar 4 o 5 paginas. Si ya creaste la primera y comprobaste que no queda mal, puedes proseguir y crear otras con diferente contenido.Un sitio web elemental puede tener las siguientes pginas (es solo un ejemplo): La pgina index que posee el nombre del sitio con su descripcin y vnculos a las otras pginas. La pgina About (Acerca de) Contiene informacin del propietario y una foto. La pgina Contact, contiene informacin de cmo comunicarse con el autor. Otras pginas de acuerdo al contenido del sitio.Puede crearse mltiples copias del archivo index.html y renombrarlas siempre respetando la extensin html, cada copia es una pgina diferente que usar los mismos archivos auxiliares.Pueden vincularse unas con otras para permitir la navegacin interna, es opcional, pero si es necesario que la pgina index, es decir la pgina principal posea vnculos para acceder a todas las otras pginas, en ese caso tendrs hecho lo que se conoce como un sitio web completo y funcional.Para finalizar solo es necesario subir todos los archivos creados a un servidor web, para acceder a dicho sitio se escribir su nombre en un navegador y este abrir la pgina index automticamente.

Dnde subir y publicar las pginas web o el sitio creado?

En internet hay varias compaas que prestan servicios de Hosting o Alojamiento Web, es decir poseen poderosas computadoras llamadas servidores, que en sus discos duros pueden ofrecer espacio y albergar los archivos de miles de pginas web de distintos clientes, ya sean grandes o pequeas empresas o simples usuarios poseedores de una sola pgina; estos servidores funcionan las 24 horas permitiendo acceder a ellos desde cualquier parte del mundo sin importar la zona horaria.Prestan diversos servicios al propietario de los archivos como bases de datos, servicios de email, etc.Muchos de ellos ofrecen servicio de hosting gratuitos a pequeos sitios, por supuesto con limitaciones de espacio y de trfico de datos, pero aun as es una opcin ideal para dar tus primeros pasos y subir tu pgina.Tambin los hay que inclusive te ofrecen un subdominio, es decir una direccin web para poder acceder a tu sitio.Mi primer sitio lo hice usando los servicios de: byethost.com.

Qu servicio de hosting o alojamiento web utilizar?

Cada cual debe recomendar solo lo que conoce y tiene experiencia, por lo que yo sugiero a los lectores el hosting que utiliza mi sitio web del que no tengo quejas,Byethost.com. Es la compaa que ms soporte gratis ofrece en la red, sin incluir publicidad, lo s por experiencia ya que mi primer sitio utiliz el servicio gratis.No obstante, al que lo pueda pagar, la mejor opcin es usar el servicio Premium, en el paquete anual incluye un nombre de dominio con espacio ilimitado y otras opciones, en todos los tramites est disponible el idioma espaol.Adicionalmente se puede usar sin costo alguno el servicio en la nube deCloudFlare, lo que permite ms rapidez en la carga de las paginas desde cualquier regin geogrfica.Usa el siguiente vinculo y regstrate para que pruebes el servicio.Byethost.comDespus que te registres y decidas que servicio utilizar, si el gratis o el Premium, te darn los datos de tu cuenta que son: tu direccin o nombre de dominio, nombre de usuario, contrasea y la direccin ftp, esta es la necesaria para que puedas subir los archivos a tu sitio.

Diferentes tipos de servicios de hosting o alojamiento web en internet

Los servicios de alojamiento web de pago, lgicamente son los recomendados cuando se piensa en crear un sitio con un objetivo ms profesional o aunque as no lo sea, cuando se necesita ms fiabilidad y calidad.Si tu propsito, como lo fue el mo cuando comenc, es crear un sitio donde compartir tus ideas y conocimiento con los dems, pero al mismo tiempo tener ingresos, es necesario pagar por el servicio de hosting.Existen tres tipos de alojamiento principales:Servicio de alojamiento compartido (share hosting)Consiste en una computadora que funciona como un servidor web, mediante una direccin IP, presta el servicio de alojamiento a varios sitios web (hasta 500) de forma simultnea.Se nombra compartido porque se comparte todo, la direccin IP y los recursos de hardware del equipo, por lo que en momentos de mucho trfico algunos de los sitios alojados pueden ser que no respondan.Al mismo tiempo, si la direccin IP que se utiliza es baneada (sancionada) por alguna razn, se perjudicarn todos los dems sitios que la comparten.Este servicio aunque es el ms barato y accesible, como ves tiene sus desventajas.Servicio VPS (Virtual Private Server)El servicio de un servidor virtual al igual que en el compartido, varios sitios comparten el mismo equipo, pero divididos en mquinas virtuales, en este caso cada uno de ellos posee una direccin IP diferente.Aunque se utilizan los recursos de hardware de un nico equipo, cada sitio posee su cuota de espacio en disco, ancho de banda y hasta de memoria RAM, por lo que no deben perjudicarse unos a otros.Es la opcin ideal para sitios de mediano presupuesto.Servidores dedicados (Dedicated Servers)Es la solucin perfecta, cada sitio dispone totalmente de todos los recursos de un equipo, as como varias direcciones IP.Se tiene la opcin de administrar totalmente el servidor.Es la opcin ms cara, pero la ms profesional.

Como subir las paginas o el sitio creado al servidor web?

La carpeta a la que debes subir tus archivos puede ser nombrada:httpdocs,wwwo tambienpublic_htmldepende cual sea el servidor.Usando el mismo navegador web puedes subirlos si son pocos elementos, pero si hay varios archivos multimedia como imgenes, msica, etc. lo ideal es instalar un software cliente FTP, te recomiendo FileZilla, es gratuito, libre y de cdigo abierto, descrgalo en el siguiente link:Descargar FileZilla.En todos los casos al otorgarte el servicio de hosting, te facilitarn toda la informacin necesaria.

Validar las paginas para comprobar que no poseen errores

Despus de comprobar que el sitio funciona correctamente se impondr un requisito (opcional), la validacin.Validar las paginas permite comprobar si estas poseen errores y si los hay cuales son, esto puede realizarse utilizando servicios en la red gratis como el de W3C.

Por qu validar las pginas?Si deseas que las pginas que has creado u otras que vayas a subir, sean visitadas por diferentes usuarios y as compartir su contenido, necesitars que Google y otros buscadores promocione tu sitio y te enve los visitantes.Para eso es fundamental que tus pginas estn validadas correctamente, esto significa que se muestran perfectamente en cualquier navegador web.

Cmo validar las pginas web?

Para validar una pgina puede acceder directamente al sitio del Validador HTML del W3C en:validator.w3.orgy en el formulario introducir la direccin de la pgina necesaria. En el informe que te devolver el validador vers el resultado, en caso de que existan errores mostrar el error y la lnea de la pgina donde se encuentra.Tambin puedes usar el siguiente Bookmarklet que facilita dicha tarea.Validar HTMLPermite validar el cdigo fuente o HTML de una pgina, usando el servicio del W3C.

Plantillas de pginas web en HTML5

Las plantillas que se ofrecen en esta pgina usan la especificacin de HTML XHTML.Actualmente comienza a ganar en popularidad un nuevo lenguaje con una sintaxis mucho ms sencilla llamado HTML5.Las pginas escritas en HTML5 permiten nuevas funcionalidades como son insertar directamente video, msica y casi cualquier elemento.Adems todos los scripts o widgets que proporcionan las redes sociales como Facebook, Twitter, Google+ y Pinterest, para insertar botones y contadores, usan este lenguaje.Si estas interesado en conocer ms las caractersticas y usos prcticos de este lenguaje, lee otra pgina de nuestro sitio:HTML5, ventajas y caractersticas

Dnde descargar gratis plantillas de pginas web en HTML5?

Debido a la creciente popularidad de HTML5, varios servicios de internet ofrecen plantillas para crear sitios web en este lenguaje.Entre ellos destacaHTML5 Up!

Todas las plantillas que se pueden descargar son gratis.Cada archivo que se descarga esta comprimido en ZIP y en su interior puede encontrarse distintas versiones en HTML de una pgina.Un archivo con la barra lateral a la izquierda, otra a la derecha y una sin barra lateral.Incluyen archivos de estilo CSS que usan el diseo adaptable o sea que ajustan automticamente el ancho de la pgina a la pantalla del dispositivo donde se carguen ya sea en un navegador de una PC de escritorio, un telfono celular o una tableta.