Search
  • Rachael Kim

Web Programming Class 3


Class 3
.pdf
Download 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 views

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

Phillips Exeter Academy Girls Who Code

Phillips Exeter Academy

20 Main Street

Exeter, NH 03833

Quick Links

© 2020 by Exeter Girls Who Code

This site was designed with the
.com
website builder. Create your website today.
Start Now