e-amik - Pada tutorial sebelumnya saya telah menjelaskan tentang Dasar-Dasar HTML, dalam tutorial kali ini saya akan melanjutkannya dengan memberi style pada beberapa tag tersebut misalnya: Memberi warna pada text, table, header.| No | Nama | Alamat |
|---|---|---|
| 1 | Busra Ahmad | Lembang |
| 2 | Umi Setiyani | Lembang |
| 3 | Saddam Husain | Pakkola |
| 4 | Kaco' | Austria |
<html>
<head>
<title>Tag Style Html</title>
<style type="text/css">
.judul {
font-family: Verdana, Geneva, sans-serif;
color: #096;
}
#mahasiswa
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:300px;
border-collapse:collapse;
text-align: center;
}
#mahasiswa td, #mahasiswa th
{
font-size:1em;
border:1px solid #98bf21;
padding:3px 7px 2px 7px;
text-align: left;
}
#mahasiswa th
{
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#ffffff;
}
#mahasiswa tr.alt td
{
color:#000000;
background-color:#EAF2D3;
}
.teks-biru {
color: #00F;
}
.teks-merah {
color: #F00;
}
</style>
</head>
<body>
<h1 class="judul">Table Mahasiswa </h1>
<span class="teks-biru">Cara Memberi Style pada tabel</span>
<br>
<span class="teks-merah">Contoh Tabel:</span>
<br>
<table id="mahasiswa">
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
<tr>
<td>1</td>
<td>Busra Ahmad</td>
<td>Lembang</td>
</tr>
<tr class="alt">
<td>2</td>
<td>Umi Setiyani</td>
<td>Lembang</td>
</tr>
<tr>
<td>3</td>
<td>Saddam Husain</td>
<td>Pakkola</td>
</tr>
<tr class="alt">
<td>4</td>
<td>Kaco</td>
<td>Austria</td>
</tr>
</table>
</body>
</html>
<h1> INI ADALAH HEADING1</h1> <h1> </h1> <h2> INI ADALAH HEADING2</h2> <h2> </h2> <h3> INI ADALAH HEADING3</h3> <h3> </h3> <h4> INI ADALAH HEADING4</h4> <h4> </h4> <h5> INI ADALAH HEADING5</h5> <h5> </h5> <h6> INI ADALAH HEADING6</h6>
<p>Isi dari penjelasan ini merupakan suatu paragraf, jadi defenisi dari paragraf adalah isi dari dokumen atau artikel yang kita buat.</p>
<b>Ini adalah huruf tebal</b> <br /> <i>Ini adalah huruf miring</i> <br /> <div style="text-align: center;"> Ini adalah Huruf rata tengah</div> <br /> <div style="text-align: left;"> Ini adalah huruf rata kiri </div> <br /> <div style="text-align: right;"> Ini adalah huruf rata kanan </div> <br /> <div style="text-align: justify;"> Ini adalah huruf rata kiri kanan, dapat tampil saat kita membuat suatu artikel yang panjang. </div> <br /> <marquee>Ini adalah huruf berjalan</marquee>
<ul> <li>List1</li> <li>List3</li> <li>List3</li> </ul> <ol> <li>Pertama</li> <li>Kedua</li> <li>Ketiga</li> </ol>
| No | Nama | Alamat |
| 1 | Busra Ahmad | Lembang |
| 2 | Umi Setiyani | Lembang |
<table border="1"> <tbody> <tr> <td>No</td> <td>Nama</td> <td>Alamat</td> </tr> <tr> <td>1</td> <td>Busra Ahmad</td> <td>Lembang</td> </tr> <tr> <td>2</td> <td>Umi Setiyani</td> <td>Lembang</td> </tr> </tbody></table>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>
Contoh Dokumen HTML5
</title>
</head>
<body>
<header>
<h1>
Judul
</h1>
</header>
<nav>
<ul>
<li>
<a href="#">
Home
</a>
</li>
<li>
<a href="#">
About
</a>
</li>
<li>
<a href="#">
Artikel
</a>
</li>
<li>
<a href="#">
Contact Us
</a>
</li>
</ul>
</nav>
<aside>
<div>
<p>
Pengikut
</p>
</div>
<div>
<p>
Kategori
</p>
</div>
<div>
<p>
Arsip
</p>
</div>
</aside>
<section>
<article>
<header>
<h2>
Judul
</h2>
<p>
Konten
</p>
</header>
<p>
Isi
</p>
</article>
</section>
<footer>
<p>
konten
</p>
</footer>
</body>
</html>
<p style="text-align: justify; text-indent: 0.5in;">Contoh pembuatan alinea pada paragraph rata kiri-kanan, terimah kasih telah membaca artikel ini. lihat artikel lain di sini</p>
<p style="text-align: left; text-indent: 0.5in;">Contoh pembuatan alinea pada paragraph rata kiri, terimah kasih telah membaca artikel ini. lihat artikel lain di sini</p>
<p style="text-align: right; text-indent: 0.5in;">Contoh pembuatan alinea pada paragraph rata kanan, terimah kasih telah membaca artikel ini. lihat artikel lain di sini</p>Maka hasilnya akan seperti ini:
<p style="text-align: Center; text-indent: 0.5in;">Contoh pembuatan alinea pada paragraph rata Tengah, terimah kasih telah membaca artikel ini. lihat artikel lain di sini</p>Maka hasilnya akan seperti ini:
<p style="text-align: justify; text-indent: 1in;">Contoh cara menambah ukuran alinea pada paragraph, terimah kasih telah membaca artikel ini. lihat artikel lain di sini</p>Maka hasilnya akan seperti ini: