When you encounter a screw-up in your layout, many people come running to the WordPress Forums. While the willing volunteers can do what they can to help you, there are some steps you can take to get to the solution, or at least a better idea of where the problem may lie, before you get to the Forums. A solid reference is CSS Coding Standards, part of the Core Contributor Handbook set.

Know Before You Go

We have a list of things you need to know before you go to the forums with layout design problems, and tips on solving the problems yourself.

Examine Your HTML and CSS

Take a close comparative look at your HTML and CSS and make sure that all the references match.

Isolate Your CSS Challenges

Below we’ll show you a couple of techniques to help identify the areas that are causing your problems in an effort to narrow down the problem to a specific area and code.

Common CSS Errors

You are not the first to have this problem. We have a list of some of the most common CSS errors to help you fix the little details that can mess up your layout.

Pest Control – Watching Out For Browser Bugs

While we will help you identify some of your CSS challenges, a lot of them come from bugs and conflicts between browsers, so we’ll give you some tips on how to work around the various browser bugs.

It is the goal of this article to help you solve your layout design problems within the CSS file, not within the HTML or PHP files. For help on modifying those, check out Using Themes for more information.

BACKUP

Before beginning any of these problem-solving tips and techniques, be sure and backup your data just in case. Also, backup the files you are working on as you try different things so you have some places to go back along the way.

You can do “live” CSS testing without editing your WordPress files

If you have the means, it is much quicker and safer to do your CSS testing and troubleshooting “on the fly” using (e.g.) Jesse Ruderman’s Edit Styles bookmarklet or the Edit CSS extension for Firefox. When you’re done making changes, copy your new (edited) code into the appropriate WordPress theme files (after you back them up).

The Web Developer extension for Firefox can help too.

Know Before You Go

If you are new to CSS and web page design, start with a visit to WordPress’ CSS Tips, Techniques and Resources to find information on the basics of CSS and possibly answer some of your questions. At the least, you will get a basic overview of what CSS is, the impact it has on the HTML or structure of your page, and learn some jargon to help you ask a more informed question on the forums.

You will also need to know some basic terminology to help you express your problem to others. This isn’t a how-to-CSS guide but more of a “what is thingamahjig called” guide.

CSS (Cascading Style Sheets) are bits of code that influence the presentation or the look of your page’s HTML code. In WordPress, the CSS styles are generally found in a file called style.css in the specific Theme folder you are using. The HTML code and CSS references that hold the structure of your page are generally found in the index.php file in your Theme folder.

The PHP files are found within your Theme folder and contain the code and references which generate your HTML page. It is here, in the final run, that you may make changes to the specific CSS selector tags, not your HTML page. For help on modifying those, check out Using Themes for more information.

‘CSS selectors (names) are generally grouped into three specific references: The ID, CLASS, and HTML tags.

The ID

The ID is a reference to a specific unique area on your web page. It is generally seen represented on your HTML web page as an enclosed DIV (division) block:

<div id="header">Title of the Page</div>

In the style sheet (CSS) the ID selector is referenced as #header and might look like this:

#header { position: relative; margin:0; padding:0;
	height:100px; width: 100%; background: red;
	color: white;}

The CLASS

The CLASS is a reference to any element on a page that needs to look a specific way when this reference is used. For example, if you frequently want to highlight a word or two within your text (we’ll use red as a highlight color in this instance), you might have aCLASS selector in your style sheet like this:

.hilite { color: red}

and the reference in your HTML might look like this:

...this is some text about something
I want <span class="hilite">in red</span>. And 
some more rambling here...

