A step-by-step guide to creating a webpage using HTML & CSS.
No need of prior experience of coding…
Before we began I like to share that I am a BTech in Mechanical Engineering and I had built my webpage. So, if I can do it you can surely do it. So let’s begin.
HTML stands for HyperText Markup Language. It is a language that is interpreted by the browser and it tells the browser what to display and how to display. CSS stands for Cascading Style Sheet. It’s a style sheet language that determines how the elements/contents in the page are looked/shown.
Steps for building a webpage:
- Finding the correct code editor.
- Creating a folder to save all files in one place.
- A little coding.
Step 1. Finding the correct text editor:
To create a web page there are multiple code editors available in the market, we can use any of the editors like,
i. Notepad++ for Windows.
ii. Visual Studio Code for IOS.
iii. Subline Text for both Windows and IOS.
And the list goes on. The best part of these editors is, they are easy to install and free to use. I’ll be using the Notepad++ code editor for building the webpage you can use whichever you are comfortable with.
Step 2. Creating a folder to save all files in one place:
Create a folder named it Webpage and save it to desktop. Create one more folder inside the webpage by the name CSS for styling.
Next Open code editor (As I am using Note++ I’ll be sharing with you the screenshot of Notepad++). Create two files by the name of index.html and style.css and save as type: all types.
Save your index.html file in your Webpage folder and style.css file inside the css folder (Desktop>Webpage>CSS).
Step 3. A little coding:
Basic Markup of Every HTML page are
<!DOCTYPE html>
<html>
<head>
<title>This is a title</title>
</head>
<body>
<div>
<p>Hello world!</p>
</div>
</body>
</html>
Congratulations you have created your first webpage without any prior coding experience.
Now let’s get a little deeper insight:
The <!DOCTYPE html> declaration defines that this document is an HTML5 document
Tags: <opening tag> content </closing tag>
The <html> element is the root element of an HTML page
The <head> element contains meta information about the HTML page
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> element specifies a title for the HTML page (which is shown in the browser’s title bar or in the page’s tab)
The <link> element connects your style.css file with index.html file.
The <body> element defines the document’s body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
The <header> element represents a container for introductory content or a set of navigational links.
The <div> element is often used as a container for other HTML elements.
The <h1> element defines a large heading. HTML headings are defined with the <h1>to <h6>tags.
The class attribute is often used to point to a class name in a style sheet.
The <ul> tag defines an unordered (bulleted) list.
Use the <ul> tag together with the <li> tag to create unordered lists.
The <a> element defines a hyperlink, the href attribute specifies the URL of the page the link goes to.
The <p> element defines a paragraph.
Styling: With CSS, you can control the color, font, the size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors are to be used, different displays for different devices and screen sizes, and much more!
CSS/Styling are of three types that can be added to HTML documents:
- Inline — by using the style attribute inside HTML elements
- Internal — by using a <style> element in the <head> section
- External — by using an <link> element to link to an external CSS file
We are using an External type.
In CSS, the term “box model” is used when talking about design and layout. The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and content.
- Content — The content of the box, where text and images appear
- Padding — Clears an area around the content. The padding is transparent
- Border — A border that goes around the padding and content
- Margin — Clears an area outside the border. The margin is transparent.
All the properties that are used inside the curly bracket {} are defined for the particular element.
Properties such as font size used in the element “title h1” and “a” has different size for a different element.
.title h1{
font-size: 100px;
}
a{
font-size: 25px;
}
That’s all for today hope you like my A step by step guide to creating a website using HTML & CSS. If you still find it difficult in coding there are several free HTML templates available for you to use. Such as HTML5.
Good luck to all, and if you found the article helpful, plz share with your friends and colleagues. Thankyou \^_^/
