Frame with HTML - how it works
To make the media on your website more appealing, you can use HTML code to draw a frame around it. In this practical tip, we show you how this works and what advantages cascading style sheets (CSS) offer when defining a frame.
HTML coding - draw frames around images and other media
By default, each image has a frame that is one pixel wide. However, this is only visible if the image is used as a hyperlink. With the "border" attribute you can individually define the thickness of the frame.
- In HTML, the code for a ten-pixel black frame looks something like this:
- This frame is applied to all four sides of the object.
- Alternatively, you can use an image editing program such as Gimp to draw the frame around your image.
- However, please note that this will make the image larger and it will take longer for the visitor to your website to download the image.
Define the frame in the HTML document with CSS
You can define the frame - for example a box around a text - with cascading style sheets even more precisely.
- Another practical tip tells you how to integrate a CSS file into your website.
- In this CSS document you can set the color and thickness of the frame differently for all four pages:
- border-bottom: # 999 - Sets the color for the bottom frame. Here you can also use "border-top", "border-right" or "border-left".
- border-width: 0 0 thin thin - Specifies the line thickness. This is done clockwise. Here this means that no lines can be seen at the top and right, while a thin line has been defined at the bottom and left.
- border-style: none none groove groove - Defines the decorative frame for your picture or box. The "groove" style creates a 3D effect.
Your homepage naturally lives from its presence on the net. In the next article, you will read the best tips for improving your Google ranking.