{"id":7876,"date":"2022-09-25T17:21:57","date_gmt":"2022-09-25T17:21:57","guid":{"rendered":"https:\/\/mdr.foobrdigital.com\/?p=7876"},"modified":"2022-09-25T17:21:57","modified_gmt":"2022-09-25T17:21:57","slug":"html-editors-and-tools","status":"publish","type":"post","link":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/2022\/09\/25\/html-editors-and-tools\/","title":{"rendered":"HTML Editors And Tools"},"content":{"rendered":"\n<p>From the previous chapter, we learned that HTML is a markup language used for creating web pages. When working on creating web pages, you will need the following tools and programs:<\/p>\n\n\n\n<ul><li>text or HTML editor for writing and editing source code,<\/li><li>browser for checking results,<\/li><li>validator &#8211; a special program checking the validity or syntactical correctness of a source code.<\/li><\/ul>\n\n\n\n<p>Let\u2019s speak about them in details.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"html-editors-2\">HTML Editors<\/h2>\n\n\n\n<p>There are several professional editors web developers use for coding. However, not every editor could satisfy all your needs. So, a good HTML editor must have the following functionality:<\/p>\n\n\n\n<ul><li>syntax highlighting &#8211; displaying text, especially source code, in different colors and fonts,<\/li><li>tab view support &#8211; keeping multiple web pages open in tabs at the same time,<\/li><li>checking HTML document for mistakes,<\/li><li>wrapping code &#8211; hiding large fragments of code leaving only a line.<\/li><\/ul>\n\n\n\n<p>The most popular HTML editors are those listed below:<\/p>\n\n\n\n<ul><li>WebStorm<\/li><li>Visual Studio Code<\/li><li>Atom<\/li><li>Sublime Text<\/li><li>Notepad++<\/li><\/ul>\n\n\n\n<p>As you are just starting coding, you can use Notepad (PC), simple and easy to use HTML editor. Let\u2019s have a look at how to use it.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-1-open-notepad-on-your-computer-4\">Step 1. Open Notepad on your computer<\/h2>\n\n\n\n<p>If you use Windows 8 or later open the Start Screen and type Notepad.<\/p>\n\n\n\n<p>If you use Windows 7 or earlier version follow the steps below:<\/p>\n\n\n\n<p>Open Start &gt; Programs &gt; Accessories &gt; Notepad<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-2-write-your-code-6\">Step 2. Write your code<\/h2>\n\n\n\n<p>Write or copy some HTML code.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"example-of-an-html-code-8\">Example of an HTML code:<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;title&gt;Title of the document&lt;\/title&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;h1&gt;Simple example&lt;\/h1&gt;\n    &lt;p&gt;Some text you want to show here&lt;\/p&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Result<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/mdr.foobrdigital.com\/wp-content\/uploads\/2022\/09\/image-35.png\" alt=\"\" class=\"wp-image-7892\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-3-save-html-document-12\">Step 3. Save HTML document<\/h2>\n\n\n\n<p>Go to &#8220;File&#8221; in Notepad menu and choose &#8220;Save as&#8221;, give a name to your document, using either the &#8220;.htm&#8221; or the &#8220;.html&#8221; file extension. (We recommend to use &#8220;.html&#8221; file extension). Make sure you set the encoding to&nbsp;UTF-8&nbsp;to avoid problems with code. Save the file to the basic folder you should create beforehand to store all your HTML documents.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-4-check-the-html-file-in-a-browser-14\">Step 4. Check the HTML file in a browser<\/h2>\n\n\n\n<p>Open your HTML file in a browser (right-click on the file and choose &#8220;Open with&#8221;).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"browser-16\">Browser<\/h2>\n\n\n\n<p>You will need a browser to check HTML files. To start with, any browser,&nbsp;Google Chrome,&nbsp;Opera, or&nbsp;Firefox&nbsp;will be enough, but later on, you will need all of them. The thing is that every browser has its characteristics, and you will need to check your code in each of them.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"validator-18\">Validator<\/h2>\n\n\n\n<p>An essential part of the web pages development process is checking the validity of the HTML code. Special validators, programs or services, can be used to check the validity or syntactical correctness of a fragment of code or document.<\/p>\n\n\n\n<p>The most common online service is&nbsp;validator.w3.org. Enter the URL of a web page, and the service will check and show the mistakes in the code if any, or get back \u0430 message that your document is valid.<\/p>\n\n\n\n<p>For checking the validity of local files, you can use special programs, for example,&nbsp;Tidy. Some editors (e.g., PSPad) have built-in validator, so you can check your code directly in them.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>From the previous chapter, we learned that HTML is a markup language used for creating web pages. When working on creating web pages, you will need the following tools and programs: text or HTML editor for writing and editing source code, browser for checking results, validator &#8211; a special program checking the validity or syntactical [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[285],"tags":[],"_links":{"self":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/7876"}],"collection":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/comments?post=7876"}],"version-history":[{"count":0,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/7876\/revisions"}],"wp:attachment":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=7876"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/categories?post=7876"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/tags?post=7876"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}