Creative-Le Studios » Tutorials http://creative-le.com Inspiration, Resources, and Experience of a Web Designer Thu, 29 Jul 2010 16:00:21 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Beginning The Use of CSS in HTML http://creative-le.com/tutorials/using-css-stylesheets-in-html/ http://creative-le.com/tutorials/using-css-stylesheets-in-html/#comments Sat, 20 Mar 2010 21:21:10 +0000 Dan http://creative-le.com/?p=836 Cascading Stylesheet or CSS for short is one of the way web developers use to design an HTML site. With CSS and images, you can make any site design whether it’s a simple portfolio site, or a Wordpress theme.

Table of Contents

1. Beginning HTML – HTML Doctypes, Head, Body
2. HTML Images and Hyperlinks – IMG, A
3. Basic HTML Structure, Tags, Classes, and IDs – HTML Cheatsheat, Divs, Spans, Paragraph
4. HTML List Tags – UL, LI, OL
5. Beginning Cascading Stylesheet (CSS) – Inline Styles, Internal Stylesheet, External Stylesheet
6. Positioning HTML elements with CSS – Floats, Margins, Padding, Relative, Absolute
7. Background Images in CSS
8. HTML/CSS Cheatsheet and Tricks – Overflow, Hovers, Text-Indent
9. Browser Compatibility – Internet Explorer (IE 6, 7, 8), Mozilla Firefox, Apple Safari, Google Chrome

Final Result

Basic CSS Style for HTML

What is CSS?

Cascading Stylesheet or CSS for short is one of the most important component in web design. As I mentioned before, HTML is simply a language that structures and puts your content on the site. CSS is where your site transforms into an actual design. CSS will provide the positioning, colors, images, and other design functions that will make your HTML site into a well designed website.

You can do a lot of things with CSS. Move your elements around, give them a different text color, change the font size, give them a specific width, center the object, giving them borders, changing the bullet image of lists, and even give them special attributes for when the user hovers or clicks on a link. We will learn about them as we continue these tutorials. In the end of all of these tutorials, we’ll be making a simple HTML website with a simple CSS based layout.

There are 3 different ways to stylize your site:

Inline Styles
Internal Stylesheet
External Stylesheet

Inline Styles

Inline styles is used within the HTML file. They are included within the tag elements that you want to style such as the div, span, ul, li, a, and other tags. You can add inline styles to these to make them unique to other elements. Saying that, when using inline styles, they take precedence over other styles set through internal and external stylesheet.

Here’s how to implement an inline style. In our case, I’m going to style the title and make it red:

<span class="titles" style="color:#ff0000;">My Title Here</span>

With this code snippet, the words “My Title Here” is now red. I used the CSS attribute of “color” and inserted the value for it. For colors, CSS recognizes different types of value for color. Two mostly used are a 6 character hex codes like #ff0000, #ffffff, #000000, and actual color names such as “red”, “blue”, and “gray”. (Look at resources below for some cheat sheets on what colors are available out there)

Personally, I don’t like to use inline styles as it clutters up the code in the HTML file, and I like to keep everything organized in their own file. HTML in html files, CSS in their separate CSS files. The only reason I’m mentioning this is because you’ll come across when looking at old sites, or perhaps a script or plugin for your site will have a markup that has inline styles.

Internal Stylesheet

Another way to style your website with CSS that’s more clean and organized than inline styles is the use of an internal stylesheet. With internal being the keyword, all the style resides within that same file that you placed it in and will ONLY affect that one file.

Internal Stylesheets are declared in the beginning of an HTML file within the &lt;head&gt; tag.

The code to set up the internal stylesheet is as follows:

<style type="text/css">

<style>

Internal CSS in HTML File

Once declared, you are now able to put any CSS attributes in there. Now we’re going to skip “how” to actually put it in there, as I’m going to show you what external stylesheets are. After that, then putting CSS attributes will be explained as they are the same with internal and external stylesheets.

CSS Attributes – These are attributes that will change the style of the element such as borders, width, height, color, etc…

External Stylesheets

External Stylesheets are the same as internal ones except they are located in a separate file. They are just normal documents with the file extension of “.css” at the end. They are mostly named “style.css”, “layout.css”, etc… It doesn’t matter what it’s called, as long as it has a “.css” file extension then we know it’s a CSS (Cascading Stylesheet).

