University Web Design Report: HTML, CSS, and Bootstrap Framework

This report provides an overview of web design, focusing on the use of HTML, CSS, and the Bootstrap framework. It discusses the evolution of web development and the importance of responsive design. The report details the functionalities of HTML, CSS, and Bootstrap, including their respective roles in structuring, styling, and creating interactive web pages. It explores the structure of HTML documents, the use of CSS for visual presentation, and the advantages of the Bootstrap framework for building responsive websites. The report also covers the CSS layout and model, including the Box Model and the concept of CSS pre-processors. The conclusion summarizes the key aspects of web design and the importance of frameworks in simplifying the web design process.

Running head: WEB DESIGN: HTML, CSS AND BOOTSTRAP
Web Design: HTML, CSS and Bootstrap
Name of the Student
Name of the University
Author Note

1
WEB DESIGN: HTML, CSS AND BOOTSTRAP
Abstract
The web development has taken multiple turns towards the advancement of the internet and
websites from what it was earlier and what it has become. The main purpose of this report is
to study and research about the Web Design using the HTML language, CSS styling, and
Bootstrap framework. Along with this the availability of this technology and its related tools
is also analysed. The outcome of this research is to analyse the usage of HTML, CSS,
Bootstrap and the concept of responsive web layouts. The methods for this research include
Scholarly articles and books.

2
WEB DESIGN: HTML, CSS AND BOOTSTRAP
Table of Contents
Introduction................................................................................................................................3
Web Design Technologies.........................................................................................................3
HTML....................................................................................................................................3
CSS.........................................................................................................................................5
Bootstrap Framework.............................................................................................................6
Conclusion..................................................................................................................................7
References..................................................................................................................................9

3
WEB DESIGN: HTML, CSS AND BOOTSTRAP
Introduction
The Internet has become more popular and daily requirements of almost all the person
on the planet. Along with the internet, the viewing and features standard of a website has also
changed in recent years. The contents on internet can be seen on various websites whether it
can be a blog or multimedia website (Tate, 2018). Web development is the process of
building these websites. The website needed to be designed first by hand sketch, then the real
use of HTML, CSS, and JavaScript comes. The design and appearance of the webpage are
known as the frontend (Varsaluoma et al., 2015). This research report intends to discuss
about the overview of web designing with the usage of HTML, CSS, and Bootstrap.
Web Design Technologies
Web development is the process of developing all kinds off websites on the internet.
It includes designing, content development and client/server-based scripting and other
network security protocols. The designing part deals with the visual aspects of the website
whether it is static or dynamic (Choudhury, 2014). It is also known as the frontend of the
website, where each page on the website known as web pages. Web pages are constructed
using HTML (HyperText Mark-up Language), CSS (Cascading Style Sheets) and JavaScript
in frontend (Carlsson & Ko, 2015). The HTML provides the structure and CSS provides a
better appearance. This helps in improving user interaction easier and better. The webpage
development requires at least, a basic understanding of using HTML and CSS (Meloni,
2016).
HTML

4
WEB DESIGN: HTML, CSS AND BOOTSTRAP
HTML is called the backbone of the website as it provides the structure. It presents all
the World Wide Web’s content along with the information that is used by the browser. The
first appearance of HTML was in late 1991 by Tim Berners-Lee. It was then documented as
HTML Tags on the internet. The current version of HTML available is HTML 5 which is in
use since 2008. In 2012, HTML5 was created and recommended by a new team at World
Wide Web Consortium (W3C). Later in 2014, two ideas were included in HTML5 in terms of
the importance of cascading interactive elements and the requirement of audio and video tags
as the usage and accessing of multimedia was increased in its users (Gangadharan et al.,
2016). Also, the phone with the bigger screen was started to appear in the world and internet
access on the phone demanded more tags of multimedia. The New version of HTML5 has
better performance, drains less battery and better support for vector graphics for used images
in a web page. The images used as vector graphics are flexible and resizable without losing
the image quality. Drag and drop feature is also better supported in the new version of
HTML5 with improved video editing support (Juntunen, Jalonen & Luukkainen, 2013). The
HTML5 has a hierarchy of objects shown in figure 1.
Figure 1: Objects tree of HTML
Source: (w3schools.com)

5
WEB DESIGN: HTML, CSS AND BOOTSTRAP
The browser reads from the html document and shows these objects as per the
structure used in the document. As per the Figure 1, the objects are described below:
 <html> is basically the root element of HTML page and all the HTML coding is done
inside this tag.
 <head> tag contains all the main information of the document.
 <title> tag provides a title for the webpage.
 <body> tag shows all the content of the page whether it is text or media.
 <h1> tag shows heading.
 <a> tag is used to show any paragraph.
 “href” is actually used for referring a link for another page that is linked within the
tags.
CSS
CSS is a different language than HTML, however, used to present the HTML
structure as a better visual. Though the latest version of CSS is 4, the version 3 CSS3 is very
widely used styling for the webpages. The styling can be done on external stylesheet (CSS
file) or in the HTML document under the <style> tag. It is also found to be useful in
including jQuery.css for an effective change of background (Benson & Karger, 2013). It
helps in representing the HTML using different background colours, font colours, layout,
fonts style, animations, size, border, position and everything related to the visuals. The CSS
layout and model can be seen in Figure 2 below.

6
WEB DESIGN: HTML, CSS AND BOOTSTRAP
Figure 2: CSS layout
Source: (w3schools.com)

