Showing posts with label html. Show all posts

10 February 2022

Ask Cara Membuat Form Login Html Tanpa Database Mysql AdityaDs

Cara Membuat Form login Html Tanpa Database

Halo sobat setia syarif soden, ketemu lagi nih di blog adityadees. Pada kesempatan kali ini mimin mau share Cara membuat Form Login HTML tanpa MYSQL.

Untuk program ini sebenaranya sederhana, namu saya menambahkan beberapa animasi yaitu pada form login nya yang memiliki animasi bounce down saat baru dibuka.

Serta pada background program ini saya menambahkan animasi gradient animasi, yaitu animasi warna berjalan.

Oke langsung saja kita ke tutorialnya

Cara Membuat Form Login Html Tanpa Database Mysql

Sebelumnya kalian bisa membuat file seperti ini

Cara Membuat Form Login Html Tanpa Database

jika kalian ingin mendownload kodenya klik disini

Index.php

Pada file index.php ini kita akan membuat desain form untuk pengecekan session login. Yang mana jika session login pengguna masih tersimpan maka tampilan yang akan ditampilkan browser adalah tampilan berhasil login, jika session pengguna sudah kadaluarsa maka form akan di redirect ke login.php untuk melakukan login.

Style.css

Pada file style.css ini kita buat desain layout / desain tata letak form login nya. Untuk form login ini saya memberikan beberapa efek yaitu background animasi warna berjalan dan animasi bounce down.

Pada file login.php ini kita akan membuat proses validasi atau pemeriksaan username dan password yang dimasukan saat login. Jika username dan password yang dimasukan benar, maka user yang telah berhasil login akan dicatat pada session login

Logout.php

Pada file logout.php ini kita isi dengan source code session destroy untuk menghapus seesion pada halaman login.

Proses_Login.php

pada file Proses_Login.php ini program akan melakukan pengecekan username dan password yang dimasukan user pada saat melakukan login, jika username dan password benar maka user berhasil login.

Oke sekian dulu tutorial mebuat Form Login HTML tanpa Database MYSQL. Silahkan tinggalkan komentar jika aada yang kurang jelas dam semoga bermanfaat untuk kita semua

Ask Belajar HTML untuk pemula ,mengenal tag Meta dan Iframe AdityaDees

Web desain

Adityads Blogs 22:46 0

Setiap elemen HTML dapat juga membawa atribut kelas. Atribut kelas HTML digunakan untuk menentukan satu atau lebih nama kelas untuk suatu elemen. Umumnya, atribut class menunjuk ke sebuah class dalam sebuah style sheet. Nama kelas sensitif huruf besar ataupun kecil, itu artinya Jono dan jono itu beda .


				
								
<pclass="classname"></p>

kelas di gunakan, ketika Anda mungkin memiliki beberapa paragraf teks yang mengandung informasi yang lebih penting daripada yang lain dan inginkan untuk membedakan elemen-elemen ini, atau Anda mungkin ingin membedakan antara tautan yang mengarah ke yang lain halaman di situs dan tautan Anda sendiri yang mengarah ke situs eksternal.

Atribut ini juga dapat digunakan oleh JavaScript melalui DOM HTML untuk membuat perubahan tertentu pada elemen HTML dengan nama kelas tertentu.


				
								
								
<!DOCTYPE html> 
<html> 
<head> 
<title>Title of the document</title>
 <style> 
.red { 
color: red; 
} 
.orange { 
color: orange; 
} 
</style> 
</head> 
<body> 
 
<p class="red">Ini adalah paragraf kelas merah</p> 
<p>Ini adalah beberapa teks.</p> 
<p class="orange">Ini adalah paragraf kelas orannye</p> 
</body> 
</html>

Hasil :

Ini adalah paragraf kelas merah

Ini adalah beberapa teks.

Ini adalah paragraf kelas orannye

Di CSS , jika Anda ingin memilih elemen dengan kelas tertentu, gunakan karakter titik (.) diikuti dengan nama kelas.

Iframe

Tag iframe membuat bingkai sebaris untuk menyematkan konten pihak ketiga (media, applet, dll.). Meskipun konten frame dan halaman web independen, mereka dapat berinteraksi melalui JavaScript.

Iframe seperti jendela kecil yang telah dipotong menjadi kotak halaman, dan di jendela itu Anda dapat melihat halaman lain. Syarat iframe adalah singkatan dari inline bingkai.

Salah satu penggunaan umum iframe (yang mungkin pernah Anda lihat di berbagai situs web) adalah untuk menyematkan Google Map ke dalam sebuah halaman.isi iframe bisa apa saja halaman html (baik terletak di server yang sama atau di mana pun di Web).


				
								
<iframe 
width="450" 
height="350" 
src="http://selawesewelas.blogspot.com">
</iframe>

Hasil:

Untuk mengatur ukuran iframe, gunakan atribut width dan height , atau gunakan CSS . Nilai atribut ditetapkan dalam piksel secara default, tetapi juga dapat dalam persen.

Informasi tentang halaman <meta>

Tag <meta> mengandung metadata, yang menentukan deskripsi halaman, kata kunci, penulis dokumen, dll .Metadata yang digunakan oleh browser, mesin, dan layanan web lainnya mencari, dan tidak ditampilkan pada halaman web. Dokumen web dapat berisi lebih dari satu tag <meta> , tetapi umumnya, tampilan fisik dokumen tidak terpengaruh olehnya.

Menentuka kata kunci untuk mesin pencari:


				
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

Tentukan deskripsi situs web:


				
<meta name="description" content="Belajar HTML">

Tentukan penulis halaman:


				
								
<meta name="author" content="namaauthor">

Refresh dokumen setiap satu menit (60 detik):


				
								
<meta http-equiv="refresh" content="60">

Atur viewport untuk membuat situs web terlihat bagus di semua perangkat:


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

Tag <meta> ditempatkan di tag <head> . Anda harus menentukan atribut konten jika nama atau atribut http-equiv didefinisikan. Jika atribut ini tidak ditentukan, atribut konten juga tidak dapat ditentukan.