You can make as many external sheets as you want, however, they won’t do anything until you link them into your HTML file or website. To do this, you insert a link tag to import the external CSS file into your HTML file. Again, this code must be placed in the &lt;head&gt; section.

Here’s the code snippet to import an external CSS file into your website:

<link rel="rel="stylesheet" href="style.css" media="all">

Link External CSS to HTML Website

Notice the attribute href. Just like making hyperlinks, you can direct it exactly where you put your CSS sheet, whether it be in another folder or named different. For this tutorial, the CSS sheet is located in the root directory and labeled “style.css”.

Adding CSS attributes to elements

I’ll be using the external stylesheet for our examples. However, note that the code structure for external stylesheet will be the same for an internal stylesheet.

So open up your CSS file and the first thing we are going to learn is how to comment in it. Comments are important to document what you do in your project. By using comments, you can further organize your code as in any language where you learn to comment in addition to making it easy for other people to understand it if you happen to pass this code off to someone.

To start a comment, all you need to do is add a “/*” in front of your comment and then finish the comment by adding a “*/” at the end of your comment.

As a result:

/*CSS for Creative-Le Website Tutorial*/

Commenting in CSS

For the purpose of this tutorial, there are three ways to target/select an element in your website to style.

Global elements
ID elements
Class elements

Remember on our tutorials about div, p, span and ul, li, and ol tags where we talked about giving them ID and Classes?

The reason why it’s important to have classes and ID is because you can use those names to target and select them in your CSS. Not all the divs in your html site are going to function the same, so it’s important to give them a special name, so that you can target them specifically and style them in a special way without having to mess up the other elements.

Global Elements

Global elements isn’t the actual name, but I’m naming it that because it basically covers all the basic html elements that it recognizes such as body, div, p, span, ul, li, etc… It’s not specific, so if you target a basic div and make all the text inside a div red, then all the divs in your website will have red text, unless specified otherwise by their ID or Class name.

Here’s a snippet of how to target a global element:


body{
font-size: 14px;
}

ul, li{
list-style:none;
}

Stylizing Global Elements in CSS

Notice how each element is followed by an open-bracket “{“ and ends with a closed-bracket “}”. And also, any CSS attribute line has a semi-colon “;” at the end. This is the standard CSS coding syntax. And so, if there are any errors on your site, and you believe it’s an error in the CSS file, then it might be your syntax. Make sure you don’t miss any brackets or semi-colons.

With this code in the CSS file, we make all the text located within the body tag to 14px and we made all ul and li tags to have no bullets on them. list-style:none makes it so the list will not have any bullets. This is useful because many times, designers use lists for their navigation for semantic purposes but they don’t want the ugly bullets to be in the way.

Note: If multiple elements on site requires the same styling, you can include them in a series instead of declaring each of them individually. From the example above, I have “ul, li” and then my code. That means, all ul and all li elements will have that style. It’s a shorter way than typing:

ul{
list-style:none;
}

li{
list-style:none;
}

There are lots of global elements that you can target and style. It’s good practice to use them because the less CSS write, the less size the file will be. Try not to give every class a font-size: 14px; if you can just do that in one swoop by putting that in the body tag.

Class Elements – HTML Tags that have Classes

HTML tags that have class names are targeted and selected a different way than global elements. To target class objects, you need to have a period “.” in front of the class name. For example:

.copyright{
color: #ff0000;
font-size: 10px;
}

Targeting Class Elements in CSS

From our last website tutorial, we fully had a site with a few classes and IDs. Here I’m targeting the span class “copyright“. Notice the period “.” in front of it. Through CSS, I’m adding a color to it, in addition to making the font size of it 10px.

Also a note, that once you start selecting and targeting elements specifically, they override the pre-existing files. Everything in the body is supposed to be 14px but now that I targeted “copyright” specifically, it now changes to what I told it to be. Also, once stylized, any tag that has the class name of “copyright” will have the styling that I put in. So whether it’s a div or even a p tag, if it’s given a class name of “copyright” then they will also inherit the styles.

That’s what makes CSS very versatile and useful. To be able to change multiple elements instantly and to be able to change them individually, gives websites a lot of options for designs.

ID Elements – HTML Tags that have IDs

