{"id":48,"date":"2015-04-09T22:37:24","date_gmt":"2015-04-09T14:37:24","guid":{"rendered":"http:\/\/woohuiren.me\/blog\/?p=48"},"modified":"2015-04-09T22:37:24","modified_gmt":"2015-04-09T14:37:24","slug":"introduction-to-html","status":"publish","type":"post","link":"https:\/\/woohuiren.me\/blog\/introduction-to-html\/","title":{"rendered":"Introduction to HTML"},"content":{"rendered":"<h2>Introduction<\/h2>\n<p>HTML stands for hypertext markup language. It is a very common mistake to mix up a markup language with a programming language, therefore, I shall make it very clear &#8211; HTML is not a programming language. The contents and elements of HTML are interpreted by browsers and this interpretation results in visible or audible websites where the tags and scripts are not displayed. The initial release of HTML was in 1993 where the standards were set by World Wide Web Consortium or better known as W3C. It has evolved over the years from HTML to HTML 4 and to HTML 5, which is the latest version of HTML. Nowadays, this language is now a norm of the Internet. Sites like Google, Youtube and many more are all done using this powerful markup language. <\/p>\n<h2>Why you should learn it<\/h2>\n<ul>\n<li>You can create beautiful websites just like Twitter<\/li>\n<li>If you have a Tumblr page, learning HTML will allow you to customize your Tumblr page<\/li>\n<li>You can make money through web design<\/li>\n<li>It is easy to learn<\/li>\n<li>HTML is well documented on the Internet<\/li>\n<li>HTML is standardized by W3C, so it is a pretty consistent language across different OS and browsers<\/li>\n<li>There are many communities that are able to assist you with it (Stackoverflow, etc)<\/li>\n<\/ul>\n<p>If you want to pick up a useful skill, HTML will definitely be a great one. <\/p>\n<h2>Syntax<\/h2>\n<p>HTML syntax is very simple. It consists of tags that are angular brackets which starts with a &lt; lesser than operator and ends with a &gt; greater than operator. Most elements are paired and must be closed with a \/ backslash. So in essence, it is just &lt;html&gt;&lt;\/html&gt;. The elements that are of exception to this rule would be &lt;img \/&gt; and in-fact, it isn\u2019t necessary to write it with a \/ backslash too, so you can also write it as &lt;img&gt;. In some languages such as Python, indentation matters but for HTML, indentation is not required but should be used to keep the code readable. <\/p>\n<h2>Structure<\/h2>\n<p>HTML starts with a document type declaration and for HTML 5, the declaration is &lt;!DOCTYPE html&gt;. This document declaration helps the browser understand the website\u2019s webpage HTML version. After this is declared, the HTML content begins with the &lt;html&gt; tag.<br \/>\nThe HTML consists of a head and body which are wrapped using &lt;head&gt;&lt;\/head&gt; and &lt;body&gt;&lt;\/body&gt; tags. The head consist of data the browser needs to understand the web page, the data in the head are usually not visible to the user in any way. The body on the other hand, has data that the browser will render and display to tser. <\/p>\n<h2>Example<\/h2>\n<p>This is a hello world example. The &lt;title&gt; element is used here which will show the title of the webpage.<br \/>\nSave this example as index.html or alternatively you can download the file from the Github code for this tutorial.<\/p>\n<blockquote><p><code>&lt;!DOCTYPE html&gt;<\/code><br \/>\n<code>&lt;html&gt;<\/code><br \/>\n<code><span style=\"padding-left: 30px;\">&lt;head&gt;<\/code><br \/>\n<code><span style=\"padding-left: 60px;\">&lt;title&gt;Hello World!&lt;\/title&gt;<\/span><\/code><br \/>\n<code>&lt;\/head&gt;<\/code><br \/>\n<code>&lt;body&gt;<\/code><br \/>\n<code><span style=\"padding-left: 60px;\">Hello World! This is my first HTML page<\/span><\/code><br \/>\n<code>&lt;\/body&gt;<\/span><\/code><br \/>\n<code>&lt;\/html&gt;<\/code><\/p><\/blockquote>\n<h2>Conclusion<\/h2>\n<p>Yep, that was so easy and fast wasn\u2019t it? I hope you have enjoyed this tutorial and this has helped ignite the fiery passion of you for HTML. Please take note that this is just a very simple introduction to HTML. I will be continuing to write HTML tutorials to help all of you out. If you have any questions, feel free to leave them in the comments below. <\/p>\n<p><a href=\"https:\/\/github.com\/GIANTCRAB\/HTML-tutorial-series\/blob\/master\/tutorial-1\/\">Github Tutorial Code<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction HTML stands for hypertext markup language. It is a very common mistake to mix up a markup language with a programming language, therefore, I shall make it very clear &#8211; HTML is not a programming language. The contents and elements of HTML are interpreted by browsers and this interpretation results in visible or audible &hellip; <a href=\"https:\/\/woohuiren.me\/blog\/introduction-to-html\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Introduction to HTML&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","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":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[29],"tags":[33,32,31,34],"class_list":["post-48","post","type-post","status-publish","format-standard","hentry","category-tutorials","tag-basics","tag-essentials","tag-html","tag-introduction"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/woohuiren.me\/blog\/wp-json\/wp\/v2\/posts\/48"}],"collection":[{"href":"https:\/\/woohuiren.me\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/woohuiren.me\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/woohuiren.me\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/woohuiren.me\/blog\/wp-json\/wp\/v2\/comments?post=48"}],"version-history":[{"count":6,"href":"https:\/\/woohuiren.me\/blog\/wp-json\/wp\/v2\/posts\/48\/revisions"}],"predecessor-version":[{"id":67,"href":"https:\/\/woohuiren.me\/blog\/wp-json\/wp\/v2\/posts\/48\/revisions\/67"}],"wp:attachment":[{"href":"https:\/\/woohuiren.me\/blog\/wp-json\/wp\/v2\/media?parent=48"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/woohuiren.me\/blog\/wp-json\/wp\/v2\/categories?post=48"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/woohuiren.me\/blog\/wp-json\/wp\/v2\/tags?post=48"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}