En esta cuarta parte veremos como insertar imagenes en html o en nuestros sitios web y veremos un poco mas sobre el formato de textos....
El html nos permite insertar imagenes por medio de una tag especial sin cierre que es... <img /> dicha tag tiene los siquientes atributos:
src: indica la url de donde se encuentra la imagen o archivo.... comple con las mismas reglas que el atributo href de la tag <a> y es sensible a rutas relativas y absolutas...
width: indica el ancho de la imagen en pixeles
heigh: indica el alto de la imagen en pixeles
alt: indica una descripcion para la imagen por si ocurre un error y no carga bien.. tambien sirve como recurso para mejorar la accesibilidad del sitio web a personas con dificultades visuales o invidentes.
border: indica si la imagen tendra un border su valor sera un numero entero o vacio
veamos un ejemplo practico
---------------------------------------------
<html>
<head>
<title>Ejemplo de imagenes en HTML</title>
</head>
<body>
<img src="imagen.jpg" width="100" heigh="100" alt="Descripcion de tu imagen" border="1" />
<p>imagen en HTML</p>
</body>
</html>
----------------------------------------------
si creas un directorio llamado pagina y dentro de este poner una imagen llamada imagen.jpg y de tal manera que quede asi: pagina/imagen.jpg y guardas este ejemplo como loquequieras.html y lo pones dentro de la carpeta pagina podras ver el resultado...
El html tambien nos permite mostrar un enlace como imagen poniendo la tag img dentro de las tags a esto se conoce como hipermedia....
veamos un ejemplo practico
---------------------------------
<a href="http://www.google.com"><img src="logo_google.jpg" /></a>
---------------------------------
Veamos ahora mas sobre el texto....
existe una tag llamada <blockquote> la cual permite insertar una frase de texto citado y nos lo muestra destacado por medio de un ligero sangrado....
veamos un ejemplo practico...
------------------------------------
<html>
<head>
<title>Ejemplo de uso de blockquote</title>
</head>
<body>
<blockquote>
Todo lo que se llama estudiar y aprender, no es otra cosa mas que recordar
<br />
<br />
<i>"Platon: filosofo griego"</i>
</blockquote>
</body>
</html>
------------------------------------
Ahora guarda el ejemplo como loquequieras.html y podras ver en chrome el ejemplo...
El html tambien nos permite poner una serie de texto en forma de titulares o cabeceras...
Para esto el HTML nos porporciona una tag <hx> donde x representa un numero del 1 al 6 donde menor es un titulo mayor y mayor es un titulo menor... por ejemplo: <h1>, <h2>, <h3>, <h4>, <h5> y <h6>
veamos un ejemplo practico...
----------------------------------
<html>
<head>
<title>Ejemplo de uso de cabeceras en HTML</title>
</head>
<body>
<h1>Cabecera de primer nivel</h1>
<h2>Cabecera de segundo nivel</h2>
<h3>Cabecera de tercer nivel</h3>
<h4>Cabecera de cuarto nivel</h4>
<h5>Cabecera de quinto nivel</h5>
<h6>Cabecera de septimo nivel</h6>
</body>
</html>
----------------------------------
si guardas este ejemplo y lo ves en un navegador podras ver algo como esto.
Cabecera de primer nivel
Cabecera de segundo nivel
Cabecera de tercer nivel
Cabecera de cuarto nivel
Cabecera de quinto nivel
Cabecera de septimo nivel
Como puedes ver esta tag nos permite generar una serie de titulos en negrita y en diferentes tamaños.
Bueno hasta aqui llega este cuarto tutorial de HTML. Recuerden practicar todo lo aprendido saludos....
El html nos permite insertar imagenes por medio de una tag especial sin cierre que es... <img /> dicha tag tiene los siquientes atributos:
src: indica la url de donde se encuentra la imagen o archivo.... comple con las mismas reglas que el atributo href de la tag <a> y es sensible a rutas relativas y absolutas...
width: indica el ancho de la imagen en pixeles
heigh: indica el alto de la imagen en pixeles
alt: indica una descripcion para la imagen por si ocurre un error y no carga bien.. tambien sirve como recurso para mejorar la accesibilidad del sitio web a personas con dificultades visuales o invidentes.
border: indica si la imagen tendra un border su valor sera un numero entero o vacio
veamos un ejemplo practico
---------------------------------------------
<html>
<head>
<title>Ejemplo de imagenes en HTML</title>
</head>
<body>
<img src="imagen.jpg" width="100" heigh="100" alt="Descripcion de tu imagen" border="1" />
<p>imagen en HTML</p>
</body>
</html>
----------------------------------------------
si creas un directorio llamado pagina y dentro de este poner una imagen llamada imagen.jpg y de tal manera que quede asi: pagina/imagen.jpg y guardas este ejemplo como loquequieras.html y lo pones dentro de la carpeta pagina podras ver el resultado...
El html tambien nos permite mostrar un enlace como imagen poniendo la tag img dentro de las tags a esto se conoce como hipermedia....
veamos un ejemplo practico
---------------------------------
<a href="http://www.google.com"><img src="logo_google.jpg" /></a>
---------------------------------
Veamos ahora mas sobre el texto....
existe una tag llamada <blockquote> la cual permite insertar una frase de texto citado y nos lo muestra destacado por medio de un ligero sangrado....
veamos un ejemplo practico...
------------------------------------
<html>
<head>
<title>Ejemplo de uso de blockquote</title>
</head>
<body>
<blockquote>
Todo lo que se llama estudiar y aprender, no es otra cosa mas que recordar
<br />
<br />
<i>"Platon: filosofo griego"</i>
</blockquote>
</body>
</html>
------------------------------------
Ahora guarda el ejemplo como loquequieras.html y podras ver en chrome el ejemplo...
El html tambien nos permite poner una serie de texto en forma de titulares o cabeceras...
Para esto el HTML nos porporciona una tag <hx> donde x representa un numero del 1 al 6 donde menor es un titulo mayor y mayor es un titulo menor... por ejemplo: <h1>, <h2>, <h3>, <h4>, <h5> y <h6>
veamos un ejemplo practico...
----------------------------------
<html>
<head>
<title>Ejemplo de uso de cabeceras en HTML</title>
</head>
<body>
<h1>Cabecera de primer nivel</h1>
<h2>Cabecera de segundo nivel</h2>
<h3>Cabecera de tercer nivel</h3>
<h4>Cabecera de cuarto nivel</h4>
<h5>Cabecera de quinto nivel</h5>
<h6>Cabecera de septimo nivel</h6>
</body>
</html>
----------------------------------
si guardas este ejemplo y lo ves en un navegador podras ver algo como esto.
Cabecera de primer nivel
Cabecera de segundo nivel
Cabecera de tercer nivel
Cabecera de cuarto nivel
Cabecera de quinto nivel
Cabecera de septimo nivel
Como puedes ver esta tag nos permite generar una serie de titulos en negrita y en diferentes tamaños.
Bueno hasta aqui llega este cuarto tutorial de HTML. Recuerden practicar todo lo aprendido saludos....