Comments in CSS and HTML

When working with any kind of code, you may come to a point where you need to label certain lines. You may want to stop and come back to work on the code another time and leave yourself a note so you don’t have to read through each line to make sure it is correct. You may also want to write yourself notes if you are a beginner and need to refer back to that text document to know what each line of code means/does. Another reason for adding comments would be if you were sharing your code with someone else. They need to know why you wrote the code that you did and what it is actually doing.  I am going to show you how to write a comment in CSS and HTML. They are slightly different but will do the same thing. It will allow you to write anything you want in your text document without affecting the code itself.


HTML:

<a href=”index.html”>Home</a>

<!-- Link to Home page --> 

<a href=”contact.html”>Contact</a>

<!-- Link to Contact page -->

<a href=”index.html”>Home</a>

<!-- Link to Home page --> 

<a href=”contact.html”>Contact</a>

<!-- Link to Contact page -->

The red text shows the comments in HTML. It starts with “<!--“ and ends with “-->”. You can write anything you want between them. The purpose of comments is to write something without changing your code at all. I even like to add fun little comments if I am sharing my code with someone else because I know that whatever I write will NOT show up on the page. 

CSS: 

p {

font-size: 24px;

/* 24 is also the current font size for the content section on the home page */

}

p {

font-size: 24px;

/* 24 is also the current font size for the content section on the home page */

}

This is what a comment will look like on your CSS style sheet. It looks a little different than a comment in HTML, but it acts the same way. You can write whatever you want without changing your code. Start with “/*” and end with “*/”. It’s as simple as that. 

These comments can go anywhere in your code. Just make sure to use the correct format for the type of code you are working with. Remember that the comments will not be interpreted, so you can write in any format you want to. 

Knowing your HTML tags: Anchor Tags

If you have ever worked with HTML, you know the frustrations that come with setting up each page and making sure they all link together. I am going to show you how to understand how the pages link, and we will break down the line of code to understand what each part means.

The first thing we want to look at is the basic structure of the link itself.

<a href=”index.html”>Home</a>

The parts of the link that are highlighted in red are the tags. You need one at the beginning, and one at the end to close the tag. It will not work unless you close the tag. This specific tag is an anchor. It is working to make the pages link together.

<a href=”index.html”>Home</a>

This next highlighted part is the attribute. This attribute specifies the page that it will be linked to. So, if we were adding this line of code to our “About” page, this link would take us to the “Home” page (index.html).

<a href=”index.html”>Home</a>

Our “Home” page text file is called “index.html”. Make sure you put the exact name of the text file you are linking to or it will not recognize it and it will not work. Remember to surround it in quotes too.

<a href=”index.html”>Home</a>

For this example, I am linking my “About” page to my “Home” page. This line of code is in my “About” text file. The highlighted text is what will appear on my page when viewed in a browser. You can put anything you want here. Depending on how you style your links in your style sheet (CSS), the word “Home” will appear that way. None of the other text shown here will appear.

So there you have it! Linking your pages together is as simple as adding this line of code to your html text file and changing the names around. Now that you know all of the parts of this tag, it should make linking the pages together a little easier.

Web Design: One Trick That Will Save Some Time (and stress)

When designing a website, one of the most important things to keep in mind is, “Is this site easy to use?” There are a few ways to make sure your site will be easy to use for your target audience. First, you need to know your target audience. Who will be using your site? What will they be looking for? Is that thing they are looking for easy to find?

The next thing you want to think about is your color scheme. Are the colors too bright? Too dull? Do I have too many colors? There are a lot of ways to choose the color scheme for your site and a lot of helpful websites out there to help with this problem too. I know personally, I have spent hours finding the right color scheme for some of my sites. It can be a frustrating situation.

Even after you choose the right colors, you need the right font, layout, and navigation. The list goes on and on, but one thing you can do to make this all come together is keep things consistent. What does that mean? Don’t confuse your audience with a different layout, color scheme, and font choice for each page. They will find it hard to navigate through your site and they will leave.

