basic howto

in web design

Having been in web development since the turn of the century, I have had the chance to help quite a few web design newbees get started, and even more developers make their creations work across browser-land. It has been fun all along, but I am more than happy with letting others take over that part of web development now.

Recently I was presented with the s.c. “cheat sheet” you see below, and only had to find a reason to reserve some space and include it. As text in images can pose reading problems in responsive design, and is highly inaccessible regardless of design, I decided to add an equivalent text-version for the otherwise well-composed and informative image.

the annotated “cheat sheet”…

HTML & CSS

If you're thinking of building a website, it's likely you've heard the terms HTML and CSS. They go hand in hand in building a web page, but each serves a unique purpose.

HTML is a markup language, but its creators wanted to give website developers greater control, so they added elements and parameters which enable developers to define the appearance: such tags (elements) as <font>, <b>, <i>, <bgcolor>.

Over time, however, the page code became cumbersome and unreadable. So, page layout (HTML) and its visual design (CSS) were separated. Together, HTML and CSS are the building blocks of your website.

Complete Web Page Interface

HTML

In 1989, Tim Berners-Lee invented the web with HTML as its publishing language. HTML (Hyper Text Markup Language) was created to help programmers describe the content on a website.

  • Embedding media (widgets, images, audio, videos, text, graphics)
  • Manipulating image parameters
  • Adjusting page layout
  • Enabling navigation
  • Creating image maps
  • Adding image rollover or hover attributes

CSS

CSS was first proposed by Håkon Wium Lie and co-created with Bert Bos around 1996. Developed to complement HTML, CSS (Cascading Style Sheets) is what makes a website look and feel amazing.

  • Design colors, fonts & layout (headings, text, tables, lists, photos)
  • Adapt display across platforms
  • Easier site maintenance
  • Style can be modified without changing HTML elements
  • Pages can be tailored
  • Modify multiple web pages using a single style sheet

Structure

You can use CSS in HTML, but you cannot use HTML in CSS style sheets.
HTML consists of tags surrounding content.

Very basic page structure…

  • <!DOCTYPE html>
  • <HTML>
    • <HEAD>
      • <TITLE> (page title) </TITLE>
      • <STYLE> (local CSS snippets) selector {property:value; property:value;} </STYLE>
      </HEAD>
    • <BODY>
      • <H1> (headline) </H1>
      • <P> (paragraph) <A HREF="(link address)">(link text)</A> </P>
      • <H2> (headline) </H2>
      • <P> (paragraph) </P>
      • <H3> (headline) </H3>
      • <H4> (headline) </H4>
      • <H5> (headline) </H5>
      </BODY>
    </HTML>

The Main Advantages of CSS

CSS allows you to save time

Once you've created CSS styles, you can use them with a variety of web pages; develop a style for each HTML element and use it wherever you want.

Changing the design of web pages is easier

You only have to change a style. This change will automatically be applied to all items on a web page that use that style.

Pages load faster

If you use CSS you don't need to constantly repeat the style of HTML attributes. Simply create a single style rule in the CSS for the tag (element) and it will be used throughout the HTML document. Less code—pages load faster.

Support for multiple devices

Style sheets allow you to optimize the appearance of page content to any type of device.

More opportunities

There are many more style attributes in CSS compared to HTML, so using CSS you can create a much more attractive design.

Universally recognized web standards

Today, stylistic HTML attributes are regarded as outdated and it is recommended that you use CSS. To make sure web pages will be compatible with future versions of browsers, CSS should be used.

HTML & CSS – Cheat Sheet

The HTML & CSS – Cheat Sheet was created by the Firstsiteguide.com Team. Give them a visit.

and here we go, again.

The “cheat sheet” is as good a starting point as any for those who are new to modern web design, apart from the “text in images” problem mentioned earlier.
Good thing I baked in a solution to that little problem when this site was launched in 2011 … not unlike how it was solved a decade ago, but tailored for improved browsers and AT software this time around.

As my website is a live playground for all kinds of experimental coding techniques and alternative solutions, this website is not well suited as a “how-to design” guide for newbees. It is rather a place to roam for those who have already reached an advanced stage in the fine art of web-carpentry.

However, the basic building-blocks are the same for all of us, regardless of stage and status. Thus, some basics are included everywhere on this site of mine, so also on this page.

sincerely  georg; sign

Hageland 10.oct.2016
last rev: 12.oct.2016



www.gunlaug.comadvice upgradeadvice upgrade navigation