{"id":51,"date":"2022-03-19T09:16:48","date_gmt":"2022-03-19T09:16:48","guid":{"rendered":"https:\/\/staging.brightwhiz.com\/?post_type=topic&p=51"},"modified":"2024-02-26T10:57:47","modified_gmt":"2024-02-26T10:57:47","slug":"html-text-editors","status":"publish","type":"topic","link":"http:\/\/local.tutorials\/topic\/html-text-editors\/","title":{"rendered":"HTML – Text Editors"},"content":{"rendered":"\n

The basic tool you need to learn HTML is the simple text editor and that is all you need in addition to a web browser to view your web page.<\/p>\n\n\n\n

In professional settings especially when working on large projects, more advanced HTML text editors will be needed. For all the examples used in this HTML tutorial series, a simple Text Editor will suffice.<\/p>\n\n\n\n

Each operating system comes with a default text editor. That will determine which one you can use for the examples. There are also several free online text editors that you can use in your web browser to test your examples. For beginners, we recommend using the default text editors that come with your platform.<\/p>\n\n\n\n

In the entirety of this tutorial series, we will let you choose the most convenient one.<\/p>\n\n\n\n

Create Your First Web Page<\/h2>\n\n\n\n

Step 1: Open Notepad (Windows)<\/h4>\n\n\n\n

Open the Start Screen by clicking the Start button, the window symbol at the bottom left on your screen. Type “Notepad<\/strong>“. Older Windows version you need to click on Start <\/strong>> Programs <\/strong>> Accessories <\/strong>> Notepad<\/strong>.<\/p>\n\n\n\n

Notepad is available on all versions of Windows.<\/p>\n\n\n\n

Step 1: Open TextEdit (Mac)<\/h4>\n\n\n\n

Open Finder <\/strong>> Applications <\/strong>> TextEdit<\/strong><\/p>\n\n\n\n

Go to Preferences <\/strong>> Format <\/strong>> choose “Plain Text<\/strong>” in order to get TextEdit to save files correctly.<\/p>\n\n\n\n

Next, under “Open and Save<\/strong>“, check the box that says “Display HTML files as HTML code instead of formatted text<\/strong>“.<\/p>\n\n\n\n

The rest of this guide will use Notepad in the examples and screenshots.<\/p>\n\n\n\n

Step 2: Write Some HTML Code<\/h4>\n\n\n\n

Type the code below or you can copy-paste this snippet into your text editor.<\/p>\n\n\n\n

<!DOCTYPE html>\n<html>\n   <head>\n      <title>This is document title<\/title>\n   <\/head>\t\n   <body>\n      <h1>A Simple heading<\/h1>\n      <p>Hello World paragraph!<\/p>\n   <\/body>\t\n<\/html><\/code><\/pre>\n\n\n\n\n\n

Step 3: Save the HTML Page<\/h4>\n\n\n\n

Save the file onto your computer. Select File <\/strong>> Save <\/strong>as in the Notepad menu.<\/p>\n\n\n\n

Name the file “index.html<\/strong>” and set the encoding to UTF-8<\/strong>. This is recommended encoding for HTML files.<\/p>\n\n\n\n

Note: By convension you can use either .htm or .html as file extension for HTML files.<\/em><\/p>\n\n\n\n

Under Save as type:<\/strong> select All Files (*.<\/em>*)<\/strong> then save the file.<\/p>\n\n\n\n

Step 4: Open the HTML page in Your Web Browser<\/h4>\n\n\n\n

Open the saved HTML file in your favorite web browser by double-clicking on the file icon, or right-click then choose “Open with<\/strong>” to select the web browser if you have multiple on your system.<\/p>\n\n\n\n

The should see a web page that looks like this:<\/p>\n\n\n","protected":false},"excerpt":{"rendered":"

The basic tool you need to learn HTML is the simple text editor and that is all you need in addition to a web browser to view your web page. In professional settings especially when working on large projects, more advanced HTML text editors will be needed. For all the examples used in this HTML […]<\/p>\n","protected":false},"featured_media":43,"comment_status":"open","ping_status":"closed","template":"","meta":[],"categories":[2],"tags":[],"subject":[7,8],"yoast_head":"\nLearn HTML Text Editors<\/title>\n<meta name=\"description\" content=\"HTML Text Editors are used to create web pages in learning or professional settings and come packed with basic to advance features\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/local.tutorials\/topic\/html-text-editors\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Learn HTML Text Editors\" \/>\n<meta property=\"og:description\" content=\"HTML Text Editors are used to create web pages in learning or professional settings and come packed with basic to advance features\" \/>\n<meta property=\"og:url\" content=\"http:\/\/local.tutorials\/topic\/html-text-editors\/\" \/>\n<meta property=\"og:site_name\" content=\"Brightwhiz.com Tutorials and Courses\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/brightwhiz\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-26T10:57:47+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/local.tutorials\/wp-content\/uploads\/2022\/03\/tutorial-html5.png\" \/>\n\t<meta property=\"og:image:width\" content=\"640\" \/>\n\t<meta property=\"og:image:height\" content=\"360\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@brightwhizmag\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"http:\/\/local.tutorials\/topic\/html-text-editors\/\",\"url\":\"http:\/\/local.tutorials\/topic\/html-text-editors\/\",\"name\":\"Learn HTML Text Editors\",\"isPartOf\":{\"@id\":\"http:\/\/local.tutorials\/#website\"},\"datePublished\":\"2022-03-19T09:16:48+00:00\",\"dateModified\":\"2024-02-26T10:57:47+00:00\",\"description\":\"HTML Text Editors are used to create web pages in learning or professional settings and come packed with basic to advance features\",\"breadcrumb\":{\"@id\":\"http:\/\/local.tutorials\/topic\/html-text-editors\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/local.tutorials\/topic\/html-text-editors\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/local.tutorials\/topic\/html-text-editors\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\/\/local.tutorials\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Topics\",\"item\":\"http:\/\/local.tutorials\/topic\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"HTML – Text Editors\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/local.tutorials\/#website\",\"url\":\"http:\/\/local.tutorials\/\",\"name\":\"Brightwhiz.com Tutorials and Courses\",\"description\":\"\",\"publisher\":{\"@id\":\"http:\/\/local.tutorials\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/local.tutorials\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"http:\/\/local.tutorials\/#organization\",\"name\":\"Brightwhiz.com\",\"url\":\"http:\/\/local.tutorials\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/local.tutorials\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/staging.brightwhiz.com\/wp-content\/uploads\/2022\/03\/brightwhiz-com-logo-orange.png\",\"contentUrl\":\"https:\/\/staging.brightwhiz.com\/wp-content\/uploads\/2022\/03\/brightwhiz-com-logo-orange.png\",\"width\":706,\"height\":135,\"caption\":\"Brightwhiz.com\"},\"image\":{\"@id\":\"http:\/\/local.tutorials\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/brightwhiz\",\"https:\/\/twitter.com\/brightwhizmag\",\"https:\/\/www.instagram.com\/glamorglaze\/\",\"https:\/\/www.pinterest.com\/sobbayi\/\",\"https:\/\/www.youtube.com\/c\/Sobbayi\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Learn HTML Text Editors","description":"HTML Text Editors are used to create web pages in learning or professional settings and come packed with basic to advance features","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":"http:\/\/local.tutorials\/topic\/html-text-editors\/","og_locale":"en_US","og_type":"article","og_title":"Learn HTML Text Editors","og_description":"HTML Text Editors are used to create web pages in learning or professional settings and come packed with basic to advance features","og_url":"http:\/\/local.tutorials\/topic\/html-text-editors\/","og_site_name":"Brightwhiz.com Tutorials and Courses","article_publisher":"https:\/\/www.facebook.com\/brightwhiz","article_modified_time":"2024-02-26T10:57:47+00:00","og_image":[{"width":640,"height":360,"url":"http:\/\/local.tutorials\/wp-content\/uploads\/2022\/03\/tutorial-html5.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_site":"@brightwhizmag","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"http:\/\/local.tutorials\/topic\/html-text-editors\/","url":"http:\/\/local.tutorials\/topic\/html-text-editors\/","name":"Learn HTML Text Editors","isPartOf":{"@id":"http:\/\/local.tutorials\/#website"},"datePublished":"2022-03-19T09:16:48+00:00","dateModified":"2024-02-26T10:57:47+00:00","description":"HTML Text Editors are used to create web pages in learning or professional settings and come packed with basic to advance features","breadcrumb":{"@id":"http:\/\/local.tutorials\/topic\/html-text-editors\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/local.tutorials\/topic\/html-text-editors\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/local.tutorials\/topic\/html-text-editors\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/local.tutorials\/"},{"@type":"ListItem","position":2,"name":"Topics","item":"http:\/\/local.tutorials\/topic\/"},{"@type":"ListItem","position":3,"name":"HTML – Text Editors"}]},{"@type":"WebSite","@id":"http:\/\/local.tutorials\/#website","url":"http:\/\/local.tutorials\/","name":"Brightwhiz.com Tutorials and Courses","description":"","publisher":{"@id":"http:\/\/local.tutorials\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/local.tutorials\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/local.tutorials\/#organization","name":"Brightwhiz.com","url":"http:\/\/local.tutorials\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/local.tutorials\/#\/schema\/logo\/image\/","url":"https:\/\/staging.brightwhiz.com\/wp-content\/uploads\/2022\/03\/brightwhiz-com-logo-orange.png","contentUrl":"https:\/\/staging.brightwhiz.com\/wp-content\/uploads\/2022\/03\/brightwhiz-com-logo-orange.png","width":706,"height":135,"caption":"Brightwhiz.com"},"image":{"@id":"http:\/\/local.tutorials\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/brightwhiz","https:\/\/twitter.com\/brightwhizmag","https:\/\/www.instagram.com\/glamorglaze\/","https:\/\/www.pinterest.com\/sobbayi\/","https:\/\/www.youtube.com\/c\/Sobbayi"]}]}},"_links":{"self":[{"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/topic\/51"}],"collection":[{"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/topic"}],"about":[{"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/types\/topic"}],"replies":[{"embeddable":true,"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/comments?post=51"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/media\/43"}],"wp:attachment":[{"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/media?parent=51"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/categories?post=51"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/tags?post=51"},{"taxonomy":"subject","embeddable":true,"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/subject?post=51"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}