{"id":2991,"date":"2014-03-13T00:43:45","date_gmt":"2014-03-13T06:43:45","guid":{"rendered":"http:\/\/blog.eastfist.com\/?p=2991"},"modified":"2014-03-13T00:43:45","modified_gmt":"2014-03-13T06:43:45","slug":"html5-beginner-tutorial-eastfist-style","status":"publish","type":"post","link":"https:\/\/eastfist.com\/blog\/2014\/03\/13\/html5-beginner-tutorial-eastfist-style\/","title":{"rendered":"HTML5 Beginner Tutorial &#8211; Eastfist Style"},"content":{"rendered":"<p>By Chongchen Saelee<\/p>\n<p>OK. Let me show you how I do HTML5 for best speed and conformity. Check this:<\/p>\n<p>To begin, the first thing you need to know about HTML files is that they contain only strings or text. They cannot be binary data like other kinds of files. Ironically, it&#8217;s binary anyway, but HTML data is required to be interpreted as text or string only.<\/p>\n<p>So open your favorite string\/text editor, such as Notepad or <a href=\"http:\/\/www.notepad-plus-plus.org\/\" target=\"_blank\" title=\"Link opens in new window\">Notepad++<\/a>, and create a new blank text file. You will be typing in the bare minimum text to structure a HTML file (the proper way anyway). <!--more-->It is essentially some instructions for an Internet browser on how to draw the HTML file. You are actually programming! Can you believe that?<\/p>\n<p>All HTML5 compliant webpages need the <code>!doctype<\/code> declaration.<\/p>\n<blockquote><p>\n<b>&#60;!doctype html&#62;<\/b>\n<\/p><\/blockquote>\n<p>HTML uses &#8220;tags&#8221; to make layout more object-oriented. Object-oriented programming is a concept that makes programming easier to wrap your head around. I won&#8217;t go in-depth into it, but there&#8217;s a lot of organizational philosophy behind it. Anyway, HTML &#8220;tags&#8221; have <code>attributes<\/code> and <code>values<\/code>.<\/p>\n<p>It is structured like a skeleton. Check this:<\/p>\n<blockquote><p>\n<b>&#60;head&#62;<\/b><br \/>\n<em>stuff goes here<\/em><br \/>\n<b>&#60;\/head&#62;<\/b><\/p>\n<p><b>&#60;body&#62;<\/b><br \/>\n<em>stuff goes here<\/em><br \/>\n<b>&#60;\/body&#62;<\/b>\n<\/p><\/blockquote>\n<p>You open tags enclosed in brackets <code>&#60;<\/code> and <code>&#62;<\/code> and close them with <code>&#60;<\/code> and <code>\/&#62;<\/code>. In some instances, since the optimization of the HTML standard by <a href=\"http:\/\/www.w3.org\" target=\"_blank\" title=\"Link opens in new window\">W3C<\/a>, a group of professionals that author the web standards, some tags don&#8217;t need to be closed. For example, a line break is solely <code>&#60;br\/&#62;<\/code>.<\/p>\n<p>So to set up an HTML file, you need to have an HTML tag, first and foremost. Check this:<\/p>\n<blockquote><p>\n&#60;!doctype html&#62;<br \/>\n<b>&#60;html&#62;<\/b><br \/>\n&#60;head&#62;&#60;\/head&#62;<br \/>\n&#60;body&#62;&#60;\/body&#62;<br \/>\n<b>&#60;\/html&#62;<\/b>\n<\/p><\/blockquote>\n<p>That&#8217;s it! That&#8217;s your most basic (and compliant) <b>HTML5<\/b> file!!!<\/p>\n<p>If you haven&#8217;t saved the file yet, then do so. Save the file AS AN HTML FILE, meaning when you save it, select the option for the file extension\/format to &#8220;All Files(*.*)&#8221; in Windows Dialog box, or HTML(*.html) if it exists as a selection, otherwise use All Files and add <code>.html<\/code> as the file extension and SAVE.<\/p>\n<p>Like this:<\/p>\n<blockquote><p>\n<b><em>myFirstHTML.html<\/em><\/b>\n<\/p><\/blockquote>\n<p>Of course, if you were to open your newly created HTML file in an Internet browser, it won&#8217;t display anything. That doesn&#8217;t mean you&#8217;ve lost what you&#8217;ve written, or that it&#8217;s not working. If you go to your Internet browser&#8217;s <code>View Source Code<\/code> feature, you will see that it&#8217;s all there, it&#8217;s fine and dandy, working.<\/p>\n<p>Let&#8217;s make it more practical. <code>HelloWorld<\/code> is a very popular beginner&#8217;s concept. Let&#8217;s do a HelloWorld implementation in HTML.<\/p>\n<p>Check this:<\/p>\n<blockquote><p>\n&#60;!doctype html&#62;<br \/>\n&#60;html&#62;<br \/>\n&#60;head&#62;&#60;\/head&#62;<br \/>\n&#60;body&#62;<br \/>\n<b>Hello, World!<\/b><br \/>\n&#60;\/body&#62;<br \/>\n&#60;\/html&#62;\n<\/p><\/blockquote>\n<p>Very simple, no? Save your changes and open it in a Internet browser.<\/p>\n<p>Whoa!!! Ain&#8217;t that kewl?!!<\/p>\n<p>So now you can experiment with all the other HTML tags, doo-dads, and cool stuffs. <a href=\"http:\/\/www.w3schools.com\/tags\/\" title=\"Link opens in new window\" target=\"_blank\">W3Schools<\/a> is one of my favorite references online. I use it ALL THE TIME. You can become the master web designer you&#8217;ve always wanted to become! But the beginning may be tough. Keep at it, and you&#8217;ll be creating masterpieces in no time.<\/p>\n<p>I hope that helps! Happy coding! You are now a Padawan HTML Jedi.<\/p>\n<p>If you like this post, feel free to leave your comments and questions. Thanks for reading!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>By Chongchen Saelee OK. Let me show you how I do HTML5 for best speed and conformity. Check this: To begin, the first thing you need to know about HTML files is that they contain only strings or text. They cannot be binary data like other kinds of files. Ironically, it&#8217;s binary anyway, but HTML [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,9],"tags":[203,249,271,551,557,815,836,1239,1240,1802,1822,2028,2533,2688],"class_list":["post-2991","post","type-post","status-publish","format-standard","hentry","category-artistic","category-tech","tag-attributes","tag-basic","tag-beginner","tag-compliant","tag-concept","tag-easy","tag-elements","tag-html","tag-html5","tag-object-oriented","tag-oop","tag-programming","tag-tags","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/eastfist.com\/blog\/wp-json\/wp\/v2\/posts\/2991","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eastfist.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eastfist.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eastfist.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/eastfist.com\/blog\/wp-json\/wp\/v2\/comments?post=2991"}],"version-history":[{"count":0,"href":"https:\/\/eastfist.com\/blog\/wp-json\/wp\/v2\/posts\/2991\/revisions"}],"wp:attachment":[{"href":"https:\/\/eastfist.com\/blog\/wp-json\/wp\/v2\/media?parent=2991"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eastfist.com\/blog\/wp-json\/wp\/v2\/categories?post=2991"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eastfist.com\/blog\/wp-json\/wp\/v2\/tags?post=2991"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}