Temp3.net Web Design

Website design, SEO and Marketing FREE Tips and Techniques

By

Structure of HTML Document - Part I

The usage of tags inherits the idea of tree structure in HTML document. Tags can be cascaded to create elaborate trees representing a single document. Going back to our previous example we can add an emphasis inside our paragraph as follows:


<p lang=“en-us” id=“hello-world”> 
	Hello <em> World! </em> 
</p>

Notice that the tag ‘em’ is used for emphasis, an italic font in most browsers. Also notice that the code is a bit more spread out. It is a good idea to pick up good code style habits from the start. Extra white space in HTML does not effect the document in the web browser. Coders tend to follow the style the of a tree, but that is not necessary for your code to work in a web browser. In HTML, white space is ignored by the browser. All HTML documents must be encapsulate with the main tag ‘html’. Something that looks like this:


<html>

	<p lang=“en-us” id=“hello-world”> 
		Hello <em> World! </em> 
	</p>

</html>

Before the first ‘html’ tag, normally appears a ‘doctype’ tag. This tag tells the browser what version of HTML it should expect. In older versions of HTML this was a long paragraph that developers normally copy pasted. The new standards, HTML5 shorten the need. It is my recommendation that if you are just starting with HTML go ahead and start with HTML5, but be aware of older versions.

HTML5 doctype:


<!DOCTYPE html> 

HTML4.01 had a number of options, one example you can find below. There are multiple versions in HTML4.01, for more examples please refer to HTML doctype reference.


<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

So if we go back now and revise our HTML sample code, we will end up with the following:


<!DOCTYPE html> 
<html>

	<p lang=“en-us” id=“hello-world”> 
		Hello <em> World! </em> 
	</p>

</html>


Getting comfortable with the structure of HTML is not a difficult task. It might take some getting used to, but it is not impossible. Further information about the structure of HTML document is soon to come. If you cannot wait until then, I suggest you read the Basic Structure of a Web Page. The next step in learning HTML is to move on to practice. Until now I have shown you HTML, but we have yet to write some and see the results in the browser. For this next step you will need only 3 things. A web browser, which I can assume you have. A text editor, any kind will do. Finally you will need patient. No one learns something new all at once. Proceed with your own pace.

As a final thought about text editors. You do not need anything fancy at this point. I am aware that many web developers and designers will recommend expansive software. The truth is that when you are starting off you do not need all that. There are free option for text editors that can do all you need at this point.

By

Starting with HTML

HTML stands for HyperText Markup Language. HTML is not a programming language per se, it is a markup language. If you want to learn about the differences and more about what programming languages are I suggest you read the article, Programming Languages for non-programmers. In a nutshell, markup means that the text in the file is encapsulated with instructions on how to behave. In the case of HTML, the behavior of the text is how it should appear. HTML markups are called tags. Think about the tags as a box bounding the text. Keep this bounding box on mind every time you need to work with HTML. Every tag comes in two pairs, an opening tag and a closing tag. An opening tag will contain a character or string between triangle braces. A closing tag will contain the same character or string but will begin with a single forward slash. For example:


<p> Hello World! </p>

The ‘p’ character indicates that “Hello World!” is a paragraph. We will examine more tags soon, but it is necessary to understand the nature of tags before we move forward. At a more closer look the character or sting inside the tag are called elements. Elements sometime come ‘naked’ as the example above. Elements may also contain attributes that can can provide more information about the element. Going back to the same example, we can add a language attribute describing the specific language of the text.


<p lang=“en-us”> Hello World! </p>

Notice that the closing tag does not need to contain extra information. Only the opening tag contains attributes to enrich the element. We can also add multiple attributes. Adding an ‘id’ attribute will name our paragraph. That way we can assign functionality to a specific a paragraph. We will use this later on in our quest through HTML.


<p lang=“en-us” id=“hello-world”> Hello World! </p>

If you are comfortable with the idea of tags, elements and attributers, we can move forward to the structure of an html document. Before rushing forward, note to those of in a rush. Learning any programming language takes time. This means time spent in trial an error. Writing code and observing the results. Set aside the time you require to learn a lesson at a time.

A note about HTML5. The new HTML5 standards introduces new tags, elements and attributes. However, the principles of the language remain the same. I will try to point out most of the differences, but at whole I will try to comfort with HTML5 standards.

A final note about what all this means in the greater scheme of things. Web browsers, of all kind convert HTML according to the tags and display them. Out of all the programming languages that run web services, it all comes down to HTML. That is what our browsers know how to translate into the beauty virtual net that makes the World Wide Web.

Things to take away:

  • Markup Langauge
  • Tags, Elements and Attributes

For further readings I suggest looking at the HTML tutorials from w3schools and looking over the HTML reference from sitepoint. Both are very good recourses that will help you, not only now, but any time you deal with HTML code.

By

Happy Holidays

Wishing everyone Happy Holidays & a great New Year!

By

Adding syntax highlighter to WordPress

So in effort of “Getting back to business”, I have been putting together a lesson about HTML and CSS. I am about to finish the lesson and post it in the next few days. One of the tools I was looking for is a syntax highlighting feature. As any coder would tell you, post code online has become easier in recent years since we can add line numbers and highlight the syntax of a language. For example, here are two snippets of the same code?