Tag <meta> adalah kosong, yang berarti bahwa tag penutup tidak diperlukan. Namun dalam XHTML , tag (<meta> ) harus ditutup ().

Selanjutnya

Ask Belajar HTML membuat Form untuk pemula AdityaDees

Web desain

Adityads Blogs 10:39 0

Formulir HTML merupakan bagian dari dokumen yang berisi sebuah elemen formulir. Elemen formulir ini bisa berdasarkan dari jenis berbagai elemen input, seperti misalnya bidang teks, kotak centang, tombol radio, tombol kirim, label, dan lain sebagainya .

Tag <form> dari HTML yang digunakan untuk mendeklarasikan sebuah form. biasanya Tag ini datang berpasangan dengan elemen khusus yang disebut kontrol, elemen ini ditulis di antara tag pembuka <form> dan tag penutup </form> .

Berikut ini merupakan benerapa elemen pengilut untuk menggunakan tag <form> :

<input>
<button>
<textarea>
<form>
<option>
<select>
<label>
<fieldset>

Kontrol formulir tinggal di dalam elemen <form> . elemen ini harus selalu melakukan tindakan atribut dan biasanya akan memiliki metode dan atribut id juga. <action> - Setiap elemen <form> membutuhkan atribut tindakan. Nilainya adalah URL untuk halaman di server yang akan menerima informasi dalam bentuk kapan diajukan.


				
<form action="http://www.example.com/subscribe.php"
 metode="get">
 <p>
 	
// Di sinilah kontrol formulir akan muncul.
 	
 	
  </p>
</form>

Hasilnya :

Formulir dapat dikirim menggunakan salah satu dari dua metode: get atau post. Dengan metode get, nilainya dari formulir ditambahkan ke akhir dari URL yang ditentukan dalam atribut tindakan. Metode get ini ideal untuk:

Bentuk pendek (seperti pencarian kotak)
Ketika Anda baru saja mengambil data dari server web (tidak mengirimkan informasi yang harus ditambahkan atau dihapus dari database)

Dengan metode post, nilai dikirim dalam bentuk yang dikenal sebagai header HTTP. Sebagai aturan praktis Anda harus menggunakan metode post jika formulir Anda :

Memungkinkan pengguna untuk mengunggah file
Sangat panjang
Berisi data sensitif (misalnya kata sandi)
Menambahkan informasi ke, atau menghapus informasi dari database
Jika atribut metode bukan digunakan, data formulir akan dikirim menggunakan metode get.

Input

Elemen <input> kontrol . Nilai jenisnya atribut menentukan jenis masukan yang akan mereka buat. Ketika atribut type="text" memiliki nilai teks, itu menciptakan satu masukan teks baris.


				
<form action="http://www.example.com/login.php">
<p>Username:
 <input type="text" name="username" size="15" 
 maxlength="30" />
</p>
</form>

Hasil :

Saat pengguna memasukkan informasi ke dalam formulir, server perlu tahu bentuk mana yang mengontrol masing-masing sepotong data dimasukkan ke dalam. Misalnya, dalam formulir login, tombol server perlu tahu apa yang telah dimasukkan sebagai nama pengguna dan apa yang telah diberikan sebagai kata sandi.

Oleh karena itu, setiap formulir kontrol membutuhkan atribut name. Nilai atribut ini mengidentifikasi kontrol formulir dan dikirim beserta informasinya mereka masuk ke server.

Anda dapat menggunakan maxlength atribut untuk membatasi jumlah karakter yang dapat dimasukkan pengguna ke dalam bidang teks. Nilainya adalah jumlah karakter yang mereka dapat memasuki. Misalnya, jika Anda minta setahun, maxlength atribut bisa memiliki nilai 4.

Password input

Ketika atribut type="text" memiliki nilai kata sandi yang dibuatnya kotak teks yang bertindak seperti input teks satu baris, kecuali karakter diblokir. Mereka disembunyikan dengan cara ini jadi jika seseorang melihat ke atas bahu pengguna, mereka tidak bisa melihat data sensitif seperti kata sandi.

Atribut name menunjukkan nama input kata sandi, yang dikirim ke server dengan kata sandi yang dimasukkan pengguna.size, maxlenght dapat membawa ukuran dan atribut maxlength seperti input teks satu baris.


				
<form action="http://www.example.com/login.php">
<p>Username:
 <input type="text" name="username" size="15" 
 maxlength="30" />
</p>
<p>Password:
 <input type="password" name="password" size="15" 
 maxlength="30" />
</p>
</form>

Hasil :

Meskipun kata sandinya disembunyikan di layar, ini tidak berarti data dalam kata sandi kontrol dikirim dengan aman ke server. Anda seharusnya tidak bisa menggunakan cara seperti ini untuk mengirim data sensitif seperti nomor kartu kredit.

Untuk keamanan penuh, server membutuhkan diatur untuk berkomunikasi dengan browser pengguna menggunakan Lapisan Soket Aman (SSL). Topik SSL berada di luar cakupan dari artikel ini, namun ada tautan untuk mempelajari lebih lanjut tentangnya di berbagai situs web yang membahas tentang itu

Textarea

Elemen <textarea> digunakan untuk membuat input teks multiline. Tidak seperti elemen input lainnya, ini bukan elemen kosong. Oleh karena itu, ia harus memiliki tag pembuka dan penutup.

Teks apa pun yang muncul di antara pembuka <textarea> dan tag <textarea> penutup akan muncul di kotak teks halaman. Jika pengguna tidak menghapus apapun teks di antara tag ini, pesan ini akan dikirim ke server bersama dengan apa pun yang telah pengguna ketik. Beberapa situs mengunakan JavaScript untuk menghapus informasi ini ketika pengguna mengklik di bidang teks.


				
<form action="http://www.example.com/comments.php">
<p>Apa pendapat anda tentang belaja HTML?</p>
 <textarea name="comments" cols="20" rows="4">
 Tulis komentar disini..
 
