PLATFORM

  • Tails

    Create websites with TailwindCSS

  • Blocks

    Design blocks for your website

  • Wave

    Start building the next great SAAS

  • Pines

    Alpine & Tailwind UI Library

  • Auth

    Plug'n Play Authentication for Laravel

  • Designer comingsoon

    Create website designs with AI

  • DevBlog comingsoon

    Blog platform for developers

  • Static

    Build a simple static website

  • SaaS Adventure

    21-day program to build a SAAS

COMMUNITY
MORE
Written By

Hassan Shahzad Aheer

Views

The first step to writing a website.👨‍💻

The first step to writing a website.👨‍💻

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.

Our Amazing Sponsors
DigitalOcean View Website
DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.
Laravel News View Website
Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.
Genesis View Website
A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. 
<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. Screenshot-from-2022-02-15-20-52-58.png 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. BuQvEv_iI.png

giphy (1).gif

Stay connected on @hshahzadaheer and Linkedin

Comments (0)

loading comments