Berjumpa lagi di kertaskuliah tidak lupa saya mengucapkan terimakasih sudah berkunjung kesini hehehe disini saya akan memberikan script dasar HTML, pada pengertian HTML sudah saya post kan disini dan sekarang saya akan memberikan contoh tampilan beserta script dasarnya, langsung saja ke intinya :
Header
- Script di bawah ini untuk menampilkan teks pada halaman web.
- pada <h1> saya berikan judul untuk di tampilkan. <h1> = Header
- dan <p> itu adalah paragraph nya. <p> = paragraph
- anda bisa mengganti nomor pada header misalkan <h4> karena pada header itu untuk menentukan besarnya huruf kata yang di masukan, header di maksimalkan sampai 6 jadi angka yang terbesar adalah 1 yang terkecil itu 6 jika di urutkan dari yang besar ke yang kecil <h1><h2><h3><h4><h5><h6>
<!DOCTYPE html>
<html>
<head><!DOCTYPE html>
<html>
<title>Page Title</title>
</head>
<body>
<h1>kertaskuliah.blogspot.com</h1>
<p>Terimakasih sudah berkunjung</p>
</body>
</html>
Tampilan :
Link
- script di bawah ini adalah tulisan untuk memudahkan orang lain untuk mengunjungi sebuah link yang ingin di berikan.
- di bawah ini ada sebuah link yang bertuliskan kertaskuliah.blogspot.com anda bisa menggantinya dengan link yang ingin anda masukan ganti saja jangan lupa harus pakai tanda " di awal dan di akhir
- sebelah link ada tulisan "ini link nya" anda bisa mengganti nya dengan kata-kata yang anda mau, fungsi ini untuk memberikan informasi atau tanda ke pada pembaca untuk menjembatani web yang akan anda berikan.
<!DOCTYPE html>
<html>
<body>
<a href="http://kertaskuliah.blogspot.com">ini link nya</a>
</body>
</html>
Gambar
- script untuk menampilkan gambar ketika anda ingin menampilkannya anda harus membuat folder terlebih dahulu.
- anda buka notepad isikan scipt di bawah simpan dengan nama misalkan kertaskuliah.html , format notepad harus .html
- masukan ke folder yang tadi di buat, dan di dalamnya buat folder lagi anda isikan images, di folder images isikan foto anda dan nama foto di sarankan yang gampang saja.
- semua persiapan sudah di lakukan buka lagi pada notepad, ganti img src="kertaskuliah.jpg" menjadi img src="images/namafotoagan.jpg" lalu save.
<!DOCTYPE html>
<html>
<body>
<img src="kertaskuliah.jpg" width="104" height="142">
</body>
</html>
Membuat heading di tengah
- penjelasan sama pada tahap awal yang membedakan adalah <h1 style="text-align:center"> script ini untuk menempatkan posisi text berada di tengah, jika ingin anda mengganti nya ke kiri atau ke kanan anda ganti yang bertuliskan center menjadi left atau right.
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center">Kertaskuliah di tengah</h1>
<p>ini paragraph</p>
</body>
</html>
Tampilan :
Warna text
- style="color:blue" menentukan warna biru, jika anda ingin menggantinya silahkan rubah blue menjadi warna yang di inginkan.
- <h1> letak hurup pada heading, <p> letak huruf di paragraph.
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue">warna biru kertaskuliah di heading</h1>
<p style="color:red">warna merah kertaskuliah di paragrah</p>
</body>
</html>
Tampilan :
Font teks
- <h1 style="font-family:verdana"> script ini untuk menampilkan jenis font disini saya pakai verdana, anda bisa merubahnya dengan font apa saja, font tersebut bisa anda dapatkan di MS word.
<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana">Kertaskuliah teks verdana</h1>
<p style="font-family:courier">Kertaskuliah teks courier</p>
</body>
</html>
Tampilan :
Table
- pada script <th> dan <td> anda bisa mengganti nya sesuai yang di inginkan.
- jika ingin merubah warna nya pada background-colour : #eee; rubah huruf #eee nya saja ganti dengan kode warna anda bisa mencari nya di google.
<!DOCTYPE html>
<html>
<head>
<style>
table {
width:100%;
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color:#fff;
}
table#t01 th {
background-color: black;
color: white;
}
</style>
</head>
<body>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<br>
<table id="t01">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Tampilan :<html>
<head>
<style>
table {
width:100%;
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color:#fff;
}
table#t01 th {
background-color: black;
color: white;
}
</style>
</head>
<body>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<br>
<table id="t01">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Membuat list tab
- pada # anda bisa mengganti nya dengan url anda untuk menjembatani saat di klik langsung menuju alamat url tersebut.
<!DOCTYPE html>
<html>
<head>
<style>
ul#menu {
padding: 0;
}
ul#menu li {
display: inline;
}
ul#menu li a {
background-color: black;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 4px 4px 0 0;
}
ul#menu li a:hover {
background-color: orange;
}
</style>
</head>
<body>
<h2>Horizontal List</h2>
<ul id="menu">
<li><a href="#">Satu</a></li>
<li><a href="#">Dua</a></li>
<li><a href="#">Tiga</a></li>
<li><a href="#">Empat</a></li>
</ul>
</body>
</html>
Tampilan<html>
<head>
<style>
ul#menu {
padding: 0;
}
ul#menu li {
display: inline;
}
ul#menu li a {
background-color: black;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 4px 4px 0 0;
}
ul#menu li a:hover {
background-color: orange;
}
</style>
</head>
<body>
<h2>Horizontal List</h2>
<ul id="menu">
<li><a href="#">Satu</a></li>
<li><a href="#">Dua</a></li>
<li><a href="#">Tiga</a></li>
<li><a href="#">Empat</a></li>
</ul>
</body>
</html>
Keterangan :
untuk memuncul kan script tersebut, buka notepad copas script yang anda mau, simpan di folder kosong, format nama .html , save kemudian double klik hasil simpan tersebut.
Sampai disini dulu artikel tentang dasar-dasar script HTML semoga bermanfaat, untuk lanjutannya saya akan update setiap hari pantengin saja terus blog kertaskuliah jangan lupa di subcribe ya ...
No comments:
Post a Comment
Tata cara komentar di blog ini :
1. Menggunakan bahasa yang baik dan benar
2. Pikirkan terlebih dahulu apa yang ingin di pertanyakan
3. Boleh saling memberikan informasi yang akurat dan jelas
4. Anda sopan, kami segan