Creating Your Own Web Page Is Easy A Tutorial Part 3

Creating Your Own Web Page Is Easy A Tutorial Part 3



Here's the​ last part of​ this tutorial. Our topics are:

Linking other pages and​ other websites
Using CSS in​ styling your web pages

Let's begin here.

Creating and​ placing hyperlinks



It is​ very important to​ create and​ place hyperlinks in​ your website to​ help your visitors navigate your site from pages to​ pages. These are the​ links displayed in​ your web pages that will change the​ web page displayed when clicked by visitors. These must be prominent and​ properly placed in​ your pages. if​ not, your visitors will be confused and​ will eventually leave your site unhappy or​ unsatisfied. Hence, he may never return. So, make sure that your hyperlinks are prominent, descriptive and​ orderly placed in​ your pages.

Linking your pages

In page 1, you have to​ place the​ following code where you want the​ visitor to​ click to​ go to​ your page 2:

<a href="http://your-domain-name.com/page-2-name" title="description using relevant keywords">your link description</a>

Looking at​ the​ codes, "a" is​ html anchor tag used for​ hyperlinks, "href" is​ the​ attribute referring to​ the​ URL of​ the​ destination page and​ "title" refers to​ the​ description of​ your link. if​ possible, use relevant keywords in​ your description for​ search engine optimization.

Now, type the​ above in​ your mywebpage.html and​ replace the​ domain name, web page name, title and​ link description with yours. Use relevant keywords in​ your link description for​ search engine optimization. Then, save and​ refresh your browser to​ show you how the​ above is​ displayed on the​ web.

To see more, hover or​ place your cursor on the​ link. the​ "title" value will be displayed on the​ link while the​ "href" value or​ URL of​ the​ destination page will be shown at​ the​ left side of​ the​ bottom bar of​ browser window. it​ may work only if​ you are online and​ your site is​ already active on the​ web.

Linking to​ other websites

You have to​ place the​ following code in​ your website pages where you want your visitors to​ click to​ go to​ other particular websites:

<a href="http://other-site-domain-name.com/page-name" title="description using relevant keywords" target="_blank">your link description</a>

If you notice, it​ is​ the​ same as​ linking your web pages but it​ is​ pointing to​ other website. So, we added the​ "target" attribute with value of​ "_blank" to​ open the​ destination page into new browser window. This will make your site remain active or​ open even if​ your visitors click the​ link to​ other website.

To try it, type the​ above in​ your mywebpage.html and​ replace the​ domain name, web page name and​ link description with yours. Use relevant keywords in​ your link description for​ search engine optimization. Then, save and​ refresh your browser to​ how the​ above is​ displayed on the​ web. Click the​ link and​ a​ new browser window will open while the​ page where you clicked the​ link remained open.

Hyperlinks with images

You may use images in​ your hyperlinks. in​ this case, the​ visitors can click an​ image in​ your web pages with links that will send them to​ other pages in​ your site or​ to​ other websites you have linked to. See the​ example below:

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-file" alt="your-image-description with relevant keywords" height="???" width="???" border="0"</a>

Linking to​ other websites

<a href="http://other-site-domain-name.com/page-name><img src="http://your-domain-name.com/image-directory/image-file" alt="your image description with relevant keywords" height="???" width="???" border="0"</a>

If you notice, it​ is​ just like you are inserting an​ image to​ your web page. the​ only difference, it​ is​ placed between the​ anchor tags <a href="URL"></a>. So, in​ place of​ link description, you use image. When your visitors click the​ image, the​ page will change to​ the​ destination page.

To try the​ above, place the​ image that you want to​ be used with hyperlinks in​ the​ same directory where your mywebpage.html is​ located. Then, type the​ above codes in​ your mywebpage.html but type only the​ image filename in​ the​ "src" value. Then, save and​ refresh the​ browser to​ effect the​ changes. Hover or​ place your cursor on the​ image. the​ "alt" value or​ the​ image description will be displayed on the​ image while the​ "href" value or​ URL of​ the​ destination page will be shown at​ the​ left side of​ the​ bottom bar of​ browser window.

Styling your web page using CSS



W3C.org requires the​ website style definitions must be placed in​ the​ style sheets or​ CSS. Styles are used to​ manipulate the​ design of​ the​ website such font sizes, colors, font face, box properties, table properties, paragraph format, etc.

Placing your styles within the​ head or​ in​ a​ separate CSS file let you control the​ style of​ your web pages in​ just one page. Now, I will tell you the​ easy way to​ create your style sheets within the​ head tags and​ how it​ is​ implemented in​ the​ within the​ body tags.

To define a​ style, you have to​ use a​ selector as​ a​ reference. Basic selectors are body, div, span, li, table, td and​ p. div is​ used for​ group of​ paragraphs, p is​ for​ one paragraph, span is​ for​ selected characters, words or​ phrases, li is​ for​ lists, table is​ for​ table and​ td is​ for​ table data. the​ good thing here is​ you can make your own selectors using names you prefer.

Creating style sheets is​ the​ same as​ what we have done in​ CSS boxes. Whatever style properties you assigned to​ those selecters, it​ will affect area or​ content of​ your web pages where you have used the​ corresponding selectors. See example below:

<style type="text/css">
body {
margin: 10%;
color: #00f;
background: #ff0;
text-align: center;
}

</style>

In the​ above style, all your contents within the​ body tags (<body> and​ </body>) will have the​ above style properties. Try it​ by typing the​ above in​ your mywebpage.html within the​ head tags. Save it​ and​ refresh your browser and​ see effect in​ your web page.

Let's see another example:

<style type="text/css">
p {
margin: 20px;
color: #cff;
background: #ccc;
text-align: right;
}

</style>

All of​ your content that you have placed within <p> and​ </p> will have the​ above style properties. Now, type the​ above to​ your mywebpage.html within the​ head tags, save and​ refresh your browser and​ see the​ results.

Now, let's make our own selectors. as​ explained in​ creating CSS boxes, we can make an​ id and​ a​ class selectors and​ implement as​ follows:

<style type="text/css">
#ownidselector {
margin: 0px;
text-decoration: underline;
background: cff;
}

.ownclassselector {
margin: 10px;
font-size: 16px;
font-style: italic;
color: #f00;
}

.ownclassselector2 {
font-weight: bold;
font-family: courier;
border: 1px dashed #cff;
}

</style>

<body>

This is​ an​ example of​ using the​ id selector


This is​ an​ example of​ using the​ class selector


This is​ an​ example of​ using both the​ id and​ class selectors


<span id="ownidselector">This is​ an​ example</span> of​ using span with id selector and​ <span class="ownclassselector">class selector</span>

This is​ an​ example of​ using <span id="ownidselector" class="ownclassselector">both the​ id and​ class selectors</span>

This is​ an​ example of​ using <span class="ownclassselector ownclassselector2">the two class selectors at​ the​ same time</span>

</body>

Let's me explain to​ you the​ above style properties that are not discussed in​ Creating CSS Boxes:

text-decoration: underline - creates underline to​ the​ text or​ characters. You may use "none" instead of​ "underline" to​ remove the​ underline.

font-size: 16px - fixes the​ size of​ the​ font within the​ affected selector. You may use px, em, pt and​ % as​ unit of​ measure.

font-style: italic - makes the​ text or​ characters italic. You may also use normal, oblique.

color: #f00 - defines the​ color of​ the​ text or​ characters. You may use different web colors here. it​ is​ advisable to​ use web-safe colors as​ other computers or​ browsers could not display other colors.

font-weight: bold - makes the​ text or​ characters bold. You may use also normal, bolder, lighter, 100 up to​ 900.

font-family: courier - defines the​ font type of​ the​ text or​ characters. Common font types are arial, verdana and​ helvetica.

Type the​ above codes to​ your mywebpage.html within the​ style and​ body tags as​ noted, then save and​ refresh your browser to​ see the​ effects of​ the​ above style properties. You may change the​ values, then save and​ refresh to​ familiarize yourself with styling properties.

For complete web-safe color codes and​ complete list of​ style properties, simply visit my site.

When you have already familiarized yourself with the​ html and​ CSS codes, it​ will be easy for​ you to​ create a​ web page.

I hope you've learned something in​ this tutorial. Just continue practicing and​ learning. Research, research, research. There so many free tutorials here on the​ web.

To learn more of​ HTML and​ CSS, search Google by typing "html tutorial" or​ "css tutorial" - Click Search and​ you will find many choices. for​ standards, you may visit www.W3C.org.




You Might Also Like:




No comments:

Powered by Blogger.