When you start to design a website, the first step in the process (after brainstorming) is to create wireframes. You can do this on paper (graphing paper is best), or you can use a pixel based program on your computer. For this example, we will be using Adobe Photoshop CS5 to create a wireframe that stays consistent on each page. 

Remember, your wireframe does not need color or pictures yet. The only thing you are doing here is planning out where all of your site elements will be. Here is an example of a wireframe for a website design:

You will notice that it is the most basic idea of what my site will look like. I used greyscale shapes and text to show where everything will be once I get to the designing phase. I put in photo placeholders so I can have an idea of what the final design will look like. I also added my navigation bar with my button placeholders. As a designer, you will start to see the final product as you move from this phase to the next. You will start to pick colors and font choices after each wireframe is designed. It is one step that will save you a lot of time.

As far as consistency goes, you will want to make sure most of these elements follow you from page to page. If this is my home page (the first page users will come to), then this will set the tone for the rest of the site. Users will get comfortable here and expect the same things to be on the next page they come to. The only things you will swap out are pictures and text (content).

The things that are circled in red should stay the same on every page. The user will get lost without these elements.

The first thing that is circled is my website title and logo. You want to remind the user where they are and show off that logo you spent hours working on. This is an easy way to keep your site design looking consistent. Again, it will make the user feel comfortable.

The next thing that is circled is the navigation. You never want to change the navigation. NEVER. If you move the navigation around on each page, the user will almost always get lost, get frustrated, and get out. This is another comfort issue that some designers forget. The user needs to know how to move from page to page. Even if the content changes, the navigation will always be there to help them out. Think of it like a tour guide for your website.

When designing a website, you can easily overwhelm yourself when you start thinking about all of the things you have ahead of you. Step one: breathe. Step two: think about your target audience. Step three: brainstorm and start wireframing those ideas out. Once you have the wireframes made, keep consistency in mind and start designing. Change the colors, add pictures and logos. Having the wireframe will keep you from losing your consistent design and keep you from losing users on your site.

Photoshop CS5 Blend Modes

Adding a blending mode to a layer can add a quick effect to a photo or logo design in just a few simple clicks of the mouse. Think of it as blending two layers into each other. The two most commonly used blend modes are Multiply and Screen. They darken or lighten images respectively. All of the blend modes are just different ways to make two layers interact with each other.

Blend modes can be found in your layers panel in the drop down menu towards the top. By default, it should say “Normal”. When adding a blend mode to a layer, keep in mind that it will effect that layer and the layer below it. Make sure your layers are in the correct stacking order before adding a blend mode or you will not get the results you want.

To start, I have my background layer (“Background”) changed to “Layer 0” so that it can be hidden. To unlock your background layer, simply double click and when prompted to name the layer, click “OK”. Once you have the layer unlocked, you can click the hide/show icon (looks like an eye) to hide the layer.

I also, added a photo on a new layer above a rectangle shape on a separate layer. These will be the two layers that I will blend together.

Here is what the layers will look like:

The next step is to move the layers so that they are overlapping. The photo layer should be above the rectangle layer, so you will not be able to see the rectangle once they are stacked on top of one another. Once you add a blend mode, you will be able to see the rectangle layer.

Make sure you have your photo layer selected and choose a blend mode from the drop down list at the top of your layers panel. You can always choose the layer with the blend mode, and change it back to “Normal” if you do not like the effect. Blend modes are all about preference. Which one looks best to you?

This is what the photo looks like with the blend mode “Overlay” chosen. The layer with the purple rectangle that it is being blended with, will effect the way the picture will look. By changing the color, the blending mode will look different.

The only change I made here was changing the fill color of the rectangle layer behind the picture. By doing this, the two layers will blend differently.

Blend modes will work with any kind of layer. Remember that adding a blend mode will change the way TWO layers interact with each other so make sure the layer below the selected layer is the right fit for the blend mode. By changing the color and blend mode, you can have hundreds of effects on one photo.