Etiquetas
Etiquetas <h1> - <h6>
Las siguientes etiquetas permiten la definición de encabezados o títulos dentro del documento web.
La etiqueta se representa mediante las etiquetas, siendo X un número entre 1 y 6, que establece el nivel del encabezado.
Se utilizan para encerrar párrafos de texto; los usaremos frecuentemente para el marcado de contenido de texto.
Etiqueta <ul>
Permite definir una lista desordenada (“Unordered List”). Esta etiqueta es a su vez contenedora de otras etiquetas, siendo estas últimas las que componen cada uno de los elementos de los que está compuesta la lista.
Para especificar un elemento en la lista se ha de utilizar la etiqueta <li> </li>, en la que se ha de especificar el texto que compone el elemento de la lista.
Etiqueta <ol>
Permite definir listas o viñetas ordenadas (“Ordered List”), bien con numeración o alfabéticamente.
Para especificar un elemento en la lista se ha de utilizar la etiqueta <li> </li>, en la que se ha de especificar el texto que compone el elemento de la lista. Una lista puede contener como elemento de lista, otra lista, es decir se pueden crear listas anidadas.
Si uso <ol type="A"> estoy indicando que deseo usar letras en vez de números . Probar type="a" y type= "I"
Etiqueta <a>
Sirve para definir y crear un hiperenlace, el cual permite realizar enlaces del documento web con otros documentos o recursos disponibles. Los navegadores suelen visualizar los enlaces con una serie de colores predefinidos, aunque estos se pueden cambiar.
Los enlaces no visitados se visualizan normalmente con el color azul, los enlaces visitados con el color púrpura y por último los enlaces activos mediante el color rojo.
Por defecto al pulsar sobre un enlace, el contenido al cual se está accediendo se ha de mostrar en la misma ventana del navegador, sustituyendo el documento web actual por el que se quiere acceder.
La sintaxis de la etiqueta a usa los atributos href y target.
- href: Este atributo permite establecer la URL en la que se encuentra el documento el cual se quiere enlazar, con el documento web.
- target: El atributo permite especificar el destino por defecto para todos los enlaces. El más común es: _blank que especifica que el destino sea una nueva ventana del navegador, o una nueva pestaña.
Observen dónde se abre la página ahora con el atributo TARGET
👉¡IMPORTANTE!
Los enlaces se utilizan para establecer relaciones entre dos recursos. Aunque la mayoría de enlaces relacionan páginas web, también es posible enlazar otros recursos como imágenes, documentos y archivos.
Una característica que no se suele tener en cuenta en los enlaces es que están formados por dos extremos y un sentido. En otras palabras, el enlace comienza en un recurso y apunta hacia otro recurso. Cada uno de los dos extremos se llaman “anchors” en inglés, que se puede traducir literalmente como “anclas”.
URL ABSOLUTA y URL RELATIVA:
El acrónimo URL (del inglés Uniform Resource Locator) hace referencia al identificador único de cada recurso disponible en Internet. Las URL son esenciales para crear los enlaces, pero también se utilizan en otros elementos HTML como las imágenes y los formularios.
En primer lugar, las URL permiten que cada página HTML publicada en Internet tenga un nombre único que permita diferenciarla de las demás. De esta forma es posible crear enlaces que apunten de forma inequívoca a una determinada página.
Por ejemplo, http://www.google.com es la url completa o ABSOLUTA de la página principal de Google.
EJEMPLO
Si tenemos página publicada en: http://www.ejemplo.com/ruta1/ruta2/pagina1.html
y queremos incluir en ella un enlace a otra página que se encuentra en http://www.ejemplo.com/ruta1/ruta2/pagina2.html.
Considerando el mismo ejemplo anterior, la URL a la que se quiere enlazar utiliza el mismo protocolo y se encuentra en el mismo servidor que la página origen, por lo que la URL relativa puede prescindir de esas partes:
Como las URL identifican de forma única a los recursos de Internet y proporcionan la información necesaria para llegar hasta ellos, el enlace debería utilizar la URL completa de la segunda página.
URL absoluta: http://www.ejemplo.com/ruta1/ruta2/pagina2.html
URL relativa: /ruta1/ruta2/pagina2.html
Etiqueta <img>
La etiqueta <img>, permite definir una imagen en el documento web. Técnicamente la imagen no está insertada dentro del documento, ya que lo que se hace es realizar un enlace a la misma, encargándose el navegador de situar en el documento. Entre los formatos más populares de imagen aceptados, sin duda se encuentran el formato JPEG, y el formato PNG. Aunque se pueden utilizar muchos más formatos. Usa los siguientes atributos:
- src: permite especificar la ubicación de la imagen, bien mediante una ruta absoluta o relativa.
- alt: permite especificar un texto alternativo para la imagen. Este texto alternativo es visualizado cuando se produce un error en el atributo src, la conexión fuese muy lenta o si el usuario utiliza un lector de pantalla.
Aclaración: la imagen está en la misma carpeta que el documento html. Estoy usando una referencia relativa.
El archivo mariposa.png se encuentra en una carpeta DISEÑO WEB - HTML y CSS dentro de otra carpeta, MATERIAL UTN en el ESCRITORIO de mi computadora y usuario.
La ruta ABSOLUTA sería:
C:\Users\Silvana\Desktop\MATERIAL UTN\DISEÑO WEB - HTML y CSS\mariposa.png
En las urls dentro de un documento HTML, El blanco se escribe con su representación hexadecimal %20. (observar la dirección al ver el documento html)
La etiqueta <div> sirve para crear secciones o agrupar contenidos.
Un contenedor div sirve principalmente para contener a otros elementos HTML. Aunque nos permite posicionar grupos y áreas, div no tiene su propio significado semántico en HTML. Su tarea principal es, por tanto, crear y delimitar áreas que luego puedan ser formateadas mediante CSS. El contenedor div no influye en el diseño o el contenido de una página web. En un principio, dentro de un contenedor div se puede colocar casi cualquier contenido fluido. En HTML, div no tiene ningún efecto sobre la presentación del contenido, sino que únicamente lo delimita.
Un contenedor div sirve principalmente para contener a otros elementos HTML. Aunque nos permite posicionar grupos y áreas, div no tiene su propio significado semántico en HTML. Su tarea principal es, por tanto, crear y delimitar áreas que luego puedan ser formateadas mediante CSS. El contenedor div no influye en el diseño o el contenido de una página web. En un principio, dentro de un contenedor div se puede colocar casi cualquier contenido fluido. En HTML, div no tiene ningún efecto sobre la presentación del contenido, sino que únicamente lo delimita.