Similar to classes, targeting IDs require something special in front of the name. Instead of the period “.”, we use the number sign “#”. Keep in the mind the differences between ids and classes.

To target an ID, the code would look like the following, except the name will be replaced by whatever ID of an element you want to target.

#footer{
text-align:center;
}

Targeting ID elements in CSS

This makes all text everything within the footer to be center aligned. And that’s how you target IDs.

Most commonly used CSS Attributes

There are many attributes that you can add to an element. Some elements are restrictive in that you may not be able to position, you may not be able to color it, etc… I personally don’t remember all the rules, but I know enough to just do a trial and error to see if it works for that html tag or not.

Below are just a few links to most commonly used CSS attributes that you can add in your code. At the end of this whole tutorial session I’ll make a quick cheat sheet with most of them so that you can download and don’t have to worry about researching it again unless you wanted to learn more.

Commonly Used CSS Terms
CSS Code Gallery of Terms
CSS Cheat Sheet
30+ CSS Cheat Sheets and Reference Guides

Conclusion

In this tutorial we have learned a lot about CSS (Cascading Stylesheets). We know how to do inline styles, internal stylesheets, and making our own external stylesheets. In the download below, I have included the files that I’ve used for this lesson. There is the index.html, about.html, images folder, and now a new file called “style.css”.

What I’ve done in the source was linked the external stylesheet with index.html, and put some CSS coding to stylize certain parts. What you can do is link the style.css file to the about.html and also mess around with targeting different elements in the html files.

I hope you enjoy the tutorial and begin to learn how powerful CSS is for a website. If it wasn’t for CSS, all websites would relatively look the same. Any questions, comments, feedback are appreciated. Make sure to comment below, and I’ll get back to you.

Download Source Files (.zip)

Additional Resources

W3 Schools – CSS
CSS Quick Tutorial
Introduction to CSS
CSS References
CSS Hex codes and Color Names

]]> http://creative-le.com/tutorials/using-css-stylesheets-in-html/feed/ 2 Creating Custom Photoshop Shapes http://creative-le.com/tutorials/creating-custom-photoshop-shapes/ http://creative-le.com/tutorials/creating-custom-photoshop-shapes/#comments Sat, 27 Feb 2010 03:01:46 +0000 Dan http://creative-le.com/?p=741 Custom shapes has always been a popular trend in graphic design, especially when it comes to using them in Photoshop. I’m going to show you today how to make some abstract custom shapes and save them so that you can use in your future designs.

Final Result

Here’s what you will be making at the end of this tutorial (maybe not exactly, but the shape in there will be made):

How to make abstract shapes

You’ve probably seen these shapes quite often, whether it be my portfolio or in general designs out there. They are pretty trendy and add a lot of decoration to a design. When used right, the colors can be a great addition to a design and add that sense of abstractness.

Let’s set up our canvas. You should be able to do this with Photoshop CS and up. (maybe even Photoshop 7, it’s been a long time since I used that so I forgot whether it had custom shapes or not)

Step 1 – Setting Up Your Canvas

How to make abstract shapes

I always like to make a new canvas that’s 500px by 500px for all of my testings and experimentation when making shapes or brushes. It’s enough space to mess around with, and it’s not too small.

Step 2 – Setting Up Your Tools

How to make abstract photoshop shapes

The next step is to set up the custom shape tools so that you’ll be able to make your new custom shape. The settings I have are pictured above.

I turned Shape Layers on so that I can see the shape with color. And since this is our first shape it’s automatically defaulted to Creating a New Shape Layer. So pick the circle shape and let’s make our first circle.

How to make abstract photoshop shapes

Don’t make too big of a circle since you’ll need the space to add additional shapes.

Step 3 – Adding Multiple Shapes

How to make abstract photoshop shapes

While your circle is still selected (you’ll see a little ring around it), change the option of the custom shape tool to Add to Shape Area (+). From here, you can just have a free for all in making circles just like the picture below.

How to make abstract photoshop shapes

HINT: You don’t have to necessarily switch to that custom shape option. Rather you can hold shift, and your cursor will have a little plus sign similar to the cursor when you choose that option.

Step 4 – Subtracting From Your Custom Shape

How to make abstract photoshop shapes

Sometimes you may have added too many shapes, or you want to give your shape some interesting cuts in it. By choosing the Subtract Area (-) option, you can make shapes that will cut/erase your current shape like below.