As you can see, the difference between ID and CLASS selectors in the style sheet is that an ID uses a pound sign (#name) and aCLASS uses a period (.name). ID references must be unique on a page and used once. CLASS references can be used repeatedly in the same page.

HTML Tags

If you want to “design” a specific HTML tag reference, such as a blockquote, the code within the web page may look like this:

<blockquote>This is a pithy and brilliant quote 
that I knew you would enjoy.</blockquote>

In the style sheet, the reference to the blockquote would not have a # or period but would just simply list the HTML and then the design elements. This example indents the quote on both sides and puts a blue line on the left side of the quote and makes the text italic.

blockquote { position: relative; margin: 10px 50px 10px 50px;
	padding:5px;  font-style:italic; 
	border-left:solid blue 4px; }

You can apply any design elements to any specific HTML tag such as body, p, H1, H2, H3, ul, li, and more.

For information on modifying ID, CLASS, and HTML, check out the resources at WordPress’ CSS Tips, Techniques and Resources.

Important note! Certain themes have their css styles in more than once place, the Kubrick theme being one of them. If, after changing css attributes in a css file, you don’t see the results you wish, it’s possible your theme choice has some embedded css in one of the php files (usually a header file) and the embedded css styles are overriding the linked or imported css stylesheet.

Examine Your HTML and CSS

In order to determine what is going right or wrong with your web page layout, you have to go to the source. This means looking under the hood.

Under the pretty hood of your web page, the nice layout you see on your Internet browser, is a whole bunch of code with strange and foreign sounding references. At first glance, it’s like looking under the hood of a racing car. You know that all of that junk makes the car go, but what the heck is all that mess under the hood?

Viewing HTML

To lift the hood on your page, make sure the page is being viewed from your web browser and from within your web browser’s top menu, click VIEW > SOURCE or PAGE SOURCE. Another page will pop-up either inside another browser window or inside of a program that comes with your operating system called Notepad, or some variation thereof. This is your HTML page which structures your page.

Viewing CSS

To view your CSS, either know the actual address (or have it already on your hard drive), or scroll down through the HTML page to the following reference:

<link rel="style sheet" type="text/css" href="wordpress/wp-content/themes/default/style.css">

This is the link that loads in your attached CSS style sheet. To view your CSS, either double click on the file name or type in the specific link to the file in your web browser such as:

https://www.yoursite.com/wordpress/wp-content/themes/default/style.css

In WordPress, PHP is used to actually generate the HTML page. This is often complex and confusing code. To view the HTML, view a generated page, such as a sample post. To make changes in the HTML structure and CSS references, you will need to modify the appropriate PHP file. The Codex page on using themes has more information on how to view your Theme Templates and find out which Template is associated with which section on your page.

The problem-solving techniques herein describe how to change the CSS to influence the layout of the page. To make actual changes to the Themes, check out Theme Development.

Looking Under the Hood for CSS

Once you have lifted the hood to see the HTML and CSS, it is time to start playing Sherlock Holmes. To start, you have to know what you are looking at and where to find the basic elements to help you find the culprit.

The HTML page features all the structural code that sets up the “grid” into which your page sits. Think of it as a map with notes written all over it. The notes are actually pointers to the directions which are found within the CSS file.

Scroll down past a lot of <link rel='archives'... information until you see <body>. Below this will be the layout “body” of your web page. From here on, every bit of information is critical to the structure and design of your page.

As you scroll through it, look for identifying ID and CLASS statements. For example, you may see the following:

<div id="page">
	<div id="header">
	<h1>My WordPress Site</h1>
		<div id="headerimg">
		</div>
			<div class="description">by Me and Only Me</div>
		</div>
	<div id="content" class="widecolumn">
  		<div class="post">

This may look confusing, but it is basically setting up sections with your content in it.

It begins with the division called “page” which sets up the look of the entire page. If you look in the CSS file for #page selector, you will see the presentation styles associated with it. It is followed by the header division which includes a heading (H1) with the title of your site. This particular layout is based upon the default Theme for WordPress v1.5 called Kubrick which includes an image in the header, set by the “headerimg” division. After that comes a division with a CLASS reference called “description” which is the place you have a subtitle or description of your site. Again, look in your CSS to find .description to find out how that area is styled.

The next two tags close the header (</div>) and then begins the division ID of “content” which also features a CLASS called“widecolumn”, followed by another CLASS called “post”. The “content” and “widecolumn” layout the overall look of the containers holding your “post”.

This is an example of the parent/child relationship. And, as you will see in the next section, this is one of the major places where CSS layout problems begin!

The CSS Parent and Child Relationship

One of the biggest problems in designing web pages is understanding where a problem occurs and whose influence might be affecting the problem. This is called the “parent/child relationship” of CSS. As you know, while parents usually have their children’s best intentions at heart, children often feel intimidated and screwed up by their parents, so understanding this relationship may help you solve your problems.

A WordPress user posted a question on the forum complaining that she wanted her page to feature her header spreading fully across the page’s width with the content centered on the page with a lot of space on the left and right sides. She’s been poking around with the margins in her header to no avail and turned to us for help.

<div id="page">
	<div id="header">Header Title</div>
 <div id="content">
  		<div class="post">Post babble here...</div>

The CSS attributes for the margins in this example are:

#page { margin-top:5px; margin-right: 100px;
	margin-bottom: 5px; margin-left:100px; }
