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.
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.
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:
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:
.jpg "html-body-(1)")
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.
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.
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
0 comments:
Post a Comment