Creating Your Own Web Page is Easy – A Tutorial (Part 3)

Here’s the final a part of this academic. Our subjects are:

Linking different pages and other web sites
Using CSS in styling your internet pages

Let’s start right here.

Creating and placing links

It may be very important to create and area hyperlinks to your website to assist your traffic navigate your web site from pages to pages. These are the links displayed on your net pages so as to change the net page displayed when clicked by means of traffic. These ought to be distinguished and properly placed to your pages. If now not, your site visitors can be stressed and will in the end leave your site sad or unhappy. Google Sheets Tutorial Hence, he may additionally never go back. So, ensure that your hyperlinks are outstanding, descriptive and orderly positioned on your pages.

Linking your pages

In web page 1, you have to region the subsequent code wherein you want the traveler to click to go to your page 2:

your link description

Looking at the codes, “a” is html anchor tag used for links, “href” is the characteristic regarding the URL of the destination page and “name” refers to the description of your hyperlink. If viable, use relevant key phrases in your description for seo.

Now, type the above on your mywebpage.Html and update the area call, internet page name, identify and link description with yours. Use applicable keywords to your link description for seo. Then, save and refresh your browser to reveal you the way the above is displayed on the web.

To see greater, hover or location your cursor on the hyperlink. The “name” cost may be displayed on the hyperlink whilst the “href” fee or URL of the vacation spot web page can be shown at the left aspect of the bottom bar of browser window. It may fit best in case you are on-line and your web site is already lively at the net.

Linking to different web sites

You must location the following code on your internet site pages in which you want your visitors to click to go to other particular websites:

your link description

If you be aware, it’s far similar to linking your web pages but it’s miles pointing to other internet site. So, we introduced the “goal” characteristic with value of “_blank” to open the destination web page into new browser window. This will make your website online continue to be lively or open even in case your visitors click the link to different internet site.

To try it, kind the above to your mywebpage.Html and update the area call, web web page name and hyperlink description with yours. Use applicable key phrases in your link description for seo. Then, keep and refresh your browser to how the above is displayed on the net. Click the link and a brand new browser window will open at the same time as the web page wherein you clicked the hyperlink remained open.

Hyperlinks with pics

You may additionally use pics to your hyperlinks. In this situation, the site visitors can click an photo for your web pages with links with a view to ship them to different pages to your website online or to different web sites you have got connected to. See the instance underneath:

Linking for your different web pages:

Linking to other websites:

If you observe, it is much like you’re putting an photograph for your internet page. The simplest distinction, it’s miles located between the anchor tags . So, in location of link description, you operate photograph. When your visitors click on the picture, the web page will alternate to the destination page.

To attempt the above, place the picture that you need to be used with hyperlinks in the identical listing wherein your mywebpage.Html is located. Then, kind the above codes in your mywebpage.Html but type only the picture filename in the “src” cost. Then, keep and refresh the browser to impact the adjustments. Hover or area your cursor on the photograph. The “alt” cost or the image description will be displayed at the picture even as the “href” fee or URL of the vacation spot web page may be shown at the left side of the bottom bar of browser window.

Styling your internet web page using CSS

W3C.Org calls for the website style definitions have to be positioned within the style sheets or CSS. Styles are used to govern the design of the website such font sizes, hues, font face, field residences, table residences, paragraph format, and so on.

Placing your patterns inside the head or in a separate CSS file assist you to manage the fashion of your web pages in only one page. Now, I will let you know the clean way to create your fashion sheets inside the head tags and the way it’s miles implemented within the inside the body tags.

To outline a fashion, you need to use a selector as a reference. Basic selectors are body, div, span, li, desk, td and p. Div is used for organization of paragraphs, p is for one paragraph, span is for selected characters, phrases or terms, li is for lists, desk is for table and td is for desk data. The good component right here is you can make your personal selectors using names you select.

Written by