</textarea>
</form>

Hasil :

Jika Anda membuat formulir baru, anda harus menggunakan CSS untuk mengontrol lebar dan tinggi tag <textarea>. Namun, jika Anda melihat kode yang lebih lama, Anda mungkin melihat atribut cols dan rows digunakan dengan elemen ini.

Atribut cols menunjukkan seberapa lebar area teks seharusnya diukur dalam jumlah karakter. Atribut baris menunjukkan berapa banyak baris area, teks harus mengambil Tegak lurus.

Contoh form radio button


				
<form action="http://www.example.com/profile.php">
<p>Pilih genre musik favoritmu:
 <br />
 <input type="radio" name="genre" value="rock" 
 checked="checked" /> Rock
 <input type="radio" name="genre" value="pop" /> 
 Pop
 <input type="radio" name="genre" value="jazz" /> 
 Jazz
</p>
</form>

Hasil:

Contoh form checkbox


				
<form action="http://www.example.com/profile.php">
<p>Silakan pilih layanan musik favorit Anda:
 <br />
 <input type="checkbox" name="service" 
 value="itunes" checked="checked" /> iTunes
 <input type="checkbox" name="service" 
 value="lastfm" /> Last.fm
 <input type="checkbox" name="service" 
 value="spotify" /> Spotify
</p>
</form>

Hasil:

Contoh Drop Down List Box


				
				
<form action="http://www.example.com/profile.php">
<p>Di perangkat apa Anda mendengarkan musik?</p>
<select name="devices">
 <option value="ipod">iPod</option>
 <option value="radio">Radio</option>
 <option value="computer">Computer</option>
 </select>
</form>

Hasil:

Contoh Form Multiple Select Box


				
	<form action="http://www.example.com/profile.php">
<p>Apakah Anda memainkan salah satu alat musik berikut?
(Anda dapat memilih lebih dari satu opsi dengan menahan
kontrol bawah pada PC atau tombol perintah pada Mac
saat memilih opsi yang berbeda.)</p>
<select name="instruments" size="3" 
 multiple="multiple">
 <option value="guitar" selected="selected">
 Guitar</option>
 <option value="drums">Drums</option>
 <option value="keyboard" 
 selected="selected">Keyboard</option>
 <option value="bass">Bass</option>
</select>
</form>

Hasil :

Contoh File input Box


				
<form action="http://www.example.com/upload.php"
method="post">
<p>Upload your song in MP3 format:</p>
<input type="file" name="user-song" /><br />
<input type="submit" value="Upload" />
</form>

Hasil :

Contoh submit Button


				
<form action="http://www.example.com/subscribe.php">
<p>Berlangganan ke daftar email kami:</p>
<input type="text" name="email" />
<input type="submit" name="subscribe" 
 value="Subscribe" />
</form>

Hasil :

Contoh image Button


				
<form action="http://www.example.org/subscribe.php">
<p>Berlangganan ke daftar email kami:</p>
 <input type="text" name="email" />
 <input type="image" src="images/subscribe.jpg" 
 width="100" height="20" />
</form>

Hasil :

Contoh Labelling Form Controls


				
<label>Age: <input type="text" name="age" /></label>
<br/ >
Gender:
<input id="female" type="radio" name="gender"
value="f">
<label for="female">Female</label>
<input id="male" type="radio" name="gender" 
value="m">
<label for="male">Male</label>

Hasil:

Age:
Gender: FemaleMale

Contoh Grouping Form Elements


				
<fieldset>
<legend>Contact details</legend>
<label>Email:<br />
<input type="text" name="email" /></label><br />
<label>Mobile:<br />
<input type="text" name="mobile" /></label><br />
<label>Telephone:<br />
<input type="text" name="telephone" /></label>
</fieldset>

Hasil :

Contact detailsEmail:

Mobile:

Telephone:

Contoh Form Validation


				
<form action="http://www.example.com/login/"
 method="post"> 
<label for="username">Username:</label>
<input type="text" name="username"
 required="required" /></title><br /> 
<label for="password">Password:</label>
<input type="password" name="password"
 required="required" /> 
<input type="submit" value="Submit" />
</form>

Hasil :

Contoh Form Search Input


				
<form action="http://www.example.org/search.php">
<p>Search:</p>
<input type="search" name="search" />
<input type="submit" value="Search" />
</form>

Hasil :

Example Form


				
<html>
<head>
 <title>Forms</title>
</head>
<body>
 <form action="http://www.example.com/review.php" method="get">
 <fieldset>
 <legend>
 Your Details:
 </legend>
 <label>
 Name:
 <input type="text" name="name" size="30" maxlength="100">
 </label>
 <br />
 <label>
 Email:
 <input type="email" name="email" size="30" maxlength="100">
 </label>
 <br />
 </fieldset>
 <br />
 <fieldset>
 <legend>
 Your Review:
 </legend>
 <p>
 <label for="hear-about">
 How did you hear about us?
 </label>
 <select name="referrer" id="hear-about">
 <option value="google">Google</option>
 <option value="friend">Friend</option>
 <option value="advert">Advert</option>
 <option value="other">Other</option>
 </select>
 </p>
 <p>
 	Would you visit again?
 <br />
 <label>
 <input type="radio" name="rating" value="yes" />
 Yes
 </label>
 <label>
 <input type="radio" name="rating" value="no" />
 No
 </label>
 <label>
 <input type="radio" name="rating" value="maybe" />
 Maybe
 </label>
 </p>
 <p>
 <label for="comments">
 Comments:
 </label>
 <br />
 <textarea rows="4" cols="40" id="comments">
 </textarea>
 </p>
 <label>
 <input type="checkbox" name="subscribe" checked="checked" />
 Sign me up for email updates
 </label>
 <br />
 <input type="submit" value="Submit review" />
 </fieldset>
 </form>
</body>
</html>

Hasil:

Selanjutnya

Ask Belajar HTML membuat tabel sederhana untuk pemula AdityaDees

