{"id":739,"date":"2007-03-19T14:17:05","date_gmt":"2007-03-19T06:17:05","guid":{"rendered":"http:\/\/www.janleow.com\/life\/?p=739"},"modified":"2007-03-19T14:17:05","modified_gmt":"2007-03-19T06:17:05","slug":"html-01-the-basics","status":"publish","type":"post","link":"https:\/\/www.janleow.com\/life\/html-01-the-basics.html","title":{"rendered":"HTML Lesson 1: The basic HTML tag"},"content":{"rendered":"<p>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. But meanwhile, any simple text editor will do just fine.<!--more--><\/p>\n<p><b>HTML Tags<\/b><\/p>\n<p>HTML tags are web commands written between the angle brackets: &#8220;<\" and \">&#8220;. The text content is contained between two tags &#8211; an opening tag and a closing tag. The closing tag has the additional slash symbol &#8220;\/&#8221; added to it.<\/p>\n<p><i>Example:<\/i><\/p>\n<div style=\"border: 1px dashed; background: #E0FFFF; padding: 1em;\">\n<p style=\"text-align: center\">&lt;P&gt;some text contained in here.&lt;\/P&gt;<\/p>\n<\/div>\n<p><br clear=\"all\"><\/p>\n<p>Tags can have additional attribute to further modify its function.<\/p>\n<p><i>Example:<\/i><\/p>\n<div style=\"border: 1px dashed; background: #E0FFFF; padding: 1em;\">\n<p style=\"text-align: center\">&lt;P align=&#8221;right&#8221; &gt;some text contained in here.&lt;\/P&gt;<\/p>\n<\/div>\n<p><br clear=\"all\"><\/p>\n<p>When several tags are used, they are nested within each other. Make sure the tags are not overlapped to ensure proper code interpretation by the browser.<\/p>\n<p><i>Example:<\/i><\/p>\n<div style=\"border: 1px dashed; background: #E0FFFF; padding: 1em;\">\n<p><\/p>\n<p style=\"text-indent: 3em\">&lt;P&gt;&lt;B&gt;Nesting the tags correctly.&lt;\/B&gt;&lt;\/P&gt;<\/p>\n<p style=\"text-indent: 3em\">&lt;P&gt;&lt;B&gt;Nesting the tags in-correctly.&lt;\/P&gt;&lt;\/B&gt;<\/p>\n<\/div>\n<p> <br clear=\"all\"><\/p>\n<p>Just a note, the HTML tag example above is written in Capitals for clarity sake. The tag can be written in lowercase or uppercase or even a mixture of both. The browser makes no distinction between them. It is your preference to use one or the other or be sloppy and mix them both up.<\/p>\n<p><script type=\"text\/javascript\"><!--\ngoogle_ad_client = \"pub-5685769204706262\";\ngoogle_ad_width = 336;\ngoogle_ad_height = 280;\ngoogle_ad_format = \"336x280_as\";\ngoogle_ad_type = \"text\";\n\/\/2007-08-06: JanLeow.com Blogs (Content)\ngoogle_ad_channel = \"5832813811\";\ngoogle_color_border = \"FFFFFF\";\ngoogle_color_bg = \"FFFFFF\";\ngoogle_color_link = \"323539\";\ngoogle_color_text = \"000000\";\ngoogle_color_url = \"BBBBBB\";\n\/\/--><\/script><br \/>\n<script type=\"text\/javascript\"\n  src=\"http:\/\/pagead2.googlesyndication.com\/pagead\/show_ads.js\">\n<\/script><\/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>\n<p><ul><lh><strong>HTML Video Tutorial<\/strong><\/lh><\/p>\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><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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. But meanwhile, any simple text &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/www.janleow.com\/life\/html-01-the-basics.html\"> <span class=\"screen-reader-text\">HTML Lesson 1: The basic HTML tag<\/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,160,162],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p1bS5F-bV","jetpack-related-posts":[{"id":748,"url":"https:\/\/www.janleow.com\/life\/html-03-text-formatting.html","url_meta":{"origin":739,"position":0},"title":"HTML Lesson 3: text formatting","author":"Jan","date":"21 March 2007","format":false,"excerpt":"When writing your content for your website, you may want to format your text to emphasize a point and make it stand out from the rest of the content. This is easily done by using the bold tag, italics tag and underline tag. Bold = <B>Bold<\/B> Italics = <I>Italics <\/I>\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":1314,"url":"https:\/\/www.janleow.com\/life\/make-your-own-web-site-16-text-formatting.html","url_meta":{"origin":739,"position":1},"title":"Text formatting video tutorial","author":"Jan","date":"31 March 2009","format":false,"excerpt":"These are some of the basics of HTML code that you should at least know when you make your own web site. This is useful not only in your own web site, but also when you want to make post and comments (if the option is available to you). The\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":753,"url":"https:\/\/www.janleow.com\/life\/html-05-making-ordered-bulleted-list.html","url_meta":{"origin":739,"position":2},"title":"HTML Lesson 5: making list","author":"Jan","date":"21 March 2007","format":false,"excerpt":"You may want to make a list for easier presentation of information on your website. There are two types of list, unordered bulleted list and ordered numbered list. To create the unordered list, you will use the \"UL\" tag together with the list item \"LI\" tag. There is no need\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":1316,"url":"https:\/\/www.janleow.com\/life\/make-your-own-web-site-17-more-text-formatting.html","url_meta":{"origin":739,"position":3},"title":"More text formatting video tutorial","author":"Jan","date":"31 March 2009","format":false,"excerpt":"Once you have mastered the basics of text formatting. Here some more advance features to make your own web site stand out. It requires tinkering with the attribute of the tags. Each HTML tag has attributes which you could modify. Let's take for example the Paragraph tag <P>, you can\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":751,"url":"https:\/\/www.janleow.com\/life\/html-04-text-alignment.html","url_meta":{"origin":739,"position":4},"title":"HTML Lesson 4: text alignment","author":"Jan","date":"21 March 2007","format":false,"excerpt":"The default text alignment for content in a paragraph is left side. Sometimes you may want to make the text align to the right or in the center. To make the text align to the left or right you include the align attribute to the paragraph tag. Example, align to\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":741,"url":"https:\/\/www.janleow.com\/life\/html-02-creating-a-website-page.html","url_meta":{"origin":739,"position":5},"title":"HTML Lesson 2: Create the web site page","author":"Jan","date":"19 March 2007","format":false,"excerpt":"The HTML web page is separated into two sections: the head section and body section. Both these section is nested within the HTML tag which identifies the file as HTML code for browsers to recognize it as such. The HEAD section is where you will provide the TITLE of your\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\/739"}],"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=739"}],"version-history":[{"count":0,"href":"https:\/\/www.janleow.com\/life\/wp-json\/wp\/v2\/posts\/739\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.janleow.com\/life\/wp-json\/wp\/v2\/media?parent=739"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.janleow.com\/life\/wp-json\/wp\/v2\/categories?post=739"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.janleow.com\/life\/wp-json\/wp\/v2\/tags?post=739"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}