{"id":22,"date":"2016-01-04T19:54:07","date_gmt":"2016-01-04T19:54:07","guid":{"rendered":"https:\/\/html-online.com\/articles\/?p=22"},"modified":"2023-12-20T12:28:13","modified_gmt":"2023-12-20T10:28:13","slug":"learn-basics-html-coding","status":"publish","type":"post","link":"https:\/\/html-online.com\/articles\/learn-basics-html-coding\/","title":{"rendered":"Learn the Basics of HTML Coding"},"content":{"rendered":"

There’s no doubt that knowing a bit of HMTL is very useful. HTML stands for HyperText Markup Language<\/em><\/a>. HyperText is the links that let you go to other web pages, and Markup means you’ll use some simple characters to mark how you want your words to appear. While you can do very complicated things with HTML, the basics are straightforward.<\/strong><\/p>\n

If you’ve used a word processor that has styles, you probably already understand the basic idea – you may want some words to be bold, and others to be italic. In HMTL, type plain text, and use markup to describe how it should display. When you view your text in a web browser, the formatted text is shown. Different browsers may display the text slightly differently. You’ll also use markup to make your links to other pages.
\n<\/p>\n

\"website<\/p>\n

One important thing to know is that any HTML5 formatting you type in your editor<\/a>, like tabs, extra spaces and carriage returns are ignored when the page is displayed. You must use the markup to do your formatting.<\/p>\n

How To Enter Markup<\/h2>\n

In HTML, the markup has a standard format – the markup instructions go inside angle brackets, like these <>. you can compose your documents in notepad or another very popular option is using an online HTML editor<\/a>. There’s always a start and end to a markup. If you want some text to be bold, you start with <b> and you end with <\/b>. The slash indicates you’re done with the bold markup. For example:<\/p>\n

Do <b>not<\/b> leave the door open, <b>or else!<\/b><\/p>\n

Displays as<\/p>\n

Do not<\/strong> leave the door open, or else!<\/strong><\/p>\n

Here are some of the common markup types, also called tags:
\n<p> Starts a paragraph.
\n<i> Italic
\n<b> Bold
\n<h1>, <h2>,<h3> Header1, Header2, Header3<\/p>\n

How these display depends on your browser, but they are headings, and usually are a bigger font than the main text.<\/p>\n

How to create an HTML page?<\/h2>\n

Every HTML pages has the following parts – it is marked as an html<\/em> document, has a head<\/em>, and a body<\/em>.
\nThe head<\/em> typically has material related to managing the page. Except for the title<\/em>, we won’t look at the thing you can do there in this article.<\/p>\n

The body<\/em> is where you put your page’s content. A basic page looks like this:<\/p>\n

<html><\/em>
\n<head><\/em>
\n <title>My First HTML Page<\/title><\/em>
\n<\/head><\/em>
\n<body><\/em>
\n<h1>Welcome<\/h1><\/em>
\n<p>This is a brand-new web page.<\/p><\/em>
\n<\/body><\/em>
\n<\/html><\/em><\/p>\n

Copy this text into an editor, like Notepad, and save it as text. Name the file “mypage.html”. Now open file with your web browser. Look at the top of your browser – you should see the title, and in the browser, you’ll see the words in the body.<\/p>\n

Experiment with this a bit. Add some more text, and use the <b> and <i> to format the text. Add another paragraph. Don’t forget to close any markup you start with a matching end markup.<\/p>\n

Adding links<\/h2>\n

To add a link, you use markup again. The HTML6 source code editor<\/a> has a great feature to create HTML tags with its wizard, but for now let’s say you want a link to your company’s web site URL, http:\/\/www.wwweeebbb.com<\/em>. You need to do two things: mark which part of your text will be a link, and indicate the URL. The tag <a> shows what part is to be linked. In this example, “our website” will have a link:<\/p>\n

<p>If you’d like to know more, visit <a>our website<\/a>.<\/p><\/p>\n

To complete setting up the link, you must add the URL to the starting <a> tag, using a hypertext<\/em>reference<\/em> (an href). The format for this is<\/p>\n

href=”http:\/\/www.wwweeebbb.com”<\/em><\/p>\n

Some hints: The URL is quoted. There are no spaces between the href, equal sign or the location. Here’s how it to enter it in your web page:<\/p>\n

<p>If you’d like to know more, visit <a href=”http:\/\/www.wwweeebbb.com”>our website<\/a>. <\/p><\/em><\/p>\n

When you open the page in a browser, you’ll see:<\/p>\n

If you’d like to know more visit our website.<\/p>\n

Experiment with adding links to different popular websites, until you feel comfortable with using the links. To link to another page in the same directory as your current web page, you use the same format. You don’t have to enter the full URL, just the page name.<\/p>\n

<p>See the <a href=”page2.html”>Next Page<\/a><\/p><\/p>\n

When you open the page in a browser, you’ll see:<\/p>\n

Getting links to work right can be a challenge. Probably the most common mistake is a typo in the URL. On way to avoid this is to go to the site to which you’re linking and copy the URL directly from the address bar in the browser. Another common mistake is to forget to enclose the URL in quotes.<\/p>\n

Summary<\/h2>\n

I hope this article has given you the basics of HTML. Always try to avoid Bad HTML code<\/a> There are more things you can do in HTML. There are many resources that can help you learn more: online tutorials, books, and courses. The W3C, the group that standardized HMTL, has a good tutorial at http:\/\/www.w3schools.com\/html. When working with HMTL, it’s good to try things, and then look at the pages you create in a browser, to see the results.<\/p>\n","protected":false},"excerpt":{"rendered":"

There’s no doubt that knowing a bit of HMTL is very useful. HTML stands for HyperText Markup Language. HyperText is the links that let you go to other web pages, and Markup means you’ll use some simple characters to mark how you want your words to appear. While you can do very complicated things with … Continue reading “Learn the Basics of HTML Coding”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,4],"tags":[],"class_list":["post-22","post","type-post","status-publish","format-standard","hentry","category-articles","category-html"],"yoast_head":"\nLearn the Basics of HTML Coding<\/title>\n<meta name=\"description\" content=\"There\u2019s no doubt that knowing a bit of HMTL is useful. HTML stands for HyperText Markup Language. HyperText is the links that let you go to other web pages\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/html-online.com\/articles\/learn-basics-html-coding\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Learn the Basics of HTML Coding\" \/>\n<meta property=\"og:description\" content=\"There\u2019s no doubt that knowing a bit of HMTL is useful. HTML stands for HyperText Markup Language. HyperText is the links that let you go to other web pages\" \/>\n<meta property=\"og:url\" content=\"https:\/\/html-online.com\/articles\/learn-basics-html-coding\/\" \/>\n<meta property=\"og:site_name\" content=\"HTML Online\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/htmlcoding\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-01-04T19:54:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-20T10:28:13+00:00\" \/>\n<meta name=\"author\" content=\"HTML Editor\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"HTML Editor\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/html-online.com\/articles\/learn-basics-html-coding\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/html-online.com\/articles\/learn-basics-html-coding\/\"},\"author\":{\"name\":\"HTML Editor\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d\"},\"headline\":\"Learn the Basics of HTML Coding\",\"datePublished\":\"2016-01-04T19:54:07+00:00\",\"dateModified\":\"2023-12-20T10:28:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/html-online.com\/articles\/learn-basics-html-coding\/\"},\"wordCount\":1014,\"publisher\":{\"@id\":\"https:\/\/html-online.com\/articles\/#organization\"},\"articleSection\":[\"Articles\",\"HTML\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/html-online.com\/articles\/learn-basics-html-coding\/\",\"url\":\"https:\/\/html-online.com\/articles\/learn-basics-html-coding\/\",\"name\":\"Learn the Basics of HTML Coding\",\"isPartOf\":{\"@id\":\"https:\/\/html-online.com\/articles\/#website\"},\"datePublished\":\"2016-01-04T19:54:07+00:00\",\"dateModified\":\"2023-12-20T10:28:13+00:00\",\"description\":\"There\u2019s no doubt that knowing a bit of HMTL is useful. HTML stands for HyperText Markup Language. HyperText is the links that let you go to other web pages\",\"breadcrumb\":{\"@id\":\"https:\/\/html-online.com\/articles\/learn-basics-html-coding\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/html-online.com\/articles\/learn-basics-html-coding\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/html-online.com\/articles\/learn-basics-html-coding\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/html-online.com\/articles\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Learn the Basics of HTML Coding\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/html-online.com\/articles\/#website\",\"url\":\"https:\/\/html-online.com\/articles\/\",\"name\":\"HTML Online Articles\",\"description\":\"Tips, tricks, tutorials\u2026\",\"publisher\":{\"@id\":\"https:\/\/html-online.com\/articles\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/html-online.com\/articles\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/html-online.com\/articles\/#organization\",\"name\":\"HTML Online\",\"url\":\"https:\/\/html-online.com\/articles\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg\",\"contentUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg\",\"width\":350,\"height\":350,\"caption\":\"HTML Online\"},\"image\":{\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/htmlcoding\/\",\"https:\/\/www.linkedin.com\/in\/ferencdenes\/\",\"https:\/\/www.youtube.com\/channel\/UCn38Jw1sJzbjVHO95Zp0Sww\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d\",\"name\":\"HTML Editor\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g\",\"caption\":\"HTML Editor\"},\"description\":\"In 2013, while wrestling with a mountain of client articles and an uncooperative CMS, I decided enough was enough. So, I created an online HTML editor purely out of necessity (and mild frustration). What began as a tool for my own sanity quickly evolved into a gift for the world\u2014or at least for anyone trying to avoid breaking their website's code. Since then, I've shared my tech notes on my blog, which serves as both a handy reference and a digital diary of the adventures and misadventures of a coder.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/ferencdenes\/\",\"https:\/\/www.youtube.com\/@htmlg\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Learn the Basics of HTML Coding","description":"There\u2019s no doubt that knowing a bit of HMTL is useful. HTML stands for HyperText Markup Language. HyperText is the links that let you go to other web pages","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:\/\/html-online.com\/articles\/learn-basics-html-coding\/","og_locale":"en_GB","og_type":"article","og_title":"Learn the Basics of HTML Coding","og_description":"There\u2019s no doubt that knowing a bit of HMTL is useful. HTML stands for HyperText Markup Language. HyperText is the links that let you go to other web pages","og_url":"https:\/\/html-online.com\/articles\/learn-basics-html-coding\/","og_site_name":"HTML Online","article_publisher":"https:\/\/www.facebook.com\/htmlcoding\/","article_published_time":"2016-01-04T19:54:07+00:00","article_modified_time":"2023-12-20T10:28:13+00:00","author":"HTML Editor","twitter_card":"summary_large_image","twitter_misc":{"Written by":"HTML Editor","Estimated reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/html-online.com\/articles\/learn-basics-html-coding\/#article","isPartOf":{"@id":"https:\/\/html-online.com\/articles\/learn-basics-html-coding\/"},"author":{"name":"HTML Editor","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d"},"headline":"Learn the Basics of HTML Coding","datePublished":"2016-01-04T19:54:07+00:00","dateModified":"2023-12-20T10:28:13+00:00","mainEntityOfPage":{"@id":"https:\/\/html-online.com\/articles\/learn-basics-html-coding\/"},"wordCount":1014,"publisher":{"@id":"https:\/\/html-online.com\/articles\/#organization"},"articleSection":["Articles","HTML"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/html-online.com\/articles\/learn-basics-html-coding\/","url":"https:\/\/html-online.com\/articles\/learn-basics-html-coding\/","name":"Learn the Basics of HTML Coding","isPartOf":{"@id":"https:\/\/html-online.com\/articles\/#website"},"datePublished":"2016-01-04T19:54:07+00:00","dateModified":"2023-12-20T10:28:13+00:00","description":"There\u2019s no doubt that knowing a bit of HMTL is useful. HTML stands for HyperText Markup Language. HyperText is the links that let you go to other web pages","breadcrumb":{"@id":"https:\/\/html-online.com\/articles\/learn-basics-html-coding\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/html-online.com\/articles\/learn-basics-html-coding\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/html-online.com\/articles\/learn-basics-html-coding\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/html-online.com\/articles\/"},{"@type":"ListItem","position":2,"name":"Learn the Basics of HTML Coding"}]},{"@type":"WebSite","@id":"https:\/\/html-online.com\/articles\/#website","url":"https:\/\/html-online.com\/articles\/","name":"HTML Online Articles","description":"Tips, tricks, tutorials\u2026","publisher":{"@id":"https:\/\/html-online.com\/articles\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/html-online.com\/articles\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/html-online.com\/articles\/#organization","name":"HTML Online","url":"https:\/\/html-online.com\/articles\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/","url":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg","contentUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg","width":350,"height":350,"caption":"HTML Online"},"image":{"@id":"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/htmlcoding\/","https:\/\/www.linkedin.com\/in\/ferencdenes\/","https:\/\/www.youtube.com\/channel\/UCn38Jw1sJzbjVHO95Zp0Sww"]},{"@type":"Person","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d","name":"HTML Editor","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g","caption":"HTML Editor"},"description":"In 2013, while wrestling with a mountain of client articles and an uncooperative CMS, I decided enough was enough. So, I created an online HTML editor purely out of necessity (and mild frustration). What began as a tool for my own sanity quickly evolved into a gift for the world\u2014or at least for anyone trying to avoid breaking their website's code. Since then, I've shared my tech notes on my blog, which serves as both a handy reference and a digital diary of the adventures and misadventures of a coder.","sameAs":["https:\/\/www.linkedin.com\/in\/ferencdenes\/","https:\/\/www.youtube.com\/@htmlg"]}]}},"_links":{"self":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/22","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/comments?post=22"}],"version-history":[{"count":3,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/22\/revisions"}],"predecessor-version":[{"id":1933,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/22\/revisions\/1933"}],"wp:attachment":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/media?parent=22"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/categories?post=22"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/tags?post=22"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}