In this article, I’ll guide you through simple steps in creating your first website. This article is intended for beginner that only want to show up their creation/content to a page rendered in browser.
Step 1 - Preparation
First things first, you need the basic requirements:
- Beginner Coding Skills (writing HTML syntax, CSS, JS)
- Browser, to view content you’ve created (Chrome, Firefox, Safari, Edge, or Opera)
- Integrated Development Environment
- Offline Editor (Sublime, Atom, VSCode, Bracket, Dreamweaver)
- or Online Editor (CodePen, JSBin, StackBlitz)
Now, we’re gonna prepare files that you need to built throughout this articles
index.html <-- main file
style.css
script.js
If you’re using online editor you can simply copy and paste this to the index.html section
<!-- This line declares the document type as HTML5 -->
<!DOCTYPE html>
<html>
<head>
<!-- This line sets the title of the page to "My First Website" -->
<title>My First Website</title>
<!-- This line links to an external stylesheet called "style.css" -->
<link rel="stylesheet" href="style.css">
<!-- or -->
<!-- this line will inline you css straight in your html -->
<style></style>
</head>
<body>
<!-- This line links to an external JavaScript file called "script.js" -->
<script src="script.js"></script>
<!-- or -->
<!-- this line will inline you script -->
<script></script>
</body>
</html>
I also put the comment in html file like this:
<!-- This line declares the document type as HTML5 -->
this will not be displayed in browser. Browser understand that everything inside the wrapper tag <!-- and --> is a comment and will be treated as such.
Now you need to understand the structure of HTML web page. And to make this an easy start, we’ll start with only these tags: <html>, <head>, <title>, <style>, <body> and <script>
html // the root/container tag, of and for all other tag, in 1 html document, unless it's an iframe.
|- head // this tag should cover the top part of web page, and usually contain metadata.
|- title // this be the title of your web page. It will show on your top page of your site.
|- style // this tag should contain styles you need to format your website with. You need to use CSS language to write this file.
|- body
|- script // this is the tag to contain script needed to run in your browser, you need to write these in javascript language
This should give you an idea of what each tags means in general and how it works.
The <html> tag |
The <html> tag should be the root tags of your web page. This has to be included so it’ll make easier for search engine index. |
|---|---|
The <head> tag |
This is where the <meta>, <title>, <link> and <style> tags usually be placed. You can also place scripts tags here, |
The <meta> tag |
The <meta> tag defines metadata about an HTML document. Metadata is data (information) about data. <meta> tags always go inside the <head> element, and are typically used to specify character set, page description, keywords, author of the document, and viewport settings. |
The <title> tag |
The <title> tag defines the title of the document. The title must be text-only, and it is shown in the browser's title bar or in the page's tab. The <title> tag is required in HTML documents! The page title is used by search engine algorithms to decide the order when listing pages in search results. Note: You can NOT have more than one <title> element in an HTML document. |
The <link> tag |
The <link> tag defines the relationship between the current document and an external resource. The <link> element is an empty element, it contains attributes only. |
The <style> tag |
The <style> tag is used to define style information (CSS) for a document. Inside the <style> element you specify how HTML elements should render in a browser. |
The <body> tag |
The <body> tag defines the document's body. Note: There can only be one <body> element in an HTML document. |
The <script> tag |
The <script> tag is used to embed a client-side script (JavaScript). The <script> element either contains scripting statements, or it points to an external script file through the src attribute. |
Source: w3schools.com
Step 2 - Inside the <body>
After reading all the tags above, it is now clear we need to structure the tags in certain way. And mostly what you want to add/modify is inside the <body> tag. You can find more tags in source above.
I’ll introduce you to tags that useful in general document that are heading tag <h(x)> and paragraph tag <p> . The heading tags are <h1>,<h2>,<h3>,<h4>,<h5>,<h6>,<h7> and the paragraph tag is <p>
<h1>This is a heading<h1>
<p>And this is your paragraph. You can place your words and sentences here. That is why this is called paraghrapgh tag</p>
So now you have a webpage source code that look like this:
<!DOCTYPE html>
<html>
<head>
<title>My First Website</title>
</head>
<body>
<h1>This is a heading<h1>
<p>And this is your paragraph. You can place your words and sentences here. That is why this is called paraghrapgh tag</p>
</body>
</html>
And the webpage should look like this:
Step 3 - Links, Images, Style and Scripts
You've already done the steps to build a simple webpage. And this can be called basic website that consist of 1 web page. But it doesn’t quite like it, isn’t it? It’s because usually we often visit website that has links.
Now, we're going to add simple link to the webpage. Links in webpage are interactive element that can be clicked to navigate users to subpage or external webpage.
Links in website usually placed in <a> tag.
<a href="https://google.com">Google.com</a>
We also need to add some graphic element on the webpage. For the aesthetic purpose, of course. Image element usually wrapped the <image> tag.
<img src="https://images.unsplash.com/photo-1545310834-cd6a8a0884b8?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" />
Be careful if you want to use large images in your website, as it needed more time to load the page.
<!DOCTYPE html>
<html>
<head>
<title>My First Website</title>
</head>
<body>
<h1>This is a heading<h1>
<p>And this is your paragraph. You can place your words and sentences here. That is why this is called paraghrapgh tag</p>
<a href="https://google.com">This is Link to Google.com</a>
<img src="https://images.unsplash.com/photo-1545310834-cd6a8a0884b8?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" />
</body>
</html>
Now it should look like a little bit like a website right? We can continue to add little bit more element to it.
Next, we need to add style to the <style> tag.
<style>
body {
background-color:black; // will make the web page background color black
}
h1,a {
color:orange; // will make the color of text heading, and links orange
}
p {
color:white; // will make the color of paragraph white
}
</style>
also in <script> tag
<script>
alert("welcome to my first website")
</script>
Now, you have a webpage that can be called a simple website with header, paragraph, links, image, running javascript to create welcome alert and styled the body to make it dark mode.
<!DOCTYPE html>
<html>
<head>
<title>My First Website</title>
<style>
body {
background-color:black;
}
h1,a {
color:orange;
}
p {
color:white;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>And this is your paragraph. You can place your words and sentences here. That is why this is called paragraph tag</p>
<a href="https://google.com">This is Link to Google.com</a>
<img src="https://images.unsplash.com/photo-1545310834-cd6a8a0884b8?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" />
<script>
alert("welcome to my first website")
</script>
</body>
</html>
And your extended website should look like this
And that’s about it. You can also experiment to add more tags like <video>, <object>, <iframe>, and more. If you have any feedback or anything, let me know in the comment.
Thanks for reading.
Top comments (2)
nice tutorial!
thank you!