Formatos de imagen soportados en la web

Formatos de imagen


Los diferentes formatos de imagen que se usan para páginas web, para elegir el que mejor se adapte a nuestras necesidades.

Imágenes en HTML

Imágenes

Las imágenes son una parte muy importante en una página web porque pueden darle estilo y personalidad a tu sitio, pero también el poner imágenes de gran tamaño o saturar la página con ellas ocasionara que el navegador tarde demasiado en cargarla y el usuario pierda interés y se aleje.

Marquesina y Sangría

Marquesina
Las marquesinas no son más que texto desplazándose de un lado a otro de la página colocándolo dentro de la etiqueta <marquee></marquee> que puedes controlar el movimiento del texto con diferentes atributos:

Con behavior puedes controlar el tipo de movimiento con el valor alternate el texto ira de lado a lado de la ventana rebotando en cada uno de ellos, con scroll ira de un lado a otro continuamente o con slide ira de un lado a otro aunque solo será una vez.

Etiqueta Font

Para tener más control sobre la apariencia del texto se usa la etiqueta <font> </font> que tiene diferentes atributos (face, size, color).




<font face = "times" > </font> controla la fuente del texto


<font size = "5" > </font> controla el tamaño del texto


<font color = "blue" > </font> controla el color del texto


Es posible combinarlos <font face = "times" size = "5" color = "red" > Ejemplo Combinado </font> Ejemplo Combinado

En donde podemos colocar el nombre del color pero el nombre tiene que ser en ingles.Los colores aceptados son: Black (negro), white (blanco),green (verde), maroon (marron rojizo), olive (verde oliva), Navy (azul marino), purple (violeta), red (rojo), yellow (amarillo), blue (azul), teal (verde azulado), lime (verde lima), aqua (azul claro), fuchsia (fusia), silver (gris claro).

Tambien puedes colocar el equivalente del color en formato hexadecimal <font color = #993366 > Color del texto </font> Color del texto

En esta tabla se muestran algunos códigos hexadesimales para colores usados en web

Listas

Listas
Las listas de texto se forman con la etiqueta <li></li> se ponen los elementos de la lista dentro de la etiqueta<ul></ul> que mostrara la lista como la hemos hecho o dentro de la etiqueta <ol></ol> que enumera en orden los elementos de la lista.

<ul> Lista con <ul>
<li>Articulo 1</li>
<li>Articulo 2</li>
<li>Articulo 3</li>
</ul>

Lista con <ul>
• Articulo 1
• Articulo 2
• Articulo 3

<ol> Lista con <ol>
<li>Articulo 1</li>
<li>Articulo 2</li>
<li>Articulo 3</li>
</ol>

Lista con <ol>
1. Articulo 1
2. Articulo 2
3. Articulo 3

Lineas Divisoras


Las líneas divisoras se crean con la etiqueta <hr> no tiene cierre y tampoco lleva texto asociado, se puede especificar el ancho de la línea con un atributo.


Ej.


<hr width = 20%>

---

<hr width = 40%>

---

<hr width = 60%>

---

<hr width = 80%>

---

Texto y Encabezados

Texto y Encabezados

Texto

El texto en la web normalmente se encuentra formando párrafos y encabezados, pero no  basta solo con escribir  como si se tratara de un editor de texto, sino que hay que darle formato a través de etiquetas, por ejemplo cuando estamos escribiendo y presionamos ENTER lo que sucede es que crea un salto de línea, al momento de escribir el código de un HTML en un editor de texto veremos que sucede lo mismo en el código, la diferencia resalta al momento en el que el navegador interprete ese código, porque no se verá con el formato que vimos en el editor de texto, solo se verá una línea de texto sin el salto de línea que habíamos puesto.

Existe código para encabezados, listas, modificar el color, tamaño y fuente del texto, también poner marquesinas, y poner sangría.

Encabezados

Los encabezados se usan para poner títulos a los escritos que pongas en tu web, existen 6  tamaños de encabezados que van desde el h1 que es el más grande hasta el h6 que es el más pequeño.

