Friday, 4 March 2016
Tuesday, 21 July 2015
Web Designing Tutorials(Sitemaps)
A sitemap is a list of all the pages on your web site. In addition, a sitemap can list other resources on a page, such as images and videos. You can also add information about how often a page is updated and when it was last changed. A site map can be submitted to search engines, and ensures that all the pages are referenced and crawled.
You can create a sitemap yourself using XML, but this is very complex and time consuming. The easiest way to create one is via free sitemap generators. Here are two such sites:
Once your sitemap is generated you’ll have an XML file that you can upload to your web space. Place it in the same folder as your index.html web page – the root folder, in other words.
Web Designing Tutorials(Pay Per Click Advertising)
If you can’t wait for the search engines to crawl and rank your site, then you can sign up for something called pay-per-click advertising. As its name implies, this is when you pay for somebody clicking on your advert and then coming to your site. The market leader here is Google’s Adwords. When you sign up for an Adwords account, you get to bid on keywords and phrases. You decide how much you are willing to pay per click, say 20 cents. You then write a few words of copy for your ad (“Thousand of Black Widgets on Sale”). Your ad will appear on the right of the search engine results in Google. You can also pay a premium and have your ads appear at the top of the page, inside a coloured background.
Google is not the only game in town, here. Microsoft’s Bing and the Yahoo search engine have teamed up to run a pay-per-click campaign called AdCenter. This is more-or-less the same as Google’s Adwords, except your ad will appear on Bing and Yahoo’s search results.
Web Designing Tutorials(Search Engine Optimisation)
In this section we’ll take a look at what you should do to get your web site recognised by search engines. However, bear in mind that the goal of a good web page is quality. You should not be writing your articles for search engines but for people. If you care about what you’re saying and care about your audience then this will be far superior to someone just trying to make a fast buck.
META tags
A category of HTML tags that you can add to the HEAD section of your web pages are META tags. META is short for METADATA, which means information about the data on your web page. An example is this:
<META NAME=”description” CONTENT=”Widgets for all occasions.”>
This META tag has the attributes NAME and CONTENT. The NAME attribute can take a lot of values, but it is used in conjunction with the CONTENT attribute. In the example above, the CONTENT is describing what the web page is about. Because the CONTENT is a description of the page, the NAME value is “description”.
Web Designing Tutorials(What to look for when buying Web Space)
The websites of Web Hosting companies can be a minefield of jargon. Here are some of the things to look out for
Disk Space
This is how much space you get on the hosting company’s server. Obviously, the more the merrier, here. But it’s highly unlikely that you’ll need a Gigabyte of disk space, unless your web site contains lots of large images or videos. But the average site won’t even be 50 megabyte in size never mind 500 megabytes. So don’t just base your decision on Disk Space.
Data Transfer
This refers to how much download activity occurs on your site each month. (Data Transfer is also known as Bandwidth.) Say, for example, that each page on your site is 10 kilobytes in size (pretty small, these days). If 1000 visitors come to your site each day they will be downloading 10, 000 kilobytes of data, or 10 megabytes. Multiply that by the number of days in a month and the data transfer will be about 300 megabytes a month. If the Web Hosting company you sign up for only allows 100 megabytes of traffic each month then they will cut you off when that limit is reached. Your site will then be down until next month.
This is how much space you get on the hosting company’s server. Obviously, the more the merrier, here. But it’s highly unlikely that you’ll need a Gigabyte of disk space, unless your web site contains lots of large images or videos. But the average site won’t even be 50 megabyte in size never mind 500 megabytes. So don’t just base your decision on Disk Space.
Data Transfer
This refers to how much download activity occurs on your site each month. (Data Transfer is also known as Bandwidth.) Say, for example, that each page on your site is 10 kilobytes in size (pretty small, these days). If 1000 visitors come to your site each day they will be downloading 10, 000 kilobytes of data, or 10 megabytes. Multiply that by the number of days in a month and the data transfer will be about 300 megabytes a month. If the Web Hosting company you sign up for only allows 100 megabytes of traffic each month then they will cut you off when that limit is reached. Your site will then be down until next month.
Web Designing Tutorials(Websites and Domain Names)
To get your site on the internet you’re going to need some web space. For most people, and certainly beginners, this means something called Shared Hosting. What you’re basically doing here is renting a folder on somebody else’s server. That “somebody else” will be a Web Hosting company who either own the servers themselves or are acting as a middleman for the company that owns the server (called a reseller).
The size of the folder you get on the server will vary, but is typically between 500 megabytes to a Gigabyte. This is usually more than enough. In fact, 100 megabytes is usually more than enough. If, for example, each web page on your site is 10 kilobytes, a 100 megabytes means that you will have room for about 10, 000 pages.
Web Designing Tutorials(The Details, Aside, and Mark tags)
The HTML 5 Details Tag
The details tag allows you to add extra information that can be viewed or hidden. For example, take a look at the image below:
When a user clicks the above message, the following information is revealed:
Clicking the summary will hide the above message.
The Details tag is used like this:
The Details tag is used like this:
Web Designing Tutorials(The HTML 5 Canvas Tag)
One tag new to HTML5 is the Canvas tag. The Canvas tag is a blank space on which you can draw anything you like. You can add images to a Canvas, animate your shapes, add text, and a whole lot more besides.
To get the most out of the Canvas tag, however, you need to be able to code using Javascript. Another disadvantage is that not all browsers support the Canvas tag, especially versions of Internet Explorer below version 9. You can, however, write some quite sophisticated browser apps and games using just the Canvas tag and Javascript, and all without plug-ins like Adobe’s Flash. To get an idea of the things you can do, take a look at these pages:
Web Designing Tutorials(HTML 5 Video and Audio)
HTML5 introduced a new tag for videos. To insert a video into your web page you can now do this:
<VIDEO SRC=”your_video.mp4″></VIDEO>
This simplifies things greatly, as previously you had to use the OBJECT and PARAM tags. Even with a YouTube video that code would look messy:
<object width=”” height=””>
<param name=”movie” value=”http://www.youtube.com/v/your_ref”></param>
<param name=”allowFullScreen” value=”true”></param>
<param name=”allowscriptaccess” value=”always”></param>
<embed src=”http://www.youtube.com/v/your_ref_here” type=”application/x-shockwave-flash” allowscriptaccess=”always” allowfullscreen=”true” width=”” height=””></embed>
</object>
<param name=”movie” value=”http://www.youtube.com/v/your_ref”></param>
<param name=”allowFullScreen” value=”true”></param>
<param name=”allowscriptaccess” value=”always”></param>
<embed src=”http://www.youtube.com/v/your_ref_here” type=”application/x-shockwave-flash” allowscriptaccess=”always” allowfullscreen=”true” width=”” height=””></embed>
</object>
Web Designing Tutorials(Laying out your HTML Forms)
Aligning form elements can be very tricky. You might think CSS would make life easier, but it doesn’t. You can use the CSS position property with the values static, relative, absolute, and fixed. But even then, after long hours of frustration, you’d find that not all browsers render your form correctly.
To position form elements, then, a Table is often used. Take a look at the web page we’ve created called form_layout.html. This is in the extra_files/layouts folder that came with this book. (If you haven’t got the extra files yet, the download location is here, under the heading Web Design – New Course : (You don’t need the downloads for the old course.)
When you open up the above page, you’ll see a form that looks like this:
Web Designing Tutorials(Data Lists in HTML 5)
Another type of list you can use is a Data List. This is new in HTML5. The Data List is like a drop down list of options, only the dropdown part doesn’t appear until you start typing. The items on your list then appear, allowing the user to select an item. It is only supported in Firefox and Opera, at the time of writing. Here’s what it looks like before you start typing:
So it looks like just a normal text box.
Web Designing Tutorials(Dates, Times, Color Picker)
Dates and Times
You can have a calendar appear when a user clicks inside of a text box. Unfortunately, only the Opera browser does this. Here’s what it looks like:
Being able to select a date like this is a terrific innovation that hopefully other browsers will implement in the future. The HTML for the
Web Designing Tutorials(Spinners and Sliders)
Two other HTML5 controls you can add to forms are spinners and sliders. Sadly, though, only Opera and Chrome support the spinner. A spinner allows you to increase or decrease a number in a box by clicking little up and down arrows. They look like this in the Opera browser:
The HTML code for the spinner box looks like this:
<INPUT TYPE=”NUMBER” MIN=”0″ MAX=”10″ STEP=”2″ VALUE=”6″ SIZE=”6″>
Web Designing Tutorials(The Email, URL, and Search text boxes)
HTML5 introduces an email text box. This text box checks for a valid email address. Instead of TYPE=”Text” you use TYPE=”Email”. Here’s the code to try:
<FORM>
<INPUT TYPE=”Email” PLACEHOLDER=”Enter your email address”>
<P>
<INPUT TYPE=”Submit” VALUE=”Submit”>
<INPUT TYPE=”Submit” VALUE=”Submit”>
</FORM>
An older browser that doesn’t recognise TYPE=”Email” will just display a normal text box. So you may as well use the new email TYPE right now, if you need to.
Web Designing Tutorials(Password Boxes, The Hidden Element)
Password Boxes
You can add a password box to your form. This is identical to a text box in its appearance. The only difference is that when you type in the box the characters are replaced by asterisks ( * ). It’s important to remember that although a password box hides the text from prying eyes, the data is not encrypted in any way. If you use METHOD=Get instead of Post, the password would show up in the address line of the browser.
The code for a password box is this:
<INPUT TYPE=”Password” SIZE=”20″ MAXLENGTH=”8″>
The MAXLEGTH attribute is the maximum number of characters that can be entered into the password text box. SIZE is how wide you want the password box to be
Web Designing Tutorials(The Placeholder and Required Attributes)
The PLACEHOLDER attribute
There’s quite a neat new attribute you can add to your text boxes called PLACEHOLDER. This is default text that disappears when you click inside a text box. Try the following:
<FORM>
<INPUT TYPE=”Text” PLACEHOLDER=”Enter your first name”>
<P>
<INPUT TYPE=”Submit” VALUE=”Contact Us”>
<INPUT TYPE=”Submit” VALUE=”Contact Us”>
</FORM>
The word PLACEHOLDER does not have to be in capitals, as like just about every HTML element it is not case sensitive. After an equal sign, you type the text you want to appear in your text box, surrounded by quotation marks.
Web Designing Tutorials(HTML 5 Form Elements)
Now that you have learnt about HTML form elements in versions prior to HTML5, it’s time to learn what’s new. And there are quite a lot of exciting new features you can implement. It doesn’t make sense not to implement them right now, as in most cases you’ll just get a plain old text box if a browser doesn’t support the new element. The HTML 5 elements and attributes we’ll explore are:
Read More...
Read More...
Web Designing Tutorials(Password Boxes, The Hidden Element)
Password Boxes
You can add a password box to your form. This is identical to a text box in its appearance. The only difference is that when you type in the box the characters are replaced by asterisks ( * ). It’s important to remember that although a password box hides the text from prying eyes, the data is not encrypted in any way. If you use METHOD=Get instead of Post, the password would show up in the address line of the browser.
The code for a password box is this:
<INPUT TYPE=”Password” SIZE=”20″ MAXLENGTH=”8″>
The MAXLEGTH attribute is the maximum number of characters that can be entered into the password text box. SIZE is how wide you want the password box to be.
Web Designing Tutorials(Labels, Textareas)
You can add labels to your form, and attach them to a specific text box or other form element. They are good when you have small elements like check boxes, as you can click on the label to select the check box.
To add a label a pair of LABEL tags are used:
<LABEL>Label Text Here</LABEL>
The text you want to go on the label goes between the two tags.
To attach a label to a particular form element the FOR attribute is used, followed by the ID of the form element you want to attach it to. For example, examine the code below:
Web Designing Tutorials(Formatting Textboxes with CSS)
You can use some CSS to format your text boxes. Add the following LINK to the HEAD section of your HTML code:
<LINK REL=Stylesheet TYPE =”text/css” HREF=”../css/forms_1.css”>
Create a new CSS page and save it to the correct folder. For the file name type forms_1.css. We saved our HTML page in a folder called pages. We have a CSS folder that is one folder up from this, and so saved our CSS file there. That’s why our HREF reads “../css/forms_1.css”. This means, “Move one folder up from where the HTML page is, and look for a folder called css. Then use the CSS script called forms_1.css.”
For the CSS, type the following:
Subscribe to:
Posts (Atom)