How to make abstract photoshop shapes

It may look a bit busy, but if you wanted to see how your shape looks like without the pen lines, you can just hide them by pressing Crtl/Cmd+H.

Step 5 – Defining Your Custom Shape

After you finishing make your shape, select the pen tool from your tool bar or press the Photoshop shortcut key “P” and right click on the shape. You will see the option to “Define Custom Shape…”

How to make abstract photoshop shapes

After you click on that, name your custom shape and press “Ok“. You now have a custom shape. To access this custom shape, go to your custom shapes menu and look for it. Usually, newly created ones will show up last on the list.

How to make abstract photoshop shapes

And now you can use your shape as many times as you want, and even resize it without losing any pixels because it’s not rasterized yet.

Here’s my result after messing around with the same shape. I flipped it, I duplicated it, I rotated and changed it’s colors.

How to make abstract shapes

You can do a lot by making your own shapes. You’re not even limited to circles. Use other shapes, or even use custom shapes you’ve already made. The sky’s your limit on this one.

Conclusion

Thanks for looking at my tutorial about creating abstract custom shapes for Photoshop. If you have any questions or confusion, comment below and I’ll get to them. Show off your results as well here, or share a link.

]]> http://creative-le.com/tutorials/creating-custom-photoshop-shapes/feed/ 15 HTML List Tags – UL, LI, OL http://creative-le.com/tutorials/html-list-tags-ul-li-ol/ http://creative-le.com/tutorials/html-list-tags-ul-li-ol/#comments Thu, 25 Feb 2010 20:46:16 +0000 Dan http://creative-le.com/?p=714 There are different ways to make a list of items in HTML. In this tutorial, you will learn about 2 ways that are used the most often. In addition, you will learn when and how to implement lists.

Table of Contents

1. Beginning HTML – HTML Doctypes, Head, Body
2. HTML Images and Hyperlinks – IMG, A
3. Basic HTML Structure, Tags, Classes, and IDs – HTML Cheatsheat, Divs, Spans, Paragraph
4. HTML List Tags – UL, LI, OL
5. Beginning Cascading Stylesheet (CSS) – Inline Styles, Internal Stylesheet, External Stylesheet
6. Positioning HTML elements with CSS – Floats, Margins, Padding, Relative, Absolute
7. Background Images in CSS
8. HTML/CSS Cheatsheet and Tricks – Overflow, Hovers, Text-Indent
9. Browser Compatibility – Internet Explorer (IE 6, 7, 8), Mozilla Firefox, Apple Safari, Google Chrome

Final Result

Basic HTML and CSS

Basic List Tags – OL and UL

More or less, you’ll be running into a situation where you need to list a couple of items or have multiple similar elements together. Sure you can use DIVs and Paragraph tags to do the same, however semantically speaking, if you have a list of items (to-do list, list of images, list of terms, list of navigation items), then you want to use the HTML list tags. There are 2 major list tags (there are more, but for the purpose of common HTML use, the other tags don’t get used as much as these).

OL – Ordered Lists

Ordered lists are lists that are meant to be in order such as a list of things to do to clean the dishes. For example:

Basic HTML and CSS

Here’s the tag needed for an ordered list:

<ol>
<li>Pour the soap</li>
<li>Wash the dishes</li>
<li>Dry them off</li>
</ol>

Simple enough. &lt;ol&gt; stands for ordered lists and you will see that you need to have list items for a list, and so that’s what &lt;li&gt; is for. For every item in the list, you should use an LI tag.

By default, the browser will automatically generate the numbers for you if you didn’t style them. I inserted the above code and put it in our index.html file that we should have.

UL – Unordered lists

Another type of list is an Unorderd list. An unordered list is similar to an ordered list except it will use bullets instead of numbers so that it becomes a list of things rather than a list of things that should be done in order or have any importance to them like a grocery list.

Basic HTML and CSS

To create an unordered list, we will use the &lt;ul&gt; tag:

<ul>
<li>Milk</li>
<li>Eggs</li>
<li>Meat</li>
</ul>

When placed in the code, you’ll notice the bullets. With CSS, you will be able to replace those bullets with other styles like disc styles, squares, or even have a bullet image that you created yourself.

Why should we use lists?

