Scribd
Upload
36 views14 pages

Exercise 2 Webdev

The document discusses different major courses in information and communications technology (ICT). It provides descriptions of several courses including computer programming 1 & 2, 2D animation, illustration drawing, computer servicing systems, and web development. For each course, it lists key topics covered and includes images and buttons to links to additional pages for more details. The document uses CSS for formatting and styling with a focus on fonts, colors, backgrounds, positioning and layout.

Uploaded by

Rinalyn Chris Mendoza
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
36 views14 pages

Exercise 2 Webdev

The document discusses different major courses in information and communications technology (ICT). It provides descriptions of several courses including computer programming 1 & 2, 2D animation, illustration drawing, computer servicing systems, and web development. For each course, it lists key topics covered and includes images and buttons to links to additional pages for more details. The document uses CSS for formatting and styling with a focus on fonts, colors, backgrounds, positioning and layout.

Uploaded by

Rinalyn Chris Mendoza
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

RINALYN CHRUS L.

MENDOZA

<!DOCTYPE HTML>

<title>ICT COURSES</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="page1.css">

<head>

<h1><br><br><br><br>Different Major in ICT</h1>

<div class="product-gallery">

<div class="product-item">

</head>
<body>

<nav>

<a href="Homme.html">

<button>Home</button></a>

<a href="Aboht.html">

<button>About</button></a>

<a href="Contact.html">

<button>Contact</button></a>

</nav>

<h2>Welcome!</h2>

<h3>We're dedicated to making a difference. Join us in our mission to create a brighter future. </h3>

<ul>

<li><b>Enjoy Exploring</li> </b>

<li><b>Have fun and learn</li>

<li><b>Take your time</li></b>

</ul>

</div>
<div class="gallery">

<a target="_blank" href="programming1.jpg">

<img src="programming1.jpg" width="500" height="300">

</a>

<div class="desc">Computer Programming 1</div></div>

<div class="gallery">

<a target="_blank" href="programming2.jpg">

<img src="programming2.jpg" alt="prpgram" width="500" height="300">

</a>

<div class="desc">Computer Programming 2</div></div>

<div class="gallery">

<a target="_blank" href="animation.jpg">

<img src="animation.jpg" alt="2D" width="500" height="300">

</a>

<div class="desc">2D Animation</div>

</div>

<div class="gallery">

<a target="_blank" href="illustration.jpg">

<img src="illustration.jpg" alt="drawing" width="500" height="300">

</a>

<div class="desc">Illustration Drawing</div>

</div>

<div class="gallery">

<a target="_blank" href="css.jpg">

<img src="css.jpg" alt="2D" width="500" height="300">

</a>

<div class="desc">Computer Servicing System</div></div>

<div class="gallery">
<a target="_blank" href="webdev.jpg">

<img src="webdev.jpg" alt="Web" width="406" height="318">

</a>

<div class="desc">Web Development</div></div>

<a href="Department of Information and Communications Technology - DICT


https://m.facebook.com/DICTgovph/">

<button>Facebook</button></a>

<a href="https://youtu.be/yjUTx4SG4s8?si=NlCzXzNB4RRVOak6">

<button>Youtube</button></a>

<div class="container">

<a href="contact.html">

<button>Contact</button></a>

</div>

<br>

<br>

<div class="container">

<a href="Exam.html">

<button class="btn btn-primary btn-lg">NEXT PAGE</button>

</a>

</div>

<br>

<p>Follow the link below to download our portfolio. Contact us at [email protected] for a free
consultation. We look forward to hearing from you!</p>
</body>

</html>

<!DOCTYPE HTML>

<title>ICT COURSES</title>

<link rel="stylesheet" href="act2.css">

<h1><br>Different Major in ICT<br></h1>

<br>

<div class="container">

<a href="Wbpage.html">

<button class="btn btn-primary btn-lg">BACK</button>

</a>

</div>

<img src="prg1.jpg" width="425" height="300">

<h2>Computer Programming 1</h2>

<<h3>About</h3>

<p>A technological process for telling a computer which tasks to perform in order to solve
problems. </p>
<ul>

<li>computer software</li>

<li>program design and development</li>

<li>practical experience in programming</li>

</ul>

<br>

<div class="container">

<a href="prg1.html">

<button class="btn btn-primary btn-lg">Click Here</button>

</a>

</div>

<img src="prg2.jpg" alt="prpgram" width="425" height="300">

<h2>Computer Programming 2</h2>

<h3>About</h3>

<p>about designing and coding complex and efficient programs.</p>

<ul>

<li>Barrays, stacks, queues, linked lists, </li>

<li>explores and builds skills in C++ and Java. </li>

<li>Key object-oriented computational techniques</li>

