Experiment 1: Build a website with content related to computer science and technology.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Computer Science</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<h1>Computer Science And Technology</h1>
</div>
<nav>
<ul>
<li><a href="#1">April 2023 programming language leaderboard</a></li>
<li><a href="#2">Subdisciplines</a></li>
<li><a href="#3">What's Computer Science</a></li>
<li><a href="#4">Development of Computer Science</a></li>
</ul>
</nav>
<div class="headimg">
<img src="images/Big-Tent-Computer-Science.jpg" alt="Big-Tent">
</div>
<container>
<div class="aside1">
<p id="2" class="styleleft">Subdisciplines</p>
<div class="bigbox">
<div class="titlebox">
<p>Algorithms and Complexity<br>Algorithms and complexity</p>
<br>
<p>An algorithm is a specific procedure for solving a well-defined computational problem. The development and analysis of algorithms is fundamental to all aspects of computer science: artificial intelligence, databases, graphics, networking, operating systems, security, and more. Algorithm development is more than just programming. It requires an understanding of the alternatives available to solve a computing problem, including the hardware, network, programming language, and performance constraints that come with any particular solution. It also requires an understanding of what it means for an algorithm to be "correct" in that it solves the problem at hand perfectly efficiently.</p>
</div>
</div>
<div class="bigbox">
<div class="titlebox">
<p>Architecture and Organization<br>Architecture and organization</p>
<br>
<p>Computer architecture involves the design of computers, data storage devices, and network components that store and run programs, transmit data, and drive interactions between computers, across networks, and with users. Computer architects use parallelism and various memory organization strategies to design computing systems with very high performance. Computer architecture requires a strong communication between computer scientists and computer engineers, since both are fundamentally concerned with hardware design.</p>
</div>
</div>
<div class="bigbox">
<div class="titlebox">
<p>Computing Science<br>Computational science</p>
<br>
<p>Computational science applies computer simulation, scientific visualization, mathematical modeling, algorithms, data structures, networking, database design, symbolic computing, and high-performance computing to help advance the goals of each discipline. These disciplines include biology, chemistry, fluid dynamics, archaeology, finance, sociology and forensic science. Computing science is developing rapidly, especially because the amount of data transmitted by scientific instruments has grown dramatically. This phenomenon is known as the "big data" problem.</p>
</div>
</div>
<div class="bigbox">
<div class="titlebox">
<p>Graphics and Visual Computing<br>Graphics and visual computing</p>
<br>
<p>Graphics and visual computing is the field that deals with the display and control of images on a computer screen. The field encompasses the efficient implementation of four interrelated computing tasks: rendering, modeling, animation, and visualization. Graphics techniques combine principles of linear algebra, numerical integration, computational geometry, specialized hardware, file formats, and graphical user interfaces (GUIs) to accomplish these complex tasks.</p>
</div>
</div>
<div class="bigbox">
<div class="titlebox">
<p>human-computer interaction<br>Human-computer interaction</p>
<br>
<p>Human-computer interaction (HCI) involves designing effective interactions between users and computers and the construction of interfaces that support such interactions. HCI occurs at interfaces that include both software and hardware. User interface design affects the lifecycle of software and should therefore be done early in the design process. Because user interfaces must adapt to a variety of user styles and functions, HCI research draws on several disciplines, including psychology, sociology, anthropology, and engineering. In the 1960s, user interfaces consisted of computer consoles that allowed the operator to directly type in commands that could be executed immediately or sometime in the future. With the advent of more user-friendly personal computers in the 1980s, user interfaces became more sophisticated so users could "point and click" to send commands to the operating system.</p>
</div>
</div>
<div class="bigbox">
<div class="titlebox">
<p>information management<br>Information management</p>
<br>
<p>Information management (IM) is primarily concerned with the capture, digitization, representation, organization, transformation and presentation of information. Since a computer's main memory provides only temporary storage, computers are equipped with secondary disk storage devices that store data permanently. These devices are characterized by a much higher capacity than main memory, but slower read/write (access) speeds. Data stored on disk must be read into main memory before it can be processed. Therefore, a major goal of IM systems is to develop efficient algorithms to store and retrieve specific data for processing.</p>
</div>
</div>
<div class="bigbox">
<div class="titlebox">
<p>smart system<br>Intelligent systems</p>
<br>
<p>Artificial intelligence (AI) is a field of study that dates back to the beginnings of computer science. The idea of building a machine that can perform tasks thought to require human intelligence is appealing. Tasks studied from this perspective include game playing, language translation, natural language understanding, fault diagnosis, robotics, and providing expert advice.</p>
</div>
</div>
<div class="bigbox">
<div class="titlebox">
<p>network and communication<br>Networking and communication</p>
<br>
<p>The field of networking and communications includes the analysis, design, implementation, and use of local, wide-area, and mobile networks that link computers together. The Internet itself is a network that enables almost all computers in the world to communicate.</p>
</div>
</div>
<div class="bigbox">
<div class="titlebox">
<p>operating system<br>Operating systems</p>
<br>
<p>An operating system is a collection of specialized software that sits between a computer's hardware architecture and its applications. It performs many basic activities such as file system management, process scheduling, memory allocation, network interface, and resource sharing among computer users. Operating systems have grown in complexity over time, starting with the earliest computers in the 1960s.</p>
</div>
</div>
<div class="bigbox">
<div class="titlebox">
<p>Parallel and Distributed Computing<br>Parallel and distributed computing</p>
<br>
<p>The availability of big data and the simultaneous growth in the number of simultaneous users on the Internet put particular pressure on the need to "parallelize" or perform computing tasks simultaneously. Parallel and distributed computing occurs in many different subject areas of computer science, including algorithms, computer architecture, networking, operating systems, and software engineering. In the early 2000s, there was an explosion of multiprocessor designs and other strategies for running complex applications faster. Parallel and distributed computing builds on fundamental system concepts such as concurrency, mutual exclusion, consistency of state/memory operations, message passing, and shared memory models.</p>
</div>
</div>
<div class="bigbox">
<div class="titlebox">
<p>platform-based development<br>Platform-based development</p>
<br>
<p>Platform-based development involves the design and development of applications for a specific type of computer and operating system ("Platform"). Platform-based development takes into account system-specific characteristics, such as those found in web programming, multimedia development, mobile application development, and robotics. Platforms such as the Internet or Android tablets enable students to learn in an environment constrained by specific hardware, application programming interfaces (APIs), and special services. These environments are very different from "generic" programming and thus require separate research and development efforts.</p>
</div>
</div>
<div class="bigbox">
<div class="titlebox">
<p>Programming language<br>Programming languages</p>
<br>
<p>A programming language is a language in which programmers implement software to run on a computer. The earliest programming language was assembly language, not too far off from the binary-coded instructions that a computer executes directly. By the mid-1950s, programmers were using high-level languages.</p>
</div>
</div>
<div class="bigbox">
<div class="titlebox">
<p>Safety and Information Assurance<br>Security and information assurance</p>
<br>
<p>Security and information assurance refers to the policy and technical elements that protect information systems by ensuring their availability, integrity, authentication, and appropriate confidentiality. Information security concepts arise in many areas of computer science, including operating systems, computer networks, databases, and software.</p>
</div>
</div>
<div class="bigbox">
<div class="titlebox">
<p>software engineering<br>Software engineering</p>
<br>
<p>Software engineering is a discipline that involves the application of theory, knowledge, and practice to build reliable software systems that meet the computing requirements of customers and users. It is suitable for small, medium and large computing systems and organizations. Software engineering uses engineering methods, processes, techniques and measurements. Software development, whether done by individuals or teams, requires choosing the most appropriate tools, methods, and methods for a given environment.</p>
</div>
</div>
</div>
<aside>
<br>
<br>
<div id="3">
<h2>What is computer science? </h2>
<p><strong>Computer Science</strong> The study of computers and computing, including their theoretical and algorithmic foundations, hardware and software, and their use in processing information. Computer science disciplines include the study of algorithms and data structures, computer and network design, modeling data and information processes, and artificial intelligence. Computer science draws some of its foundations from mathematics and engineering, thus incorporating techniques from fields such as queuing theory, probability and statistics, and electronic circuit design. Computer science also makes heavy use of hypothesis testing and experimentation in the process of conceptualizing, designing, measuring, and improving new algorithms, information structures, and computer architectures.
<img src="images/Xerox-Alto-icons-mouse-graphical-user-interface.webp" alt="Xa">
<p>Computer science is considered part of five separate but interrelated families of disciplines: computer engineering, computer science, information systems, information technology, and software engineering. This family has come to be known collectively as the disciplines of computing. These five disciplines are related because computing is their object of study, but separate because each has its own research perspective and curricular focus. (Since 1991, the Association for Computing Machinery [ACM], the IEEE Computer Society [IEEE-CS], and the Association for Information Systems [AIS] have collaborated to develop and update taxonomies for these five interrelated disciplines and for use by educational institutions worldwide for their undergraduate , a guide to graduate and research programs.</p>
<p>The major subfields of computer science include the traditional study of computer architecture, programming languages, and software development. However, they also include computational science (using algorithmic techniques to model scientific data), graphics and visualization, human-computer interaction, databases and information systems, networking, and social and professional issues specific to the practice of computer science. It is obvious that activities in some of these subfields overlap with other modern fields, such as bioinformatics and computational chemistry. These overlaps are the result of computer scientists' tendency to identify and act on the many interdisciplinary connections in their field.
</p>
</div>
<div id="4">
<h2>The development of computer science</h2>
<p><strong>Computer science</strong> emerged as a discipline in its own right in the early 1960s, even though the electronic digital computer it studies was invented some two decades earlier. Computer science has its roots mainly in related fields of mathematics, electrical engineering, physics, and management information systems. Mathematics is the source of two key concepts in the development of computers - the idea that all information can be represented as a sequence of zeros and ones and the abstraction of a "stored program". In the binary number system, numbers are represented by sequences of the binary digits 0 and 1 in the same way that numbers in the familiar decimal system are represented using the digits 0 through 9. The relative ease with which two states (e.g., high voltage and low voltage) can be achieved in electrical and electronic devices has naturally led to the binary digit, or bit, being the basic unit of data storage and transmission in computer systems.</p>
<img src="images/Moore's Law. webp" alt="Moore's Law">
<p>The <strong>1970s and 80s</strong> saw the advent of powerful computer graphics devices for scientific modeling and other visual activities. (Computerized graphics devices were introduced in the early 1950s, displaying crude images on paper drawings and cathode ray tube [CRT] screens. Expensive hardware and limited software availability kept the field going until the early 1980s, Computer memory required for bitmap graphics (where images are made up of small rectangular pixels) became more affordable at the time. Bitmap technology, coupled with the development of high-resolution display screens and graphics standards, made software less dependent on the machine, resulting in led to the explosive growth of the field.Support for all this activity evolved into the field of computer science known as graphics and visual computing.</p>
<p>Three developments in computing in the <strong>early 21st century</strong>-mobile computing, client-server computing, and computer hacking-led to the emergence of three new fields in computer science: platform-based development, parallelism, and distribution computing and security and information assurance. Platform-based development is the study of the special needs of mobile devices, their operating systems, and applications. Parallel and distributed computing involves the development of architectures and programming languages that support the development of algorithms whose components can run simultaneously and asynchronously (rather than sequentially) to better utilize time and space. Security and information assurance involves the design of computing systems and software to protect the integrity and security of data, and the privacy of individuals characterized by that data.
Finally, computer science has been particularly concerned throughout its history with the unique societal impact that has accompanied computer science research and technological advancement. For example, with the advent of the Internet in the 1980s, software developers needed to address important issues related to information security, individual privacy, and system reliability. Furthermore, the question of whether computer software constitutes intellectual property rights and the related question "who owns it?" has created an entirely new area of law, namely, licensing and licensing standards applicable to software and related artifacts. These and other questions form the basis of social and professional problems in computer science, and they arise in nearly every other field mentioned above.</p>
</div>
</aside>
<div class="aside2">
<div id="1" class="box">
<h3>2023 Programming Language Ranking</h3>
<br>
<div class="box2">
<div class="rank">
<ul>
<li>Python</li>
<li>C</li>
<li>Java</li>
<li>C++</li>
</ul>
</div>
</div>
</div>
<div class="box">
<h3>Who is the most famous computer scientist? </h3>
<br>
<div class="box2">
<img src="images/Alan-M-Turing-1951.webp" alt="Turing">
<p>The most influential computer scientists include Alan Turing, World War II codebreaker, often considered the "father of modern computing"; Tim Berners-Lee, inventor of the World Wide Web; John McCarthy, author of the programming language LISP Inventor and artificial intelligence pioneer; Grace Hopper, U.S. Navy officer and key figure in the development of early computers such as the UNIVAC I, as well as the development of computer language compilers.</p>
</div>
</div>
<div class="box">
<h3>What can you do with computer science? </h3>
<br>
<div class="box2">
<p>Computer science is applied across a wide range of disciplines, including simulation modeling such as climate change and the effects of the Ebola virus, creating art and visualizations through graphic rendering, and simulating human-machine interfaces through artificial intelligence and machine learning.</p>
</div>
</div>
<div class="box">
<h3>How to study computer science? </h3>
<br>
<div class="box2">
<p>Many universities around the world offer degrees that teach students the fundamentals of computer science theory and the application of computer programming. Additionally, the availability of online resources and courses allows many to teach themselves the more practical aspects of computer science (such as coding, video game development, and application design).</p>
</div>
</div>
</div>
</container>
<footer>
<ul>
<li>Contact with us!!!</li>
<li><a href="http://127.0.0.1:5500/index.html">Back to top</a></li>
</ul>
</footer>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
.container{
margin: 0 auto;
}
container {
display: flex;
flex-direction: row;
align-items: stretch;
}
.header{
padding: 20px;
height: 100px;
font-size: 20px;
line-height: 100px;
margin-bottom: 10px;
background-image: url(images/computer.png);
background-size: cover;
}
.headimg img{
position: absolute;
top: 50px;
right: 15px;
width: 300px;
height: 250px;
}
h1 {
color: aliceblue;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
h3{
font-size: 15px;
color: blue;
}
nav li {
display: inline-block;
padding: 10px;
}
nav a {
text-decoration: none;
}
nav a:hover {
color: gray;
text-decoration: underline;
}
.styleleft{
font-size: 18px;
font-weight: bold;
}
div li {
padding: 12px;
}
.aside1{
float: left;
width: 15%;
margin: 32px 10px 10px 10px;
padding: 10px 5px 10px 10px;
list-style-position: inside;
font-size: 15px;
line-height: 20px;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
background-color: rgb(80, 65, 169);
color: white;
box-shadow: 0 0 50px rgb(255, 255, 255) inset;
}
/* left column hover text display */
.bigbox{
margin-top: 25px;
width: 100%;
height: 43px;
overflow: hidden;
}
.bigbox:hover{
height: auto;
}
aside {
float: left;
line-height: 2em;
width: 55%;
margin: 0 20px 5px 0;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
aside img{
float: right;
width: 280px;
height: 330px;
}
aside p,.aside2 p{
text-indent: 2em;
}
strong{
font-size: 21px;
}
.aside2{
margin: 20px 10px 10px 5px;
float: right;
width: 20%;
position: relative;
top: 150px;
right: -120px;
}
/* ranking */
.rank{
line-height: 2em;
font-size: 15px;
font-weight: bold;
border-radius: 10px 10px;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
list-style-position: inside;
}
.rank li:nth-child(1){
list-style-image: url(images/Python.png);
}
.rank li:nth-child(2){
list-style-image: url(images/C.png);
}
.rank li:nth-child(3){
list-style-image: url(images/Java.png);
}
.rank li:nth-child(4){
list-style-image: url(images/C++.png);
}
/* aside2 design */
.box{
position: relative;
right: 50px;
padding: 5px;
margin-bottom: 50px;
}
.aside2.box{
border-radius: 10px 10px;
position: relative;
flex: 0 0 20%;
background-color: rgb(156, 71, 235);
}
.aside2 .box h3{
text-decoration: none;
color: aliceblue;
background-color: rgba(156, 71, 235, 0.623);
}
.aside2.box:hover{
box-shadow: 5px 5px 10px #000;
transition: 0.5s;
transform: translate(-80px,0) scale(1.2,1.2);
}
.aside2 .box2 p{
color: antiquewhite;
}
.box img{
width: 100px;
height: 150px;
float: right;
}
/* Footer */
footer{
clear: both;
font-size: 15px;
height: 50px;
background-color: rgb(112, 10, 207);
color: aliceblue;
background-image: url(images/computer.png);
background-size: cover;
}
footer li{
display: inline-block;
margin: 0 auto;
line-height: 30px;
}
footer a {
color: white;
text-decoration: none;
}
footer a:hover{
color: gray;
text-decoration: underline;
}
The images folder is called “images”
