HTML Archive
The Footer Copyright Notice
Almost all websites contain some sort of copyright notice in their footer (e.g. Copyright © 2008 Apple Inc. All rights reserved.). But what’s the best way to do this? We’re going to take you through the requirements for your copyright notice, and a nifty JS (or PHP) trick for ensuring that your copyright year is always up to date.
What’s required?
The humble copyright notice is always useful to show in the footer, as a way of stating your claim over a site. Interestingly, however, it is not required for you to have copyright over the graphics, content and artwork of your site. This comes into place as soon as you’ve created the content and placed it in the public domain. Placing a copyright notice is still advisable to deter potential plagiarists and stake your claim. The generally accepted format is:
Copyright © 2008 Design Shack
There are a couple of points to make:
- Make sure that the year is current (see below)
- Use the HTML code © to display the copyright symbol, ensuring that your site’s XHTML is valid
- Ensure the word ‘copyright’ appears
If you have specific requirements for how people can use certain content of your site, using a Creative Commons License would be advised. This allows you to select how content can be used in a more official and controlled manner.
Future proof
When creating a website, it can be incredibly tempting to simply drop in the basic requirements, and not think too heavily about future proofing your site. One of the most telling signs that a site isn’t regularly updated is an out of date copyright year. This can be very easily made automatic, through the use of a simple piece of PHP or JS code:
1 | <?php echo date("Y"); ?> |
Alternatively, if you would prefer to use JavaScript, the following works well:
1 2 3 4 | <script type="text/javascript"> var d = new Date() document.write(d.getFullYear()) </script> |
Stick with one of these methods, and you’ll never be kicking yourself in February again for not updating the copyright year!
Search Forms in Safari
It is remarkably simple to put this design feature in place on your site, and it can improve functionality greatly for those using a Mac. Whether Firefox and Internet Explorer will integrate this feature into their browsers in the future is unknown – although it is fairly unlikely.
How to turn the feature on
Using the following code for a form will cause the enhanced search field to display in Safari:
1 2 3 4 5 | <form action="form.php" method="post"> <input type="search" name="search" autosave="mysite-autosave" results="10" /> <input type="submit" value="Search" /> </form> |
The type="search" tells safari to use the field as a search box, and the autosave="mysite-autosave" results="10" sets additional features about the recent search information.
The downsides
The negative aspect of adding this feature is that your code won’t validate. It’s up to you to decide whether it is a acceptable down-side of improving the browsing experience for those using Safari. We think it is – and you’ll see the enhanced search field on Design Shack!
10 CSS Table Examples
Today we’re going to take a look at a selection of beautiful tables styled using CSS. These are sourced from a variety of different sites. If you’re interested in learning how to do this yourself, be sure to take a look at a few of our CSS tutorials!
Custom 404 Error Page
The standard 404 error page can often be really frustrating for readers. Using a simple .htaccess file can allow you to customise your error page, and ensure that users are displayed a useful alternative.
The Basics of Semantics
Semantics is a word which strikes fear into many a designer’s heart, but it need not be a difficult or complicated topic. It concerns meaningful expression, avoiding presentational markup and using appropriate and meaningful tags where possible.
Essentially, designing and writing HTML code in a semantic way is as simple as keeping your HTML concerned with the content of the page and not the layout. Some of the simple steps below will help you to ensure that you stay semantically pleasing to search engines, spiders and visitors:
Title tag
Ensure that your page title tag is descriptive and meaningful. Ensure that it changes for each page of your site to reflect the content on that page.
Headings
It’s possible to define your page’s headings with div and span tags, but that doesn’t convey any meaning that it is a heading. Using h1 to h6 tags to differentiate and style the headings on your page is much better.
Tables and Forms
By default, tables and forms are not very semantic and can be very general. They also lack accessibility for those using non-standard browsers. For tables, ensure that you use the thead tag to explain the columns of your table. For forms, adhere to using the label tag to describe what each input, checkbox etc is there for.
Images
It seems like it gets said over and over again, but use alt attributes for all your images to ensure that they are described within the page content – both for the benefit of search engines and disabled users.
Seems straight forward… but why?
Using semantic code won’t make your website look any different and it won’t directly benefit your readers in any way. One direct effect you may see is that search engines spider your website in a more correct and effective way.
Also, semantic coding is paving the way for the future. New devices, software and applications will be around in the next 5, 10, 100 years that still use the content on the web to power them. Semantics set the standard which future systems will adhere to and interpret, so future proof yourself!
HTML Form Basics
HTML is used mainly for presenting and showcasing information for the visitor. But it’s also easy to allow them to enter information and use it in various ways. This tutorial uses the example of a contact form.
Simple Contact Form
Providing your web host supports PHP, you just need to follow our example below to email the contents of a form to yourself. Firstly, this is the HTML code to put on your page:
1 2 3 4 5 6 | <form action="submit.php" method="get"> Name: <input type="text" name="name" /><br /> Email Address: <input type="text" name="email" /><br /> Message: <textarea name="message"></textarea><br /> <input type="submit" value="Send Form" /> </form> |
This will result in a form which looks similar to the following:
So you’re able to collect the data. Now to explain how to email it. To do this, you need to make a file called submit.php and put it in the same folder as your HTML file. It’s quite complicated to go into exactly how this works, but if you copy and paste the following code it should work fine:
1 2 3 4 5 6 7 8 9 10 | <?php $subject = "Website Message"; $message = "Someone sent you a message from your website: Name: $name Email: $email Message: $message"; $youremail = "me@mywebsite.com"; mail($youremail,$subject,$message,"From: $email"); echo 'Thankyou for filling in a form!'; ?> |
All you need to do is change me@mywebsite.com to your actual email address. You’ll be receiving form submissions from your website in no time!
Other Form Options
HTML doesn’t just use text fields for collecting information. You also have the option to use checkboxes, radio buttons and drop down lists. Feel free to take and use the examples below:
Radio Buttons
These allow you to enforce that the visitor only makes one choice, unlike checkboxes which allow you to select multiple answers/settings. They look something like:
The code you use to create the above is:
1 2 3 | <input name="favouritecolor" type="radio" value="red" /> Red <input name="favouritecolor" type="radio" value="blue" /> Blue <input name="favouritecolor" type="radio" value="yellow" /> Yellow |
Checkboxes
Several checkboxes can be ticked, allowing multiple selections. It is as simple as changing the word radio above to say checkbox:
The code you use to create the above is:
1 2 3 | <input name="favouritecolor" type="checkbox" value="red" /> Red <input name="favouritecolor" type="checkbox" value="blue" /> Blue <input name="favouritecolor" type="checkbox" value="yellow" /> Yellow |
Drop Down Boxes
Drop down boxes work in a similar way to radio buttons, allowing the user to select one option. However, they save a great deal of space if you are dealing with a long list – selecting your country for example:
The code you use to create the above is:
1 2 3 4 5 6 7 | <select name="favouritecolor"> <option value="red">Red</option> <option value="blue">Blue</option> <option value="yellow">Yellow</option> <option value="green">Green</option> <option value="pink">Pink</option> </select> |
Introduction to HTML – Part 3
HTML (Hyper Text Markup Language) is the core of designing websites. Part three of this introduction covers the use of forms for collecting information from the visitor, and how to display tabular data in tables.
The first part of this tutorial dealt with the difference between HTML and CSS, a simple HTML page, and Paragraphs/Line Breaks/Headings. The second section discussed Hyperlinks, Pictures and Lists and the final section will now cover the use of forms for collecting information from the visitor, and how to display tabular data in tables.
Tables
Tables are the perfect way to show data which needs to be tabulated. Please please don’t use tables for layout out your content on the page – that’s what CSS and style sheets are for! Here is an example of a basic table:
1 2 3 4 5 6 7 8 9 10 11 12 | <table border="1"> <tr> <td>Heading 1</td> <td>Heading 2</td> <td>Heading 3</td> </tr> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> </tr> </table> |
This would result in a table which looked like the following:
| Heading 1 | Heading 2 | Heading 3 |
| Data 1 | Data 2 | Data 3 |
It’s not the prettiest thing in the world, but it does get the job done. You can alter the look and feel using CSS.
Forms
So now you know how to show content on a page using HTML, what happens when you want to get some information from a visitor to your website? The technique used to do this is appropriately called a form. Once you have collected the information, you need to decide what to do with it. You can either add it to a database (a bit beyond the scope of this article), or email it. HTML can’t deal with emails or databases, but a different language called PHP or ASP can. Providing your web host supports PHP, you just need to follow our example below to email the contents of a form to yourself. Firstly, this is the HTML code to put on your page:
1 2 3 4 5 6 | <form action="submit.php" method="get"> Name: <input type="text" name="name" /><br /> Email Address: <input type="text" name="email" /><br /> Message: <textarea name="message"></textarea><br /> <input type="submit" value="Send Form" /> </form> |
This will result in a form which looks similar to the following:
So you’re able to collect the data. Now to explain how to email it. To do this, you need to make a file called submit.php and put it in the same folder as your HTML file. It’s quite complicated to go into exactly how this works, but if you copy and paste the following code it should work fine:
1 2 3 4 5 6 7 8 9 10 | <?php $subject = "Website Message"; $message = "Someone sent you a message from your website: Name: $name Email: $email Message: $message"; $youremail = "me@mywebsite.com"; mail($youremail,$subject,$message,"From: $email"); echo 'Thankyou for filling in a form!'; ?> |
All you need to do is change me@mywebsite.com to your actual email address. You’ll be receiving form submissions from your website in no time!
Conclusion
That rounds up our Introduction to HTML, and you should have a basic grasp of how to start creating a website. We’d recommend looking at our CSS Basics now, to grasp how to get your website looking great. Also, check out our Introduction to Web Standards to see how they can help your designing.
Introduction to HTML – Part 2
HTML (Hyper Text Markup Language) is the core of designing websites. Part two of this introduction covers the Hyperlinks, Pictures and Lists.
The first part of this tutorial dealt with the difference between HTML and CSS, a simple HTML page, and Paragraphs/Line Breaks/Headings. The second section will discuss Hyperlinks, Pictures and Lists.
Hyperlinks
HTML uses a concept called hyperlinks to link one HTML page to another. The code for these is straight forward:
1 | <a href="page2.html">Go to Page 2</a> |
The page2.html part is the file which you would like to link to. The Go to Page 2 part is the text which the visitor will click on to follow the link. Generally, a website has a navigation bar – close to the top of the page – which is made up of a collection of hyperlinks to allow visitors to navigate through the website. Some more tutorials cover this in our navigation category.
Images and Pictures
Pretty pictures are a vital part of a website, and graphical content can draw in users and provide extra information. The tag to add a picture is very straight forward, but you must remember two important things. You need to note which folder you put the picture and link to it correctly, and all image filenames are case sensitive. To link to a file called flower.jpg in a directory (folder) called pictures, you would use the following:
1 | <img src="pictures/flower.jpg" alt="Flower" /> |
The src part shows the folder and filename of the image, and the alt part gives a description of the picture for people who aren’t able to view images in their web browser.
Lists
HTML can use two different types of lists. These are bulleted, or ‘unordered’ lists and numbered, or ‘ordered’ lists. These is a different piece of code to display each one, but in essence they are identical. One will result in a bullet being displayed next to each item, the other a number going up by one each time. The code you would use is:
1 2 3 4 5 | <ul> <li>List Item 1</li> <li>List Item 2</li> <li>List Item 3</li> </ul> |
The ul part states this is an unordered list, and the li part denotes each item in the list. You can probably guess which part you would change if you want a numbered, ordered list – you simply use ol in place of ul. Lists are very easy to use in HTML, and can also be combined with CSS to create navigation menus which look great. The final part of this tutorial will look at using tables and forms in HTML, for displaying tabular data or taking input from the visitor by means of a form.
Introduction to HTML – Part 1
HTML (Hyper Text Markup Language) is the core of designing websites. Part one of this introduction covers the difference between HTML and CSS, a simple HTML page, and Paragraphs/Line Breaks/Headings.
HTML and CSS – The difference
Think of HTML as the structure of the website you are making. It will contain the text, images and links – all put in the correct order – to compose the page that you want to display. CSS is the look and feel of the page. In your CSS you define the colours, fonts, backgrounds and borders surrounding the content you have in your HTML file. We explain below how to attach your CSS file to your HTML file, but read our CSS tutorials for more information on that topic.
A simple HTML page
The best way to learn is by doing, so the following are a few examples of HTML in action. This is, at it’s simplest, a HTML page:
1 2 3 4 5 6 7 8 9 | <html> <head> <title>My Website</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> Website Text </body> </html> |
That’s it – it’s much more straight forward than you would expect. HTML works on a system of tags, with each one surrounded by brackets. Any tag that you open must be closed. This can be done as above with a seperate opening and closing tag (i.e. body
