TEMPLATE LAPORAN Coding

LAPORAN PRAKTIKUM KE-6
PROYEK KOMPUTER DAN PEMROGRAMAN (CODING)
DISUSUN OLEH :
NAMA : YONI SASKIA

NPM : C1C021007
KELAS :B
Nama Asisten Dosen:
Astuti Zahrroh G1A019006
Dosen pengampu : Ir. Hasanudin, MP
PROGRAM STUDI AKUNTANSI

FAKULTAS EKONOMI DAN BISNIS
UNIVERSITAS BENGKULU
2021
LANDASAN TEORI
Pengertian HTML dan Sejarahnya
Hypertext Markup Language atau HTML adalah bahasa markup standar yang
digunakan untuk membuat halaman website dan aplikasi web.
Sejarah HTML dimulai oleh Tim Berners-Lee, seorang ahli fisika di lembaga
penelitian CERN yang berlokasi di Swiss. Versi pertamanya dirilis pada tahun
1991, dengan 18 tag. Sejak saat itu, setiap kali ada versi barunya, pasti akan selalu
ada tag dan attribute (tag modifier) yang juga baru.
Ketika bekerja dengan bahasa markup ini , Anda menggunakan struktur kode
sederhana (tag dan attribute) untuk mark up halaman website. Misalnya, Anda
membuat sebuah paragraf dengan menempatkan enclosed text di antara tag
pembuka <p> dan tag penutup </p>.
<p>This is how you add a paragraph in HTML.</p>
<p>You can have more than one!</p>
Berkat popularitasnya yang terus meningkat, bahasa markup ini kini dianggap
sebagai standar web resmi. Spesifikasi HTML dikelola dan dikembangkan oleh
World Wide Web Consortium (W3C). Berdasarkan HTML Element Reference
milik Mozilla Developer Network, saat ini ada 140 tag HTML, meskipun
sebagiannya sudah tidak lagi didukung oleh beberapa versi terbaru browser.
Kemudian, pada tahun 2014, HTML5 mulai diperkenalkan. Dengan

diperkenalkannya HTML5, terdapat semantic baru seperti <artcile>, <header>,
dan <footer> yang memperjelas bagian-bagian dalam konten.
Fungsi dan Cara Kerja HTML
HTML adalah singkatan dari Hypertext Markup Language, yaitu bahasa markup
standar untuk membuat dan menyusun halaman dan aplikasi web. Anda bisa
menggunakan bahasa markup ini untuk bagian paragraf, heading, maupun link
pada suatu web page.
1
Cara Kerja HTML
File HTML diakhiri dengan ekstensi .html atau .htm. Ekstensi file ini bisa dilihat
dengan mengunakan web browser apa pun (seperti Google Chrome, Safari, atau
Mozila Firefox). Browser tersebut membaca file HTML dan merender kontennya
sehingga user internet bisa melihat dan membacanya.
Biasanya, rata-rata situs web menyertakan sejumlah halaman HTML yang

berbeda-beda. Contohnya, halaman beranda, ‘Tentang Kami’, halaman kontak
memiliki dokumennya sendiri-sendiri.
Masing-masing halaman tersebut terdiri atas serangkaian tags (bisa disebut juga
elements), yang tersusun untuk membentuk sebuah halaman website. Tag tersebut
membuat hierarki yang menyusun konten hingga menjadi bagian, paragraf,
heading, dan block konten lainnya.
Sebagian besar elemen bahasa markup ini memiliki tag pembuka dan penutup
yang menggunakan syntax <tag></tag>. Berikut contoh kode dari susunan atau
struktur HTML:
<div>
<h1>The Main Heading</h1>
<h2>A catchy subheading</h2>
<p>Paragraph one</p>
<img src="/" alt="Image">
<p>Paragraph two with a <a href="https://example.com">hyperlink</a></p>
</div>
Elemen teratas dan terbawah adalah division sederhana (<div></div>) yang bisa
Anda gunakan untuk mark up bagian konten yang lebih besar. Susunan di atas
terdiri atas heading (<h1></h1>), subheading (<h2></h2), dua paragraf
(<p></p>), dan satu gambar (<img>).
2
Paragraf kedua meliputi sebuah link (<a></a>) dengan attribute href yang terdiri
atas URL tujuan. Tag gambar memiliki dua attribute, src untuk path gambar dan
alt untuk deskripsi gambar.
Pengertian Tag HTML dan Fungsinya
Tag HTML memiliki dua tipe utama: block-level dan inline tags. Elemen block-
level memakai semua ruang yang tersedia dan selalu membuat line baru di dalam
dokumen. Contoh dari tag block adalah heading dan paragraf.
Elemen inline hanya memakai space sesuai dengan kebutuhannya dan tidak
membuat line baru di halaman. Biasanya elemen ini akan memformat isi konten
dari elemen block-level. Contoh dari tag inline adalah link dan emphasized
strings.
Tag Block-Level
Tiga tag block-level yang harus dimiliki oleh setiap dokumen HTML adalah
<html>, <head>, dan <body>.
Tag <html></html> adalah elemen level tertinggi yang menyertakan setiap

