Nsryjdtyk

A beginner question: I know how to use online image--copy paste in url but don't know how it works if downloaded. I downloaded the font as a zip file but I don't know what to put in the url, the same question for image. Thanks.

Ok, sounds like you're trying to add images to a website. Your images need to be hosted somewhere to be used on a website.

When you use a URL of one that is already on the Internet, that image is hosted by someone else.

If you've downloaded it, you'll need to add it to your web project, which means you'll be hosting it yourself. It will then use a URL to reference the image and display it, but that URL will be on your own domain.

Depending on the software you're using to build this, sometimes you can drag and drop the image into your web page, and the software will do the rest.

Images on your website

Like Andrew says, in order to use images in your website, the images should be on any place on the web.

You can use Amazon S3 for storing your website images.
https://aws.amazon.com/s3/.

Once you get the image online url, you can use it on your html just pasting it on the src attribute of an img tag.

<img src="url/of/the/image">

Custom Fonts on your website

Now, if you want to use a custom-font to your website, you should paste your font files into your website folder and create a css3 rule like below:

@font-face {

    font-family: myfont;

    src: url(route/to/your/font/my_font.woff);

}

Then, if you want to use the font, for example on all you h2 tags:

h2 {

    font-family: myfont;

}

Hope it will help you.

As you a beginner I will explain everything to you step by step.

In the beginning you must unzip the compressed file sansationlight.zip

Right click on sansationlight.zip then click on Extract files

You will get the following window

Click on OK

You will get sansationlight folder

Create a folder next to the index.html file and name it Fonts

Copy the folder sansationlight that you unzip to the Fonts folder

Copy

Paste in Fonts folder

Add the following style code to the style tag in the index.html file:

@font-face {

    font-family: 'SansationLight';

    src: url('Fonts/SansationLight/SansationLight.eot');

    src: url('Fonts/SansationLight/SansationLight.eot?#iefix') format('embedded-opentype'),

         url('Fonts/SansationLight/SansationLight.woff') format('woff'),

         url('Fonts/SansationLight/SansationLight.ttf') format('truetype'),

         url('Fonts/SansationLight/SansationLight.svg#SansationLight') format('svg');

    font-weight: normal;

    font-style: normal;



}



div{

    font-family: 'SansationLight';

}

Here you will see how the code will appear on the your HTML page:

The result:

Here is the font before adding the style code:

If you want to use an external style file, follow these steps:

After copying the sansationlight folder to Fonts folder, create another folder next to the Fonts folder, name it stylesheets

Inside the stylesheets folder, create the style.css file and open it.

Copy the following code into the style.css file:

@font-face {

    font-family: 'SansationLight';

    src: url('../Fonts/SansationLight/SansationLight.eot');

    src: url('../Fonts/SansationLight/SansationLight.eot?#iefix') format('embedded-opentype'),

         url('../Fonts/SansationLight/SansationLight.woff') format('woff'),

         url('../Fonts/SansationLight/SansationLight.ttf') format('truetype'),

         url('../Fonts/SansationLight/SansationLight.svg#SansationLight') format('svg');

    font-weight: normal;

    font-style: normal;



}



.mydiv{





font-family: 'SansationLight';

}

Note, I've added ../ for one step back out of the stylesheets
folder

Here you see how the code will appear on the your style.css file:

To link the style.css file with index.html, use the link tag in index.html:

<link rel="stylesheet" type="text/css" href="stylesheets/style.css">

This is how the code will appear in the index.html file:

Note
In the first way I made the font style for all divs
div{ }

In the second way, the class was used .mydiv

For adding images:

Create a folder next to the index.html file and name it images

Add the image you want to use to the images folder

Use the <img> tag to add an image

<img src="images/image.jpg" style="width: 50%; height: 50%">

The result:

Useful Links:

HTML Tutorial

CSS Tutorial

HTML, CSS and more

HTML5 video Tutorial

CSS3 video Tutorial

The image I used