Skip to content

Instantly share code, notes, and snippets.

@cahyowhy

cahyowhy/bootcamp-hari-1-sampai-inline-styling.html

Last active October 7, 2019 04:15
Show Gist options
  • Save cahyowhy/921f806a7d340f268971aeefa9338b90 to your computer and use it in GitHub Desktop.
Save cahyowhy/921f806a7d340f268971aeefa9338b90 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
bootcamp-hari-1-sampai-inline-styling.html
<!DOCTYPE html>
<html>
<head>
<title>
Bootcamp hari pertama
</title>
</head>
<body>
<!-- contoh heading -->
<h1 style="color: red; text-align: center">Contoh heading</h1>
<h2 style="color: blue; text-align: left;">Contoh heading 2</h2>
<h3 style="color: magenta; text-align: right">Contoh heading 3</h3>
<h4 style="text-decoration: underline">Contoh heading 4</h4>
<h5 style="color: mediumorchid; background-color: moccasin">Contoh heading 5</h5>
<h6>Contoh heading 6</h6>
<!-- properti margin ada 4 dimulai searah jarum jam. top right bottom left => margin: top right bottom left. atau dapat juga 2 properti seperti => margin: 0 auto; (dimana 0 untuk top & bottom, & auto untuk right dan left) -->
<img src="download.jpg" style="width: 150px; margin: 0 auto; display: block">
<!-- contoh paragraf -->
<p style="margin-top: 15px;text-align: justify;margin-bottom: 20px;margin-left: 15px;margin-right: 15px;">
Ipsum mollit dolor veniam fugiat aliquip cupidatat consequat aliquip culpa eiusmod incididunt anim. Commodo enim
et dolore id ut Lorem esse duis deserunt fugiat consectetur eu. In duis officia cupidatat magna minim dolor sunt
tempor aute eiusmod. Tempor ullamco fugiat do id nulla eiusmod adipisicing. Proident fugiat voluptate officia
magna esse id in ullamco.</p>
<span>Tag span</span>
<!-- ctrl+/ untuk membuat komentar ->
<!-- tag br untuk membuat garis baru -->
<br>
<br>
<i>Kalimat miring</i>
<br>
<b>Kalimat bold (cetak tebal)</b>
<!-- list ul (unordered list) -->
<ul>
<!-- untuk menyalin satu line (gunakan perintah shift + alt + down) -->
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
</ul>
<!-- list ol (ordered list) list dengan urutan -->
<ol>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
</ol>
<a href="https://google.com">Ini tag untuk link</a>
<div style="text-align: right;">
<img src="download.jpg" alt="Gambar hasil download" style="width: 100px;display: block;text-align: right;">
</div>
<table border="1">
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
</thead>
<tbody>
<!-- untuk menyalin > 1 baris. block dulu baris nya lalu tekan
shift + alt + down(arrow) -->
<tr>
<td>1</td>
<td>Amir</td>
<td>Sleman</td>
</tr>
<tr>
<td>2</td>
<td>Linda</td>
<td>Jakarta</td>
</tr>
<tr>
<td>2</td>
<td>Linda</td>
<td>Jakarta</td>
</tr>
</tbody>
<!-- ctrl + z undo operation -->
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment