Connect with us
Loading...

Tech

Making Your Own Web Page is Easy – A Tutorial (Part 1)

MAKING WEB PAGE : Indeed, it is easy to create a web page however you are not an IT professional or an individual who is engaged with IT things. A basic web page is made up of basic HTML tags or codes and HTML is easy to learn.

Published

on


Create a Web Page

MAKING WEB PAGE : Indeed, it is easy to create a web page however you are not an IT professional or an individual who is engaged with IT things. A basic web page is made up of basic HTML tags or codes and HTML is easy to learn. After experiencing this tutorial, you will learn how to create your very own web pages for your website. This incorporates the accompanying topics isolated into three (3) parts:


Part 1:

  • Framework of a web page
  • Creating a web page template
  • Placing imperceptible remarks to your code
  • Creating a solitary or twofold spaces
  • Creating an arranged rundown and unordered rundown
  • Embeddings an image

Part 2:


  • Creating tables
  • Utilizing CSS boxes as webpage layout

Part 3:

  • Connecting different pages and different websites
  • Utilizing CSS in styling your web pages

Let’s examine here the Part 1:


  • Layout of a web page
  • Creating a web page template
  • Placing undetectable remarks to your code
  • Creating a solitary or twofold spaces
  • Embeddings an image

#1 Outline of a Basic Web Page


On the off chance that you are new to html, I am currently disclosing to you that a web page is essentially created with html tags. Html tags are shown as <tagname> and </tagname>. Take a gander at the blueprint of a web page beneath:

See also :  Web Based vs Desktop Software Application : Development & Software Resources

<html>

Loading...

<head>

<title>


Here you will place the title of the page. The writings here are displayed at the topmost left of a program or web page.

</title>


<style type=”text/css”>

This is the place for Cascading Style Sheets or known as CSS. CSS characterizes the styles you will use in your web page, for example, textual style shading and size of the content, background image, boxes, and so on. These are affected in the body yet the vast majority of the style definitions affects just those areas where you use them.


</style>

</head>


<body>

Here you will actualize the layout utilizing style definitions you have made in the “style” area. Without putting anything here the page will be blank aside from the title that will appear at the topmost left of the page. You will also place here the substance of your website. It may be blended of writings, images, audios and recordings.

</body>

</html>

The above must be saved as a html page with augmentation of html or htm. On the off chance that you want to perceive how the above will look like on as a web page, duplicate the above from <html> to </html> and paste to your Notepad or equivalent. At that point snap File – Save as – type mywebpage.html or mywebpage.htm in File Name – Select All records as document type – Click Save. At that point go to windows pilgrim or record manager and open the document with your program. See what I mean? It is as basic as that. Presently, don’t close your Notepad and your program. We will utilize that in our practice.

As an important note, your homepage or the starting page of your website must be named as index.html or index.htm. This will be first page when your website is called without indicating a particular page. Like this site, in the event that you type www.freetipsandwits.com or freetipsandwits.com at program address, it will open the file document. In the event that you like to see it, have a go at tapping the connection to my site. You may ask why the record document is “index.php”. Indeed, this site is php-based yet don’t trouble yourself with this php thing. Familiarize yourself first with html and later you may learn php, asp, jsp, cgi and more. In html, you should save your file document as “index.html” or “index.htm”. Pages other than homepage must be saved with graphic catchphrases utilizing hyphen as separator. This is for search motor optimization.

#2 Creating a Basic Web Page Template


To start with, I might want you to make a basic web page template. We will utilize this for practicing the html codes that we will learn later. Along these lines, in above mywebpage.html, erase all codes you composed earlier and type the accompanying:

<html>

<head>

<title>My Web Page</title>

<style type=”text/css”>

</style>

</head>

<body>

</body>

</html>

Leave a few spaces among style and body tags. Presently, click Save symbol or snap File – Save. On the off chance that you accidentally close this record, you can open it via searching the document, right-click it, click Edit or Open with Notepad or its equivalent. To perceive what it would appear that on the web, simply invigorate the program use when you opened the html plot some time ago.

#3 Placing an Undetectable Remarks to Your Codes


I might want you to realize how to place your remarks on your html codes. Web engineers normally placed remarks in a portion of the codes for future reference particularly for altering. It will be easy for you to discover what you’re searching for when you are updating or altering your html codes. This will support also different webmasters on the off chance that you let them alter your codes. These remarks are displayed uniquely in raw html codes or in your html editor however not on the web page or program page. This is done as pursues:

<!- – type your remark here – >

For example:

<!- – website building tutorial starts here – >

Building your website is easy. Simply learn basic html codes and you’re finished. Try not to be afraid of html codes, they are easy to learn. When you start learning html, you will ask for more and more….and so and so forth….until you become a specialist web engineer.

<!- – website building tutorial finishes here – >

Type the above in your mywebpage.html between body tags. You will learn faster in the event that you retype or remake the above. Be that as it may, on the off chance that you are in a rush, you may reorder it. Save it by tapping the Save symbol or File – Save.

Presently, invigorate your program for the above html document. Could it be any more obvious? Indeed, you can’t see your remarks between <!- – and – >. Thus, for your reference and easier altering of your codes later on, remember to place your remarks.

#4 Making a Line to Break or Creating a Blank Line Space


In the event that you want to break a line or create a blank line space, utilize this break tag <br/>. Perceive how it is utilized underneath:

This will break affiliate<br/>marketing from word “affiliate”.

This one will break this web<br/>site from letter “web”.

This one will result in a twofold line space search engine<br/><br/>optimization from “motor”.

You type this inside the body tags of your mywebpage.html, save it and revive your program. Truly, the sentence is broken and second line started with “marketing” the word before the break tag. The word was also separated into two with the following column started with “webpage”, parted from word “website”. The two sequential break tags created a twofold space among “motor” and “optimization”.

#5 Making an Arranged Rundown and Unordered List


This is helpful when you are enumerating or posting something. See the illustration beneath:

Ordered list

<ol>This is Ordered List

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

</ol>

Presently type the above in your mywebpage.html inside the body tags, save it and invigorate your program and see the outcomes. Could it be any more obvious? It’s sequentially numbered. Presently, here is the unordered rundown:

Unordered list

<ul>This is Unordered List

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

</ul>

Presently type the above in your mywebpage.html inside the body tags, save it and invigorate your program and see the outcomes. Presently, it’s not numbered. It’s in a shot format.

#6 Inserting an Image


You may place an image to your web page by embeddings these codes where you like the images to appear in your web page:

<img src=”http://your-domain-name.com/image-directory/image-file.gif” alt=”image portrayal” height=”???” width=”???” border=”???”/>

Taking a gander at the above html codes:

“img” is the image html tag;

“src” is the source or the path of the image document with expansion of gif, jpg and png;

“alt” is the alternative content portrayal in case the program couldn’t display an image;

“tallness” and width are the element of the image;

“outskirt” is the blueprint of the image.

Do these:

Replace the above domain name, image directory and the document name with yours.

Replace the values of “alt” with your very own portrayal. This is required for SEO or search motor optimization;

Replace the values of “tallness” and “width” with your favored elements of your image in pixel without distorting it. The span of the image will adjust based on the measurements you determined. Fixing the stature and width of the image will make it load faster;

Replace the value of the “outskirt” with the fringe thickness you liked. 0 is no outskirt.

To attempt the above, get an image from your document and duplicate it to the directory where your mywebpage.html is located. Presently, type the above codes in your mywebpage.html however replace the src=”http://your-domain-name.com/image-directory/image-file.gif” with src=”image-filename”. At that point, save it and invigorate your program to perceive what it would appear that in the web program.

to be continued with Part 2.

Related Posts

Advertisement
Loading...
Click to comment

Tech

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

MAKING WEB PAGE : 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.

Published

on

Web Page Tutorial

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.


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:

See also :  Web Based vs Desktop Software Application : Development & Software Resources

<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.

Loading...

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.

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:


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>

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:

<style type=”text/css”>

body {

margin: 10%;

shading: #00f;

background: #ff0;

content align: focus;

}

</style>

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:

<style type=”text/css”>

p {

margin: 20px;

shading: #cff;

background: #ccc;

content align: right;

}

</style>

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:

<style type=”text/css”>

#ownidselector {

margin: 0px;

content decoration: underline;

background: cff;

}

.ownclassselector {

margin: 10px;

text dimension: 16px;

text style: italic;

shading: #f00;

}

.ownclassselector2 {

text style weight: strong;

text style family: messenger;

fringe: 1px dashed #cff;

}

</style>

<body>

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>

</body>

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

Related Posts

Continue Reading
Advertisement

Advertisement
Loading...

Trending