Web Design IES
Web Design in Easy Steps, now in its 7th Edition, shows you how to make effective websites that work on any device.
This appendix to Social Networking for the Older and Wiser explains how you can make the most of the features of your web browser.
It introduces the skills you need to be able to use sites like Facebook, Twitter, Friends Reunited, Saga Zone, Eons, Ning and Meetup. These sites are all covered in depth in the rest of the book.
This appendix takes you from the basics of using websites through to more advanced skills, such as keyboard shortcuts. It includes a mini playground where you can safely experiment with the different form controls you'll encounter online.
I realise this is rather a lot of text for a single webpage, but I have ensured you can read it clearly when it's printed out. Use your browser's print control or click here to print. If you'd like to try any of the enhanced features (enlarge screenshots, visit links, play with forms), you'll need to use the on-screen version.
Access to a computer with an internet connection and a web browser, such as Internet Explorer or Safari.
Some familiarity with the computer, including the ability to find and run programs.
One of the great things about social networking is that it mostly takes place using your web browser. That means you can log in from any computer and have all your data and friends available to you. It also means you don't need to install any software, and you probably already have most of the skills you'll need.
In this chapter, you learn how to get the best from your browser, so that you can easily use the social networking websites in this book.
Am I teaching grandma to suck eggs? If you're the kind of person who already does all the Christmas shopping online, or who follows the football headlines on the internet, you might be tempted to skip this chapter. I recommend you stick with it because I cover some of the advanced browser features that you might not already use.
If you do decide to skip ahead (I'll never know), have a go at the revision quiz at the end to see if you missed anything important.
Your web browser is the program that enables you to undertake all the activities of the worldwide web, the most popular part of the internet. Using your web browser, you can connect to your bank, an online store or an organisation like the BBC for the latest news and weather. Most companies are online today, but there is also a vast wealth of knowledge and entertainment that private individuals have put on the web.
Websites (also sometimes called 'sites') are destinations on the internet: they are places you can access articles and photos, places you can browse and shop, and places where you can watch films or listen to music.
In the early days of the web, using it was a passive affair: like TV or radio, all the information travelled one way. Today's websites are more sophisticated and interactive, and social networking websites are at the forefront of innovation. They provide a hub where you can meet with your friends and socialise, and enable you to publish your own content on the internet for access by your friends or by the world at large.
Through your choice of network, and through the use of any privacy controls it provides, you decide who can access your information. Social networks are the tools, but you decide how you will use them.
Your web browser is the program that enables you to visit websites. If you're using Microsoft Windows, it is most likely to be Internet Explorer, which is by far the most popular browser. There is also a browser made by Apple, called Safari, and by Google, called Chrome, as well as two independent browsers called Opera and Firefox. They're all free, but you only need one, so just use whatever's already installed
This chapter uses Internet Explorer as an example but if you're using a different browser, don't worry. The features are largely the same, although the buttons and controls might look different and be in different places.
The first web browser was Mosaic, released in 1993. By making it easy to view and navigate content, Mosaic broadened the appeal of the web beyond academia. Within a few years, businesses started to go online (Amazon launched in 1995), and the internet began to arrive in the home.
Start your browser. If you're using Internet Explorer, you should see an icon for this on your desktop or in your start menu. It looks like a blue lower case 'e', with a Saturn-style ring around it. When you open your browser, it starts to download your start page, which means it copies it to your computer from the internet.
Your web browser is one of the simplest programs you'll ever use. There are thirteen main controls you need to know about, which is nothing compared to programs like Word or Excel. Here they are in Figure 2-1:
This screenshot shows the Google search engine (www.google.com), which is used to find other websites that have content you're looking for. When you open your browser, you'll probably see a different website at first, but don't worry about this for now. Concentrate instead on the blue area at the top of the screen. These are your browser controls. The most important ones are:
Those buttons are the gears and steering wheel, but there are some features that provide satnav, making it easier to get to the places you want to visit, and helping you to travel more quickly. Here are the highlights, which are also indicated on the previous screenshot:
When you're out walking somewhere unfamiliar you sometimes just make up your route as you go along. Perhaps you'll see a sign to a river, and take a diversion along a different path to visit it. Or maybe you'll see a sign for a short cut, so you'll take that instead of retracing your steps home.
Navigating the web is similar in that you find your way around it by surfing from webpage to webpage, following the signs. The signs, though, are called 'links'. They form a connection from one webpage to another, so you can travel to a new webpage by clicking the link. Sometimes a linked webpage might be in a different part of the same website, and other times it is independent and unrelated, part of a different website completely.
The easiest links to spot are blue underlined text, which make up a large part of the Google homepage shown in Figure 2-1. If you click Language Tools, for example, you'll be taken to a page of tools for translation and searching in foreign languages.
Sometimes links change colour, to tell you that the page behind them is one you've been to already. If you click Language Tools and then go back again, you'll see the link has changed from blue to purple. Unfortunately those default colours can be hard to tell apart. There is a reason we don't use blue and purple on our traffic lights.
Links can be anything, though: the text isn't always underlined, and even pictures can be links. If the website's well designed, the links should be obvious at a glance. If not, you can check whether something is a link by moving your mouse over it. If your cursor turns into a hand, it's a link. You'll see its destination URL in the bottom left of the browser.
Take a look at the shopping site Amazon shown in Figure 2-2:
If you'd like to go there yourself to try this out, just click in the address bar and type in www.amazon.co.uk and then press the Enter key on your keyboard. Or click here to visit Amazon.co.uk.
Amazon uses blue underlined text for some of its links, but it also uses images to help you navigate. You can click any of the product images, and can click the basket picture in the top right to see what you're in the process of buying.
Lots of websites, including Amazon, have a logo in the top left to take you to the homepage, which is the main welcome page on the website. If you get lost, try clicking the logo in the top left to go back to the main entrance.
The main collection of links for getting around a website is known as a navigation bar, or navbar for short. Sometimes navbars change from screen to screen, but usually they're consistent across the whole website, so you can more easily learn how to use the website. Each site designs its own navbar, so they all look different, but they usually run across the top of the screen or down the left-hand side.
Down the left hand side of the Amazon site, is a list of all the different departments. When you hover the mouse cursor over one of them, some options pop out on the right, which you can then click, as shown in the screenshot for Computers & Office. This is known as a pop-up menu and enables the website to provide lots of options for getting about the site without having to fill up the screen with all the links at once. It's a widely used navigation technique, but sometimes you need to click on the navbar to get the submenu to appear.
If you're transferring a lot of data, such as a large photograph, you'll see a progress bar bubble away at the bottom of the screen. The green magma flows from left to right slowly, like a horizontal bar chart representing how much has downloaded so far. You can easily multitask so you don't have to sit around waiting for a download. If you hold down the control key while you click a link, it'll open in a new tab so you can carry on reading the current page while the next one loads in the background.
On the right side, you see a scrollbar. You've probably seen these used in office applications before; you click the bar, hold down the mouse button and slide the bar down the screen. It then scrolls the page so you can see what doesn't fit on the screen at the moment. If your mouse has a scroll wheel between its buttons, you can just click an empty area at the top of the browser and then roll the scrollwheel to move the page up and down.
In this book, the screenshots will be scrolled and zoomed in to show you as much useful content as possible. Sometimes the navbar is scrolled off the top of the screen, for example. If your screen looks different to the screenshot, try scrolling down first.
Both the Google and Amazon websites use forms. These enable you to put your own information into the website, and play an important part in social networking.
On Google, for example, you can click the text box, type something you're interested in there, and then click the Google Search button. On the Amazon website, you can click the empty box at the top of the screen, enter what you want to buy, and then click the round Go button to find relevant products.
Figure 2-3 is an overview of some of the most common controls you'll come across, together with an example of how they might be used:
The forms will sometimes look a bit different on different social networking sites. The buttons in particular are often redesigned. The most important thing to note is that you can only choose one option using radio buttons (the round ones), can choose multiple options using tickboxes, and have to click to open the options on a pulldown menu.
If you want to experiment with those form controls, you can safely try entering data and clicking on the controls in Figure 2-3 to see what happens. No data is sent anywhere when you use this form. It's just to practise with.
In the bottom right corner of the browser is a magnifying glass, which you can use to enlarge the tiny text that some web designers favour. Click this to cycle through zoom levels of 100%, 125% and 150%. Click the triangle next to it to select other zoom levels of up to 400%. You can also zoom by holding down the control key on the keyboard (marked CTRL) and rolling your mouse's scrollwheel.
If you struggle to use a mouse, it's possible to do most things using keyboard shortcuts, and even if you don't, it's sometimes quicker. Table 2-1 is a quick guide to some of the keyboard shortcuts that are available, many of which are shared by other browsers too.
Why not print this out and stick it on your noticeboard, so you can easily refer to it, while you're learning the shortcuts? I've created a version of this table that you can print more easily.
|Go to the address bar||F6, or ALT and D|
|Add www at the start and .com at the end of a website address. Enables you to just type Google, for example, and then use the shortcut.||CTRL and ENTER|
|Show the list of previously typed addresses, so you can pick one again||F4|
|Go to the search box||CTRL and E|
|Move through the buttons on the browser and the links on a webpage||TAB|
|Select a highlighted link or button||ENTER|
|Scroll down the page (slow)||DOWN|
|Scroll up the page (slow)||UP|
|Scroll down the page (fast)||Page Down (often on the number keypad)|
|Scroll up the page (fast)||Page Up (often on the number keypad)|
|Find a word in the webpage||CTRL and F. Use ENTER to move through the search results on the page|
|Back||ALT and LEFT|
|Forward||ALT and RIGHT|
|Refresh page||CTRL and F5|
|Home||ALT and HOME|
|Add current page to favorites||CTRL and D|
|Open favorites||CTRL and I|
|Open history of visited websites||CTRL and H|
|Open new tab||CTRL and T|
|Close tab||CTRL and W|
|Go to next tab||CTRL and TAB|
|Zoom in||CTRL and +|
|Zoom out||CTRL and -|
|Zoom: reset to 100%||CTRL and 0|
|View webpage full screen (toggle on/off)||F11|
|CTRL and P|
Internet Explorer also offers to remember passwords for you. This can help to cut the complexity of dealing with different social networks and websites, as long as your computer itself is relatively secure. Never use this feature on a public computer, at the library, for example.
Let's see how well you've taken that in, with a quick revision quiz. There might be multiple right answers.
1. Web browsers include
(a) Internet Explorer
2. Address bar means...
(a) a women-only drinking establishment
(b) where you enter a URL
(c) where you enter a favorite
(d) where you enter a website address
3. If you always visit the same website every day, it's a good idea to:
(a) Add to your one-click favorites
(b) Set your homepage to be its website address
(c) Refresh it regularly
(d) Put it in a tab
4. A form lists four different ice cream flavours and asks me to choose using radio buttons which I want to eat. How many can I choose?
5. If I hold down the control key and roll the scrollwheel on my mouse, the webpage will:
(a) Scroll up and down
(b) Zoom in and out
(c) Get brighter or darker
(d) Get faster or slower
Q1 - a, b, and d
Q2 - b and d
Q3 - a and b
Q4 - a. Just the one, sadly.
Q5 - b
This article is bonus content for my book Social Networking for the Older and Wiser. Visit the homepage for Social Networking for the Older and Wiser for all bonus content, the table of contents and free chapters.
© Sean McManus. All rights reserved.
Visit www.sean.co.uk for free chapters from Sean's coding books (including Mission Python, Scratch Programming in Easy Steps and Coder Academy) and more!
Web Design in Easy Steps, now in its 7th Edition, shows you how to make effective websites that work on any device.
Power up your Microsoft Excel skills with this powerful pocket-sized book of tips that will save you time and help you learn more from your spreadsheets.
This book, now fully updated for Scratch 3, will take you from the basics of the Scratch language into the depths of its more advanced features. A great way to start programming.
Code a space adventure game in this Python programming book published by No Starch Press.
Discover how to make 3D games, create mazes, build a drum machine, make a game with cartoon animals and more!
In this entertaining techno-thriller for adults, Sean McManus takes a slice through the music industry: from the boardroom to the stage; from the studio to the record fair.