Obviously lists are great to use when you’re making a list. You can style them in a way so that they pop out easily rather than trying to format with spaces. Another reason why lists are used is that it’s one of those things that makes sense to use when you do. You will see many websites that uses lists for their navigation, site maps, sidebar, image gallery, and so forth. The reason why is because of styling the list items.

The list items within the list will most likely carry the same styles such as color, font, background, etc.. Since they are part of a list, then they should be the same style which makes it easy for coding because you can just style the &lt;li&gt; and all the list items will follow that style. Remember all your lists can look different from each other by using [[ids and classes]] that we learned last tutorial.

Make sure to check out the additional resources below for more information on why you should use lists and how you should use them. (Pretty much the same reason here but more in depth)

Let’s practice making lists

Let’s open our index.html file. Basically we are going to make two unordered lists, and one ordered list. One &lt;ul&gt; will be used for the navigation, and the other will be a regular one so that later one I can show you that you can style lists differently. And finally, an &lt;ol&gt; will be used just for an example.

Our navigation:

<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
</ul>

Our other Unordered List:

<ul class="list">
<li>Milk</li>
<li>Eggs</li>
<li>Meat</li>
</ul>

Our Ordered List:

<ol>
<li>Pour the soap</li>
<li>Wash the dishes</li>
<li>Dry them off</li>
</ol>

Here’s how my index.html looks like in the end.

<div id="wrapper">

<div id="header">
<span class="titles">My site Name</span>
</div>

<div id="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
</ul>
</div>

<div id="content">
<p>This should be a paragraph of text, but I'm too lazy to make
a block of them.  You can do it on your free time.</p>
<p>This is another paragraph of text that will contain more information.</p>

<ol>
<li>Pour the soap</li>
<li>Wash the dishes</li>
<li>Dry them off</li>
</ol>

</div>

<div id="sidebar">
<p class="sidebar-text">Tiny information about this blog can be put here.
This will act as a side bar soon.</p>

<ul class="list">
<li>Milk</li>
<li>Eggs</li>
<li>Meat</li>
</ul>

</div>

<div id="footer">
<div class="footer-info">
<span class="copyright">Copyright 2010 MySite.Com</span>
</div>
</div>

</div>

Basic HTML and CSS

And there you have it. The picture above shows what it looks like in firefox after you check it out. The source files for this lesson is at the bottom so you can compare your code with it, if you get lost. Our next lesson is going to change your perspective of HTML a bit. You might be saying how all of this HTML can convert into those sites that you see today. Well, all I can say is CSS does wonders in creating sites. I’ll make sure to have that tutorial soon.

Conclusion

That’s it for this segment of Basic HTML and CSS. We covered how to make HTML lists using UL, OL, and LI. Check out the additional resources below to understand them better in detail. If you have any questions or comments, feel free to leave your say below. I’ll have the next tutorial coming up soon.

Download Source Files (.zip)

Additional Resources

W3 Schools – HTML Lists
Using HTML Lists Properly
Why use lists for site navigation?

]]> http://creative-le.com/tutorials/html-list-tags-ul-li-ol/feed/ 8 Basic HTML Body Structure & Tags http://creative-le.com/tutorials/basic-html-body-structure-tags/ http://creative-le.com/tutorials/basic-html-body-structure-tags/#comments Thu, 25 Feb 2010 03:58:51 +0000 Dan http://creative-le.com/?p=668 From the past tutorials, we learned about the Head and Meta Tags and we also learned the tags for Images and Hyperlinks. Now we are going to dive into the main part of coding which is Body. The body will contain your content and I’m going to show you the basic markup that’s found in nearly all websites and blogs.

Table of Contents

1. Beginning HTML – HTML Doctypes, Head, Body
2. HTML Images and Hyperlinks – IMG, A
3. Basic HTML Structure, Tags, Classes, and IDs – HTML Cheatsheat, Divs, Spans, Paragraph
4. HTML List Tags – UL, LI, OL
5. Beginning Cascading Stylesheet (CSS) – Inline Styles, Internal Stylesheet, External Stylesheet
6. Positioning HTML elements with CSS – Floats, Margins, Padding, Relative, Absolute
7. Background Images in CSS
8. HTML/CSS Cheatsheet and Tricks – Overflow, Hovers, Text-Indent
9. Browser Compatibility – Internet Explorer (IE 6, 7, 8), Mozilla Firefox, Apple Safari, Google Chrome

