Web Programming Class 3

Class 3

.pdf

PDF • 760KB

In class 3, we went over some more basics of HTML and CSS.

1. Adding external links to your webpage

<a href="google.com">LINK</a>

Above code will produce a link to Google.

*NOTE: codepen.io does not let you have an external link. If you want to test out this code on codepen, use one of the codepen URLs:

<a href="https://codepen.io/strangerintheq/pen/oNLZMYB ">LINK</a>

2. Background Images

To any HTML element, you can add a background image.

You need to edit your CSS to add background image.

.container{
  background-image: url("https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png");
  height:1000px;
  background-size: 500px;
  background-repeat: no-repeat;
}

Adding link to your image:

background-image: url("LINK");

Changing the size of your background image:

background-size: SIZE px;

Make your background image not repeat:

background-repeat: no-repeat;

Adding multiple images to your background:

.container{
  background-image:url("https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png"), url("https://image.cnbcfm.com/api/v1/image/105992231-1561667465295gettyimages-521697453.jpeg?v=1561667497&w=1600&h=900");
  height:1000px;
  background-size: 500px, 100px;
  background-repeat: no-repeat, repeat;
}

Simply add another url, separated from the first url by a comma.

To style the two images separately, add different number/style for each property, separated from the first one by a comma.