Category Archives: World Wide Web

Easy websites with the w3.css style sheet, part 4

See also: Part 1Part 2 and Part 3.

This article will assume you know at least something about HTML, and a bit about CSS – even if it is just the basic stuff like the simple code shown in the example in part 3:

<html>
  <head>
    <title>My First Home Page</title>
  </head>
  <body>
    <p>Welcome to my home page!</p>     
    <p>Check out my other pages:</p>
    <ul>
      <li><a href="about.html">About Me</a></li>
      <li><a href="mydog.html">My Dog</a></li>
      <li><a href="poetry.html">My Poems</a></li>
    </ul>
  </body>
</html>

That makes this:

My First Home Page

But, with a bit of additional CSS styles, we can colorize and do other effects.

<html>
  <head>
     <title>My First Home Page</title>
   </head>
   <body>
     <p style="color: red">Welcome to my home page!</p> 
     <p style="color: green">Check out my other pages:</p>
     <ul style="background: black">
       <li><a href="about.html">About Me</a></li>
       <li><a href="mydog.html">My Dog</a></li>
       <li><a href="poetry.html">My Poems</a></li>
     </ul>
   </body>
</html>

That might look like this:

My First Home Page … in COLOR!

Here is an excellent tutorial on CSS:

http://www.w3schools.com/css/

I was visiting this site a few weeks ago looking up some CSS things and I ran across a style sheet they had created which let you easily create navigation bars, menus, and responsive (scales to phone or desktop screens) websites. It was called w3.css:

http://www.w3schools.com/w3css/

By linking in that style sheet, and tagging items in your web page, you can turn a boring, bland HTML page in to something more modern. By just including the “w3.css” style sheet in your page, and adding a “class” parameter to an unordered list, you suddenly have a modern navigation menubar:

<html>
  <head>
    <title>My First Home Page</title>
    <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
  </head>
  <body>
    <ul class="w3-navbar w3-blue">
      <li><a href="about.html">About Me</a></li>
      <li><a href="mydog.html">My Dog</a></li>
      <li><a href="poetry.html">My Poems</a></li>
    </ul>
    <p>Welcome to my home page!</p> 
    <p>Check out my other pages by using the top menu.</p>
  </body>
</html>

Since I wanted the menu bar to be at the top, I moved that line to the top. It looks like this:

My First Home Page … using w3.css!

And by adding a few more “class” tags, you can create horizontal side menus and a bunch more. For example, you can easily create a page layout, such as a navigation bar, left box, and main content area:

<html>
  <head>
    <title>My First Home Page</title>
  <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
  </head>
  <body>
    <ul class="w3-navbar w3-blue">
      <li><a href="about.html">About Me</a></li>
      <li><a href="mydog.html">My Dog</a></li>
      <li><a href="poetry.html">My Poems</a></li>
    </ul>
    <div class="w3-row">
      <div class="w3-third w3-container w3-green">
        <h2>Thought for the Day</h2> 
      </div>
      <div class="w3-twothird w3-container">
        <h2>Welcome to my home page!</h2> 
        <p>Check out my other pages by using the top menu.</p>
      </div>
    </div>
  </body>
</html>

…and suddenly you have this:

My First Home Page … now with CSS!

And, this design automatically becomes responsive, and resizes for phone screens:

My First Home Page … now responsive!

How cool is that?

I just had to share.

Explore the w3.css tutorial site for many examples. There are a ton of fun things you can do with very little work these days.

Have fun!

 

Easy websites with the w3.css style sheet, part 3

See also: Part 1 and Part 2.

Let’s set the wayback machine to 1995, when I first learned HTML.

The company where I worked had an internal web server. Many of the other engineers had their own small work-related web pages, so I wanted one too. I decided to learn HTML.

Consider this very, very simple HTML page:

<html>
    <head>
        <title>My First Home Page</title>
    </head>
    <body>
        <p>Welcome to my home page!</p>     
    </body>
</html>

This very simple page would present an empty screen with one short paragraph.

Perhaps we want to add a list of links to some other pages:

<html>
    <head>
        <title>My First Home Page</title>
    </head>
    <body>
        <p>Welcome to my home page!</p>     
        <p>Check out my other pages:</p>
        <ul>
            <li><a href="about.html">About Me</a></li>
            <li><a href="mydog.html">My Dog</a></li>
            <li><a href="poetry.html">My Poems</a></li>
        </ul>
    </body>
</html>

…and thus, the world wide web as we know it began, with endless, simple home pages.

HTML gave us many things, like bold text and italics, and even ways to make simple tables. As web browsers evolved, so did web pages, and soon designers were creating amazing sites by abusing the very simple HTML language.

And boy was it messy.

Netscape might show a web page differently than Internet Explorer, so designers had to use all kinds of tricks to try to make their sites viewable on different browsers and operating systems.

And boy was it messy.

Over the years, web developers came up with all kinds of hacks and tricks to make pages look “pretty” like they wanted, and look similar on different systems and browsers. They were using HTML in ways the language was never intended to be used.

Web browsers came and went, and the HTML standard evolved with browsers slowly becoming more standardized and able to render the same webpages similarly without (as many) hacks.