Without a syntax highlighter:



<!DOCTYPE html>
<html>
  <body>

    <h1>My First Heading</h1>

    <p>My first paragraph.</p>

  </body>
</html>

With a syntax highlighter:

<!DOCTYPE html>
<html>
  <body>

    <h1>My First Heading</h1>

    <p>My first paragraph.</p>

  </body>

</html>

Code thanks to w3schools.com.

Which one would you choose? Obviously, the syntax highlighter has advantages, even if you know nothing about the language. So I wanted to add this feature in order to be more coherent in my lessons. I was very disappointed to learn that adding syntax highlighting to a WordPress blog is not as easy. After going through a dozen of different ones I settled on SyntaxHighlighter Evolved. Using the plugin is painless, you install and activate it like any other plugin. When writing a post you encapsulate the code with [lang] cods [/lang]. Simple enough. The only issue was that it was not working using a visual editor. It order to get it working correctly with HTML code I had to edit the post within the HTML editor of the post. Also, because I am displaying HTML, once I added the code, switching to visual mode will try to interrupt the markup. DO NOT SWITCH BACK TO VISUAL . That will ruin your work and I am not responsible if you lose your work. Other than those two issues that came up only with HTML, great plugin. Highly recommend for anyone who needs to post online code on their WordPress site.

SyntaxHighlighter Evolved website.

By

Free tips from Google's SEO guideline

Unless you have been living under a rock for the past 12 years or are in complete denial, you are surely aware that google is the number 1 site on the planet. Google is ranked the number 1 visited site according to Alexa and has a reach of nearly 50% of internet user to date. Why does this matter to you? Because if you want any site to succeed to have to play by google's rules. There are many scam artists and websites that claim they can get you to the number 1 spot on google, or get you free traffic from search engines. DO NOT fall in to temptation to try them out. Also, do not pay for anyone to tell you google's so called "secrets". Beside their search algorithm and some other business secrets, google is a very transparent company. In fact, they have a starter guide to SEO which is going to be the main reference for this article.

SEO Basics

Let's start with web page titles.The html title tag is used by search engines and browsers to tell the user what is the topic of a particular web page. The webpage title is what is going to be displayed in search engine result as a link to your page.  You should try to find the best description for your web page, while keeping the description under 80 characters long. Try to avoid ambiguous and generic words in your page title such us 'home page', 'next page', etc...

While you should use different, unique page title for each website, you should also make good use of the "description" meta tag. This tag is what will be displayed in search engine results following the link to your page title. Try to make this tag describe in short, but more detail then your page title. Use it to summarize your page content. As with the page title, the description meta tag should be unique to each page of your website.

Improve your site structure

The internet is driven by links and so is your website. Having a good, solid URL structure will improve you site's SEO. Keep in mind that the URL will be displayed in google's search result. You should have a URL that is descriptive just as the page title and the meta tag. Use words and dashes "-" to separate them. When you are building your website, use keywords to structure your folders and sub folders in addition to your page titles.

You navigation is the way humans and crawl bots are going to go trough your website. Make sure you keep it in mind when you are designing the layout of your website. Also make sure you use breadcrumb trails for extra convince. The last thing as far as structure is a site map. This is one page that contains all the links to all your webpages. You should have 2 versions of site maps. one should be an html version for humans, the other should be an xml version that you will submit to google and other search engines to crawl.

Optimize content

After all is said and done, content is key and king. You can do all the tricks in the book, but without good, quality, keyword rich content, you will not have a good ranking. Interesting and original content is more valuable then copy-paste anything you found. In fact, if your content is not original, you might get panelize by the search engines. Use the google keyword tool to search for keywords that are searched and a lot and are low on competition. However, create content for users, not for search engines. Do not write for robots, this will not work in your favor as you might think.

When you are writing content try to put in some links to other websites, primarily your own. Use god keywords for your anchor text instead of just 'next page'. If you have images as part of your website, make sure the file name of the image is descriptive and use alt text to describe the image. As a side note about images, having a long load time for your website is generally bad. Remember to lower the size of your image files and store higher resolution as eternal links.

Crawlers

Crawlers, spiders, web-bots, it all refers to the same thing. Instead of a human user it is a robot, a pice of code that visits your website and others and follows the links outbound from it. To make the robots visit more efficient, google suggest using a robot.txt file that sets permissions for robots. If you have login only areas, you can create a user name and password for crawlers to use. In googles webmaster tools there is a guide that will help you generate a robot.txt file and monitor the crawler errors, if any.

Mobile SEO

Over the past few years, mobile internet via smart phones has grown. With the lunch of the iPad and other tablets, there are predictions that users will use mobile platforms more than regular computers in just a few more years. In order to accommodate the mobile user, you should create a mobile version of your website as well as notifying google of such website. Google can recognize mobile sites as the domain starts with 'm' instead of traditional 'www'.

Promote your website

As a final note, promote your website using back links and other creditable websites. Do not try to promote each little section, but rather the website as whole. Google will crawl and index your entire website on it's on. Avoid scams, spamming and using any 'black-hat' ways to promote your website as you will get penalize for it. Use Google Analytics and Googles webmaster tools to analyze your website and the traffic you attract.

Powered by WP Robot