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

Ask Belajar HTML untuk pemula, membuat struktur HTML pertama dengan tag HTML AdityaDees

Web desain

Adityads Blogs 14:32 0

Selamat datang ! di blog kami dalam artikel belajar HTML ,entah anda secara sengaja datang kesini atau di arahkan mesin pencari,yang terpenting penulis ucapkan terimakasih telah berkunjung. Panduan di blog ini akan mengajarkan anda langkah-langkah dasar belajar HTML dan cara membuat struktur situs web pertama anda.

Itu berarti cara menata halaman HTML, cara menambahkan teks dan gambar, cara menambahkan judul dan pemformatan teks, dan cara menggunakan tabel. Jika anda seorang pemula yang ingin belajar HTML ,blog ini akan membantu anda secara praktis.

Dalam artikel ini, anda akan belajar HTML untuk pemula dan anda akan memiliki pengetahuan atau keterampilan untuk membuat situs web dasar dan penulis berharap ini akan menginspirasi Anda untuk mempelajari lebih jauh dunia HTML dalam panduan blog ini.

Apa fungsi HTML

HTML adalah pondasi utama dalam membuat situs web, seperti kita ketika membangun rumah memerlukan pondasi rumah agar kuat, HTML juga memiliki peranan penting dalam pondasi suatu situs web.

Tentunya, HTML tidak melakukan semua fungsi dalam web itu sendiri ,misalnya di kombinasikan dengan CSS, JavaScript dan bahasa lainya yang mungkin dalam artikel blog berikutnya.

Apa itu tag HTML

Tag biasanya digunakan untuk mengawali sebuah baris kode pada HTML dengan tag pembuka dan di akhiri tag penutup.
Contoh : <p> dan </p>

Buka teks editor anda dan tulis kode berikut:


				
								
						<!DOCTYPE HTML> 
< html  lang = "en" > 
  < head > 
    < meta  charset = "UTF-8" > 
    < title > Halaman Web Pertama Saya </ title > 
  </ head > 
  < body >
    <p>Hello world!</p>
  </ body > 
</ html >

Hasilnya :

Hello world!

Anda baru saja telah menjalankan struktur kode HTML sederhana, dibawah ini penjelasan tentang kegunaan tag struktur HTML di atas.

<!DOCTYPE HTML> - Hal pertama adalah deklarasi doctype dari dokumen. Dalam hal ini HTML5. Anda harus selalu menggunakan ini.
<html lang = "en"> - Semua yang dilakukan adalah mengatakan bahwa ini adalah awal dari dokumen HTML.
<head> - Menandai awal dari bagian dokumen HTML yang disebut head. Bagian ini tidak terlihat di halaman web tetapi membawa informasi penting tentang dokumen.
<meta charset = "UTF-8> - Deklarasi pengkodean karakter: UTF 8.
<title> - Judul halaman dapat dilihat di tab jendela browser dan saat Anda mem-bookmark situs di favorit Anda. Anda dapat meletakkan apa pun yang Anda inginkan di antara tag judul.
</head> - Penutupan bagian kepala .
<body> - Inilah semua hal yang akan terlihat di halaman,di dalam ini konten anda di letakan.
<p> - ini adalah tag untuk membuat paragraf pertama.
</body> - Penutup tubuh tag.
</html> - Mengakhiri dokumen .

Jenis Tag HTML

