Thursday, March 14, 2019

HTML: Page Structure

HTML: Page Structure
The Basic structure of HTML page is given below. It contain some elements like head, title, body, … etc. These elements are used to build the blocks of web pages.
<!DOCTYPE html>: This tag is used to tells the HTML version. This currently tells that the version is HTML 5.
<html>: This is called HTML root element and used to wrap all the code.
<head>: Head tag contains metadata, title, page CSS etc. All the HTML elements that can be used inside the <head> element are:
·         <title>: Defines the title for your document.
·         <meta>: Describe metadata (information about data) in a document.
·         <base>: Specifies the base URL/target for all relative URLs in a document.
·         <style>: Defines the style information for an HTML document.
·         <link>: Defines a link between a document and an external style sheet.
·         <script>: Define a client-side script (JavaScript).
·         <noscript>: Defines an alternate content for users that have disabled scripts in their browser or have a browser that doesn't support script.
<body>: Body tag is used to enclosed all the data which a web page has from texts to links. All of the content that you see rendered in the browser is contained within this element.

Example: HTML page can be created using any text editor (notepad). Then save that file using .htm or .html extension and open that file in browser. It will get the HTML page response.

<!DOCTYPE html>
<html>
    <head>
          <title>Demo Webpage</title>
          <style>
                   h1 {
                             color: blue;
                             font-size: 46px;
                             margin-left: 30px; 
                         }
                   p {
                             font-size: 17px;
                             margin-top: -25px;
                             margin-left: 15px;
                      }
          </style>
    </head>
    <body>
          <h1>SumProgs</h1>
          <p>A online portal for all programmers.</p>
    </body>
</html>        


Output:






Don't worry about what the code means yet. We start to look at it in more detail on the coming posts so stay tuned. 

No comments:

Post a Comment