Somewhere along the line, cascading style sheets (CSS) started getting used, giving developers a proper way to instruct a browser on how to render HTML. The wikipedia page says CSS came out in 1996:

https://en.wikipedia.org/wiki/Cascading_Style_Sheets

…but it was many years before software supported it enough to make it widespread. I remember going through three or four expensive versions of the Dreamweaver web authoring program before finally getting one that sorta-kinda supported CSS.

I believe CSS finally came in to its own thanks to the introduction of the iPhone in 2007. This moved the world wide web from large desktop screens to tiny screens into our pockets. Since viewing full sized websites on a tiny screen wasn’t that fun, web standards continued to evolve with new approaches to make websites look less crappy on tiny screens while still looking nice on large computer screens.

And boy was it complicated…

Up next: How to make a modern looking website without having to learn (almost anything about) CSS.

Easy websites with the w3.css style sheet, part 2

Previously, I began this article by discussing my first experience making a website back in 1995, along with mentioning a custom program I wrote to help speed up the process.

Over the years, the web has grown considerably, and the HTML “language” has evolved and added more features. (Does anyone remember the “blink” HTML tag?) It’s taken two decades, but we are finally getting to the point where web browsers are finally standardized enough that website designers don’t have to rely on all kinds of hacks and tricks just to make their sites appear similar on different systems.

In the early days, a browser called Netscape dominated. Microsoft introduced their first Internet Explorer (bringing the World Wide Web to PC users) and Apple had whatever the heck it had. Other operating systems, like IBM’s OS/2 Warp, had browsers of their own … and all rendered HTML a bit differently.

It was a mess.

Pages wouldn’t look the same when using Netscape on a PC versus  Mac. Internet Explorer was even made for Macs at one point, and initially it added features that the PC version didn’t have.

It was a mess.

I know I just said that, but I feel it is worth repeating.

It was a mess.

Today, it seems pretty rare to find folks editing HTML by hand. There are endless options for HTML editors (like Dreamweaver) that aid in building websites using templates and libraries of HTML code. There are also tons of content management systems like WordPress (which this site currently uses) that let folks easily set up a site based on a pre-existing theme and customize it a bit without ever touching a line of code.

And this is why so much of the internet looks bland, boring, and similar. Folks like me pick out some very common WordPress theme and look like thousands of other sites using the same theme.

Because writing a modern-looking website is hard.

However, last week I stumbled upon something that appears to let my ancient 1995 HTML skills quickly and easily create a modern-looking website with very simple HTML code.

In the next installment, I will introduce you to the w3.css. If you have ever built HTML by hand, and are unaware of w3.css, hopefully you will be as impressed as I am by what it is capable of.

Until then…

Easy websites with the w3.css style sheet, part 1

This article will discuss an amazingly easy way to create modern websites using a cool thing I just found out about.

But, like most of my articles, we begin with a long, rambling story about my history with the web…

I built my first HTML web page in 1995, I think. It was the early and crude days of the World Wide Web. I remember having my first public website (which we all called “home pages” back then) on a free service called GeoPages. This server was later renamed to GeoCities and was eventually acquired by Yahoo!

Here is the Wikipedia entry with some of the history. It’s quite interesting seeing where things began:

https://en.wikipedia.org/wiki/Yahoo!_GeoCities

According to a news article referenced by Wikipedia, the name change happened in December 1995. I wish I still had copies of my first home page, but space was limited back then so few of us kept earlier versions of the things we did.

At some point, I moved my home page from GeoCities to Delphi, and it stayed there for awhile before I finally archived it to my own domain. It looks like I last updated it in 2000, so here is an archive of my old site that begin in 1995:

http://alsplace.os9al.com/alsplace.html

My original home page, as it was in 1999-ish.

Those were the days! HTML 1.0!

In those days, HTML was edited by hand in a text editor. I used the umacs editor on a SunOS workstation, and later, umacs for MS-DOS on a Toshiba laptop. I wrote several programs in C to help me built more complex sites by using template files and includes. I basically created a C-style “#ifdef”, “#include” and “#define” preprocessor for HTML, and also added variables.

If I wanted a consistent header and/or footer at the top of every page, I could create a file like “TOP.TEM” (top template) with that code, and then in my page files (INDEX.TEM, ABOUT.TEM, LINKS.TEM) I would do a “#include TOP.TEM”. When I ran my preprocessor, it would parse the files and generate the actual .HTM files. (Ah, those lousy days in the PC world where file names were limited to eight letters and a three letter extension!)

For variables, I could create a “#define EMAIL alsplace@pobox.com” in a template, and then anywhere the text “%EMAIL%” appeared in the file would get replaced with “alsplace@pobox.com”. It let me make global changes to my site and rebuild in seconds.

Years later, I would purchase the expensive Macromedia Dreamweaver, which is today known as Adobe Dreamweaver. (Hmmm, why is everything I use acquired by someone else?) This industrial strength web editor finally allowed me to edit in a more visual mode rather than raw HTML coding.

But, even though it added the concept of Library items and Templates, it was (and still is!) so far slower when generating a site than my ancient 1995 preprocessor.

But it looks much nicer and is easier to use.

Up next: From home page to hosting…