halaman HTML.
Tag <head></head> menyimpan informasi meta, seperti judul dan charset

halaman.
Tag <body></body> melampirkan semua konten yang muncul pada suatu

halaman.
<html>
<head>

</head>
<body>

3
</body>
</html>
Heading memiliki 6 level. Level tersebut bervariasi, mulai dari <h1></h1> sampai
<h6></h6>, di mana h1 merupakan level heading tertinggi dan h6 adalah level
terendah. Paragraf dibuka dan ditutup dengan tag <p></p>, sedangkan blockquote
menggunakan tag <blockquote></blockquote>.
Division merupakan bagian konten yang lebih besar dan biasanya terdiri atas
beberapa paragraf, gambar, kadang-kadang blockquote, dan elemen lebih kecil
lainnya. Kita bisa membuat mark up dengan menggunakan tag <div></div>. Di
dalam elemen div juga terdapat tag div lainnya.
Anda juga bisa menggunakan tag <ol></ol> untuk list yang berurutan dan
<ul></ul> untuk list yang tidak berurutan. Masing-masing list item harus dibuka
dan ditutup dengan tag <li></li>. Sebagai contoh, di bawah ini adalah tampilan
dasar daftar tidak berurutan dalam HTML:
<ul>
<li>List item 1</li>
</ul>
Tag Inline
Sebagian besar tag inline digunakan untuk memformat teks. Sebagai contoh, tag
<strong></strong> akan render elemen ke format bold, sedangkan tag
<em></em> akan ditampilkan dalam format italic.
Hyperlink adalah elemen inline yang mewajibkan adanya tag <a></a> dan
attribute href untuk mengindikasi tujuan link:
<a href="https://example.com/">Click me!</a>
4
Gambar (image) juga merupakan elemen inline. Anda dapat menambahkan satu
gambar dengan menggunakan <img> tanpa harus membubuhkan tag penutup.
Hanya saja, Anda disarankan menggunakan attribute src untuk menentukan path
gambar, misalnya:
Kelebihan dan Kekurangan HTML
bahasa markup ini juga punya kelebihan dan kekurangannya.
Kelebihan
1. Memiliki banyak sumber dengan komunitas yang sangat besar dan

penggunaan yang sangat luas
2. Bahasa pemrograman dijalankan di semua web browser
3. Dapat dipelajari dengan mudah oleh pengembang web pemula
4. Bahasa pemrograman memiliki struktur yang rapi dan konsisten sehingga
mudah untuk dipelajari
5. Bahasa pemrograman open source (gratis)
6. Mudah diintegrasikan dengan bahasa back-end seperti Node.js dan PHP
7. Maintan dilakukan langsung oleh W3C (World Wide Web Consortium)
8. Digunakan untuk pembuatan struktur konten pada website yang dapat
ditambahkan dengan CSS atau bahasa pemrograman lain yang dapat
dijalankan seperti Javascript.
Kekurangan
1. Penggunaan HTML murni hanya dapat diimplementasikan untuk halaman