</ul>

<br>

<div class="container">

<a href="Prg2.html">

<button class="btn btn-primary btn-lg">Click Here</button>

</a>

</div>

<img src="ani.jpg" alt="2D" width="425" height="300">

<h2>2D Animation</h2>

<h3>About </h3>
<p>process of creating that illusion of movement for characters and objects within a two-dimensional
space. </p>

<ul>

<li>Character animation</li>

<li>Stop Motion</li>

<li>Computer animation</li>

</ul>

<br>

<div class="container">

<a href="Ani.html">

<button class="btn btn-primary btn-lg">Click Here</button>

</a>

</div>

<img src="illu.jpg" alt="drawing" width="500" height="300">

<h3>Illustration Drawing</h3>

<h2>About</h2>

<p>Drawing is a visual expression used to convey your own thoughts and feelings towards a subject
whereas illustration is a tool of visual</p>

<ul>

<li>Traditional Drawing procedures</li>

<li>Art Drawings Sketches ·</li>

<li>Tools in Draeing</li>

</ul>

<br>

<div class="container">

<a href="Illu.html">

<button class="btn btn-primary btn-lg">Click Here</button>

</a>

</div>
<img src="css2.jpg" alt="2D" width="425" height="300">

<h3>Computer Servicing System</h3>

<h2>About</h2>

<p>prepare you on how to deal with problems you may encounter when servicing Personal
Computers. </p>

<ul>

<li>Installing and Configuring Computer Systems</li>

<li>Setting Up Computer Servers.</li>

<li>Setting Up Computer Networks</li>

</ul>

<br>

<div class="container">

<a href="Css.html">

<button class="btn btn-primary btn-lg">Click Here</button>

</a>

</div>

<img src="deve.jpg" alt="Web" width="425" height="300">

<h3>Web Development</h3>

<h2>About</h2>

<p>the creating, building, and maintaining of websites.</p>

<ul>

<li>Software development</li>

<li>Cascading Style Sheet</li>

<li>Html</li>

</ul>

<br>

<div class="container">

<a href="wbdeve.html">

<button class="btn btn-primary btn-lg">Click Here</button>


</a>

</div>

<br>

<div class="container">

<a href="Exam.html">

<button class="btn btn-primary btn-lg">BACK</button>

</a>

</div>

</html>

CSS

header {

background-color: #210;

padding: 50px;

background-image: url("ict2.jpg");

h1 {

color: white;

padding: 15px;

text-align: center;

font-family: Consolas;

background-image: url("ict2.jpg");

width: 375px;

height: 250px;
}

nav {

background-color: #333;

padding: 20px;

background-image: url("ict2.jpg");

position: left;

button {

border: none;

color: black;

padding: 5px 10px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

button:hover {

background-color:#002ead;

transition: 0.7s;

h2{

text-align: Left;

font-family: "Lucida Console", "Courier New", monospace;

color: white;

width: 400px;

margin: 10px;

}
button{

border:0px;

font-family: Georgia;

background-color:powderblue"

h3{

font-family: "Lucida Console", "Courier New", monospace;

font-size: 20px;

margin: 10px;

color: white;

text-align: justify-content;

body {

background-image: url("ict3.jpg");

p{

background-image: url("ict2.jpg");

border: 2px solid #fefae0;

margin: 10px;

color: white;

font-family: monospace;

font-size: 12px;

div.gallery {
margin: 5px;

border: 2px solid #ccc;

float: left;

width: 190px;

div.gallery img {

width: 100%;

height: 80;

display: flex;

div.desc {

padding: 15px;

text-align: center;

font-family: Georgia;

color: white;

border: 5px;

container {

display: flex;

flex-wrap: wrap;

justify-content: center;

align-items: center;}

ul{

font-family: "Lucida Console", "Courier New", monospace;

font-size: 15px;

margin: 5px;
color: white;

header {

background-color: #210;

padding: 50px;

border: 5px solid #fefae0;}

body {

background-image: url("abc.jpg");

h1 {

color: white;

padding: 15px;

text-align: center;

font-family: Monospace;

border: 5px solid #fefae0;}

h2{

font-family: "Lucida Console", "Courier New", monospace;

font-size: 20px;

margin: 10px;

color: white;

h3{

font-family: "Lucida Console", "Courier New", monospace;

font-size: 20px;
margin: 10px;

color: white;

ul{

font-family: "Lucida Console", "Courier New", monospace;

font-size: 15px;

margin: 5px;

color: white;

button{

border:5px;

font-family: Georgia;

background-color:powderblue"

width: 50px;

p{font-family: "Lucida Console", "Courier New", monospace;

color: white;

font-size: 15px;

You might also like