Final Result

Basic HTML and CSS Structure

Basic Body Structure

Every site or blog contains the same HTML basic body structure. All sites roughly contain the following elements to their coding: Header, Navigation, Content, Sidebar, and Footer

Basic HTML Structure and Markup

Header – Usually comprises of big pictures, graphics, or a logo of your site. This part is what most people like to exaggerate on as it’s usually very appealing.

Navigation – Like its name, it’s the navigation part of your site. Your main links that will help navigate your audience through your site.

Content – The content section is usually where your main area will be that holds your content, posts, galleries, and such forth.

Sidebar – Although not really a necessity (it’s been a popular thing throughout many blogs), it contains additional information that may appeal to the user or even additional navigation items. (i.e Twitter Feed, Subscribe links, Search, etc…)

Footer – And finally, the footer is usually the place where the copyright is held although lately it’s been a trend where footers begin to hold extra information like recent posts, affiliates, short bios, and the list goes on.

If you break down any site to its core, you will begin to see the structure and also see that they are same. It’s the graphics, styling, and implementation of that structure that makes the website/blog all unique.

Let’s start off with some basic DIVs

The most common HTML tag you will see in a site other than a link tag or image tag is a DIV tag. I believe DIV stands for division which means, it makes a division or section on a site. This is true because that’s what it actually does. The DIV tags will take whatever’s inside them and treat them like it’s own section. So why is this useful?

DIVs will help your separate everything on your site and with CSS (Cascading Style Sheet), you can manipulate those sections. Let’s see how we can put it into use with what we know. Open up your HTML document (I’m using the index.html from the last tutorial)

The following is a basic html structure that will be put inside the &lt;body&gt; tags of your html site.

<div id="wrapper">
<div id="header"></div>
<div id="navigation"></div>
<div id="content"></div>
<div id="sidebar"></div>
<div id="footer"></div>
</div>

Basic HTML and CSS Structure

You may notice my formatting on the picture is different from the posted code. Every designer have their coding preferences so it’s good to find yours as well. I like to tab in any element that’s a part of another element.

Speaking of that you may notice an additional div tag added in the beginning called “wrapper” and that div actually ends after footer meaning it contains all of those div inside. A “wrapper” is a popular div that most websites use to contain their site in. And with a wrapper you can do many things with CSS such as controlling how wide your site is, whether your site is left align, centered, or right aligned, and more.

To understand this better, I always like to think of the “wrapper” as wrapping paper and whatever is inside the wrapper is the gift. And from that analogy you can understand that all the stuff inside the wrapper is contained by the wrapper and takes the shape of it. In which case if my wrapper is 1200px wide, then all my contents inside is 1200px wide (unless it’s changed specifically with CSS).

In fact that’s how the DIV tag works in general. The DIV wraps all the elements that’s inside together, and these elements will follow the styling of that DIV.

Basic HTML and CSS Structure

Hopefully, you’re not lost with that. Let’s continue with something else you may have noticed.

What’s ID?

IDs and Classes

For any tags, we can give them a label: id or class

And they can be referenced as follows:

<div id="name"></div>
<div class="name"></div>

You may be already asking, what’s the difference? Well, here’s an article that explains well the difference between ids and classes. In short, we use ID for cases where the element is unique and will only be used once per page and we use CLASS for elements that are going to be used frequently.

Examples for ID include: Header and Footer. For the most part, sites only contain one header and one footer on one page.

Examples for CLASS include: Thumbnails and Post Titles. These elements will appear all over your blog if you have posts.

Reminder that you can give an element a class and id. To fully understand the difference and how to use them is one of those things you have to work with and experiment. Again, I recommend that article about ids and classes to help you understand them in more detail.

Other Useful Tags – Paragraph and Span Tags

Some other useful tags that we will be discussing now is the Paragraph Tag and the Span Tag.

The paragraph tag is simply what it says. It’s mainly used to break off paragraphs meaning whenever you have a paragraph of information you would want to include all of that into a paragraph like below:

<p>
This is a paragraph of information.  P tags work just like a DIV tag whereas
anything inside this P tag will take on the CSS styling of P tag.  You can even
add classes and an id to this so that it becomes unique to other
paragraphs.
</p>

