Hola hoy les traigo una explicación acerca de la programación web con HTML para empezar veremos algunos elementos y sus atributos más importantes así como atributos generales.
Debemos saber cómo se estructura un elemento y que es un elemento anteriormente habíamos definidos algunos conceptos si no lo has visto te puedes pasar aquí te dejo el link por si deseas verlo
Les hago un mini resumen la estructura básica había quedado así
<html>
<head>
<title>Aquí va el título del texto </title>
</head>
<body>
Hola Mundo
</body>
</html>
Bueno ese era un programa básico que mostraba hola mundo y un título el cual era “Aquí va el título del texto” pues debemos saber que hay más elementos:
¿Bueno pero como empezamos a escribir textos, poner imágenes enlaces?
Buena pregunta pues para escribir texto se usa la etiqueta
<p>Y el texto que quiera aquí adentro</p>
Para escribir negrita
<b>texto en negrita</b>
Para escribir en cursiva
<i>texto en cursiva </i>
Tachar texto
<strike> texto tachado</strike>
Salto de línea
Salto de <br>
línea
Ahora veamos cómo poner imágenes en nuestra página primero tenemos que definir algunos conceptos
<elemento atributo="valor"></elemento>
Los elementos son predefinidos es decir que ya existen son ejemplo html head prácticamente todo lo que vemos entre <>
Los atributos nos permitirán agregarle características a los elementos
Y el valor lo que pongamos acerca de la características veamos la práctica
Imágenes en html
El elemento img
<img src="ubicación de la imagen.extensión" width=20px height=120px alt="texto alternativo " >
img:hace referencia a una imagen
src: es la ubicacion de la imagen podemos extraerla directamente desde nuestra PC u obtenerla con la dirección de un sitio web
width: establece la anchura de la imagen
height: establece la altura de la imagen
alt: muestra un texto en caso de no cargarse la imagen
Nota: hay que respetar las comillas en los valores de los atributos es obligatorio si queremos que nuestro documento funcione.
Veis que sencillo es pero será igual crear enlaces compruébelo usted mismo.
Creare un ejemplo muy básico de una imagen en la web que nos sea de ayuda utilizaremos una que no posea derechos de autor para no tener problemas veamos
<img src="https://images.pexels.com/photos/1363876/pexels-photo-1363876.jpeg" width=100px height=100px alt="imagen de paisaje">
Bueno ese fue el código y aquí está el ejemplo:
Enlaces HTML
El elemento a:
<a href="enlace de la web">Aquí va el nombre del enlace</a>
Podemos darnos cuenta que el elemento a tiene un atributo href con el valor donde quiero que me lleve la web entre las etiquetas ponemos el texto de nuestro enlace.
Pongámoslo en práctica agreguemos el siguiente código para adaptarnos a las circunstancia quiero crear un enlace que me lleve a la página principal de mi blog
<a href="https://filowebs.blogstop.com" title="pulsa para ir">Pulsa para ir a la página principal </a>
Resultado.
Es muy sencillo crear un enlace veis
En resumen
href:en el elemento a nos permite crear un enlace cuyo atributo va a ser la web a la que deseemos enlazarnos
Para centrar los elementos dentro de las etiquetas center
<center>elementos centrados</center>
Ahora definamos algunos atributos generales
title:nos da una descripción del elemento al poner el mouse encima
Ejemplo
<img src="dirrecion de la imagen" width=100px height=100px title="Esto es una imagen">
class:este elemento establece una clase digamos que sería en la vida diaria las clases sociales de la civilización humana le podemos poner el nombre que queramos por lo general este atributo se usa como selector de todos los elementos que tengan pertenezcan a esa clase en el lenguaje de estilos CSS y el de scripts JavaScript.
id:al igual que los dos anteriores a este atributo el valor se lo daremos nosotros y digamos que este atributo es un identificador que al contrario de las clases solo existe uno en el documento un ejemplo en la vida del ser humano seria nosotros mismos somos únicos tenemos lo que nos caracteriza es decir un identificador, en el desarrollo web se usa como selector especifico ya que solo un elemento podrá poseer un id con su nombre especifico en el lenguaje de estilos CSS y el de scripts JavaScript .
style:permite agregar CSS en línea directamente al elemento sin usar clases ni id.
Espero que les haya servido estos elementos posteriormente seguiré publicando más elementos de HTML pero pienso hacer más énfasis porque creo que su comprensión es más importante.
Si te gusto esta información puedes visitar la página principal de mi blog existe contenido interesante.
Comentarios
Publicar un comentario