At the heart of web design are anchor and image tags. How to work with and manipulate images and HTML links? This question is trendy among front-end developers.
Anchor tags are very important to web design. They give meaning to the word, World Wide Web. They are the links that connect web pages in a spider-web like structure, allowing users to move seamlessly between pages of different sites and within pages of the same site. Website images add to the beauty and the aesthetics of every web tool. Designers use them in headers, lists, profile pictures, descriptions, and galleries. A picture speaks a thousand words, and this is just as valid in eCommerce. As online commerce booms, images have become key components in product promotion and when attracting more visitors.
Anchor Tag ()
Syntax
The basic syntax for writing a hyperlink in HTML is,
From the syntax, the text in the href quote is the link’s destination, while the text between the tags is the text the reader sees. A reader who wants to visit Codecoda for more information will see ‘Visit Codecoda’, but not the actual link to Codecoda. And when the user clicks Visit CodeCoda, they will end up on CodeCoda’s homepage. Any other link can replace the link https://www.codecoda.com/en according to the desired destination. You can place the in the body and head section of a document. The head section defines the link to external resources like Google fonts, external CSS, and external Javascript.
Absolute links are links that point to a specific path. They always begin with a protocol name. Absolute links are mainly used to define other sites within the internet. The link — https://www.codecoda.com/en is an absolute link. It refers to a specific website on the internet, and it starts with an HTTPS protocol.
Relative Links
Relative links are links referenced within a working directory/folder. The file path is usually relative to the current page. A relative file path is usually specified when linking to pages within a website. It doesn’t need a protocol or address, just the filename.
The file path could also include folders that are outside the working directory.
Relative links remain the same — on the working machine and the webserver if uploaded. They should also be closely monitored. If a file path were to change, the URL would become void.
In-Page Anchors
Have you ever seen pages with a ‘go to the top’ link or button at the bottom? And when you click on it, it takes you all the way to the top of that page or document? Or a long web document is sectionalized with a ‘table of contents’ where each item is a link to different sections within the same page. This style of linking is called in-page anchors since they happen within the same web page. To have this linking style within a web page, you must first set the location where the users will go. You can achieve this through the ‘name’ attribute. The defined name will be referenced by the href attribute with a pound sign. Here’s a demo.
Table of contents
HTML Links
HTML Images
MAIN CONTENT
HTML LINKS
Insert Long Text Here.
HTML IMAGES
Insert Long Text Here.
Characteristics of a link
By default, all links are underlined.
An unvisited link is blue.
A visited link is purple.
An active link is red.
Links are not just text. They could be images, buttons or other HTML elements.
During coding, you better leave dummy links empty or add the pound sign between quotes. This maneuver allows the element to be clickable, but the link goes nowhere.
Link states (Pseudo Classes)
Links are dynamic and occur in individual states. Link pseudo-classes allow developers to style the different states of a link in CSS. HTML links have five main active states — link, active, hover, visited, and focus. You can style all five of these at the same time for one link. The :link state is the default state of a link, while :active denotes the currently selected link. The :hover state occurs when the mouse is over the link. The :visited state is a link that has been clicked. The :focus state occurs when a user focuses on a link. You can attach different styles to these states. Here is a code that changes the text color as each state occurs.
We cannot overemphasize the importance of images on a website. As web development advances, the need for good, highly optimized, responsive images also increases. The image tag is written as in HTML. It takes two important attributes, src and alt. Src specifies the path to the image, while alt specifies an alternative text for the image. Something that briefly describes the image if, for any reason, the image does not load. Other attributes of the image include srcset, width, height, and longdesc. Attributes like width and height can be written inline with tag or specified later in the CSS.
Background Images
Background-image sets an image as the background for a specified element. Background images are quite popular in web design, and web designers usually use them in headers since they make it easy to have text written on them. By default, a background-image repeats both vertically and horizontally. You can take care of this by using the no-repeat property. In CSS, the background property is set using the URL value. The URL path could be relative or absolute. Background images could be adjusted, positioned, and manipulated using other background properties. The following code snippet will create a background image with a text overlay positioned in the middle of the image.
A responsive image is one that adjusts automatically to fit the size of the screen display. It might seem like a headache trying to create different media queries for other screen sizes, but responsive images are relatively easy to define.
Setting the width or max-width property to 100% automatically makes an image responsive, allowing it to fill up any element size.
Centered Images
Trying to handle alignment and responsiveness can be quite tricky. The default for centering an item uses text-align: center, but this doesn’t always work, especially when other display properties counter it. To horizontally center an image, you could also margin auto value.
Flexbox provides a more robust way of centering images. To center an image horizontally, along the x-axis, use
img { justify-content: center; }
To center an image vertically, use
You can use either of these to center an image both horizontally and vertically perfectly.
Rounded Images
Rounded images are the rave for profile pictures. To make an image rounded, set it’s border-radius to 50%. It will give all the border edges an equal rounded touch.
Figures and Captions
Images work with HTML tags, and . The figure tag represents self-contained content that encloses images, charts, illustrations, etc. The figcaption is a description of the figure tag. Images placed within the figure element and described with a figcaption can create a beautiful gallery with notes.
There are hardly any websites today without any links or images. They are necessary to influence web users, but they matter to search engines and SEO. Careful utilization of these two HTML elements will boost the relevance and credibility of a website. Learning how to use media in web design effectively is a fundamental requirement for any web project.
Author
Ivaylo loves Frontend implementations. He is eager to construct interfaces that users love; pixel-perfect. In his day-to-day job, he caters to anything HTML, CSS, SCSS, or JavaScript-based on the frontend side. Complexity is not a problem, he masters VueStorefront implementations equally well to simple web apps or PWAs. Experimentation with CSS and its’ capabilities is Ivo’s passion. Be it animated elements, or SVG animations — he loves it!
Простые подсказки по CSS по изображениям, из которых можно узнать, как сделать картинку ссылкой, скруглить углы и добавить фильтры. А так же как сделать изображение адаптивным, задать ширину и многое другое.
Как задать фоновое изображение в CSS
Для того, чтобы задать фоновое изображение нужно использовать свойство background для того элемента, которому нужно задать фон картинкой. Фон можно сделать повторяющимся, либо нет.
Пример
HTML
CSS
Затемнение изображения с помощью CSS
Такой способ затемнения изображения можно использовать для элементов сайт, а так же можно оформить для фона сайта, либо для отдельных разделов сайта.
Пример
HTML
CSS
Как добавить картинку на сайт html с размерами
Для того чтобы добавить картинку на свою веб-страницу или сайт можно применить тег , его атрибут src содержит путь к файлу, как правило, в формате PNG, JPEG или SVG. Также для необходимо указать обязательный атрибут alt, он устанавливает альтернативный текст, который описывает содержание картинки, другими словами в него вписываем то, что отображает картинка. Размеры для изображения можно задать как в пикселях, так и в процентах, более подробно о размерах можно посмотреть на примере.
На данном примере размер картинки задан через атрибут.