<article> - Elemen ini digunakan untuk mendefinisikan konten independen dalam dokumen, yang mungkin berupa blog, majalah, atau artikel surat kabar.
<aside> - Ini menentukan artikel yang sedikit terkait dengan sisa seluruh halaman.
<audio> - Tag ini di gunakam untuk file audio.
<bdi> - Ini mengisolasi bagian teks yang diformat ke arah lain dari dokumen teks luar.
<data> - Ini menyediakan versi data yang dapat dibaca mesin.
<canvas> - Digunakan untuk menggambar kanvas.
<datalist> - Ini menyediakan fitur lengkap otomatis untuk bidang teks.
<details> - Ini menentukan informasi tambahan atau kontrol yang dibutuhkan oleh pengguna.
<dialog> - Ini mendefinisikan jendela atau kotak dialog.
<figcaption> - Ini digunakan untuk mendefinisikan keterangan untuk elemen <figure>.
<footer> - Ini mendefinisikan bagian untuk footer atau bawah, misalnya seperti bagian copyright.
<header> - ini digunakan untuk mendefinisikan bagian header.
<main> - Digunakan untuk mendefinisikan konten utama.
<mark> - Menentukan sebuah konten yang ditandai atau disorot.
<menuitem> - Mendefinisikan perintah yang dapat dipanggil pengguna dari menu popup.
<meter> - Digunakan untuk mengukur nilai skalar dalam rentang tertentu.
<nav> - Ini digunakan untuk menentukan tautan navigasi dalam dokumen.
<progress> - Menentukan kemajuan tugas.
<rp> - Ini mendefinisikan apa yang akan ditampilkan di browser yang tidak mendukung anotasi ruby.
<rt> - mendefinisikan penjelasan / pengucapan karakter.
<ruby> - Ini mendefinisikan anotasi ruby bersama dengan <rp> dan <rt>.
<section> - mendefinisikan bagian dalam dokumen.
<section> - Ini menentukan heading yang terlihat untuk elemen <detailed>.
<svg> - Biasanya digunakan untuk menampilkan bentuk.
<time> - Digunakan untuk menentukan tanggal dan waktu.
<video> - Digunakan untuk memutar file video dalam HTML.
<video> - Mendefinisikan kemungkinan jeda baris.
- Tag ini biasanya digunakan untuk mengomentari kode HTML sebagai penanda dan tag ini tidak akan muncul ketika di run.
<a> - Tag ini di kenal dengan hyperlink, yang berguna untuk menautkan di sebuah tautan , biasanya di barengi attribut seperti ini <a href="WQ.com"> klik </a>.
<address> - Berisi informasi kontak sebuah situs web.
<area> - Untuk menetapkan area dapam peta gambar.
<base> - Gunakan untuk menetapkan URL dasar.
<bdi> - Berguna untuk bekerja dengan bahasa yang menggunakan teks dari kanan ke kiri.
<bdo> - Gunakan ini untuk mengganti arah teks saat ini. Berguna untuk bahasa yang menggunakan teks dari kanan ke kiri.
<blockquote> Digunakan untuk mengutip dari sumber eksternal. Biasanya dirender sebagai teks indentasi.
<br> - Digunakan untuk break atau sederhananya spasi antara jarak atas dan bawah.
<button> - digunakan untuk membuat sebuah tombol yang bisa di klik, biasanya dengan formulir.
<caption> - untuk di gunakan dalam sebuah keterangan.
<code> dugunakan untuk mendefinisikan sebuah code.
<colgroup> - pada dasarnya sebuah kolom.
<dd> - dugunakan untuk daftar deskripsi, gunakan dengan <dt> dan <dl>.
<del> - digunakan untuk teks yang di hapus ~~- ini adalah contoh.~~
<dfn> - Berguna untuk saat pertama kali mendefinisikan istilah.
<dialog> - kotak dialog.
<div> - untuk mendefinisika sebuah halaman ,atau sebuah kelas baru .
<link> - mendefiniskan hubungan antar documen.
<embed> - wadah untuk konten eksternal.
<fieldset> - mengelompokan item terkait formulir.
<figure> - konten mandiri seperti foto atau diagram.
<form> - Tempat unntuk input pengguna.
<h1> - heading judul level yang paling besar dan di ikuti level yang semakin kecil <h2>, <h3>, <h4>, <h5>, <h6>.
<hr> - Digunakan untuk memisahkan sebuah baris, biasanya dirender dengan garis horizontal.
<iframe> - memingkinkan anda menyematkan halaman lain di dalam halaman.
<img> - Untuk menampilkan halaman dalam sebuah web.
<track> - Digunakan untuk menentukan trek teks dengan <audio> dan <video> .
<div> - Input digunakan dengan berbagai atribut untuk membuat elemen input form.
<kbd> - Digunakan untuk input keyboard. Ini berbeda dengan input teks elemen form .
<label> - untuk menetapkan label ke elemen antarmuka.
<ul> - Mewakili item dasar ,dan biasanya di gunakan dengan <li>.
<nonscript> - berguna untuk menentukan konten yang harus dirender saat skrip tidak didukung.
<ol> - digunskan untuk daftar dengan di mulai dengan angka 1,2,3 dan seterusnya.
<object> - Menyematkan object dalam dokumen.
<optgroup> - pengelompokan objek.
<option> - digunakan dalam mode pilihan bersama <select>.
<param> - Gunakan ketika parameter perlu diteruskan ke objek yang disematkan di dalam dokumen.
<pre> - Untuk teks yang telah diformat sebelumnya. Ini berguna untuk mendemonstrasikan kode, terutama jika ada banyak baris.
<q> - Untuk kutipan.
<rtc> - wadah teks Ruby.
<samp> - contoh kompile yang di dapat dari program komputer tertentu.
<s> - Untuk menandai teks yang tidak lagi relevan.
<script> - Skrip di dalam dokumen HTML diapit oleh tag skrip.
<select> - Digunakan dengan <option> untuk memilih opsi tertentu.
<source> - Digunakan dengan <audio> dan <video> untuk menentukan sumber media.
<sub> Untuk menampilkan subskrip. Berguna untuk matematika, terutama dalam hubungannya dengan <sub> (superscript), contoh 7/₅ + 5 x 8/₄
<table> - Untuk membuat table di HTML.
<tbody> - Baris tabel.
<td> - Data tabel; ini mewakili sel data dalam tabel.
<template> - Mendeklarasikan cuplikan HTML yang dapat digunakan nanti.
<textarea> - Untuk entri teks multi-baris.
<var> - Mendefinisikan variabel dalam konten halaman HTML .
<wbr> - Bungkus baris opsional .

Penulisan teks

Saat anda membuat halaman web, Anda menambahkan sebuah tag yang di kenal sebagai markup ke konten halaman. Tag ini kemudian memberikan makna ekstradan yang mengizinkan browser untuk menunjukkan kepada pengguna struktur yang sesuai untuk halaman anda.

kita akan fokus pada bagaimana cara menambahkan markup ke teks yang muncul di halaman Anda. kita akan belajar tentang ini :

Markup struktural elemen yang dapat Anda gunakan untuk jelaskan judul dan paragraf.
Semantic markup :yang memberikan informasi tambahan,seperti di mana penekanan ditempatkan dalam sebuah kalimat.


				
				
   
   
<h1>Belajar HTML mudah</h1>
		
<h2>Belajar HTML mudah</h2>
		
<h3>Belajar HTML mudah</h3>
		
<h4>Belajar HTML mudah</h4>
		
<h5>Belajar HTML mudah</h5>
		
<h6>Belajar HTML mudah</h6>

Hasil :

Belajar HTML mudah

HTML memiliki enam "level" dari judul :

<h1> merupakan judul utama.
<h2> digunakan sebagai subpos.
Dibawah subjudul seprti <h3>, <h4>, <h5>, <h6> bisa anda gunakan pada teks judul lainya.

Browser menampilkan konten judul kita dengan ukuran yang berbeda. Misalnya isi dari elemen <h1> adalah terbesar, dan isinya elemen <h6> adalah yang terkecil. Ukuran yang tepat di mana masing-masing browser menunjukkan judul dapat sedikit berbeda.

