Tecnogramers

HTML (HyperText Markup Language) es el primer lenguaje que una persona debe conocer si desea comenzar a realizar páginas web. No es un lenguaje de programación, sino una lenguaje descriptivo, una serie de etiquetas que el navegador interpretará de una u otra forma para mostrar distintos contenidos por pantalla. Nosotros vamos a trabajar con el HTML (HyperText Markup Language) estándar actual, que es el utilizado por los navegadores y páginas web de hoy en día. Sin embargo, a lo largo de la historia de este lenguaje (que comenzó en 1991) se han sucedido diferentes versiones; no vamos a prestarles atención, ya que el objetivo de este curso es aprender  los fundamentos de HTML  y entender cómo funciona, no conocer la sintaxis o especificidades de una versión concreta. Si conseguimos hacernos con los fundamentos y comprensión básica sobre el lenguaje, seremos capaces de adaptarnos a las características particulares de una versión sin problema. Tutorial de HTML - Inicio Tutorial de HTML (I)...

ALGO DE HISTORIA HTML (HyperText Markup Language) nació públicamente en un documento llamado HTML Tags (Etiquetas HTML), publicado por primera vez en Internet por Tim Berners-Lee en 1991. En esta publicación se describen 22 etiquetas que mostraban un diseño inicial y relativamente simple de HTML. Varios de estos elementos se conservan en la actualidad. Otros se han dejado de usar, y muchos otros se han ido añadiendo con el paso de los años. De esta manera, podemos hablar de que han existido distintas versiones de HTML a lo largo de la historia de internet. LAS ETIQUETAS Para que vayas haciéndote una idea de lo que vamos a aprender, vamos a crear un documento de texto que se llame ejemplo.html y que contenga el siguiente texto: <html> <head></head> <body> Hola mundo!<br> <b>Esto es negrita.</b><br> <i>Y esto it&aacute;lica.</i><br> </body> </html> Generará el siguiente resultado: Hola mundo! Esto es negrit...

EJERCICIO Crea una página web utilizando los distintos elementos HTML que hemos ido estudiando en el curso que refleje de forma aproximada lo que se ve en esta imagen y que cumpla lo indicado más abajo:   Los elementos a incluir son: un título h1, un título h2. Menú, separador hr, lista de elementos que son links, párrafos de texto que contienen algunos links. Imágenes. Un formulario. Imagen y texto de pie. La página debe organizarse en capas según esta estructura: capa de cabecera (contiene títulos h1 y h2). Capa de cuerpo (contiene menú, párrafos y formulario). Capa de pie (contiene imagen y copyright).    

Si ya tenemos nuestros archivos HTML generados, solo nos queda subirlos a "la nube" y que sean accesibles por cualquier usuario en cualquier parte del mundo. Vamos a crear una cuenta de hosting gratuita en un servidor HTML y accederemos a éste vía Panel de Control (el panel de control se suele llamar "Cpanel" o "Control Panel"). En Internet hay muchas páginas web que permiten crear una cuenta de hosting gratuito en un servidor HTML: por ejemplo www.000webhost.com, www.byethost.com, www.agilityhoster.com y varias más. Creando una cuenta en un hosting gratuito, disponemos de un servidor (que compartimos con otros usuarios) donde podemos alojar una página web. Nosotros usaremos el servidor de Byethost (byethost.com), aunque podríamos usar cualquier otro porque todos ellos son similares. También, si dispones de una cuenta de hosting gratuita o de pago y de un dominio, puedes utilizarlo sin necesidad de dar todos los pasos que explicamos aquí. En nuestro caso, ...

La etiqueta marquee HTML nos sirve para dar un efecto diferente a los textos de nuestra página Web. Gracias a ella podemos conseguir texto en movimiento. Para aplicar este efecto a los textos, éstos deben estar dentro de la etiqueta marquee, entre su inicio “<marquee>” y su cierre “</marquee>”. El movimiento, la dirección de desplazamiento, la velocidad del mismo,…todo es configurable gracias a los siguientes atributos: align:  Este atributo nos indicará si el texto dentro de la etiqueta se alineará en la zona alta del marquee (“top”), en el medio (“middle”) o en la parte baja (“bottom”). bgcolor:  Con este atributo definiremos el color de fondo que le queremos dar a la marquesina donde está el texto en movimiento. height y width:  El primero marca la altura que tendrá la marquesina y el segundo la anchura de la misma. scrollamount:  Este atributo define la cantidad de píxeles que queremos que se desplace el texto en cada movimiento. Por ejemplo: <marquee scrollamount=”3...

Al igual que los frames, los iframes HTML nos permiten mostrar otras urls dentro de nuestra ventana principal, pero con un mayor control y con unas ventajas mayores que te mostraremos a lo largo del artículo. Los frames requerían de una página vacía para insertar allí los marcos. Esto provocaba una ralentización para el usuario, ya que primero debía cargarse la página principal y luego ya se cargaban los marcos. Con los iframes no pasa eso ya que la página principal, donde va albergado nuestro iframe, está lleno de contenido, por lo que el usuario recibe información desde el principio. El uso habitual de los iframes es para mostrar publicidad o Webs de colaboración. Vamos a mostrarte el código de la estructura básica de un iframe HTML para poder explicarte sus partes. <html> <head> <title>Iframes</title> </head> <body> http://www.cesasaweis.com/ </body> </html> Como vemos, la estructura es similar a cualquier documento html que hemos vist...

Un Frame HTML (en castellano “marco”), es una ventana independiente dentro de la propia ventana del navegador. Cada frame tiene sus propios bordes y también sus barras de desplazamiento. Mediante un frame conseguimos dividir la ventana del navegador en varias subventanas independientes entre ellas. Cada una de estas subventanas posee un documento html propio. Vamos a ver cómo es el cuerpo de un frame y su estructura para posteriormente explicar cada parte del marco. Podemos ver cómo es diferente al tipo de estructura que habíamos visto hasta ahora: <html> <head> <title>Ejemplo de frame.</title> </head> <frameset cols="150,100%"> <frame name="indice" src="frame-ejemplo-2.html"> <frame name="principal" src="frame-ejemplo.html"> <noframes> <p>Si tu navegador no acepta frames, estarás viendo este mensaje. ¡Lo sentimos!</p> </noframes> </frameset> </html> Lo ...

Los formularios html nos ayudan a aumentar la interactividad de nuestra Web y nos permiten recibir información de los usuarios de nuestro site. Los formularios html están compuestos por campos de texto y botones. Una vez el usuario ha rellenado el formulario e introducido los valores en los campos, éstos son enviados para poder procesarlos. El envío de estos datos puede hacerse a un correo electrónico o a un programa que procese toda la información y nos ayude a hacer un seguimiento. Los formularios son un tag más de html y, como todos los tags, debe ir indicado mediante una etiqueta. La etiqueta de los formularios es <form> y su cierre </form>. Todo lo que vaya dentro de estas etiquetas, serán partes del formulario. La etiqueta <form> tiene una serie de atributos básicos que vamos a pasarte a explicar a continuación. action El atributo “action” indica el tipo de acción que va a realizar el formulario. Anteriormente indicamos que la información podía enviarse a un cor...

Enlaces HTML Los enlaces en HTML nos permiten de una manera muy cómoda redirigir al usuario a otra parte, cuando éste pinche en dicho enlace. Podemos hacer que el usuario se vaya a otra url distinta a la que está, o podemos hacer que vaya a otra parte pero dentro del mismo archivo en el que está, dentro de la misma url. Esta explicación la entenderás más fácilmente cuando te presentemos los tipos de enlaces que hay y veas sus características. Así pues, vamos a ello: La etiqueta <a> Es dentro de esta etiqueta y de su cierre (</a>) dónde encontraremos el enlace. Todo lo que esté dentro de ella, ya sea texto o una imagen, estará considerado como un enlace y el navegador lo interpretará así. Atributo href Para que un enlace esté activo debemos indicar dentro de él el destino del mismo. Para establecer este destino le colocamos a la etiqueta <a> este atributo. La etiqueta completa nos quedaría así: <a href=“enlace”>Pincha aquí para ir al destino del enlace</a> ...

Poner imágenes en nuestra web produce unos resultados asombrosos de una manera muy fácil. Vamos a mostrarte como puedes incluir una imagen y los atributos que puedes darle a la misma. El tag básico para colocar una imagen es “ img “. Este tag, a diferencia de la gran mayoría de los tags de html, no necesita un cierre. Va acompañado de diferentes atributos que te vamos a explicar a continuación. El atributo  “src”  es imprescindible para poder colocar una imagen. Este atributo es el que indica dónde se encuentra alojada la imagen que queremos mostrar. Se escribe así: <img src=”x”>, siendo “x” la dirección o la url dónde se encuentra situada la foto. La foto podemos alinearla en la página como queramos mediante “ align “, utilizando los atributos “left” para alinearla a la izquierda, “right” para alinearla a la derecha, “top” para alinearla arriba, “bottom” para alinearla abajo y “middle” para alinearla al centro. También podemos poner una descripción de la imagen dentro de la mism...

Listas HTML Listas no ordenadas: <ul> Las listas no ordenadas van dentro de la etiqueta <ul> y de su cierre </ul>. Cada punto que queramos añadir a la lista, lo haremos dentro de la etiqueta <li> y su cierre. Si no le indicamos nada a la etiqueta <li>, ésta se generará de forma automática. Pero si queremos definir nosotros mismo el símbolo del punto, podemos gracias al atributo “type”. Así podemos hacer que la lista esté definida por puntos negros (li type=”disc”), por puntos con el fondo blanco (li type=”circle”) o por cuadrados (li type=”square”). Aunque esta apariencia dependerá del navegador. Hay algunos navegadores que dan otras apariencias a estos mismos atributos. Vamos con un pequeño ejemplo en código: <ul> <li type="circle">Esto es un tipo de punto.</li> <li type="square">Este es otro.</li> <li type="disc">Y este es otro diferente.</li> </ul> Comprueba el resultado. List...

Tablas HTML Una tabla en html viene marcada por las etiquetas <table> </table>. Entre esas dos etiquetas definiremos la tabla, las celdas que queremos, las columnas y las características de cada uno de estos parámetros. Pero vamos a empezar explicándote la etiqueta <table>. Ya hemos dicho que esta etiqueta nos indica que empieza una tabla, pero… ¿podemos predefinir  características de esa tabla? Por supuesto que sí. Una tabla admite muchos parámetros. Nosotros vamos a explicarte los principales. La tabla HTML: <table> Como ya ocurre con la etiqueta body, a una tabla también lo podemos definir el fondo de la misma. Esto lo podemos conseguir con el parámetro “bgcolor”, que nos pondrá un color de fondo,  o “background” para poner una imagen de fondo. Recuerda que si la imagen es más pequeña que la tabla, ésta se repetirá tanto a lo ancho como a lo largo. <table bgcolor="#FF0000"> <table background=”URL”> Otro aspecto que podemos definir de la ...

Caracteres especiales Las páginas Web están abiertas a todo el mundo y a todos los lenguajes. Pero no todos los lenguajes son iguales. En español, por ejemplo, tenemos algunas letras que son propias de nuestra lengua y que otras no poseen. Por ello, una “ñ” en un navegador de un ordenador de fuera de España puede que no se vea. Para evitar ese problema podemos usar los caracteres especiales de html. No todos los ordenadores leen las mismas letras, pero sí todos leen el mismo código. Un “ñ” escrita como tal no se verá en muchos ordenadores del mundo pero, si por el contrario, escribimos &ntilde; (carácter html para la “ñ”), seguro que se muestra correctamente. En el siguiente artículo veremos los caracteres especiales html. Caracteres especiales básicos Estos caracteres son esenciales. No por que no sean interpretados correctamente por el navegador, sino porque estos símbolos mal escritos pueden causar que nuestra web no funcione correctamente. &amp; & &quot; “ &lt; ...

