Frequently Asked Web Design Questions

April 12, 2002

6 min read

0 views

Building Your First Web Page: Essential Tools and Learning Path

Starting a website is a chance to turn an idea into an online presence. Whether you’re an entrepreneur, a freelancer, or a hobbyist, the fundamentals of web design are surprisingly approachable once you break them down into manageable steps. Begin by deciding what you want your site to do. A simple portfolio, a small online shop, or a personal blog all share the same core building blocks: structure, style, and content.

Most modern web designers lean on a few core languages: HTML for structure, CSS for visual styling, and JavaScript for interactivity. If you’re brand‑new, focus first on HTML. It’s the skeleton that tells browsers what each page contains - headings, paragraphs, images, links, tables, and more. Once you can create a clean, semantic page, you’ll find CSS and JavaScript follow naturally.

The internet is full of free tutorials and reference sites that can accelerate your learning curve. A highly recommended starting point is HTML Goodies. Their step‑by‑step primer walks you through creating a basic page, adding images, and understanding the box model. Follow the lessons at http://www.htmlgoodies.com/primers/primer_1.html. By the end of the first chapter, you’ll have a solid grasp of tags, attributes, and nesting.

Practice drives mastery. Pick a small project - perhaps a “About Me” page - and build it from scratch. Don’t rush; give yourself time to experiment with different heading levels, paragraph styles, and lists. Save your file as index.html and open it in multiple browsers to see how it renders. If you notice any quirks, revisit the tutorial, adjust the code, and test again. The act of debugging early on builds a habit that will pay dividends later.

Once you’re comfortable with the basics, explore more advanced topics. Try embedding an image gallery with simple <img> tags and alt text for accessibility. Add a contact form using <form> elements. Then challenge yourself to replace basic inline styles with CSS rules defined in a separate stylesheet. This progression keeps the learning curve steady and rewards you with tangible progress at each stage.

Remember that design is iterative. Even seasoned developers revisit old projects to refactor code or improve aesthetics. So set up a version control system - Git, for instance - so you can track changes, experiment safely, and revert if necessary. A GitHub or GitLab account also showcases your work to potential employers or clients.

In short, building your first site isn’t a leap of faith; it’s a series of small, deliberate actions. Start with HTML, use free resources, practice consistently, and gradually layer on CSS and JavaScript. By following this path, you’ll create a solid foundation for more sophisticated projects down the road.

Making Your Site Cross‑Browser Friendly: Practical Tips

Browser compatibility has long been a pain point for designers. While the web’s dominance rests on two major players - Internet Explorer (IE) and Netscape Navigator - today’s landscape includes Chrome, Firefox, Safari, and Edge. Nevertheless, ensuring your site looks consistent across the older versions of IE and Netscape remains useful, especially if you expect some visitors to use legacy software.

Begin by testing your site on both browsers early in the development process. Download IE from http://www.microsoft.com/windows/ie/default.asp and Netscape Navigator from http://channels.netscape.com/ns/browsers/download.jsp. Installing both gives you a real‑world view of how your markup behaves.

When centering elements in older Netscape versions, use the <center> tag instead of the CSS text-align: center; approach. The <center> tag is recognized by both IE and Netscape, making it a safe bet for simple layout tasks. For example:

Prompt

Form fields behave differently across browsers when the maxlength attribute is involved. Netscape expands the input box to match the numeric value, whereas IE keeps the default width. If you want consistent sizing, specify a fixed width using CSS or add a size attribute.

Margin control is another area where IE and Netscape diverge. In your <body> tag, you can include both sets of attributes:

Prompt

The first four apply to IE, the last two to Netscape. Setting these to zero removes the default browser spacing, giving you a clean canvas.

Avoid design techniques that require special plug‑ins or extensions. Many visitors will not install Adobe Flash or Java applets, and such dependencies reduce accessibility. Stick to HTML, CSS, and JavaScript that runs natively in the browser.

Once you’ve applied these guidelines, test your pages with automated tools. http://www.anybrowser.com renders your site in a wide range of browser versions, letting you spot discrepancies quickly. For a deeper analysis,

Prompt

<table></p> <p><tr></p> <p> <td>Left column text here.</td></p> <p> <td>Right column text here.</td></p> <p></tr></p> <p></table>

If the table is flush against the page edge, add a wrapper or specify margins. For instance:

Prompt

<center></p> <p><table width="80%" cellpadding="0" cellspacing="0"></p> <p><tr></p> <p> <td>Content goes here.</td></p> <p></tr></p> <p></table></p> <p></center>

The width="80%" keeps the table 80% of the viewport, automatically creating a 10% margin on each side.

Instead of nesting <font> tags in every table cell, use CSS to apply styles globally. Add a <style> block inside the <head> section:

Prompt

This rule forces every table cell to use Arial at 12 pt, simplifying the markup and ensuring consistency.

Remember that old HTML attributes like align or bgcolor are deprecated. Whenever possible, use CSS for alignment, padding, and background colors. For example, to center text within a cell, apply text-align: center; to the td selector.

When working with images, always include descriptive alt text. This not only improves accessibility but also helps search engines understand the content. For decorative images, use alt="" to indicate that screen readers can skip them.

Lastly, test your page on multiple devices. A layout that works on a desktop might collapse on a phone. If you want responsive columns, consider using flexbox or grid layouts, but for simple projects, nested tables with explicit widths still perform reliably across older browsers.

By systematically checking file paths, using CSS for styling, wrapping tables with margins, and ensuring images have correct filenames and alt attributes, you’ll eliminate most common visual bugs. These practices produce clean, readable code and a polished user experience.

Creating Functional Forms and Going Beyond the Basics

Forms are essential when you need user input - contact inquiries, newsletter sign‑ups, or data collection. Building a form that actually works involves more than just the <form> tag; you must process the data on the server side.

Start by constructing the form’s HTML structure. Specify the method (GET or POST) and the action URL that points to a server‑side script. For example:

Prompt

<form method="post" action="/cgi-bin/submit.cgi"></p> <p> <label>Name: <input type="text" name="name"></label><br></p> <p> <label>Email: <input type="email" name="email"></label><br></p> <p> <input type="submit" value="Send"></p> <p></form>

Replace /cgi-bin/submit.cgi with the path to your script.

The form itself does nothing until you have a CGI or server‑side script that receives the data. Many web hosts support Perl, PHP, or Python scripts. A simple Perl CGI might look like this:

Prompt

#!/usr/bin/perl</p> <p>use strict;</p> <p>use warnings;</p> <p>use CGI qw/:standard/;</p> <p>print header;</p> <p>print start_html('Form Result');</p> <p>my $name = param('name');</p> <p>my $email = param('email');</p> <p>print "Thanks, $name. We’ll email you at $email soon.";</p> <p>print end_html;</p>

Save the script as submit.cgi in your cgi-bin directory and ensure it’s executable.

If writing a CGI script feels daunting, search for ready‑made scripts. The CGI Resource Index offers free Perl scripts for common tasks: