Sitios web, blogs, páginas web: conceptos ya familiares en nuestro tiempo. Con el desarrollo de Internet, los sitios de hospedaje de páginas web se han vuelto increíblemente populares, y esto no es de extrañar: para algunas personas tener su propio sitio web es una necesidad, para otras es un placentero entretenimiento. En el primer caso, normalmente estamos hablando de firmas, corporaciones, empresarios privados, cuando anuncian algún producto o servicio en demanda. El segundo es sobre blogueros.
Además de esto, hay usuarios de Internet que simplemente buscan información, leen blogs, miran videos, etc.
Para crear un sitio web de calidad, hay muchas opciones. Nos centraremos en la programación web a través de HTML.
¿Qué es HTML
HTML significa lenguaje de marcado de hipertexto. Traducido del inglés, esto significa "Lenguaje de marcado de hipertexto".
En otras palabras, HTML es un conjunto de códigos con los que puedes crear los elementos principales del sitio, su marco, comocómo las palabras se componen de oraciones.
Los códigos HTML se escriben exclusivamente en letras latinas y se denominan etiquetas, y cada código está encerrado entre paréntesis angulares. Algunas etiquetas están emparejadas, otras no están emparejadas.
Emparejado significa que deben usarse en pares sin f alta. Por ejemplo, la etiqueta de apertura indica dónde comienza en una página web y la etiqueta de cierre indica dónde termina. Este último se diferencia del primero por la presencia de un carácter de barra oblicua después del paréntesis angular de apertura. Por ejemplo, es la etiqueta de apertura,es la etiqueta de cierre.
Las etiquetas no emparejadas no necesitan pareja.
Muchas etiquetas pueden tener atributos: elementos adicionales que le dan un significado más específico. Por ejemplo, la etiqueta.
Dónde se usa HTML
La comprensión clásica de dónde se necesita HTML es la creación de sitios web.
En la práctica, esto puede ser suficiente, ya que HTML le permite crear los elementos principales del sitio, menús (incluidos los de varios niveles), configurar el fondo, insertar texto, imágenes, audio, video, editar fuentes y mucho más.
Sin embargo, existen otros lenguajes que le permiten agregar elementos más interesantes y a menudo necesarios a una página web:
- CSS establece estilos para todo el sitio sin necesidad de prescribir constantemente características de estilo de elementos individuales mediante etiquetas: el color y la fuente del texto, por ejemplo.
- El lenguaje de script le permite desarrollar e incrustar miniprogramas (scripts) en el sitio, que van desdecosas estéticas banales (cambiar el color del enlace al pasar el mouse sobre él) y terminar con las funcionales (recopilación de direcciones de correo electrónico de clientes, números de teléfono).
- Con PHP puedes desarrollar tu propio libro de visitas o sistema de comentarios.
También se utiliza HTML en la creación de correos electrónicos para su distribución.
¿Qué es un enlace?
Te permiten navegar a otra página web, tanto interna como externa.
Los enlaces HTML se usan comúnmente:
- Para ir a un recurso web externo.
- Para moverse por las páginas dentro del sitio.
- Para ir a los formularios de Google.
A menudo también se indica un enlace a la fuente en HTML, especialmente porque al copiar material de otro sitio, debe especificar el autor. De lo contrario, la copia sin atribución puede caer dentro de las definiciones de infracción de derechos de autor, robo de contenido y contraproducente. Además, el uso de materiales prestados y no únicos reduce el rendimiento de SEO, e indicar un enlace a la fuente reduce los riesgos.
Tipos de enlaces
En el sentido clásico, un enlace es la dirección de un recurso web al que puede ir haciendo clic en él.
Además de esto, hay hipervínculos: texto e imágenes. En estos casos, el enlace HTML está "oculto" debajo de alguna oración (palabra) o imagen, y para seguirlo, debe hacer clic en el texto o la imagen.
Otros tipos de enlaces:
- No visitado: un enlace en el que aún no se ha hecho clic durante una sesión en particular. Por ejemplo, si siguió este enlace ayer, luego apagó su computadora y la volvió a encender hoy, ahora el enlace ya no se visita, ya que ha comenzado una nueva sesión.
- Activo: en este estado, el enlace se guarda durante un tiempo muy corto: el intervalo entre hacer clic en el enlace y seguirlo.
- Visitado: un enlace que ya ha sido visitado al menos una vez durante una sesión.
Para los enlaces de texto regulares, los visitados tienden a cambiar de color a menos que se especifique lo contrario.
Una imagen con hipervínculo no cambia su apariencia, ya sea que se visite o no.
Cómo insertar un enlace normal
Muchos recursos web perciben la dirección del sitio como un enlace, lo hacen clic inmediatamente y lo res altan con color. Por ejemplo, si la dirección se envía en un mensajero o por correo electrónico, al hacer clic en él, puede ir al sitio.
En el caso de crear un sitio usted mismo usando HTML, debe insertar un enlace usando una etiqueta especial. Se verá así: dirección del sitio web. El texto del enlace en HTML debe especificarse completo, con protocolo.
Cómo insertar un hipervínculo de texto
Se dijo anteriormente que un hipervínculo de texto realiza la misma función que un enlace normal, pero se ve más agradable estéticamente: en lugar de la dirección de un sitio, que a menudo es innecesariamente larga, se indica una palabra o frase. Por ejemplo, en la frase "Busca información aquí", puedes ocultar el enlace enla palabra "aquí". Se res altará y al hacer clic en él se llevará al usuario al sitio deseado.
Cómo hacer un enlace HTML ya se ha discutido anteriormente. Puede insertar un hipervínculo de texto utilizando la misma etiqueta. La única diferencia es que debe especificar entre las etiquetas el texto bajo el cual se ocultará el enlace: texto visible.
Cómo insertar un hipervínculo de imagen
Aquí es un poco más complicado. Usamos la misma etiqueta, pero en lugar de texto, debe especificar la ruta a la imagen.
La ruta es la ubicación de la imagen. Si la imagen (foto) se encuentra en un servicio de intercambio de archivos, debe especificar todas las carpetas a lo largo de la ruta a la imagen a través de una barra inclinada. También puede incluir un enlace a una imagen si es posible.
Para etiquetar
además de src, también se aplican otros atributos, lo que le permite ajustar la altura, el ancho y la ubicación de la imagen y mucho más. Algunos de ellos:
- Src: especifica la ruta a la imagen.
- Lowsrc - idéntico al atributo anterior, pero especificado para imágenes de baja calidad.
- Altura - altura de la imagen.
- Ancho - su ancho.
- Alt - descripción de la imagen. Cuando pase el cursor sobre una foto o imagen, aparecerá el texto especificado en este atributo.
- Borde: determina el grosor del borde alrededor de la imagen.
Los atributos se especifican después de la etiqueta y se incluyen ensu composición. El atributo debe ir seguido de su valor. Por ejemplo, para los atributos " alto" o "ancho" (alto, ancho) especifica el alto de la imagen en la página web. La unidad de medida son los píxeles, a menos que se especifique lo contrario.
Se verá así: <a href="dirección de la página web"
. Estos atributos ayudarán a establecer el tamaño adecuado para la imagen. El borde ayuda a crear un borde invisible alrededor de la imagen.
Los atributos anteriores se aplican por separado a la etiqueta de inserción de imagen. Por ejemplo:.
¿Qué son los enlaces de anclaje?
Crear enlaces ancla es una habilidad muy útil. A menudo, existe la necesidad de diseñar una página web con un bloque de texto largo o con varias subsecciones en una página. En este caso, puede comenzar inmediatamente con una lista de enlaces a subsecciones del texto o página web, y cuando haga clic en ellos, el usuario irá directamente a la sección solicitada.
La creación de enlaces ancla requerirá un mayor uso de etiquetas de atributos que otros tipos de enlaces.
Primero, debe establecer el valor general para cada bloque de información o subsección de texto usando el atributo superior y luego asociarlo con el enlace correspondiente.
Sus características son más amplias, por lo que es recomendable dominar primero la creación de enlaces más simples y luego pasar a la formación de enlaces ancla.
Consejos
Ayuda de expertosprogramadores:
- Puede hacer que la información sobre un enlace se muestre al pasar el mouse en HTML. Para esto, el atributo alt, que también usamos para elementos gráficos, puede ser útil.
- Es posible hacer una lista de enlaces usando HTML. En particular, esto puede ser útil para enlaces de anclaje, así como cuando necesita hacer una lista de recursos web que pueden ser seguidos por un enlace directamente desde la página web actual.
- Con la ayuda de CSS y JavaScript, así como algunas funciones HTML, puede crear un diseño de enlaces de texto e hipervínculos diferente al habitual. Por ejemplo, cuando pasa el cursor sobre un enlace, puede cambiar su color y volver al anterior cuando el cursor está fuera de él. Esto se puede hacer con un script JavaScript personalizado. Además, el color del enlace se puede establecer en algo que no sea azul para los no visitados o morado para los visitados. Este es el trabajo de CSS.
- No abuses de los enlaces. Una página web con muchos enlaces inapropiados se ve descuidada y descuidada.
- Asegúrese de que el usuario comprenda que el hipervínculo con la imagen es realmente una imagen y no solo una imagen.
Conclusión
Es muy fácil vincular a una página en HTML. Es importante seguir todos los puntos principales de este lenguaje, ya que incluso un pequeño error puede llevar al hecho de que no habrá ningún resultado y el código no funcionará.