Web desain

Adityads Blogs 22:13 0

Ada beberapa jenis informasi yang perlu ditampilkan dalam kotak tabel. Misalnya: hasil olahraga, laporan saham, jadwal kereta api dan lain sebagainya. Saat mewakili informasi dalam tabel, Anda perlu berpikir dalam hal kisi yang terdiri dari baris dan kolom (sedikit seperti lembar kerja). Dalam bab ini Anda akan belajar bagaimana:

Gunakan empat elemen kunci untuk membuat tabel
Mewakili data yang kompleks menggunakan tabel
Tambahkan keterangan ke tabel

Sebuah tabel mewakili informasi dalam format grid. Contoh tabel termasuk laporan keuangan, TV jadwal, dan hasil olahraga.Grid memungkinkan kita untuk mengerti data kompleks dengan referensi informasi pada dua sumbu. Setiap blok di grid disebut sebagai sel tabel. Dalam HTML tabel ditulis baris demi baris.

Struktur basic tabel

Elemen <table> digunakan untuk membuat tabel. Isi dari tabel ditulis baris dengan baris. Anda menunjukkan awal dari masing-masing baris dengan menggunakan tag pembuka <tr>.

Ini diikuti oleh satu atau lebih elemen <td> satu untuk setiap sel di baris itu. Di akhir baris Anda menggunakan tag </tr> sebagai penutup. Setiap sel dari sebuah tabel adalah direpresentasikan menggunakan elemen <td> . Di akhir setiap sel Anda menggunakan tag </td< sebagai penutup.


				
<table>
 <tr>
 <td>15</td>
 <td>15</td>
 <td>30</td>
 </tr>
 <tr>
 <td>45</td>
 <td>60</td>
 <td>45</td>
 </tr>
 <tr>
 <td>60</td>
 <td>90</td>
 <td>90</td>
 </tr>
</table>

Hasil :

15	15	30
45	60	45
60	90	90

Table Heading

Elemen <th> digunakan hanya seperti elemen <td> tapi itu tujuannya adalah untuk mewakili menuju kolom atau berturut-turut. Bahkan jika sel tidak memiliki konten, Anda masih harus menggunakan <td> atau <th> elemen untuk mewakili adanya sel kosong.

Menggunakan elemen <th> untuk heading membantu orang yang gunakan pembaca layar, tingkatkan kemampuan mesin pencari untuk mengindeks halaman Anda, dan juga memungkinkan Anda untuk mengontrol tampilan tabel lebih baik ketika Anda mulai menggunakan CSS.

Anda dapat menggunakan atribut lingkup pada elemen <th> untuk menunjukkan apakah itu heading untuk kolom atau baris. Itu bisa mengambil nilai: baris untuk menunjukkan judul untuk baris atau col untuk menunjukkan menuju kolom.


				
<table>
 <tr>
 <th></th>
 <th scope="col">Senin</th>
 <th scope="col">Selasa</th>
 </tr>
 <tr>
 <th scope="row">Tiket terjual:</th>
 <td>120</td>
 <td>135</td>
 </tr>
 <tr>
 <th scope="row">Total penjualan:</th>
 <td>$600</td>
 <td>$675</td>
 </tr>
</table>

Hasil :

	Senin	Selasa
Tiket terjual:	120	135
Total penjualan:	$600	$675

Spanning Columns

Terkadang Anda mungkin membutuhkan entri dalam tabel untuk diregangkan melintasi lebih dari satu kolom. Atribut colspan dapat berupa digunakan pada elemen <th> atau <td> dan menunjukkan berapa banyak kolom sel yang harus dijalankan.


 				
 <table>
  <tr>
  <th></th>
  <th>9am</th>
  <th>10 pagi</th>
  <th>11am</th>
  <th>12am</th>
  </tr>
  <tr>
  <th>Senin</th>
  <td colspan="2">Geografi</td>
  <td>Matematika</td>
  <td>Seni</td>
  </tr>
  <tr>
  <th>Selasa</th>
  <td colspan="3">Gym</td>
  <td>Beranda Ec</td>
  </tr>
 </table>

Hasil :

	9am	10 pagi	11am	12am
Senin	Geografi		Matematika	Seni
Selasa	Gym			Beranda Ec

Pada contoh di atas Anda dapat melihat jadwal dengan lima kolom; kolom pertama berisi judul untuk itu baris (hari), empat sisanya mewakili slot waktu satu jam .

Jika Anda melihat sel tabel itu mengandung kata 'Geografi' Anda akan melihat bahwa nilai atribut colspan adalah 2, yang menunjukkan bahwa sel harus berjalan melintasi dua kolom. Di ketiga baris, 'Gym' berjalan di tiga kolom.

Anda dapat melihat bahwa yang kedua dan baris ketiga memiliki lebih sedikit <td> elemen daripada yang ada kolom. Ini karena, ketika sebuah sel memanjang lebih dari satu kolom, <td> atau <th> sel yang seharusnya ada di tempat sel yang lebih luas tidak termasuk dalam kode.

Spanning Row

Anda mungkin juga memerlukan entri untuk direntangkan lebih dari satu baris. Atribut berupa rowspan dapat digunakan pada elemen <th> atau <td> untuk menunjukkan berapa banyak baris sel harus merentang ke bawah .


				
<table>
  <tr>
  <th></th>
  <th>ABC</th>
  <th>BBC</th>
  <th>CNN</th>
  </tr>
  <tr>
  <th>6pm - 7pm</th>
  <td rowspan="2">Film</td>
  <td>Komedi</td>
  <td>Berita</td>
  </tr>
  <tr>
  <th>7pm - 8pm</th>
  <td>Olahraga</td>
  <td>Urusan Saat Ini</td>
  </tr>
 </table>

Hasil :

	ABC	BBC	CNN
6pm - 7pm	Film	Komedi	Berita
7pm - 8pm	Film	Olahraga	Urusan Saat Ini

Contoh table


					
								
