Search results for “SSRhtml/index.dml”
186 articles returned
By Ben Buchanan
In this article Ben Buchanan looks at how you should style lists and links with CSS, including discussion of using custom bullets, faux columns, styling different link states and more, with multiple examples.
CSS allows you to attach background images to elements, and this feature has become one of the most important things in any web designer's toolbox. In this article, Nicole Sullivan takes you through modern best practice usage of CSS background images, including CSS sprites and more.
30: The CSS layout model - boxes, borders, margins, padding
By Ben Henick
Another fairly complicated - but fundamental - area of CSS is the layout model. How do different elements stack on top of one another? How does padding, margin, etc. affect the space between different elements? What about border, width, height? In this article Ben Henick sheds light on all these topics. The box model is explained here.
By Tommy Olsson
Inheritance and cascade are two of the most important concepts in CSS. The former relates to how child elements inherit styles form their parents, and the latter defines how CSS rules are applied to a document, and how conflicting rules do or don't overwrite one another. In this article, Tommy Olsson explores these concepts in detail.
Cascading Style Sheets are the second major topic of the Web Standards Curriculum! You can use CSS to style your HTML in whatever way you want, changing fonts, colors, element positions on the page, and more. In this article Christian Heilmann give you a basic introduction, including CSS anatomy and basic concepts, CSS shorthand, and how to apply CSS to HTML.
In this article, Ben Hawkes-Lewis looks in detail at how to do accessibility testing of your sites, including which guidelines to use, automated testing, and testing with real users.
Accessibility is one of the most important topics for any aspiring web developer to learn about - the practice of developing your web sites so they can be used by users with disabilities such as blindness, and users browsing on alternative devices such as mobile phones. In this article Tom Hughes-Croucher takes you through the basics of the whole topic.
By mnfrancis
In this article, Mark Norman-Francis revisits the importance of the doctype in your HTML documents, showing how the W3C validator uses it to validate your documents and return to you a list of HTML errors, if any are encountered. He also explains why this is so useful, and what you should do to fix your HTML errors.
23: Creating multiple pages with navigation menus
Single HTML pages are important, but most commonly a web site will consist of multple pages, connected together using a navigation menu built out of lists and links. This article explores how to build different types of best-practice navigation menus.
22: Generic containers—the div and span elements
By mnfrancis
Sometimes you'll come across a grouping of content that doesn't have an existing HTML 4 element (or elements) that will suit it exactly. Typical archetypes include page headers, footers, and navigation menus. In these cases, you can wrap the content in a <div> or <span> element, and give it a class or id attribute. This will group it together and provide a hook to manipulate the content as a single entity using JavaScript or CSS at a later date. These generic elements are the subject of this article.
Mobile style - CSS Mobile Profile 2.0
By David Storey
In this article, David Storey looks at CSS Mobile Profile 2.0, the W3C’s recommended subset of CSS that should be used for styling your documents if you intend them to be viewed across mobile devices. He lists what is supported under the Mobile Profile, how it differs from CSS 2.1, and some advice on progressive enhancement (applying more advanced styles to more capable devices).
Once you go through this developer guide, you should be able to make widgets using the WCL (Widget Chrome Library). By using the library, the widgets will be resizable and work on multiple platforms, giving the user the best possible user experience on any device.
Remote debugging with Opera Dragonfly
By David Storey
In this article David Storey introduces the remote debugging feature of Opera Dragonfly - Opera’s new developer tools. You'll learn how to set up Opera Dragonfly for remote debugging and how to connect Opera Mobile 9.5 to Opera Dragonfly, so you can debug content running directly on it. You'll also learn how to remotely debug widgets on Mobile devices.
1: Introduction to The Web Standards Curriculum/Table of Contents
By Chris Mills
Here's where the education begins! In this article, Chris Mills lifts the lid on Opera's Web Standards Curriculum, a free course (licensed under creative commons) that aims to teach proper web standards–based web design and development from scratch. Read more to find out what the thinking behind the course is, who can benefit from it, what the table of contents is for the course, and how you can give feedback and get involved. We currently have the first 23 articles published, but more will follow in coming weeks and months.
Supplementary: Getting your content online
It is all well and good knowing how to create a killer web page, but what about actually getting your code up on to the web so that others can make use of your functionality? In this article Craig Grannell explains how.
Supplementary: More about the document <head>
In this article, Christian Heilmann adds to the knowledge in his original web standards curriculum article about the HTML <head>, looking at some slightly more advanced features such as defining document collections, alternative document versions, Feeds, and adding favicons.
21: Lesser-known semantic elements
By mnfrancis
This article covers the less common semantic elements in HTML, that exist to identify specific common types of content - contact information, citations, abbreviations, superscript and subscript, insertions and deletions, line breaks, and more.
HTML forms are vital when you want to gather feedback or other information from your site visitors. This article will take you through the basics of creating HTML forms as gently as possible.
18: HTML links - let's build a web!
Some may argue that links are the most important feature of the Web - they make it a Web after all, linking all the pages together. In this article, Christian Heilmann takes you on a detailed tour of using the <a> element to create accessible, meaningful links.
The Web sure got more interesting when images were introduced! This article shows you how to add images to your pages using the <img> element, and how to use alt, title and longdesc to provide further background information and make them more accessible. It finishes off with a brief look at adding decorative images to a page using CSS, a topic which will be covered in a lot more detail in the CSS section of the course later on.
By Ben Buchanan
In this article, Ben Buchanan gives you the lowdown on the venerable HTML list, covering unordered lists, ordered lists, nested lists, and definition lists. It finished off with a nice complete recipe example.
15: Marking up textual content in HTML
By mnfrancis
One of the most important things you can do in HTML is structure plain, basic paragraphs of text, and this article shows you how. It covers the difference between block and inline elements, and basic HTML constructs like paragraphs, quotes, preformatted text, and emphasis.
14: Choosing the right doctype for your HTML documents
At the very top of every good HTML document is a doctype - a link to a set of rules that the HTML in your document must follow. This is useful for many reasons. In this article, Roger Johansson tells you why, and takes you through the different available doctypes.
In this article, Christian Heilmann takes you through the most important parts contained within the HTML <head> element. This is the part of the HTML that describes your document, and links it to further resources.
By mnfrancis
HTML is the language that contains all our content on the Web, and gives it structure and meaning. It is probably the most important language to learn when starting web design, so pay close attention to this article, which introduces the basics.
By paul-haine
Typography - what typefaces you choose for your design and how you choose to position your text - is an important on the web as it is in printed work, but web typography is a bit more limited. In this article Paul Haine takes you through all the basics of web typography, its limitations and theory.
10: Colour schemes and design mockups
By Linda
If you followed on with the previous two articles in this series, you should now have a good idea of what color scheme you want your site to have, and roughly what the layout of each page will be. In this article, we move on to the next stage - creating a mockup of the site with site features added, so you can get more of an idea of how the final version will look.
9: Building up a site wireframe
By Linda
Before you actually dive in to putting the code together for a web site, you will want to sketch out where everything is going to go on your web pages, broadly speaking. Maybe you'll want to compare multiple different layout choices before deciding on a final one? This is called wireframing; in this article Linda Goin takes you through the basics of building up a simple but effective wireframe.
By Linda
What colors to include on your web site is a very important design decision for you to make. What mood do you want to convey with your web site, and how do you ensure that color choices make your content easier to access, not harder? In this article Linda Goin takes you through basic color theory, including typical color schemes.
7: What does a good web page need?
By mnfrancis
Following on from the previous article on Information Architecture, this article takes the concept a bit further, looking at what features you should include on your web site so that it effectively does it's job, and site vistors can easily find what they came for. Navigation, what to include on the home page, usability, and accessibility are all looked at here in brief.
6: Information Architecture - Planning out a web site
Before you even start building a web site, you really need to plan out its overall structure first, working out how many pages you need, which ones link together, etc. This forms the basis of Information Architecture, a discipline that Jon Lane will get you up to speed on in this article.
5: Web standards – beautiful dream, but what's the reality?
The ideal of using web standards and best practices, for a more inter-operable, maintainable, accessible web is a good one to try to get as close to as possible in all sites you create. So why then is it that much of the web is still built using bad, outdated practices? In this article Jon Lane explores the reality of web standards usage, and look at why the Web is like this.
4: The Web standards model - HTML, CSS and JavaScript
In this part of the curriculum, Jon Lane will take you through the web standards model, explaining how HTML, CSS, and JavaScript should be used on a typical web page, the three-tier model of content, presentation and behavior, and why it is a recognized best practice on the Web today.
3: How does the Internet work?
This articles explains how the Web works, broadly speaking. It covers the means by which web pages are downloaded from a server into your web browser, and what types of technology are available for creating web pages.
2: The history of the Internet and the web, and the evolution of web standards
By mnfrancis
When learning about web development, it is useful to know where the Web as a whole entity came from, and how web standards were agreed on and developed. In this article Mark Norman-Francis does just that, looking at the Web's early origins, the browser wars, and the formation of the W3C and the rise of web standards.
Applying color tints to web pages with SVG filters and JavaScript
In this article Ruud Steltenpool presents a very interesting experiment of his that allows you to change web page colours on the fly using SVG and JavaScript - the solution makes use of feColorMatrix, linearGradient and foreignObject, and is packaged up as bookmarklets to allow end-users to easily make use of it.
Opera Skinning part 1: Introduction
In this series of articles, Opera skinning expert Lars Kleinschmidt provides the most complete analysis to date of the Opera skinning system. He first looks at the basics including how skins are packaged and how to make simple changes to your default skin, before going deep into how to customize every aspect of your Opera's look and feel by altering the graphics and contents of the skin.ini file. Every section of skin.ini is explored in detail. This series of articles is updated for Opera 9.5.