A lot of people always think of what they say, slicing or basing? In this article your will read about what it is and what you should say.
Slicing
Very shortly said slicing is cutting a layout into small pieces. If a layout is created, which is usually in PhotoShop or another similar program, the layout is one big picture. And if you cut it in different pieces you can make with that the xHTML document. Officially slicing is also making the xHTML document, but a lot of people forgot that.
Basing
Basing is properly a non-official word. It is thought by someone on a later moment. The word means also the same as Slicing. Cutting the layout into pieces and making the xHTML document. Before the word basing exists, slicing was the word for making the xHTML document. The process of a website has three steps. Namely:
1. Designing with PhotoShop
2. Design to xHTML
3. Scripting (php, js,)
So the word basing is a word that is exactly the same of slicing. Some people think if they hear or read the word slicing that it is only cutting the layout into a lot of pieces. But that isn’t true. In the program PhotoShop there is a slicetool. With that tool you can easily cut you layout into pieces and PhotoShop will make the document. But a lot of people don’t appreciate that, one of the reasons is that PhotoShop don’t make semantic code.
Semantic
Semantic code is a very important component. Semantic code is not anything like a new kind of html, but it is just the way how you make your html. Like the use of the ><h1 and that kind of things. It has a lot advantage like:
• You have a lot less code. So your website will be loaded faster.
• Search machines have spiders to find websites and save them. But a spider can’t see any style. Only the code. But with some html tags you can say to the spider that a word is very important. If you have a website about snakes and you have the word snakes between the ><h1 and ></h1. You say to the spider that that is a very important word.
• The browser can very easier give a good picture of what the website looks like.
A simple example:
If you made a menu, you can make it with a separate div. And with the ><a element you can set a hyperlink on it. But a menu is properly a list with some choices where you can choose out. That’s why you should make a menu with an ><ul and an ><li element.
A small tip so you can see if you have a semantic code is to put all your css and JavaScript away. You see that the important things like your website should name be bigger.
Image Optimization
Image optimization is that you give all your images a good extension, so png, gif and jpg. For sharp pictures your always use jpg and for animated stuff you use gif. All other images will use png. And if your image is transparent, you also need png.
You also can repeat your image with css. The best way to do that is to make a 1px of the image and with css you can repeat it. This is also good for the load-time of your website.
There is a problem with one thing; Internet Explorer doesn’t support the transparency of a png image. You will see a gray background on the image and that looks probably always bad. But you can fix this with javascript, but some people have turned it off. So that isn’t a very good solution. You also can use css to fix it. Microsoft has there own solution. With conditional comments you can give other things to the browser, but only to the Internet Explorer browser. On the image here you can see how you fix this with css.
Valid (x)HTML
Valid html is something that people often confuse with semantic code. But there is a big different. Some html document could be valid html, but there isn’t any semantic code. Valid html is html that is made by the standards. But there are many standards, and you can indicate it with a doctype declaration. There is also a different between HTML and xHTML, one of the difference is that some tags need to end wit >/ instead of >. So ><br word <br >/ and <img >… word <img … >/. If you are not sure that your document is valid. You can check it here: validator.w3.org.
Doctype Declaration
A doctype is a line above ><html. With this you can say to the browser with version of the standards you will use. This is handy, because a tag can have another force by a version in 2000 and in 2008. There are three other versions of the doctype it self. These versions are:
- Strict, this version you need if you want a very clean html.
- Transitional, with this version you may use more elements, like ><font
- Frameset, this one you use if you have frames in your html
Character Encoding
you will need a character encoding for letters like ë and é. If you don’t have a character encoding the ë will change to a question mark.
Some tips
• First you need to know a lot about html and css
• Don’t use JavaScript for rounded corner and things like that
• Use conditional comments if you need them for Internet Explorer
• Always try to make your layout good in the following browsers: IE 6/7/(8) – FireFox – Opera – Safari
• Use sIFR only for titles, not for whole texts
.