Encabezados Puede que queramos empezar nuestra web o nuestro texto con un encabezado indicando el título del artículo, categoría, etc. Pues bien, para escribir encabezados tenemos que utilizar las etiquetas <h>. Esta etiqueta viene acompañada de un número, desde el 1 hasta el 6, predefiniendo éstos el tamaño del encabezado. Así, <h1> sería el encabezado más grande mientras que <h6> sería el más pequeño. A continuación vamos a mostraros el código de los seis diferentes encabezados: <h1>Texto muy grande</h1> <h2>Texto grande</h2> <h3>Texto algo más grande de lo normal</h3> <h4>Texto normal</h4> <h5>Texto pequeño</h5> <h6>Texto muy pequeño</h6> Podéis ver el resultado ahora:   Texto muy grande   Texto grande   Texto algo más grande de lo normal   Texto normal   Texto pequeño   TEXTO MUY PEQUEÑO Si ya habéis visto el ejemplo os daréis cuenta que cada encabezado está separado del anterior y del siguien...

Separadores en html. La etiqueta <hr> Para separar un texto de otro o un párrafo de otro podemos utilizar una línea horizontal de un tamaño o un grosor determinado por nosotros. Esa franja la escribimos con la etiqueta <hr>. La contrario que muchas etiquetas html, ésta no necesita ser cerrada. Sólo con escribir la etiqueta anterior ya la escribimos. La etiqueta <hr>, como muchas otras etiquetas, puede variar de aspecto dependiendo de las reglas CSS que definamos. Definir su grosor A continuación te vamos a ofrecer dos ejemplos de franjas con diferentes grosores, siendo la primera 15px y la segunda 2px. La diferencia es abismal. <hr size="15px"><hr size="2px">   Definir su anchura En el caso de no escribir nada (como en los ejemplos anteriores), la franja será predeterminada del 100%. Si queremos que ocupe más o menos tendremos que escribirlo con el atributo width. A continuación vamos a escribir una franja de 75% de ancho: <hr style=...

Comentarios en html Los comentarios html son textos que van dentro del código fuente pero que no son mostrados por los navegadores. Estos comentarios son muy útiles para los editores de la página, ya que ayudan a una mayor comprensión del código. La forma correcta de escribir un comentario html es la siguiente: <!--Esto es un comentario--> Podemos apreciar que para los comentarios no se usan las etiquetas vistas en casi todo el html, aunque la estructura es prácticamente la misma. Hay una apertura y un cierre, y todo lo que va dentro de estos dos elementos es el comentario. El código de apertura es el siguiente: <!– y el cierre del comentario se escribe así: –>. Mira el código del siguiente ejemplo: A continuación vamos a escribir un comentario, pero aquí no lo podremos ver porque...<br> <!--este es el primer comentario que hemos escrito--> ...los comentarios no son visibles para el usuario... <br> <!--otro comentario para editores--> ...sólo para lo...

Párrafos y saltos de línea En este tema vamos a tratar y a explicaros los párrafos y los saltos de línea en html. Porque debemos saber que en html los saltos de línea, es decir, los espacios que hagamos en el código no son interpretados de tal forma. En html para dejar un salto de línea debemos utilizar una serie de etiquetas, de código, que el navegador interpretará cómo tal. Esas etiquetas son <br/> </p> o </pre>. A continuación te explicaremos cada una de ellas. Saltos de línea HTML Ya os hemos comentado anteriormente que en html los saltos de línea escritos en código no son tal una vez el navegador interpreta el código. Vamos a explicaros esto con un claro ejemplo: Puedes escribir un texto como este y el navegador no lo interpretará así Y se verá así: Puedes escribir un texto como este y el navegador no lo interpretará así Existen dos etiquetas para indicar que queremos hacer un salto de línea normal. Son las etiquetas <br> y <br/> ambas son interpreta...