Browse » Home » Archives for April 2011

Xampp configuration to install joomla!

9:21 AM Huong Giang

Here we're going to discussed about some configuration that we have to make for Joomla! to run smoothly.

Before you can install Joomla 1.5, you have to download Joomla's archive and extract that archive in the public folder of the web server.

In our case these folder is htdocs of our xampp installation.


After we extract Joomla's setup files will make some adjustments to the php's configuration in order to ensure full compatibility with Joomla!.

This settings are:

I already made the setting, that is why "Actual" are all green.

Usually you only have to change off "Display Errors", if you need to change something else, please comment and I'll gladly help you. So let's change off "Display Errors".

Go to xampp/php and open php.ini with a simple text editor like notepad (I use and recommend notepad++).

Now go to line 531 or search(Ctrl+F) for "display_errors" and replace display_errors = On with display_errors = Off and we are done.


For the settings to be available you have to restart the web server, so go to xampp folder and double click on xampp_restart.exe



Now we can install Joomla!.
[Read More...]


Creating a Simple WebSite

11:57 AM Huong Giang


You need two things to build a website: a browser and a text editor (I recommend Firefox and Notepad++).


Here you can find more free resources that can help you create your website.

So, open up your text editor and let's start building the website.

For those how uses Notepad++, don't forget to change the language to HTML. (Menu->Language->H->HTML).



On the first line we have the opening tag for the webpage.

On lines 2 and 4 we have the > tag, the start tag and the end tag. This tag contains the meta information, which describe the web page. To find more about these, see meta tags in website optimization.

The tag that is on the line 3 is the text you can see at the top left corner of your browser (the name of the page).

We created a table on line 6 for the alignment of the website in the browser. We are going to center the website like these:



The page starts with the table on the 7 line. In this table we are going to create the website's header, menu, content and footer. This table will be only 70% of the browser's width.


The green text on the 8 line is a comment. We use comments to make the code more readable. A comment as you can see start with .

This web page is built of a table that has 5 rows and 2 columns. So the first row, the tag on the 9 line to 15, is the header of the page.

colspan="2" on line 10 tells the browser the number of columns that a cell should span. That number being 2 here.

On the 12 line we have an image which is the logo of websites, and because on most websites, you can click on the logo, and it will take you to the first page, we put this image inside a link tag .




On lines 17 and 41 are the rows that separate content from header and footer.
These rows have blue background which is given by the attribute bgcolor.
This attribute has the value #0000FF, which is the hexadecimal color code.

As you can see from the code we have two columns( two ). A column for the menu and the other for content.

The menu starts on line 21 and end on line 29. We create the menu with an unordered list.

The content of our web page is located between lines 32 and 37.
For the content we used tags like

which is for paragraph,
a line break and   (space)  which is an entity that makes part of the ISO 8859-1 symbols and mean "non-breaking space".

And because you will need to know more about entities when you create your website, here is a link that you can save.


The footer is created of a row and two columns, it starts on line 43 and ends on line 49.

On lines 46 and 47 is a paragraph with the copyright text, which had been centered with the attribute "align".

On line 50 are the closing tags for the tables that started on line 6 and 7.

Here is the complete version of My First WebSite.rar

I hope you understand what are the basics in building a website.

If you want you can view a version in which we use css of this simple website.
[Read More...]


Create a WebSite with CSS - Final part

11:12 AM Huong Giang


This is the final part of creating a website with css.

Here we are going to discuss about creating a footer for our website.



From line 48 to 52 is a round cornered line. We discussed about this earlier, here is the same thing.

The footer start on line 54 and ends on line 57, the first
ending tag. The second
ending tag is for the wrapper that centred the page.

Here is the footer's css code:



The End.

We finished building the website. Now you'll probably say that is more work then making a website without css. For a small website you are right, but for a bigger website I'm telling you that css is the key to your success.


[Read More...]


Things you should know before starting to build your own website.

11:17 PM Huong Giang



First of all you should know that for having a website, up and running, you have to pay for at least two things. Yes, even if you build it yourself.

          1. You have to pay for YourDomainName.com;

          2. You have to pay for someone to host your website.


To start building your website you should know what kind of website you want.

Are you sure you want a website or just a blog?

If you want a blog you can build one for free with Blogger or WordPress.

If you want a website, what will it be? A personal website, an online shop, or other.

Before you start building a website you must establish what type of content you will write and how will you write it.

This will depend on the public you addressed to. For example, if you make a website that contains medical information, you will have to use common language so that people can understand you, not a specific language of medicine.

What about SEO? To have a successful website you have to optimize it (Search Engine Optimization). 


If you made a website to make money online, you should know that is not possible overnight. Making money online is not that hard, but making a lots of money is hard work.



Here's short list of things you should know before you start building your website.

     - what kind of site you want to build.

     - what is the content you want to promote through the site.

     - what name will the website have. is it available?

     - how does the website will look. (I find it more easy to write code if I have a sketch).

     - don't forget that optimization of a website starts once with the creation of the website.

     - what are your targets for the website.

     - when will the website be online.


[Read More...]


Choosing the right image types for your website

4:00 AM Huong Giang


In this article we are going to discuss about the types of images that are recommended to use on a website and how to use images when creating a website.

So, what type of images are good to create a website?

Note: If you don't know what type of images exists, you can read this article on wikipedia: http://en.wikipedia.org/wiki/Image_file_formats

To create a website it is recommended that you use three types: JPG, PNG, and GIF images if you must.

Why only three type of images? Of course that are a lot more types of images, but these three are the most used on the web.


