Html and Css Tutorial

Web design has evolved rapidly over the years. Initially, browsers were basic, and early versions
of HTML were fairly limited in what they enabled designers to do. Therefore, many
older sites on the Web are plain in appearance. Additionally, the Web was originally largely
a technical repository, hence the boring layouts of many sites in the mid 1990s—after all,
statistics, documentation, and papers rarely need to be jazzed up, and the audience didn’t
demand such things anyway.
As with any medium finding its feet, things soon changed, especially once the general public
flocked to the Web. It was no longer enough for websites to be text-based information
repositories. Users craved—demanded, even—color! Images! Excitement! Animation!
Interaction! Even video and audio managed to get a foothold as compression techniques
improved and connection speeds increased.
The danger of eye candy became all too apparent as the turn of the century approached:
every site, it seemed, had a Flash intro, and the phrase “skip intro” became so common
that it eventually spawned a parody website.
These days, site design has tended toward being more restrained, as designers have
become more comfortable with using specific types of technologies for relevant and
appropriate purposes. Therefore, you’ll find beautifully designed XHTML- and CSS-based
sites sitting alongside highly animated Flash efforts.
Of late, special emphasis is being placed on usability and accessibility, and, in the majority
of cases, designers have cottoned to the fact that content must take precedence. However, just because web standards, usability, and accessibility are key, that doesn’t mean design
should be thrown out the window. As we’ll see in later chapters, web standards do not
have to come at the expense of good design—far from it. In fact, a strong understanding
of web standards helps to improve websites, making it easier for you to create cuttingedge
layouts that work across platforms and are easy to update. It also provides you with
a method of catering for obsolete devices.

If you’re relatively new to web design, you may be wondering about the best platform and software for creating websites. Ultimately, it matters little which platform you
choose, as long as you have access to the most popular browsers for testing purposes
(a list that I’d now include Apple’s Safari in, alongside Internet Explorer, Firefox, and
Opera). Regarding software, there’s an overview in Appendix E (“Browsers Guide”), but
this isn’t an exhaustive guide, so do your own research and find software to your liking.

This Blog centers on the design and technology aspects of web design, but close attention
must always be paid to your potential audience. It’s no good forcing design ideas that
result in inappropriate visuals, unusable navigation to all but the most technically minded
of people, and huge download times on your site’s unsuspecting visitors.
Prior to creating a site, you must ascertain what your audience wants and expects in terms
of content, design, and how the site will work (by way of talking to the relevant people,
and also, if your budget allows, by using surveys and focus groups). You don’t have to take
all of your audience’s ideas into account (after all, many will be contradictory), but be
mindful of common themes and ensure they’re not ignored.
Technical considerations must be researched. If you’re targeting designers, you can be
fairly sure that a large proportion of the audience will be using monitors set to a high resolution
and millions of colors, and you can design accordingly. If your site is aimed at business
users, be mindful that much of your potential audience will likely be using laptops (orolder computers, for staff at the lower end of the ladder), with screen resolutions of
10245768 or lower.
Determining the web browsers your audience members use is another important consideration.
Although use of web standards (used throughout this book) is more likely to
result in a highly compatible site, browser quirks still cause unforeseen problems; therefore,
always check to see what browsers are popular with a site’s visitors, and ensure you
test in as many as you can. Sometimes you won’t have access to such statistics, or you may
just be after a “sanity check” regarding what’s generally popular. A couple of useful places
to research global web browser statistics are www.w3schools.com/browsers/browsers_
stats.asp and www.upsdell.com/BrowserNews/. Note, though, that any statistics you see
online are effectively guesswork and are not a definitive representation of the Web as a
whole; still, they do provide a useful, sizeable sample that’s often indicative of current
browser trends.
Although you might be used to checking browser usage, and then, based on the results,
designing for specific browsers, we’ll be adhering closely to web standards throughout this
book. When doing this, an “author once, work anywhere” approach is feasible, as long as
you’re aware of various browser quirks (many of which are explored in Chapter 9). Of
course, you should still always ensure you test sites in as many browsers as possible, just to
make sure everything works as intended.