<html>
 <head>
  <title>Tabel</title>
 </head>
 <body>
  <table>
  <thead>
  <tr>
  <th></th>
  <th scope="col">Hosting awal rumah</th>
  <th scope="col">Hosting bisnis premium</th>
  </tr>
  </thead>
  <tbody>
  <tr>
  <th scope="row">Ruang disk</th>
  <td>250mb</td>
  <td>1gb</td>
  </tr>
  <tr>
  <th scope="row">Bandwidth</th>
  <td>5gb per bulan</td>
  <td>50gb per bulan</td>
  </tr>
  <!-- lebih banyak baris seperti dua di atas di sini -->
  </tbody>
  <kaki>
  <tr>
  <td></td>
  <td colspan="2">Daftar sekarang dan hemat 10%!</td>
  </tr>
  </tfoot>
  </table>
 </tbody>
 </html>

	Hosting awal rumah	Hosting bisnis premium
Ruang disk	250mb	1gb
Bandwidth	5gb per bulan	50gb per bulan
	Daftar sekarang dan hemat 10%!

Contoh tabel

CSS


					
									
.content {
	 border-collapse: collapse;
	 margin: 25px 0; 
	 font-size: 0.9em; 
	 min-width: auto; 
	 border-radius: 5px 5px 0 0;
	 overflow: hidden; 
	 box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
	  } 
.content thead tr { 
	 background-color: #1B1464; 
	 color: #ffffff; 
	 text-align: left; 
	 font-weight: bold; 
	 } .content th, .content td {
	  padding: 12px 15px;
	   } 
.content tbody tr { 
	  border-bottom: 1px solid #dddddd;
	   }
.content tbody tr:nth-of-type(even) { background-color: #f3f3f3; 
} 
.content tbody tr:last-of-type { border-bottom: 2px solid #1B1464;
 } 
.content tbody tr.r { 
	   font-weight: bold; color: #1B1464; 
	   }

HTML


					
<table class="content"> 
<thead> 
<tr> 
<th>Reg:No</th> 
<th>Nama</th> 
<th>Poin</th> 
<th>peringkat</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>0011</td> 
<td>Jono</td> 
<td>510</td> 
<td>56</td> 
</tr> 
<tr class="r"> 
<td>1520</td> 
<td>Doris</td> 
<td>720</td> 
<td>45</td> 
</tr> 
<tr> 
<td>1812</td> 
<td>Sara</td> 
<td>250</td> 
<td>225</td> 
</tr> 
</tbody> 
</table>

Hasil :

Reg:No	Nama	Poin	peringkat
0011	Jono	510	56
1520	Doris	720	45
1812	Sara	250	225

Selanjutnya

Ask Belajar HTML untuk pemula, menambahkan foto atau images kedalam struktur HTML AdityaDees

Web desain

Adityads Blogs 13:49 0

Ada banyak alasan mengapa Anda mungkin ingin menambahkan gambar ke halaman web: Anda mungkin ingin menyertakan logo, foto, ilustrasi, diagram, atau bagan.

Ada beberapa hal yang perlu dipertimbangkan ketika memilih dan menyiapkan gambar untuk situs Anda, tetapi meluangkan waktu untuk mendapatkannya tepat akan membuatnya terlihat lebih menarik dan profesional. Dalam bab ini Anda akan belajar bagaimana:

Sertakan gambar di halaman web Anda menggunakan HTML
Pilih format gambar yang akan digunakan
Tampilkan gambar dengan ukuran yang tepat
Optimalkan gambar untuk digunakan di web untuk membuat halaman memuat lebih cepat

Anda juga dapat menggunakan CSS untuk menyertakan gambar di halaman Anda menggunakan properti background-image, yang akan Anda temui ketika nanti belajar CSS.

Untuk menambahkan gambar ke halaman anda perlu menggunakan elemen. Ini kosong elemen (yang berarti ada tidak ada tag penutup). Itu harus membawa atribut berikut:

1. <src> Ini memberi tahu browser di mana itu dapat menemukan file gambar. Ini biasanya akan menjadi URL relatif menunjuk ke gambar di situs sendiri.

2. <alt> Ini memberikan deskripsi teks dari gambar yang menjelaskan gambar jika Anda tidak dapat melihatnya.

3. <title> Anda juga dapat menggunakan judul atribut dengan elemen untuk memberikan informasi tambahan tentang gambar. Sebagian besar browser akan menampilkan konten ini atribut dalam tootip ketika pengguna melayang di atas gambar.

Teks yang digunakan dalam atribut alt sering disebut sebagai teks alternatif. Itu harus memberikan deskripsi yang akurat untuk konten gambar sehingga dapat dipahami oleh perangkat lunak pembaca layar.

Jika gambar hanya untuk membuat halaman terlihat lebih menarik (dan itu tidak memiliki arti, seperti garis pemisah grafik), maka atribut alt harus tetap digunakan tapi kutipan harus ditinggalkan kosong.


				
								
<img src="images/wq.jpg" alt="deskripsi" title="Belajar HTML untuk membuat situs web sendiri." />

Hasil:

Menambahkan tinggi dan lebar gambar

Anda juga akan sering melihat <img>elemen menggunakan dua atribut lainnya yang menentukan ukurannya:

height Ini menentukan ketinggian gambar dalam piksel.
Width Ini menentukan lebar gambar dalam piksel.

Gambar sering membutuhkan waktu lebih lama untuk memuat dari kode HTML itu membuat sisa halaman. Oleh karena itu, adalah ide yang baik untuk tentukan ukuran gambar sehingga browser dapat merender sisa teks di halaman sambil meninggalkan jumlah yang tepat ruang untuk gambar yang diam Memuat. Ukuran gambar semakin ditentukan menggunakan CSS bukan dari HTML .


				

<img src="images/wq.jpg" alt="Belajar HTML" width="600" height="450" />

Hasil:

Contoh penempatan gambar

