Here’s the last part of this tutorial. Our topics are: Connecting different pages and different websites. Utilizing CSS in styling your web pages. How about we start here.
#1. Creating and Placing Hyperlinks
It is important to create and place hyperlinks in your website to enable your visitors to navigate your webpage from pages to pages. These are the connections displayed in your web pages that will change the web page displayed when clicked by visitors.
These must be unmistakable and appropriately placed in your pages. If not, your visitors will be befuddled and will eventually leave your site unhappy or unsatisfied. Consequently, he may stay away for the indefinite future. In this way, make beyond any doubt that your hyperlinks are noticeable, spellbinding and precise placed in your pages.
A. Linking Your Pages
In page 1, you have to place the accompanying code where you want the visitor to snap to go to your page 2:
<a href=”http://your-domain-name.com/page-2-name” title=”description utilizing relevant keywords”>your connect description</a>
Taking a gander at the codes, “an” is html anchor tag utilized for hyperlinks, “href” is the attribute alluding to the URL of the destination page and “title” alludes to the depiction of your connection. On the off chance that conceivable, utilize relevant watchwords in your portrayal for search motor optimization.
Presently, type the above in your mywebpage.html and replace the domain name, web page name, title and connection portrayal with yours. Utilize relevant catchphrases in your connection portrayal for search motor optimization. At that point, save and revive your program to show you how the above is displayed on the web.
To see more, float or place your cursor on the connection. The “title” value will be displayed on the connection while the “href” value or URL of the destination page will be shown at the left half of the bottom bar of program window. It may work just on the off chance that you are on the web and your webpage is already active on the web.
B. Linking to Other Websites
You have to place the accompanying code in your website pages where you want your visitors to snap to go to other particular websites:
<a href=”http://other-site-domain-name.com/page-name” title=”description utilizing relevant catchphrases” target=”_blank”>your connect description</a>
In the event that you see, it is the same as connecting your web pages however it is indicating other website. Along these lines, we added the “target” attribute with value of “_blank” to open the destination page into new program window.
This will make your webpage remain active or open regardless of whether your visitors click the connection to other website. To attempt it, type the above in your mywebpage.html and replace the domain name, web page name and connection portrayal with yours.
Utilize relevant watchwords in your connection portrayal for search motor optimization. At that point, save and revive your program to how the above is displayed on the web. Snap the connection and another program window will open while the page where you tapped the connection remained open.
C. Hyperlinks With Images
You may utilize images in your hyperlinks. In this case, the visitors can click an image in your web pages with connections that will send them to different pages in your webpage or to different websites you have connected to. See the example underneath :
D. Linking To Your Other Web Pages
<a href=”http://your-domain-name.com/other-page-name><img src=”http://your-domain-name.com/image-directory/image-document” alt=”your-image-portrayal with relevant watchwords” height=”???” width=”???” border=”0″</a>
E. Linking to Other Websites
<a href=”http://other-site-domain-name.com/page-name><img src=”http://your-domain-name.com/image-directory/image-document” alt=”your image portrayal with relevant watchwords” height=”???” width=”???” border=”0″</a>
In the event that you see, it is much the same as you are embeddings an image to your web page. The main distinction, it is placed between the anchor tags <a href=”URL”></a>. In this way, in place of connection depiction, you use image.
At the point when your visitors click the image, the page will change to the destination page. To attempt the above, place the image that you want to be utilized with hyperlinks in the same directory where your mywebpage.html is located.
At that point, type the above codes in your mywebpage.html yet type just the image filename in the “src” value. At that point, save and revive the program to impact the changes. Drift or place your cursor on the image. The “alt” value or the image depiction will be displayed on the image while the “href” value or URL of the destination page will be shown at the left half of the bottom bar of program window.
#2. Styling Your Web Page Utilizing CSS
W3C.org requires the website style definitions must be placed in the templates or CSS. Styles are utilized to manipulate the design of the website such text dimensions, hues, textual style face, box properties, table properties, paragraph format, and so forth.
Placing your styles inside the head or in a separate CSS record let you control the style of your web pages in only one page. Presently, I will reveal to you the easy way to create your templates inside the head tags and how it is executed in the inside the body tags.
To characterize a style, you have to utilize a selector as a kind of perspective. Basic selectors are body, div, span, li, table, td and p. div is utilized for gathering of paragraphs, p is for one paragraph, span is for chosen characters, words or phrases, li is for records, table is for table and td is for table data.
The beneficial thing here is you can make your very own selectors utilizing names you like. Creating templates is the same as what we have done in CSS boxes. Whatever style properties you assigned to those selecters, it will affect area or substance of your web pages where you have utilized the relating selectors. See example beneath :
content align: focus;
In the above style, all your substance inside the body tags (<body> and </body>) will have the above style properties. Attempt it by composing the above in your mywebpage.html inside the head tags. Save it and revive your program and see impact in your web page. How about we see another example :
content align: right;
All of your substance that you have placed inside <p> and </p> will have the above style properties. Presently, type the above to your mywebpage.html inside the head tags, save and revive your program and see the outcomes. Presently, we should make our own selectors. As explained in creating CSS boxes, we can make an id and a class selectors and execute as pursues :
content decoration: underline;
text dimension: 16px;
text style: italic;
text style weight: strong;
text style family: messenger;
fringe: 1px dashed #cff;
This is an example of utilizing the id selector
This is an example of utilizing the class selector
This is an example of utilizing both the id and class selectors
<span id=”ownidselector”>This is an example</span> of utilizing span with id selector and <span class=”ownclassselector”>class selector</span>
This is an example of utilizing <span id=”ownidselector” class=”ownclassselector”>both the id and class selectors</span>
This is an example of utilizing <span class=”ownclassselector ownclassselector2″>the two class selectors at the same time</span>
Allows me explain to you the above style properties that are not examined in Creating CSS Boxes :
- content decoration: underline – creates underline to the content or characters. You may utilize “none” instead of “underline” to expel the underline.
- text dimension: 16px – fixes the extent of the textual style inside the affected selector. You may utilize px, em, pt and % as unit of measure.
- textual style: italic – makes the content or characters italic. You may also utilize normal, slanted.
- shading: #f00 – characterizes the shade of the content or characters. You may utilize distinctive web hues here. It is advisable to utilize web-safe hues as different PCs or programs couldn’t display different hues.
- textual style weight: striking – makes the content or characters intense. You may utilize also normal, bolder, lighter, 100 up to 900.
- textual style family: messenger – characterizes the text style sort of the content or characters. Normal text style types are arial, verdana and helvetica.
Type the above codes to your mywebpage.html inside the style and body tags as noted, at that point save and revive your program to see the impacts of the above style properties. You may change the values, at that point save and revive to familiarize yourself with styling properties.
For complete web-safe shading codes and complete rundown of style properties, basically visit my webpage. When you have already familiarized yourself with the html and CSS codes, it will be easy for you to create a web page. I expectation you’ve learned something in this tutorial.
Simply keep practicing and learning. Research, research, research. There so many free tutorials here on the web. To learn a greater amount of HTML and CSS, search Google by composing “html tutorial” or “css tutorial” – Click Search and you will discover many decisions. For standards, you may visit www.W3C.org