AKING 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 :
#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 :
Here you will place the title of the page. The writings here are displayed at the topmost left of a program or web page.
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.
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>
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 :
<title>My Web Page</title>
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 :
A. Ordered List
<ol>This is Ordered List
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:
B. Unordered List
<ul>This is Unordered List
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.
- 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.