[TUGAS DESAIN WEB] Macam-Macam Tag HTML5 Beserta Fungsinya #PART1 - Welcome to My Blog
» » [TUGAS DESAIN WEB] Macam-Macam Tag HTML5 Beserta Fungsinya #PART1

[TUGAS DESAIN WEB] Macam-Macam Tag HTML5 Beserta Fungsinya #PART1

Oleh

Tag HTML Basic

<!DOCTYPE>   Tag untuk menentukan tipe dokumen
<!DOCTYPE html> <!--penerapan tag doctype-->
<html>
<head>
  <meta charset="utf-8" />
  <title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
Hasilnya
<html>  Tag untuk membuat sebuah dokumen HTML

<!DOCTYPE html>
<html>  <!--penerapan tag html-->
<head>
  <meta charset="utf-8" />
  <title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<p> html </p>
</body>
</html>

Hasilnya
<title>   Tag untuk membuat judul dari sebuah halaman
<!DOCTYPE html>
<html>
<head>
<title>Ini Title</title>
</head>
<body>
</body>
</html>
hasilnya

<body> Tag untuk membuat tubuh dari sebuah halaman
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
Ini Body
</body>
</html>
hasilnya

<h1> to <h6> Tag untuk membuat heading
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<h1>Ini heading 1</h1>
<h2>Ini heading 2</h2>
<h3>Ini heading 3</h3>
<h4>Ini heading 4</h4>
<h5>Ini heading 5</h5>
<h6>Ini heading 6</h6>
</body>
</html>
hasilnya

<p> Tag untuk membuat paragraf
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<p>Ini adalah paragraf.</p>
<p>Ini adalah paragraf.</p>
<p>Ini adalah paragraf.</p>
</body>
</html>
hasilnya

<br>   Memasukan satu baris putus
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<p>
Untuk memutus baris<br>dalam kalimat,<br>gunakan elemen br.
</p>
</body>
</html>
hasilnya

<hr> Tag untuk membuat perubahan dasar kata didalam isi
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<h1>HTML</h1>
<p>HTML adalah .......</p>
<hr>
<h1>CSS</h1>
<p>CSS adalah......</p>
</body>
</html>
hasilnya

<!--...--> Tag untuk membuat komentar
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<!-- ini adalah komentar -->
<p>Isi konten.</p>
<!-- komentar tidak akan ditampilkan di browser -->
</body>
</html>
hasilnya

Tag HTML Form

<form> Tag untuk membuat sebuah form HTML untuk input pengguna
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<form action="/action_page.php">
Nama: <input type="text" name="nama" value="Fendi Setyawan"><br>
NIM: <input type="text" name="nim" value="5150411130"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
hasilnya


<input> Tag untuk membuat sebuah kontrol input
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<form action="/action_page.php">
Nama: <input type="text" name="nama"><br>
NIM: <input type="text" name="nim"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
hasilnya


<textarea> Tag untuk membuat sebuah kontrol input multibaris (text area)
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<textarea rows="4" cols="50">
Isi konten.
</textarea>
</body>
</html>
hasilnya

<button> Tag untuk membuat sebuah tombol yang dapat diklik
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<button type="button" onclick="alert('Hello world!')">Klik Disini!</button>
</body>
</html>
hasilnya

<select> Tag untuk membuat sebuah daftar drop-down
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<select>
  <option value="1">Suzuki</option>
  <option value="2">Honda</option>
  <option value="3">Yamaha</option>
  <option value="4">Viar</option>
</select>
</body>
</html>
hasilnya


<optgroup> Tag untuk membuat sebuah kelompok pilihan yang terkait dalam daftar drop-down
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<select>
  <optgroup label="FTIE">
    <option value="1">TI</option>
    <option value="2">Akuntansi</option>
  </optgroup>
  <optgroup label="FST">
    <option value="1">Arsitektur</option>
    <option value="2">Geologi</option>
  </optgroup>
</select>
</body>
</html>
hasilnya

<option> Tag untuk membuat pilihan dalam daftar drop-down
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<select>
  <option value="1">Suzuki</option>
  <option value="2">Honda</option>
  <option value="3">Yamaha</option>
  <option value="4">Viar</option>
</select>
</body>
</html>
hasilnya


<label> Tag untuk membuat sebuah label untuk sebuah elemen <input>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<form action="/action_page.php">
  <label for="male">Laki - Laki</label>
  <input type="radio" name="L" id="Laki" value="Laki"><br>
  <label for="female">Perempuan</label>
  <input type="radio" name="P" id="Perempuan" value="Perempuan"><br>
  <input type="submit" value="Submit">
</form>
</body>
</html>
hasilnya

<fieldset> Grup unsur terkait dalam bentuk
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<form>
 <fieldset>
  <legend>Biodata:</legend>
  Nama: <input type="text"><br>
  Alamat: <input type="text"><br>
  TTL: <input type="text">
 </fieldset>
</form>
</body>
</html>
hasilnya

<legend> Tag untuk membuat sebuah caption untuk sebuah elemen <fieldset>, < figure>, atau <details>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<form>
 <fieldset>
  <legend>Biodata:</legend>
  Nama: <input type="text"><br>
  Alamat: <input type="text"><br>
  TTL: <input type="text">
 </fieldset>
</form>
</body>
</html>
hasilnya

<datalist> Menentukan daftar pilihan yang telah ditetapkan untuk kontrol input (tag baru HTML5)
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<form action="/action_page.php" method="get">
  <input list="browsers" name="browser">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
  <input type="submit">
</form>
</body>
</html>
hasilnya

<output> Tag untuk membuat hasil penghitungan (tag baru HTML5)
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
</body>
</html>
hasilnya

Tag : Desain Web
0 Komentar untuk "[TUGAS DESAIN WEB] Macam-Macam Tag HTML5 Beserta Fungsinya #PART1"

Back To Top