First day with html

First day with HTML can be so overwhelming, with so much excitement, owing to the fact that you are about to learn and do something awesome. The feeling is great, so in this article i am going to work you through a step by step guide on creating your first HTML page, let’s GO.

If you already have a basic understand of what HTML means and how to set up a development environment, then you can proceed to the basic steps below, otherwise click on the link below for an introduction to HTML.

READ ALSO: INTRODUCTION TO HTML AND SETTING UP A DEVELOPMENT ENVIRONMENT

Basic Steps on Creating you first HTML Page

  • First create a new text document and saving it with the .html file extension. This will be your HTML document. The .html extension signifies that the document is an HTML document.
  • The first thing you’ll need in any HTML document is a doctype declaration. This tells the web browser the version of HTML you are using. For HTML5, the doctype declaration is written as shown below:
<!DOCTYPE html>
  • After that, you will need to create the root element of the HTML document, which is the <html> element. All of your other HTML elements will be nested within this element.
<!DOCTYPE html>
<html>
</html>
  • Inside the <html> element, you’ll have two main sections: the <head> and the <body>. The <head> section contains information about the document that isn’t displayed on the web page itself, such as the title of the page, meta information, and links to external files such as CSS and JavaScript files. The <body> section contains the actual content of the web page.
<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
    </body>
</html>
  • To add content to the <body> section, you will use a variety of different HTML elements. Some of the most used HTML elements are listed below:
    • <p>: This is used to create a paragraph of text
    • <h1> – <h6>: This used to create headings of different sizes
    • <a>: This is used to create hyperlinks. It is called anchor tag.
    • <img>: This is used to add images
    • <ul> and <li>: This is used to create unordered lists
    • <ol> and <li>: This is used to create ordered lists
    • <div>: This is used to create a container for other elements
    • <span>: This is used to create a small container for inline elements
  • Each element has its own attributes that can be used to define the element’s properties. For example, the <a> element has an href attribute that is used to specify the link’s destination, and the <img> element has a src attribute that is used to specify the source of the image.
  • Once you have added all of your content and elements in your HTML document, next is to save the HTML document and open it in a web browser to see the result.

This is the basic work around of you first HTML page. Congratulations, you did it. Shallout!!!