{"id":6795,"date":"2021-07-19T11:58:57","date_gmt":"2021-07-19T11:58:57","guid":{"rendered":"https:\/\/www.scmgalaxy.com\/tutorials\/?p=6795"},"modified":"2021-07-19T11:58:59","modified_gmt":"2021-07-19T11:58:59","slug":"introduction-to-html","status":"publish","type":"post","link":"https:\/\/www.scmgalaxy.com\/tutorials\/introduction-to-html\/","title":{"rendered":"Introduction to HTML."},"content":{"rendered":"\n

What is HTML?<\/strong><\/p>\n\n\n\n

HTML provides a way of displaying Web pages with text and images or multimedia content. HTML is not a programming language, it is a markup language. An HTML file is a text file containing small markup tags. The markup tags tell the web browser, such as Google chrome or internet explorer, how to display the page. An HTML file must have an htm or html file extension. HTML stands for HyperText Markup Language.<\/p>\n\n\n\n

HTML Tags:-<\/strong><\/p>\n\n\n\n

A tag is a bit of text acts as a point demarcation. To create a tag, HTML gives certain characters special meaning: th e angle brackets <and>. putting characters within the brackets creates a tag.
types of tags:
there are two types of tags.<\/p>\n\n\n\n

  1. Start tag<\/li>
  2. End tag\/Closing tag End tag is same as start tag except that it has an extra forward slash after opening angle bracket.<\/li><\/ol>\n\n\n\n

    Element:-<\/strong>
    The combination of start tag,end tag and things between the two tags are known as contents of teh element.
    Attribute:-<\/strong>
    Attributes provide additional information about the contents of an element. They appear on the opening tag of the element and are made up of two parts:- a name and a value, seprated by an equals sign. the attributes name indicate what type of extra information you are supplying about the element content.<\/p>\n\n\n\n

    HTML headings:-
    HTML headings are defined with the <h1> to <h6> tags. <h1>defines the most important tags and <h6> defines the least important tags.<\/p>\n\n\n\n

    HTML paragraphs:-<\/strong>
    HTML paragraphs are defined with the tag.<\/p>\n\n\n\n

    HTML links:-<\/strong>
    HTML links are defined with the <a> tag. <\/p>\n\n\n\n

    It is also called anchor tag. The link destination is specified in href attribute.
    example:- <a href=”https:\/\/www.facebook.com”>This is a link.<\/a><\/span><\/p>\n\n\n\n

    HTML images:-
    HTML images are defined with teh tag. The source file(src), alternative text(alt), width and height are the attributes used with the with this tag.
    example:- <img src=”pic.jpg” alt=”facebook.com” width=”104″ height=”142″><\/span>
    <\/p>\n\n\n\n

    How to view HTML source?<\/strong>
    To see the source code of the html page, right click on the HTML page and then select view page source, or we can use a shortcut key ctrl+u.<\/strong><\/p>\n\n\n\n

    Some important attributes:-<\/strong><\/p>\n\n\n\n

    1. src attribute:<\/strong>– Ths attribute id used in img tag. The src attribute specifies the path to the image to be displayed.
      Example:-<img src=”img_girl.jpg”><\/strong>

      There are two ways to specify the URL in the src attribute:
      • Absolute URL-Links to an external image that is hosted on another website. Example: src=”https:\/\/www.facebook.com\/images\/img_girl.jpg”.<\/li>
      • Rekative URL- Links to an image that is hosted within the website. Here, the URL does not include the domain name. If the URL begins without a slash, it will be relative to the current page. Example: src=”img_girl.jpg”. If the URL begins with a slash, it will be relative to the domain. Example: src=”\/images\/img_girl.jpg”.<\/li><\/ul><\/li><\/ol>\n\n\n\n

        2. Width and height attribute:-<\/strong> the tag contain the width and height attribute, it defines the width and height of the image diaplayed.<\/p>\n\n\n\n

        1. The Alt attribute:-<\/strong> The required alt attribute for the tag specifies an alternate text for an image, if the image for some reason cannot be displayed. This can be due to slow connection, or an error in the src attribute, or if the user uses a screen reader.<\/li>
        2. The style attribute:-<\/strong> the style attribute is used to add atyle to the elment, such as colour, font, size etc.
          exmple:-This is a red paragraph.<\/li>
        3. The lang attribute:-<\/strong> The lang attribute is used inside the tag, to declare the language of the web page.<\/li><\/ol>\n\n\n\n

          HTML styles:- <\/strong><\/p>\n\n\n\n

          The HTML styles attributes is used to add styles to an element, such as color font size etc.
          Background color:- <\/strong>The CSS background-color property defines the background color for an HTML element.<\/p>\n\n\n\n

          example:- <\/p>\n\n\n\n

          <body\u00a0style=”background-color:powderblue;”><\/span><\/p>\n\n\n\n

          <h1>This is a heading<\/h1><\/span>
          <p>This is a paragraph.<\/p><\/span><\/p>\n\n\n\n

          <\/body><\/span><\/p>\n\n\n\n

          Text color:-<\/strong>The CSS\u00a0color<\/code>\u00a0property defines the text color for an HTML element.<\/p>\n\n\n\n

          example:-<\/p>\n\n\n\n

          <h1\u00a0style=”color:blue;”>This is a heading<\/h1><\/span>
          <p\u00a0style=”color:red;”>This is a paragraph.<\/p><\/span><\/p>\n\n\n\n

          Fonts:-<\/strong>The CSS\u00a0font-family<\/code>\u00a0property defines the font to be used for an HTML element.<\/p>\n\n\n\n

          example:-<\/p>\n\n\n\n

          <h1\u00a0style=”font-family:verdana;”>This is a heading<\/h1><\/span>
          <p\u00a0style=”font-family:courier;”>This is a paragraph.<\/p><\/span><\/p>\n\n\n\n

          Text size:-<\/strong> The CSS\u00a0font-size<\/code>\u00a0property defines the text size for an HTML element.<\/p>\n\n\n\n

          example:-<\/p>\n\n\n\n

          <h1\u00a0style=”font-size:300%;”>This is a heading<\/h1><\/span>
          <p\u00a0style=”font-size:160%;”>This is a paragraph.<\/p><\/span><\/p>\n\n\n\n

          Text allignment:-<\/strong>The CSS\u00a0text-align<\/code>\u00a0property defines the horizontal text alignment for an HTML element.<\/p>\n\n\n\n

          example:-<\/p>\n\n\n\n

          <h1\u00a0style=”text-align:center;”>Centered Heading<\/h1><\/span>
          <p\u00a0style=”text-align:center;”>Centered paragraph.<\/p><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

          What is HTML? HTML provides a way of displaying Web pages with text and images or multimedia content. HTML is […]<\/p>\n","protected":false},"author":19,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_joinchat":[],"footnotes":""},"categories":[1],"tags":[4459,886],"class_list":["post-6795","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-html","tag-web-development"],"yoast_head":"\nIntroduction to HTML. - scmGalaxy<\/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:\/\/www.scmgalaxy.com\/tutorials\/introduction-to-html\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introduction to HTML. - scmGalaxy\" \/>\n<meta property=\"og:description\" content=\"What is HTML? HTML provides a way of displaying Web pages with text and images or multimedia content. HTML is […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.scmgalaxy.com\/tutorials\/introduction-to-html\/\" \/>\n<meta property=\"og:site_name\" content=\"scmGalaxy\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-19T11:58:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-07-19T11:58:59+00:00\" \/>\n<meta name=\"author\" content=\"shashank K\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"shashank K\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. 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:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/introduction-to-html\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/introduction-to-html\\\/\"},\"author\":{\"name\":\"shashank K\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#\\\/schema\\\/person\\\/c88b513657ea9e9a6cd8a9b3a3bff6f3\"},\"headline\":\"Introduction to HTML.\",\"datePublished\":\"2021-07-19T11:58:57+00:00\",\"dateModified\":\"2021-07-19T11:58:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/introduction-to-html\\\/\"},\"wordCount\":838,\"commentCount\":0,\"keywords\":[\"HTML\",\"Web Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/introduction-to-html\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/introduction-to-html\\\/\",\"url\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/introduction-to-html\\\/\",\"name\":\"Introduction to HTML. - scmGalaxy\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#website\"},\"datePublished\":\"2021-07-19T11:58:57+00:00\",\"dateModified\":\"2021-07-19T11:58:59+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#\\\/schema\\\/person\\\/c88b513657ea9e9a6cd8a9b3a3bff6f3\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/introduction-to-html\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/introduction-to-html\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/introduction-to-html\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Introduction to HTML.\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#website\",\"url\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/\",\"name\":\"scmGalaxy\",\"description\":\"A Platform for Software Engineers\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#\\\/schema\\\/person\\\/c88b513657ea9e9a6cd8a9b3a3bff6f3\",\"name\":\"shashank K\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a1d7da7c43d650339f6ab219ed52f462ee8ce994ce0d45b50c0700eead0676a4?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a1d7da7c43d650339f6ab219ed52f462ee8ce994ce0d45b50c0700eead0676a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a1d7da7c43d650339f6ab219ed52f462ee8ce994ce0d45b50c0700eead0676a4?s=96&d=mm&r=g\",\"caption\":\"shashank K\"},\"url\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/author\\\/shashank\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Introduction to HTML. - scmGalaxy","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:\/\/www.scmgalaxy.com\/tutorials\/introduction-to-html\/","og_locale":"en_US","og_type":"article","og_title":"Introduction to HTML. - scmGalaxy","og_description":"What is HTML? HTML provides a way of displaying Web pages with text and images or multimedia content. HTML is […]","og_url":"https:\/\/www.scmgalaxy.com\/tutorials\/introduction-to-html\/","og_site_name":"scmGalaxy","article_published_time":"2021-07-19T11:58:57+00:00","article_modified_time":"2021-07-19T11:58:59+00:00","author":"shashank K","twitter_card":"summary_large_image","twitter_misc":{"Written by":"shashank K","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/introduction-to-html\/#article","isPartOf":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/introduction-to-html\/"},"author":{"name":"shashank K","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#\/schema\/person\/c88b513657ea9e9a6cd8a9b3a3bff6f3"},"headline":"Introduction to HTML.","datePublished":"2021-07-19T11:58:57+00:00","dateModified":"2021-07-19T11:58:59+00:00","mainEntityOfPage":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/introduction-to-html\/"},"wordCount":838,"commentCount":0,"keywords":["HTML","Web Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.scmgalaxy.com\/tutorials\/introduction-to-html\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/introduction-to-html\/","url":"https:\/\/www.scmgalaxy.com\/tutorials\/introduction-to-html\/","name":"Introduction to HTML. - scmGalaxy","isPartOf":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#website"},"datePublished":"2021-07-19T11:58:57+00:00","dateModified":"2021-07-19T11:58:59+00:00","author":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#\/schema\/person\/c88b513657ea9e9a6cd8a9b3a3bff6f3"},"breadcrumb":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/introduction-to-html\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.scmgalaxy.com\/tutorials\/introduction-to-html\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/introduction-to-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.scmgalaxy.com\/tutorials\/"},{"@type":"ListItem","position":2,"name":"Introduction to HTML."}]},{"@type":"WebSite","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#website","url":"https:\/\/www.scmgalaxy.com\/tutorials\/","name":"scmGalaxy","description":"A Platform for Software Engineers","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.scmgalaxy.com\/tutorials\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#\/schema\/person\/c88b513657ea9e9a6cd8a9b3a3bff6f3","name":"shashank K","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/a1d7da7c43d650339f6ab219ed52f462ee8ce994ce0d45b50c0700eead0676a4?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/a1d7da7c43d650339f6ab219ed52f462ee8ce994ce0d45b50c0700eead0676a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a1d7da7c43d650339f6ab219ed52f462ee8ce994ce0d45b50c0700eead0676a4?s=96&d=mm&r=g","caption":"shashank K"},"url":"https:\/\/www.scmgalaxy.com\/tutorials\/author\/shashank\/"}]}},"_links":{"self":[{"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/posts\/6795","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/users\/19"}],"replies":[{"embeddable":true,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/comments?post=6795"}],"version-history":[{"count":1,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/posts\/6795\/revisions"}],"predecessor-version":[{"id":6796,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/posts\/6795\/revisions\/6796"}],"wp:attachment":[{"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/media?parent=6795"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/categories?post=6795"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/tags?post=6795"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}