HTML: Making my First Web Page!

Making your first Web Page!


    In our Previous post, I said, you are going to make your own web page on your own! What's more? Let's Get Started, ( if you don't know what you need to make your project, check this page before you countinue )

Getting Started:


  1. Open your Text Editor 
  2. Create a New File ( CTRL + N )
  3. Make a New Folder named "html"
  4. Save That file as your_file_name.html in html folder [ if your using default notepad, remember change from txt to all files in drop down bar ! ]
  5.  Start Coding!
     ( note: The Pics are From Quoda For Android )

    

Now  Start Writing your code!

As I defined in previous post, There are some Basic And compulsory HTML Tags. Now let's write the following, 

  1. Open <html> ( note if you used any IDEs like Visual Studio Code or Web Code, Your Tags will be auto closed, don't mind it )
  2. Open <head>
  3. Add <title> Tag Next to the <head> Tag and Add your Title Into it and then close the <title> tag by </title>
  4. Close <head> tag by </head>
  5. Open <body>
  6. Open new <h1> ( you will learn what it will do, soon)
  7. Write hello world and then close <h1> by </h1>
  8. Close <body> tag by </body>
  9. Close <html> tag  
  10. You are Done!
Your code should look something like this:


If you did something wrong, No worries! Correct it now!

So let's see how to view your project.

In PC or Desktop:


  1. Open My Computer ( File Explorer )
  2. Find html Folder
  3. You will see your_file_name.html, if not probably you didn't saved your file there. Try saving it again
  4. Click on it and select open
  5. Your file should be opened on your web browser with the output ( if not, probably the format is incorrect, the file name must end with .html )

In Smartphone:

   There are two methods, I am showing one which will work for every android and iOS versions!

  1. Use the following Thing, in your browser  url field: file:///storage/emulated/0/html/your_file_name.html 
  2. You are Done! You should see the output, if you saw a blank white space, means there is an error in your code!
Your output will be something like this


Wow! You just made your own code! You placed your first step in the your way to be a Front End Web Developer! You did it!!

This is how you will make a basic web page. We will learn about advanced stuffs soon!

If you got messed up with something,  No worries! Feel free ask your queries in comments section! 

Stay Tuned♡!


Comments

Post a Comment

Popular posts from this blog

Introduction To Python

Image
 What is Python?      If you have some programmer friend or yourself is into to the programming field you have probably heard the language Python .   Python is a High-Level-Programming Language used for many cases, in this post, we will be seeing how to work with Python.  Installation and IDE    We must install python first to work with it. Installation is simple. You can get clear info on how to get python  here . Once you are done, Make sure you have atleast Python Version of 3.0 or greater. Because this guide follows it.    Once you are done installing Python, Now we need an IDE to work with it, an IDE is nothing but an Interageted Development Environment which makes your work smoother. To get a Clear understanding, Think of this   You need to mix somethings in a bowl, you can either use your hands itself or use a mixer, both is going to do the same job but mixer does it well and your effort will be less. Just like this...
Read more

HTML: Text Tags: Part 1

Image
Text Tags   If you have a question, what is a tag ? Read  this  post before you countinue.   Okay so let's get started. As I mentioned before there are dozens of tags in HTML5 Each has it's own purpose and usage. Text Tags are type of tags used to format text in a web page. Text Formatting includes styles like  Bold Italics Headings & Subheadings  Underlines Fonts Strikeout Etc      In This post we will see only some text tags. ( we will cover up everything later )   The best example to imply this text Formatting is a Newspaper! See the image below    In this image, you can see the difference of different header sizes. HTML5 Has 6 different heading tags based on size.  So there are tags Namely <h1> <h2> <h3> <h4> <h5> <h6> The biggest header tag is  <h1> And the smallest is  <h6> Also for simple text formatting like Bold & Italics  There is  <b...
Read more

HTML: Anatomy of Tags

Image
HTML Tags - Anatomy In our  previous  post, we made our First Web Page . That would gave you some understanding of Tags. Now let's see in detail about them. ( note: I assume that you have basic understanding of Tags in HTML if not read  this  post before you countinue) Attributes - Explained           As I said Tags are building blocks of HTML. It says how the content inside it should appear in webpage. To make it simple, Tags Navigate The Browser to how to display the content inside them. See this convo (may look funny but useful)  Browser: Okay, What type of file are you ? HTML File: See I have <html> tag.  Browser: so you are an HTML File. You are my Navigator. Okay, what text should I display is my title bar? HTML File: See Under My <head> tag, I have <title> Galax Coders </title>  Browser: Okay so, Galax Coders is the title right? HTML File: Yes Ofcourse! Browser: Okay, What content should I wr...
Read more