Pengguna juga dapat sesuaikan ukuran teks di peramban browser mereka . Anda akan melihat caranya mengontrol ukuran teks, warnanya, dan font yang digunakan saat kita akan belajar dengan CSS.

Paragraf

Untuk membuat paragraf, kelilingi kata-kata yang membentuk paragraf dengan pembukaan <p>tag dan tag penutup </p>. Secara default, browser akan menampilkan setiap paragraf pada baris baru dengan beberapa ruang di antara itu dan paragraf berikutnya.


				
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>

Hasil:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Bold dan Italic

Dengan menggunakan tag <b> dan </b> kita bisa membuat karakter tebal dalam paragraf kita. Anda dapat mengombinasikan tag ini sebagai penanda dalam paragaraf anda ataupun sebagai pembeda dalam paragraf.

Selain itu, kita juga bisa menggunakan tag lain dalam pargraf kita, misalnya dengan tag <i> dan </i> ini biasanya di gukan sebagai tag pembeda dari sekitarnya di dalam paragraf, misalnya untuk menandai nama tempat, pikiran atau kata-kata asing.


				
							<p>Ini adalah isi teks di dalam paragraf dan ini adalah <li>italic</i></p>
								<p>Ini adalah contoh teks paragraf dan ini adalah <b>bold.</b></p>

Hasil:

Ini adalah isi teks di dalam paragraf dan ini adalah italic

Ini adalah contoh teks paragraf dan ini adalah bold

Superscript dan Subscript

Elemen <sup> digunakan mengandung karakter yang harus superskrip seperti itu sebagai akhiran tanggal atau konsep matematika seperti menaikkan angka menjadi kekuatan seperti sebagai 2².


				
								<p>Pada tanggal 4<sup></sup> September Anda akan belajar tentang E=MC<sup>2</sup>.</p>
<p>Jumlah CO<sub>2</sub> di atmosfer tumbuh sebesar 2ppm pada tahun 2009<sub>1</sub>.</p>

Hasil:

Pada tanggal 4 September Anda akan belajar tentang E=MC².

Jumlah CO₂ di atmosfer tumbuh sebesar 2ppm pada tahun 2009₁.

Sedangkan tag elemant <sub> Elemen digunakan untuk mengandung karakter yang seharusnya menjadi subskrip. Hal ini biasanya digunakan dengan catatan kaki atau bahan kimia rumus seperti H₂.


				
								<p>Jumlah CO<sub>2</sub> di atmosfer
tumbuh sebesar 2ppm pada tahun 2009<sub>1</sub>.</p>

Hasil :

Jumlah CO₂ di atmosfer tumbuh sebesar 2ppm pada tahun 2009₁.

Jeda Baris dan Aturan Horisontal

<br/> tag ini berguna untuk anda memberikan jeda di setiap paragraf. Jika tag tersebut anda gunakan, maka browser akan secara otomatis menunjukkan setiap paragraf atau judul baru pada baris baru.

Untuk membuat jeda antara tema,seperti perubahan topik dalam buku atau adegan baru dalam drama Anda dapat menambahkan aturan horizontal antar bagian menggunakan tag <hr/>.


				
							<p>Bumi<br/>lebih berat seratus ton
setiap hari<br/>karena debu luar angkasa yang berjatuhan.</p>	
	
<hr/>			
				
<p>Venus adalah satu-satunya planet yang berotasi searah jarum jam.</p>
 <hr />
<p>Jupiter lebih besar dari semua planet lain
digabungkan.</p>				
				
</div>

Hasilnya:

Bumi
lebih berat seratus ton setiap hari
karena debu luar angkasa yang berjatuhan.

Venus adalah satu-satunya planet yang berotasi searah jarum jam.

Jupiter lebih besar dari semua planet lain digabungkan.

Ada beberapa elemen yang tidak memiliki kata-kata antara tag pembuka dan penutup seperti <br/> dan <hr/> . Mereka dikenal sebagai elemen kosong dan mereka ditulis berbeda. Elemen kosong biasanya hanya memiliki satu tag.

