The Role Of HTML, CSS, and BOOTSTRAP In Web Development
What is Web Development ? Where do we use it.
The World Wide Web, commonly known as the Web, is an information system where documents and other web resources are identified by Uniform Resource Locators, Like httsp://www.google.com. This web is used for Tradingpurpose which means delivering the manufactured product to the End-user this trading became very easy and changed The today’s world where every webpage we are visiting is more attractive and user-friendly.
Web Development helps to create a webpage that feels the user attractive by using different Web Technologies. Like HTML, CSS and BOOTSTRAP and a lot more……
HTML
HTML Stands for Hypertext Markup Language is the standard markup language for documents designed to be displayed in a web browser.
HTML STRUCTURE :
< ! DOCTYPE html> → Describes the present version of the html.
<html>
<head>
→ This Content inside the head tag will be loaded first before reaching the body tag
</head>
<body>
→ The Content that is to be displayed on the webpage is written inside the body using Elements and tags.
</body>
<footer>
→ The Footer tag will be at the bottom of the webpage where copywrites are written.
</footer>
</html>
Some Self Closing Tags in Html :
<img src=”url”> → image tag
<br> → break tag
<hr> → Horizontal line
<input> → input tag
<link> → Linking
Advantages of HTML:
The first advantage is HTML is widely used. Every browser supports HTML language. Easy to learn and use.
Disadvantages of HTML:
Need to write a lot of code for making a simple webpage. Security features are not good at HTML. If we need to write a long code for making a webpage then it produces some complexity.
CSS
CSS stands for Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language like HTML.
Why do we need to use CSS? Consider your writing a book that contains 1000pages but all of a sudden you need to change the font style for only headers and give them a color. It is very difficult to change the given conditions for every page. CSS saves a lot of work. It can control the layout of multiple web pages all at once
CSS Structure :
In CSS class and id are used for styling class is indicated by . (dot)class name and id is indicated by # id-name
The padding property has four values which are used to make space inside the content
padding: 25px 50px 75px 100px; → one way doing in single line
top padding is 25px;
right padding is 50px;
bottom padding is 75px;
left padding is 100px;
The margin property has four values which are used to make space out-side the content
margin: 25px 50px 75px 100px; → one way doing in single line
top margin is 25px;
right margin is 50px;
bottom margin is 75px;
left margin is 100px;
Advantages of Cascading Style Sheet (CSS) :
Saves Time,Improves page loading speed,Device compatibility,Ability to Re-Position, Makes the Search Engine Better Crawl Your Web Pages .
Disadvantages of Cascading Style Sheet (CSS) :
Vulnerable,Confusion Due to Its Many Levels,Cross-Browser Issues.
BOOTSTRAP
Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites.
Go to bootstrap CDN → copy html link and paste inside the head tag of html that’s all now we can access all the frameworks in bootstrap
The main use of using the bootstrap is for responsiveness although we create a beautiful website using HTML and CSS they are not responsive in the smaller device or larger device it is difficult for a developer to make a survey over all the screens and write code for all the screens.
To overcome the problems Twitter created a bootstrap framework which is described with classes with reserved names for the classes
the Main classes are ROW and COLUMN
<div></div> we can split the screen into 12 columns and many rows which are enclosed in a container which a type of box.
The Bootstrap grid system has four classes:
- xs (for phones — screens less than 768px wide)
- sm (for tablets — screens equal to or greater than 768px wide)
- md (for small laptops — screens equal to or greater than 992px wide)
- lg (for laptops and desktops — screens equal to or greater than 1200px wide)
The Combination of HTML + CSS + BOOTSTRAP = PROFESSIONAL WEBSITE
Thank you,
