This is the first HTML tutorial so I figured what better than the standard \u201cHello World\u201d. If you are new to HTML I will tell you a little bit about it. HTML stands for Hyper Text Markup Language and is a way to display and format items in your web browser. HTML is a very simple language to learn and you can have a lot of fun with it. Later I plan to add more advanced HTML\/XHTML and CSS tutorials for you to check out.<\/p>\n
The best thing about HTML is that you don\u2019t need any special tools to begin coding. There is software available that will make your coding easy by adding color coding to you code for example. Really all you need is a text editor (like Notepad in Windows) and a web browser (Firefox, Opera, or I.E. if you must). Just write the code in notepad and save the file with a .html or .htm extension, then double click it to view it in your browsers.<\/p>\n
When you write HTML you use tags which basically tell the browser how to handle each item. Every tag has an open and most have a closing tag in HTML. Every tag must be closed in XHTML, but we will get into the difference later.<\/p>\n
To create our first page we will start with an opening html tag.<\/p>\n
\r\n<\/code><\/pre>\nI will go ahead and close the tag now so that I don\u2019t forget to do it later.<\/p>\n
\r\n\r\n<\/html>\r\n<\/code><\/pre>\nHTML pages generally have two sections: The Header and The Body. The header section will contain information that will not be displayed in the page (such as style sheets, title information, meta tags, etc.). The body section contains all content that the user will see.<\/p>\n
Now we can add the opening and closing tags for the head section.<\/p>\n
\r\n\r\n\r\n\r\n<\/head>\r\n\r\n<\/html>\r\n<\/code><\/pre>\nIn the head section we will add the page title. This is what is display on the top bar of your browser window.<\/p>\n
\r\n\r\n\r\nHello World!<\/title>\r\n<\/head>\r\n\r\n<\/html>\r\n<\/code><\/pre>\n<p>Next to add the body tags. This is where the content that the user will see goes.<\/p>\n<pre><code markup=\"none\"><html>\r\n\r\n<head>\r\n<title>Hello World!<\/title>\r\n<\/head>\r\n\r\n<body><div onClick="this.style.display='none';"><div style="display:block; clear:both; height:1.5em; padding:0.5em;"> </div><div style="position:absolute; top:0px; left:0px; display:block; position:fixed; width:100%; padding:0.5em; line-height:1.5em; background-color:#BE0000; color:#FFF; font-family:Consolas, 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', Monaco, 'Courier New', monospace; font-size:13px; z-index:2147483640; cursor:pointer; " title="click to hide message">Please note, this is a STATIC archive of website teamtutorials.com from 19 Jul 2022, cach3.com does not collect or store any user information, there is no "phishing" involved.</div></div>
<div style="text-align:center;"><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7088392129831729"
crossorigin="anonymous"></script>
<!-- cach3.com ad replacement -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-7088392129831729"
data-ad-slot="7189231016"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
\r\n\r\n<\/body>\r\n\r\n<\/html>\r\n<\/code><\/pre>\n<p>Now we can add elements to the page. First we will add a big heading. With the heading tag you have several different sizes, each on smaller than the previous. H1 is the largest, followed by H2, and H3. Will add the largest one, h1.<\/p>\n<pre><code markup=\"none\"><html>\r\n\r\n<head>\r\n<title>Hello World!<\/title>\r\n<\/head>\r\n\r\n<body><div onClick="this.style.display='none';"><div style="display:block; clear:both; height:1.5em; padding:0.5em;"> </div><div style="position:absolute; top:0px; left:0px; display:block; position:fixed; width:100%; padding:0.5em; line-height:1.5em; background-color:#BE0000; color:#FFF; font-family:Consolas, 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', Monaco, 'Courier New', monospace; font-size:13px; z-index:2147483640; cursor:pointer; " title="click to hide message">Please note, this is a STATIC archive of website teamtutorials.com from 19 Jul 2022, cach3.com does not collect or store any user information, there is no "phishing" involved.</div></div>
<div style="text-align:center;"><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7088392129831729"
crossorigin="anonymous"></script>
<!-- cach3.com ad replacement -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-7088392129831729"
data-ad-slot="7189231016"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
\r\n<h1>My first page1<\/h1>\r\n\r\n<\/body>\r\n\r\n<\/html>\r\n<\/code><\/pre>\n<p>Next we will add a paragraph that tells you a little bit about this page. You could just write the text into the page and it would display, but you are really supposed to you P tags for each paragraph.<\/p>\n<pre><code markup=\"none\"><html>\r\n\r\n<head>\r\n<title>Hello World!<\/title>\r\n<\/head>\r\n\r\n<body><div onClick="this.style.display='none';"><div style="display:block; clear:both; height:1.5em; padding:0.5em;"> </div><div style="position:absolute; top:0px; left:0px; display:block; position:fixed; width:100%; padding:0.5em; line-height:1.5em; background-color:#BE0000; color:#FFF; font-family:Consolas, 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', Monaco, 'Courier New', monospace; font-size:13px; z-index:2147483640; cursor:pointer; " title="click to hide message">Please note, this is a STATIC archive of website teamtutorials.com from 19 Jul 2022, cach3.com does not collect or store any user information, there is no "phishing" involved.</div></div>
<div style="text-align:center;"><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7088392129831729"
crossorigin="anonymous"></script>
<!-- cach3.com ad replacement -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-7088392129831729"
data-ad-slot="7189231016"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
\r\n<h1>My first page1<\/h1>\r\n<p>This is my first HTML Page. I wrote this myself using notepad. Sweet!<\/p>\r\n<\/body>\r\n\r\n<\/html>\r\n<\/code><\/pre>\n<p>There you have it. Your first HTML page. When you are done save the file with a .html extension and view it in your browser. If you are saving this on a web server and you want this to be the main page to your site, you will call it index.htm or index.html. Otherwise you can name it whatever you want. You should get something like this.<br \/>\n<img src='http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/10\/011.jpg' alt='HTML Tutorial' \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is the first HTML tutorial so I figured what better than the standard \u201cHello World\u201d. If you are new to HTML I will tell you a little bit about it. HTML stands for Hyper Text Markup Language and is a way to display and format items in your web browser. HTML is a very … <a title=\"HTML Hello World\" class=\"read-more\" href=\"https:\/\/teamtutorials.com\/web-development-tutorials\/html-hello-world\" aria-label=\"More on HTML Hello World\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[30,17],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v17.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>HTML Hello World<\/title>\n<meta name=\"description\" content=\"This is the first HTML tutorial so I figured what better than the standard \u201cHello World\u201d. If you are new to HTML I will tell you a little bit about it.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/teamtutorials.com\/web-development-tutorials\/html-hello-world\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Johnathan Ward\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/teamtutorials.com\/#website\",\"url\":\"https:\/\/teamtutorials.com\/\",\"name\":\"Team Tutorials\",\"description\":\"Learn something new today\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/teamtutorials.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/teamtutorials.com\/web-development-tutorials\/html-hello-world#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/10\/011.jpg\",\"contentUrl\":\"http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/10\/011.jpg\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/teamtutorials.com\/web-development-tutorials\/html-hello-world#webpage\",\"url\":\"https:\/\/teamtutorials.com\/web-development-tutorials\/html-hello-world\",\"name\":\"HTML Hello World\",\"isPartOf\":{\"@id\":\"https:\/\/teamtutorials.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/teamtutorials.com\/web-development-tutorials\/html-hello-world#primaryimage\"},\"datePublished\":\"2007-10-20T23:29:50+00:00\",\"dateModified\":\"2007-10-20T23:29:50+00:00\",\"author\":{\"@id\":\"https:\/\/teamtutorials.com\/#\/schema\/person\/3abea1fc71644afe035403357450b9d9\"},\"description\":\"This is the first HTML tutorial so I figured what better than the standard \\u201cHello World\\u201d. If you are new to HTML I will tell you a little bit about it.\",\"breadcrumb\":{\"@id\":\"https:\/\/teamtutorials.com\/web-development-tutorials\/html-hello-world#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/teamtutorials.com\/web-development-tutorials\/html-hello-world\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/teamtutorials.com\/web-development-tutorials\/html-hello-world#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/teamtutorials.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML Hello World\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/teamtutorials.com\/#\/schema\/person\/3abea1fc71644afe035403357450b9d9\",\"name\":\"Johnathan Ward\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/teamtutorials.com\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/93d667fe5dc6df5c722e0df5eac14d40?s=96&d=mm&r=r\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/93d667fe5dc6df5c722e0df5eac14d40?s=96&d=mm&r=r\",\"caption\":\"Johnathan Ward\"},\"description\":\"Johnathan Ward is an experienced developer and consultant that writes tutorials to help other developers. In his day job, he is an IBM Watson Consultant with several years of experience deploying and customizing Watson Explorer solutions.\",\"sameAs\":[\"http:\/\/johnathanward.com\",\"https:\/\/twitter.com\/spyderman4g63\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML Hello World","description":"This is the first HTML tutorial so I figured what better than the standard \u201cHello World\u201d. If you are new to HTML I will tell you a little bit about it.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/teamtutorials.com\/web-development-tutorials\/html-hello-world","twitter_misc":{"Written by":"Johnathan Ward","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/teamtutorials.com\/#website","url":"https:\/\/teamtutorials.com\/","name":"Team Tutorials","description":"Learn something new today","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/teamtutorials.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/teamtutorials.com\/web-development-tutorials\/html-hello-world#primaryimage","inLanguage":"en-US","url":"http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/10\/011.jpg","contentUrl":"http:\/\/teamtutorials.com\/wp-content\/uploads\/2007\/10\/011.jpg"},{"@type":"WebPage","@id":"https:\/\/teamtutorials.com\/web-development-tutorials\/html-hello-world#webpage","url":"https:\/\/teamtutorials.com\/web-development-tutorials\/html-hello-world","name":"HTML Hello World","isPartOf":{"@id":"https:\/\/teamtutorials.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/teamtutorials.com\/web-development-tutorials\/html-hello-world#primaryimage"},"datePublished":"2007-10-20T23:29:50+00:00","dateModified":"2007-10-20T23:29:50+00:00","author":{"@id":"https:\/\/teamtutorials.com\/#\/schema\/person\/3abea1fc71644afe035403357450b9d9"},"description":"This is the first HTML tutorial so I figured what better than the standard \u201cHello World\u201d. If you are new to HTML I will tell you a little bit about it.","breadcrumb":{"@id":"https:\/\/teamtutorials.com\/web-development-tutorials\/html-hello-world#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/teamtutorials.com\/web-development-tutorials\/html-hello-world"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/teamtutorials.com\/web-development-tutorials\/html-hello-world#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/teamtutorials.com\/"},{"@type":"ListItem","position":2,"name":"HTML Hello World"}]},{"@type":"Person","@id":"https:\/\/teamtutorials.com\/#\/schema\/person\/3abea1fc71644afe035403357450b9d9","name":"Johnathan Ward","image":{"@type":"ImageObject","@id":"https:\/\/teamtutorials.com\/#personlogo","inLanguage":"en-US","url":"https:\/\/secure.gravatar.com\/avatar\/93d667fe5dc6df5c722e0df5eac14d40?s=96&d=mm&r=r","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/93d667fe5dc6df5c722e0df5eac14d40?s=96&d=mm&r=r","caption":"Johnathan Ward"},"description":"Johnathan Ward is an experienced developer and consultant that writes tutorials to help other developers. In his day job, he is an IBM Watson Consultant with several years of experience deploying and customizing Watson Explorer solutions.","sameAs":["http:\/\/johnathanward.com","https:\/\/twitter.com\/spyderman4g63"]}]}},"_links":{"self":[{"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/posts\/675"}],"collection":[{"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/comments?post=675"}],"version-history":[{"count":0,"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/posts\/675\/revisions"}],"wp:attachment":[{"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/media?parent=675"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/categories?post=675"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/tags?post=675"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}