Pendahuluan HTML

Januari 19, 2022 Posting Komentar

HTML Dasar 1

Cara menjalankan file HTML

Sebelum kita menjalankan file html, sebaiknya kita membuat folder "BelajarHTML" di drive D. Folder ini nanti akan kita gunakan untuk menyimpan file belajar HTML kita.
Selanjutnya bukalah Notepad, atau aplikasi text edtor lainnya. Kemudian ketikan text berikut :

Hello, World

Simpan dengan nama hello.html pada folder "BelajarHTML". Kemudian jalankan file hello.html dengan cara doble klik atau klik kanan->Open With -> Google Chrome (jika menggunakan anda menggunakan web browser Google Chrome)

Struktur dasar HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Judul Website</title>
  </head>
<body>
 
  <p>Hello World</p>
 
</body>
</html>

Cara membuat Judul Heading (tag h1)

Tag h1 digunakan untuk membuat heading atau judul di HTML.
Tag heading di dalam HTML memiliki 6 tingkatan, yaitu h1, h2, h3, h4, h5, dan h6. Tag heading secara default akan ditampilkan oleh web browser dengan huruf tebal (bold). Tampilan dari tag header juga dibuat bertingkat. Tag header h1 memiliki ukuran huruf paling besar, sedangkan h6 terkecil.

<!DOCTYPE html>
<html>
<head>
  <title>penggunaan tag heading</title>
</head>
<body>
  <h1>Judul dengan menggunakan tag h1 </h1>
  <h2>Judul dengan menggunakan tag h2 </h2>
  <h3>Judul dengan menggunakan tag h3 </h3>
  <h4>Judul dengan menggunakan tag h4 </h4>
  <h5>Judul dengan menggunakan tag h5 </h5>
  <h6>Judul dengan menggunakan tag h6 </h6>
</body>
</html>

Cara membuat paragraf (tag p)

Tag p digunakan unutk membuat paragraf

 <p>Ini adalah contoh text pada paragraf 1.</p> 
 <p>Ini adalah contoh text pada paragraf 2.</p>

Cara membuat baris baru (tag br)

 <p>
    Ini adalah contoh text pada paragraf 1.
    <br>
    Ini masih paragraf 1.
</p>

Cara membuat garis horizontal (tag hr)

<h1>Bahasa Utama pada Web </h1>
 
<p>HTML (Hyper Text Markup Language) menggambarkan struktur halaman Web, dan terdiri dari serangkaian elemen. Elemen HTML memberi tahu browser cara menampilkan konten.</p>
 
<hr>
 
<p>CSS adalah bahasa yang menjelaskan bagaimana elemen HTML akan ditampilkan di layar, kertas, atau di media lain. CSS menghemat banyak pekerjaan, karena dapat mengontrol tata letak beberapa halaman web sekaligus.</p>

HTML Dasar 2

Cara Membuat Daftar List (tag ol, ul dan li)

Tag ol mendefinisikan daftar yang diurutkan. Daftar yang diurutkan dapat berupa angka atau abjad.
Tag li digunakan untuk mendefinisikan setiap item daftar.

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Tag ul mendefinisikan daftar yang tidak berurutan.
Gunakan tag ul bersama dengan tag li untuk membuat daftar yang tidak berurutan.

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Cara Membuat Link (tag a)

Tag a mendefinisikan hyperlink, yang digunakan untuk menghubungkan dari satu halaman ke halaman lainnya.

<a href="https://www.w3schools.com">Kunjungi W3Schools.com!</a>

Ini adalah salah satu penulisan hyperlink yang akan membawa anda ke website w3schools.

Cara Menambahkan Gambar(tag img)

Tag img digunakan untuk menyematkan gambar di halaman HTML.

<img src="img_gajah.jpg" alt="Gambar Gajah" width="500" height="600">

Cara Membuat Tabel (tag table)

Tag table mendefinisikan tabel HTML.

Sebuah tabel HTML terdiri dari satu elemen table dan satu atau lebih elemen tr, th, dan td.

Elemen tr mendefinisikan baris tabel, elemen th mendefinisikan header tabel, dan elemen td mendefinisikan kolom tabel.

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

Tabel HTML juga dapat menyertakan elemen caption, colgroup, thead, tfoot, dan tbody.

WebKomp.my.id