Di mana gambar ditempatkan dalam kode akan mempengaruhi bagaimana itu ditampilkan. Berikut adalah tiga contoh penempatan gambar yang menghasilkan hasil yang berbeda:

Sebelum paragraf Paragraf dimulai dengan garis yang baru setelah gambar.
Di awal kalimat Baris pertama teks sejajar dengan bagian bawah gambar.
Ditengah kalimat Gambar ditempatkan di antara paragraf dari kata-kata itu muncul di paragraf .


				
<img src="gambar/wq.png" alt="Belajar HTML" width="100"
height="100" />
 <p>Belajar HTML itu mudah untuk membuat situs web sendiri, ternyata sangat menyenangkan.
 				</p>
 <hr/>
 
 <p><img src="gambar/wq.png" alt="Belajar HTML" width="100"
 height="100" />Belajar HTML itu mudah untuk membuat situs web sendiri, ternyata sangat menyenangkan.</p>
 <hr />
 <p>Belajar HTML itu mudah untuk membuat situs web sendiri, ternyata sangat menyenangkan..<img
 src="gambar/wq.png" alt="Belajar HTML" width="100"
 height="100" />Belajar HTML mudah untuk membuat situs web sendiri, ternyata sangat menyenangkan.</p>

Hasil :

Belajar HTML itu mudah untuk membuat situs web sendiri, ternyata sangat menyenangkan.

Belajar HTML itu mudah untuk membuat situs web sendiri, ternyata sangat menyenangkan..Belajar HTML mudah untuk membuat situs web sendiri, ternyata sangat menyenangkan.

Kode Lama: Menyelaraskan Gambar Horizontal

Atribut align adalah biasanya digunakan untuk menunjukkan bagaimana bagian lain dari halaman harus mengalir di sekitar gambar. Ini telah dihapus dari HTML5 dan situs web baru harus menggunakan CSS untuk mengontrol perataan gambar seperti yang akan Anda lihat di halaman berikutnya nanti.

Saya telah membahasnya di sini karena kemungkinan besar Anda akan menemukan itu jika Anda melihat kode yang lebih lama, dan karena beberapa editor visual masih masukkan atribut ini ketika Anda menunjukkan bagaimana gambar seharusnya selaras. Atribut align dapat mengambil nilai horizontal ini:

Left Ini menyelaraskan gambar ke kiri (memungkinkan teks mengalir di sekitarnya sisi kanan).
Right Ini menyelaraskan gambar ke kanan (memungkinkan teks mengalir di sekitarnya sisi kiri).


				
<img src="images/wq.jpg" alt="Belajar HTML" width="50%"
height="50%" align="right" />
 <p>Belajar HTML itu mudah untuk membuat situs web sendiri, ternyata sangat menyenangkan.</p>
 <hr/>
 
 <p><img src="images/wq.jpg" alt="Belajar HTML" width="50%"
 height="50%" align="left" />Belajar HTML itu mudah untuk membuat situs web sendiri, ternyata sangat menyenangkan.</p>

Hssil :

Belajar HTML itu mudah untuk membuat situs web sendiri, ternyata sangat menyenangkan.

Gambar dan Keterangan Gambar

Gambar sering datang dengan keterangan. HTML5 telah diperkenalkan elemen <figure> baru untuk berisi gambar dan keterangannya sehingga keduanya berhubungan. Anda dapat memiliki lebih dari satu gambar di dalam <figure>elemen selama mereka semua berbagi caption yang sama.

Elemen <figcaption> telah ditambahkan ke HTML5 secara berurutan untuk mengizinkan penulis halaman web menambahkan keterangan untuk sebuah gambar. Sebelum elemen-elemen ini dibuat tidak ada cara untuk kaitkan elemen <img> dengan caption-nya.


				
<figure>
<img src="images/wq.jpg" alt="Belajar HTML">
<br />
 <figcaption>
Belajar HTML itu mudah untuk membuat situs web sendiri, ternyata sangat menyenangkan.
 				
 </figcaption>
</figure>

Hasil :

Belajar HTML itu mudah untuk membuat situs web sendiri, ternyata sangat menyenangkan .Belajar HTML itu mudah untuk membuat situs web sendiri, ternyata sangat menyenangkan.

Selanjutnya

Ask Belajar HTML untuk pemula, membuat daftar list dan tautan link AdityaDees

Web desain

Adityads Blogs 03:04 0

HTML menyediakan cara untuk membuat daftar terurut seperti 1,2,3.. dan daftar tidak berurutan bukan dengan angka. Daftar adalah cara yang baik untuk menyusun daftar item dan membiarkan gaya HTML bekerja.

Terkadang Ada banyak kesempatan ketika kita perlu menggunakan daftar list ini .HTML memberi kita tiga jenis list yang berbeda:

Ordered list adalah daftar di mana setiap item dalam daftar berada bernomor. Misalnya, daftar tersebut mungkin berupa serangkaian langkah untuk resep yang harus dilakukan dalam rangka, atau kontrak hukum di mana setiap titik perlu diidentifikasi oleh bagian.
Unordered list adalah daftar yang dimulai dengan poin-poin (bukan karakter yang menunjukkan urutan).
Definition list terdiri dari satu set istilah bersama dengan definisi untuk masing-masing istilah tersebut.

Membuat Ordered List

Daftar yang dipesan dibuat dengan elemen <ol>. Lalu kemudian Setiap item dalam daftar ditempatkan antara tag <li> pembuka dan tag penutup </li>. Untuk menggunakan list-style atau memperindah tampilan list diperlukan kombinasi dengan property CSS .


				
<ol>
 <li>Potong kentang menjadi empat bagian<li>
 <li>Rebus dalam air asin selama 15-20
  menit sampai empuk</li>
 <li>Panaskan susu, mentega, dan pala</li>
 <li>Tiriskan kentang dan haluskan</li>
 <li>Campurkan ke dalam adonan susu</li>
 </ol>

Hasil:

Potong kentang menjadi empat bagian
Rebus dalam air asin selama 15-20 menit sampai empuk
Panaskan susu, mentega, dan pala
Tiriskan kentang dan haluskan
Campurkan ke dalam adonan susu

