I want to create a couple of websites, one for my wife’s business and one for myself but I am trying to decide where to start. I have been brushing up my HTML skills and have made a couple of practice sites but not put anything online yet. I don’t know much CSS, but I have been trying to read up on it and it seems that it might be a good idea to set out my CSS first, then write the HTML. Does this sound like a good idea? Because I am not used to using CSS, I have had trouble trying to insert it in to my existing practice pages because I need to decide which elements will be formatted a certain way and then swap out all the existing elements etc.
I know lots of people will have experience here so what are your thoughts?
They go together. You can’t logically ‘do the css’ without thinking about the structure of the HTML.
Here’s what I’d do: First, think about the structure of the site. Break down your content into categories, and get some rough ideas of the layout. Essentially, you’re storyboarding. At this level, you should think about site navigation (one of the most overlooked aspects of web design). So say you come up with a plan that you’re going to have a masthead on every page, a left-hand navigation pane, and a bottom pane for page navigation. Think about how many pages will be on the site, and how people will want to link between them. Then figure out your navigation plan.
Once you have that, you can build a page template. Decide if you’re going to use frames, tables, or CSS positioning to layout the site. Then use HTML/CSS to build a single page. Once you have the layout looking good, save the template so you can use it on subsequent pages, and add your content.
Sam Stone’s suggestions are very good. Allow me to make some modifications, assuming you are starting from Web Page 101.
Build a test site with (hidden) tables for site structure and layout. Use deprecated font tags for your content. Get comfortable with the concept separating the visual markup and presentation of the site (your hidden table structure) from the visual presentation of the content (font tags).
Now replace your font tags and other non-structure code with CSS. You can now use a single stylesheet (embedded or external) to control all top level visual appearance.
The last step is to replace your hidden table site structure with CSS. You will eventually have a site where presentation (design and layout) is separate from actual content.
Others may disagree and say you should be pure from the start, and start out only in CSS. I disagree. I liken the above process to understanding and developing your basic math skills with paper, pencil and memorizing the Times Table. Once you have that down, move to using a calculator.
Finally, forget frames from the start. They are not a good place to start for beginners, and can be a bear to maintain if a site grows. Frames are also user-unfriendly. Make the KISS Principle your mantra.
Don’t even bother with table structure and layout at first – with HTML, think in terms of pure content, how you want your stuff grouped and what order it should be placed in. Surround everything with <div> blocks, using class= or id= to give each block a unique identifier type. Then use CSS to position/size the blocks. The advantage of this method is that you can completely reorganize your stuff just by changing the style sheet.
If you want to explore the depths of CSS, definitely pop by the CSS Zen Garden. One page, but a gazillion different appearances…
I am a little unclear on the <div> tag. Should I use that in place of <p> tags around paragraphs, or should I surround a group of paragraphs in a <div> tag. Also, can I assign an arbitrary value to the class or id identifier to distinguish between each one, or are there values set out which I should use?
You use <div> in addition to ordinary HTML tags. Something like this:
<div id="header">
<p>Evil Overlady</p>
</div>
<div id="content">
<h1>My Manifesto</h1>
<p>I'm right. </p>
<p>If you disagree with me, you're wrong.</p>
</div>
<h1>
<div id="menu">
<ul>
<li><a href="revolution.html">Short term plans</a></li>
<li><a href="backstabbing_of_useful_idiots.html">Medium term plans</a></li>
<li><a href="enemies.html">List of those who will be first against the wall when the revolution comes</a></li>
</ul>
</div>
And then you use CSS to decide how the different divs should look – say, place the header on top, and the menu in a column to itself to the left (and if you decide you don’t like the look of that, put it as a horisontal row under the header, or maybe just a box in the top right corner – the beauty of CSS is that you can move stuff around whenever you change your mind, just by changing the CSS-file). And does it look better with black text on purple background or vice versa, and…
You can call your divs anything you want.
I found W3schools useful when learning how to do stuff.
To each their own. However, as already illustrated by the OPs response not understanding a ,div. tag, it’s often easier to start with a well-known (table design) and move to a unknown (tableless CSS design). It is the approach I take when teaching HTML and CSS.
The identifiers, class= and id=, have specific rules associated with each. You can use a named class= identifier as many times as you want on a page, but you only use a named id= identifier only once per page.
CSS Zen Garden. is a great site, but I wouldn’t start learning CSS from it.
Like the <blink> tag, table design is a bad habit that should not be instilled in up-and-coming web developers. Teach good habits at an early age, I say.
As for <div>s, it’s worth noting that you can nest them, so you can easily set up hierarchical arrangements:
…that’s your problem right there. You shouldn’t be embedding color information (style) into your raw HTML. Instead, tag them as different classes (say with the <span> tag), and use the style sheet to assign the colors.
<p>This sentence has words in <span class="color1">one color,</span> <span class="color2">another color,</span> and a <span class="color3">third color.</span></p>
Yeah, it requires some pre-planning, most notably about what kind of stuff you want to display on your site, but that’s what separates world-class coding from fly-by-night amateurs.
Alas, I think many sites are still using tables as layout tools. Dreamweaver MX still does that. I still do it for my projects. I would like to do layouts with pure CSS though - and it is a must if it is DHTML.
I am going to suggest to RickQ that you may be interested in getting a professional HTML editor, or a shareware one, if you are going to do a lot of websites. Crafting web-pages by hand is tedious and time-consuming. A WYSIWYG editor can cut down the time, and allow you to experiment more. Also, the CSS syntax could be bewildering to begin with (it was, for me), and an editor such as Dreamweaver could take care of it for you.
However, there’s no way to learn HTML/CSS by hand-crafting webpages. What I suggest is you take peeks at examples CSS so you can know the syntax. The examples HTML are great. Just one tip. I am handcrafting, normally I include the CSS class straightaway, irregardless whether I have defined them or not. Such as
<h1 span="news_heading">Latest News</h1>
I would define the style “news_heading” later.
Also, try to keep to a consistent naming scheme for your styles.
One other thing to mention – if you’re expecting to add/update the information on your site(s) fairly regularly, and your sites are more than a few dozen pages, you may want to look into a Content Management System instead. These are software systems (free and otherwise) that handle the drudgery of generating the HTML code, allowing you to focus more on writing and updating your content instead.
Maintaining a site with a dozen static HTML pages is fun at first, but when it balloons to 100-300 pages and you’re still making HTML changes by hand for the smallest thing, it gets very tiresome…
Thank you all for your responses, this has definitely given me some food for thought and I think I have a good grasp on how to prepare my sites. I am also reading lots of tutorials and looking at examples online.
Duckster, thanks for the site link, the site looks good and I am sure I will be spending lots of time there.
I am only planning on doing a couple of small sites, probably less than 5 pages each, both for small businesses. I am not too worried about coding the HTML by hand because while it is a little tedious, I like to keep shapening my skills and learning.
Of course, I use a language far beyond CSS and HTML. In involved writing my code and then swearing at the computer when everything disappears or moves to a 1/8 in column on the left hand side of the page or the pictures overlap or the body text is supersized. That’s when the language called CUSS comes in. A typical command would be:
< CUSS >Goddamit, you stupid-ass machine, fork you with a flying screwdriver from hell! You can’t do the simplest command without fucking up! I KNOW I coded that right! Hell, fuck, damn! < /CUSS >
Although CUSS is difficult to implement and doesn’t work on most platforms, it’s marvelously satisfying for a variety of reasons.
Actually, no. My problem with CSS comes from the following in your suggestion.
Lets say I want to change color3 on ONE page but not on others. I now have to edit the HTML to use color4 (or color2 or color1).
So CSS will ensure that I can globally change color3 to any other actual color, but if I want to change the look on one element on one page I need to edit the HTML to assign a different ‘color’.
True that’s the fault of the designer or the customer not knowing what they want to do before creating the HTML, but I’m not sure I know anyone who knows exactly what every element is going to do before they start coding anything.
I suppose what I’m trying to say is that CSS is good, but don’t fall into thinking that once you create your HTML you will never need to touch it again and that CSS will solve all of your problems. There are still design requirements that will arise that will require you to edit the HTML.
