The communication.
In the previous article, we learn how the web works? Now we are going to write our first web page. We will know the tags of HTML to make things possible. Open your favorite text editor my recommendation was to use Notepad as I discuss in last post(here) and start typing the following code:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Asslam O Alikum! World</h1>
</body>
</html>
Let me explain👆code:
<!DOCTYPE HTML> we define the type of document. Because now web browsers are not just limited to HTML therefore in HTML version 5 it becomes standard to follow.
HTML This is the root tag in which we can define all other tags.
head This is the first leaf of HTML in which we write to define all tags related to CSS, JS meta tags (don't worry about it now) just take it as a header section of your web browser.
<title> Is used to define the name of our page(it could be anything as per your wish Note: (don't compare it with the file name) it is just content that will show on the tab of a web browser.
<body> This is another primary leaf of HTML tag which is very inspiring to know, because all the work related to web layout, content, images, forms will take place.
keep in mind 🧠 the tag we open must be closed before writing another tag.
Now let's add one more line into our body and then see the magic.
<h1>Asslam O Alikum! World</h1>
Press Ctrl + s and save the file.
💡Tip: Create a separate folder on your computer by pressing ctrl + shift + N it will ask for a name give whatever you want, but for now I can set first-web.
Give your file name index.html I put index because it is easy to understand on the web, Also It’s a primary page to give follow-up to another page. Like we open a book first of all we see a table of content which guides us about the topics written inside the book.
💡Best practices: Avoid all upper case and space when you give the name to your folder or file. If you really want to put space place -(dash) instead of space.
Now the communication part has been done, it’s time to see the actual result.
Go to your first-web folder in which you create a file called index.html. You notice that it show the icon of your default web browser. Double click on the file and 👇 you see the result.
.gif)
Stay connected on @hshahzadaheer and Linkedin