This definitely will turn out to be the final post you need to read if you are about to start designing a website. You can look forward to walking through the basic web structure using only HTML—acting as the skeleton of any website. Let’s get started right away with an example:
Imagine you want to buy a car. The very first step you take is to go to the showroom. You will see the car, and the first impression is not about how the car works but its look. Now, this look of the car can be compared to web design, and how it works can be compared to web development. The value of the car is not that great if it doesn’t look sleek. Similarly, without an appealing design, a website is of no value to anyone.
If we think of a car as analogous to web design, then we might think of HTML as the structure or the skeleton of that car. The elements of HTML can thus be visualized as car parts which, in their proper synchronization, provide structure to your web page. Once that structure is in place through HTML, we then use CSS to style it and make it look good.
For now, let us consider the HTML structure. As we grow in using them, we shall see how CSS is used to enhance these HTML structures into beautiful, functional web pages.
Different layouts of html for easily understand :
There are different type of ways that you can create structure according to layout . we will show you how we can create easily html structure.
Layout 1: – Simple layout. in this layout there is one man box call outer div. we will add six column or innerbox on it.
We just designed it for layout only that you can easily understand. we will apply the css after completion of html. we need only understand how we can create a box and show 6 box in it having equal width or partion. below are the image which are the image and html.
Layout Image: –
Please check html structure below-
Layout 2: It will demonstrate how to correctly divide a layout. We have a main box featuring three columns:
First Column: This column has two rows in it: Row 1 and Row 2.
Second Column: This is only one box.
Third Column: This column also has two divisions that are depicted by two rows.We will also look at how these boxes can be structured in HTML, simply, so that the layout is mobile-friendly. Recall that the content order needs to, of necessity, follow a logical sequence from 1 to 5 which a mobile device will view first. A structure should be created with this numbering and content priority in mind in order to create an optimal mobile experience.
Layout Image: –
Please check html structure below-
Dear readers, the very next post or lesson is going to be really valuable; make sure you never miss it. Here we are now going to learn about classes and IDs and how to apply them in HTML. This is a very important part of understanding HTML layout that helps one in getting hold of the basics of web design.
– In this section, we will look at how to structure HTML using classes and IDs, and we will also see some of the many different HTML layouts available. We will present pictures of these structures and indicate how to recreate them in HTML, so it’s going to be a fun and integral topic.
– HTML structure— something that gives the skeleton for your web design. Once you get how to hold a solid structure, it would be much easier to work out CSS and enhance your designs. Get ready for lifting off the working level of your skills!
Layout 1
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Basic HTML STRCURE</title>
</head>
<body>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
Layout 2
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Basic HTML STRCURE</title>
</head>
<body>
<div>
<div>
<div>
1
</div>
<div>
2
</div>
</div>
<div>
<div>
3
</div>
</div>
<div>
<div>
4
</div>
<div>
5
</div>
</div>
</div>
</body>
</html>