#header { margin-top:5px; margin-right: 5px; 
	margin-bottom: 5px; margin-left:5px;}
#content { margin-top:5px; margin-right: 20px;
	margin-bottom: 5px; margin-left:20px; }
.post { margin-top:5px; margin-right: 5px; 
	margin-bottom: 5px; margin-left:5px; }

Playing detective with her codes, we found that changing the margins on the header weren’t working because they were being influenced by the page margins to begin with. This is where the parent/child relationship shows up. The parent page was telling the child header what to do and it wanted to do something else.

If we changed the right and left margins of page, it eliminated the margin problems for the header. But we’ve created another problem. The parent page continues its influence and now all of the content is spread across the whole page width. A change needed to also happen with the left and right margins of the content so the wide margins are back in place. To make the whole family happy, the new margins looked like this:

#page { margin-top:5px; margin-right: 5px; 
	margin-bottom: 5px; margin-left:5px; }
#header { margin-top:5px; margin-right: 5px; 
	margin-bottom: 5px; margin-left:5px;}
#content { margin-top:5px; margin-right: 100px; 
	margin-bottom: 5px; margin-left:100px; }
.post { margin-top:5px; margin-right: 5px; 
	margin-bottom: 5px; margin-left:5px; }

Isolate Your CSS Challenges

Identifying the parent/child relation influences over your web page layout helps to solve a lot of problems, but sometimes the relationships are so complex, it’s hard to figure out which section is which and who has influence over which parts.

To isolate and identify your various CSS sections, divisions, and classes, here are some simple tricks. Before you begin, be sure andmake a backup of all of your main files including your CSS to make sure you have something to recover from if this gets out of control.

Once you have identified the culprit and fixed it, make sure you remove these testing features so your web page will look “normal” again.

Box Your Sections

Once you have identified the various sections or divisions within your HTML page, go into your CSS file and add the following attribute to the various divisions:

border:solid 1px color

Where the word color is, put a different color name in place for each section.

For example:

#page { margin:5px; padding:0; border: solid 1px red; }
#header { margin: 10px; padding: 5px; border: solid 1px blue; }
#content { margin:5px 100px 5px100px; padding:10px;
	border: solid 1px green; }
.post { margin:5px; padding:10px; border: solid 1px yellow; }

Save the CSS file and view your page (click REFRESH or F5) in the web browser. You should now see a different colored box around each of the different sections:

If you don’t see a colored box around your content, check again that the selector you changed is actually the correct spelling and identified in the HTML.

If the problem you are having is in the blue box, then you know where to start solving your problems. Be sure and remove the test attributes when you’re done.

There are browser extensions and add-ons that offer this technique, too.

Highlight Sections

Besides putting boxes around the different sections to isolate the problem CSS or HTML, you can dramatically change the colors of the content to make the problem “jump” right out at you. By changing the text color or background color of a section, you will spot it immediately when you view the screen. Note: Be sure and make note of the original colors if you change them during testing so you can go back to them. And make frequent backups!

In the CSS file, you can change a section’s font color by adding color:red or any other color to the selector’s attributes such as:

H1 { font-style:bold; font-size: 125%; color: red; }

The H1 heading should jump out at you in bright red and would look like this:

To change the background color of a section, you can add background:pink to make the entire background pink.

#header { margin:5px; padding: 10px; background:pink; }

The result might look like this:

The entire header division will now feature a pink background. When you’ve identified the culprit, and made the fixes, be sure and remove any testing attributes to restore the look of your web page.