Semantic Markup

Ada beberapa elemen teks yang tidak dimaksudkan untuk mempengaruhi struktur halaman web Anda, tetapi mereka menambahkan informasi tambahan ke halaman ,mereka dikenal sebagai markup semantik.

Mungkin Anda akan bertemu beberapa elemen lagi yang akan membantu Anda ketika Anda menambahkan teks ke halaman web. Untuk contoh, kamu akan bertemu elemen <em> yang memungkinkan Anda untuk menunjukkan di mana penekanan harus ditempatkan pada yang dipilih kata-kata dan <blockquote>elemen yang menunjukkan bahwa blok teks adalah kutipan.

Alasan menggunakan elemen ini adalah bahwa program lain, seperti pembaca layar atau search engine, dapat menggunakan ekstra informasi ini. Misalnya,suara pembaca layar dapat menambahkan penekanan pada kata-kata di dalam elemen <em>, atau search engine mungkin mendaftarkan bahwa halaman anda menampilkan kutipan jika Anda menggunakan elemen <blockquote>.

Strong dan Emphasis

Penggunaan elemen <strong>menunjukkan bahwa konten memiliki kepentingan yang kuat. Misalnya kata terkandung dalam elemen ini mungkin dikatakan dengan penekanan yang kuat. Secara default, browser akan menampilkan isi dari <strong>elemen dalam huruf tebal.

Selain itu contoh penggunaan lainya adalah pada elemen <em> yang menunjukkan penekanan yang secara halus berubah arti sebuah kalimat. Secara default browser akan menampilkan isi elemen <em>dalam huruf miring.


				
<p><strong>Hati-hati:</strong> Pencopet beroperasi di daerah ini.</p>
 <p>Mainan ini memiliki banyak potongan kecil dan <strong>tidak cocok untuk anak di bawah lima tahun.</strong></p>

<p>Saya <em>berpikir</em> Jono adalah yang pertama.</p>
 <p>Saya pikir <em>Jono</em> adalah yang pertama.</p>
 <p>Saya pikir Jono adalah yang <em>pertama</em>.</p>

Hasil :

Hati-hati: Pencopet beroperasi di daerah ini.

Mainan ini memiliki banyak potongan kecil dan tidak cocok untuk anak di bawah lima tahun.

Saya berpikir Jono adalah yang pertama.

Saya pikir Jono adalah yang pertama.

Saya pikir Jono adalah yang pertama.

Kutipan

Elemen ini <blockquote> digunakan untuk kutipan yang lebih panjang yang membutuhkan sampai seluruh paragraf. seperti bagaimana elemen <p> digunakan di dalam <blockquote>elemen.

Browser cenderung membuat indentasi isi <blockquote>elemen, namun Anda tidak boleh gunakan elemen ini hanya untuk membuat indentasi sepotong teks, sebaiknya Anda melakukan style ini menggunakan CSS.

Anda juga dapat menggunakan elemen <blockquote> untuk kutipan pendek yang ada di dalam sebuah paragraf. Browser adalah seharusnya memberi tanda kutip elemen <blockquote>, namun Internet Explorer tidak oleh karena itu banyak orang menghindari menggunakan elemen <q>.

Abbreviations dan Acronyms

Jika Anda menggunakan singkatan atau akronim, lalu <abbr>elemen dapat digunakan. Sebuah judul atribut pada tag pembuka adalah digunakan untuk menentukan istilah lengkap. Dalam HTML 4 ada yang terpisah <acronym> elemen untuk akronim.

Untuk mengeja selengkapnya bentuk akronim, judul atribut digunakan (seperti dengan <abbr> elemen di atas). HTML5 hanya menggunakan elemen untuk kedua singkatan dan akronim.


				
								
								
<p><abbr title="Professor">Prof</abbr> Stephen Hawking adalah fisikawan teoretis dan
ahli kosmologi.</p>
 <p><acronym title="Aeronautika dan Antariksa Nasional Administration">NASA</acronym> melakukan sesuatu pada benda luar angkasa.</p>

