Headings and Paragraphs

Exercise

In the "index.html" file, write the following code:


      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>My First Web Page</title>
      </head>
      <body>
      
      </body>
      </html>

Save.
Right-click anywhere in the editor and select "Open with Live Server" from the context menu. This will start a local server and open the "index.html" file in your default browser. Any changes you make to your HTML, CSS, or JavaScript files will automatically refresh the page in your browser, allowing you to see the changes in real-time. If you want to stop the server, you can simply close the browser window or click on the "Stop" button in the bottom right corner of the Visual Studio Code window.
In the "index.html" file, add the following code between the opening and closing tags of the body:

      <h1>Welcome to My Web Page - heading 1</h1>
      <h2>Welcome to My Web Page - heading 2</h2>
      <h3>Welcome to My Web Page - heading 3</h3>
      <h4>Welcome to My Web Page - heading 4</h4>
      <h5>Welcome to My Web Page - heading 5</h5>
      <h6>Welcome to My Web Page - heading 6</h6>
      <p>This is my first attempt at creating a web page with HTML.</p>

Save.
In the browser, you should see the following:

Code Walkthrough and Explanation

`<h1></h1>`

The <h1> element in HTML is a heading element that is used to define the main heading of a web page. The <h1> element is the largest and most important heading, and it should be used to give the main title or topic of the web page.

In the example from Exercise 1, the <h1> element is used to display the title of the web page. The text inside the <h1> tags is displayed in a larger and bold font, which makes it stand out from the rest of the content.

There are six levels of headings in HTML, ranging from <h1> to <h6>, with <h1> being the most important and <h6> being the least important. It is recommended to use headings in a hierarchical manner, with <h1> as the main heading and <h2>, <h3>, etc. as subheadings. This makes it easier to understand the structure of the web page and to navigate through the content.

`<p></p>`

The <p> element in HTML is a paragraph element used to define a block of text as a paragraph. The text inside the <p> tags is displayed as a separate block of text with a margin above and below, which separates it from other elements on the web page.

In the exercise, the <p> element was used to define a paragraph of text that was separate from the heading. It was displayed as a separate block of text, with a margin between it and the heading.

The <p> element is one of the most commonly used elements in HTML, as it is used to define the main content of a web page. It is important to use proper paragraph structure in your HTML documents, as this makes it easier to read and understand the content, and it also makes the web page more accessible to users with disabilities.

Experiment with the Code

Try changing the text between the <h1></h1> tags and see what changes on the browser.
Try changing the text between the <h2></h2> tags and see what changes on the browser.
Try changing the text between the <h3></h3> tags and see what changes on the browser.
Try changing the text between the <h4></h4> tags and see what changes on the browser.
Try changing the text between the <h5></h5> tags and see what changes on the browser.
Try changing the text between the <h6></h6> tags and see what changes on the browser.
Try changing the text between the <p></p> tags and see what changes on the browser.

Video and Code References

Questions? Subscribe and ask in the video comments:

GitHub and Other References

Learn2BuildApps