Clean your HTML

It is with great pleasure that I am here today to talk about the HTML and what we need to know our beginnings.

First, I want to thank Muhammad Asif Admin of wbupdates, for having kindly invited me to share my technical knowledge on this blog, especially with you!

For those who do not know me (everyone I think: P), my name is Muhammad Nasir, I'm 22 years old and I am currently in the process of becoming SEO. That said, I still spent a developer since I trained as a Webmaster for 3 years.

Now that the introductions are made, I can tell you this product oriented rather to the technique.

To begin, we'll go around the few subtleties to know about creating an HTML document, then we will see how to organize and clean our code. This will help you avoid mistakes, you read easily and make your practice and scalable code.

This article is primarily intended for beginners in HTML but will satisfy a large number of people who thirst for new information on the subject.

Create the first page

Firstly, in this first part, we will discuss the creation of a first HTML document. We'll see what tools to use, why it is better to develop in HTML5 rather than another version, and how we can prepare to produce quality code.

Tools

To create an HTML document, you only need a technically simple notepad. However, you can not have syntax highlighting that colors your tags, attributes and more. Moreover, it is not really practical to develop on the notepad as not a lot of functionality compared to other development-oriented tools.

Instead of notepad, so I suggest you initially choose Notepad + + . This is a very light that can be set as we see fit and most importantly development tool is free! Later, when you have PHP or other languages ​​under your belt, you can spend on software called IDE (Integrated Development Environment) such as Netbeans, Eclipse or Komodo. Fortunately, for HTML, we do not need these now "gasworks" that require a lot of resources in your computer.

Once Notepad + + downloaded, installed and started, the utility is in text mode. This means that everything you write will be considered textual content and nothing else. I suggest you switch to HTML mode by clicking Language-> HTML via the main menu.

From there, all your items will benefit from the syntax highlighting and Notepad + + default consider your content as HTML. Note that you most languages ​​available A to Z and it will be convenient to edit various and sundry files.

Then, to avoid encoding problems, I suggest you select UTF-8 (without BOM) via the menu -Encoding> Encode in UTF-8 (without BOM) . This avoids compatibility issues, problems or other accents. UTF-8 is universal.

Now that our tool is configured, we will address the software that interprets our HTML: The Browser. I suggest you to install multiple browsers on your computer in order to test your code on different solutions. In my case, I chose Mozilla Firefox as your primary browser, Internet Explorer and Google Chrome browsers as test. You can also install a type extension Firebug to help you identify your code errors.

After that, you will normally all the necessary tools to develop in HTML. Except maybe learning. Moreover, I propose now a small presentation of HTML5 so that you can think to use it now.

HTML5? Future reference ...

Since the birth of HTML in the 90s, many developments have emerged in progressively versions. New tags, new ways to develop and now new ways to restore the structures of our sites with HTML5.

Since the announcement of the revised HTML5 in 2007, the web swears by this language still in development today.

Why is it so popular HTML5? Why are we constantly encouraged to use this language? What are the mysteries behind it?

Many questions remain among us, but it is certain that in the future, it is this version that will mark the modernization, semantic web, and other important features of the web world.

To go into more detail and to encourage you to use this version HTML5 now, I can only show you some examples revealing the simplicity and logic of this version in 2014.

For example, the DOCTYPE (the statement that indicates the type of your document). Whether HTML4, XHTML or in another version except HTML5, it should bother to copy the beginning of each HTML file, a code like this:

<DOCTYPE HTML PUBLIC! "- / / W3C / / DTD HTML 4.01 Frameset / / EN"

"Http://www.w3.org/TR/html4/frameset.dtd">

For comparison, the HTML5 DOCTYPE is definitely simpler, smaller and less of a hassle to remember:

<! DOCTYPE html>

Easy is not it? Wait until you see my story on the DIV tags.

A DIV allows you to frame a number of HTML tags. This is a container that can contain an article, header, logo or another set.

The concern of the DIV in previous versions of HTML. Is that it was everywhere. The only thing that differentiated a DIV another, it was the name of the class or ID. Technically, we found ourselves with HEADER DIV, DIV CONTENT DIV LOGO FOOTER DIV, DIV SIDEBAR or more. You understand me, it's redundant and each developer puts his own class names or ID, the whole meaning of the code is to relearn.

HTML5 is a little different. DIV tags are also used, but new tags are used to structure your side and help you understand.

