Scribd
Unggah
27 tayangan15 halaman

Dasar - Dasar Pemrograman HTML

Pembelajaran Dasar Membuat website menggunakan Script HTML

Diunggah oleh

Ginda nugraha pratama
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
27 tayangan15 halaman

Dasar - Dasar Pemrograman HTML

Pembelajaran Dasar Membuat website menggunakan Script HTML

Diunggah oleh

Ginda nugraha pratama
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 15

PEMROGRAMAN DASAR HTML

HTML (Hyper Text Markup Language)


Bahasa standar untuk membuat halaman Web dimana
menggambarkan struktur halaman Web.

Element HTML di wakili dengan tag seperti :

 “heading”
 “paragraph”
 “table”
 “dll”.

Struktur Code HTML Make Your fisrt website

<!DOCTYPE html> <!DOCTYPE html>


<html> <html>
<head> <head>
<title> <title>My Web</title>
</title> </head>
</head> <body>
<body> Hello World!
</body> </body>
</html>\ </html>
HTML Tag Element

<!DOCTYPE html>

Tag ini muncul di bagian paling atas dari setiap dokumen HTML dan memberitahu
browser bahwa file adalah HTML 5.

<head>

Tag head berisi informasi tentang halaman web itu sendiri. Termasuk judul halaman yang
Anda lihat di atas, berisikan file eksternal apa pun seperti file CSS dan JavaScript, dan
infromasi meta tambahan.

<body>

Tag body adalah tempat konten utama yang akan Anda lihat ditampilkan di layar anda
berada. Anda perlu meletakkan apa pun yang Anda inginkan untuk benar – benar dirender
di antara tag body.
Struktur Component dari Element Tag HTML

<h1 style=”color:blue;”>Hii!</h1>

Element

<h1 style=”color:blue;”>Hii!</h1>

Tag

<h1>

Attribute

Style

Attribute Value

“color blue;”

Contoh Element dari HTML

<p> = Sebagai penanda teks paragraf pertama (Paragraf)

<hr> = Garis horizontal (Horizontal Line)

<br> = Spasi di html (Break Line)

<!—Ini Komentar --> = Sebagai komentar atau bisa juga digunakan sebagai notes
Cara Membuat Judul di HTML

Tag heading merupakan tag yang disediakan oleh HTML untuk membuat sebuah judul
pada teks dalam sebuah halaman web. Tag heading secara default ditampilkan oleh
browser dengan ukuran lebih besar dan lebih tebal (bold) dari teks biasa.

<h1>Heading level 1</h1>

<h2>Heading level 2</h2>

<h3>Heading level 3</h3>

<h4>Heading level 4</h4>

<h5>Heading level 5</h5>

<h6>Heading level 6</h6>

HTML Text Formatting

Melakukan pengaturan atau konfigurasi pada teks yang akan dijadikan isi dari sebuah
halaman web

<p><b>This is Bold</b></p>

<p><i>This is Italic</i></p>

<p>This is<sub>Subcript</sub and

<sup>Superscript</sup></p>
Unordered Lists

<h1>List Buah – buahan yang ada di keranjang :<h1>

<ul>

<li>Pisang</li>

<li>Jeruk</li>

<li>Semangka</li>

<li>Mangga<</li>

<li>Pepaya</li>

</ul>

<!--type=”disc” / “circle” / “square” / ”none” -->

Ordered Lists

<h1>Daftar Nama Mahasiswa :<h1>

<ol>

<li>Pisang</li>

<li>Jeruk</li>

<li>Semangka</li>

<li>Mangga<</li>

<li>Pepaya</li>

</oll>

<!--type=”1” / “a” / “A” / ”i” “I” -->


Tabel HTML

<table border="1" cellpadding="10">


<tr>
<th>Nama</th>
<th>Usia</th>
<th>Asal</th>
</tr>
<tr>
<td>Nanang</td>
<td>22 Tahun</td>
<td>Kalimantan</td>
</tr>
<tr>
<td>Juned</td>
<td>25 Tahun</td>
<td>Jakarta</td>
</tr>
</table>

Column Span

<table border="1" cellpadding="10">


<tr>
<th>Nama</th>
<th>Asal</th>
<th>Domisili</th>
</tr>
<tr>
<td>Nanang</td>
<td colspan=”2”>
<center>Kalimantan</center>
</td>
</tr>
</table>
Row Span

<table border="1" cellpadding="10">


<tr>
<th rowspan="2">Jakarta</th>
<td>- A -</td>
<td>- B -</td>
</tr>
<tr>
<td>- C -</td>
<td>- D -</td>
</tr>
</table>

Insert Image HTML

1. <img src=”img/cst.png” alt=”ini kucing”/>


2. <img src=”tiger.svg” alt=”ini macam” width=”200” height=”200”/>
3. Img src=”url_from_web_jpeg” alt=”ini gambar dari web” width=”200”
height=”200”/>
Absolute Links & Relative Links

1. Absolute Links
<p>
<a href=”https://www.google.com”>
Google
</a>

<p>
<a href=”https://www.yahoo.com”target=”_blank”>
Yahoo
</a>

2. Relative Links
<p>
<a href=”satu.html”>
Halaman 1
</a>

<p>
<a href=”/index.html” target=”_blank”>
Halaman Index
</a>
ID Links
Cara navigasi di satu halaman yang sama

<p>
<a href=”#aku”>Klik untuk cari namaku!</a>
</p>
<h2 id=”kamu”>Asep</h2>
<h2 id=”kamu”>Asep</h2>
<h2 id=”kamu”>Asep</h2>
<h2 id=”kamu”>Asep</h2>
<h2 id=”kamu”>Asep</h2>
<h2 id=”kamu”>Asep</h2>
<h2 id=”aku”>Nanang</h2>

Forms

<form action=””method=”post” >


<label for=”name”>Nama :</label>
<input id=”name” type=”text”>
<br/>
<input type=”password” required>
<br/>
<input type=”checkbox”>
<br/>
<input type=”radio”>
<br/>
<input type=”number” min=”1” max=”10”>
<br/>
<textarea rows=”8” cols=”64”>Ketik Disini</textarea>
<br/>
<input type=”submit” value=”OK”>
</form>
Button

<button type=”button”>
OK
</button>
<button type=”button” onclick=”doSomething();”>
Apply
</button>

Select Forms

<p>Apa warna favoritmu?</p>


<select>
<option>Merah</option>
<option>Kuning</option>
<option>Hijau</option>
<option>Biru</option>
</select>

<p>Apa makanan favoritmu?</p>


<select>
<option>Papeda</option>
<option>Soto kwali</option>
<option>Sate Padang</option>
<option selected>Gudeg</option>
</select>
Option Grups

<p>Minuman Favoritmu?</p>
<select>
<optgroup label=”Jus Buah”>
<option>Jus Apel</option>
<option>Jus Jeruk</option>
<option>Jus Mangga</option>
</optgroup>
</select>
<optgroup label=”Jamu”>
<option>Kencur</option>
<option>Asem</option>
<option>Brotowali</option>
</optgroup>
</select>

Radio Button

<input type=”radio” id=”html” name=”fav_language” value=”HTML”>


<label for=”html”>HTML</label><br>
<input type=”radio” id=”css” name=”fav_language” value=”CSS”>
<label for=”css”>CSS</label><br>
<input type=”radio” id=”javascript” name=”fav_language” value=”JavaScript”>
<label for=”javascript”>JavaScript</label><br>
Field Sets & Legend

<fieldset>
<legend>Data diri</legend>

<p>
<label for=”nama”>Nama:</label>
<input type=”text” name=”nama”>

<p>
<label for=”usia”>Usia:</label>
<input type=”number” name=”usia”>
</fieldset>
TRUCTURING LAYOUT ON HTML

HTML Layout Element


HTML memiliki beberapa element semantic yang menentukan berbagai bagian
halaman web.

 <header> - Mendefinisikan header untuk document atau section


 <nav> - Mendefinisikan satu set link navigasi
 <section> - Mendefinisikan bagian dalam dokumen
 <article> - Mendefinisikan suatu konten artikel
 <aside> - Mendefinisikan bagian samping dari content (seperti sidebar)
 <footer> - Mendefinisikan bagian bawah dari document atau section
 <details> - Mendefinisikan detail tambahan yang dapat dibuka dan
ditutup pengguna sesuai permintaan
 <summary> - Mendefinisikan heading untuk element <details>
HTML Semantic Elements

1. Non Semantic Element (Menceritakan tentang apa isinya)


 <div>
 <span>

2. Semantic Elements (Mendefinisikan isinya dengan jelas)


 <form>
 <table>
 <article>

Division Tag

Division tag atau <div> adalah sebuah tag HTML yang berfungsi mendeskripsikan
bagian atau divisi tertentu yang sifatnya fleksible.

<!DOCTYPE html>
<html>
<head>\
<title></title>
</head>
<body>
<div>Division 1</div>
<divDivision 2</div>
<div>Division 3</div>
</body>
</html>
Span Tag

<!DOCTYPE html>
<html>
<head>\
<title>Span</title>
</head>
<body>
<p>Namaku<span>Mr.X</span>
</body>
</html>

Anda mungkin juga menyukai