Creating a website with HTML is not difficult, but you will need some technical expertise for it. With some simple steps, you will learn the coding features. But first, it is important to know about HTML and CSS.
HTML (hypertext markup language) defines the content and structure of the web page, and it defines – where things go and how the structure is laid off. It states what is on the page in simple coding language.
CSS (cascading style sheets) helps to define the styling and overall presentation of the web page. Both HTML and CSS work together to create the final structure and design for the web page.
Page Contents
Steps to Code a Website Using HTML and CSS
1. Start with basics
The HTML tag is the main element of HTML, and you must know about it. It looks like – <b>hello</b>. The tag is the bold tag, which remains in the opening and closing of the codes. But there are many other tags you will have to work with while coding and designing page elements.
- To italicize the text, use <i> tag that is between the opening and closing format.
- The <p> tag indicates the para of the text.
- The <u> tag indicates the underline option=n in the tag
- The <h1> tag is the main header on the coding page and is an important part of the web page.
Apart from the simple tags, there are many complex ones like – item 1, item 2, and item 3. To work on these tags, it’s essential to understand tags before you begin the process.
2. Understand the document structure
Your HTML page is similar to the building blocks where you put the blocks on top of one another that ends up with a big structure. The HTML document structure is somewhat similar. You can use this code:
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>My first web page.</p>
</body>
</html>
Using the above code, paste it to your file and save the document as index.html to create a perfectly valid HTML page. The tags stand for:
To make things easier, you can install an HTML editor called Sublime Text.
3. Know about the CSS selectors
CSS works on different selectors as HTML tags. The selectors decide the appearance. For example:
p {
font-size: 18px;
}
Here the document has a font size of 18.
You can assign class to specific HTML tags – <p class=”normal-text”>. This text is going to be 18px. </p>.
Here, the text defines the elements in the class, and font size is an example of a CSS property. 18px is the value you assign to the property. There are many other CSS properties you can consider.
4. Use the CSS style sheet
A structural element has its order, and the order is crucial on a page. It dictates the final appearance and construction of the web page. CSS documents are referred as to style sheets.
A CSS stylesheet has a list of class definitions used in a corresponding HTML document. The order of the definition is not important. You can put a CSS style sheet together by defining each class. Moreover, test if the outcome in page design is what you are looking for. For this, downloading Bootstrap is important.
5. Download Bootstra
Bootstrap is an open-source toolkit that creates websites with CSS and HTML. It takes care of the structure of the CSS style sheet and HTML. It delivers a framework, which makes sure that your website is optimised.
With Bootstrap, you don’t need to start with scratch, you can directly go to the main part. You don’t have to worry about creating the early stages of an HTML website.
You can follow two paths in Bootstrap:
6. Pick your design
You can use a Bootstrap template while creating a website with CSS or HTML. To download the template, you can click the free download option and save a zip file on your computer.
Unzip the package and move all the contents to the main directory of the local server or the web hosting account. When you open the location in the web browser, you will see a stock version. But, you will need to learn how to use the template using HTML and CSS to create a good design.
7. Customise your website
Start by working on the homepage of your website first. When you open the index.html file in Bootstrap; in the Sublime Text, you will find the head section.
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>
<title>Creative – Start Bootstrap Theme</title>
<! – Theme CSS – Includes Bootstrap – >
<link href=”css/creative.min.css” rel=”stylesheet”>
</head>
You can easily modify the last declaration. You can use the non-shortened version of the CSS sheet. In the coding part, you will have to get into the detail.
8. Add Images and Content
Change the title in the head section and replace your text between the tags. You can use the code – <title>My HTML Site</title> – for it. You can customise other blocks on the page, which include different sections for navigation, about block, portfolio, contact block, footer, and call-to-action.
The best way to modify the pages is to go through the blocks one by one. You can move the sections around the page using the section tags.
9. Fine-tune the Colours
For changing colours of fonts, assign inline styling – <p style=”colour: #FF0000;”>Red text</p>. All the colours are represented by the values here.
You can assign colours via the CSS style sheet. Through this code – <p class=”red”>Red text</p> – you can assign colours via bootstrap.
To change the colour, you will have to find the tag that is responsible for the styling. Go to the style sheet and modify the class.
To change the font and size, you will need to see the find definition in the CSS:
font-family: “Merriweather”, Roboto, sans-serif;
font-size: 18px;
Load different fonts and set the font size to 18px.
You can place this definition in any CSS class. While changing colours in the bootstrap, look at the CSS style sheet.
10. Create added pages
You can build any number of sub-pages while creating an HTML or CSS website. Some common pages include – about page, contact page, portfolio, products, team, and policies.
In Short,
You can build a simple website with CSS and HTML. Start with learning the Bootstrap structure, check out case studies, etc. Bootstrap is the best path that lets you optimise the features of the website. You can also build a website with CSS with the above features.
Leave a Reply