P2 - Web Design @anasberkata

Perkuliahan P2

Rules Pertemuan 01 Pertemuan 02 Pertemuan 03 Pertemuan 04 Pertemuan 05 UAS Praktek

1. Tugas dilarang berbentuk

makalah, alternatif bisa berupa
PPT / Slide atau mendesain HTML + CSS PHP + JAVASCRIPT VARIABLE GET & POST CRUD
sendiri.
2. Tugas dikirim melalui email ke
codetalk.id@gmail.com
3. Bobot terbesar adalah SINTAKS HTML RUANG LINGKUP ARRAY DATABASE
kehadiran, kedua Tugas UAS
Praktek MERANCANG
WEB

SINTAKS CSS INSTALASI FUNCTION CRUD

SINTAKS
P2 Meliputi :
- Bahasa Markup & Styling
• HTML
• CSS
- Pemrograman Web Dasar
• PHP
• Javascript
- Framework
• HTML & CSS Framework
• Javascript Framework

Front End Developing

P2 Meliputi :
- Bahasa Markup & Styling
• HTML
• CSS
- Pemrograman Web Dasar
• PHP
• Javascript
- Framework
• HTML & CSS Framework
• Javascript Framework

Front End Developing

P2 Meliputi :
- Bahasa Markup & Styling
• HTML
• CSS
- Pemrograman Web Dasar
• PHP
• Javascript
- Framework
• HTML & CSS Framework
• Javascript Framework

Front End Developing

P2 Meliputi :
- Bahasa Markup & Styling
• HTML
• CSS Back End Developing
- Pemrograman Web Dasar
• PHP
• Javascript
- Framework
• HTML & CSS Framework
• Javascript Framework

Front End Developing

 Web Designer Front End Developer

Sketching Wireframing Prototyping & Navigation Code

Web Design Progress

Google
Facebook
Shopee
STMIK BANDUNG
Desain Website Lainnya
Component Website /
Mobile Application
NAVIGASI
Navigasi berfungsi seperti arah, mengarahkan kita
menuju halaman yang kita inginkan
HEADER
Header selalu menampilkan informasi yang sangat
penting dan biasanya di desain dengan animasi yang
menarik perhatian
CONTENT
Berisikan informasi dengan kapasitas tidak terbatas, bisa
berupa teks paragraf, gambar, video atau informasi
lainnya

BAR
Ada beberapa jenis bar, bar dengan posisi di atas, kanan
atau kiri, biasanya berisikan informasi tambahan

FOOTER
Footer menampung informasi hak cipta dan menu
tambahan
 Navigation
NAVIGASI STANDAR FUNGSI
Menu navigasi mempunyai fungsi untuk menampung menu-menu
atau button halaman, bentuk dari navigasi beragam namun pada
umumnya selalu berbentuk inline-block, namun ada beberapa
website menempatkan menu di sebelah kiri atau kanan menjadi
DROPDOWN
side-menu.

Untuk menampung jumlah menu yang banyak biasanya terdapat 2

bentuk menu, yaitu:

• Dropdown Menu
MEGA MENU Dropdown menu masih berbentuk sederhana hanya saja
mempunyai efek turun kebawah untuk menampilkan menu-menu
tambahannya

• Mega Menu
Mega menu biasanya berbentuk lebih besar, dan tidak ada aturan
untuk memunculkan efeknya, biasanya menampung menu-menu
tambahan dan isi dari halaman disetiap menu
 Header
HEADER STILL IMAGE

FUNGSI
Sesuai dengan namanya, header sama halnya dengan kepala,
seseorang akan tertarik dengan oranglain dengan melihat hal-hal
yang terdapat di kepala.

Maka fungsi header di website yaitu menampilkan informasi yang

HEADER SLIDER paling menarik dari keseluruhan informasi di website. Bentuk dari
header biasanya berbentuk still image yang sudah di desain atau
berbentuk animasi slider.

Informasi bisa berupa informasi diskon atau sale, produk terlaris,

layanan terbaik, produk atau layanan baru dan informasi lainnya.
 Content
FUNGSI

Content selalu berisikan informasi utama dari setiap halaman, dan setiap informasi biasanya di kemas dalam 1 halaman
website saja, seperti halaman profile pasti menampilkan informasi mengenai profile website, halaman kontak pasti
menampilkan informasi alamat atau kontak yang bisa dihubungi.

Informasi bisa di kemas dalam bentuk paragraf, list gambar, animasi gambar, video dan lain sebagainya.

Content List Image Content Paragraph

 Footer
FUNGSI

Footer merupakan bagian paling bawah pada website, pada umumnya footer selalu menampilkan hak cipta berupa
copyright dan tahun pembuatan website. Namun pada era sekarang, footer website selalu disematkan beberapa info
tambahan seperti alamat media sosial, peta, alamat kantor atau bahkan link menu tambahan.

Contoh Footer
 Sidebar
FUNGSI

Sidebar adalah bagian dari tata letak website. Sidebar merupakan kolom website yang berada di sebelah kiri, atas, bawah,
dan kanan posting artikel. Kita tentu banyak melihat web dan blog dengan berbagai widget disebelah kiri dan kanan
posting, atau di atas dan bawah posting artikel. Itu adalah sidebar. Fungsi utama bar sebenarnya untuk mempercantik dan
memperlengkap tampilan dari website, selain itu juga menampilkan informasi tambahan yang tidak tertampung pada
bagian content, manmpung list artikel, list pengunjung dan lain sebagainya.

Contoh Sidebar

Contoh Sidebar
 HTML CSS JAVASCRIPT
Hypertext Markup Language Cascading Style Sheet

Mengatur kerangka web Mengatur style atau desain membuat web menjadi lebih
agar web bisa di atur seperti jenis huruf, warna, interaktif dan menarik dengan
secara dinamis posisi, bentuk dan lainnya beberapa animasi dan tingkah laku
 <TAG_PEMBUKA> KONTEN </TAG_PENUTUP>

<TAG_PEMBUKA>
KONTEN
<TAG_PENUTUP>

HTML Contoh :

Hypertext Markup Language <header>

Ini adalah bagian header
Mengatur kerangka web </header>
agar web bisa di atur <footer>
secara dinamis Ini adalah bagian footer
</footer>

HTML References :
https://www.w3schools.com/tags/
 Inline CSS : Menaruh Sintaks CSS pada tag HTML
<SELECTOR style=“property: value;”> KONTEN </SELECTOR>
Internal CSS : Membuat tag style dan menaruh sintaks CSS di dalamnya
<style>
selector { property: value; }
CSS .selector { property: value; }
Cascading Style Sheet #selector { property: value; }

Mengatur style atau desain </style>

seperti jenis huruf, warna,
Eksternal CSS : Menghubungkan file .css di luar file HTML dengan tag LINK
posisi, bentuk dan lainnya
<link rel=“stylesheet” href=“nama_file_css.css”>

CSS References :
https://www.w3schools.com/cssref/
 JAVASCRIPT NEXT TIME

membuat web menjadi lebih

interaktif dan menarik dengan
beberapa animasi dan tingkah laku
Anda Pusing?