web statis. Untuk fitur yang lebih dinamis, Kanca IT dapat menggunakan
Javascript atau bahasa pemrograman back-end lainnya.
2. Bahasa pemrograman ini tidak mendukung user untuk menjalankan logic
sehingga semua halaman yang dibuat harus dibuat secara terpisah
walaupun menggunakan elemen yang sama.
3. Terdapat beberapa fitur baru yang terkadang tidak dapat digunakan pada
browser dengan cepat Perilaku browser yang tidak dapat diprediksi
membuat proses render tag baru tekendala.
5
Berikut kelebihan HTML:
1. Digunakan secara luas dan memiliki banyak sumber serta komunitas yang
besar.
2. Dijalankan secara alami di setiap web browser.
3. Mudah dipelajari.
6
4. Open-source dan sepenuhnya gratis.
5. Rapi dan konsisten.
6. Menjadi standar resmi web, dikelola oleh (W3C).
7. Integrasi mudah dengan bahasa backend, seperti PHP dan Node.js.
Kemudian, berikut adalah kekurangan HTML:
1. Umumnya digunakan untuk halaman web statis. Untuk fitur dinamis,

Anda bisa menggunakan JavaScript atau bahasa backend, seperti PHP.
2. Tidak bisa menjalankan logic. Alhasil, semua halaman web harus dibuat
terpisah meskipun menggunakan elemen yang sama, seperti header dan
footer.
3. Fitur baru tidak bisa digunakan dengan cepat di sebagian browser.
4. Perilaku browser terkadang sulit diprediksi. Misalnya, browser lama tidak
selalu bisa merender tag yang lebih baru.
7
8
SOAL DAN PEMBAHASAN
1. (Soal)
Jawaban :
Source Code
NPM G1A019006
Gambar 1. Keterangan Gambar
Penjelasan Source Code :
Int main adalah source code yang berfungsi sebagai deklarasai
fungsi utama kemudian source code string a; adalah variabel a yang
memiliki tipe data string. Dst…. (SEMUA SOURCE CODE
9
DIJELASKAN MAKSUD DAN SOURCE CODE BERWARNA MERAH
SEDANGKAN PENJELASAN HITAM)
Output
NPM G1A019006
Gambar 2. Keterangan Gambar
Pembahasan:
Pada gambar 2 adalah output dari kode program dimana

menampilkan blab la bla kemudian meminta inputan blab la bla sesuai
dengan kode program ……dst
10
11
KESIMPULAN DAN SARAN
Kesimpulan
Saran
12
DAFTAR PUSTAKA
13

TEMPLATE LAPORAN Coding

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

TEMPLATE LAPORAN Coding

Diunggah oleh

Hak Cipta:

Format Tersedia

LAPORAN PRAKTIKUM KE-6

PROYEK KOMPUTER DAN PEMROGRAMAN (CODING)

NAMA : YONI SASKIA

Nama Asisten Dosen:

Astuti Zahrroh G1A019006

Dosen pengampu : Ir. Hasanudin, MP

PROGRAM STUDI AKUNTANSI

Pengertian HTML dan Sejarahnya

<p>This is how you add a paragraph in HTML.</p>

<p>You can have more than one!</p>

Kemudian, pada tahun 2014, HTML5 mulai diperkenalkan. Dengan

Fungsi dan Cara Kerja HTML

Biasanya, rata-rata situs web menyertakan sejumlah halaman HTML yang

<h1>The Main Heading</h1>

<h2>A catchy subheading</h2>

<img src="/" alt="Image">

<p>Paragraph two with a <a href="https://example.com">hyperlink</a></p>

Pengertian Tag HTML dan Fungsinya

Tag <html></html> adalah elemen level tertinggi yang menyertakan setiap

Tag <head></head> menyimpan informasi meta, seperti judul dan charset

Tag <body></body> melampirkan semua konten yang muncul pada suatu

<li>List item 1</li>

<li>List item 2</li>

<li>List item 3</li>

<a href="https://example.com/">Click me!</a>

Kelebihan dan Kekurangan HTML

bahasa markup ini juga punya kelebihan dan kekurangannya.

1. Memiliki banyak sumber dengan komunitas yang sangat besar dan

1. Penggunaan HTML murni hanya dapat diimplementasikan untuk halaman

Kemudian, berikut adalah kekurangan HTML:

1. Umumnya digunakan untuk halaman web statis. Untuk fitur dinamis,

Gambar 1. Keterangan Gambar

Penjelasan Source Code :

Int main adalah source code yang berfungsi sebagai deklarasai

fungsi utama kemudian source code string a; adalah variabel a yang

memiliki tipe data string. Dst…. (SEMUA SOURCE CODE

SEDANGKAN PENJELASAN HITAM)

Gambar 2. Keterangan Gambar

Pada gambar 2 adalah output dari kode program dimana

Anda mungkin juga menyukai