When to use DIV tag or P tag?

Basic HTML and CSS Structure

It may be a stupid question but it’s a legit one. The real answer to it is “Yes, you could” but the preferred answer is “No, you shouldn’t”. You want to code your sites so that it’s semantically correct to a point. If you have a paragraph of text, then use &lt;p&gt; otherwise if your section contains a lot of elements in it then use &lt;div&gt;.

It’s up to you to figure out how to use these tags. The more you code the more you’ll understand them better. (Truth be told, as a freelancer, I didn’t know much on what these tags were. I just used them and the more I coded, the more I found out that it made sense to use P tags for blocks of texts and such forth).

And the last tag we’ll learn for today is the &lt;span&gt; tag.

&lt;span&gt; – from what I understand and use it for, is a tag mainly for text. So if you have a certain text or certain texts that require styling then I use &lt;span&gt; tags. Examples would be making certain text on the site a certain size if it’s a special word or something. You’ll see how I use it when we get to the real coding portion with CSS.

An example of using span would be like this:

&lt;span&gt;Red Text&lt;/span&gt;

And that’s it.

Let’s put it all together

So we’re basically going to make a site right now. It won’t be styled, but it will be a functional page that has information, and that can link to another page.

We already have our Basic body structure in our &lt;body&gt; tag, so let’s fill in some of those sections.

<div id="wrapper">

<div id="header">
<span class="titles">My site Name</span>
</div>

<div id="navigation">
<a href="index.html">Home</a>  |  <a href="about.html">About</a>
</div>

<div id="content">
<p>This should be a paragraph of text, but I'm too lazy to make
a block of them.  You can do it on your free time.</p>
<p>This is another paragraph of text that will contain more information.</p>
</div>

<div id="sidebar">
<p class="sidebar-text">Tiny information about this blog can be put here.
This will act as a side bar soon.</p>
</div>

<div id="footer">
<div class="footer-info">
<span class="copyright">Copyright 2010 MySite.Com</span>
</div>
</div>

</div>

Basic HTML and CSS Structure

And there you have it. The above is what the page actually looks like rendered in Firefox. Copy that code for both your index.html and about.html and you have yourself a site. Don’t just copy and paste and wait for the next tutorial. Play around with it and add more div tags or p tags. You will begin to see how it all matters in the next tutorial.

Conclusion

That’s it for this segment of Basic HTML and CSS. We covered the basic structure that goes into most websites, went through a few tags: DIV, P, and SPAN, and also talked about the difference between IDs and Classes. In our next tutorial we’ll be starting to use CSS. Although the next thing on the list is UL, LI, and OL, I will be covering CSS as well, since the next lesson will be a short post.

Before you head out, comment if you have any questions or even suggestions. I’m open to learning more and also making my tutorials better since I want everyone to understand them. Thank you for viewing my tutorial, and I’ll see you next time.

Download Source Files (.zip)

Additional Resources

Differences of IDs and Classes
Semantic Uses of Tags

]]> http://creative-le.com/tutorials/basic-html-body-structure-tags/feed/ 6 Work In Progress – Walk in the Park http://creative-le.com/photoshop/work-in-progress-walk-in-the-park/ http://creative-le.com/photoshop/work-in-progress-walk-in-the-park/#comments Wed, 24 Feb 2010 22:57:54 +0000 Dan http://creative-le.com/?p=617 One of the best parts I like about making a piece in Photoshop is not necessarily the outcome but the process it takes to get to it. I learn a lot when I can visualize somebody’s progress in creating a graphic. I always enjoy seeing work in progress because it shows you that the skills to make that piece aren’t complicated at all and art is really all about visualizing and experimenting.

Walk in the Park was probably one of my first pieces that I experimented fully with the use of stock photos and using the mask tool in Photoshop. I never knew you can blend in photos in that way so that they look seemless and natural (to an extent). Here’s my WIP on Walk in the Park (and also some notes on what I did).

The Concept Behind Walk in the Park

The main concept to this piece was to show how a unity between 2 people can bring life to their world. Hence you see the couple walking out of this black and dull city and into a colorful peaceful “island” with flowers, water, and more. This piece was created for Vina.

Work in Progress - Walk in the Park

Initial Study and Preproduction

