For beginners. What are tabs and how to work with them? Adding a New Tab in Google Chrome How to Create a New Tab

The Internet has become an integral part of our lives, and the further we go, the more issues we are trying to solve with its help. In order to use the sites conveniently, you need to choose the best browser for yourself. Many people prefer Google Chrome because it combines many useful features. Today we will talk about one of the basic functions - creating new tabs and managing them.

There are several ways to create a tab. For example, if you are using Google search, then in the results provided, simply right-click on any link and select "Open in a new tab". You can achieve the same result if you simply click on the desired link on the mouse wheel, if available.

If you just need an empty tab, just click on a small inconspicuous button, which is located on the tab ribbon on the right. You can do it without the help of the mouse, for this there is a simple key combination Ctrl + T, and it does not matter which layout is currently selected.

Another method of creating new tabs is visual bookmarks on the home page. They can be obtained by installing a special add-on from the Google Chrome store. Most of them allow you to open bookmarks in both the current and new tabs.

Visual bookmarks, among other things, allow you to find previously saved pages much faster, since a thumbnail image of the site you are looking for is immediately available to you. If you remember the approximate color and location, as well as the logo, then it will not be difficult to find it among the rest of the bookmarks.

Each created tab, if it contains the necessary information, and you want it to open with the launch of the Google browser, can be pinned. To do this, right-click on it in the ribbon of tabs and select "Pin". What does it mean? The selected tab will move to the beginning of the ribbon, the cross intended for closing will disappear on it. This way, you can be sure that you won't accidentally lose an important site or close your favorite online radio channel.

In mobile Chrome, the whole system of opening and managing tabs is even simpler. In order to make a new tab, just click on the plus sign at the top of the screen, or hold your finger over the desired link for two seconds, and then select "Open in a new tab" in the drop-down menu.

Why should you keep track of the number of tabs? When creating tabs in Chrome, do not forget that each of them will take a certain amount of random access memory. Therefore, if you no longer need some of them, it is best to close them. To do this, both in the mobile and in the stationary version, simply click on the visual cross icon located on the unnecessary tab.

In the case of pinned tabs, you must first untie them, and then close them, just like regular tabs. To do this, right-click on an already irrelevant pinned tab and select the "Unpin" menu item. Thus, you will move it to the standard row, where the close function will be available.

Visual bookmarks though are handy Google function Chrome, however, is not always useful, as it can slow down the browser. When installing add-ons in Chrome, pay attention to their rating to determine which ones are the most popular among users.

If, however, you had to face the fact that new tabs in Google Chrome with sites you do not need open by themselves, we recommend that you check your computer with a good antivirus program, since there is a high chance that there is a virus in your system.

Was the article helpful?

Tabs have long been used to give the user some informational alternative at one level of the program structure. These are the "modular tabs" that can still be found on various sites. For example, on the portals of Ryanair, EasyJet, AirMalta airlines, modular tabs are used to switch between flight and hotel bookings, as well as car rentals.

With the growth of the number of sites, tabs began to be used for navigation. This approach was first used by Amazon in 1998. And while he eventually abandoned tabbed navigation in 2007, there are still great original examples of tabbed navigation for both modular radio buttons and navigation. In this note, I article author- approx. translator) here is a list of 14 tips that you can apply as a list of necessary conditions for tabs to be the most user-friendly.

What's good about tabs?

When used correctly and tastefully, tabs become an important element of the user interface, thanks to which the site will be convenient to use. And all because:

I compiled the following list by combining data from various sources with my personal experience. Of course, there may be other tips and tricks, but still, this list can be considered the most effective if you want to make sure that your tabs are really good.

1. Tabs should look and behave like tabs. Users have some knowledge and experience about what tabs should look like and how to deal with them. They expect behavior similar to what they are used to in reality. Deviation from the norm can lead to confusion.

2. Place navigation tabs at the top of the page. If they are used for navigation, then it is best to place them at the top, as this is where site visitors will look for them. The location of the tabs at the bottom, side, or, what is good, outside the visible part of the screen increases the likelihood that they simply will not be noticed. Always remember that users begin to explore the site even before it is fully loaded. They immediately focus on the top left of the screen and expect to find at least primary navigation there.

