Inclusion de imagenes en la pagina web

Incluir imágenes a una web es algo fundamental, hoy en día la gran mayoría de webs tienen imágenes, es extraño encontrarse una web compuesta únicamente por texto.

Para incluir una imagen en nuestro sitio se utiliza el siguiente código:

<img src="url de la imagen">
ej:
<img src="http://lh5.ggpht.com/_RuWkw9bGRW8/S7sqf0y-nUI/AAAAAAAAAhg/HZW7dGbhu34/led.jpg">
ej:


Aun que hemos conseguido lo que buscabamos que era mostrar una imagen en nuestra web, no lo estamos haciendo bien, de esta forma no debe hacerse, hay que darle un atributo, este atributo "alt".
La función de esta etiqueta es mostrar un texto en caso de que la imagen no este disponible.

ej:


Al estar mal introducida la url de la imagen muestra el nombre, de otra forma no se mostraría nada.

Con esto ya podríamos poner imágenes en nuestra web sin ningún problema, bueno tendríamos que hacer las imágenes de la resolución precisa ya que se muestran a tamaño real, en la siguiente entrada explicare como redimensionar las imágenes y como colocarlas en la pantalla.

Efecto sobre texto III

Bueno ahora veremos como podemos colocar el texto dentro de una pagina web, para ello utilizaremos los siguientes atributos:

align="right"
align="center"
align="left"

Estos atributos pueden ser utilizados con varias etiquetas, normalmente se utilizan con <div> o con <p>
su uso seria asi:
<div align="left"> texto</div>

texto alineado a la izquierda

<div align="center"> texto</div>

texto centrado

<div align="right"> texto</div>

texto alinado a la derecha

En la siguiente entrada empezare con la colocación de los < div > dentro de la pantalla, integracion de imagenes etc...

Disculpar el tiempo de stop espero seguir un poco el ritmo a partir de ahora

efectos sobre el texto II

Continuando la anterior entrada que estábamos ablando de las modificaciones que podia sufrir un texto.

Antes de continuar tengo que explicar una cosa.
Las etiquetas no siempre son iguales, con esto quiere decir que hay etiquetas que tienen unas características, por ejemplo <font> no hace nada sola pero se le pueden incluir atributos como tamaño, color...
Estas características se introducen de la siguiente manera:
<font atributo=valor> el cierre es siempre la etiqueta sin características </font>
ej.
<font size=36px> texto </font>El texto de dentro de esta etiqueta se vera afectado por la característica que va después de font, en este caso es size.

Los atributos utilizados en font son:

Size=> esta tiene dos formas de uso, puede usarse como <h1> pero de 1 a 7 y tambien poniendo el tamaño en pixeles seguido de px.
<font size=3>texto tamaño 3</font> => este seria el primer uso.
<font size=36px> texto de 36px</font> => este seria el segundo uso.
los resultados serian:
texto tamaño2 => primer uso.
texto de 36px => segundo uso.

Color=> como su propio nombre indica da color, también se puede usar de 2 formas, utilizando el código del color en hexadecimal o también hay algunos colores en ingles predefinidos, los aceptados son:
Black, white, green, maroon, olive, Navy, purple, red, yellow, blue, teal, lime, aqua, fuchsia y silver.
<font color=yellow> amarillo </font> quedaría así => amarillo
<font color="#32d28b">hola</font> quedaría color hexadecimal

Face=> indica el tipo de letra, se utiliza de forma similar a los anteriores.
<font face="tipo de letra">letra especial</font> vale cualquier tipo de letra, siempre y cuando la persona que ve la web la tenga instalada en su ordenador.
El resultado seria: texto se pueden poner varios tipos de letra separadas por , en caso de que la primera no este disponible pasa a la segunda y asi sucesivamente. con varios tipos de letra quedaría así: <font face="times new roman, arial"> texto </font> todos los tipos de letra ya sea uno o varios tienen que ir entre 2 comillas dobles, quedaría "tipo de letra" es importante para respetar el estándar web, aun que el navegador lo interpreta igual.

Otra cosa importante de saber es poner hipervinculos, los hipervinculos son redirecciones a otras paginas, al pinchar en el te manda a otra pagina

efectos sobre el texto I

Bueno en esta entrada explicaré como poner texto en HTML.

Para empezar diré que muchas de las cosas aquí explicadas están mejor hechas mediante CSS pero es, por así decirlo, mas complicado y prefiero ir explicando las cosas paso a paso como yo las aprendí.
Son muchas las etiquetas así que lo dividiré en varias entradas entradas.

Las etiquetas principales que se usaran para dar "efectos" a un texto son:

<h1>

h1

Se usa para el título
<h2>

h2

Para el subtítulo
<h3>

h3

Menos importancia
<h4>

h4

Menor importancia todavía
<h5>

h5

Menos importancia

Las etiquetas hx siendo x un numero entre 1 y 5 se utilizan para dar mas o menos importancia a las distintas partes de un texto. El equivalente en un periódico seria, h1 el tamaño del titular mientras que el h5 seria el utilizado para poner los autores de los artículos de opinión o las ventas de segunda mano.