Hasil :

Prof Stephen Hawking adalah fisikawan teoretis dan ahli kosmologi.

NASA melakukan sesuatu pada benda luar angkasa.

Author detail

Elemen <address> memiliki penggunaan yang cukup spesifik: mengandung rincian kontak untuk penulis halaman. Ini dapat berisi alamat fisik, tapi tidak harus.

Untuk misalnya, mungkin juga mengandung nomor telepon atau alamat email. Browser sering menampilkan isi <address>elemen dalam huruf miring.

Anda mungkin juga tertarik sesuatu yang disebut hCard mikroformat untuk menambahkan fisik informasi alamat untuk Anda markup.


				
<address>
 <p><a href="mailto:wq@example.com">
  wq@example.com</a></p>
 <p>742 Evergreen Terrace, Springfield.</p>
 </addres>

Hasil:

wq@example.com

742 Evergreen Terrace, Springfield.

Ini adalah halaman HTML yang sangat sederhana yang menunjukkan markup teks. Markup struktural mencakup elemen seperti <h1>,<h2>, dan <p> dan informasi semantik dalam elemen seperti yang telah kita pelajari dalam artikel di atas ! bagaimana ? mudah bukan belajar Tag HTML.


				
<html>
 <head>
  <title>Teks</title>
 </head>
 <body>
  <h1>Kisah dalam Buku</h1>
  <h2>Bab 1</h2>
  <p>Molly telah menatap keluar jendela selama sekitar satu jam sekarang.  Di mejanya, tergeletak di antara salinan dari <i>Alam</i>, <i>Ilmuwan Baru</i>, dan semuanya jurnal ilmiah lain yang dia miliki
muncul di, adalah salinan dari <cite>On
Jalan</cite>.  Itu adalah buku favorit Molly
sejak kuliah, dan semakin lama dia menghabiskan waktu di sini
empat dinding semakin dia merasa dia perlu
gratis.</p>
  <p>Dia telah menghabiskan sepuluh tahun terakhir di ruangan ini,
duduk di bawah poster dengan kutipan Oscar Wilde menyatakan bahwa <q>Pekerjaan adalah perlindungan dari
orang yang tidak memiliki pekerjaan yang lebih baik</q>.  Meskipun banyak yang menganggap karya perintisnya, terurai rahasia llama <abbr title="Deoxyribonucleic acid">DNA</abbr>, menjadi pencapaian luar biasa, menurut Molly <em>menurut</em>
dia memiliki sesuatu yang lebih baik untuk dilakukan.</p>
 </body>
 </html>

Selanjutnya

Hot

https://publishers.chitika.com/

10 February 2022

Cara Membuat Form Login Html Tanpa Database Mysql

02 September 2021

Iframe

Informasi tentang halaman <meta>

01 September 2021

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

Struktur basic tabel

Table Heading

Spanning Columns

Spanning Row

Contoh table

Contoh tabel

30 August 2021

Menambahkan tinggi dan lebar gambar

Contoh penempatan gambar

Kode Lama: Menyelaraskan Gambar Horizontal

Gambar dan Keterangan Gambar

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

28 August 2021

Apa fungsi HTML

Apa itu tag HTML

Jenis Tag HTML

Penulisan teks

Belajar HTML mudah

Belajar HTML mudah

Belajar HTML mudah

Belajar HTML mudah

Belajar HTML mudah

Belajar HTML mudah

Paragraf

Bold dan Italic

Superscript dan Subscript

Jeda Baris dan Aturan Horisontal

Semantic Markup

Strong dan Emphasis

Kutipan

Abbreviations dan Acronyms

Author detail

https://payclick.com/

Author Details

Recent

Popular

Comments

ADNOW

Archive

Sponsor

Tags