HTML Introduction

The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It is often assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript. Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for its appearance. HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects such as interactive forms may be embedded into the rendered page. HTML provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes, and other items.

HTML Editors

we can use notepad, VS code, Sublime text editor, Atom to creat html documents.However, It is preferred to use an opeb source editor like VScode which can compile and run other technologies like CSS and JS with HTML.

 
  • Step-1:Open VS code.
    •  
  • Step-2:create a workspace and save the file with ".html" notation.
    •  
  • Step-3:Type the HTML code in the editor.
    •  
  • Step-4:Run the HTML code by opening live server in chrome or firefox(Download live server extension)

    • HTML Attribute

    HTML Attributes

  • All HTML elements can have attributes
  • Attributes provide additional information about elements
  • Attributes are always specified in the start tag
  • Attributes usually come in name/value pairs like: name="value"
    • Example: 
          <image src= "cat.jpg" alt ="cat image">

    In this example src ="cat.jpg" and alt="cat image" are two attributes where src and alt are attributes name and "cat.jpg" and "cat image" are attributes values. Here alt attribute is optional, but src is mandatory because src specify which image to show. There should be at least one space gap between two attributes, and the value of the attributes must have resided in the double inverted comma. Some most important HTML

    HTML heading

    HTML headings are titles or subtitles that you want to display on a webpage.HTML headings are defined with the <h1> to <h6> tags.<h1> defines the most important heading.<h6> defines the least important heading. If the content is specified by heading tags, then it would be displayed large and bold as compared to other text content present on the web-page. Example: 

                                        <h1>First Heading </h1>
                                    <h2>Second Heading </h2>
                                    <h3>Third Heading </h3>
                                    <h4>Forth Heading </h4>
                                    <h5>Fifth Heading </h5>
                                    <h6>Sixth Heading </h6>

    HTML paragraph

    HTML heading are defined by using the tag <p> element. The paragraph starts from a new line, adds some margins and white space after the end. Example: 

                            <p> Hello! and Welcome to google </p>
                        <p> Here you get to know all about the latest technology. </p>

    HTML Style

    Every browser has a specific engine that parses the HTML document and displays a default style of the page content. 

        <body style="background-color:yellow;">
                          <h1>Hello world</h1>
                          <p>Welcome to HTML.</p>
                          </body>

    HTML Formatting

    In HTML, we have many special elements that can provide special meaning to text content.

    HTML Description
    <b> Bold the text
    <strong> An alternative for <b>, which tell that this text is essential.
    <i> Italic the text
    <em> Similar to italic but used when we want to emphasize the text.
    <mark> It marks the text with a default "yellow" background colour
    <small> Decrease the text size
    <del> It prints a cross line over the text.
    <ins> Represents the inserted text by putting an underline.
    <sub> This element is used to display the subscript.
    <sup> It can make a text superscript.