Category: HTML

Categories

Search Forms in Safari
Articles / 9 Sep 2007

Search Forms in Safari

Search fields in SafariIt 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:

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
Articles / 30 Aug 2007

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
Accessibility / 31 Jul 2007

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
Accessibility / 16 Jul 2007

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
Articles / 23 Jun 2007

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:

This will result in a form which looks similar to the following:

Name:

Email Address:

Message:


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:

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:

Red
Blue
Yellow

The code you use to create the above is:

Checkboxes

Several checkboxes can be ticked, allowing multiple selections. It is as simple as changing the word radio above to say checkbox:

Red
Blue
Yellow

The code you use to create the above is:

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:

Introduction to HTML – Part 3
Articles / 5 May 2007

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:

This would result in a table which looked like the following:

Heading 1Heading 2Heading 3
Data 1Data 2Data 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:

This will result in a form which looks similar to the following:

Name:

Email Address:

Message:


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:

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
Articles / 4 May 2007

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:

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:

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:

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 3 – Tables and Forms

Introduction to HTML – Part 1
Articles / 1 May 2007

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.

test

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:

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) or using one tag such as below, for a line break, br. Here is a brief description of the tags used in the above example:

html – This tells your web browser that you want to display a HTML page – everything inside those tags is HTML.

head – The ‘head’ is a section where you can show the title of the document and provide information about what the page contains.

title – The title is self explanatory, and displays in the title bar of your web browser window.

link rel="stylesheet" type="text/css" href="style.css" / – This links the CSS file (style.css) to your HTML document.

body – The ‘body’ is the main section. Anything inside the body tag will display in your web browser.

This won’t really do much good though, as it will display a blank page with ‘Website Text’ inside it. The following will explain how to get a little more advanced:

Paragraphs, Line Breaks and Headings

This is a slightly more advanced example which introduces the idea of defining headings, using the h1 tags, putting p around paragraphs, and using br where you just want a normal line break. Having one page is OK, but generally you would want more than one page, with the ability to link them together…

Introduction to HTML Part 2 – Links, Pictures and Lists

0 0 0 0