<h1>Encabezado 1</h1> <h2>Encabezado 2</h2> <h3>Encabezado 3</h3> <h4>Encabezado 4</h4> <h5>Encabezado 5</h5> <h6>Encabezado 6</h6>

Los párrafos de texto se forman con la etiqueta <p></p>

Salto de línea en el texto se hace con la etiqueta <br> no tiene cierre

Texto en negritas se usa la etiqueta <b></b> Ejemplo

Texto cursivo con la etiqueta <i></i> Ejemplo

Texto subrayado se hace con la etiqueta  <u></u> Ejemplo

Texto tachado con la etiqueta  <s></s> Ejemplo

Estos elementos se pueden modificar en apariencia con estilos CSS. Por ejemplo el estilo CSS de este blog para el encabezado <h2> quedaría de la siguiente manera, en cambio el que se muestra en la figura de arriba es de un HTML sin estilos CSS

Encabezado <h2> con estilo CSS

Etiquetas HTML

Etiquetas HTML

Las etiquetas son delimitadores del contenido de una página web, es decir, que los elementos que nosotros pongamos en nuestra página se mostraran según la etiqueta que estemos usando. Existen dos tipos de etiquetas, la abre o de comienzo    y la de cierre que indica cuando una etiqueta se está cerrando para dar fin al segmento donde está trabajando dicha etiqueta.

Toda etiqueta que se abre deberá ser cerrada, si una etiqueta no se cierra el navegador no podrá interpretar correctamente la página.

Estructura de una pagina HTML

Primero que nada, toda página necesita de una estructura en su código, no se trata de poner  etiquetas sin orden.

<HTML></HTML>

Primero tenemos la etiqueta <html> y </html> que es la que indica el comienzo del código HTML y dentro de ella todo el contenido de la web.

<HEAD></HEAD>

La cabecera se forma con las etiquetas <head> y </head> donde colocamos etiquetas como <TITLE> y <META> entre otras que son elementos opcionales. Elementos que contienen información general o meta-información acerca de un documento.

<TITLE></TITLE>

El titulo siempre va dentro de la etiqueta <head> indica el título que aparecerá en la barra de título del navegador, además de que es utilizado al poner la página en los favoritos, por lo que debemos ser claros ni utilizar otras etiquetas o títulos muy extensos.

<META>

La etiqueta de metadatos <meta> se usa para poner información sobre el contenido, los metadatos sobre el contenido, materia, autor, etc. Ayudan a que tu página sea encontrada por más gente en los buscadores.

<BODY></BODY>

Es el cuerpo de la web donde pondremos todo el contenido debajo de la cabecera y hasta el final de la página.

Ejemplo sencillo de una web.

<html>
<head>
<title>Mi primera pagina web</title>
</head>
<body>
Hola mundo!
</body>
</html>

?

Copia el código en el bloc de notas y guárdalo con el nombre que quieras pero al final añádele ".html" ej. hola.html, se guardara como una pagina web y la podrás abrir con tu navegador.

Compatibilidad con Navegadores

Compatibilidad con Navegadores

El navegador instalado en la computadora del usuario es el que interpreta el código HTML de la página que visita por lo que a veces puede ocurrir que dos usuarios visualicen la misma página de forma distinta porque tienen instalados navegadores distintos o incluso versiones distintas del mismo navegador.

Editores HTML

HTML

El HTML, Hyper Text Markup Language o Lenguaje de Marcación de Hiper Texto, es el lenguaje con el que se definen las páginas web, básicamente se trata de un conjunto de etiquetas que sirven para definir el texto y otros elementos que  compondrán una web, solo basta un simple editor de texto para poder crear una página web, los archivos HTML tienen la extensión .html o .htm que es el formato básico o más común que usan las páginas web y se puede ver el resultado en cualquier navegador web.

Versiones del lenguaje HTML

Versiones del lenguaje HTML

El codigo HTML desde que fue desarrollado por  Tim Bernes-Lee en el CERN (Centro Europeo de Física de Partículas) ha ido evolucionando y hasta ahora tenemos 5 versiones.