homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

Beginner needs help on basic things

 2:55 am on Jul 31, 2012 (gmt 0)


I have recently started to learn some basic html coding in order to create a website. The website is intended for a research lab that I work for, and there the website must look a specific way.

On the left side of the main page (and every page), I want to create links such as:


Like that - a vertical column of links.

What is the best way to do this? My approach was to make a separate picture for each link (a picture for research, publication, members, so forth) and just list the linked pictures down vertically. However, I run into problems when I do this.

1) There is space between the linked pictures. The spacing is not bad, but is there any way to move the picture a specific amount rather than using <br>?

2) I want to put text in the center of the page and the link pics on the left. I have been using the align codes, but whenever the linked tabs run out (after the tab "etc" for instance) the supposedly centered text moves over to the left. Am I just better off inserting a long vertical banner the same width of my tabs after the last tab? And this brings back the issue of moving a specific image with pixel precision.

3) I know that I have just started to learn html, but my output webpage looks like a kid made it. Any tips on how to make a page look professional?

4) On numerous webpages, I have "contact location address" and more things like this at the very bottom of each page. How is this done?

5) How do you insert a "google map" window on one of your webpages, where the visitor can interact with the map?



 3:28 am on Jul 31, 2012 (gmt 0)

Hi venom5 and welcome to WebmasterWorld.

I'll get the thread rolling by asking you some questions to help us understand your level of knowledge. Everyone in here was a beginner at some point and I think most would agree that it takes determination to gain the skills to build a website. I'm sure most of us gained those skills by researching our dilemmas and chipping away at them until we began to gain basic understanding. As someone who says they work for a research lab you must surely have a full appreciation of that?

The impression I'm getting from reading your post is that putting together a website for your organization is an afterthought thrown out by some management person at the water-cooler one morning. Therefore can you help us understand what research you've done about building a website? How many hours or days, how many books you've read on the subject, how many online tutorials or DVD videos you've watched that come with most retail books these days?

In as polite a way as I can possibly say -- most members here would appreciate knowing how much effort you have put into this task yourself first because as it is right now it comes across as you wanting to have one of us simply code it for you. On a good day that might happen. A better option at this point might be just going and grabbing a free website template out there somewhere that matches your layout needs -- they are a dime-a-dozen. All you will have to do is change the default info to suit your needs.

But I also see a greater problem looming based on the link names you provided. Specifically the "Members" link. That implies you are going to have some form of controlled access to the site and that is going to require back-end programming and/or scripting knowledge. If you think you are having fun times with basic HTML layouts wait until you are confronted by the back-end. If you want your moon to shine for all to see you should hire a professional to set it free.


 3:54 am on Jul 31, 2012 (gmt 0)

Specifically the "Members" link. That implies you are going to have some form of controlled access to the site and that is going to require back-end programming and/or scripting knowledge.

There are complicated ways of dealing with members and simple ways, such as using HTACCESS password authentication files that are easily implemented and securely enforced by an Apache web server.


 3:04 pm on Jul 31, 2012 (gmt 0)

the website must look a specific way

Note, when you talk about the "look", you're talking about "presentation". In web development, it's good to have separation of presentation from the actual content. We do this by using CSS to define the presentation, and HTML to create the basic structure of the content (and JavaScript for the "behavior").

I want to create links

Think about the semantics. Always use the most semantically meaningful markup for your content. In this case, what you are really describing is a "list" of links. Don't think about the presentation just yet, think first about the semantics.
So start by creating an un-ordered list of links:

<ul id="nav">
<li><a href="#">Research</a></li>
<li><a href="#">Publication</a></li>
<li><a href="#">Members</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Location</a></li>
<li><a href="#">Openings</a></li>

Since this looks like your main navigation list, I would give it an id of "nav" which can be helpful when you want to style it. Be sure to replace all the "#" with your actual link href values.

Note, there are many ways to approach this task, I'm only going over 1 to give you an idea.

By default, unordered lists (<ul>) will display vertically, with each list item (<li>) stacked below the previous one. You'll probably want to start by removing the list item markers:

#nav {
list-style-type: none;

Next, you probably want to remove margins and padding from the list, so each <li> extends from the very left side to the very right side of the list.

#nav {
list-style-type: none;
margin: 0;
padding: 0;

Next, you'll probably want your images to all be the same height and width. Lets say 300x100 for this example. So size your list items to match, and make sure there's no margin or padding:

#nav li {
margin: 0;
padding: 0;
width: 300px;
height: 100px;

Next, we want the link to "fill" the entire list item, so lets set it to be a block element instead of inline, and give it a height that matches the list item. Lets also make sure margin and padding are 0 on this too:

#nav a {
display: block;
margin: 0;
padding: 0;
height: 100px;

Now we need some way to add the images. Lets go back to the markup and add a class to each link. Again, there are other ways to accomplish this, but this one is simple.

<ul id="nav">
<li><a class="research" href="#">Research</a></li>
<li><a class="publication" href="#">Publication</a></li>
<li><a class="members" href="#">Members</a></li>
<li><a class="news" href="#">News</a></li>
<li><a class="location" href="#">Location</a></li>
<li><a class="openings" href="#">Openings</a></li>

Now you have a way to add a background image to each link. For example:

a.research {
background: url(research.png);
a.publication {
background: url(publication.png);

This is the perfect place to use CSS sprites instead of individual images for each link. A search for CSS sprites should provide lots of information, and there are plenty of tools that make this easy.

At this point, you should have your images showing, with the text from the link also covering the image. You might consider keeping the text and adjusting it's position to sit nicely over the image, but if you want to remove the text entirely so that only the image is showing, you can just position the text off screen:

#nav a {
display: block;
margin: 0;
padding: 0;
height: 100px;
text-indent: -9999em;
overflow: hidden;

That's one way to do it. :)


 3:17 pm on Jul 31, 2012 (gmt 0)

I want to put text in the center of the page and the link pics on the left. I have been using the align codes,

What you really need are columns. "align" should be considered presentation, which means don't put it in your markup. Again, there are several ways to do this, and several of them are discussed here:

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved