01 logo

Learn to Create Web-Page in 5 days With Html 5.

HTML 5 In 5 days.

By Salmoon SamuelPublished 3 years ago 3 min read
1
First Article

Introduction :

I want to share my knowledge to create a web page in 5 days means, you have to read my 5 articles, with these notes anyone can create a web page with a code editor (Visual Studio Code). For hosting the web page for free, I will include that information in the last article of this course.

HTML, or HyperText Markup Language, used to describe the structure of a web page. In the beginning, I want to explain, how to create a web page with a code editor. In programming, the term editor usually refers to source code editors that include many special features for writing and editing code.

How to download Visual Studio Code: https://code.visualstudio.com/download. Open the above Url in your browser and download the vs-code.

1- Vs code is very easy to use first you have to set the language mode with the following command:

Mac: Command + Shit + P Window: Ctrl + Shit + P

Type "language" you'll see "Change language Mode" then press Enter.Then type HTML press enter to enable HTML language.

2- Let's make a folder on your desktop with the name of the Project. Then in VS-Code open the project folder and create a new file with this command (Command + N or Ctrl +N), then save it with the name index.html with this (Command + S or Ctrl + S).

3- Let's create the boilerplate code you need to include all HTML pages, For faster set up, you can type! at the top of your HTML file hit tab it will create boilerplate automatically for you:

<!DOCTYPE html>

1- <html>

2- <head>

<title>Music Chanel</title>

<style>

body {

background-color: cyan;

text-align: center

}

h1 {

color: red;

}

</style>

</head>

<body>

<h1> Music Chanel</h1>

<h2> Most Popular Songs</h2>

<p> 50 Catchy Songs About Home to Play on Repeat. 1 "Sweet Home Alabama" by Lynyrd Skynyrd. 2 "I'll Name The Dogs" by Blake Shelton. 3 "Home" by Michael Bublé 4 "The House That Built Me" by Miranda Lambert. 5 "My House" by Flo Rida. 6 "Christmas Tree Farm" by Taylor Swift. 7 "Almost Home" by Mariah Carey.</p>

</body>

</html>

In Html, every element has opening and closing tags around the content. let's start with the head tag, "what we can include in the <head> tag?". The first thing comes in the <head> tag is <title> which represents the web page and for example, you want to open the www.google.com, only google will show up at the browser tab, then you can include <style> tag to style your Html elements, for example, you want to give background color to your page or you want to change the font size, font color, font style, text alignment.

1-Okay lets give the title to this page, Title is something which represents the web page and it will show up on your browser tab.

2- lets start creating our page with <body> tag. So The heading of the page starts with <h1> that will be the first heading of the page and so on you can create a second heading with <h2> you can see the demo above.

3- For an explanation of our heading and our right in any paragraph, we use the <p> tag. okay, see the example above.

4- Let's style our page with <style> tag, so I am gonna change the page background color and I will align all the text in the center and will change the colors of our headings.

so whenever we style any element we write the element name and curly bracket then we give style and close it with a curly bracket on the next line.

Here we go you guys created your first web-page with proper Html tags with heading and paragraphs.

In the end, I will teach you how you can see our page in the browser.

Okay, At VS-Code on the right side, you will the menu bar, In the menu bar the 5th tag with 4 square boxes is called extensions, click on that and write live server at the search bar and hit enter install the live server extension. After installing the live server extension go to your index.html page and righ-click on the page when the menu box will open search for open with a live server. and here we go the new window will open in the browser and you can see the output of your code. yay.

I will issue my 2nd article where you can learn how to create header and footer and divisions on the webpage.

If you have any questions email me @ [email protected].

Stay safe and happy coding..............

how to
1

About the Creator

Reader insights

Be the first to share your insights about this piece.

How does it work?

Add your insights

Comments

There are no comments for this story

Be the first to respond and start the conversation.

Sign in to comment

    Find us on social media

    Miscellaneous links

    • Explore
    • Contact
    • Privacy Policy
    • Terms of Use
    • Support

    © 2024 Creatd, Inc. All Rights Reserved.