Welcome to Web Design Guide
Web Design Tutorial Article
. For a permanent link to this article, or to bookmark it for further reading, click here.
13. Understanding HTML
from:Once you’ve learnt it, HTML is a relatively simple language. However, while the HTML tags themselves are easy, creating an HTML document that works as intended on a web server requires you to know a few extra things that aren't often explained.
Understand Doctypes- Often valid HMTL documents don't actually start with the tag – they have one extra tag before it. This is the doctype, and it must be present right at the top of your document for it to be valid HTML. There are 2 doctypes you need to know about-
And the XHTML one-
The main function of doctype is to tell the web browsers exactly what version of HTML your page was written in, to help them to interpret it correctly.
HTTP Errors-HTTP is the way a web browser communicates with a web server, and this communication includes information about your pages, such as histories, cookies etc. You need not worry about the internals of HTTP, but it's worth knowing that it works by the browser sending a request to the server for a certain page, and the server then responding with a code.
Your website should be set up to handle error codes well. For example, a 404 (page not found) error should show a page with links to the most useful parts of your site. Other common error codes include:
200 - OK
301 - Page moved.
403 - Forbidden (no authorization to access).
500 - Internal server error.
MIME Types- MIME types are another part of the HTML header. They tell the web browser what kind of file they are about to send. Browsers don't rely on HTML files ending in .html, JPEG images ending in .jpeg, and so on: they rely on the content-type header. Mentioned below are some common MIME types:
text/html – HTML
text/plain - plain text.
text/css - CSS
image/png - PNG image
image/gif - GIF image.
image/jpeg - JPEG image.
How to Insert things that aren't HTML- One of the common problems faced by HTML users is how to insert things like Javascript and CSS into an HTML document. Luckily this is one of the easiest problems to solve: you simply use the link and script tags, like-
And you’re done.
Web Design Tutorial News
Build a responsive site in a week: media queries (part 4)
In the penultimate part of our responsive web design tutorial, Clearleft's Paul Robert Lloyd explains how media queries work, and describes a device-agnostic approach to breakpoints.
Read more...Build a responsive site in a week: typography and grids (part 2)
In the second part of our responsive web design tutorial, Clearleft’s Paul Robert Lloyd will tell us how to translate static page designs into adaptable, fluid websites. So let go of those pixels and learn to love proportions!
Read more...Build a responsive site in a week: going further (part 5)
In the final part of our responsive web design tutorial, Clearleft’s Paul Robert Lloyd explains how there is more to a responsive design than just flexible layouts, images and media queries
Read more...Build a responsive site in a week: images and video (part 3)
In the third part of our responsive web design tutorial, Clearleft’s Paul Robert Lloyd looks at incorporating images and video into responsive layouts, and describes some of the problems in this area that still need solving.
Read more...Google Embraces Responsive Design, Recommends You Do the Same
Responsive design gains another convert as Google's Webmaster blog offers up a new tutorial, walking beginners through the basics of using media queries to handle the web's wide variety of screens.
Read more...