You have <header> tags that indicate the headers, the <aside> tags that indicate the sidebar, the <nav> tags that indicate your menus and navigation, and even <article> tags that I think you l will understand, tell your articles.

In short, semantically, you specify browsers, developers or search engine that element (the header, section, etc..), Is the true content defined between the opening and closing HTML5 you informed . This will always be true even if a particular class or id on information.

Of course, apart from these new tags, HTML5 offers the ability to drag and drop elements, generate graphics, to get a better media management and even manage geolocation. And again, this is not the complete list.

Basically, if you are a beginner, I think HTML5 is for you. Even if you are an experienced developer, I really encourage you to migrate to this version. In addition, you have lots of tutorials on the net and a highly active community.

Imagine its structure is better developed

In the web world, there are lots of site structures. By structure I mean the number of elements, their position, their accessibility within a page. Some of these structures have a sidebar right, left and other others have for example one on each side. Same for each area of ​​a page (header, footer, content, etc.).

The important thing when developing is to project the image of our future page using our imagination. When we imagine our page, we can better imagine our code (and its structure).

Over time, of course you will learn techniques cleaner and more standardized, but the base, I can already try to explain to you today in this article.

I suggest you a little exercise to work on your own imagination and structure.

Take a sheet of paper and draw frames. These frameworks should represent the header, menu, content, sidebar and footer (customize the number and arrangement according to the desired page).

Then, within these frameworks, always put your items in a block. Draw your logo space, your modules, your menu items, your title area ... Until you complete your page as in your imagination. However Avoid placing frills such as text or intricate designs. Keep it simple by using only frames.

Now, because your design is finished, it'll just translate it into HTML via the tags you have learned. The HTML will develop in the direction of reading from left to right and top to bottom. Encode the header frame, then within that header, menu, menu items and so on until the last element of your design.

Overcome his fears to advance more

One thing that often happens when you start and what happened to me too, is that we do not dare for fear of developing or breaking all over again. It seems important to me to reassure you and trust you.

Making mistakes in HTML never break your computer or browser. Encode and test as long as you want. Expand your HTML structure and look in what order the browser interprets your web document. If it does not match the desired page make changes, move sets, tags, etc..

Anyway, whether HTML, CSS or any other language, there are usually several ways to always get his way. If you get the desired result is that it is good!

Then I'll tell you, because you grow, you will learn the methods and practices of the great gurus of HTML. Be patient;)

Organize your HTML

In this second part, we will discuss the organization of your HTML code. We will see how to make a blank basic elements which indicate the Head and Body part then we will end up on this notion of semantic popular HTML5.

The basis of the document? It's parroting ...
Normally, you are currently with your HTML editor and web structure (see above).

What you should know is that in general, the creation of an HTML document always starts the same way. It indicates the type of document, the HTML, Head and Body tags.

Then, we define the encoding of the document, its title and some other information. It seems simple like that ... And it really is! That's the worst! There are even ready bases such as HTML5 Boilerplate or Initializr is tell you how it can be trl!

When the Head made his statement
Once you have copied basic HTML is generally header information document aka Head party going on. This part provides developers, browsers, engines ... where your stylesheet, your scripts ... But also indicate the description of the page, which is the canonical page, etc.. This is sort of identity card of your web page.

Moreover, it is a part that is not visible itself. You can just see the title, description and possibly some other information. Everything depends on the operating system that everyone does.

Here to kick a simple Head and optimized for the vast majority of cases part:

As you can see, there are tags that are not necessarily known to the general public ...

Normally, if you have a few basics, you should recognize the meta description and the relative link to the stylesheet. However, there are many other tags which ones I specified in the code above. Without going into detail about all of these tags is very important and each has its own peculiarities. Well organize your code in the order listed. The encoding, priority tags that act on the browser, the meta and then the other statements.

Enter the body of the document
The body is a party where you'll spend most of your time. The body of the page is where you develop your structure. You must specify these famous frames / blocks you have imagined.

Read your structure from left to right and top to bottom and try to translate what you see. I see part of my header, so I write my <header> and </ header>. Within this header, I dedicated my space logo. I do not have a tag so I put a <logo> <div id= »> »logo and closure that goes with it.

Within this space, I have a picture but a link. I write my anchor with its attributes <a href= »lien "title= »titre »> </ a> and I put my picture inside for it to be clickable <img src =" link to the image "alt =" alternate text ">.

