HTML

21.05 | Label: HTML, komputer, pendidikan, Programming, TIK X, Web

Membuat Website My Family

Kali ini kita akan belajar menggunakan HTML, menggunakan aplikasi notepad. Jadi perintah-perintah tag-nya dituliskan pada notepad.

Membuat image slider page dengan html:
Image yang kita gunakan disini berukuran width 800px dan height 400px.
Disini kita menggunakan 2 file, yaitu file style-fam.css dan file family.html

Isi dari file style-fam.css:
.slider-holder
{
width: 800px;
height: 400px;
background-color: yellow;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
text-align: center;
overflow: hidden;
}

.image-holder
{
width: 2400px;
background-color: red;
height: 400px;
clear: both;
position: relative;

-webkit-transition: left 2s;
-moz-transition: left 2s;
-o-transition: left 2s;
transition: left 2s;
}

.slider-image
{
float: left;
margin: 0px;
padding: 0px;
position: relative;
}

#slider-image-1:target ~ .image-holder
{
left: 0px;
}

#slider-image-2:target ~ .image-holder
{
left: -800px;
}

#slider-image-3:target ~ .image-holder
{
left: -1600px;
}

.button-holder
{
position: relative;
top: -20px;
}

.slider-change
{
display: inline-block;
height: 10px;
width: 10px;
border-radius: 5px;
background-color: brown;
}

Isi file family.html:
<!doctype html>
<html>
<head>
<title>Family Sites</title>
<link rel="stylesheet" type="text/css" href="style-fam.css">
</head>
<body>
<div class="slider-holder">
<span id="slider-image-1"></span>
<span id="slider-image-2"></span>
<span id="slider-image-3"></span>
<div class="image-holder">
<img src="Fam-01.jpg" class="slider-image" />
<img src="Fam-02.jpg" class="slider-image" />
<img src="Fam-03.jpg" class="slider-image" />
</div>
<div class="button-holder">
<a href="#slider-image-1" class="slider-change"></a>
<a href="#slider-image-2" class="slider-change"></a>
<a href="#slider-image-3" class="slider-change"></a>
</div>
</div>
</body>
</html>

File family.html ini dapat dikembangkan menjadi halaman pertama dengan menambahkan table dibawah gambar slide.
Contoh:
<table style="width:800px; float:center" align="center">
<tr>
<td style="background-color:green; color:white; text-align:center">My Family</td>
<td style="background-color:green; color:white; text-align:center">Our Members</td>
<td style="background-color:green; color:white; text-align:center">Our Activities</td>
<td style="background-color:green; color:white; text-align:center">Our Goals</td>
</tr>
<tr>
<td style="text-align:center; border: 1px solid black">Author: Tintin<br/>This is about my family site created using HTML and CSS</td>
<td colspan="2" style="text-align:center; border: 1px solid black"><h1>My Family</h1><br/>
I have a warm big family. I have 3 brothers and 2 sisters. I am the fourth. The first child is my sister, Anna.She is 17 years old. She is in the 12 grade and study in SMA Karangturi. Then my twins brother Harry and Peter. They are 15 years old. They are in the 10 grade. They love badminton and win many Competition. I'm 12 years old. I'm in the 7 grade. I study in SMP Karangturi. I love science and computer.</td>
<td style="text-align:center; border: 1px solid black">ICT Assignment<br/> by: Euginia<br/> grade 7B</td>
</tr>
</table>

Bagian yang saya beri warna merah dapat dikembangkan dengan menambahkan link ke halaman-halamanan yang lain.

referensi situs untuk belajar:
qnimate

Membuat gallery page dengan html:

untuk membuat gallery page ala polaroid seperti gambar diatas, kita menggunakan 2 buah file:

style.css
gallery.html

file style.css:
body{
background-color:#dedede;
}
.gallery{
display:flex;
width:900px;
margin:auto;
justify-content:space-between;
flex-wrap:wrap;
}
figure{
width:200px;
margin:8px 0;
border:1px solid #777;
padding:8px;
background-color:#fff;
flex-shrink:0;
}
figure img{
width:100%;
}
figure figcaption{
text-align:center;
padding:8px 4px;
}
*{
box-sizing:border-box;
}

file gallery.html: setiap gambar .png dapat diganti sesuai dengan foto yang akan ditampilkan pada halaman galeri.
<!DOCTYPE html>
<html>
<head>
<title>Gallery Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="gallery">
<figure>
<img src="Dog01.png">
<figcaption>
Porroro my cute dog
</figcaption>
</figure>
<figure>
<img src="Dog02.png">
<figcaption>
Ferroro my fav
</figcaption>
</figure>
<figure>
<img src="Dog03.png">
<figcaption>
Machiato the innocent look
</figcaption>
</figure>
<figure>
<img src="Dog04.png">
<figcaption>
The saint Doggo
</figcaption>
</figure>
<figure>
<img src="Dog01.png">
<figcaption>
Porroro my cute dog
</figcaption>
</figure>
<figure>
<img src="Dog02.png">
<figcaption>
Ferroro my fav
</figcaption>
</figure>
<figure>
<img src="Dog03.png">
<figcaption>
Machiato the innocent look
</figcaption>
</figure>
<figure>
<img src="Dog04.png">
<figcaption>
The saint Doggo
</figcaption>
</figure>
</div>
</body>
</html>

referensi situs untuk belajar:
kunal sarkar