HTML

Images

What to do if you want a picture on your site?

When you have found a image you want on your site, would it be best to store it inside a folder called "pictures"/" billeder" or something else. It will help you have the site organized.
Then you want to inset a image, do you use the html element <img>, and two attributes.

Best Practices

<img src="Where are the picture?" alt="something about the picture">
1.4.1 Example

Images from a site

You can get images from a site. You just need an URL

 <img src="https://images.unsplash.com/photo-1585544313985-f84aac5abf7b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=668&q=80">
1.4.2 Example

Images from your local computer

You can save the images and show them on youe site

<img src="animal.png">
1.4.3 Example

Images in a folder

You can aldo get an image from a folder

<img src="pictures/animal.png">
1.4.4 Example

Most images are copyrighted. Do not display an image on your webpage unless: You own the image. You have received explicit, written permission from the image owner. You have ample proof that the image is, in fact, in the public domain.

Image attributes

An image has some attributes so you can style it and tells the user, what there should be, if they cant see it.

Alternative text

The attribute alt stands for alternative text. ts value is supposed to be a textual description of the image, for use in situations where the image cannot be seen/displayed

<img src="Where are the picture?" alt="something" >
1.4.5 Example

There should be an image

It is imporant to have a meaningful alternative text about the image, if the alt text is not important when leave the alt attribute empty.

Inline CSS

When you just put a picture inside a site, when it will be its default site, but that can be too big. If you want to fix that, when you can use a little bit of inline CSS.
Inline CSS is CSS in a HTML element.

<img src="Where are the picture?" alt="something" style="height:auto; width:200px">
1.4.6 Example

Links

Links is an important part of the internet, because they allow you to move from one web page to another.
Links are created with an <a> tag, where you specify which page you want to link to using the href attribute.

Links to sites

You must use the a tag, to link to another site.
The text between the opening and closing <a> tag is known as link text. It is the text, that the user can see, and click on.

Link to a file inside the same folder

<a href="index.html">Frontpage</a>
1.4.8 Example

Link to a file in a another folder

<a href="../index.html">Frontpage</a>
<a href="../../index.html">Frontpage</a>
1.4.9 Example

Link to another site

<a href="https://www.google.com">Google</a>
1.4.10 Example

Favicon

Have you seen the small image with the browser title? Do you want one?
The optimal size for creating a favicon is 16x16 pixels. The preferred file format for a favicon is JPEG or PNG.

/*The little icon in the top*/
<link rel="icon" href="path-to.file.png" type="image/png"/>
1.4.11 Example

Menu

If you want to make a menu you can use the HTML a tag

See the Pen Menu by Dominoeffekten (@dominoeffekten) on CodePen.

1.4.12 Example