Validate Your Source Code

Sometimes the smallest detail can send your page out of whack. A mispelled tag (rhef instead of href), a forgotten closing tag, a missing attribute, or even the wrong attribute can send your page into a design tail spin.

Free online validators which check your HTML, XML, and CSS code may help isolate the little detail you are missing. As you scan through the code, it’s easy to skip over a little stumble. Most online validators let you either type in the URI (link) to your site to initate the validation process, or may even allow you to paste in code or upload a file to have it inspected. WordPress, by default, validates its default coding, but if you are making modifications, the slightest slip can screw things up.

Different validators check for different problems, so if you can’t find your solution with one validator, try another. Many validators will even recommend making some changes, but find your problem before you start creating new ones.

To help you understand more about validation and to find online validators, we’ve provided a list of validation resources in a Codex article called Validating a Website.

Slash and Burn – The Last Resort

Not for the timid

NOTE: There are two Slash and Burn techniques. If you are weak of heart, check out the second one.

If you can’t seem to narrow down the problem, there is a technique, sometimes called “Slash and Burn”, that will help you narrow down the culprit. It requires no interuptions, concentration and thorough backups to ensure you don’t destroy even the screwed up remains of your web page design. We also recommend you have familiarity with HTML and CSS.

1. Make backups of all of your files.

2. Open a post in the web browser and VIEW > SOURCE.

3. Save this source file as a text document called “junk.html” to an empty test folder on your hard drive. DO NOT CLOSE THIS FILE. It will remain open during this entire process.

4. Copy your CSS file to the same test folder.

5. If you are having problems with the graphics, copy the graphics folder or the graphics to the test folder.

6. In the junk.html source file, change the style sheet reference from something like

<link rel="style sheet" type="text/css" href="wordpress/wp-content/themes/default/style.css">

to this:

<link rel="style sheet" type="text/css" href="style.css">

Save the junk.html text file (DO NOT CLOSE IT).

7. In the test folder, double click on junk.html to view the file in your browser. You should see the general layout of the page with the graphics, if appropriate. If not, double check the link reference to the style sheet.

