Disini saya akan mengupas script yang ditulis untuk membuat web yang saya design
Pertama tag yang saya gunakan adalah :
Pertama tag yang saya gunakan adalah :
1. <html>konten</html> :tag untuk dokumen HTML
2. <title>konten</title> : tag untuk membuat judul
3. <body>konten</body> : untuk membuat tubuh dari sebuah halaman
4. <img src="ini diisi alamat picturenya"> : untuk menambahkan gambar
5. <header>konten</header> :untuk membuat sebuah head
6. <div>konten</div> : untuk membuat sebuah bagian dalam dokumen
7. <nav>konten</nav> : digunakan untuk membuat navigasi link
8. <link rel="stylesheet" type="text/css" href="Mergina_TI/beranda.css"> : format link untuk dibagian head
9. <ul>konten</ul> : tag untuk membuat list dengan tanpa nomor
10. <li>konten</li> : tag untuk membuat deskripsi listnya
11. <a>konten</a> : untuk membuat hyperlink
12. <table>konten< /table> : tag untuk membuat tabel
13. <tr>konten</tr> : tag untuk penanda baris
14. <td>konten</td> : tag untuk penanda kolom
15.<p>konten</p> : berfungsi untuk membuat paragraf baru
16.<br> : berfungsi untuk pindah baris berikutnya
17.<b>konten</b> : untuk membuat huruf tebal
18.<i>konten</i> : untuk membuat huruf miring
19.<u>konten</u> : untuk membuat underline
20.<marquee>konten</marquee> : untuk membuat tulisan/gambar berjalan tergantung dari isi konten
2. <title>konten</title> : tag untuk membuat judul
3. <body>konten</body> : untuk membuat tubuh dari sebuah halaman
4. <img src="ini diisi alamat picturenya"> : untuk menambahkan gambar
5. <header>konten</header> :untuk membuat sebuah head
6. <div>konten</div> : untuk membuat sebuah bagian dalam dokumen
7. <nav>konten</nav> : digunakan untuk membuat navigasi link
8. <link rel="stylesheet" type="text/css" href="Mergina_TI/beranda.css"> : format link untuk dibagian head
9. <ul>konten</ul> : tag untuk membuat list dengan tanpa nomor
10. <li>konten</li> : tag untuk membuat deskripsi listnya
11. <a>konten</a> : untuk membuat hyperlink
12. <table>konten< /table> : tag untuk membuat tabel
13. <tr>konten</tr> : tag untuk penanda baris
14. <td>konten</td> : tag untuk penanda kolom
15.<p>konten</p> : berfungsi untuk membuat paragraf baru
16.<br> : berfungsi untuk pindah baris berikutnya
17.<b>konten</b> : untuk membuat huruf tebal
18.<i>konten</i> : untuk membuat huruf miring
19.<u>konten</u> : untuk membuat underline
20.<marquee>konten</marquee> : untuk membuat tulisan/gambar berjalan tergantung dari isi konten
Kedua Property(atribut) yang saya gunakan dalam HTML adalah :
1. class : Digunakan untuk memberikan penamaan elemen yang
memiliki karakteristik atau struktur yang dapat digunakan secara
berulang-ulang dalam tag HTML.
2. id : Atribut ini digunakan untuk penamaan elemen pada HTML yang memiliki karakteristik yang unik atau berbeda. Tidak diperbolehkan ada 2 elemen yang memiliki Id yang sama. Salah penggunaan maka akan berdampak pada hasil tampilan web itu sendiri.
3. rowspan : fungsinya untuk menggabungkan cell dalam satu baris
4. colspan : fungsinya untuk menggabungkan cell dalam satu kolom
5. font-size : untuk menentukan ukuran font
6. font-height : untuk membuat huruf tebal
7. font-family : untuk memilih jenis font
8. font-style : untuk membuat jadi font italic(italic) atau tidak
9. color : untuk mengatur warna pada text
10. text-decoration : untuk mendekorasi text
11. text-shadow : untuk membuat bayangan pada text
12. text-align : untuk mengatur posisi text
13. line-height : untuk menentukan tinggi baris antar text
14. text-indent : untuk indent baris pertama (membuat text awal paragraf menjorok kedalam)
15. background-color : untuk menentukan warna latar belakang elemen HTML
16. border : menentukan bingkai disekitar elemen
17. border-width : untuk menentukan ketebalan bingkai
18. border-color : untuk menentukan warna bingkai
19. border-top/right/left/bottom :untuk mengatur jenis style border dibagian atas/kanan/kiri/bawah (pilih salah satu)
20. border-collapse : untuk menentukan apakah sel tabel harus memiliki perbatasan mereka sendiri / berbagi perbatasan
21. height : untuk menentukan tinggi suatu elemen
22. width : untuk menentukan lebar suatu elemen
23. margin : untuk memberikan spasi disisi luar elemen
24. padding : untuk memberikan spasi pada sisi dalam sebuah elemen
25. border-radius: untuk memberikan bentuk sudut tumpul pada bingkai
26. background-repeat: untuk mengulangi gambar yang ditampikan
27. background-size: untuk mengatur lebar dan tinggi gambar
28. box-shadow: untuk membuat bayangan pada box
29. float: berfungsi untuk menempel. Elemen akan menempel pada sebelah kanan/kiri elemen induk
2. id : Atribut ini digunakan untuk penamaan elemen pada HTML yang memiliki karakteristik yang unik atau berbeda. Tidak diperbolehkan ada 2 elemen yang memiliki Id yang sama. Salah penggunaan maka akan berdampak pada hasil tampilan web itu sendiri.
3. rowspan : fungsinya untuk menggabungkan cell dalam satu baris
4. colspan : fungsinya untuk menggabungkan cell dalam satu kolom
5. font-size : untuk menentukan ukuran font
6. font-height : untuk membuat huruf tebal
7. font-family : untuk memilih jenis font
8. font-style : untuk membuat jadi font italic(italic) atau tidak
9. color : untuk mengatur warna pada text
10. text-decoration : untuk mendekorasi text
11. text-shadow : untuk membuat bayangan pada text
12. text-align : untuk mengatur posisi text
13. line-height : untuk menentukan tinggi baris antar text
14. text-indent : untuk indent baris pertama (membuat text awal paragraf menjorok kedalam)
15. background-color : untuk menentukan warna latar belakang elemen HTML
16. border : menentukan bingkai disekitar elemen
17. border-width : untuk menentukan ketebalan bingkai
18. border-color : untuk menentukan warna bingkai
19. border-top/right/left/bottom :untuk mengatur jenis style border dibagian atas/kanan/kiri/bawah (pilih salah satu)
20. border-collapse : untuk menentukan apakah sel tabel harus memiliki perbatasan mereka sendiri / berbagi perbatasan
21. height : untuk menentukan tinggi suatu elemen
22. width : untuk menentukan lebar suatu elemen
23. margin : untuk memberikan spasi disisi luar elemen
24. padding : untuk memberikan spasi pada sisi dalam sebuah elemen
25. border-radius: untuk memberikan bentuk sudut tumpul pada bingkai
26. background-repeat: untuk mengulangi gambar yang ditampikan
27. background-size: untuk mengatur lebar dan tinggi gambar
28. box-shadow: untuk membuat bayangan pada box
29. float: berfungsi untuk menempel. Elemen akan menempel pada sebelah kanan/kiri elemen induk
Berikut adalah script untuk membuat navigasi link (dropdown menu) :
Ini adalah script untuk didalam HTML
<nav>
<ul>
<li><a href="webhome.html">home</a></li>
<li><a href="webprofile.html">about me</a></li>
<li><a href="webgalery.html">galery</a>
<ul>
<li><a href="screenshootproject.html">screenshoot project</a></li>
<li><a href="photo.html">photo</a></li>
</ul>
</li>
<li><a href="webreferensi.html">referensi</a>
<li><a href="webcontact.html">contact us</a>
</ul>
</nav>
<ul>
<li><a href="webhome.html">home</a></li>
<li><a href="webprofile.html">about me</a></li>
<li><a href="webgalery.html">galery</a>
<ul>
<li><a href="screenshootproject.html">screenshoot project</a></li>
<li><a href="photo.html">photo</a></li>
</ul>
</li>
<li><a href="webreferensi.html">referensi</a>
<li><a href="webcontact.html">contact us</a>
</ul>
</nav>
Ini adalah script untuk didalam CSS
nav{
background-color:#900;
height: 50px;
line-height: 50px;
position: relative;
width: 1012px;
margin: 0 auto;
}
nav ul{
list-style: none;
}
nav ul li a{
float: left;
width: 200px;
display: block;
text-align: center;
color:white;
text-decoration: none;
text-transform: uppercase;
margin: 0 auto;
}
nav ul li a:hover{
background-color: #666;
display: block;
}
nav ul li:hover ul{
display: block;
}
nav ul ul{
display: none;
list-style: none;
position: absolute;
background-color: lightgray;
left: 300px;
top: 50px;
width: 190px;
}
nav ul ul li a{
float: none;
display: block;
text-align:center;
width: 160px;
font-size: 12px;
}
nav ul ul li a:hover{
color:lightgray;
}
background-color:#900;
height: 50px;
line-height: 50px;
position: relative;
width: 1012px;
margin: 0 auto;
}
nav ul{
list-style: none;
}
nav ul li a{
float: left;
width: 200px;
display: block;
text-align: center;
color:white;
text-decoration: none;
text-transform: uppercase;
margin: 0 auto;
}
nav ul li a:hover{
background-color: #666;
display: block;
}
nav ul li:hover ul{
display: block;
}
nav ul ul{
display: none;
list-style: none;
position: absolute;
background-color: lightgray;
left: 300px;
top: 50px;
width: 190px;
}
nav ul ul li a{
float: none;
display: block;
text-align:center;
width: 160px;
font-size: 12px;
}
nav ul ul li a:hover{
color:lightgray;
}
Berikut adalah script untuk membuat teks berjalan dan gambar berjalan:
untuk tulisan => <marquee>tuliskan teksnya</marquee>
untuk gambar :
<marquee direction="right">
<img src="scprof5.png" height="200"width="200"align="right">
<img src="scpro.png" height="200" width="200" align="right">
<img src="sccon.png"height="200" width="200" align="right">
<img src="teman.jpg"height="200" width="200" align="right">
<img src="sccon1.png"height="200" width="200" align="right"></marquee>
<img src="scpro.png" height="200" width="200" align="right">
<img src="sccon.png"height="200" width="200" align="right">
<img src="teman.jpg"height="200" width="200" align="right">
<img src="sccon1.png"height="200" width="200" align="right"></marquee>
Berikut adalah script untuk memasukkan gambar untuk dijadikan backgound-image:
background-image: url("sakura.jpg"); sakura.jpg bisa diganti dengan nama photo anda
background-size: 50%(untuk lebar) 100%(untuk tinggi);
Berikut adalah script untuk membuat gradasi warna pada backgound:
Ini adalah script untuk didalam HTML
<body>
<div id="isi2b">
</div>
</body>
Ini adalah script untuk didalam CSS
#isi2b{
background:-webkit-linear-gradient(top,salmon,skyblue,cyan,skyblue,salmon);
background:-moz-linear-gradient(top,salmon,skyblue,cyan,skyblue,salmon);
width:1012px;
margin:0 auto;
height:1500px;
line-height:20px;
border-radius:10px 10px 0px 0px;
border-bottom:5px solid silver;
box-shadow:6px 10px 10px grey;
border-bottom: 7px dotted indigo;
border-left: 7px dotted indigo;
border-right: 7px dotted indigo;
}
background:-webkit-linear-gradient(top,salmon,skyblue,cyan,skyblue,salmon);
background:-moz-linear-gradient(top,salmon,skyblue,cyan,skyblue,salmon);
width:1012px;
margin:0 auto;
height:1500px;
line-height:20px;
border-radius:10px 10px 0px 0px;
border-bottom:5px solid silver;
box-shadow:6px 10px 10px grey;
border-bottom: 7px dotted indigo;
border-left: 7px dotted indigo;
border-right: 7px dotted indigo;
}
-webkit : gunanya agar bisa terlihat di google chrome
-moz :gunanya agar bisa terlihat di mozila
dotted untuk membuat titik pada bingkai (border)
Berikut adalah script untuk memasukkan gambar untuk dijadikan galery:
Ini adalah script untuk didalam HTML
<body>
<div id="isi2">
<p id="teksgaleri">
<img id="gambar" src="fb1.jpg" width="190" height="300">
<img id="gambar" src="fb2.jpg" width="600" height="300">
<img id="gambar" src="fb3.jpg" width="600" height="400">
<img id="gambar" src="fb4.jpg" width="200" height="400">
<img id="gambar" src="fb5.jpg" width="400" height="400">
<img id="gambar" src="teman.jpg" width="400" height="400">
</p>
</div>
<img id="gambar" src="fb1.jpg" width="190" height="300">
<img id="gambar" src="fb2.jpg" width="600" height="300">
<img id="gambar" src="fb3.jpg" width="600" height="400">
<img id="gambar" src="fb4.jpg" width="200" height="400">
<img id="gambar" src="fb5.jpg" width="400" height="400">
<img id="gambar" src="teman.jpg" width="400" height="400">
</p>
</div>
</body>
Ini adalah script untuk didalam CSS
#gambar{
float: left;
-moz-border-radius:50px;
-webkit-border-radius:10px;
margin: 45px 5px 5px 45px;
padding: 3px;
border:solid;
background-color:hotpink;
cursor: pointer;
}
#gambar:hover{
float: bottom;
-moz-border-radius:50px;
-webkit-border-radius:10px;
margin: 0px 15px 15px 0px;
padding: 10px;
border:solid;
background-color:lightgray;
}
float: left;
-moz-border-radius:50px;
-webkit-border-radius:10px;
margin: 45px 5px 5px 45px;
padding: 3px;
border:solid;
background-color:hotpink;
cursor: pointer;
}
#gambar:hover{
float: bottom;
-moz-border-radius:50px;
-webkit-border-radius:10px;
margin: 0px 15px 15px 0px;
padding: 10px;
border:solid;
background-color:lightgray;
}
untuk lebih jelasnya bisa langsung kunjungi alamat web berikut :
Berikut adalah print outnya
