Add Style and Links to Your Web Page

Interactive media and videos are an important part of online and digital media. In blogs and websites, when customers start clicking through things that interest them, they are brought to other web pages that relate to the things they like, and that is how you can find yourself spending hours “surfing the web.” Here are some steps for creating a visually pleasing, interactive web page.

Step 1: Background Color 

It is important to have a visually pleasing web page! You can do this in a couple of ways. I like to start off with the background color of my page. To do this you can use this outline:

<body style=”background-color:color;”>

Luckily, the W3 schools has aScreen Shot 2017-02-06 at 9.34.07 PM.png list of references for the different colors that you can make the background. For example, if you want a dark fuschia- type color, you can use the tag”darkorchid”. screen-shot-2017-02-06-at-9-30-43-pm

There are a large variety of colors to chose from such as powder blue, cyan, misty rose, and more!

Step 2: Inserting Pictures

Pictures are one of the best ways to catch an audience’s attention! Inserting pictures is *pretty* easy. In order to insert a picture, you  must use the layout : <img src=”url” alt=”some_text” style=”width:width;height:height;”>.

For example, if I was making a website about how to plan the perfect party, and I wanted to add a picture of some cake inspirations, I could use this layout in order to insert the pictures of the different kinds of cakes…

screen-shot-2017-02-06-at-11-05-35-pmscreen-shot-2017-02-06-at-11-05-50-pm

Step 3: Hyperlinks

By adding hyperlinks, a person can actually interact with the web page- and expand their web surfing antics! For example, if someone was looking at the cake options, and decided that they wanted to learn how to make it, they could click on the link and find out how to make the cake! To learn how to add the hyperlink, lets take a look at the unicorn cake as an example. Adding a link is actually extremely easy and can be done so using the <a> tag. The layout for this tag would be <a href=”url“>link text</a>. So, if I wanted to add a hyper link TO the picture, I would use this:

<a href=”default.asp”>
<img src=”url” alt=”othername” style=”width: height: ;”>
</a>

screen-shot-2017-02-07-at-12-55-27-amScreen Shot 2017-02-07 at 12.55.48 AM.png

So there you go! Now you can continue to play around and make your own visually attractive and interactive web page!

I am still struggling at this whole computer savvy thing but I hope you enjoy this little tutorial 🙂

Advertisements

~ by siobhanlynch on February 7, 2017.

 
%d bloggers like this: