First, let's explain exactly what a hyperlink is.
Hyperlinks are those underlined words that you see on web pages that take you to another page, or another part of the same
page, or open up your e-mail client to send a message when you click on them with your mouse.
You can use hyperlinks on text and graphics..including banners. When you click on a banner on a web page, it takes you to
another page...right? It is hyperlinked. I'm sure you have also clicked on hyperlinked graphics as well.
Okay. The basic hyperlink, the one that takes you to another page, looks like this:
<a href="http://kwilliams.hypermart.net">The Home Business Files</a>
When this is displayed in a web browser, it actually looks like this:
The Home Business Files
When it is clicked on, it will take you....you guessed it...to our site, The Home Business Files.
Pretty simple, huh?
Okay, let me explain what these tags do.
The <a> tag stands for "anchor". This tag tells the web browser that you are about to use a hyperlink...you are about to "anchor"
something - as in tie it to another page.
The address is then put into the href="" tag. This tells the web browser where you anchored that something to..whether it be text or a graphic. Href stands for Hypertext Reference and is called an attribute of the <a> tag. Of course after this tag, you would put the text or the graphic you want to link to. What you want to appear in the web browser.
You then must close the anchor tag with </a>
An important note...The URL must go between the quotation marks in the href="" tag. This is vital.
Now, I'm sure you noticed that we used one tag for two HTML codes. We put the code for "anchor" and the code for "href" into the same tag...meaning we only used one set of brackets (<>) for these two codes. It is often possible to do this, and you will figure out what can and cannot share a tag as you go along. In this case, it was possible because the href= tag is an attribute of the <a> tag...meaning that they go together.
The next most common hyperlink would be a link to another page in your website. In order for this to work, the page must be in the same directory as the page the hyperlink appears on. If it isn't in the same directory, you must use the long form, as shown above, just like you are hyperlinking to another website.
To link to a page in your website, that is in the same directory, the tag will look like this:
<a href="contents.htm">Contents</a>
In a web browser, this would look like this:
Contents
Next, there is the "jump" link. This is a hyperlink that will take you to another part of the same page when it is clicked on. There are two steps to creating this link.
First you must identify the part of your page that will be "jumped" to. For instance, if I wanted to refer you back to the definition of hyperlinks, I would use the following code in front of the paragraph that defines hyperlinks:
<P ID="definition">Hyperlinks are those underlined words that you see on web pages that take you to another page, or another part of the same page, or open up your e-mail client to send a message when you click on them with your mouse.
Then, later in my page, I would use a hyperlink to jump back to that definition. For example:
<a href="#definition">This will take you back to the definition of hyperlinks</a>
This will give me:
This will take you back to the definition of hyperlinks
Now, the other use of hyperlinks will be to open up the visitors e-mail client, with your e-mail address, and possibly a predefined subject already put in for them. This is also done with the href tag...like this:
<a href="mailto:thao.vivian@gmail.com">Send E-Mail</a>
This gives you:
Send E-Mail
Now, if you wanted to pre define the subject line in your visitors e-mail, you would use this:
<a href="mailto:thao.vivian@gmail.com.com?subject=testing">Send E-Mail</a>
Try it out with your e-mail client...just click this link:
Send E-Mail
And that's all there is to know about hyperlinks!
Author: K.Williams
How To Use Hyperlinks
Create a Website using Adobe Dreamweaver
In this tutorial we are going to create a website layout using Adobe Dreamweaver which could be used for a E-commerce, Portfolio or Ad Sense Website.
Creating Websites In Adobe Dreamweaver
In this dreamweaver tutorial we will be creating this:
Website Url: http://www.local-bathrooms.co.uk/
To build our website we will be using tables, to create tables we will go Insert > Table.
You should now see this, here we will insert the options for our table.
Once we have created the table, we will go to the bottom of our Dreamweaver and look at the table properties. We are going to center the table on the page, to do this we will click Align > Center.
Now if you click of the table you will see a button at the bottom of Dreamweaver named Page Properties, here we can see the page font, size, color and background color.
We have set these options, instead of choosing and page background color we have chosen to have a image as our background.
In the top row of the table, we are going to type in our keywords which will help the search engines know what our website is about, we are going to center the text and bold it.
In the second row we are going to insert out website logo, to insert a image go to Insert > Image.
Find your image and click ok. Now click on the image and we are going to make a horizontal space of 20 pixels so it indented from the size of the table. We are also going to link the logo to our homepage so it will be easier for our visitors to navigate there way back to the home, do this by typing in your home page url in the link form. You use Index.html (.htm or .php can also be used) so the browser will see this page first if they type in our domain.
Now in the third row right click and go Table > Split Cell…
Split the cell into 2 columns and click OK.
Click inside the left column and give it a gray background and a width of 170 pixels.
Now insert a table inside the left column (Insert>Table) using next options.
Click in the top row of the new table and drag down to the bottom table so it highlights all of the tables. We will now give the tables a height of 21 pixels and a background color of green.
You should now be left with this
For our first 7 links we are just going to put text with a small image.
For the next links we are going to, bullet point, resize to 11 pixels, and give a color of yellow.
You should now have this:
Now once we have completed our links we are going to prepare our news letter sign up, something every site should have. For my website's i use a News Letter Software offered by Aweber.com but for the sake of this tutorial we will design the news letter.
Go and click on the Text Field image in the Forms panel or go Insert>Forms>Text Field.
We are going to do this twice the followed by a submit button, Insert>Forms>Button or through the Forms Panel by clicking Button
Now in the right column in the third row we are going to insert another table(Insert>Table).
In our left column of our new table, we are going to add a List Menu, this allows visitors to scroll through a list of pages to find the link there looking for.
The item label is what you want your visitors to see in the list and value is where you want the item to take them. Click ok when finished.
I then added content to the other 2 columns using a couple simple images and text, you should now have this:
Now we are going to make our Links, highlight the text you want to link to a page and go to the bottom to properties and just like when we linked the logo we are going to link to the page we want.
You will be noticed the text changed the blue and underlined
To change the appearance of our links, go to Page Properties and click Links.
I have chosen to have the link as white but on link over to be yellow. We have also chosen never to underline our links.
Adding Ad Sense to our layout is simple, right click where you want to insert Ad Sense (next to our logo in the header for us) and click Insert HTML…
Paste your adsense code and your done.
Finally we are going to go give our web page its page title which helps search engines to find out what out website is about.
After inserting our page content you should be left with this:
Author's URL: www.webdesigndev.com
How to style a Tag Cloud
A tag Cloud is a visual depiction of a list of items. You will often see tag clouds on your blogs. In other words, Tag Clouds (provided they are not cluttered and display just the relevant words) help visitors quickly visualize what your website is all about since the topics you frequently cover are mentioned in bold or relatively bigger fonts. Most tag clouds are built based on popularity or the number of pages that are tagged with that particular tag. But you can create a tag cloud out of any list of items on your site that have at least two ways of displaying them.
2. How to add a good looking tag cloud to your Blogger blog:
i. Type your Blogger feed address in RainMaker
http://www.blogger.com/feeds/xyz/posts/default?max-results=999
Remember to replace xyz with your Blog ID. This URL will retrieve your latest 999 posts and supply that for analysis to RainMaker.
ii. For the word link, type the following (where xxx is your blog name, e.g. labnol)
http://xxx.blogspot.com/search?q=%%enc_word%%
iii. You can change the default font size, tag cloud dimension background image and colors to fit your site theme.
iv. Now the tricky part. Once you have generated the tag cloud using RainMaker, right click over your tag cloud and click "View HTML source" - that the code you need to copy paste in your site.
Tip for Tag Clouds - If you really want visitors to spend more time on your site via Tag Clouds, always keep the number of words in Tag Cloud to an absolute minimum and that there is sufficient space around each word.
Source: http://www.labnol.org/
6 free multimedia softwares provided by NBXSOFT
One of the best things the free products giving to us is that each of them carrying out a particular task, which help us finding exactly what we were looking for without spending a cent.
Free Burn MP3-CD
Download at: (http://www.nbxsoft.com/files/burnmp3cd.exe)
1) Click "Add" button to add MP3, WAV, WMA & OGG audio files to the source list ready to burn.
2) Select the CD burning device. Set the burning speed and CD volumn.
3) Click "Burn Now!" button to start burning MP3 to CD.
Free MP3 WMA WAV Converter
Download at http://www.nbxsoft.com/files/mp3converter.exe
1) Click "Add" button to add audio files you want to convert to the source list.
2) Select the output audio format.
3) Click the "Options" tab and select output directory.
Free Create-Burn ISO Image
Download at: http://www.nbxsoft.com/files/createburniso.exe
1) Manage files and folders of the CD / DVD from the right buttons group. You can also drag and drop files / folders from Windows Explorer program.
2) Right click on the Treeview or Listview to select menu item from popup menu.
3) Select the burning device. Select Data CD or Data DVD you want to burn.
4) If you want to burn CD / DVD directly, insert a blank disc into the CD / DVD recorder and click "Burn CD / DVD" button. If you want to create ISO image file and burn it later (or use it in virtual CD/DVD program such as DAEMON, Alcohol), click "Create ISO" button.
5) If you have a data ISO file and want to burn it, click the "Burn ISO" button when the program starts.
6) Select the ISO image file, burning device and appropriate options. Insert blank disc into the recorder and click "Write Disc" button to burn ISO.
Free MP3 Sound Recorder
Download at: http://www.nbxsoft.com/files/mp3recorder.exe
1) Click "New" button to start a sound recording project.
2) On the Device Options dialog
If you want to record audio from Internet streaming, or any Media Player program, check the Stereo Mix or Wave Mix or similar option. This will enable the program to record through the system sound card.
If you want to record audio from microphone, check the Microphone option.
Click "Continue" button.
3) On the Formats dialog
Select output audio format. It can be MP3, WAV, OGG or VOX.
4) Choose the output audio file path on the Save dialog.
5) Click the "Record" button to start recording.
Free Flv to AVI Converter
1) Add source Flv video files to the source list.
2) Click the "Settings" button. Choose output video format on the Settings dialog.
3) Click the "Start" button on the main window to start converting.
Free Screen Recorder
1) Start Free Screen Recorder, click button to open General Options dialog. You can set the region of the screen to be recorded.
2) Click button to open Video Options dialog. You can set the video codec of the AVI file, video quality and framerate.
3) Click button to open Audio Options dialog. You can set the audio format, frequency, bitrate, channel etc.
4) Click button to open Cursor Options dialog. You can set the cursor's shape and highlight options.
5) Click button to open Hotkey Options dialog. You can set the start / pause / stop hotkey of the recording.
6) Click button or press the start hotkey to start recording. And click button or press the stop hotkey to stop recording.
Fonts and how to use them
Fonts come in a variety of shapes and sizes. The important thing to remember when choosing a font for your page is that not everybody will have that particular font on their hard drive, which means that their computer will show them your page using
their default font, which is usually Arial or Times New Roman.
So, no matter what font you choose, also check your page, using the arial font, to be sure that everything will still appear correctly to users who don't have the font that you are going to use.
Now, onto more interesting things....how do you use fonts?
Following the <Body> tag, you insert your <Font> tag. It will look like this:
<Body bg text="black" link="yellow" vlink="red" alink="green">
<Font face="arial">
Now, just like the body tag, the font tag must also have a closing. For instance, your body tags are: <Body></Body> Therefore, your font tags are: <Font></Font> . You should place your closing font tag right before your closing body tag.
The font tag can be used to determine the face, size, and color of your fonts. Face is the type or name of the font you are using, size determines how large or small the font is, and of course color determines the color.
<Font face="Comic Sans MS" size="+2" color="green">
You can also determine a second choice for your font, for those visitors that don't have the font you want to use. I suggest setting your second choice to arial or times new roman. The tag would look like this:
<Font face="Comic Sans MS, Arial">
There are thousands of fonts to choose from...arial, comic sans, lucida handwriting, century gothic...the list goes on forever.
The size of your font can range from 1 to 7, -1 to -3, and +1 to +4. Just try out the different choices to find what you are looking for.
There are six more tags that can determine the size of your font, but these are not used inside the font tag. They are just used before the text that you wish to size. These tags are h1, h2, h3, h4, h5, and h6. The largest of these fonts is h1 and the smallest is h6. These are heading tags. They are generally used at the beginning of the page, like to announce the name of the page, or to welcome visitors. These also require closing tags.
The following tag:
<h1>Welcome To My Page</h1>
will produceWelcome To My Page
You can download free fonts from Microsoft. Simply save them into your "fonts" folder on your hard drive, then go to your control panel, fonts, and "add new fonts". It will lead you through the installation from there.
Now, it gets a little harder. There are special characters that cannot be used as they are usually used in your HTML document. These would include, but are not limited to: quotation marks, ampersand, less than, greater than, cent sign, Copyright, Registered trademark. With these special characters, you should consult your character map...which is located under your programs menu. Go to start, programs, accessories, character map. Use the alt key, plus the number of the special character you wish to use. Many HTML editors can also put these special characters in place for you, such as HomeSite, which has a special characters wizard.
You should spend some time trying out different fonts, sizes, colors, and special characters. Getting the hang of these HTML features will be of great use to you!
Thank to K. Williams, the author of "The complete HTML teacher", for all information he provided.
Homerecording with Acoustica Mixcraft 4.1
Mixcraft™ is an affordable multi-track audio and MIDI recording studio that enables you to compose original music, record your band, create a podcast, or remix a song. Use it as a multi-track recorder or as a music loop remix program.
As a multi-track audio recording program, Mixcraft allows you to record and play multiple tracks of audio and MIDI virtual instruments at the same time. Add effect processing such as reverb, delay, guitar amp simulator, flanger or any 3rd party VST™ or DirectX™ effects. Hook up a MIDI keyboard and you can play a whole studio full of virtual synthesizers! As remix software, it supports Apple Loops™, Acid Loops™ and our own custom loop format. Mixcraft’s Song Kits allow you to create your own song in dozens of styles to sing along or rap to. Creating your own loop or extracting a loop from a well known song is a few clicks away. With Mixcraft, you can always be on the beat!
When you've finished your project, mix down your music to CD or MP3 directly in Mixcraft! Even with all this power, Acoustica engineers have kept the design easy-to-use and clean.
Mixcraft™ 4 Main Features :
• Clear, colorful, and intelligently designed interface to streamline your work.
• Custom loop library includes hundreds of royalty-free sounds in dozens of musical styles.
• Works with Acid™ and Apple Garage Band™ loops.
• Record multiple MIDI and audio tracks simultaneously.
• Piano roll to view and edit MIDI.
• Includes a General MIDI library, two sampled grand pianos, Hammond B-3™ emulator, MiniMoog™ emulator and a polyphonic synthesizer.
• Includes 18 high quality effects.
• Create mega presets that layer and split multiple virtual synthesizers and effects.
• Add unlimited VSTi™ instruments, VST™ and DirectX™ effects.
• Mix down to MP3, WAV and other audio file types.
• Burn CDs of your mix with just one click.
Sound Engine :
* Wave (WDM), ASIO™ and Vista's WaveRT low latency audio support.
* MIDI input and output support. Will work with any USB MIDI keyboard or any keyboard connected to a MIDI interface.
* Support for VSTi ™ virtual instruments. Bundled virtual instruments include:
o MinimogueVA classic analog synthesizer recreation.
o VB3 Organ virtual tonewheel organ with rotary speaker emulator.
o Impulse polyphonic analog synthesizer.
o Acoustica Instruments, a large collection of high quality multi-sampled instruments organized in General MIDI format.
o Acoustica Grand Piano and Acoustica Classical Piano, ultra-professional 250 Megabyte quadruple-strike sampled grand pianos.
* 32 bit sound engine supports recording and playback of broadcast quality audio up to 192 kHz and 32 bits.
* Time stretch any sound from 25% to 400% with FlexAudio™ without affecting the pitch! No chipmunks!
* Pitch shift sounds from -24 to +12 semitones!
* Use an unlimited number of tracks and effects.
* Automatically detects beats points, keys and tempos of imported songs.
* Import WAV, AIF, OGG, WMA, and MP3 files!
* 18 powerful, built-in, effects including reverb, delay, EQ, compressor, flanger, chorus, distortion, auto filter, master limiter, phaser and a guitar amp simulator.
* Shape each sound's volume, pan and resonant filters with unlimited envelope points.
* Support for DirectX™ & VST™ effects, including plug-in delay compensation.
Interface :
* Edit any sound to make a loop. Pick sections of prerecorded songs and extract and perfect loops for remixing. Adjust loop points to visual beat marks.
* Edit MIDI data in the piano roll editor. Perfect MIDI loops by adjusting the loop points. Edit notes and controller information.
* Create mega presets which combine multiple virtual instruments and effects. Set the key range, velocity sensitivity, transposition, pan and volume for each instrument.
* Load in standard MIDI files.
* Add your own photos or images to each track header.
* Edit each track's color, size and position in a variety of ways.
* Intuitive design and keyboard controls for quick work flow.
* Work in beats / measures mode or in time mode.
* Adjust the snap to grid setting which allows you to work and edit in whole notes, quarter notes, etc.
* Split, cut, copy, delete and paste sounds with ease.
* Easily move sounds around with drag and drop or via the keyboard.
* Cross fade sounds automatically by visually overlapping them.
* Create precise, custom loops extracted from existing songs.
System Requirements:
- Windows 95, 98, ME, NT, XP, or Vista.
- 512 MB Ram (2 GB RAM recommended).
- 1.0 Ghz CPU ( 2 Ghz Dual Core recommended).
- Sound card or sound device.
- Display resolution @ 800 x 600 (1024 x 768 or greater recommended).
- Optional MIDI keyboard.
Homepage - http://www.acoustica.com/mixcraft/
Don't forget HTML attributes
HTML attributes are as important as the tags themselves. The following are some of the tag attributes that are not as common but can add value to your pages.
1. Anchor tag <a>
The anchor tag helps you to create links and bookmarks. This tag links the documents from all over the Internet. Those documents may be a picture, a webpage, a music file, or even a movie file.
The title attribute creates a title for a link. Browsers handle it with different ways, but the most popular way is to create a small popup window with the text in. It is used to provide more information to your readers without cluttering your webpages.
<a href="http://it-rock.blogspot.com/" title="Click here to go to my homepage">Designer's one-stop resource</a>
2. <hr>
<hr> tag is often to determine to width and size of the line.
noshade turns off the 3d effect to give you a solid line
<hr noshade="noshade" width="50" align="left" />
This attribute can also be achieved using the style attribute, by setting the color of the element
<hr style="color: #000; width: 50px; float: left;" />
Giving your line will make your pages look more effectively
<hr color="#ff0000" width="50" align="left" />
and can also be done with the style attribute
<hr style="color:#f00; width: 50px; float: left;" />
3. <body>
The body tag has many attributes, but there are several that allow you to manipulate how your page displays in the browser.
leftmargin
defines where the left margin should be in the browser. It's written in pixels, 0 puts it flush left. This attribute works only in Internet Explorer.
<body leftmargin="5">
Using the style attribute, you can set this for all modern browsers:
<body style="margin-left:5px;">
topmargin
this tag works the same as leftmargin, only it defines where the top of the page should be in the browser. Again, 0 pixels is flush with the top of the window. This is an attribute for Internet Explorer.
<body topmargin="5">
Using the style attribute, you can set this for all modern browsers:
<body style="margin-top:5px;">
marginwidth
the marginwidth attribute is Netscape's answer to leftmargin. Written in pixels it defines how close to the left margin the page will load.
<body marginwidth="5">
Using the style attribute, you can set this for all modern browsers:
<body style="margin-left:5px;">
marginheight also a Netscape attribute, the marginheight attribute defines how close to the top of the window the page should load.
<body marginheight="5">
Using the style attribute, you can set this for all modern browsers:
<body style="margin-top:5px;">
Check out the tags you're going to use to see if there are attributes that might give you more power over your page.
This information is taken from about.com
Basic HTML tags
<A>...</A> - Starts a hypertext link. <ADDRESS>...</ADDRESS> - Information on author. <BLOCKQUOTE>...</BLOCKQUOTE> - Long quotes. <PRE>...</PRE> - Preformatted Text. <FORM>...</FORM> - Form Block. <TEXTAREA>...</TEXTAREA> - Creates a box to enter text. Example of "Textarea": [form][textarea]Write here.[/textarea][/form] <SELECT>...</SELECT> - Creates a scrolling menu. <OPTION>...</OPTION> - Creates items to select. Example of "Select and Option": [form][select][option]red[/option][option]blue[/option][option]green[/option][/select][/form] <DIR>...</DIR> - Directory list. Example of a directory list: [dir] <OL>...</OL> - Ordered list. Example of an ordered list: <MENU>...</MENU> - Menu list. <DL>...</DL> - Glossary list. Example of a glossary list: [DL][DT]red[DD]color not blue or green[DT]blue[DD]color not red or green[DT]green[DD]color not blue or red[/DL] <CITE>...</CITE> - Citation. <CODE>...</CODE> - Code font. <DFN>...</DFN> - Defined term. <EM>...</EM> - Emphasis. Example of emphasis on red: [EM]red,[/EM]blue, green <I>...</I> - Italic. Example of italic: red, blue, green <KBD>...</KBD> - Keyboard text. <SAMP>...</SAMP> - Sample text. <STRONG>...</STRONG> - Strong emphasis. Example of strong emphasis: [strong]red, blue, green[/strong] <TT>...</TT> - Typewriter text. Example of typewriter text: [TT]red, blue, green[/TT] <VAR>...</VAR> - Variable. <B>...</B> - Bold. <BASE> - Location reference for other URL's. <NEXTID> - Allows documents to be linked together. <META> - Describes document. <BR> - Line break. <HR> - Horizontal line. <IMG> - Image. <P> - Paragraph. <LI> - List item. <DT> - Marks a term in a list. <DD> - Marks the definition in the list. Basis for information taken from "HTML For Dummies, 2nd Edition" By Ed Tittel & Steve James
Website is a great way to show off something in your life. Basic HTML will let you to show the world whatever you want to show on your webpages. To learn HTML, you must keep in mind that it's simply a series of letters that are abbreviations of what they stand for. One important thing to remember, while you learn HTML, the HTML tags must come in a certain order on your web pages, and most HTML tags must have a start and end tags for the browser to recognize the command. An end tag is just simply the same as the start tag except that it starts with the / symbol.
1. HTML
HTML tag is used to start and end your page
<HTML>All your contents are here <HTML>
2. Headings
Headings are defined with the <h1> and <h6>. <h1> defines the larges heading. <h6> defines the smallest heading.
3. Body
The content you want to show off on your pages must be between <body> and </body>. Examine the following example:.
<html>
<head>
<title>FIT - Basic HTML Tutorial</title>
</head>
<body>
This is basic HTML Tutorial for newbie
</body>
</html>
Here is how your webpage looks like
4. Other tags
Basic HTML for Beginners
1. What is HTML?
- HTML is an abbreviation of Hyper Text Markup Language.
- An HTML file is a text file containing small markup tags.
- Those tags instructs your web browser how to display your web pages.
- An HTML file must have an htm or html extension.
- It can be created by text editor.
2. Writing HTML
If you use Windows, you can use Notepad that is already built into the operating system to write HTML. This is all HTML editor we will ever need.
Now, let's get started. If you are using Windows ->open Notepad
If you are using Macs ->open Simple Text
Type in the following text:
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage. <b>This text is bold</b>
</body>
</html>
3. Save your HTML to a file
This is a tricky part. Notepad usually saves file as .txt. But, since you write HTML, you must save your file as .html. If you are not careful, your file will be ended up with a name like filename.html.txt.
Here is show you how to avoid those mistakes
- Click on "File" and then "Save As"
- Navigate to the folder you want to save in
- Change the "Save As Type" drop-down menu to "All Files (*.*)"
- Name your file, be sure to include the .htm extension e.g. homepage.htm
Remember learning HTML is not as hard as you though; and you needn't buy any additional software in order to bring up to your webpages. With Notepad, you can write complex or simple HTML, and once you are getting familiar with, you can edit pages as quickly as someone having expensive HTML editor.
Customizing Your Blogger Templates
I found this video on youtube about customizing a template. It was totally helpful for me, and for you guys too, hopefully.
The steps of how to start a Website
1. Free web hosting
The advantage of using free web hosting is that you don't need to spend a cent to buy host and domain; and still having a website for your own. However, you have to handle many burdens that free web hosting provider are giving to you; say, limited capacity and bandwidth, a lot of advertising banners, and the worst thing may happend is your web link could die anytime. One more thing when using free web hosting is you don't have your own domain name. Yours may look like http: //www.doteasy.com/~username.
However, in order to start building a website for dummies, using a free web hosting providers is a great idea. You might go to Google or Yahoo, whichever you prefer, to search for a free web hosting. I suggest you try Doteasy.com. This one is a prestige free web hosting provider with no advertising banners.
2. Learning HTML
Although today, there are so many Web design softwares providing HTML editor, they are just tools no matter how good they are. You are the one to make a decision of how your website will look like. Therefore, if you have no knowlegde of HTML at all,trust me, it is truly hard for you to create a web page.
3. Web design software
The two must-known web design softwares are DreamWeaver or Microsoft Frontpage. They are totally excellent web design Softwares using HTML editor.
4. Graphical programs
After learning about some basics of HTML and web design softwares, it's time for you to learn of graphical softwares. They are helping you in creating your own banners, logo, images, and so much more for your website. This is an important step in designing how your website will look like.
Basically, you may learn how to use Adobe Photoshop. After getting familiar with this one, you are able to create your own layout, banner, logo, and button for your website.
5. PHP
PHP is a scripting language that is often imbedded into HTML to add functions HTML alone can't do. PHP allows you to collect, process and utilize data to create a desired output. In short, it let's you interact with your pages.
PHP is able to preform a number of tasks including printing data, making numeric calculations (such as addition or multiplication), making comparisons (which is bigger, are they equal, etc) and making simple boolean choices. From this you can create more complex loops and functions to make your page generate more specialized data.
Finally, becoming a webmaster is not as easy as you thought. However, if you have a little of desiration plus some of determination, you can pass through these difficulties I've listed above.
We're here and ready to help you.
Add Related Posts to your blog entries
A simple trick to keep visitors staying on your blogger longer is to use a list of links to related posts at the end of each of your entries. By doing this, you make it easy for your visitor to read more about a topic that he/she is interested in. Therefore, your related posts links make it much easier for your visitors to keep reading with just a simple click of the mouse.
1. Wordpress user
There is a popular Wordpress plugin that automates the process to add related posts links at the end the each of your entries; however, the results the plugin pulls are not always the best. Many blogger take the time to manually create related posts links at the end of each of their entries.
2. For blogger
First of all you must know that it won't work if your labels use any reserved url characters.
Go to templates edit html and click on expand widget templates and copy the whole code inside a plain text editor like notepad. You might consider backing up your template if something runs wrong.
Now paste the following in the page header :
<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>
Scroll down to the blog1 widget, and find the following:
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' rel='tag'><data:label.name/>
</a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
and change it to:
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
Save the code back to your template html and go to page elements and add a new HTML/Javascript widget underneath the main blog posts widget with this code :
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>;
Now go back to Template -> Edit HTML, check the check box to expand the template code, and find the HTML/Javascript widget you just added. It'll look something like the following. Add the lines in bold:
<b:widget id='HTML13' locked='false' title='Related Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
Done! Hope you guys enjoy.
Getting your web pages into higher Google Rankings
Google is one of the most popular Web search engines at this time. If you want people easily find your site, you should improve your ranking in order to show up higher in Google results.
TIPS TO HIGHER GOOGLE RANKS
1. Your site should have a clear hierarchy. This means that headings should follow in order for h1 to h2 and so on.
2. Have a strong introductory paragraph. This should not only explain what your site is about to new readers, but also contains keywords that you want to focus on within your site.
3. All pages on your site should have text links, not just image.
4. Offer a site map of your site to your readers.
5. Make sure your page has a descriptive title tags.
6. For important content, use text only. Googlebot cannot read image.
7. Validate HTML and keep your links current.
8. Write content for your readers, not for Google.
9. Ask mutual links from other web page writers.
The key to getting higher rank in Google is getting a lot of people to link to you. The more people who link to you and the more popular they are in Googlebot world, the higher you will rank for keywords.
What is Search Engine Optimization?
Search Engine Optimization (SEO) is a technique used to make your web pages more useful for your customer. This is inexpensive way to get more page views by creating Web Pages that rank highly in search engine results. There is few things you can make your pages do better
1. Write strong content
You should focus on the content of your web pages. The search engines want to provide links to relevant pages, so that their program are tunned to read and review the content of your web pages to make sure that what are on your webpages are what they are really looking for.
2. Write valid HTML
This is often one step of SEO that a lot of Web developers forget. Web developers usually focus on other aspects of SEO that they leave behind the simple things like valid HTML. You should notice that writing valid HTML would make your web paged get spidered much more than meta keywords or meta descriptions.
3. Find good keyword phrases
However, don' try to come up with every keyword phrases possible. Instead, focus on one phrase that can capture what your page is about, and make sure that this phrase is repeated within your page.
4. Don't optimize your entire site.
Confusing?? I learned that many web developers want to use one keyword phrase and optimize their entire sites with that keyword phrase. I know it's a lot of easier for you; however, it won't get any result that you would want. Instead, find one keyword phrase that works with one page in your site and optimize it. Then, move on to the next page. So, your readers will have more way to find your site.
5. Don't give up
SEO takes a long time to see results with. Even if you ased a search engine to spider your web pages, it still takes days to appear in the results. So, don't get discouraged by your rankings. All you need to do is just keep trying.
Blog Advertising Overview
The Main Types of Blog Advertising Opportunities:
Online advertising offers three primary types of ads bloggers can use to make money from their blogs.
Pay-per-click: The advertiser pays the blogger each time someone clicks on the advertiser's ad.
Pay-per-impression: The advertiser pays the blogger each time the ad appears on the blog's page.
Pay-per-action: The advertiser pays the blogger each time someone clicks on the ad and performs an action such as making a purchase.
Contextual Ads:
Contextual ads are typically pay-per-click ads. The ads are delivered based on the content of the page on the blog where the ads will be displayed. In theory, the ads shown on the page should be relevant to the content of the page thereby increasing the chance that someone will click on them. Google AdSense and Kontera are examples of contextual advertising oppportunities.
Text Link Ads:
Ads that are not served based on the content of a blog's page but rather are placed based on specific text in the posts of a blog are called text link ads. Text Link Brokers and Text-Link-Ads are examples of text link advertising opportunities.
Impression-Based Ads:
Ads that pay bloggers based on the number of times the ad appears on the blog are called impression-based ads. FastClick and Tribal Fusion are examples of impression-based advertising opportunities.
Affiliate Ads:
Affiliate ads give bloggers a choice of programs to provide links to products. Bloggers are paid when someone purchases the advertised product. Amazon Associates and eBay Affiliates are examples of affiliate advertising programs.
Direct Ads:
Many bloggers offer an option for visitors to purchase advertising space on their blogs. Direct ads are typically shown in the form of banner ads or similar display ads provided directly to the blogger by the advertiser to be uploaded to the blog. Pricing and payment methods vary from blogger to blogger (often dependent on the amount of traffic the blog receives). Direct advertisers on blogs are sometimes called sponsors of that blog.
Reviews:
Reviews (often called sponsored reviews) are an indirect form of advertising on blogs. A company might contact a blogger directly asking them to write a review for a product, business, website, etc. If the blogger is paid to write the review, then it is a form of advertising revenue. Some companies offer forms of review advertising such as PayPerPost.