In order to convey my message, I had to gather stocks. And so I got most of my stocks through stock.xchng and from other free stock photo sites. My general process in this stage is to collect as much as I can that I think are usable. I got stocks of skies, clouds, mountains, rocks, water, beaches, couples, flowers, etc… If I think I could use it, I downloaded it. As to most people, this might be called the preproduction stage. You gather all your needed materials to start off your production.

Work in Progress – Screenshots

Step 1

Work in Progress - Walk in the Park

Work in Progress - Walk in the Park

1. I started off with my city. I had a good black and white stock of buildings (Figure 1.1), and basically I duplicated and positioned them around so I could form an island-like landscape (Figure 1.2).

Step 2

Work in Progress - Walk in the Park

Work in Progress - Walk in the Park

2. I placed in my mountain stock and masked unneeded parts. As you can see with Figure 2.1 the original picture of the mountain had a lot of things to it. And so I masked around it along with the other stocks to make it like Figure 2.2. In addition, I added and masked more pictures of that black and white city.

Step 3

Work in Progress - Walk in the Park

3. I began to work the background by adding a sky. It was simply a gradient and then I brushed around with a grayish blue brush and set it to multiply to sort of mimic clouds.

Step 4

Work in Progress - Walk in the Park

4. Following the same process as step 2, I had pictures of green forests and grasses, and I scaled them down to fit on the rocks. I set the layers to hard light, and they seem to work best for me. I duplicated them as well to make it more vibrant and green. You can also see me putting flowers in there as well.

Step 5

Work in Progress - Walk in the Park

5. I messed around with the sky more and added some stocks of clouds and set them on overlay and screen to get the sky to be more bright. I picked out the picture I wanted to use for the couple and embellished that area with a rainbow (using a circle shapes and put a rainbow gradient with blending options) and also some bubbles. I also made the water bluer by painting a layer with a blue brush and setting its blending mode to “Soft Light”.

I also started my typography work since I wanted to make it a part of the piece rather than something slapped on at the end. Simple text with a gradient on it, and I brushed around to make it more fitting into the water.

Step 6

Work in Progress - Walk in the Park

6. From here, I decided to change it up a bit and mess around with colors. I added a Sepia Toned Gradient Map and set it to multiply and added a Curves layer to increase the brightness a bit.

Step 7

Work in Progress - Walk in the Park

Work in Progress - Walk in the Park

7. One of my favorite things to do and I guess you can say it’s my style is that I always like to introduce shapes into my pieces. They add that piece of abstractness to a graphic and can give some great color, flow, and composition. From figure 7.1 and figure 7.2, I simply added more shapes. Some of them I made with the pen tool, and the other shapes are part of my Custom Photoshop Shapes that I made a while ago.

Step 8

Work in Progress - Walk in the Park

8. At this time, I like to experiment with brushes. I had some brushes that I downloaded from deviantART or some other places (If you happened to make the brush, let me know.) And also I’ve used some brush sets that were made by Vtension. Her wireframe brushes and various shapes packs were the ones I used in this piece. Check out her blog for more brush resources.

TIP: Remember that you can mask pretty much anything. Sometimes brushes and shapes may not be good unless you mask out the parts that doesn’t fit into the piece.

I also added more shapes to add more to the piece. I also find myself doing more than what’s needed, but at this part of the piece, I eyeball what looks good to me.

Step 9

Work in Progress - Walk in the Park

9. And finally, more brushes, and I added some fireworks stocks set to screen blending mode to put some particles into my piece. I touched up a few things here and cleaned some mess with masks and added a gradient map and photo filter. I cropped it a bit and added black bars on top and bottom. After all of that, my piece is finally done.

What Happened and What I’ve Learned

Basically I learned that it takes a lot of patience. You have to take the time to mask things accurately so that the photos can work together. You have to take the time and experiment with brushes and shapes to decorate the piece, and you have to also test out a lot of settings when creating your color scheme in the piece. Everything has to be in consideration, lighting, composition, colors, typography, and overall your idea.

Conclusion

Work in Progress - Walk in the Park

Thanks for viewing my first WIP. If you have any questions specifically on this piece, I’ll be happy to answer them. Leave a comment and I’ll reply to them. I’ll have more WIPs in the future so make sure you follow and subscribe to see my updates.

]]> http://creative-le.com/photoshop/work-in-progress-walk-in-the-park/feed/ 9