{"id":18,"date":"2024-07-08T09:41:55","date_gmt":"2024-07-08T09:41:55","guid":{"rendered":"https:\/\/shaplakanon.com\/wdc\/?p=18"},"modified":"2024-07-08T09:41:56","modified_gmt":"2024-07-08T09:41:56","slug":"how-to-create-your-first-web-page-with-html","status":"publish","type":"post","link":"https:\/\/shaplakanon.com\/wdc\/how-to-create-your-first-web-page-with-html\/","title":{"rendered":"How to Create Your First Web Page with HTML?"},"content":{"rendered":"\n

Understanding HTML and How to Create Your First Web Page<\/h3>\n\n\n\n

Introduction<\/h4>\n\n\n\n

HTML, or HyperText Markup Language, is the standard language used to create and design web pages. As a beginner, learning HTML is your first step into the broader world of web development. This article will guide you through the basics of HTML and show you how to create your very first HTML file, which you can view in a web browser.<\/p>\n\n\n\n

What is HTML?<\/h4>\n\n\n\n

HTML is a markup language that uses various tags to structure content on the web. These tags indicate to the web browser how to display the content, including text, images, links, and other features. Each HTML file is a plain text file that ends with a .html<\/code> extension.<\/p>\n\n\n\n

Step 1: Access Your Hosting File Manager<\/h4>\n\n\n\n

To create an HTML file, you need access to a hosting environment. Here\u2019s how you can start:<\/p>\n\n\n\n

    \n
  1. Log into Your Hosting Account:<\/strong> Sign into the hosting provider where your website files reside. If you don’t have web hosting, you can buy web hosting from a2hosting<\/a><\/li>\n\n\n\n
  2. Open File Manager:<\/strong> Once logged in, navigate to the control panel provided by your host. Look for an icon or a link labeled ‘File Manager’. This is where all your website files are managed.<\/li>\n<\/ol>\n\n\n\n

    Step 2: Create a New HTML File<\/h4>\n\n\n\n

    In the File Manager, you can create new files directly:<\/p>\n\n\n\n

      \n
    1. Navigate to the Public Directory:<\/strong> Typically, you should place your web files in a directory called public_html<\/code> or www<\/code>.<\/li>\n\n\n\n
    2. Create a New File:<\/strong> Find the option to create a new file. This is usually a button or a right-click context menu option. Name your file index.html<\/code>.<\/li>\n\n\n\n
    3. Edit the File:<\/strong> Open your new index.html<\/code> file in the editor provided by your File Manager. This is where you will write your HTML code.<\/li>\n<\/ol>\n\n\n\n

      Step 3: Writing Basic HTML Code<\/h4>\n\n\n\n

      Here\u2019s a simple example of HTML code you can start with:<\/p>\n\n\n\n

      <!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Welcome to My Website<\/title>\n<\/head>\n<body>\n    <h1>Hello, World!<\/h1>\n    <p>Welcome to my first webpage.<\/p>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
        \n
      1. Add the HTML Code:<\/strong> Copy and paste the above code into your index.html<\/code> file editor in the File Manager.<\/li>\n\n\n\n
      2. Save the File:<\/strong> After pasting the code, save the file. There should be a ‘Save’ or ‘Update’ button in the editor interface.<\/li>\n<\/ol>\n\n\n\n
        Step 4: Preview Your Web Page<\/h4>\n\n\n\n
        To see your work come to life, you need to preview the HTML file:<\/p>\n\n\n\n
          \n
        1. Open Your Web Browser:<\/strong> Use any browser like Chrome, Firefox, or Safari.<\/li>\n\n\n\n
        2. Navigate to Your Website:<\/strong> Enter the domain name associated with your hosting account in the address bar followed by \/index.html<\/code>. For example, http:\/\/yourdomain.com\/index.html<\/code>.<\/li>\n\n\n\n
        3. View Your Page:<\/strong> The HTML file you created should now be displayed as a web page in your browser.<\/li>\n<\/ol>\n\n\n\n
          Conclusion<\/h4>\n\n\n\n
          Congratulations! You have just created your first HTML page. This is just the beginning of your journey into web development. As you become more familiar with HTML, you can start exploring more complex elements and attributes to enhance your web pages further. Keep experimenting and learning to build more dynamic and interactive websites!<\/p>\n","protected":false},"excerpt":{"rendered":"
          Understanding HTML and How to Create Your First Web Page Introduction HTML, or HyperText Markup Language, is the standard language […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[14],"tags":[],"class_list":["post-18","post","type-post","status-publish","format-standard","hentry","category-html"],"yoast_head":"\nHow to Create Your First Web Page with HTML? - Web Development Course<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/shaplakanon.com\/wdc\/how-to-create-your-first-web-page-with-html\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create Your First Web Page with HTML? - Web Development Course\" \/>\n<meta property=\"og:description\" content=\"Understanding HTML and How to Create Your First Web Page Introduction HTML, or HyperText Markup Language, is the standard language […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/shaplakanon.com\/wdc\/how-to-create-your-first-web-page-with-html\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Development Course\" \/>\n<meta property=\"article:published_time\" content=\"2024-07-08T09:41:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-08T09:41:56+00:00\" \/>\n<meta name=\"author\" content=\"ShaplaKanon\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"ShaplaKanon\" \/>\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\":\"Article\",\"@id\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/how-to-create-your-first-web-page-with-html\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/how-to-create-your-first-web-page-with-html\\\/\"},\"author\":{\"name\":\"ShaplaKanon\",\"@id\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/#\\\/schema\\\/person\\\/f5f224239283c27426dadc2e4cc9a825\"},\"headline\":\"How to Create Your First Web Page with HTML?\",\"datePublished\":\"2024-07-08T09:41:55+00:00\",\"dateModified\":\"2024-07-08T09:41:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/how-to-create-your-first-web-page-with-html\\\/\"},\"wordCount\":484,\"commentCount\":0,\"articleSection\":[\"HTML\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/how-to-create-your-first-web-page-with-html\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/how-to-create-your-first-web-page-with-html\\\/\",\"url\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/how-to-create-your-first-web-page-with-html\\\/\",\"name\":\"How to Create Your First Web Page with HTML? - Web Development Course\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/#website\"},\"datePublished\":\"2024-07-08T09:41:55+00:00\",\"dateModified\":\"2024-07-08T09:41:56+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/#\\\/schema\\\/person\\\/f5f224239283c27426dadc2e4cc9a825\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/how-to-create-your-first-web-page-with-html\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/how-to-create-your-first-web-page-with-html\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/how-to-create-your-first-web-page-with-html\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create Your First Web Page with HTML?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/#website\",\"url\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/\",\"name\":\"Web Development Course\",\"description\":\"Become a Web Developer from Home\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/#\\\/schema\\\/person\\\/f5f224239283c27426dadc2e4cc9a825\",\"name\":\"ShaplaKanon\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ef2c8f93a0558c2047555f674c8746b22988ace93eba9262d198d0a28236ce97?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ef2c8f93a0558c2047555f674c8746b22988ace93eba9262d198d0a28236ce97?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ef2c8f93a0558c2047555f674c8746b22988ace93eba9262d198d0a28236ce97?s=96&d=mm&r=g\",\"caption\":\"ShaplaKanon\"},\"sameAs\":[\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/\"],\"url\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/author\\\/sabahat\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create Your First Web Page with HTML? - Web Development Course","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:\/\/shaplakanon.com\/wdc\/how-to-create-your-first-web-page-with-html\/","og_locale":"en_US","og_type":"article","og_title":"How to Create Your First Web Page with HTML? - Web Development Course","og_description":"Understanding HTML and How to Create Your First Web Page Introduction HTML, or HyperText Markup Language, is the standard language […]","og_url":"https:\/\/shaplakanon.com\/wdc\/how-to-create-your-first-web-page-with-html\/","og_site_name":"Web Development Course","article_published_time":"2024-07-08T09:41:55+00:00","article_modified_time":"2024-07-08T09:41:56+00:00","author":"ShaplaKanon","twitter_card":"summary_large_image","twitter_misc":{"Written by":"ShaplaKanon","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/shaplakanon.com\/wdc\/how-to-create-your-first-web-page-with-html\/#article","isPartOf":{"@id":"https:\/\/shaplakanon.com\/wdc\/how-to-create-your-first-web-page-with-html\/"},"author":{"name":"ShaplaKanon","@id":"https:\/\/shaplakanon.com\/wdc\/#\/schema\/person\/f5f224239283c27426dadc2e4cc9a825"},"headline":"How to Create Your First Web Page with HTML?","datePublished":"2024-07-08T09:41:55+00:00","dateModified":"2024-07-08T09:41:56+00:00","mainEntityOfPage":{"@id":"https:\/\/shaplakanon.com\/wdc\/how-to-create-your-first-web-page-with-html\/"},"wordCount":484,"commentCount":0,"articleSection":["HTML"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/shaplakanon.com\/wdc\/how-to-create-your-first-web-page-with-html\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/shaplakanon.com\/wdc\/how-to-create-your-first-web-page-with-html\/","url":"https:\/\/shaplakanon.com\/wdc\/how-to-create-your-first-web-page-with-html\/","name":"How to Create Your First Web Page with HTML? - Web Development Course","isPartOf":{"@id":"https:\/\/shaplakanon.com\/wdc\/#website"},"datePublished":"2024-07-08T09:41:55+00:00","dateModified":"2024-07-08T09:41:56+00:00","author":{"@id":"https:\/\/shaplakanon.com\/wdc\/#\/schema\/person\/f5f224239283c27426dadc2e4cc9a825"},"breadcrumb":{"@id":"https:\/\/shaplakanon.com\/wdc\/how-to-create-your-first-web-page-with-html\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/shaplakanon.com\/wdc\/how-to-create-your-first-web-page-with-html\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/shaplakanon.com\/wdc\/how-to-create-your-first-web-page-with-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/shaplakanon.com\/wdc\/"},{"@type":"ListItem","position":2,"name":"How to Create Your First Web Page with HTML?"}]},{"@type":"WebSite","@id":"https:\/\/shaplakanon.com\/wdc\/#website","url":"https:\/\/shaplakanon.com\/wdc\/","name":"Web Development Course","description":"Become a Web Developer from Home","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/shaplakanon.com\/wdc\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/shaplakanon.com\/wdc\/#\/schema\/person\/f5f224239283c27426dadc2e4cc9a825","name":"ShaplaKanon","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/ef2c8f93a0558c2047555f674c8746b22988ace93eba9262d198d0a28236ce97?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/ef2c8f93a0558c2047555f674c8746b22988ace93eba9262d198d0a28236ce97?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ef2c8f93a0558c2047555f674c8746b22988ace93eba9262d198d0a28236ce97?s=96&d=mm&r=g","caption":"ShaplaKanon"},"sameAs":["https:\/\/shaplakanon.com\/wdc\/"],"url":"https:\/\/shaplakanon.com\/wdc\/author\/sabahat\/"}]}},"_links":{"self":[{"href":"https:\/\/shaplakanon.com\/wdc\/wp-json\/wp\/v2\/posts\/18","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shaplakanon.com\/wdc\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shaplakanon.com\/wdc\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shaplakanon.com\/wdc\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shaplakanon.com\/wdc\/wp-json\/wp\/v2\/comments?post=18"}],"version-history":[{"count":1,"href":"https:\/\/shaplakanon.com\/wdc\/wp-json\/wp\/v2\/posts\/18\/revisions"}],"predecessor-version":[{"id":19,"href":"https:\/\/shaplakanon.com\/wdc\/wp-json\/wp\/v2\/posts\/18\/revisions\/19"}],"wp:attachment":[{"href":"https:\/\/shaplakanon.com\/wdc\/wp-json\/wp\/v2\/media?parent=18"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shaplakanon.com\/wdc\/wp-json\/wp\/v2\/categories?post=18"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shaplakanon.com\/wdc\/wp-json\/wp\/v2\/tags?post=18"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}