10Feb

 HTML – Imágenes, enlaces y tablas

in Diseño Web Seo Google

El último artículo sobre HTML trata sobre los conceptos básicos de las secuencias de comandos HTML y sobre cómo diseñar una página web adecuada. En este artículo, cubriremos tres de las etiquetas más importantes que ayudarán en el diseño de un sitio. Estas etiquetas son las etiquetas ,, y o las etiquetas de imagen, enlace y tabla respectivamente.

Primero comenzaremos con la etiqueta de imagen, ya que es la más simple de las tres. La etiqueta es de cierre automático, lo que significa que todo lo que pondrías es y no hay. Cuando se utiliza la etiqueta de imagen, hay dos definiciones que se requieren para que se considere completa y según los estándares. Uno debe usar las definiciones "src" y "alt". La definición "src" le dice qué imagen usar y la definición "alt" le dice al navegador qué poner en caso de que la imagen no esté disponible. Un correctamente definido se vería como el siguiente.

Cuando se define correctamente, la imagen aparecerá como se muestra arriba con nuestro logotipo. Sin embargo, cuando la imagen no está disponible porque la ubicación fue mal escrita o la imagen se eliminó, aparecerá la definición "alt".

Hay varias otras definiciones que puede elegir usar como altura, ancho, borde, título, etc.

Los enlaces son esenciales para cualquier sitio web. Así es como alguien puede pasar de ver su página de inicio a su catálogo de productos a su página de contacto. Normalmente, definirías un texto como el enlace a otras páginas. Sin embargo, al igual que en la página de inicio de AAF Consulting Services, usamos un menú desplegable o puede usar imágenes como enlaces. No cubriremos a los hombres desplegables aquí, ya que son complejos y requieren conocimiento de JavaScript. Sin embargo, cubriremos enlaces de texto y enlaces de imagen.

El uso más básico y adecuado de la vinculación es con la etiqueta. "A" significa "ancla". La razón de esto es un tanto misteriosa, sin embargo tiene cierta lógica. Un ancla se conecta un barco a una masa de tierra mediante la vinculación del barco a una masa pesada que se mantiene por la masa de tierra. "A" es el ancla que conecta la masa terrestre o la página web al barco u otra página al vincular las dos.

Sin embargo, un anclaje correctamente definido solo requiere la definición "href". Sin embargo, como con cualquier otra etiqueta, hay otras definiciones que se pueden usar. Primero, la etiqueta se abre y luego se define. A continuación, ingresamos algún texto para que actúe como enlace. Finalmente, cerramos la etiqueta. Un anclaje correctamente definido se vería como el siguiente:

Inicio

Lo anterior lo vincularía a nuestra página de inicio. También puede definir que se vincule en algún lugar fuera de su sitio de la siguiente manera:

Microsoft

Eso lo vincularía con el sitio web de Microsoft. No es necesario usar "http: //" antes de "www", pero se considera más apropiado que sin. Si uno quisiera vincular a alguien utilizando una imagen en lugar de un texto, esto se haría simplemente reemplazando el texto con una etiqueta de imagen. A continuación se muestra un ejemplo.

El más complejo de los tres temas que cubrimos son las tablas. Las tablas constan de tres etiquetas requeridas con numerosas definiciones posibles. No solo se podría decir que se abra la tabla, sino que se debe decir dónde están las celdas de la tabla y qué contienen. Para abrir una tabla simplemente use, ingrese información y cierre. Hay otras dos etiquetas requeridas dentro de la etiqueta de la tabla. Estas etiquetas son y en el orden exacto requerido. Las etiquetas deben definirse en ese orden y cerrarse en orden inverso. A continuación se muestra cómo se vería configurado correctamente.

AAF Consulting Services

"Tabla" abre la tabla, "tr" comienza una fila y "td" abre una celda. Uno puede tener un número ilimitado de celdas en una fila y un número ilimitado de filas en una tabla. Sin embargo, si una fila tiene seis celdas y la siguiente solo tiene cuatro, entonces se convierte en un problema. El problema es, cuánto espacio deben ocupar las cuatro celdas en relación con las seis celdas del piso superior. Este problema se soluciona con la definición "colspan". Le dice a la celda que ocupe el equivalente de algún número de celdas. Digamos que tienes tres celdas en la primera fila y luego una en la segunda. Podría definir la celda única en la segunda fila con un tres en la definición "colspan". Eso significa que la celda individual debe actuar como tres y ocupar todo el ancho. Esto se vería como el siguiente.

AAF Consulting Services

Inicio

Información de contacto

¡Bienvenido a nuestro sitio!

© 2007 Your Company, Todos los derechos reservados

Además de decirle cuántas celdas, uno podría decir cuántas filas. Es similar a "colspan" solo que es "rowpan" en su lugar.

AAF Consulting Services

Inicio Información de contacto

¡Bienvenido a nuestro sitio!

© 2007 Your Company, Todos los derechos reservados

Que cubre la parte más compleja de la más compleja de los tres temas. Por último, hay muchas definiciones con respecto a cómo se ve la información en las celdas, cómo debería verse la tabla, los bordes, no los bordes, cómo deben verse los bordes, etc.

Las tablas son importantes porque el orden al caos al diseñar una página para un artículo no. Le dicen al navegador dónde deberían estar los enlaces, dónde debería estar la información de su empresa y dónde debería estar el contenido de la página. Sin embargo, si está haciendo listas o escribiendo artículos, las tablas son más complejas de lo necesario. Hay otras etiquetas que son mucho más útiles cuando se trata de listas y artículos.

Por último, de las tres etiquetas de tabla, solo "td" puede tener otras etiquetas dentro. Esto significa que la tabla debe ir seguida de "tr", que a su vez debe ir seguida de "td", pero puede tener cualquier cosa dentro de "td" antes de cerrar. Sin embargo, cualquier cosa que abras dentro de cualquier celda debe estar cerrada dentro de esa celda. No puede iniciar una etiqueta en negrita en la primera celda y cerrarla en la última celda. Esto completa la información en imágenes, enlaces y tablas.



Source by Abraham Flores III

LEAVE A REPLY

Your email address will not be published. Required fields are marked*