3. Arrange them in one row. Stacking tabs on top of each other degrades the interface and complicates navigation. This tip applies to single-level tabs. Tabbed navigation can be used and is good for representing hierarchy.

View of amazon.com from 2000 shows why tabs in multiple rows are bad

4. Always preselect one of the tabs. This makes the vital tab more meaningful, especially during the first few seconds.

5. Clearly identify the currently active tab. This can be achieved by changing the color, increasing the size compared to inactive neighbors, scaling the label text, or bringing the tab to the front. Also make sure the lettering is easily visible and legible.

6. Clearly highlight inactive tabs. Make sure that inactive tabs really look like they are, at the same time they should be visible, and the labels should be easy to read so that the tab can be selected if necessary.

Great example of highlighting active and inactive tabs

7. The active tab must be associated with a data area. To reinforce the connection with real life, you should make the tab appear attached to the relevant data area. This is what users expect.

The Delibar app site shows an interesting approach to attaching a tab to content

8. Arrange the tabs in the correct order. You should determine if there is an order in which tabs are placed in order to make your site easier to use. It is important to put yourself in the place of the user and be guided by his logic, and not your own.

9. Tabs should be labeled in plain language. This will make them easier to understand and use. It will also be easier to predict the type of related content.

10. The inscription should consist of one or two words. The inscriptions should clearly define the purpose of the tab in a maximum of two words. This will increase the likelihood that the user will make the right choice. By limiting yourself to two words, you will also choose the best lettering options.

11. Use register correctly. Only the first character of each word of the inscription must be written in capital letters. Just like all the text on the site, it is not recommended to write the inscriptions entirely in capital letters, because they will be more difficult to read (although, thanks to the previous paragraph, the negative effect will be minimal).

Tab labels are long and fully uppercase (example from onebigfield.co.uk)

12. Ensure fast switching. Users expect content to appear faster when they click on a tab rather than a link. This can be achieved, for example, by preloading in the background. You can use any technique for the quick toggle effect, as long as the user feels the physical connection between clicking on the tab and loading the data.

13. Provide "grouping" related tabs. If you have several tabs, then, quite possibly, you want to group those that are close in meaning. In this case, an additional link, such as color, may be useful. However, don't rely on color alone, as some users may be color blind and others simply won't understand what you're using it for.

Using color to group tabs on inkd.com

14. Don't use tabs instead of secondary navigation. While they can be used to explain where you are in the site structure and where you can get to, tabs should never be used in place of so-called breadcrumbs. breadcrumbs). Breadcrumbs show the hierarchy of the site "deep" and not "breadth", unlike tabs. Users are familiar with both interface elements and know what to expect from them. Replacing one with another can negatively affect the usability of your site.

PSDtoDNN effectively combines tabs with breadcrumbs

Note. translator - I think the article is still relevant, and the tips contained in it can be effectively applied to improve your sites.

1st way

1. In the browser window in the tab area, click on the button "Create tab-

ku" (Fig. 1.78) or use the keyboard shortcut Ctrl+T.

Rice. 1.78. New tab button in the tab area

2nd way

2. In the command list, select Create Tab.

3rd way

niyu any existing tab.

2. In the context menu, select the "Create Tab" item.

How to open a new tab from the address bar?

In order for the typed web page address to open a new tab in the existing

current browser window:

1. Type the web page address in the address bar.

2. Use the keyboard shortcut Alt+Enter.

How to open a link on a web page in a new tab?

When working with an open web page, it often becomes necessary to follow a link. In this case, the link can open both in a new browser window and in a new tab in an existing window, depending on the methods used to open it.

1st way

1. In the web page window, left-click on the desired link when

pressed Ctrl key.

2 th way

1. In the browser window, right-click on the desired web page link.

Rice. 1.83. Webpage window with Refresh button

2nd way

1. In the browser window, right-click on an empty space on the web

page or by tab name.

2. In the context menu, select the Refresh item.

3rd way

1. In the browser window, expand the "View" menu.

2. Select Refresh from the list of commands.

How to update the contents of all open tabs?

1. In the browser window, right-click on the title of the desired tab.

2. In the context menu, select Update All.

How to close a tab?

1st way

1. In the browser window in the tab area, click on the button "Close tab-

ku" or use the keyboard shortcut Ctrl+W.

2nd way

If you are using a mouse with a wheel, click on

the title of a tab by its wheel.

3rd way

1. In the browser window, expand the "File" menu.

2. In the command list, select Close Tab.

How to close all tabs except the active one?

1. In the browser window, in the tab area, right-click on the name

any tab.

2. In the context menu, select "Close other tabs" or use the keyboard shortcut Ctrl+Alt+F4.

Note . Only the tab that was right-clicked will remain unclosed.

How to close the browser window?

1. In the browser window, click the "Close" button on the title bar.

2. In the window "Do you want to close all these tabs?" (Fig. 1.84) click on the line "Show parameters" and select the desired action:

Rice. 1.84. "Do you want to close all these tabs?" window. Item "Show Options"

– “Open them on next startup Internet Explorer"- this item is activated if it is necessary to automatically open all the tabs the next time you turn on the browser.

– “Do not show this window again” – this item is activated if the browser window should not be opened with existing tabs.

3. Click the Close Tabs button.

Favorites Control Center

In order to be able to open the desired web pages at any time without looking for them again on the network, you must save links to their addresses in the Favorites Center.

How to add a web page address to favorites?

1st way

2. In the list of commands, select "Add Folder to Favorites".

3. In the "Add to Favorites" window, in the "Name" column, type the name of the link (or leave the name offered by the program) (Fig. 1.85).

4. In the "Add to" column, click the "Create Folder" button.

Rice. 1.85. Add to Favorites window

5. In the "Create a folder" window (Fig. 1.86), in the "Folder" column, enter the name of the folder where the saved link will be placed.

Rice. 1.86. Create Folder window

6. If you need to place the created folder in an already existing folder in the favorites, expand the list of the “Add to” column and select the required line in the structure tree.

7. Close the window with the "Create" button.

8. Close the Add to Favorites window with the Add button.

2nd way

add to favorites.

2. In the list of commands, select "Add to favorites" or use

3rd way

1. In a browser window with an open web page, right-click

which mouse is in the free space.

2. In the context menu, select the Add to Favorites folder item.

How to put a link address in favorites?

Internet Explorer has the ability to put a web address

pages to favorites without opening the page itself.

1. In the browser window, right-click on the desired link.

2. In the context menu, select the "Add folder to Favorites" item.

nitsy to favorites?

How to put web page group addresses

To favorites?

1st way

1. In a browser window with a web page open, expand the Favorites menu.

2nd way

1. In a browser window with an open web page, click the Add

add to favorites.

2. In the command list, select Add Tab Group to Favorites.

You can work faster on your computer if you optimally arrange your browser windows and tabs.

How to quickly switch between windows

Press and hold a key alt. Then press and hold Tab until the desired window opens.

How to view two windows at the same time

Advice. You can also use keyboard shortcut alt + [ or alt + ] to position the window to the left or right, respectively.

How to open and close windows or tabs

How to resize a window

How to rearrange tabs and pin them

You can arrange tabs with similar information side by side or open any of them in a new window. Tabs that are used all the time, such as checking email, can be pinned.

• To swap tabs, drag any of them to the desired location in the current browser window.
• To open a tab in a new window, drag it outside the browser. If you move the tab to another browser window, it will open there. Otherwise, the tab will open in a new window.
• To pin a tab, right-click on it and select Pin tab. It will appear on the left side of the browser window and be smaller than the other tabs.

Today we will create three tabs (tabs), switching between which, in turn, the contents of all tabs will be hidden or shown again.

In what cases is it advisable to place content on the site in tabs?

The first reason is to save space on the page. The second reason is when the content of the site is heterogeneous. In most cases, both reasons incline us to use tabs (tabs) on the site.

I know that novice web developers shy away from the native way (using JS) make similar tabs. Preferring not to delve into technical details, they grab a ready-made plugin for jQuery(see lesson on easytabs) or take the finished component to Bootstrap.

However, this lesson is dedicated to those daredevils who do not hide their heads in the sand, but want to understand the mechanism of switching between tabs. Especially, the lesson will be useful for students JavaScript. Taking the opportunity, I can not advise.

Tab demo

Tab HTML Code

Inside the div container with the class tab, create 3 link buttons (city names) with the class tablinks, we will pre-hang click events on the buttons and give the name of the function openCity. When the button is clicked, this function will work, the first argument of the event will be - event.