There are the following different examples implemented for creating the simple HTML pages using the different basic tags: Show
Example 1: This example creates a simple page without any content, which helps in understanding how to use the Html, Head, and Body tag in the HTML page. In the following example, we have not specified the title of the web page in the Head tag, so it will display the name of Html file as its title. Test it NowOutput: Example 2: This example creates a page which helps in understanding how to give a title to a web page. Test it NowOutput: Example 3: This example creates a web page which helps in understanding how to make the text bold, italic, and underline. Test it NowOutput: Example 4: This example creates a web page which helps in understanding how to use the <p> tag. Test it NowOutput: Example 5: This example creates a web page which helps in understanding how to define all header levels. In HTML, there are 6 header levels from h2 to h6. Test it NowOutput: Example 6: This example creates a web page which helps in understanding how to align the text in center, and how to break a line. Test it NowOutput: Example 7: The following example describe how to link one page to another. Test it NowOutput: If you have ever wondered how HTML is used to make websites with pictures and videos, you have landed at the right place. I am going to walk you through the 9 steps of building a one page website using HTML. If you can build a one page website, you can build a multi-page website. RequirementsYou only need two things: a text editor and a browser. If you know how to use these two, skip the requirements section and go to the 9 steps process. A text editorYou need a text editor to write the HTML code. Every computer has a text editor so don’t be in a hurry to install anything yet. You can use Notepad on Windows, Gedit on Ubuntu and TextEdit on MacOS X. You will hear about fancy text editors that you should install. However, for your first HTML webpage, you don’t need to install anything. Use the text editors already in your computer. After building your first webpage, you can check some of the other tools I use when making webpages that will make your work more comfortable. A browserYou will be using Firefox, Chrome, Chromium, Safari or any other web browser already installed in your computer. Content of the WebpageAll webpages always contain some kind of information in various format like text, images, videos etc. For you to make a webpage, you need to some content or use dummy text and images. If you just want to practice, you can copy the content I already prepared here. If you want to create a unique webpage, you will have to:
For your first webpage, I would recommend that you stick with a simple design web page. The web design is how the website looks. Remember, you are just practicing how to build webpages not design them. You can choose from this simple html projects collection I prepared. For this tutorial we will be building a webpage about Crickets For Food. This webpage is not fancy but it a good first project. I made it one column to keep things beginner friendly. 9 Steps to Create your First HTML WebpageStep 1: Open a Text EditorRemember the text editor I talked about earlier on, time to open and use it. If you have used one before, skip to the next section. If you don’t know how, the instructions below will help you depending on the kind of computer you use.
After opening the text editor of your choice, create a new file. Then, you can proceed to the next step. Step 2: Write Some HTML CodeWe are now going to add the HTML boiler plate code. This is the code that will allow the browser to correctly display your webpage. Copy and paste the code below into your file. Your file should look like this now:
Save the html page by pressing CTRL + S or click on file option then save option. Ensure that you name the file in the following format: “name” then “.html” examples index.html, cooking.html. You can use these two guidelines when naming webpage file:
Choose where to save the file. Once you have choosen a place to save the file, click save. To view the file. Use your file manager to navigate to the folder your HTML file is. Right click on the file and open it with a browser. You should see something like this. Step 3: Add the Text ContentCopy the content you wrote earlier or the ready made content I arranged for you to use. Paste it in between the body tags. Refresh the webpage on the browser. It will look like a blob of text with no paragraphs or headings shown below. Step 4: Add the HTML TagsHeadingsFirst, we shall tackle the headings. Check which part or the text was the main heading. In our example it is “Insect eating: The ultimate guide to eating crickets”. Place this text between h2 tags as shown below:
Save your work and check the result on the browser. ParagraphsFor the paragraphs of text, place each paragraph of text between the
View the result on the browser. Step 6: Add a ListLists make reading a group of things easier on our eyes and brain. Lets add a bullet points type list:
Refresh and view the result on the browser. Step 7: Add ImagesRemember the URL’s or the images you saved. Now is the time to unleash them. If you just copied the images’ URL, you will add the URL inside the quotes of src attribute. Remember to add alt attribute that shows when the image cannot be displayed. Example:
Step 8: Embed a Youtube VideoSearch for relevant video on youtube. Once you have found it, click on share button/ link. You will get a popup. Click on embed option. Click on the copy button to copy the code that is displayed. Paste your code on your webpage where you want the video to be displayed. For my case this is the code that i got:
View the html page on a browser. If you have completed all the 8 steps, you should have a working HTML page that you should be proud of. Step 9: Add a Link to Your Source of InformationIf you copied some content from another web page, it is concidered appropriate to add a URL pointing to the original source of information. You can add a link using
View the html page on a browser. You should now have a link at the bottom with the words: “HTML and CSS Cricket Project”. Complete Code to Create a Website Using HTML
Additional Tips
Hi there! I am Avic Ndugu. I have published 100+ blog posts on HTML, CSS, Javascript, React and other related topics. When I am not writing, I enjoy reading, hiking and listening to podcasts. How do I make a simple HTML page?Follow the steps below to create your first web page with Notepad or TextEdit.. Step 1: Open Notepad (PC) Windows 8 or later: ... . Step 1: Open TextEdit (Mac) Open Finder > Applications > TextEdit. ... . Step 2: Write Some HTML. ... . Step 3: Save the HTML Page. ... . Step 4: View the HTML Page in Your Browser.. What is the simplest HTML page?Example 1: This example creates a simple page without any content, which helps in understanding how to use the Html, Head, and Body tag in the HTML page. In the following example, we have not specified the title of the web page in the Head tag, so it will display the name of Html file as its title. <Html> <!--
How do you simplify HTML code?Writing semantically correct and clean HTML. Use Proper Document Structure. ... . Always Write Standards-Compliant Markup. ... . Indent the code. ... . Keep the Syntax Organised. ... . Make Use of Semantic Elements. ... . Use <h1> Tag Only Once Per Page. ... . Exterminate "Divitis" ... . Avoid Too Much Commenting.. What is the correct way to write in HTML?A consistent, clean, and tidy HTML code makes it easier for others to read and understand your code.. Mixing uppercase and lowercase names looks bad.. Developers normally use lowercase names.. Lowercase looks cleaner.. Lowercase is easier to write.. |