Building Your First Website - An Introduction to web development

Building your first website can be a daunting experience. You aren't sure where to start or what to learn. Start building websites by learning the basics of html and css to begin your web development journey.

What Are Websites Comprised Of?

In other words, what is required to display content on a web page? By and large, these are the tags that you will have to write for every html5 website, you might as well get to know them. The most basic website is comprised of one html file.

Ultimately, this file will contain three parts: The doctype declaration and an html wrapper which holds the head section and the body section of your website.

Creating The HTML File For Building Your First Website

Create a new folder and name it anything. Inside the root of that folder, make a new file with the extension ".html", for example "index.html" or "home.html" - give it any name you'd like, but be sure to include the ".html" extension. Be aware that web hosts will search for a "default.html", "home.html" or "index.html" by default.

A very basic html file will look like this.

code for the bare-minimum tags needed for building your first website

As shown above, notice how the code is structured. In brief, it would be fairly hard to read code that doesn't contain separation. Rather, tabs or spaces are used to create separation between elements. This is not at all required for the browser to render the content, however it is good practice. In the long run, code separation and structure will help you if you ever have to come back and extend from your code. At the same time, clean code separation and structure will also help other developers scan through and read your code.

The Head Section

A basic head of any html5 website will contain a meta tag, a title tag and most times a style tag. Tags are written as <tag-name>

code for building your first website with no content

Website Titles

Notice the <title> tags? Any text that you place inside here, will be displayed in the tab of the browser. For reference, it looks something like this.

The meta "charset" is the key meta tag.

The meta charset tag will tell the browser which character encoding set must be used to render your website. In any event, it must be included in your website. Following, the most commonly used character set for the web is "UTF-8". All meta tags are written inside the head section as <meta charset="utf-8">.

Piecing Your Website Together

Generally speaking, building your first website becomes easy after you piece these main components together. Moreover, what about adding content? Notice the <p> tags inserted inside the body tags. In addition, this is called a paragraph tag - and as you probably guessed, it is used to render your website's textual content.

complete code for building your first website

Adding Content To Your Website

Accordingly, the body of content that is displayed on your website will go in-between the <body> tags. In essence, this is where you place your body of text and media.

Furthermore, check out other resources to learn about all of the different html tags you can use to structure content on your website.

HTML element reference (Mozilla Developer Network)

Posted from my blog with SteemPress : https://divto.com/building-your-first-website/