Lets discuss about these types of images:

     JPG (JPEG Joint Photographic Experts Group - full name) this format is used by your camera to save the picture you take. This type of image I recommend that you use for the photos you use to create your website; and by photos I don't mean navigation buttons in your website, for that is another type of image that you can use.

     PNG (Portable Network Graphics) this type of image is best used for your web-site's graphics, and by graphics I mean: images for the web-site's navigation menu, logos, backgrounds, and others images used to create the template of your website.

     GIF (Graphics Interchange Format) a image type that was replaced by the PNG type, but still used for creating websites. GIF images supports only 256 colours and are very ineffective if you have detailed images. I recommend you use this type of image as rare as possible. If you use this type of images, use it for simple images like a line, a bullet or something like that.


How is it best to use images when you create a website.

     - First of all do NOT use big image files on your website. If an image is bigger than 200 Kb do not insert it directly in your web pages, first resize it and then use it. For example if you have photos from your camera that you want to appear on your website,  first resize them and then upload the to your website.

     - Second do not resize your images with HTML code. It is recommended that you add the width and height of your image in the HTML code, but do NOT use this to resize your images. This is a very bad way to resize your images because this actually does not resize the images it just shows them at the dimension you specified but the images are still big and take a log time to load, slowing your website.

width="300" height="200" alt="Your Image" title="Your Images" /> - the width and height should be the same with the image's width and height, not smaller neither bigger.

- Use sprites whenever possible. Sprites are images that contain multiple images. For example if you have buttons on your website that have multiple states, this would be a good sprite:


Sprites are good to be used because they reduce the HTTP-Request of the website which leads to an increasing of the website's performances.

- Compress your images as much as possible. You can use RIOT (Radical Image Optimization Tool) software to compress with preview an image. Compressing your image files makes your website load faster.

RIOT is a free software for image compression. You can find a link to download RIOT in the web building tools section.

This is it with images. I hope this article help you better understand how to use and optimize images on your website or when you build a website.

Questions? Please feel free to comment...
[Read More...]


Create a WebSite with CSS - Part II

10:02 AM Huong Giang


Here we are going to discuss about creating a css menu for your website and formatting the website's content.

For the menu we used an unordered list.


As you can see there's nothing new in the HTML code. So let take a look at the CSS code.


- line 44 - "#menu ul{.... " we add style to all
    tags that are included in the HTML element that has the <<id="menu">>


    - line 48 - display property - in our case "display:block" makes a HTML element to take up the full width available and has a line break before and after it. The opposite   is  "display:inline" which makes a HTML element to only take up as much width as necessary, and does not force line breaks. 

    This property can also hide HTML elements, "display:none".


    - line 50 - the same thing as on line 44, but for the tag.


    - line 53 - text-decoration property - we used it with the value none to remove the underline from links. Other values for this property are: overline; line-through; underline; blink.


    - line 55 - color property - tells the browser the text color of that element.


    - line 57 - the same thing as on line 50. The style here, being applied to the "hover" state of the link. When you put your mouse over the link it will be underline.


    Here we have the content, on line 34 is id="content_1" for the first page, on the second page id="content_2" and so on. 

    STOP! when we create a website to launch online we will use only id="content". I've made id="content_no." just for you so you can see that are different pages. 
    A real website, you would have a different content for every page so you don't have to use different ids.

    on line 46 there are two end tags (
    ). One is for content and the other for the
    with the middle ID.


    As you can see we have style for every page. When creating a real website you don't need to use Ids for every page as the whole website should be formatted the same.
    [Read More...]


    Create a WebSite with CSS - Part I

    10:51 AM Huong Giang



    We are now going to create our first website with css, so open up your code editor and let's write some code.

    In this tutorial I presume that you have read the HTML Tutorial and I will not explain every tag.

    If you don't understand something please email me at emil.hossu [at] gmail [dot] com

    You can download a zip archive of the website that we will create here.



    - as you can see on line 4 we have link to an external CSS file, href="css/style.css". The link is "css/style.css" because the file is in a subdirectory called css.

    TIPS: I recommend that you create a directory structure for your website because this will be good for your website search engine optimization (SEO).

    - on line 7 we have a
    tag that is going to center our website.

    - on line 8 we have a tag for the page width, that is 950px, as you can see below.

    - from line 10 to 14 is the header.


    - on line 14 is a comment. CSS comments start's with "/*" and end's with "*/".


    - line 16 -  position property - allow you to position an element. In our case it has the value relative, which position a HTML Element relative to its normal position. This property has three more values: static which is default, fixed and absolute. The fixed value makes the element positioned relative to the browser window, a good example is the fixed background you can see on some pages. Absolute value makes the HTML element positioned relative to the first parent element that has a position other than static.


    - for the rest of the lines, I think, you understand what they do.


    - on line 12 is the logo, which is set as a background image with css.



    - line 26 and 27 - margin property - this property clears an area a round an element, outside the border. This property can be: margin-bottom, margin-left, margin-right, margin-top.


    - line 30 - we set the logo image with the background property. For our background property, we have the following values: url("path to the image"); position which is upper left corner (0 0), in our case, and the "no-repeat" value.





    - to create the line with round corners I used four
    tags. One that includes all div tag, two div tags for corners and one for the middle.

    - I've made this drawing so you can understand better.


    All images were built with GIMP programme, for more information about GIMP visit Web Building Tools in the left menu.

    - the blue background corresponds to class "line";

    - the left green "CORNER" corresponds to class "left_line";

    - the middle purple "MIDDLE" corresponds to class "middle_line";

    - the right green "CORNER" corresponds to class "right_line";



    - line 111 - padding property - does the same thing as the margin property but inside the border of the HTML element.
    [Read More...]


    Subscribe to: Posts (Atom)
    Widget By Devils Workshop
     

    Link Liên kết

    Thông tin liên hệ

    YH: huonggiangdhtn
    Skype: tthuonggiang
    Return to top of page Copyright © 2010 | joomla extensions jw-extension.net