Laporan Pemrograman web 225720007 Edo Noprizal

(1)

LAPORAN PEMROGRAMAN WEB MENGGUNAKAN FIGMA DAN HTML

Disusun Oleh :

Nama : Edo Noprizal NIM : 225720007 Prodi : Bisnis Digital

PROGRAM STUDI BISNIS DIGITAL PROGRAM SARJANA

FAKULTAS MANAJEMEN & BISNIS

UNIVERSITAS TEKNOLOGI DIGITAL INDONESIA YOGYAKARTA

2023

(2)

Design Figma

Design figma beranda:

Design figma kategori

(3)

Design figma detail

Design figma contact

(4)

Source Code

Source code Bagian beranda

<!DOCTYPE html>

<head>

<title>Bisnis Digital_225720007</title>

<link

href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,60 0i,700,700i|Roboto:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i ,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">

rel="stylesheet">

<!-- =======================================================

* Template Name: BizLand

* Updated: Sep 18 2023 with Bootstrap v5.3.2

* Template URL: https://bootstrapmade.com/bizland-bootstrap-business-template/

* Author: BootstrapMade.com

* License: https://bootstrapmade.com/license/

======================================================== -->

</head>

<body>

(5)

<h1 class="logo"><a href="index.html">Bisnis Digital<span>.</span></a></h1>

<!-- <a href="index.html" class="logo"><img src="assets/img/logo.png"

alt=""></a>-->

<ul>

<li><a class="nav-link scrollto" href="#Kategori">Kategori</a></li>

<li><a class="nav-link scrollto" href="#services">Detail</a></li>

<li><a class="nav-link scrollto" href="#contact">Contact</a></li>

</ul>

</nav>

</div>

</header>

<h1>Welcome to <span>Bisnis Digital</span></h1>

<h2>Transformasi Bisnis di Era Digital, Berkembang Bersama Prodi Bisnis Digital</h2>

<a href="#Kategori" class="btn-get-started scrollto">Get Started</a>

</div>

</section>

0">

<div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-

(6)

<h4 class="title"><a href="">Masa Depan Anda dengan Inovasi Digital</a></h4>

<p class="description">Jadilah bagian dari generasi yang mengubah dunia dengan kreativitas dan kemampuan digital Anda</p>

</div>

0">

<h4 class="title"><a href="">Mimpi Digital Menjadi Kenyataan Bisnis</a></h4>

<p class="description">Pelajari cara mewujudkan ide-ide Anda menjadi solusi bisnis yang menguntungkan dan berkelanjutan di era digital</p>

</div>

0">

<h4 class="title"><a href="">Jelajahi Lanskap Digital dengan Percaya Diri</a></h4>

<p class="description">Dapatkan pengetahuan dan keterampilan yang Anda butuhkan untuk menghadapi tantangan dan peluang di dunia bisnis digital yang dinamis</p>

</div>

0">

<h4 class="title"><a href="">Tempat Keahlian Bisnis Bertemu dengan Penguasaan Digital</a></h4>

<p class="description">Gabungkan penalaran bisnis yang tajam dengan penguasaan teknologi digital untuk menciptakan nilai bagi diri Anda, organisasi Anda, dan masyarakat</p>

</div>

</section>

(7)

Bagian kategori

<h2>Kategori</h2>

<p>Di Prodi Bisnis Digital Anda Bisa Mendapatkan Dan Meningkatkan Skill Seperti Berikut.</p>

</div>

<hr>

</div>

<ul>

<li>

<div>

<h5>Content Marketing</h5>

<p>Kategori ini menunjukkan bagaimana Anda dapat membuat dan mendistribusikan konten yang menarik dan relevan untuk target pasar Anda. Contoh konten yang dapat Anda buat adalah blog, video, podcast, e-book, dll.</p>

</div>

</li>

<li>

<div>

<h5>Search Engine Marketing (SEM)</h5>

<p>Kategori ini menunjukkan bagaimana Anda dapat meningkatkan visibilitas website Anda di mesin pencari seperti Google, Yahoo, dan Bing.

Contoh strategi yang dapat Anda gunakan adalah SEO (Search Engine Optimization) dan PPC (Pay Per Click) .</p>

</div>

</li>

<li>

<div>

<h5>Social Media Advertising</h5>

