Starting with HTML + CSS

This short tutorial is meant for people who want to start using CSS and have never written a CSS style sheet before. It does not explain much of CSS. It just explains how to create an HTML file, a CSS file and how to make them work together. After that, you can read any of a number of other tutorials to add more features to the HTML and CSS files. Or you can switch to using a dedicated HTML or CSS editor, that helps you set up complex sites. At the end of the tutorial, you will have made an HTML file that looks like this: The resulting HTML page, with colors and layout, all done with CSS. Note that I don't claim that this is beautiful ☺ Sections that look like this are optional. Step 1: writing the HTML For this tutorial, I suggest you use only the very simplest of tools. Don't use a wordprocessor, such as Microsoft Word or OpenOffice. Step 1 is to open your text editor (Notepad, TextEdit, KEdit, or whatever is your favorite), start with an empty window and type the following: <! <!

Data Tables and Cascading Style Sheets Gallery What is this about? The CSS Table Gallery is a showcase of how CSS and data tables can work together to create usable and pretty results. Every once in a while there are emails on discussion lists asking for nicely designed tables and they are prone to go off-topic and ending in a holy war why tables are bad and why you shouldn't use them. Basically the thread/email that gave me the idea was this request on the evolt list. Well, there are legitimate uses for tables, for tabular data they are the best solution, as - properly marked up - they structure the data for the visual user and make it easy to follow for blind visitors or those using user agents without table rendering. There are some good tutorials on styling tables on the web already, but a showcase site was missing, so here you go. Table and CSS tutorials May the following off-site resources give you wisdom and inspiration: Most blatantly stolen from Laura L.

Dave Raggett's Introduction to HTML Dave Raggett, revised 24 May 2005. This is a short introduction to writing HTML. What is HTML? It is a special kind of text document that is used by Web browsers to present text and graphics. The text includes markup tags such as to indicate the start of a paragraph, and to indicate the end of a paragraph. Many people still write HTML by hand using tools such as NotePad on Windows, or TextEdit on the Mac. p.s. a good way to learn is to look at how other people have coded their html pages. For Mac users, before you can save a file with the ".html" extension, you will need to ensure that your document is formatted as plain text. This page will teach you how to: start with a title add headings and paragraphs add emphasis to your text add images add links to other pages use various kinds of lists If you are looking for something else, try the advanced HTML page. Start with a title Every HTML document needs a title. <title>My first HTML document</title> Add headings and paragraphs <!

SiteTimer About SiteTimer For more generic/non technical information about OctaGate SiteTimer, please see this version of the page. Technical Details About SiteTimer (it uses AJAX!) Unless you're familiar with AJAX , you might want to read this page about AJAX first. There are currenly one SiteTimer server, located in Stockholm (Sweden) that performs the actual page downloads. As the user clicks the "Start Monitor" button, an AJAX request is sent to the SiteTimer server, requesting a new monitor. Referrer Checkup As you enter the OctaGate SiteTimer page, the page actually makes an AJAX call to determine if you came from a AJAX page that mentions AJAX or not. If this page determines that you came from an AJAX page, a link appears under the search box suggesting that you might want more information about AJAX. You can try it for yourself, here are two pages that both link to OctaGate SiteTimer, one mentions AJAX and the other doesn't:

Dave Raggett's Introduction to HTML Dave Raggett. Having mastered the basics, it is time to move on to more advanced features. The following will teach you how to: force line breaks introduce non-breaking spaces use entities for special characters link into the middle of pages use preformatted text flow text around images define clickable regions within images create tables use roll-overs and other tricks enable users to listen to sound files p.s. How to force line breaks Just occasionally, you will want to force a line break. The Willows 21 Runnymede Avenue Morton-in-the-marsh Oxfordshire OX27 3BQ The br element never needs an end-tag. How to introduce non-breaking spaces Browsers automatically wrap text to fit within the margins. Sweetened carbonated beverages, such as Coca Cola, have attained world-wide popularity. It is bad practice to use repeated non-breaking spaces to indent text. How to use entities for special characters There are a number of other entities you may find useful: <ul> ... Tables with

ATF Project Home About The Ajax Tools Framework (ATF) is a tool integrated with Eclipse for Web developers who use Ajax techniques. ATF provides tooling that allows a user to edit, debug, and monitor CSS, HTML, and JavaScript applications and a framework on which adopters can build advanced and technology specific tools. Learn more about Eclipse Ajax tools Resources Installing ATF Try it out yourself using our latest builds. Quick Navigation Downloads. Incubation Objects, Images, and Applets in HTML documents 13.1 Introduction to objects, images, and applets HTML's multimedia features allow authors to include images, applets (programs that are automatically downloaded and run on the user's machine), video clips, and other HTML documents in their pages. For example, to include a PNG image in a document, authors may write: <BODY>Here's a closeup of the Grand Canyon: <OBJECT data="canyon.png" type="image/png"> This is a closeup of the Grand Canyon. </OBJECT></BODY> Previous versions of HTML allowed authors to include images (via IMG) and applets (via APPLET). They fail to solve the more general problem of how to include new and future media types. To address these issues, HTML 4 introduces the OBJECT element, which offers an all-purpose solution to generic object inclusion. The new OBJECT element thus subsumes some of the tasks carried out by existing elements. The chart indicates that each type of inclusion has a specific and a general solution. Attribute definitions src = uri [CT]

53 CSS-Techniques You Couldn’t Live Without CSS is important. And it is being used more and more often. Cascading Style Sheets offer many advantages you don’t have in table-layouts - and first of all a strict separation between layout, or design of the page, and the information, presented on the page. Thus the design of pages can be easily changed, just replacing a css-file with another one. CSS is important. Over the last few years web-developers have written many articles about CSS and developed many useful techniques, which can save you a lot of time - of course, if you are able to find them in time. Let’s take a look at 53 CSS-based techniques here at Smashing Mag you should always have ready to hand if you develop web-sites. 1. 2. 3. 4. 5 Powerful Tips And Tricks For Print Style Sheets 5. Generated content was first introduced in the CSS2 specification. 7. 8. 9. 10. Stephen Shaw introduces a technique for perfect horizontal and vertical centering in CSS, at any width or height. 11. 12. 13. 14. 15. 16. The web is growing up.

Objects, Images, and Applets in HTML documents 13.1 Introduction to objects, images, and applets HTML's multimedia features allow authors to include images, applets (programs that are automatically downloaded and run on the user's machine), video clips, and other HTML documents in their pages. For example, to include a PNG image in a document, authors may write: <BODY>Here's a closeup of the Grand Canyon: <OBJECT data="canyon.png" type="image/png"> This is a closeup of the Grand Canyon. Previous versions of HTML allowed authors to include images (via IMG) and applets (via APPLET). They fail to solve the more general problem of how to include new and future media types. To address these issues, HTML 4 introduces the OBJECT element, which offers an all-purpose solution to generic object inclusion. The new OBJECT element thus subsumes some of the tasks carried out by existing elements. The chart indicates that each type of inclusion has a specific and a general solution. 13.2 Including an image: the IMG element src = uri [CT]

Continuing Intermittent Incoherency