Before putting pen to paper (and mouse to keyboard), it’s important to think about the
reason behind putting a site online. Millions already exist, so why do you need to create
one yourself? Also, if you’re working for a company, perhaps you already have plenty of
marketing material, so why do you need a website as well?
I should mention here that I’m certainly not trying to put you off—far from it. Instead, I’m
trying to reinforce the point that planning is key in any web design project, and although
some people swear that “winging it” is the best way to go, most such projects end up gathering
virtual dust online. Therefore, before doing anything else, think through why you
should build a website and what you’re trying to achieve.
Companies and individuals alike have practical and commercial reasons for setting up a
website. A website enables you to communicate with like-minded individuals or potential
clients on a worldwide basis. If you’re a creative talent of some kind, you can use a website
to showcase your portfolio, offering online photographs, music tracks for download, or
poetry. If you fancy yourself as a journalist, a blog enables you to get your opinion out
there. If you own or work for a business, creating a website is often the most efficient
means of marketing your company. And even if you just have a hobby, a website can be a
great way of finding others who share your passion—while you may be the only person in
town who likes a particular movie or type of memorabilia, chances are there are thousands
of people worldwide who think the same, and a website can bring you all together. This is
perhaps why the paper fanzine has all but died, only to be reborn online, where development
costs are negligible and worldwide distribution is a cinch.
In practical terms, a website exists online all day, every day (barring the odd hiccup with
ISPs), which certainly isn’t the case with printed media, which is there one minute and in
the recycle trash the next. Distribution is less expensive than sending out printed material—
a thousand-page website can be hosted for $10 per month or less, but sending a
thousand-page document to one person (let alone a thousand or several thousand) may
cost more than that. Likewise, development (particularly corrections and updates) is often
significantly cheaper, too. For example, if you want to rework a print brochure, you have
to redesign it and then reprint it. Reworking a section of a website often means swapping
out a few files, which is efficient and affordable. So, for large companies and individuals
alike, the ability to have relevant information online in a form that can often be updated
in mere minutes, thereby keeping all interested parties up to date, is hard to resist!

Even in the wildest dreams of science fiction and fantasy writers, few envisioned anything
that offers the level of potential that the Internet now provides for sharing information on
a worldwide basis. For both businesses and individuals, the Internet is now the medium of
choice, largely because it enables you to present your wares to the entire world on a 24/7
basis. But the technology’s origins were more ominous than and very different from the
ever-growing, sprawling free-for-all that exists today.
In the 1960s, the American military was experimenting with methods by which the US
authorities might be able to communicate in the aftermath of a nuclear attack. The suggested
solution was to replace point-to-point communication networks with one that was
more akin to a net. This meant information could find its way from place to place even if
certain sections of the network were destroyed. Despite the project eventually being
shelved by the Pentagon, the concept itself lived on, eventually influencing a network that
connected several American universities.
During the following decade, this fledgling network went international and began opening
itself up to the general public. The term Internet was coined in the 1980s, which also heralded
the invention of Transmission Control Protocol/Internet Protocol (TCP/IP), the networking
software that makes possible communication between computers running on
different systems. During the 1980s, Tim Berners-Lee was also busy working on HTML, his
effort to weld hypertext to a markup language in an attempt to make communication of
research between himself and his colleagues simpler.
Despite the technology’s healthy level of expansion, the general public remained largely
unaware of the Internet until well into the 1990s. By this time, HTML had evolved from a
fairly loose set of rules—browsers having to make assumptions regarding coder intent and
rendering output—to a somewhat stricter set of specifications and recommendations.
This, along with a combination of inexpensive hardware, the advent of highly usable web
browsers such as Mosaic (see the following image), and improved communications technology,
saw an explosion of growth that continues to this day.
Initially, only the largest brands dipped their toes into these new waters, but soon thousands
of companies were on the Web, enabling customers all over the globe to access
information, and later to shop online. Home users soon got in on the act, once it became
clear that the basics of web design weren’t rocket science, and that, in a sense, everyone could do it—all you needed was a text editor, an FTP client, and some web space.
Designers soon got in on the act, increasingly catered for by new elements within HTML;
Cascading Style Sheets (CSS), which took a while to be adopted by browsers, but eventually
provided a means of creating highly advanced layouts for the Web; and faster web
connections, which made media-rich sites accessible to the general public without forcing
them to wait ages for content to download.
Therefore, unlike most media, the Web is truly a tool for everyone, and in many countries,
the Internet has become ubiquitous. For those working in a related industry, it’s hard to
conceive that as recently as the mid-1990s relatively few people were even aware of the
Internet’s existence!
So, from obscure roots as a concept for military communications, the Internet has evolved
into an essential tool for millions of people, enabling them to communicate with each
other, research and gather information, telecommute, shop, play games, and become
involved in countless other activities on a worldwide basis.