Chapter 3 - Pictures, Links, and Backgrounds

353 6 2
                                    

Alright folks, now that you've got enough of a basic understanding of web coding we're going to start going into more 'advanced' topics at a quicker pace. This chapter will be dealing with three different page elements, and is the last chapter dealing with basic content.

After this we're going to go into topics that can become very confusing, very quickly.

Vocabulary:

Image: Any digital picture on the internet. You'll be including these on your page now.

Links: Properly known as Hyperlinks [due to the language they are expressed in]. There are a number of different types of links, and we'll be addressing the most common.

Backgrounds: The backgrounds for web pages and web sites, beyond that it has the same meaning as it would anywhere else.

Tags:

<img> (No Close Tag)

<a>,</a>

Self-Learning Assignment: Add a background color, working links, and pictures to your web page.

Lesson 1 - Your Background Color

Background is an tag element, and not actually a stand-alone tag. You can add it to your body tag, or table tags [which will be addressed later in the book].

When added to your Body tag is applied to the entire page. When added to the Table tag, it is applied just to the table.

By the end of this book you'll be using CSS to decide a number of your page elements, including background, but for now we're going to do it this way.

To add the Background element to your Body tag, you'll type it like so by simply adding the element to the body tag that already exists in your web page. Where I've written 'xxxxxx' you'll replace that with the hex-dec value for your desired background color. Below are a few simple colors that should mesh well with your basic black text.

<body>

-------------

#E254A2 - This will be a light pink color

#54BCE2 - This will be a lighter teal color

#AF0000 - This is a light red

#00AF00 - This is a light green

#0000AF - This is a light blue

-------------

For MS Paint, you'll also need to have your calculator program up when you are picking your custom colors. Input the values as decimal numbers, then set the calculator to Hex mode (or HexDec mode) and it will convert the value for each color (one at a time) from its Decimal value to HexDec value. (RRGGBB)

--------------

Lesson 2: Adding Images

There are a number of ways to go about getting image links, but for now, the easiest way would be to use a google image search ( https://images.google.com ) to search for the kind of pictures you want.

You'll want to tell Google after you click on the appropriate picture that you want to add to your web page to let you view the picture (and just the picture) in your web browser.

Other options include using a service like Photobucket. What we're looking for is the Direct Link to the picture, rather than letting photobucket generate our HTML for us [which will make it a link back to the photobucket album].

Copy that link to your clipboard then paste it in a separate wordpad/notepad file, or even as a sticky note on yoru desktop if you prefer. It does not matter where you paste the direct link right now.

How to Code - A Beginner's GuideWhere stories live. Discover now