lupitatutoriales
Usuario (México)
En el Tutorial anterior vimos que el sistema de HTML nos permite crear sitios web como una forma de representar la informacion... Vimos que el HTML se compone de etiquetas basicas de texto simple, creadas por medio de los simbolos < y >.El HTML nos permite tambien agregar una serie de atributos o propiedades a las tags. Esto se hace en le etiqueta de inicio asi... <p color="red">texto de color rojo</p> las tags p's nos permiten generar un texto en forma de parrafo y con el atributo color le podemos cambiar el color al parrafo. en este caso usamos el valor de 'red' para el atributo color.<p color="red">texto de color rojo</p> esto se puede leer como: quiero un parrafo de texto normal pero con el color rojo.el formato de los atributos que nos proporciona el HTML es el siguiente... dijo:<etiqueta atributo1="valor1" atributo2="valor2" atributoN="valorN">Contenido normal de la etiqueta</etiqueta>[/quote] siempre se debe de respetar el formato de atributo="valor" todo en minusculas y encerrar el valor entre comilla doble. Veamos un ejemplo practico....__________________________________<html> <head> <title>Ejemplo de uso de atributos en HTML</title> </head> <body> <p color="red" align="center">ejemplo de texto centrado gracias al atributo align y de color rojo</p> </body></html>__________________________________si guardamos este ejemplo en el bloc de notas de windows como loquequieras.html y lo habrimos en un navegador de internet como mozilla o chrome... veras algo como esto en la pantalla.ejemplo de texto centrado gracias al atributo align y de color rojotambien podemos lograr el mismo resultado sin usar el atributo align, gracias a las tags <center> y </center>dijo:<center><p color="red">texto de ejemplo pero sin atributo align</p></center>[/quote]Una cosa muy importante de HTML es el anidamiento correcto de las tags.. si ves el ejemplo de arriba ves que iniciamos con una tag <center> y una tag <p> entonces debemos de acabar con una tag </p> y despues una tag </center>. primera tag que habrimos ultima tag que cerramos.Los saltos de lineaPara hacer que el cursor de un salto de linea y empezar a escribir otro parrafo o texto desde otra linea debemos de usar la tag <br />como puedes ver esta es una de las tags especiales las cuales no tiene cierre veamos un ejemplo practico sobre el uso de esta tag.-------------------------------------------------<html> <head> <title>Ejemplo de uso de BR</title> </head><body> Vamos a separar estos dos textos gracias al uso de la tag BR saludos para los tarinqueros.<br /> Vamos a separar estos dos textos gracias al uso de la tag BR saludos para los tarinqueros </body></html>----------------------------------------------------------------Si guardas este ejemplo como lo hemos venido haciendo con la extension .html veras que los dos textos se han separado uno debajo del otro, pero si quitas el tag <br /> el texto continuara hasta que se corte..Barras HorizontalesEl HTML nos permite tambien generar una barra separadora horizontal, esto se logra con otra de las tags especiales que son sin cierre, la tag <hr />.Veamos un ejemplo practico..._______________________________<html><head> <title>Ejemplo practico con el uso de HR</title></head><body> <p>El codigo Da Vinci</p> <hr /> <p> El Autor Dan Brown logro hacerse famoso gracias a esta fantastica novela que relata la historia del santo grial y la verdad oculta... con su mitico personaje Robert Landon..</p></body></html>_________________________________si guardas este ejemplo como lo hemos estado haciendo loquequieras.html y lo ves en el navegador podras ver el texto y el titulo separados por una linea horizontal...<title>Seguramente ya te has estado preguntando para que sirve la etiqueta <title> si el usuario no la puede ver (recuerdas que el usuario o visitante de tu pagina solo puede ver lo que esta dentro del body..) pues esta tag sirve para poner informacion tecnica de la pagina web...El tag title nos permite poner un titulo a la ventana o pestaña del navegador mientras visita nuestra pagina... si te fijas el title de taringa es: Taringa! - Inteligencia Colectiva....Bueno hasta aqui llega este segundo tutorial de HTML recuerden practicar y practicar lo mas posible lo aprendido...
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 pixelesheigh: indica el alto de la imagen en pixelesalt: 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 vacioveamos 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 nivelComo 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....
En esta siguiente parte conoceremos sobre los colores en html y el uso de estos....Seguramente te has estado preguntando sobre como podemos agregar mas color a nuestras paginas bueno... el html nos permite una serie de atributos que se aplican a varias etiquetas y aceptan varios valores, los atributos son los siguientes con su respectivo uso.bgcolor: este atributo se pone en la tag de body de inicio por ejemplo <body bgcolor="valor"> .... </body> y sirve para ponerle un color de fondo a la pagina.color: se aplica a la tag <font> <p> <a> y hasta a la tag <hr /> sirven para poner el color al texto, enlace o a la barra separadora que se genera con <hr />.bordercolor: sirve para poner un color al borde de las imagenes y de las tablas (en el siguiente tutorial hablaremos sobre las tablas).ahi que decir que algunos atributos como bgcolor y bordercolor no es muy recomendable usarlos ya que ya estan casi obsoletos y en cambio ahora gracias al css ( Hojas de estilo en cascada que mas adelante hare otro tutorial sobre CSS ) se puede dar un mejor formato al html. aun que es factible que lo usen solamente los que apenas inician en esto... y solamente con el fin de iniciarse y que puedan entender como funciona un sitio web, en mi opinion.el html nos proporciona dos metodos para insertar colores que son: una por medio del nombre y otra por medio del codigo hexadecimal del color.nombre:generalmente es el nombre del color en ingles como rojo-red, verde-green, amarillo-yellow etc etc. por ejemplo:----------------------------------------<p color="red">este texto esta en color rojo.</p>o poner el fondo de color verde<body bgcolor="green"> ..... </body>----------------------------------------aqui una pequeña lista de colores con sus traducciones al ingles y que podemos usar para html:----------------------------verde - greenrojo - redazul - blueamarillo - yellowblanco - whitenegro - black rosa - pink gris - graycabe decir que si usamos el metodo de poner el color por medio del nombre puede que algunos navegadores interpreten distintos tonos a cada color y por eso se recomienda usar mejor el sistema hexadecimal. ----------------------------------------Color por Codigo hexadecimal:Los colores en HTML son construidos usando una combinación de tres colores básicos: rojo, verde y azul. Cada uno de estos colores toma un valor entre 0 y 255 y son representados en notación hexadecimal (00 a FF). De esta forma, un color está compuesto por seis caracteres donde los dos primeros representan el valor para el rojo, los dos segundos representan el valor para el verde y los dos terceros representan el valor para el azul (por ejemplo, el rojo tiene FF para el valor rojo y 00 para el resto: "FF0000". Para poder usar este codigo hexadecimal en HTML lo unico que falta es usar el simbolo # (gato, almohadilla o asterisco). veamos un ejemplo practico.<p color="#FF0000"> texto en color rojo </p>Puede que paresca un poco dificil de memorizar este sistema de codigos hexadecimales por eso les dejo aqui un enlace que ofrece un sistema para escojer un color y te genera el codigo hexadecimal correspondiente.enlace: http://html-color-codes.info/codigos-de-colores-hexadecimales/Bueno hasta aqui llega este pequeño tutorial.. recuerden practicar y practicar... en el siguiente tutorial veremos como insertar tablas en html.
Hola estos son 3 wallpapers que e hecho asi rapidito para compartirlos con ustedes.. para geeks programadores... burbujas de amor... y amor minimalista...
Hola amigos aqui les envio unos wallpapers para informaticos o programadores. ----------- Barra separadora economica ----------- ----------- Barra separadora economica ----------- ----------- Barra separadora economica ----------- ----------- Barra separadora economica ----------- ----------- Barra separadora economica ----------- ----------- Barra separadora economica ----------- ----------- Barra separadora economica ----------- ----------- Barra separadora economica ----------- Estos wallpapers son de mi autoria. pueden recompartir y usarlos como ustedes quieran, espero les gusten y les inspiren para sus proyectos cuando esten programando.. saludos. proximamente mi sitio web. tutosdev.com saludos...