After that, it is my navigation in the header? If so, I have only to put <nav> and </ nav> between the header tags (after the logo div) and if it is not, I said after the closing </ header>.

And so on! HTML is as simple as that. Just be careful, be careful what you write and be methodical. For my part, act like it do not ask me more problems in general. Put comments to As and you will find you.

Here to get an idea, a structure resembling the blog wbupdates.com:

 This is simplified, I must admit, but by dint of developing it will seem obvious. Observe this code, try your hand and document you! Everything will be fine!

Think about the semantics!
Last point before moving on to cleaning and optimizing our code. In HTML5, you have the power to specify exactly what type is each element. Try using semantic markup as much as possible to help players who use and interpret your code. Who knows, Google may like it ^ ^

Clean and Optimize your HTML

Third and last part of this article, you may have noticed, is still quite long. Here we will talk about cleaning and optimization, what I call the Cleaning-code (it should be called as it actually haha). This will allow you to read, to a rolling code and you make friends developers ;)

A good development for better reading
In the code I gave you above, I have indented each group of tags via the Tab key. I encourage you to do the same by creating a hierarchy of multiple levels.

As soon as you go "inside" a framework / set, indent before marking your next tag. Then when you switch to another main frame (header to section for example), go back to the same height as the previous one.

 If you prioritize on several levels, you can better reuse your code by copy / cut / paste. In addition, it facilitates maintenance and readings.

Moreover, the little trick that I would recommend is to look at your code in Firebug. It has the power to automatically manage these indentations. It can even help you learn.

Then on the class names and IDs, put clear and understandable names. If you can, put them by separating each word with dashes (post-content, top news, etc..).

After that, you can go to the W3C validator even though I think it is not necessarily useful.

Finally, a maximum reviewing what you do. Whether HTML, CSS or even PHP, comments are used to indicate for which you have produced this code. Your followers will thank you, believe me!

Sloppy code does not have a bright future
Sloppy code = code done quickly without paying attention to the consequences.

Even though I know that sometimes we are under time pressure, try a quality code quickly. Be productive! Do not use old techniques like eg FONT tags. Browsers have good read and interpret all this, you're going to bite the fingers later! Prefer to work on your speed of production rather than to rush everything indiscriminately.

Also, try to produce code that may change over time. Do not spend your development time only now. Think of the future!

In addition, to update continuously on new technology will allow you to do new things even more fun now!

When browsers misinterpret
For this last point, I suggest you talk browser compatibility. HTML5 in particular, there are compatibility issues with older versions of Internet Explorer or another. Tags are not recognized and it is difficult for the browser to interpret your page properly.

However, there are now scripts to counter these problems. They are:

The first set is to put in place the <html> tag.

 The second set, meanwhile, ranks as soon as possible after the declaration of UTF-8:

After that, I can only suggest you to test your pages with utility http://browsershots.org which allows you to view the record of your documents in different web browsers.

You just have to enter the address of your page and then click Submit. You must then wait a few seconds before reloading the page with F5. If the expected result is this, is that it's good!

To conclude this point, I wanted to talk about scripts that you have to meet sooner or later. Currently there are lots of libraries and framework to simplify your life. Prefer to post your Footer rather than the Head. This will allow the browser to focus on your HTML and your CSS first.

Conclusion

We toured a lot about the creation, organization and clean HTML. It was filled with explanation, history and tutorial, but I hope that you will discover at least some useful information. I hope to see you soon for a new subject, and in the meantime, we welcome your comments below!

Thank you to you all and thank you again for the invitation to Asif!

Good development at all 

You slay your SEO?

You slay your SEO? Make sure you do not shoot you a shot in the foot!

In talking with a friend engineer, I realized that the roles of the HTML and CSS are relatively unknown.

Here is a little reminder for you ... basic essential for your SEO!

HTML, this semantic language

HTML is used to structure your content so semantics, IE giving it meaning. Sense to the reader but also makes sense for Google and other robots that populate the landscape.

A simple example: a title.

To write on a page, I have two solutions:

Nothing to do with HTML!

First solution, I write like a paragraph line, then, with my WYSIWYG editor, I give it an appearance of title (size, bold, underline ...).

Your visitors are fire and take it for a good title, reading the text will not be disturbed.

