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

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

Oleh

Tag HTML Link

<a>         Tag untuk membuat hyperlink
<link> Tag untuk membuat hubungan antara dokumen dan sumber daya eksternal (paling sering                      digunakan untuk link ke style sheet)
<nav> Tag untuk membuat navigasi link (tag baru HTML5)
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Tugas Individu Desain Web HTML5</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
</body>
</html>
hasilnya
Tag HMTL List
<ul> Tag untuk membuat daftar dengan selain nomor
<ol> Tag untuk membuat daftar dengan nomor
<li>  Tag untuk membuat sebuah item daftar
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>
</body>
</html>
hasilnya


<dl> Tag untuk membuat sebuah daftar definisi
<dt> Tag untuk membuat istilah (item) dalam daftar definisi
<dd> Defines a description of an item in a definition list
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<p>An ordered list:</p>
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
<p>An unordered list:</p>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
</body>
</html>
hasilnya

Tag HTML Table

<table>      Tag untuk membuat tabel
<caption>  Tag untuk membuat sebuah caption tabel
<th>   Tag untuk membuat sebuah sel header tabel
<tr>           Tag untuk membuat baris dalam sebuah tabel
<td>   Tag untuk membuat sel dalam sebuah tabel
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Tugas Individu Desain Web HTML5</title>
  <style>
  table, th, td {
  border: 1px solid black;
  }
</style>
</head>
<body>
<table>
 <caption>Contoh Table</caption>
  <tr>
    <th>Bulan</th>
    <th>Pasien</th>
  </tr>
  <tr>
    <td>Januar1</td>
    <td>100</td>
  </tr>
  <tr>
    <td>Februari</td>
    <td>80</td>
  </tr>
</table>
</body>
</html>
hasilnya

<thead> Mengelompokan isi header dalam sebuah tabel
<tbody> Mengelompokanisi tubuh dalam sebuah tabel
<tfoot> Mengelompokan isi footer dalam sebuah tabel
<col> Menentukan properti kolom untuk setiap kolom dalam elemen <colgroup>
<colgroup> Menentukan kelompok dari satu atau lebih kolom dalam sebuah tabel untuk diformat
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Tugas Individu Desain Web HTML5</title>
  <style>
  thead {color:green;} tbody {color:blue;} tfoot {color:red;} table, th, td {border: 1px solid black;}
  </style>
</head>
<body>
<table>
<colgroup>
    <col span="2" style="background-color:light-blue">
  </colgroup>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>
</body>
</html>
hasilnya


Tag HTML Style

<style> Tag untuk membuat informasi style untuk dokumen
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Tugas Individu Desain Web HTML5</title>
 <style>
 h1 {color:red;}
 p {color:blue;}
</style>
</head>
<body>
<h1>Style heading</h1>
<p>Style paragraph</p>
</body>
</html>
hasilnya

<div> Tag untuk membuat sebuah bagian dalam dokumen
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Tugas Individu Desain Web HTML5</title>
 <style>
 h1 {color:red;}
 p {color:blue;}
</style>
</head>
<body>
<div style="background-color:lightblue">
  <h3>Contoh Div element</h3>
  <p>contoh div element.</p>
</div>
<p>This is some text.</p>
</body>
</html>
hasilnya

<span> Tag untuk membuat sebuah bagian dalam dokumen
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Tugas Individu Desain Web HTML5</title>
 <style>
 h1 {color:red;}
 p {color:blue;}
</style>
</head>
<body>
<p>Contoh <span style="color:blue;font-weight:bold">span</span></p>
</body>
</html>
hasilnya

<header> Tag untuk membuat sebuah header untuk dokumen atau bagian (tag baru HTML5)
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Tugas Individu Desain Web HTML5</title>
</head>
 
<body>
  <header>
  <h1>Desain Web</h1>
  <img src="logo.png" width="50px" height="50px">
</header>
</body>
</html>
hasilnya

<footer> Tag untuk membuat footer untuk dokumen atau bagian (tag baru HTML5)
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Tugas Individu Desain Web HTML5</title>
</head>
 
<body>
 <main>
  <h2>Judul Artikel 1</h2>
  <p>...penjelasan artikel 1...</p>
  <p>... </p>
  <p>... </p>
</main>
<footer>
  <p>...copyright fendi setyawan...</p>
</footer>
</body>
</html>
hasilnya

<section> Tag untuk membuat bagian dalam dokumen (tag baru HTML5)
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Tugas Individu Desain Web HTML5</title>
</head>
 
<body>
  <section>
  <h1>Judul 1</h1>
   <p>...Kumpulan dari konten...</p>
</section>
<section>
  <h1>Judul 1</h1>
  <p>...Kumpulan dari konten...</p>
</section>
</body>
</html>
hasilnya

<article> Tag untuk membuat sebuah artikel (tag baru HTML5)
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Tugas Individu Desain Web HTML5</title>
</head>
 
<body>
 <article>
  <h2>Judul Artikel 1</h2>
  <p>...penjelasan artikel 1...</p>
  <p>... </p>
  <p>... </p>
</article>
<aside>
  <p>...penjelasan tambahan...</p>
</aside>
</body>
</html>
hasilnya

<aside> Tag untuk membuat konten lain selain dari konten halaman (tag baru HTML5)
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Tugas Individu Desain Web HTML5</title>
</head>
 
<body>
 <article>
  <h2>Judul Artikel 1</h2>
  <p>...penjelasan artikel 1...</p>
  <p>... </p>
  <p>... </p>
</article>
<aside>
  <p>...penjelasan tambahan...</p>
</aside>
</body>
</html>
hasilnya

<details> Tag untuk membuat rincian tambahan yang pengguna dapat lihat atau sembunyikan (tag baru HTML5)
<summary> Tag untuk membuat sebuah judul terlihat untuk elemen <detil> (tag baru HTML5)
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Tugas Individu Desain Web HTML5</title>
 <style>
 h1 {color:red;}
 p {color:blue;}
</style>
</head>
<body>
<details>
  <summary>Contoh Detail</summary>
  <p>Nama : Fendi Setyawan</p>
  <p>NIM : 5150411130</p>
</details>
</body>
</html
hasilnya

<dialog> Tag untuk membuat sebuah kotak dialog atau jendela (tag baru HTML5)
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Tugas Individu Desain Web HTML5</title>
</head>
<body>
<dialog> <p>This is an HTML dialog! Click the button to close it.</p> 
<button id="close">Close Dialog</button> </dialog> <button id="show">Show Me the Dialog!</button> 
<script>
var dialog = document.querySelector('dialog'); 
document.querySelector('#show').onclick = function() {
dialog.show();
};
document.querySelector('#close').onclick = function() { 
dialog.close(); 
}; 
</script>
</body>
</html>
hasilnya



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

Back To Top