<b> esta etiqueta da efecto de negrita. => ej. negrita
<i> esta etiqueta da efecto cursiva. => ej. cursiva
<u> esta etiqueta da efecto subrayado. => ej. subrayado
<strike> esta etiqueta da efecto de tachado. => ej.tachado
<sub> esta etiqueta da efecto de sub indice. => ej. _subindice
<sup> esta etiqueta da efecto de super indice. => ej. ^superindice
<tt> esta etiqueta da efecto de teletipo. => ej. teletipo

Una etiqueta importante en html es
normalmente mal utilizada ya que según el estándar web debe de utilizarse
esta etiqueta es un salto de linea.
en html es lo mismo escribir:

<b>este
texto
es de
prueba.
</b>
que escribir:
<b>este texto es de prueba.</b>
ambos mostrarian en el navegador:
este texto es de prueba.

Sin embargo utilizando
que es un salto de linea quedaria algo asi:

<b>primera linea <br/> segunda linea <br/> tercera linea</b>
primera linea
segunda linea
tercera linea

Bueno hasta aquí esta entrada en la siguiente seguiré explicando las distintas etiquetas que se pueden utilizar con un texto y los resultados que se consiguen.

Lo principal en HTML

Bueno hoy enseñare lo básico que hay que saber para empezar una web.

Un archivo HTML siempre tiene las siguientes etiquetas, son etiquetas obligatorias sin ellas no funciona.
Esas etiquetas son

<HTML> esta etiqueta indica al navegador que lo que va a leer es HTML y tiene que interpretarlo como tal.
<head> esta etiqueta sirve para agrupar enlaces externos y metas* identificativos
<title>lo que se encuentra dentro de esta etiqueta se muestra en la barra del navegador o la pestaña, es decir esta etiqueta sirve para indicar el titulo de la web."no obligatoria"
</title> cierra el titulo "fíjese lo explicado anteriormente de respetar el orden de anidación".
<head> cierra la etiqueta head.
<body>esta etiqueta indica que empieza el cuerpo de la pagina, es decir, lo que muestra el navegador.
(aquí iría el código de la pagina)
</body> cierra el cuerpo de la pagina.
</html> cierra el código HTML.

Ya esta claro lo mínimo que tiene que tener una pagina web, para hacer un hola mundo en HTML seria tan sencillo como:

<html>
<head>
</head>
<body>
hola mundo
</body>
</html>

el navegador al introducir una dirección web "www.pagina.com" lo que en realidad hace cargar "www.pagina.com/index.extensión" esta extensión puede variar, puede de si es html u otro lenguaje. HTML puede guardarse como htm o html.

*las meta-datos son datos sobre datos es decir da información sobre lo que se encontrará después y también puede indicar como comportarse al encontrar los datos.
Por ejemplo se utiliza para meter las keywords es decir palabras con las que el buscador relaciona la pagina web.

¿Que es html?

Bueno antes de empezar a programar en el tendremos que saber qué es el HTML.

El HTML significa "HyperText Markup Language" que viene a decir que es un lenguaje de marcas de hipertexto. Se dice que es un lenguaje de marcas porque funciona con etiquetas, tú metes texto dentro de una etiqueta y a ese texto se le aplica la etiqueta.

ej:
<b>texto</b>"la palabra texto apareceria en negrita" => texto

Como podéis comprobar es de estructura muy simple, todas las paginas webs están hechas en mayor o menor medida en HTML, dentro de HTML se pueden incluir otros lenguajes, PHP, CSS, JS... pero la base es siempre HTML.
Cuando tengo que explicar lo que es HTML digo esto:

HTML es la hoja del cuaderno, en ella puedes escribir, luego CSS es como escribir con distintos lapices y colorines (estilo y color) y luego PHP y JS le da funciones de ordenador, operar y mandar cosas de una hoja a otra etc...

Un mismo texto puede estar influido por varias marcas

ej:
<b><strike>texto</strike></b> "el texto aparece en negrita y tachado" => texto

Cabe añadir que las etiquetas deben cerrarse en orden inverso a como se abrieron, osea tengo que cerrar el ultimo abierto antes de cerrar uno anterior. No pueden estar cruzadas las etiquetas. A esto se le llama respetarse el orden de anidación.

Saludos

Hola, este blog lo comienzo siendo un novato en esto de la programación web estoy empezando con una web e iré poniendo lo que voy aprendiendo y explicándolo de forma fácil de entender para que todo aquel que empiece una web como yo tenga un sitio sencillo donde aprender, yo por ejemplo e tenido que visitar múltiples paginas y preguntar a mucha gente también.

Aquí intentare ir explicando html en un principio y mas tarde css, php o js dependiendo de lo que valla necesitando para mi web.

La actualización de las entradas no creo que sea muy regular ya que como estudiante y adolescente tengo meses mas activos mientras que otros apenas tengo tiempo para nada aun así no tengo pensado finalizar mi pagina web próximamente y por lo tanto no tengo pensado acabar con el blog.

cualquier sugerencia gizbop@gmail.com