By cons, Google will consider not as a title but as any paragraph (Google does not see the appearance, he sees only the HTML): farewell the weight of your keywords wisely placed in a "title "! Farewell SEO!

HTML, my savior

Second solution (and only to remember): Use HTML "h2" tag (or h3, h4 ... depending on the level of importance of your title).

This way you blow twofold threefold: first, the browser will automatically display as a title (and yes, it also reads the HTML), IE fat and large.

So, your visitors are happy: they understand that this is a title and reading the text is not disturbed.

Finally, Google understands that this is a security and enhances the keywords in the text.

The dream! :)

I have here an example of a title, but it remains valid regardless of the tag used. In the eyes of google: a paragraph is not a bulleted list, a link is not a title, an image is not an iframe!

In short, Google calls a spade a spade, and you will not make him think he is a dog in the costuming skillfully.

And CSS in?

CSS precisely, will allow you to give the appearance that you want to elements defined in HTML.

Tired of seeing your bulleted lists like this?

Decorate them as you want , CSS is made ​​for!

We can even go further:



And yes, the menu is nothing more than a smart list. Lists apply to collections of elements of nature, they are ordered (numbered list) or unordered (bulleted list).

The navigation of a website's found in this category, and YET its appearance is not that of a list!

Semantic value = HTML = list of links: So to use HTML tag = "ul" and "li"
Visual aspect = CSS = online without chip: it changes the appearance in the CSS code.
Conclusion

You now have grasped the difference between HTML and CSS . manages the HTML background and CSS form.

This difference is crucial to respect an important principle of the web for better accessibility: the separation of content and form. Why is this important?

Imagine that tomorrow you want to adapt your website to smart phones, you can simply create a CSS file that controls the appearance of your HTML on this device. Your "old" CSS file will continue to be normally used by computer browsers, while the new one will be read by mobile phones.

How would you have done if the content and form were confused?

Find more tips for using HTML and CSS optimally and improve your SEO in my training "Introduction to HTML and CSS" .

Posted By Muhammad Asif4:07 AM

0

Continue Reading

5 Ways to improve the content of the blog

Whatever the purpose of a blog, from making money , promote or sell products, to share without any economic interest, the content is the one that catches the attention of readers and Web surfers.

Inspirations sometimes is on our side and create content makes us super simple, but for those times when it is absent, then I leave some tips you can keep in mind to improve the content of your blog:

Continuity and consistency

First, create content for your blog on a consistent basis will help you feel more comfortable with the writing process and assembly of articles (posts) and it will help you find your personal voice, and solidify your personality blogger.

Once you've found your voice, it's much easier to express yourself with personality and safety, and that's when people really begin "to listen."

The important thing is not to give the image of an expert, do not worry about it. The important thing is that you achieve express your ideas in a clear and straightforward, easy to understand your language simple, friendly and personal.

To achieve this continuity and consistency are very important, set hours of the day or if you can not do it regularly, at least some days of the week to sit down and write.

Collaborates with other Bloggers or Writers

Before achieving some work or project in collaboration with colleagues, we must begin to establish a relationship, communication with other bloggers and better if they are more experienced in our field or niche.

Having achieved this, you can try to contact them and offer some kind of benefit in return for reciprocal create content for you, of course the stronger are your connections and your ability to offer something in return, more power you'll have to get positive results. But remember that everything is based on "mutual benefit".

One idea mentioned above for example would be interviewing top bloggers in your niche.

Update old content

Search through the archives of your blog, or post entries with good quality content, adding links were you doing other post your newest blog, so attachment is easy internal movement of your readers and also you will provide a better experience providing relevant content your users.

This can be done manually, which is recommended, or install plug-ins in Wordpress or adding widgets to Blogger, you find them under the name of contents or related post.

He taught himself about the process of writing and editing

This option is one that requires more time and dedication, so down the road, is the one that brings benefits, is offered by the "better pay".

Anyone who has the tools to produce their own content, and good content will be the one that stands out. On the internet you can find whole volumes to help you become an athlete of writing, always considering the features it has an entry in a blog and niche.

Start a weekly series

This is a technique that can help you gain experience in a particular topic and also generate expectations in advance to your readers. It also helps promote the niche of your blog and give a profile of creativity to your blog.

If you dare to be original and start an entirely new, you can participate in an existing one called "blog carnival", you find many a site that is dedicated to publishing lists of blog carnivals "Blog Carnival"