7
WEB DESIGN: HTML, CSS AND BOOTSTRAP
Figure 2 shows the layout that how can the different margin, border, padding and
content can be positioned within its boundary. The layout model is called CSS Box Model.
CSS provides different two tools to its developers named CSS Framework and CSS pre-
processors. The CSS framework is consisting of multiple CSS classes that are linked with the
HTML objects. It is an easier way to implement, as the classes and files are arranged in the
folders of the CSS package. There are several types of frameworks are available on the
internet which vary in the speed and easiness of handling the frameworks. However, the use
of frameworks has complicated things after the advancements and frequency of the demands
(Jain, 2015). One another hand, the CSS pre-processor is way faster to implement than the
framework. It uses the computer compiler to load the CSS code and transforming it into the
byte codes. The pre-processed CSS loads first in the browser then after compilation.
Currently, two types of pre-processor are present, named SASS (Syntactically Awesome
Style Sheets) and LESS (Write Less do more Language. The SASS has additional features of
using nests, operators, inheritance, and variables (Mazinanian & Tsantalis, 2016). It is
transformed into standard CSS to implement in the browser. Apart from that, the LESS
follows the mechanism of using variables, functions, mixins, operators etc. It is
transformable into standard CSS with the help of JavaScript.
Bootstrap Framework

8
WEB DESIGN: HTML, CSS AND BOOTSTRAP
The Bootstrap framework is a front-end development framework of HTML, CSS, and
JavaScript. In 2011, Twitter developers introduced Bootstrap first for the mobile web as an
open-source framework. It gave the first concept and idea of responsive designs on web
pages. Responsive designs mean that the size and scale of the webpage will get adapted by
the screen size of that device where the web page will be opened. In the present, Bootstrap is
a very widely and effectively used powerful framework (Hjorth, 2017). That time, the
mobiles were with smaller screen sizes and bootstrap helped the using websites on mobile.
The latest version of this framework is Bootstrap 4. It is supported by almost all browsers
except the IE 9 (Internet Explorer). For IE9, the Bootstrap 3 is used, where it divides the
layout of the web pages in a 12-column grid system that is responsive in nature. It is loaded
with the many components like styles and JS plugins. However, the customized Bootstrap is
also available as open-source that can suit a particular website development in terms of the
variables, components and JS plugins (Hassan, Abbasi & Zeng, 2013). The biggest advantage
of using Bootstrap that it provides a set of free tools to develop responsive websites and web
interfaces. It is one framework and all device approach.
Figure 3: Bootstrap Directory
Source: created by author

9
WEB DESIGN: HTML, CSS AND BOOTSTRAP
Conclusion
Framework for frontend is surely a powerful and simple web designing process. As it
contains the multiple support of languages like HTML, CSS, and JavaScript which helps in
making the interaction simpler. Along with the Bootstrap framework, Foundation is also a
popular framework. In this research, the usage of the HTML, CSS, and Bootstrap is discussed
in the field of Web Designing. Along with this, the linkage and dependency of these three
models are identified. The different versions, variety of tools and frameworks are also
successfully identified. In the later sections of the CSS, the idea of CSS pre-processing is also
discussed with the CSS which is used as the file or in the same file of HTML document.

10
WEB DESIGN: HTML, CSS AND BOOTSTRAP
References
Benson, E. O., & Karger, D. R. (2013, May). Cascading tree sheets and recombinant HTML:
better encapsulation and retargeting of web content. In Proceedings of the 22nd
international conference on World Wide Web (pp. 107-118). ACM.
Carlsson, D., & Ko, D. (2015). U.S. Patent No. 8,959,427. Washington, DC: U.S. Patent and
Trademark Office.
Choudhury, N. (2014). World wide web and its journey from web 1.0 to web
4.0. International Journal of Computer Science and Information Technologies, 5(6),
8096-8100.
Gangadharan, B. P., Strand, T., Sun, X., Zhang, S., Selitser, B., Zhu, H. F., & Loganathan, K.
(2016). U.S. Patent No. 9,331,967. Washington, DC: U.S. Patent and Trademark
Office.
Hassan, A., Abbasi, A., & Zeng, D. (2013, September). Twitter sentiment analysis: A
bootstrap ensemble framework. In 2013 International Conference on Social
Computing (pp. 357-364). IEEE.
Hjorth, J. U. (2017). Computer intensive statistical methods: Validation, model selection, and
bootstrap. Routledge.
Jain, N. (2015). Review of different responsive css front-end frameworks. Journal of Global
Research in Computer Science, 5(11), 5-10.
Juntunen, A., Jalonen, E., & Luukkainen, S. (2013, January). HTML 5 in Mobile Devices--
Drivers and Restraints. In 2013 46th Hawaii International Conference on System
Sciences (pp. 1053-1062). IEEE.
Mazinanian, D., & Tsantalis, N. (2016, August). Migrating cascading style sheets to
preprocessors by introducing mixins. In Proceedings of the 31st IEEE/ACM
International Conference on Automated Software Engineering (pp. 672-683). ACM.
Meloni, J. C. (2016). Sams teach yourself HTML, CSS, and JavaScript all in one. Pearson
Education India.
Tate, M. A. (2018). Web wisdom: How to evaluate and create information quality on the
Web. CRC Press.

11
WEB DESIGN: HTML, CSS AND BOOTSTRAP
Varsaluoma, J., Väätäjä, H., Kaasinen, E., Karvonen, H., & Lu, Y. (2015, December). The
fuzzy front end of experience design: Eliciting and communicating experience goals.
In Proceedings of the Annual Meeting of the Australian Special Interest Group for
Computer Human Interaction (pp. 324-332). ACM.