January 19, 2022

Step for Create a Simple Web Page with HTML

4 min read

HTML is one of the best programming languages and the core components of the World Wide Web, which makes up the structure of web pages. These days most developers opt for HTML to make web pages. However, the best part is once the developer has made the website web page, you can save it as an HTML document and can easily see it in your web browser.

So, if you are one of the individuals looking forward to creating a simple web page using HTML, you have reached the right place. Let’s get started and create an HTML web page with the help of basic text editors, which you can find both on Windows and Mac computers or seethis page for hire expert html5 developers.

  1. Adding a head to the HTML
  • First, open a text editor.

On your computer, where the operating system is Windows, you have to open the notepad. Or, if you are using macOS, they have to open TextEdit, and Chrome users will open Text.

  • Windows– Open Start Windows, type in notepad, or notepad++ and click Notepad or “Notepad++ or sublime” at the top of the window.
  • macOS– Click Spotlight, type in TextEdit, and double-click TextEdit at the top of the results.
  • ChromeOS– Open launcher, then click Text. (The icon says Code Pad).

 

  • Next, type in <DOCTYPE html> in notepad, and after that, press Enter. This step will tell the web browser that it is an HTML document.

 

  • Type <html> and press Enter. This will open up a tag for your HTML code.

 

  • After that, type in <head> and then press Enter. It is called a tag that will open the HTML head. Here the essential thing is usually the information of HTML head is not displayed on the web page. However, this information consists of the title, metadata, CSS style sheets, and various other things.

 

  • Next type in <title>. It is the tag that will add a title to your page.

 

  • After that, type a title for your web page. It can be any title you want to give to your web page.

 

  • Next, type </title> and then press Enter. This tag is for closing the title tag.

 

  • Type </head> and press Enter. Well, this tag is to close the head. However, the HTML code of your document will look like this.

 

<!DOCTYPE html>

<html>

<head>

<title>My Web Page</title>

</head>

 

  1. Adding a body and text to your HTML
  • This type-in <body> is just below the “Head” tag. This tag is crucial as it will open the body of your HTML document. Everything inside the HTML body will be displayed on the web page.
  • Next type in <h1>. This is another tag that will help you add a heading to the HTML document. Basically, the heading is the large bold text at the top of the HTML document.
  • Furthermore, type a heading for your web page. It will be the title of your page or can be a greeting.
  • Next, type </h1> just after heading text and press Enter. This tag helps in closing your heading.

<h1>Welcome to My Page!</h1>

<h2>My name is Bob.</h2>

<h3>I hope you like it here.</h3>

 

  • Type in <p>. This tag will open a paragraph, and the text of the paragraph is normal-sized.
  • Next, type some text, and it can be the description of the web page or any other type of information you want to share with your potential audience.
  • After that, type <p> after entering the text and press Enter. This is the tag to close your paragraph text.

<p>This is my paragraph.</p>

 

  1. Adding additional elements to your HTML
  • Add a picture to your web page. That means if you want to add an image to your web page, follow the below steps: –
  • Type <imgsrc=to open your image tag.
  • Copy and paste the image URL after the “=” sign in quotation marks.
  • Type >after the image url to close your image tag. For example, if the image’s URL is “http://www.mypicture.com/lake”, you would write the following:

<imgsrc=”http://www.mypicture.com/lake.jpg”>

 

  • Link to another page. Adding a link to your HTML is very easy with the below steps. They are: –
  • Type <a href=to open your link tag.
  • Copy and paste the URL after the “=” sign in quotation marks.
  • Type >after the URL to close the link portion of the HTML.
  • Type a name for the link after the closing bracket.
  • Type </a>after the link name to close the HTML link.[6] The following is an example of a link to Facebook.

 

 

  • Add a line break to your HTML doc. If you want to add a line break, then type in <br> to your HTML doc as it will create a horizontal line that will divide different sections of your page.

 

  1. Customizing shades
  • First, check out the list of official HTML shades name and their codes.
  • After that, set the background shade in the <body> tag, which you will do by adding the style attribute. Like this: –

<body style=”background-color:lavender;”>

 

  • Now set the text color for any tag. You can also use the style attribute to specify which shade you want to add to the text. For example, <p style=”color:midnightblue;”>

 

  1. Closing the HTML document
  • First, type in <body> after you add all the text, images, and all other elements to the body of your HTML document.
  • After that type </html> to finally close the HTML document. However, this tag will go below all the tags to close the HTML body at the end of the document.

<!DOCTYPE html>

<html>

 

<head>

<title>wikiHow Fan Page</title>

</head>

 

<body>

 

<h1>Welcome to My Page!</h1>

<p>This is a fan page for wikiHow. Make yourself at home!</p>

 

<h2>Important Dates</h2>

<p><i>January 15, 2019</i> – wikiHow’s Birthday</p>

 

<h2>Links</h2>

<p>Here is a link to wikiHow: <ahref=”http://www.wikihow.com”>wikiHow</a></p>

 

</body>

</html>

 

The bottom line

So, this way, you can create a simple web page with HTML for your website and make the user experience extraordinary and amazing. For more information, seethis page for hire HTML5 developers. 

 

Author Bio –

 

Hermit Chawla is a MD at AIS Technolabs which is a Web/App design and Development Company, helping global businesses to grow by Global Clients. He love to share his thoughts on Web & App Development, Clone App Development and Game Development.

 

 

For More:

LinkedIn:https://www.linkedin.com/in/hermit-chawla-lion-82b6513b

Twitter:https://twitter.com/aistechnolabs

Facebook:https://www.facebook.com/aistechnolabs

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright © All rights reserved. | Newsphere by AF themes.