<p>Kategori ini menunjukkan bagaimana Anda dapat memanfaatkan media sosial seperti Facebook, Instagram, Twitter, dll untuk mempromosikan produk atau jasa Anda. Contoh iklan yang dapat Anda buat adalah post, story, carousel, video, dll </p>

</div>

</li>

(8)

<li>

<div>

<h5>Video Marketing</h5>

<p>Kategori ini menunjukkan bagaimana Anda dapat menggunakan video sebagai media untuk menyampaikan pesan dan nilai-nilai bisnis Anda. Contoh video yang dapat Anda buat adalah testimoni, tutorial, demo, animasi, dll.</p>

</div>

</li>

</ul>

</div>

</section>

<span class="skill">Content Marketing <i class="val">100%</i></span>

<div class="progress-bar" role="progressbar" aria-valuenow="100"

aria-valuemin="0" aria-valuemax="100"></div>

</div>

<span class="skill">Search Engine Marketing (SEM)<i class="val">90%</i></span>

</div>

<span class="skill">Social Media Advertising<i class="val">80%</i></span>

(9)

<h2>Detail</h2>

<h3>Detail Prodi <span>Bisnis Digital</span></h3>

</div>

<p>Menjadi program studi yang unggul dan terdepan dalam

menghasilkan lulusan yang kompeten, profesional, dan berdaya saing di bidang bisnis digital.</p>

</div>

<div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-md-0"

data-aos="zoom-in" data-aos-delay="200">

Bagian Detail

</div>

<span class="skill">Video Marketing <i class="val">90%</i></span>

</div>

</section>

(10)

<p>Menyelenggarakan pendidikan berkualitas yang mengintegrasikan ilmu pengetahuan, teknologi, dan kewirausahaan dalam bidang bisnis digital.

Mengembangkan penelitian dan pengabdian masyarakat yang inovatif, relevan, dan berdampak dalam bidang bisnis digital.

Membangun jejaring kerjasama yang luas dan sinergis dengan berbagai pihak, baik di dalam maupun di luar negeri, dalam bidang bisnis digital.</p>

</div>

<div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-lg-0"

data-aos="zoom-in" data-aos-delay="300">

<h4><a href="">Tujuan</a></h4>

<p>Menghasilkan lulusan yang memiliki pengetahuan, keterampilan, dan sikap yang sesuai dengan standar kompetensi nasional dan internasional dalam bidang bisnis digital.

Menghasilkan karya ilmiah dan kreatif yang bermanfaat bagi pengembangan ilmu pengetahuan, teknologi, dan kewirausahaan dalam bidang bisnis digital.

Memberikan kontribusi nyata bagi peningkatan kesejahteraan dan kualitas hidup masyarakat melalui kegiatan pengabdian yang berbasis bisnis digital.</p>

</div>

<h4><a href="">Kurikulum</a></h4>

<p> Kurikulum program studi bisnis digital dirancang untuk

memenuhi kebutuhan industri dan pasar kerja yang terus berkembang seiring dengan perkembangan teknologi digital. Kurikulum ini mengacu pada Kerangka Kualifikasi Nasional Indonesia (KKNI) dan Standar Nasional Pendidikan Tinggi (SNPT)</p>

</div>

<h4><a href="">Fasilitas</a></h4>

<p>Program studi bisnis digital menyediakan fasilitas yang lengkap dan modern untuk mendukung proses belajar mengajar dan kegiatan akademik

lainnya</p>

</div>

(11)

<h2>Contact</h2>

<h3><span>Contact</span></h3>

</div>

<h3>Address</h3>

<p>Jalan Raya Janti No 143 Karang Jambe 55198 Bantul Di Yogyakarta

·<br>

Yogyakarta</p>

</div>

<h3>Email</h3>

<p>[email protected]</p>

</div>

Bagian Kontak

<h4><a href="">Prospek Kerja</a></h4>

<p>Digital business analyst, Digital marketing specialist, E-commerce manager,

Social media manager, Data analyst,

Digital entrepreneur, Digital consultant, Digital researcher.</p>

</div>

</section>

(12)

</div>

</div>

</section>

</main>

·<br>

<p>

Jalan Raya Janti No 143 Karang Jambe 55198 Bantul Di Yogyakarta

Yogyakarta <br><br>

<strong>Phone:</strong>+62 858-2837-7000<br>

<strong>web official:</strong><a

href="https://www.utdi.ac.id">https://www.utdi.ac.id</a>

</p>

</div>

<h4>Social Networks</h4>

<a href="https://www.facebook.com/utdi.official/"

class="facebook"><i class="bx bxl-facebook"></i></a>

<a href="https://www.instagram.com/iam_orllyskylark/"

class="instagram"><i class="bx bxl-instagram"></i></a>

(13)

<a href="https://id.linkedin.com/school/utdiofficial/"

class="linkedin"><i class="bx bxl-linkedin"></i></a>

</div>

</div>

<!-- Purchase the pro version with working PHP/AJAX contact form:

https://bootstrapmade.com/bizland-bootstrap-business-template/ -->

Designed by <a href="https://bootstrapmade.com/">edouyee</a>

</div>

</footer>

</body>

</html>

(14)

Penjelasan Elemen dan Komponen pada Source Code HTML

1. Elemen <head> dan Fungsi-fungsinya a. <meta charset="utf-8">

• Fungsi: Menentukan karakter set dokumen HTML sebagai UTF-8, yang mendukung karakter internasional.

b. <meta content="width=device-width, initial-scale=1.0" name="viewport">

• Fungsi: Mengoptimalkan tampilan situs pada perangkat berbeda dengan menyesuaikan lebar dan skala viewport.

c. <title>Bisnis Digital_225720007</title>

• Fungsi: Menentukan judul halaman web yang akan ditampilkan pada tab browser.

d. Favicons (Icon situs)

• Fungsi: Menyediakan ikon situs untuk ditampilkan pada tab browser atau layar beranda perangkat seluler.

e. Google Fonts

• Fungsi: Menambahkan gaya huruf dari Google Fonts ke halaman web.

f. Vendor CSS Files

• Fungsi: Menambahkan gaya dan tata letak dari vendor eksternal (AOS, Bootstrap, Boxicons, GLightbox, Swiper) untuk meningkatkan tampilan dan fungsionalitas halaman.

g. Template Main CSS File

• Fungsi: Menambahkan gaya dan tata letak khusus dari template utama untuk mempersonalisasi desain halaman.

2. Elemen <body> dan Komponennya a. Header

• Fungsi: Menampilkan bagian header halaman yang berisi logo, menu navigasi, dan judul situs.

b. Hero Section

• Fungsi: Menyajikan bagian utama halaman dengan pesan selamat datang dan panggilan aksi untuk "Get Started".

c. Main Section

• Fungsi: Merupakan bagian utama halaman yang berisi sejumlah bagian, termasuk Featured Services, Kategori, Skills, Services, Contact, dan Footer.

d. Featured Services Section

• Fungsi: Menampilkan ikon dan deskripsi layanan utama yang ditawarkan oleh bisnis digital.

e. About Section (Kategori)

• Fungsi: Menyajikan informasi tentang kategori atau topik yang dapat dipelajari di Prodi Bisnis Digital.

f. Skills Section

• Fungsi: Menampilkan kemajuan dalam keterampilan tertentu, seperti Content Marketing, SEM, Social Media Advertising, dan Video Marketing.

g. Services Section (Detail)

• Fungsi: Menyajikan informasi terperinci tentang Prodi Bisnis Digital, termasuk Visi, Misi, Tujuan, Kurikulum, Fasilitas, dan Prospek Kerja.

h. Contact Section

• Fungsi: Menampilkan informasi kontak seperti alamat, email, dan nomor telepon, serta memberikan formulir untuk pengunjung yang ingin berkomunikasi.

i. Footer

• Fungsi: Menampilkan informasi tambahan, tautan sosial media, dan hak cipta situs.

(15)

j. Back-to-Top Button

• Fungsi: Memberikan tombol yang memungkinkan pengguna untuk kembali ke bagian atas halaman dengan satu kali klik.

3. Script dan File JavaScript

• Fungsi: Menyediakan fungsi-fungsi dinamis, efek animasi, dan interaktivitas pada halaman web.

(16)

Fungsi dan Kegunaan Elemen dan Komponen pada Source Code HTML

Berikut adalah analisis elemen dan komponen yang terdapat dalam source code HTML:

