TUGAS 2

PEMROGRAMAN WEBSITE
KELAS A082

Dosen Pengampu:
Dr. Eng Agussalim, S.Pd, M.T

Nama:
Maulana Bryan Syahputra

NPM:
21082010038

Kelas:
Pararel A

PROGRAM STUDI SISTEM INFORMASI

FAKULTAS ILMU KOMPUTER

UNIVERSITAS PEMBANGUNAN NASIONAL “VETERAN” JAWA TIMUR

2023
Tujuan Pratikum:

1. Mahasiswa dapat mengimplementasikan konsep CSS.

2. Mahasiswa dapat mengimplementasikan penulisan pada CSS.
3. Mahasiswa memahami selector.
4. Mahasiswa dapat membuat background.
5. Mahasiswa dapat menformat text pada web
6. Mahasiswa memahami merubah properties font.
7. Mahasiswa dapat membuat tabel.
8. Mahasiswa memahami konsep hyperlink dan tombol.
9. Mahasiswa mampu membuat website dengan HTML dan CSS.

Teori Dasar:

Hypertext Markup Languange (HTML)

Hypertext Markup Language atau HTML adalah bahasa markup yang digunakan untuk
membuat struktur halaman website. HTML terdiri dari kombinasi teks dan simbol yang
disimpan dalam sebuah file. Dalam membuat file HTML, terdapat standar atau format khusus
yang harus diikuti. Format tersebut telah tertuang dalam standar kode internasional atau ASCII
(American Standard Code for Information Interchange).

HTML dapat diterima sebagai tampilan halaman Web setelah melalui proses
interpretasi dari Web browser. Selain itu HTML memiliki struktur yang fleksibel, tanpa lojik
serta toleran terhadap kesalahan. Standar minimum elemen HTML adalah Document Type
Declaration (DTD), Head, dan Body.

Cascading Style Sheet (CSS)

Cascading Style Sheet (CSS) merupakan bahasa dalam mengatur tampilan format
tertulis dalam bahasa markup. CSS berfungsi untuk memisahkan konten dari tampilan
visualnya di situs. CSS menggunakan bahasa Inggris sederhana berbasis syntax yang
dilengkapi dengan sekumpulan rule yang mengaturnya. Dengan CSS dapat dibuat pengaturan
seperti jenis font dan latar belakang.

Tools dan Software yang digunakan:

• IDE Visual Code.

• Browser Google Chrome.
 • Modul 2 HTML & CSS
• XAMPP

Langkah kerja:

1. Persiapkan Laptop yang telah terinstall Visual Studio Code dan Browser.
2. Baca dan pahami Modul 2.
3. Buka Xampp, Nyalakan module Apache pada Xampp.
4. Buat folder depos di Xampp/htdocs sebagai tempat untuk membuat tempat
pengerjaan. Seperti file 1.html
5. Kerjakan sesuai petujuk dari modul 2.
6. Untuk melihat hasil pengerjaan dapat dilakukan akses melalui localhost/namafolder.
Melalui link tersebut dapat mengakses hasil pengerjaan.
3. Selector Sebagai Pengontrol Design

1. Source Dan Tampilan

a. Selector Merubah Body

b. Jenis Selector

• Selector Bebas

• Selector dengan Class

 • Selector dengan IDE

2. Analisa

Selector merupakan tag yang digunakan untuk merubah bagian pada css.
Penulisan dari tag selector seperti “header {[syntax CSS]}” dan “hero{[syntax
CSS]}. Penggunaan selector dapat ditambahkan class dan id. Berikan titik di
 depan nama class ketika dituliskan pada Css seperti .header dan pada id
diberikan tanda # seperti #body.

4. Memformat Halaman web

• Source dan Tampilan
1. Format dengan Margin

2. Pemetaan menggunakan padding

• Analisa
 Salah satu kegunaan CSS adalah untuk memberikan jarak antar konten yang
memanfaatkan margin dan padding. Penggunaan margin dilakukan dengan syntax
seperti margin-left, top, bottom, right begitu pulan dengan padding. Satuan ukuran yang
digunakan dapat berupa %, vh, px, rem, dan lain-lain. Perbedaan mendasar dari
keduanya adalah margin menata letak luar dan padding dari letak dalam. Padding dapat
dirubah warnanya dengan background-color sedangan margin tidak.

8. Pengaturan Tabel
• Source dan Tampilan
1. Pengaturan Padding

2. Menggunakan File CSS+HTML

• File CSS
 • File HTML

• Source dan Tampilan

Table pada html dapat dirubah dengan memanfaatkan selector tag table serta class
maupun ID, tampilan tabel berubah dengan menambah atribut seperti width, border,
cellspacing. Perubahan tersebut menyesuaikan kebutuhan pendesain.

9. Pengaturan Hyperlink dan Tombol yang Menarik

• Source code dan Tampilan
1. Penggunaan Property Selector
2. Pembuatan Tombol dengan Tabel

3. Tombol Visual 3D
• File CSS
 • File HTML

• Analisa

Salah satu penilaian website yang bagus adalah responsif dimana dapat dilakukan dengan
menambah hyperlink dan syntax seperti a:hover dan a:active yang dimana syntaf tersebut
akan aktif jika kondisi terpenuhi. Seperti a:hover akan aktif jika kondisi mouse berada pada
bagian yang diberikan hover.
Tugas 2 : Mebuat Website Pribadi dengan HTML dan CSS
1. Source Code
A. HTML

Index.html
B. CSS

2. Tampilan
A. About Section

B. Education Section

C. Course Section
D. Activity Section

E. Contact Section (Footer)

 3. Analisa
Pembuatan website ini menggunakan materi yang diajakarkan pada modul 1 dan 2
seperti table, header, th, ul, li, nav, dan berbagai lainnya dilengkapi dengan CSS yang
dibuat responsif. Website dibuat secara struktural (Dari atas ke bawah) yang dimana
proses pembuatannya akan lebih mengarah. Serta untuk membantu pengerjaan
memanfaatkan selector seperti tag, class, dan id.
Kesimpulan
1. Cascading Style Sheet (CSS) merupakan bahasa dalam mengatur tampilan format tertulis
dalam bahasa markup. CSS berfungsi untuk memisahkan konten (HTML) dari tampilan
visualnya di situs.
2. Untuk memudahkan penggunaan CSS terutama mengubah bagian secara khusus dapat
memanfaatkan selector tag yang disediakan CSS atau dapat menggunakan class dan id.
3. Pengaturan margin dan padding sangat krusial untuk digunakan karena mengatur letak posisi
konten pada website. Perbedaan dari padding dan margin adalah padding pada letak luar sedang
margin pada letak dalam.
4. Untuk membuat website responsif dapat digunakan syntax seperti a:link, a:visisted, a:active,
dan a:hover.
 Link
Github:
https://github.com/maulanabry/Praktek2_Pemweb
https://github.com/maulanabry/Tugas_2_Pemweb_brypage.git

Website:
https://maulanabry.github.io/Tugas_2_Pemweb_brypage/