Membuat Unordered List

Daftar tidak berurutan dibuat dengan elemen <ul>. Setiap item dalam daftar ditempatkan antara tag <li> pembuka dan tag penutup </li>.


				
				
<ul>
 <li>1kg kentang King Edward</li>
 <li>100ml susu</li>
 <li>50g mentega asin</li>
 <li>pala yang baru diparut</li>
 <li>Secukupnya garam dan merica</li>
 </ul>

Hasilnya :

1kg kentang King Edward
100ml susu
50g mentega asin
pala yang baru diparut
Secukupnya garam dan merica

Membuat Definition List

Daftar definisi dibuat dengan elemen <dl> dan biasanya terdiri dari serangkaian istilah dan definisi mereka. Di dalam elemen <dl> Anda akan biasanya melihat pasangan <dt> dan <dd> elemen.

Terkadang Anda mungkin melihat daftar di mana ada dua istilah yang digunakan untuk definisi yang sama atau dua definisi yang berbeda untuk hal yang memiliki ketentuan sama.


				
								
<dl>
 <dt>Sashimi</dt>
 <dd>Irisan ikan mentah yang disajikan dengan
  bumbu seperti lobak daikon parut atau
  akar jahe, wasabi dan kecap</dd>
 <dt>Skala</dt>
 <dd>Perangkat yang digunakan untuk mengukur secara akurat
  berat bahan</dd>
 <dd>Teknik menghilangkan timbangan
  dari kulit ikan</dd>
 <dt>Makanan</dt>
 <dt>Scamorzo</dt>
 <dd>Keju Italia yang biasanya terbuat dari bahan utuh
  susu sapi (meskipun dibuat secara tradisional
  dari susu kerbau)</dd>
 </dl>

Hasilnya :

Sashimi: Irisan ikan mentah yang disajikan dengan bumbu seperti lobak daikon parut atau akar jahe, wasabi dan kecap
Skala: Perangkat yang digunakan untuk mengukur secara akurat berat bahan; Teknik menghilangkan timbangan dari kulit ikan
Makanan
Scamorzo: Keju Italia yang biasanya terbuat dari bahan utuh susu sapi (meskipun dibuat secara tradisional dari susu kerbau)

Penggunaan daftar list bersarang

Anda dapat memasukkan daftar kedua di dalam elemen <li> untuk membuat sub- daftar atau daftar bersarang. Browser menampilkan daftar bersarang menjorok lebih jauh dari Daftar induknya . Dalam daftar tak berurutan bersarang, browser biasanya akan berubah gaya poin juga.


				
				
				
<ul>
<li>Mousses</li>
<li>Pastries
 <ul>
 <li>Croissant</li>
 <li>Mille-feuille</li>
 <li>Palmier</li>
 <li>Profiterole</li>
 </ul>
</li>
<li>Tarts</li>
</ul>

Hasil:

Mousses
Pastries
- Croissant
- Mille-feuille
- Palmier
- Profiterole
Tarts

Contoh Penggunaan Struktur List

Di sini Anda dapat melihat judul utama diikuti oleh paragraf pengantar. Dan unordered list digunakan untuk menguraikan bahan-bahan dan daftar yang diurutkan digunakan untuk menggambarkan langkah-langkahnya.


				
								
<html>
 <head>
  <title>Daftar</title>
 </head>
 <body>
  <h1>Telur Orak-arik</h1>
  <p>Telur orak-arik adalah salah satu makanan yang mudah di buat.  Ini adalah
  resep telur orak-arik yang kaya rasa.</p>
  <h2>Bahan</h2>
  <ul>
  <li>2 butir telur</li>
  <li>1 sdm mentega</li>
  <li>2 sdm krim</li>
  </ul>
  <h2>Metode</h2>
  <ol>
  <li>Lelehkan mentega dalam wajan dengan api sedang
  panas</li>
  <li>Campur perlahan telur dan krim dalam mangkuk</li>
  <li>Setelah mentega meleleh tambahkan krim dan telur</li>
  <li>Gunakan spatula lipat telur dari tepi
  panci ke tengah setiap 20 detik (seolah-olah
  kamu sedang membuat telur dadar)</li>
  <li>Jika telur masih basah, angkat dari
  panas (akan terus masak di piring
  sampai disajikan)</li>
  </ol>
 </body>
 </html>

Hasil :

Daftar

Telur Orak-arik

Telur orak-arik adalah salah satu makanan yang mudah di buat. Ini adalah resep telur orak-arik yang kaya rasa.

Bahan

2 butir telur
1 sdm mentega
2 sdm krim

Metode

Lelehkan mentega dalam wajan dengan api sedang panas
Campur perlahan telur dan krim dalam mangkuk
Setelah mentega meleleh tambahkan krim dan telur
Gunakan spatula lipat telur dari tepi panci ke tengah setiap 20 detik (seolah-olah kamu sedang membuat telur dadar)
Jika telur masih basah, angkat dari panas (akan terus masak di piring sampai disajikan)

Menautkan ke Situs Lain

Tautan dibuat menggunakan tag <a>elemen yang memiliki atribut disebut dengan href. Nilai dari atribut href adalah halaman yang Anda tuju ,ketika seseorang mengklik akan di arahkann halaman yang anda maksus .

Pengguna dapat mengklik apa saja yang muncul di antara pembukaan tag <a> dan penutup tag </a>dan akan dibawa ke halaman ditentukan dalam atribut href.
Saat Anda menautkan ke situs web yang berbeda, nilai href atribut akan menjadi web lengkap alamat situs, yaitu dikenal sebagai URL absolut.


				
<p>Ulasan Film:
 <ul>
  <li><a href="http://www.namasitus.com">
  Kekaisaran</a></li>
  <li><a href="http://www.namasitus.com">
  Metakritik</a></li>
  <li><a href="http://www.namasitus.com">
  Tomat </a></li>
  <li><a href="http://www.namasitus.com">
  Variasi</a></li>
 </ul>
 </p>