8. In your junk.html text file, move to the point where the trouble begins. Move to the section above (a section which includes opening and closing tags such as:

<p>babble...</p>

or

<div class="post">babble...</div>

and highlight the entire section from the opening tag to the closing tag and CUT the section (Cntrl+X).

9. Save the file.

10. REFRESH the web page in the web browser (F5 or click REFRESH – if you have problems and don’t see a change, hold the SHIFT key then press F5 or (in FireFox) simultaneously hold down Cntrl+Shift+R).

11. You should see the removed section missing. Check below to see if this fixed the problem or if it went away. If yes, this section is your problem. If not, go to the next step.

12. If the problem is still there, move back to the junk.html file and put the cursor in the place where you deleted the section, if the cursor has moved. PASTE the cut section back in (Cntrl+V). Move to another section above or below this point and repeat steps 8 through 12.

At some point in this process, you will see the problem either fix itself or disappear. Begin with large sections and when you find the large section problem area, break it up into smaller pieces. Eventually, you will isolate the area that is causing you grief. Note the CSS references to identify the troublesome section and start making changes to the CSS file to fix it.

Gentle Slash and Burn

To use the gentle version of slash and burn, instead of deleting the sections as shown above, cut and paste them into Notepad or another text editor so they are protected in case you get distracted from the cut and paste process. ALWAYS back everything up as you go along, just in case (which happens a lot more than you might think!).

Common Errors

We all make mistakes. The word “typo” wasn’t invented without reason. Here are some of the most common problems that creep up with CSS.

Missed Spellings

Just so you know, leftt is not the same as left and this could be the reason something is on the right instead of the left side of your page. Putting a 30ps for a margin won’t get much of a result, but 30px will. Missed spelling errors are common and easy to overlook. Luckily, CSS validators can often catch these tiny mistakes for us.

Forgotten Details

As creative as you can be with CSS, there are some ground rules you have to follow. Every selector must be identified as an ID or CLASS unless it is a HTML TAG. It must be laid out as selector { property: value; property: value; } and the braces, colon and semi-colon must be there. Miss one of these little details and nothing will happen, or strange things might. CSS validators will usually catch these little forgotten details for you.

Wrong Selector

Putting all your wonderful designs in #content when they were supposed to be in #context-text doesn’t help your layout. Luckily, you can usually see these immediately upon viewing the page, so just cut and paste them in the right tag…and then remember what you deleted from #content. Of course, you can refer to your frequently backed-up file to get the lost code. Hint-Hint!

Wrong Template Module

As useful as WordPress’ new modular templates are, many a time a user has made a modification in comments.php instead ofcomments-popup.php or other similarly named files by mistake. Double check which modular section you are supposed to be working on all the time. And if you mess one up by accident, there is always that faithful backup file to make things new again.

Multiple Choice

CSS can’t read your mind. If there are two references to the same selector with conflicting information, it has to decide which one it will use. This is very common if you are bringing your original style sheet in on top of a new one. If you are fighting with a selector for, say, the h1 heading, and nothing is changing, search through the style sheet to see if there is another reference to that selector.

Pest Control – Watching Out For Browser Bugs

No matter how hard we try to make our web pages beautiful, it can take the viewing of the web page in a different browser to totally screw up our lovely design.

Different browsers view web pages differently. Older browsers won’t recognize new CSS standards, while newer ones often “see” things differently from their brethren. The results are often not pretty, causing blinking, jumping, or missing design elements, shifting layouts, and distorted positions.

How do you know it’s the browser and not your design causing the problem? You often don’t. If you play with CSS a lot, you will learn to recognize the symptoms. In general, here are the clues:

• Text jumps around or blinks as you scroll down the page.
• Links and text jump around as you move the mouse over a link.
• Lists with links jump around and move as you move your mouse over them.
• Layouts look different. Columns are wider or narrower between browsers.
• Graphics overlap the text or lists.
• Special effects such as filters don’t look the same or aren’t there.

To get help with your browser bugs, check out the recommendations and resources at CSS Fixing Browser Bugs.

The post CSS Troubleshooting appeared first on Greenhouse Design Group.

The post Infographic: How to Get Started with HTML in a Web Page appeared first on Greenhouse Design Group.

Headline Tags

The main purpose of the headline tags are make the titles stand out on the page, and also tell the browser and visitors where the titles are. You can use <h1></h1> for the main title, then (if needed) <h2></h2> for a secondary title. The bigger the number gets, the smaller or less important the title becomes. Remember to use the headline tags for headings only. It is not a good idea to use them to make text bigger or bolder. Also, search engines look at how your headline tags are used to help index the structure of the content on your web pages.

Code: <h1>This Is My Title</h1>

Paragraph Tags

The paragraph tags are important because they show the start (

) and then end

of where a paragraph should be on your web page. Having a long page with nothing but unformatted text is going to be very hard for the reader to navigate through. You want to break up the web page with the paragraph tags to make the web page your working on more scan-able for the end user.

Code: <p>This will be shown as it’s own paragraph on my web page.</p>

Line Break Tags

What if you don’t want to go to a new paragraph, and instead only want to break of one line and move to the line right under it? That is what the
or
tags are for. You might see either used, however it might be best to start using
to future-proof your web page for browsers in the future (just in case support for
was ever dropped.

Code: I can put this at the end of a line to show where I want it to stop. <br />

Blockquote Tags

When text has been blockquoted, it is often indented a little – in comparison with the other paragraphs around it. So you get white space to the left, and the margins around the text are enlarged a little ‘bit to seperate it from the rest of the text.

Code: <blockquote>This text will be shown as indented on my web page.</blockquote>

Image Tags

In HTML, when you want to call upon an image to be displayed on your web page, you need to use the img tag. This tag tells the browser and web server that you are going to put an image here, and then what follows src= is the direct path to the image in question.

Code: <img src=”https://www.yourdomain.com/yourimage.jpg” />

Horizontal Rule Tags

The horizontal rule is for making a nice separator between sections of your web page. It acts as a single solid line that can be placed anywhere on your web page. It looks like this:

Code: <hr />

List Tags

If you want to format a list of topics on a single page, then the list tags will come in handy. You would start a list with the <ul> tag and end it with the </ul> tag. For each item on the list, you will want to wrap it in the <li> and </li> tags.

Code: <ul> <li>item #1</li> <li>item #2</li> </ul>

Ordered List Tags

If you want to format a list of topics on a single page, and have them numbered, the ordered list tags should be used. You would start a list with the <ol> tag and end it with the </ol> tag. For each item on the list, you will want to wrap it in the <li> and </li> tags.

Code: <ol> <li>item #1</li> <li>item #2</li> </ol>

Link Tags

Links are used to help users go from one page to the next page. The basic link is started with the tag with the page’s path you want to link to inside the quotation marks. Then you type in the text of the link, and close it out with the tag.

Code: This Text is a Link

What Have You Learned About HTML Formatting Tags?

Now, take a look back at what this page has taught you:

• How to best use the image tags to show images on a web page
• The horizontal rule will put a horizontal line across a web page
• The list tags can be used to format lists
• The ordered list tags can be used to format lists, and number them
• Link tags are used to link from one web page to another web page, when clicked in the browser

The post HTML Formatting Tags Basics appeared first on Greenhouse Design Group.

The navigation is what allows you to move from one section of the website to the next, linking web pages to web pages, and in all making a website work. Here I hope to explain why navigation is important, along with a few other key factors you should remember when creating your site.

Organize Your Web Pages

You should have a good idea of what your website is going to be about, and how you are going to create it before you start with any HTML coding. One tool that comes in extremely handy when deciding navigation and how each page links to each idea is mind mapping.

As an example let us say you are working on a website about you, so you have these basic web pages designed and ready to go:

• The Home Page (the first thing people see)
• An About Page (which gives more information about you, like your resume)
• Your Contact Page (might have your e-mail address, or various means of contacting you)
• Projects and Work (examples of the work you have done, or the projects you have worked on)

Now somewhere, you will need to have your website navigation on each of the pages. This can be done in a number of different ways, but the most popular seems to be across the top. This way people can go to and from different parts of the website, just by clicking the links you see on the top.

I would suggest having them formatted this way:

Home About Me Contact Me My Projects
Each one should link to the related pages above. A clean-cut and uniform navigation system is really a must.

Website Navigation Tips

Here are some more tips you should watch out for when it comes to website navigation:

• Create a sitemap to help people find exactly what they are looking for quickly.
• There is no problem with highlighting certain pages you think deserve more attention, just make sure they don’t take away from your main website navigation.
• Be sure to use short and precise words in your links, so people will know exactly what they are getting.

This is no doubt that navigation plays a huge role in how successful your website is and how long they stick around it. If people can not navigate from web page to web page easily, they might grow frustrated and leave the website all together. So, having a good navigation system means you can keep more visitors both on and returning to your hosted website.

What Have You Learned About Website Navigation?

Now, take a look back at what this page has taught you:

• Plan Your Basic Website Layout in Advance
• Mind Mapping is a Good Way to Get Your Pages Organized
• Keep your navigation short, clean and to the point

The post Website Navigation: Why is it important appeared first on Greenhouse Design Group.

Basic Web Page Layout Example

Every web page you create should have four basic elements.

<html>
<head>
<title>My First Web Site</title>
</head>
<body>
This is my first web site.  I hope you enjoy it!
</body>
</html>

The HTML Tags

The <html> and </html> tags wrapped around the text tells you this is an HTML document. They signify the start of the web page and the end of the web page.

The Head Tags

The <head> and </head> tags wrapped around the title tags tell the web browser this is where you can get specific information about this page, and how it is displayed. The head tags must be at the top of the page, after the first HTML tag.

The Title Tag

The <title> and </title> tags tells the browser that what is in between here is the title for the web page. It will be shown (in most browser) at the top of the menu and on the tab you are browsing from.

The Body Tags

The <body> and </body> tags wrapped around the text tells you this is the “body” of the web page, where the content you want displayed in the browser goes.

Remember to Close Your Tags

You might have noticed that these tags come in pair. One of these tags is used to start the command to the web browser, and the other is used to end or close it. For example, when you use the <title> tag, you are telling the web browser, “Hey, this is the web page’s title here, pay attention!”. Now, you need to tell the web browser that you are done telling it the title of your page. You use the </title> tag to say, “Ok, done telling you what the title is – move along!”

What Have You Learned About the Basic Parts of a Web Page?

Now, take a look back at what this page has taught you:

• Each web page is made up of four primary parts.
• The HTML tags show you where the web page starts and ends.
• The head tags are used to display important information about the web page, that will not be seen by the end user.
• The title tags are used to tell the browser what the title of the page is.
• The body tags tell the web browser where your web page’s content starts and ends.
• If you start a tag, remember to close it.

The post Parts of a Web Page Layout Explained appeared first on Greenhouse Design Group.

Hyper Text Markup Language, or as you know it HTML, is the markup language for most web pages on the Internet. Now, it is not exactly a language like English or Spanish, which we communicate with verbally. A markup language is a system for editing text in a way that changes how the text looks or how you interact with it. Where you use funny looking code to make one section of text look different than the other, the code in question is not seen by the end user. The server the web page is coming from, and the user’s browser come together to help mesh it together as something that is seen as visually appealing to the end user.

Parts of a Web Page, Explained

Before you learn how to create your own web page, you need to learn what all the parts of the website do, and what they are there for. We covered some of these in the Basics of HTML tutorial, but I am going to mention those again and a few more you need for a basic HTML web page. All web pages are written with a mix of content and code, and you must learn how to mix these elements correctly for your website to come out looking correctly.

Website Navigation

The navigation section of your website is one of the most important factors to a website. Why? The navigation is what allows you to move from one section of the website to the next, linking web pages to web pages, and in all making a website work. Here I hope to explain why website navigation is important, along with a few other key factors you should remember when creating your website.

Body Tag Modifiers

There are several HTML tags that can act as modifiers to how the web page looks visually. First, let us re-visit the body tags. The body tags are there to tell the browser what part of the document is going to be visible to the end user when viewing the web page. This is marked up in your HTML code by putting awhere your web page’s content begins and atags where it ends.

HTML Formatting Tags

When it comes to formatting a web page using HTML code, you can think of it (kind of) in the same way you would look at formatting a document formatted by a word processor. You have your headlines to show you where one section starts and stops. You have your paragraphs to break up blocks of text, and you have line breaks to show where there should be a new line started. Now I am going to show you how to get some of these things done using HTML.

The post How to Get Started with HTML in a Web Page appeared first on Greenhouse Design Group.

Because HTML4 relies heavily on plugins such as Flash, Silverlight and Java to integrate media to a site, browsers (and technology for that matter) must be able to support it to load properly. Some manufacturers such as Apple have stopped supporting some of these plugins entirely on mobile devices to provide a better user-experience and longer battery life. Unfortunately, this means some of the media-heavy Internet using this technology is inaccessible from iPads and iPhones.

HTML5 combats this issue head-on by adding several new features and streamlining functionality so that users aren’t required to install another plugin just to play to an embedded song or video. Now, HTML5 allows media to be directly embedded into the coding of a webpage using simple HTML tags only—no plugins required!

One of the major downfalls of traditional desktop applications is that most are web-based and useless without an Internet connection. HTML5 also provides websites the ability to store offline data for applications. For example, users are now able to create a file in Google Docs or draft a message in Gmail even when disconnected from the Internet. HTML5 makes this process even easier by automatically syncing your offline drafts the next time you’re connected—that way work is never lost, regardless if a web connection is present or not.

If you’re worried about how to take advantage of the benefits offered by HTML5, fear not, you’re more than likely already using HTML5 without even knowing it. Popular browsers such as Safari, Chrome and Firefox support at least some HTML5’s elements, if not all.

The post An Explanation of HTML5 for Beginners appeared first on Greenhouse Design Group.

CSS stands for Cascading Style Sheets. It allows you to store style presentation information (like colors and layout) separate from your HTML structure. This allows precision control of your website layout and makes your pages faster and easier to update.

This article briefly describes the use of CSS in WordPress, and lists some references for further information. For information on CSS itself, see Know Your Sources.

WordPress and CSS

WordPress Themes use a combination of template files, template tags, and CSS files to generate your WordPress site’s look.

Template Files

Template files are the building blocks which come together to create your site. In the WordPress Theme structure, the header, sidebar, content, and footer are all contained within individual files. They join together to create your page. This allows you to customize the building blocks. For example, in the default WordPress Theme, the multi-post view found on the front page, category, archives, and search web pages on your site, the sidebar is present. Click on any post, you will be taken to the single post view and the sidebar will now be gone. You can choose which parts and pieces appear on your page, and customize them individually, allowing for a different header or sidebar to appear on all pages within a specific category. And more. For a more extensive introduction to Templates, see Stepping Into Templates.

Template Tags

Template tags are the bits of code which provide instructions and requests for information stored within the WordPress database. Some of these are highly configurable, allowing you to customize the date, time, lists, and other elements displayed on your website. You can learn more about template tags in Stepping Into Template Tags.

Stylesheet

The CSS file is where it all comes together. On every template file within your site there are HTML elements wrapped around your template tags and content. In the stylesheet within each Theme are rules to control the design and layout of each HTML element. Without these instructions, your page would simply look like a long typed page. With these instructions, you can move the building block structures around, making your header very long and filled with graphics or photographs, or simple and narrow. Your site can “float” in the middle of the viewer’s screen with space on the left and right, or stretch across the screen, filling the whole page. Your sidebar can be on the right or left, or even start midway down the page. How you style your page is up to you. But the instructions for styling are found in the style.css file within each Theme folder.

WordPress Generated Classes

Several classes for aligning images and block elements (div, p, table etc.) were introduced in WordPress 2.5: aligncenter,alignleft and alignright. In addition the class alignnone is added to images that are not aligned, so they can be styled differently if needed.

The same classes are used to align images that have a caption (as of WordPress 2.6). Three additional CSS classes are needed for the captions, together the alignment and caption classes are:

[css]
/* =WordPress Core
————————————————————– */
.alignnone {
margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
display: block;
margin: 5px auto 5px auto;
}

.alignright {
float:right;
margin: 5px 0 20px 20px;
}

.alignleft {
float: left;
margin: 5px 20px 20px 0;
}

.aligncenter {
display: block;
margin: 5px auto 5px auto;
}

a img.alignright {
float: right;
margin: 5px 0 20px 20px;
}

a img.alignnone {
margin: 5px 20px 20px 0;
}

a img.alignleft {
float: left;
margin: 5px 20px 20px 0;
}

a img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto
}

.wp-caption {
background: #fff;
border: 1px solid #f0f0f0;
max-width: 96%; /* Image does not overflow the content area */
padding: 5px 3px 10px;
text-align: center;
}

.wp-caption.alignnone {
margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
margin: 5px 0 20px 20px;
}

.wp-caption img {
border: 0 none;
height: auto;
margin: 0;
max-width: 98.5%;
padding: 0;
width: auto;
}

.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
margin: 0;
padding: 0 4px 5px;
}
[/css]

Each Theme should have these or similar styles in its style.css file to be able to display images and captions properly. The exact HTML elements and class and ID values will depend on the structure of the Theme you are using.

Templates and CSS

To help you understand more about how CSS works in relationship to your web page, you may wish to read some of the articles cited in these lists:

• Using Themes – There are also many advanced articles in this list.
• Templates – Comprehensive list of WordPress Theme and Template articles.
• Theme Development – WordPress Theme Development guide and code standards.

WordPress Layout Help

If you are having some problems or questions about your WordPress Theme or layout, begin by checking the website of the Theme author to see if there is an upgrade or whether there are answers to your questions. Here are some other resources:

• Lessons on Designing Your WordPress Site
• Site Design and Layout – Comprehensive list of resources related to site design in WordPress.
• FAQ Layout and Design

CSS Resources

• Finding Your CSS Styles
• Troubleshooting
• Fixing Browser Bugs
• Coding Standards
• Shorthand
• Know Your Sources#CSS
• Conditional Comment CSS
• Validating a Website

The post Getting Started with WordPress and CSS appeared first on Greenhouse Design Group.