Webforumz Newsletter - February 2008
FAQ
- I have designer's block! Where can I find inspiration for my new site?
- I run a site for tutorials and need to be able to display HTML code. How can I do this?
- How can I display the text 'Please turn your javascript on' if the user does not have javascript on, but not display the message to those who do?
I have designer's block! Where can I find inspiration for my new site?
The best place to find ideas and creativity is on the internet. Below are my favourite two resources for inspirational design and a little creativity:
1. www.cssbeauty.com
This website has it all, fantastic articles, great tutorials, and a brilliant gallery of the best of the web.
2. www.cssmania.com
This website is in a similar style to CSS Beauty. Anyone can submit a site, and the most recent submissions are displayed on the home page. There are also categories, which is very helpful, as it helps you target websites which are for the same reason as yours. For example, if I need to design a site for a Magazine, I can check the Magazine category.
There are also lots more sites that will help you find that little pinch of creativity!
http://www.unmatchedstyle.com/
http://www.cssremix.com/
http://www.designshack.co.uk/
http://bestwebgallery.com/
I tend to visit these sites regularly, say, nearly every day, or before I start designing a new webpage, I always look over some of these sites to find ideas to how I can make my website stand out. With so many websites on the internet, your site needs to stand out from your rivals, and a good design is a great way to gain the upperhand. A better design can often lead to more customers. Obviously care needs to be taken; you cannot just mimic a site exactly. Yours should contain bits from many other sites you liked, and combine them to create a neat, clean, and most importantly unique look.
I run a site for tutorials and need to be able to display HTML code. How can I do this?
You need to use HTML Entities. These are a series of small 'codes' which, in a browser, display various objects. In the case of displaying code, the code '<' actually displays as '<' and '>' displays '>'. Each character entity has three parts: An ampersand( &), a name and then a semi colon. So, to display your code, you need to replace all the '<' and '>' with '<' and '>'. There are two ways, I have found, which are the most effective. Firstly, I highly recommend using this site: Simple Bits. Simply enter your code in the top box, and it automatically changes the code for display purposes. Or, the other method, is to use the Find and Replace feature in your program.
Note: Each HTML Entity also has an 'ID', or an Entity Number. '<' can also be typed as '<'. However, most people find it easier to use names, because they are easier to remember. For example, the following code:
<p>A paragraph. The tags will be displayed thanks to Entities!
<p>
© Creative Coding
Will display on the page like so:
<p>A paragraph. The tags will be displayed thanks to Entities!<p>
� Creative Coding
To then style your code you should put and around your display code. You will have noticed that SimpleCode, the first link I posted, also does this for you. Then, to style, it's simply a matter of using CSS. For a full list to HTML Entities check out this link on W3Schools. http://www.w3schools.com/html/html_entities.aspHow can I display the text 'Please turn your javascript on' if the user does not have javascript on, but not display the message to those who do?
This is a very easy to solve problem. There is actually a html tag which does exactly that. It's called the <noscript> tag. The noscript tag is used to define alternate content, usually text, when a script does not execute. Please note however, if your script does not run, but the browser supports javascript, then the text in the <noscript> tag will not display either.
To use the <noscript> element, place it after your <script> tag.
<script type="text/javascript">
<!--
document.write("Hello World!")
//-->
</script>
<noscript> Your browser does not support JavaScript!</noscript>
Remember, you should wrap the script in a HTML comment, because older browsers which do not recognize the <script> tag would display the code on the page, but because of the HTML comment they would take the script and place it inside a HTML comment, so it will not actually display.