1. Elemen <head> dan Fungsi-fungsinya a. <meta charset="utf-8">

• Fungsi: Menentukan karakter set dokumen HTML sebagai UTF-8, yang mendukung karakter internasional.

• Contoh Source Code:

htmlCopy code

b. <meta content="width=device-width, initial-scale=1.0" name="viewport">

• Fungsi: Mengoptimalkan tampilan situs pada perangkat berbeda dengan menyesuaikan lebar dan skala viewport.

htmlCopy code

c. <title>Bisnis Digital_225720007</title>

• Fungsi: Menentukan judul halaman web yang akan ditampilkan pada tab browser.

htmlCopy code

<title>Bisnis Digital_225720007</title>

d. Favicons (Icon situs)

• Fungsi: Menyediakan ikon situs untuk ditampilkan pada tab browser atau layar beranda perangkat seluler.

htmlCopy code

e. Google Fonts

• Fungsi: Menambahkan gaya huruf dari Google Fonts ke halaman web.

htmlCopy code

<link

href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Roboto:300,3 00i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i"

rel="stylesheet">

f. Vendor CSS Files

• Fungsi: Menambahkan gaya dan tata letak dari vendor eksternal (AOS, Bootstrap, Boxicons, GLightbox, Swiper) untuk meningkatkan tampilan dan fungsionalitas halaman.

htmlCopy code

href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <!-- ... (Vendor CSS Files lainnya) ... --

>

g. Template Main CSS File

• Fungsi: Menambahkan gaya dan tata letak khusus dari template utama untuk mempersonalisasi desain halaman.

(17)

htmlCopy code

2. Elemen <body> dan Komponennya a. Header

• Fungsi: Menampilkan bagian header halaman yang berisi logo, menu navigasi, dan judul situs.

htmlCopy code

b. Hero Section

• Fungsi: Menyajikan bagian utama halaman dengan pesan selamat datang dan panggilan aksi untuk "Get Started".

htmlCopy code

c. Main Content Sections

• Fungsi: Merupakan bagian utama halaman yang berisi sejumlah bagian, termasuk Featured Services, Kategori, Skills, Services, Contact, dan Footer.

d. Featured Services Section

• Fungsi: Menampilkan ikon dan deskripsi layanan utama yang ditawarkan oleh bisnis digital.

htmlCopy code

e. About Section (Kategori)

• Fungsi: Menyajikan informasi tentang kategori atau topik yang dapat dipelajari di Prodi Bisnis Digital.

htmlCopy code

f. Skills Section

• Fungsi: Menampilkan kemajuan dalam keterampilan tertentu, seperti Content Marketing, SEM, Social Media Advertising, dan Video Marketing.

htmlCopy code

g. Services Section (Detail)

• Fungsi: Menyajikan informasi terperinci tentang Prodi Bisnis Digital, termasuk Visi, Misi, Tujuan, Kurikulum, Fasilitas, dan Prospek Kerja.

htmlCopy code

h. Contact Section

• Fungsi: Menampilkan informasi kontak seperti alamat, email, dan nomor telepon, serta memberikan formulir untuk pengunjung yang ingin menghubungi.

htmlCopy code

i. Footer Section

(18)

• Fungsi: Menyajikan informasi dan tautan tambahan di bagian bawah halaman.

htmlCopy code

3. Elemen <script> dan Fungsi-fungsinya a. JavaScript Files

• Fungsi: Menambahkan skrip JavaScript untuk meningkatkan fungsionalitas halaman, seperti animasi, validasi formulir, dan efek interaktif.

htmlCopy code

src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script> <!-- ... (Vendor JavaScript Files lainnya) ...

--> <script src="assets/js/main.js"></script>

Dengan menggabungkan elemen-elemen dan komponen-komponen ini, source code HTML membentuk halaman web yang kaya informasi dan estetis untuk Prodi Bisnis Digital.

Kesimpulan

Elemen dan komponen pada source code tersebut digunakan untuk membangun tampilan dan fungsionalitas halaman web Bisnis Digital. Setiap elemen memiliki peran khusus dalam menyajikan informasi, menarik perhatian pengunjung, dan memperkuat identitas bisnis digital tersebut. Selain itu, penggunaan file eksternal dan script JavaScript membantu dalam mengoptimalkan pengalaman pengguna secara keseluruhan.