{"id":1303,"date":"2009-01-31T19:22:45","date_gmt":"2009-01-31T11:22:45","guid":{"rendered":"http:\/\/www.janleow.com\/life\/?p=1303"},"modified":"2009-01-31T19:22:45","modified_gmt":"2009-01-31T11:22:45","slug":"make-your-own-web-site-15-html-how-it-works","status":"publish","type":"post","link":"https:\/\/www.janleow.com\/life\/make-your-own-web-site-15-html-how-it-works.html","title":{"rendered":"HTML and how it works video tutorial"},"content":{"rendered":"<p>Creating your html file does not require any special software. Just a basic text editor and a browser is all that is needed to make your web page. When you save the file, just be sure to change the extension from .txt to .html. Then preview it on your favourite browser. You can further test it by uploading it onto your web site and see how it will be displayed.<\/p>\n<p><!--more--><\/p>\n<table border=\"0\" cellpadding=\"0\" align=\"center\" width=\"505\">\n<tr>\n<td ><object id  =\"flashMovie\"   codeBase =\"http:\/\/download.macromedia.com\/pub\/shockwave\/cabs\/flash\/swflash.cab#version=5,0,0,0\"   height   =\"367\"   width    =\"505 \"   classid  =\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" VIEWASTEXT>   <PARAM NAME=\"_cx\"                VALUE=\"26\">   <PARAM NAME=\"_cy\"  VALUE=\"26\">   <PARAM NAME=\"FlashVars\"  VALUE=\"csConfigFile=15_config.xml\">   <PARAM NAME=\"Movie\"  VALUE=\"15_controller.swf?csConfigFile=15_config.xml\">   <PARAM NAME=\"Src\"                VALUE=\"15_controller.swf?csConfigFile=15_config.xml\">   <PARAM NAME=\"WMode\"  VALUE=\"Window\">   <PARAM NAME=\"Loop\"  VALUE=\"false\">   <PARAM NAME=\"Quality\"  VALUE=\"high\">   <PARAM NAME=\"SAlign\" VALUE=\"\">   <PARAM NAME=\"Menu\" VALUE=\"-1\">   <PARAM NAME=\"Base\"  VALUE=\"\">   <PARAM NAME=\"AllowScriptAccess\"  VALUE=\"always\">   <PARAM NAME=\"DeviceFont\" VALUE=\"0\">   <PARAM NAME=\"EmbedMovie\" VALUE=\"0\">   <PARAM NAME=\"BGColor\"  VALUE=\"#FFFFFF\">   <PARAM NAME=\"SWRemote\" VALUE=\"\">   <PARAM NAME=\"MovieData\" VALUE=\"\">   <PARAM NAME=\"SeamlessTabbing\" VALUE=\"1\">         <\/OBJECT>  <\/td>\n<\/tr>\n<\/table>\n<p>       <center><script type=\"text\/javascript\"><!--\ngoogle_ad_client = \"pub-5685769204706262\";\ngoogle_alternate_color = \"eeeecc\";\ngoogle_ad_width = 468;\ngoogle_ad_height = 60;\ngoogle_ad_format = \"468x60_as\";\ngoogle_ad_type = \"text\";\n\/\/2007-08-06: JanLeow.com (Content)\ngoogle_ad_channel = \"0608098433\";\ngoogle_color_border = \"FFFFFF\";\ngoogle_color_bg = \"FFFFFF\";\ngoogle_color_link = \"003399\";\ngoogle_color_text = \"000000\";\ngoogle_color_url = \"808080\";\ngoogle_ui_features = \"rc:0\";\n\/\/--><\/script><br \/>\n<script type=\"text\/javascript\"\n  src=\"http:\/\/pagead2.googlesyndication.com\/pagead\/show_ads.js\">\n<\/script><\/center><br clear=\"all\"><\/p>\n<p>\nThe structure of the web page is simple, and it consists of the head and body section. The head section is where you would place your Meta information about your web page and insert codes like JavaScript or CSS to render the web page, while the body section is where your web page content resides.\n<\/p>\n<blockquote>\n<pre>\n<form name=\"box1\">\n<a class=\"highlighttext\" href=\"javascript:HighlightAll('box1.select1')\">Select All<\/a><br>\n<textarea name=\"select1\" rows=\"12\" cols=\"45\">\n&lt;html&gt;\n&lt;head&gt;\n&lt;title&gt; &lt;\/title&gt;\nMeta information\nCSS and\/or JavaScript codes;\n&lt;\/head&gt;\n\n&lt;body&gt;\nContent\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/textarea><\/form>\n<\/pre>\n<\/blockquote>\n<p>\nAll web pages will follow the above structure.\n<\/p>\n<p>\nLet&#8217;s create your first web page! We will create a file called index.html.<br \/>\nStart up your notepad or similar software and key in the following:\n<\/p>\n<blockquote>\n<pre>\n<form name=\"box2\">\n<a class=\"highlighttext\" href=\"javascript:HighlightAll('box2.select2')\" title=\"\">Select All<\/a><br>\n<textarea name=\"select2\" rows=\"12\" cols=\"45\">\n&lt;html&gt;\n&lt;head&gt;\n&lt;title&gt;My First Web Page &lt;\/title&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n&lt;h1&gt;My First Web Page&lt;\/h1&gt;\n&lt;p&gt;This is my very first web page&lt;\/p&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/textarea>\n<\/form>\n<\/pre>\n<\/blockquote>\n<p>\nSave the file as index.html and use your favourite FTP software to upload your file to the root section of the web site. Usually that would be located in public_html folder. Key in your web site address URL in your favourite browser. If you can see the words, &#8220;My First Web Page&#8221; and &#8220;This is my very first web page&#8221;, congratulations! Your web site is now live and working! Of course it looked a bit boring, to make a beautiful web site you need to know a lot more HTML coding and structure it to display the content.\n<\/p>\n<p>\nIf after mastering the HTML\/CSS codes and you have a flair for designing and creating a beautiful web site, you could create an awesome looking web site that would be unique to world wide web.\n<\/p>\n<p>\nSometimes the fastest shortcut to create a web site is to obtain web site templates either free or paid, and use it on your site. Another idea would be to get an existing web site and start modifying the template to customize it to your needs. This would be a faster way than trying to build a web site from scratch. Besides, not everybody got the flair of designing. Even for myself I am not good at illustration and designing, so the easiest way for me was to take an existing web site template and start modifying it from there. If the changes are substantial, you could make the web site your own because it no longer resembles the original template.\n<\/p>\n<p>\nIn order to modify a web site template, you will need to learn the basics of HTML\/CSS and of course a good handy reference that would help you to understand what to modify to get your desired result. Take it one step at time, and slowly build your HTML\/CSS knowledge and understanding. Before long you could create a beautiful web site of your own.\n<\/p>\n<ul>\n<li><a href=\"make-your-own-web-site-15-html-how-it-works.html\">Learning HTML basics<\/a>\n<li><a href=\"make-your-own-web-site-16-text-formatting.html\">HTML Text formatting<\/a>\n<li><a href=\"make-your-own-web-site-17-more-text-formatting.html\">More HTML Text formatting<\/a>\n<li><a href=\"make-your-own-web-site-18-adding-images.html\">Adding images to your website<\/a>\n<li><a href=\"make-your-own-web-site-19-anchors-links.html\">Making links and anchors when you make your own web site<\/a>\n<li><a href=\"make-your-own-web-site-20-tables-rows-columns.html\">Creating tables, rows and columns in your web site<\/a>\n<\/ul>\n<\/p>\n<p><b>More related HTML tutorials<\/b><\/p>\n<ul>\n<li><a href=\"http:\/\/www.janleow.com\/life\/html-basics.html\">Learning HTML codes for building a web page<\/a>\n<li><a href=\"http:\/\/www.janleow.com\/life\/html-01-the-basics.html\">Lesson 1 &#8211; The Basic HTML Tag<\/a>\n<li><a href=\"http:\/\/www.janleow.com\/life\/html-02-creating-a-website-page.html\">Lesson 2 &#8211; Create a website page<\/a>\n<li><a href=\"http:\/\/www.janleow.com\/life\/html-03-text-formatting.html\">Lesson 3 &#8211; Text formatting tags<\/a>\n<li><a href=\"http:\/\/www.janleow.com\/life\/html-04-text-alignment.html\">Lesson 4 &#8211; Aligning the paragraph text<\/a>\n<li><a href=\"http:\/\/www.janleow.com\/life\/html-05-making-ordered-bulleted-list.html\">Lesson 5 &#8211; Making bullet list and numbered list<\/a>\n<li><a href=\"http:\/\/www.janleow.com\/life\/html-06-html-table-codes-border.html\">Lesson 6 &#8211; Create tables in your website<\/a>\n<\/ul><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Creating your html file does not require any special software. Just a basic text editor and a browser is all that is needed to make your web page. When you save the file, just be sure to change the extension from .txt to .html. Then preview it on your favourite browser. You can further test &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/www.janleow.com\/life\/make-your-own-web-site-15-html-how-it-works.html\"> <span class=\"screen-reader-text\">HTML and how it works video tutorial<\/span> Read More &raquo;<\/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_newsletter_tier_id":0,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[12],"tags":[83,111,160,161,162],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p1bS5F-l1","jetpack-related-posts":[{"id":1362,"url":"https:\/\/www.janleow.com\/life\/make-your-own-web-site-the-index-file.html","url_meta":{"origin":1303,"position":0},"title":"Make your web site&#8217;s first page &#8211; the index.html file","author":"Jan","date":"1 April 2009","format":false,"excerpt":"The first page you need to make when you make your web site is the index file. This is the web page where a visitor will be greeted when they key in your web site domain in their browser. You may say this is the entry point to start browsing\u2026","rel":"","context":"In &quot;Website&quot;","block_context":{"text":"Website","link":"https:\/\/www.janleow.com\/life\/category\/website"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":721,"url":"https:\/\/www.janleow.com\/life\/web-building-editors-notepad-wordpad.html","url_meta":{"origin":1303,"position":1},"title":"Web building using simple editors like Notepad or WordPad","author":"Jan","date":"30 July 2008","format":false,"excerpt":"There is no need to purchase a specialized web editor such as Office Frontpage, Dreamweaver, CoffeeCup HTML, etc. Here's how one can save some precious dollars just using the Notepad or WordPad that came with your Windows OS. HTML files are simply just text files with HTML tags that will\u2026","rel":"","context":"In &quot;Website&quot;","block_context":{"text":"Website","link":"https:\/\/www.janleow.com\/life\/category\/website"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":997,"url":"https:\/\/www.janleow.com\/life\/make-your-own-web-site-browser-troubleshooting.html","url_meta":{"origin":1303,"position":2},"title":"Make your own web site browser troubleshooting","author":"Jan","date":"14 February 2009","format":false,"excerpt":"Sometimes different browsers react differently to the HTML\/CSS when you make your own web site, you have to watch out and test it on each browser. Kind of a drag if you want to make sure IE\/Firefox\/Opera\/Chrome works flawlessly. If that is too much of a chore, then just concentrate\u2026","rel":"","context":"In &quot;Website&quot;","block_context":{"text":"Website","link":"https:\/\/www.janleow.com\/life\/category\/website"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":739,"url":"https:\/\/www.janleow.com\/life\/html-01-the-basics.html","url_meta":{"origin":1303,"position":3},"title":"HTML Lesson 1: The basic HTML tag","author":"Jan","date":"19 March 2007","format":false,"excerpt":"You can create a HTML document using any text editor like Notepad, Wordpad for Windows, or Simple Text on the Mac. There is no need to buy any sophisticated HTML software like Microsoft Frontpage or CoffeeCup HTML editor. However, as your needs progress you may want to consider getting one.\u2026","rel":"","context":"In &quot;Website&quot;","block_context":{"text":"Website","link":"https:\/\/www.janleow.com\/life\/category\/website"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":990,"url":"https:\/\/www.janleow.com\/life\/make-your-own-web-site-note-about-browser-differences.html","url_meta":{"origin":1303,"position":4},"title":"Make your own web site note about browser differences","author":"Jan","date":"5 February 2009","format":false,"excerpt":"It may be interesting and fun to make your own web site. However the way each browser (IE\/Firefox\/Opera\/Chrome) handles the HTML\/CSS codes leaves you with many headaches. Although my browser of choice is Firefox, there is still a large user base for Internet Explorer. I can say that roughly as\u2026","rel":"","context":"In &quot;Website&quot;","block_context":{"text":"Website","link":"https:\/\/www.janleow.com\/life\/category\/website"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1188,"url":"https:\/\/www.janleow.com\/life\/html-extension-vs-php-asp-shtml-phtml.html","url_meta":{"origin":1303,"position":5},"title":"HTML extension vs PHP, ASP, SHTML, PHTML, etc","author":"Jan","date":"12 November 2009","format":false,"excerpt":"I have been curious, whether a HTML extension (or HTM extension for that matter) would do as well in a search engine as compared with extension that ended up in PHP, ASP, SHTML, PHTML, etc, etc. Of course each extension has its own usefulness. HTML was started pretty long ago\u2026","rel":"","context":"In &quot;Website&quot;","block_context":{"text":"Website","link":"https:\/\/www.janleow.com\/life\/category\/website"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.janleow.com\/life\/wp-json\/wp\/v2\/posts\/1303"}],"collection":[{"href":"https:\/\/www.janleow.com\/life\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.janleow.com\/life\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.janleow.com\/life\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.janleow.com\/life\/wp-json\/wp\/v2\/comments?post=1303"}],"version-history":[{"count":0,"href":"https:\/\/www.janleow.com\/life\/wp-json\/wp\/v2\/posts\/1303\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.janleow.com\/life\/wp-json\/wp\/v2\/media?parent=1303"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.janleow.com\/life\/wp-json\/wp\/v2\/categories?post=1303"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.janleow.com\/life\/wp-json\/wp\/v2\/tags?post=1303"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}