Buku Pegangan Peserta
Kelas Pelatihan Untuk Membuat Website
Pembuatan Website
(Front – End)
MEMAHAMI
APA ITU WEBSITE DAN HTML
Chapter 1 3
Website dan Html
· Pengenalan Website & Html
· Membuat Halaman Website
pertama
· Mengenal lebih dalam teks HTML
Property of PT Clevio
Coding atau pemrograman, adalah aktifitas menciptakan program
computer. Menurut Bill Gates, pendiri Microsoft, “belajar menulis program
itu memperluas daya piker, membantu kita berpikir lebih baik,
menciptakan cara berpikir yang bermanfaat disemua bidang. Berangkat
dari motivasi bermain game, siswa-siswi Clevio Coder Camp diajak
menciptakan games/aplikasi yang baik dan bermanfaat bagi orang lain.
Property of PT Clevio 4
Website & HTML
Apa Itu Website?
Website adalah Sebuah halaman yang ada pada media Internet
yang bertujuan untuk menghubungkan serta di akses melalui
Browser. untuk membuat sebuah website kita harus menggunakan
sebuah bahas markah standar yaitu Html.
Property of PT Clevio 5
Apa Itu Html?
Hypertext Markup Language adalah bahasa markah
standar untuk dokumen yang dirancang untuk ditampilkan
di peramban internet.
Property of PT Clevio 6
Unsur Membangun Sebuah Website
a. Domain, Nama brand untuk sebuah Website.
b. Hosting, Media penyimpan Data (Gambar, Text, Video, dll).
c. Konten, Tampilan atau isi dari sebuah Website.
Property of PT Clevio 7
Membuat halaman website pertama
Attribut, Tag & Element
A. Attribut
Atribut adalah kata khusus yang berada di dalam tag pembuka.
B. Tag
Tag adalah sebuah penanda awalan danakhiran dari sebuah teks HTML.
C. Element
Elemen dalam HTML adalah sebuah komponen yang menyusun
dokumen HTML.
Property of PT Clevio 8
Struktur Html 9
1 <html>
Struktur atau Element utama dalam program
HTML.
2 <head>
Berisi kumpulan data atau Dokumentasi fitur yang
digunakan dalam HTML.
3 <body>
Berisi konten yang ditampilkan pada browser
ketika pengunjung mengakes halaman.
Property of PT Clevio
Pembuatan Website 10
A. Langkah - langkah pembuatan website
1. Create new folder (Name: Clevio Website).
2. Open Text editor .
3. Type HTML Structure.
4. Save file with .html format.
Property of PT Clevio
Menampilkan Content
• Open text editor (Sublime text)
• Tulislah script dibawah.
Property of PT Clevio 11
Membuat Header & Paragraf
Pengertian Header dan Paragraf
1 <h1> Artinya adalah heading, dan angka dibelakangnya 1-6
adalah ukutan dari font heading.
2 <p> Artinya paragraf, bertujuan untuk membuat sebuah
paragraf.
3 Tulislah script dibawah ini untuk membuat heading dan
paragraf.
Property of PT Clevio 12
Membuat Header & Paragraf
4. Contoh
Property of PT Clevio 13
Membuat Div atau division 14
Pengertian div
<div> atau division digunakan untuk
membuat kelompok dalam html atau
membuat section.
Property of PT Clevio
Membuat Attribut ID & Class 15
Fungsi dan ciri-ciri Attribut
id
1. Digunakan untuk
memberikan Identifikasi
pada beberapa tag html.
2. Hanya bisa di gunakan 1x
untuk setiap tag html.
3. Disimbolkan dengan “#”.
Property of PT Clevio
Fungsi dan ciri-ciri Attribut Class 16
1 Digunakan untuk memberikan
identifikasi pada beberapa tag html.
2 Hanya bisa digunakan 1x untuk
setiap tag html.
3 Disimbolkan dengan ( . ).
Property of PT Clevio
Membuat Styling text (em,b & u)
Fungsi dari Styling text em, b & u
1. <em>, digunakan untuk membuat gaya tulisan Miring.
2. <b>, digunakan untuk membuat gaya tulisan Tebal.
3. <u>, digunakan untuk membuat gaya tulisan garis bawah.
Property of PT Clevio 17
Membuat Element br
Pengertian b r (Line Breaker)
<br>, digunakan untuk membuat garis baru pada text.
Property of PT Clevio 18
Membuat Element ul & ol
A. Pengertian ul, ol & li
1. Pengertian ul (Unordered List)
<ul> adalah sebuah element untuk membuat point dengan bentuk titik hitam.
2. Pengertian ol (Ordered List)
<ol> adalah sebuah element untuk membuat point dengan bentuk angka.
3. Pengertian li (List)
<li> adalah sebuah element yang menjadi list atau isi dari point <ul> ataupun <ol>.
Property of PT Clevio 19
4. Contoh dari element <ul> & <ol>
a. <ul>
Property of PT Clevio 20
4. Contoh dari element <ul> & <ol>
b. <ol>
Property of PT Clevio 21
Fungsi dan ciri-ciri Attribut Class 22
1 Digunakan untuk memberikan
identifikasi pada beberapa tag html.
2 Hanya bisa digunakan 1x untuk
setiap tag html.
3 Disimbolkan dengan ( . ).
Property of PT Clevio
Menambahkan gambar dan video di html
A. Menambahkan image
1. img, digunakan untuk import media image.
2. src, berfungsi untuk mencari source atau lokasi media image.
Property of PT Clevio 23
B. Menambahkan video
1. video, digunakan untuk import media video.
2. controls, berfungsi untuk mencari source atau lokasi media image.
Property of PT Clevio 24
Mengenal lebih dalam teks html
Membuat button pada website
Fungsi button
button, digunakan sebagai tombol yang ada pada content html, untuk
membuat button pada html, silahkan ikuti script dibawah.
Property of PT Clevio 25
Membuat links clickable pada html
Fungsi Links
links, digunakan untuk melakukan perpindahan ke page atau halaman
lainya, untuk membuat Links silahkan tulis script dibawah.
Property of PT Clevio 26
Membuat Title html
Fungsi Title
<title>, berfungsi menjelaskan judul dari sebuah page pada browser
tab, untuk membuat title silahkan ikuti script dibawah.
Property of PT Clevio 27
Website layout
Fungsi Layout
1. Header
Berfungsi sebagai bagian kepala atau judul dalam content page.
2. Navigator
Berfungsi sebagai menu atau navigasi link ke berbagai pages.
3. Section
Berfungsi sebagai bagian badan atau Content utama dalam sebuah page.
4. Footer
Berfungsi sebagai bagian kaki atau short info tentang Website.
Property of PT Clevio 28
Contoh Layout
Property of PT Clevio 29
Responsive Website
A. Pengertian Responsive website
Responsive Web Design adalah suatu keadaan sebuah
halaman web dimana tampilannya akan cocok, rapi dan tetap
enak dilihat jika diakses dari perangkat apapun dengan resolusi
layar yang berbeda,untuk membuat Responsive web kita
membutuhkan element <meta>.
Property of PT Clevio 30
B. Pengertian Meta & Content
1. <meta>
Meta adalah element yang di gunakan untuk menentukan
karakter set yang digunakan, Deskripsi sebuah page,
Keyword untuk Website.
2. Content
Content adalah pengaturan untuk size content HTML.
Property of PT Clevio 31
C. Tulislah script dibawah ini
Property of PT Clevio 32
The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.
E-Book 1
Discover the best professional documents and content resources in AnyFlip Document Base.
Search
E-Book 1
- 1 - 32
Pages: