Thu. Oct 21st, 2021

HTML adalah sebuah script yang digunakan untuk menampilkan dokumen web. dokumen web sendiri terdiri dari berbagai konten seperti image, video, form dan lainnya. untuk mengakses file html ini diperlukan suatu browser seperti mozilla, chrome, safari apple, dan lainnya. sedangkan untuk melakukan coding atau membuat file html bisa menggunak editor seperti notepad, notepad++, sublime text, dreamweaver dan edito lainnya.

HTML terdiri dari tag-tag seperti <head>, <title>, <body>, <html>, <img>, dan lain-lain.

tag utama html terdiri dari html, head, dan body, untuk struktukturya dapat dilihat dibawah ini.

<html>
  <head>

  </head>

  <body>

  </body>
</html>

untuk bagian head biasanya diberi title judul webnya seperti gambar dibawah ini

caranya dengan menambahkan <title>

<head>
<title>Selamat datang</title>
</head>

Tag <body> digunakan untuk menampilkan text, image, video,tabel, dan konten lainnya pada web, contoh seprti youtube dimana konten  berisi text, video. pada body bisa diwarnai dengan menambahkan bgcolor kemudian masukkan kode atau jenis warna yang ingin ditampilkan

<html>
 <head>
   <title>PWEB TRPL</title>
 </head>
   <body bgcolor="lavender">
    <p>Document HTML yang Pertama</p>
   </body>
</html>

untuk tag <p> itu artinya paragraf, posisi paragraf bisa diatur ke kiri, kanan, tengah dengan menambahkan align.

<p align=”left”>

<p align=”center”>

<p align=”right”>

Praktikum kali ini membahas tentang elemen dasar html. tag heading biasa digunakan untuk membuat judul berita. misalnya judul berita di situs bangka pos ” Bayi Infeksi Otak Harap Ulurkan Tangan Dermawan dan Pemerintah Babel”

Nah utuk judul tersebut menggunakkan heading, heading terdiri dari <h1> sampai dengan <h6>

<html>
 <head>
   <title>PWEB TRPL</title>
 </head>
  <body bgcolor="lavender">
    <h1>Heading one</h1>
    <h2>Heading two</h2>
    <h3>Heading three</h3>
    <h4>Heading four</h4>
    <h5>Heading five</h5>
    <h6>Heading six</h6>
  </body>
</html>

trus bagaimana membuat judul heading berwarna biru? langkahnya tinggal menambahakan style color:blue, seperti sintak dibawah ini

<html>
 <head>
   <title>PWEB TRPL</title>
 </head>
  <body>
    <h2 style="color:blue">Bayi Infeksi Otak Harap Uluran Tangan Dermawan dan Pemerintah Babel</h2>
  </body>
</html>

tag untuk menebalkan kata atau kalimat dengan menggunakan <b>, untuk memiringkan kata atau kalimat dengan menggunakan <i>, dan untuk membuat garis bawah dengan menggunakan <u>. sebagai contoh dapat dilihat pada gambar dibawah ini.

<html>
<head><title>PWEB TRPL </title>
  <body>
    <h2><b>PEMOGRAMAN WEB</b></h2>
    <p><b>Politeknik Manufaktur Negeri Bangka Belitung</b></p>
    <p><i>Information Technology (IT) </i></p>
    <p><u>Teknologi Rekayasa Perangkat Lunak </u></p>
  </body>
</html>

untuk memulai baris baru menggunakan tag <br/>, sebagai contoh

<html>
 <head>
    <title>PWeb TRPPL</title>
 </head>
    <body>
       Politeknik Manufaktur Negeri<br/>Bangka Belitung <br/>2019
    </body>
</html>

Elemen dasar selanjutnya mengenai List Item, sama seperti diword ada list item berbentuk angka, huruf, simbol, dll. ada 2 tipe list item yaitu: Unordered list <ul>: List item tidak berurutan  dan  Ordered list <ol>: List item berurutan.

contoh yg Unordered list :

  •  ini contoh circle
    •  ini contoh square
      • ini contoh disc

untuk tag htmlnya sebagai berikut:

<html>
 <body>

 <ul type="square">
  <li>Pempek</li>
  <li>Bakso</li>
  <li>Lakso</li>
 </ul>

 <ul type="circle">
  <li>Kopi</li>
  <li>Teh</li>
  <li>Susu</li>
 </ul>

 <ul type="disc">
  <li>TE</li>
  <li>TRPL</li>
  <li>MESIN</li>
 </ul>
 </body>
</html>

Tipe untuk list item – ordered list <ol> sebagai berikut:
“A” : A, B, C, …
”a” : a, b, c, …
”I” : I, II, III, …
”i” : i, ii, iii, …
”1” : 1, 2, 3, …

untuk tagnya dapat dilihat pada code dibawah ini:

<html>
 <body>
   <p>Daftar Makanan Favoriteku:</p>
    <ol start="A" type="A"> 
      <li>Bakso</li>
      <li>Lakso</li>
      <li>Otak-otak</li>
      <li>Mie Ayam</li>
   </ol>
</body>
</html>

untuk mengubah tipe yang lainn tinggal diganti pada type dan start

Materi Praktikum 

TUGAS

  1. Silahkan Pelajari Video Diatas
  2. Lakukan Praktik di Lab kemudian buatlah laporan praktikum sesuai dengan materi diatas.
  3. Tugas dikumpulkan pada link ini https://polmanbabelacid0-my.sharepoint.com/:f:/g/personal/riki_afriansyah_polman-babel_ac_id/EjbCFTMDHJdMjzZIKnDRJfEBzWIYnxL0lsMwXWLhFU0DJw?e=oOvMkK
  4. Tugas dikumpulkan pada folder PWEB -> Minggu 2 kemudian buatlah folder dengan format NPM_NAMA. laporan diupload pada folder tersebut