{"id":2584,"date":"2019-03-17T22:08:41","date_gmt":"2019-03-17T21:08:41","guid":{"rendered":"https:\/\/www.consitech.it\/uncategorized\/introduzione-html\/"},"modified":"2020-02-08T11:59:38","modified_gmt":"2020-02-08T10:59:38","slug":"introduzione-html","status":"publish","type":"post","link":"https:\/\/www.consitech.it\/en\/courses\/html-en\/introduzione-html\/","title":{"rendered":"Introduction &#8211; HTML"},"content":{"rendered":"\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<span class=\"embed-youtube\" style=\"text-align:center; display: block;\"><iframe class=\"youtube-player\" width=\"1220\" height=\"687\" src=\"https:\/\/www.youtube.com\/embed\/iRtC3YOktr4?version=3&#038;rel=1&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;fs=1&#038;hl=en-US&#038;autohide=2&#038;wmode=transparent\" allowfullscreen=\"true\" style=\"border:0;\" sandbox=\"allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox\"><\/iframe><\/span>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Welcome to my free HTML course<\/h2>\n\n\n\n<p>But before learning the basics, we have to learn a little about theory.<\/p>\n\n\n\n<p>First of all, have you ever wondered why you should learn this language? Well, here are some good reasons:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>It is <strong>easy <\/strong>to learn<\/li><li> <strong>It&#8217;s the base<\/strong> of all the web pages you see online, too.<\/li><li> It&#8217;s <strong>open-source<\/strong><\/li><li> <strong>Guides<\/strong> are easy to find<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">A little curiosity<\/h2>\n\n\n\n<p><strong>HTML<\/strong> stands for HyperText Markup Language. This means that, as you surely have noticed while browsing the Web, the HTML pages are hypertext documents with the possibility of interconnecting with each other via links.<\/p>\n\n\n\n<p>HTML was born in June 1993, and over the years has seen many revisions up to the current version: the fifth.<\/p>\n\n\n\n<p>The HTML5 brings great advantages compared to previous versions, such as the ability to reproduce multimedia content (such as video and audio) natively from the browser without the need for external extensions (Flash Player, for example), the possibility of having a whole set of instructions to check the sensors on the various devices (GPS, light sensor, gyroscope, accelerometer, etc.).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The basis<\/h2>\n\n\n\n<p>Before I talked about <strong>markup<\/strong> also called <strong>tags<\/strong>, but what are they?<\/p>\n\n\n\n<p>Tags are the basis of HTML, there are two types:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>standard (with opening and closing tag)<\/li><li>autoclosing (with only opening tag)<\/li><\/ul>\n\n\n\n<p>Here is their structure:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img fetchpriority=\"high\" decoding=\"async\" width=\"685\" height=\"129\" src=\"https:\/\/www.consitech.it\/wp-content\/uploads\/HTML-tag-structure.png\" alt=\"\" class=\"wp-image-2593\" srcset=\"https:\/\/www.consitech.it\/wp-content\/uploads\/HTML-tag-structure.png 685w, https:\/\/www.consitech.it\/wp-content\/uploads\/HTML-tag-structure-600x113.png 600w, https:\/\/www.consitech.it\/wp-content\/uploads\/HTML-tag-structure-300x56.png 300w, https:\/\/www.consitech.it\/wp-content\/uploads\/HTML-tag-structure-260x49.png 260w, https:\/\/www.consitech.it\/wp-content\/uploads\/HTML-tag-structure-50x9.png 50w, https:\/\/www.consitech.it\/wp-content\/uploads\/HTML-tag-structure-150x28.png 150w\" sizes=\"(max-width:767px) 480px, 685px\" \/><\/figure><\/div>\n\n\n\n<p>code:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; highlight: [1]; title: ; notranslate\" title=\"\">\n&lt;p class=&quot;course&quot;&gt; Content &lt;\/p&gt;\n<\/pre><\/div>\n\n\n<p>All tags start with &#8220;<em>&lt;<\/em>&#8221; followed by the name of the tag, in this case, the p  <br>(paragraph) tag, later separated by space, there may be attributes, which are properties of that tag, and you end up closing the opening the tag with &#8220;<em>&gt;<\/em>&#8220;, following is inserted the content which can also be another tag, then the tag is closed by writing &#8220;<em>&lt;\/<\/em>&#8220;, tag name &#8220;<em>&gt;<\/em>&#8220;.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Editor<\/h2>\n\n\n\n<p>Do you need a program to write in HTML?<\/p>\n\n\n\n<p>No, but can be helpful because of the autocompletion and syntax highlighter.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Free Offline Editor:<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>Microsoft Visual Studio Code (actually I use that) &#8211; <a rel=\"noreferrer noopener\" aria-label=\"Link (opens in a new tab)\" href=\"https:\/\/code.visualstudio.com\/\" target=\"_blank\">Link<\/a><\/li><li>Atom &#8211; <a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/atom.io\/\" target=\"_blank\">Link<\/a><\/li><li>NotePad++ &#8211; <a rel=\"noreferrer noopener\" aria-label=\"Link (opens in a new tab)\" href=\"https:\/\/notepad-plus-plus.org\/download\/\" target=\"_blank\">Link<\/a><\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Online Editor:<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>CodePen &#8211; <a rel=\"noreferrer noopener\" aria-label=\"Link (opens in a new tab)\" href=\"https:\/\/codepen.io\/\" target=\"_blank\">Link<\/a><\/li><li>JSFiddle &#8211; <a rel=\"noreferrer noopener\" aria-label=\"Link (opens in a new tab)\" href=\"https:\/\/jsfiddle.net\/\" target=\"_blank\">Link<\/a><\/li><li>JS Bin &#8211; <a href=\"http:\/\/jsbin.com\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Link (opens in a new tab)\">Link<\/a><\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Paid Offline Editor:<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>Adobe Dreamweaver &#8211; <a href=\"https:\/\/www.adobe.com\/it\/products\/dreamweaver.html\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Link (opens in a new tab)\">Link<\/a><\/li><\/ul>\n\n\n\n<p>This introductory lesson is over, if you have questions you can leave a comment so that the answer can be useful for everyone.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Welcome to my free HTML course But before learning the basics, we have to learn a little about theory. First<span class=\"excerpt-hellip\"> [\u2026]<\/span><\/p>\n","protected":false},"author":1,"featured_media":2510,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[24],"tags":[],"class_list":["post-2584","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-en"],"aioseo_notices":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.consitech.it\/wp-content\/uploads\/Lazione-1-HTML5.png","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p9CpJn-FG","jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.consitech.it\/en\/wp-json\/wp\/v2\/posts\/2584","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.consitech.it\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.consitech.it\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.consitech.it\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.consitech.it\/en\/wp-json\/wp\/v2\/comments?post=2584"}],"version-history":[{"count":0,"href":"https:\/\/www.consitech.it\/en\/wp-json\/wp\/v2\/posts\/2584\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.consitech.it\/en\/wp-json\/wp\/v2\/media\/2510"}],"wp:attachment":[{"href":"https:\/\/www.consitech.it\/en\/wp-json\/wp\/v2\/media?parent=2584"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.consitech.it\/en\/wp-json\/wp\/v2\/categories?post=2584"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.consitech.it\/en\/wp-json\/wp\/v2\/tags?post=2584"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}