Ata Ayobami Abimbola

CSC/20/2821
Department of Mathematical and Computer
Sciences,
University of Medical Sciences, Ondo state
WEB DESIGN November 14, 2024.

Supervisor
Yemi Okunlola(M.Sc)
 OUTLINE
 Brief History Of
Organization Of Attachment  A set of HTML code with
 Objectives of Organization and without the addition of
of Attachment CSS
 Organogram of the  Examples of codes to
Organization design web page with their
 Introduction to HTML outputs
 Structure of an HTML file  Introduction to Javascript
 Basic example of HTML  Javascript Data types
 Introduction to CSS  I.D Card Production
 Types of CSS  Conclusion
BRIEF HISTORY OF ORGANIZATION OF
ATTACHMENT
The OAU Computer Centre at Obafemi Awolowo University
(formerly the University of Ife) was founded in 1970. It is well-
regarded for its expertise in both software and hardware
engineering. On the software side, the centre develops
websites and applications for institutional use, including the
university’s e-portal and health center applications. These
tools aid in student registration, health information storage,
and other administrative tasks. The hardware division focuses
on repairing faculty computers and electronic devices across
campus. Additionally, the centre offers training to students
interested in software development, computer networking,
web design, computer graphics, and hardware repair.
 OBJECTIVES OF ORGANIZATION OF
ATTACHMENT
 The OAU Computer Centre provides enterprise resource solutions to
meet the ICT needs of all university departments, units, and centers.
 The OAU Computer Centre supports academic, scientific, and
technological research and learning by providing access to a vast
global database of electronic information.
 The OAU Computer Centre organizes and automates the university’s
information repository to ensure timely access to quality information.
 The OAU Computer Centre aims to elevate OAU, and Nigeria, to a
prestigious position in the global ICT landscape.
 The OAU Computer Centre serves as a software incubation hub,
producing advanced, robust, and efficient software solutions for OAU
and the broader country.
ORGANOGRAM OF THE ORGANIZATION OF
ATTACHMENT
 INTRODUCTION TO HTML
HTML stands for Hypertext Markup Language and is the standard
language for creating web pages. It is used to display content retrieved
over the internet, with HTML 5 being the latest version. HTML defines the
structure and content of web documents, using tags and attributes to
format text, embed images, create links, and build interactive elements.
It facilitates communication between web browsers and servers, making
it essential for web developers. HTML was invented in 1990 by Tim
Berners-Lee, a physicist at CERN, to create a simple way to share and
access documents online. Since its creation, HTML has evolved and
become the foundation of web development. HTML ensures that content
is displayed correctly on all browsers that conform to the standard,
making it accessible for a long time. Knowledge of HTML is necessary for
professional web developers, as it is a core element in web development
courses. It also allows document authors to apply formatting, structure,
and include images without difficulty.
STRUCTURE OF AN HTML FILE
A BASIC EXAMPLE OF AN HTML
CODE
OUTPUT
 Introduction to CSS

CSS (Cascading Style Sheets) is a language used to

efficiently design web pages by controlling their
appearance. It allows developers to define styles for HTML
elements, such as colors, fonts, spacing, and layout, using
rule sets and selectors. CSS offers extensive control over the
visual presentation of a webpage and simplifies the process
of managing layouts across multiple pages. It helps in
adjusting the design for different devices and screen sizes.
Overall, CSS streamlines web design and enhances the
customization of HTML documents.
 TYPES OF CSS
 INLINE CSS
An inline style may be used to apply a unique style for a single
HTML element. To use inline styles, add the style attribute to the
relevant element. The style attribute can contain any CSS property.
 INTERNAL CSS
An internal style sheet may be used if one single HTML page has a
unique style. The internal style is defined inside the <style>
element, inside the head section.
 EXTERNAL CSS
With an external style sheet, you can change the look of an entire
website by changing just one file. Each HTML page must include a
reference to the external style sheet file inside the <link> element,
inside the head section.
A set of HTML code with and without the
addition of CSS
WITHOUT CSS

<! DOCTYPE html>

<html>
<head>
<title>Simple Web Page</title>
</head>
<body>
<main>
<h1>HTML Page</h1>
<p>This is a basic web page.</p>
</main>
</body>

</html>
OUTPUT
WITH CSS
<!DOCTYPE html>
<html>

<head>
<title>Simple web page</title>
<style>
main {
width: 600px;
height: 200px;
padding: 10px;
background: beige;
}

h1 {
color: olivedrab;
border-bottom: 1px dotted darkgreen;
}

p{
font-family: sans-serif;
color: orange;
}
</style>
</head>

<body>
<main>
<h1>My first Page</h1>
<p>This is a basic web page.</p>
</main>
</body>
OUTPUT
 EXAMPLES OF CODES TO DESIGN WEB
PAGE WITH THEIR OUTPUT
CODE
OUTPUT
CODE
OUTPUT
INTRODUCTION TO JAVASCRIPT
JAVASCRIPT DATATYPES
I.D CARD PRODUCTION
AN IMAGE OF AN I.D CARD PRINTER
 CONCLUSION
This report provides a concise overview of my SIWES
program experience from August to October 2024. I
focused on key aspects to ensure relevance and
engagement, highlighting the valuable skills I gained.
These included web design using HTML, CSS, and
JavaScript, as well as the importance of soft skills like
communication and teamwork in the workplace. Although
time constraints limited further exploration, the
experience was highly beneficial, contributing
significantly to my personal and professional growth.
REFERENCES
THANK YOU FOR LISTENING