Hasil :

Ulasan Film:

Setiap web halaman memiliki URL sendiri. contoh di atas adalah alamat web yang akan Anda ketik ke browser jika Anda ingin menautkan ke halaman tertentu .

URL absolut dimulai dengan nama domain untuk situs tertuju dan dapat diikuti oleh jalan ke halaman tertentu. Jika tidak ada halaman ditentukan, situs akan menampilkan beranda.

Menautkan ke Halaman Lain

Saat Anda menautkan ke halaman yang lain dalam situs yang sama, Anda tidak perlu menentukan nama domain di URL. Anda dapat menggunakan singkatan yang dikenal sebagai URL relatif.

Jika semua halaman situs ada di folder yang sama, lalu masukan nama filenya ke atribut href .tetapi Jika Anda memiliki halaman yang berbeda dan tidak dalam satu folder. maka Andadapat menggunakan sedikit lebih kompleks sintaks untuk menunjukkan di manahalaman dalam kaitannya dengan saat ini halaman berada.

Anda akan belajar lebih banyak tentang ini di halaman artikel lainya nanti. Jika Anda melihat unduhan kode untuk setiap bab, Anda akan lihat bahwa file index.htmlberisi tautan yang menggunakan URL relatif.


				
<p>
<ul>
 <li><a href="index.html">Home</a></li>
 <li><a href="about-us.html">About</a></li>
 <li><a href="movies.html">Movies</a></li>
 <li><a href="contact.html">Contact</a></li>
</ul>
</p>

Email link

Untuk membuat tautan yang tertuku ke email pengguna atau alamat email tertent, Anda bisa menggunakan elemen. Namun, kali ini nilai atribut href dimulai dengan mailto: dan diikuti oleh alamat email yang anda targetkan.Dan ketika diklik maka tautan link aktif, menuju alamat sesuai yang ditentukan dalam tautan.


				
								
<a href="mailto:namaemal.com">Email contoh</a>

Hasil :

Email contoh

Contoh struktur link

Contoh ini adalah halaman web tentang film. Elemen <h1> digunakan dengan atribut id di bagian atas halaman ,jadi bahwa tautan dapat ditambahkan untuk membawa pembaca dari bagian bawah halaman ke atas. Ada tautan email untuk memungkinkan pembaca menghubungi penulis halaman web.

Ada juga sejumlah tautan ke URL yang memenuhi syarat. Ini link ke berbagai festival film. Di bawah daftar ini adalah tautan ke URL relatif yang merupakan halaman "tentang" yang berada di direktori yang sama.


				
<html>
 <head>
  <title>Tautan</title>
 </head>
 <body>
  <h1 id="top">Film Rakyat</h1>
  <h2>Buku Harian Festival</h2>
  <p>Berikut adalah beberapa festival film yang kami
  akan hadir tahun ini.<br />Tolong
  <a href="mailto:namaemail@example.com">
  hubungi kami</a> jika Anda ingin lebih
  informasi.</p>
  <h3>Januari</h3>
  <p><a href="http://www.namaURL.com">
  Festival Film Sundance</a><br />
  Park City, Utah, AS<br />
  20 - 30 Januari 2011</p>
  <h3>Februari</h3>
  <p><a href="http://www.namaURL.com">
  Tropfest</a><br />
  Sydney, Australia<br />
  20 Februari 2011</p>
  <!-- konten tambahan -->
  <p><a href="about.html">Tentang Film Rakyat</a></p>
  <p><a href="#top">Halaman bagian atas</a></p>
 </body>
 </html>

Hasil:

Film Rakyat

Buku Harian Festival

Berikut adalah beberapa festival film yang kami akan hadir tahun ini.
Tolong hubungi kami jika Anda ingin lebih informasi.

Januari

Festival Film Sundance
Park City, Utah, AS
20 - 30 Januari 2011

Februari

Tropfest
Sydney, Australia
20 Februari 2011

Tentang Film Rakyat

Halaman bagian atas

Selanjutnya

AdityaDees

Hot

https://publishers.chitika.com/

10 February 2022

Ask Cara Membuat Form Login Html Tanpa Database Mysql AdityaDs

Cara Membuat Form Login Html Tanpa Database Mysql

02 September 2021

Ask Belajar HTML untuk pemula ,mengenal tag Meta dan Iframe AdityaDees

Iframe

Informasi tentang halaman <meta>

01 September 2021

Ask Belajar HTML membuat Form untuk pemula AdityaDees

Input

Password input

Textarea

Contoh form radio button

Contoh form checkbox

Contoh Drop Down List Box

Contoh Form Multiple Select Box

Contoh File input Box

Contoh submit Button

Contoh image Button

Contoh Labelling Form Controls

Contoh Grouping Form Elements

Contoh Form Validation

Contoh Form Search Input

Example Form

31 August 2021

Ask Belajar HTML membuat tabel sederhana untuk pemula AdityaDees

Struktur basic tabel

Table Heading

Spanning Columns

Spanning Row

Contoh table

Contoh tabel

30 August 2021

Ask Belajar HTML untuk pemula, menambahkan foto atau images kedalam struktur HTML AdityaDees

Menambahkan tinggi dan lebar gambar

Contoh penempatan gambar

Kode Lama: Menyelaraskan Gambar Horizontal

Gambar dan Keterangan Gambar

Ask Belajar HTML untuk pemula, membuat daftar list dan tautan link AdityaDees

Membuat Ordered List

Membuat Unordered List

Membuat Definition List

Penggunaan daftar list bersarang

Contoh Penggunaan Struktur List

Telur Orak-arik

Bahan

Metode

Menautkan ke Situs Lain

Menautkan ke Halaman Lain

Email link

Contoh struktur link

Film Rakyat

Buku Harian Festival

Januari

Februari

https://payclick.com/

Author Details

Recent

Popular

Comments

ADNOW

Archive

Sponsor

Tags

Total Pageviews