Search
  • Rachael Kim

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.



4 views0 comments

Recent Posts

See All

First Class (Python Section)!

It's great to be back and see all of our students (new and returning) for our fall course! In our Python section, we covered some basic but key concepts in Python, including variables, loops, conditio