halo halo assalamualaikum warahmatullahi wabarakatuh senang sekali bisa berbagi dengan kalian lagi teman-teman selamat datang Hai di video kali ini kita akan belajar tentang html dan CSS cukup di satu video saja Hai Oke teman-teman jadi siapkan mental kalian terutama kota kalian untuk melihat video ini punya di kedua bahasa ini kita bisa buat apa sih Hai Nah dari kedua bahasa ini teman-teman memungkinkan kita untuk membuat sebuah website yang statis hai oke Hai html ini digunakan Hai untuk membuat struktur di halaman website jika kita Hai dibadan kita ini terdapat Hai kulit daging dan didalamnya lagi adalah tulang e-ktp ini bisa diibaratkan seperti tulang teman-teman ini dia adalah struktur Oke jika diibaratkan lagi bisa seperti rumah Hai jika kita mau mundur lebih jauh tentang pembangunan rumah tersebut Ayo kita bisa melihat struktur dari rumah sebelum jadi seperti dibuat pondasinya terlebih dahulu dibuat tiang-tiang oleh para konstruksi seperti teman-teman jadi html ini dibuat untuk struktur halaman website Hai nah sedangkan CSS digunakan untuk menghiasi hai oke di JSS digunakan untuk menghiasi struktur yang sudah kita buat Hai Seperti apa menghiasi ini ya seperti kata menghiasi tersebut dia bisa mengubah warna memberikan warna Hai yang ada di dalam html maaf yang ada dalam website jika ideal masa tersebut ada teks ada gambar ada video nah Hai gambar itu bisa diedit atau ini dihiasi menggunakan CD CSS Hai ke teman-teman bisa menangkap Hai Nah nanti kita akan belajar langsung dengan prakteknya memang kalau di teori itu kita sedikit bingung Hai karena tidak ada yang merealisasikan ya oke Belajar yang terbaik itu memang belajar sambil praktek teman-teman oke yang pertama yang kalian harus siapkan adalah text editor Hai dan browser Hai muke disini sudah tahu ya Apa itu Google Chrome dan sudah familiar juga Hai sudah sangat tahu apa itu Google Chrome Google Chrome ini adalah browser tempat-tempat jika belum ada yang tahu di tempat kita untuk menjelajahi website nah sedangkan Visual Studio code atau yang disebut teks editor sesuai dengan namanya editor teks Kenapa editor teks karena ketika kita membuat HTML dan CSS kita menyusun kode demi kode atau perintah demi perintah yang menjadi sebuah kumpulan perintah yang bisa menghasilkan sebuah karya tertentu dan disini adalah kita akan menghasilkan sebuah website statis dari HTML dan CSS hai oke nah tekstur ini digunakan untuk menuliskan perintah-perintah yang saya sebutkan tadi Nah sedangkan Google Chrome ini atau Browser yang menterjemahkan Oke menterjemahkan atau menjalankan kode yang sudah kita buat hai oke teman-teman Hai Nah pertama untuk mendownload Visual Studio code kalian bisa searching aja di Google free download FPS chord ini sangat populer sekali teman-teman didownload dulu aja Hai ini kalau mengganggu saya hilangkan dulu oke nah disesuaikan ya sama sistem operasi kalian kalau windowsnya Windows kalau Linux selinux kalau mekimek oke simple dan kalau sudah silahkan diinstall di next next aja teman-teman Hai Nah kalau Google Chrome ini sudah dipastikan saya semuanya sudah menginstall hai oke Hai Nah sekarang silahkan klik dua kali di Visual Studio code nya Hai Okay sudah kebuka ya Nah tampilannya akan seperti ini tempat-tempat Hai nah sebelum kita memulai ia menuliskan kode di dalam teks editor ini Hai yang pertama yang harus kalian lakukan ini sebenarnya opsional sih bisa dilakukan atau tidak tapi untuk ah membuat nyaman mau dikit aku untuk kedepannya Hai apa salahnya kita untuk mensetting setting terlebih dahulu Nah klik file di pojok kiri atas lalu Friends hai lalu klik settings Hai klik teman-teman nah jangan bingung ya Ada banyak menu disini diabaikan aja silahkan ke sekolah ke bawah Maaf sekolah ke bawah hai cari sampai ada Katak Word Hai web Oke ini tuh apa Nah ini dionin aja dulu Hai di Orin aja dulu Nah setelah itu kalian bisa close caranya silang Oke sini ada tombol close takenaka seperti teman-teman Hai Oke sekarang kita coba buat folder dulu Hai di deskop ya Klik Kanan new Hai folder nah Berikan nama folder belajar website klik enter di letakkan di sebelah Google Chrome atau bebas sih gimana aja losa Terlalu kaku ikutin videonya Oke slide tuh ini diklik ditekan di drag ke Visual Studio code hai hai Ya sudah kalau ada yang kesulitan bisa manual teman-teman di klik file Open folder ah ah lalu pilih folder yang sudah dibuat tadi belajar website Hai kalo udah klik select folder hasilnya akan sama seperti teman-teman enggak usah khawatir Oke Nah setelah itu bagaimana setelah itu Ayo kita klik new file hai oke Hai pastikan foldernya benar nama foldernya lalu klik new file Oke Sebelumnya teman-teman saya mohon maaf kalau disini berisik ya Hai Karena berhubung saya buat videonya itu besoknya tanggal merah Hai jadi makluman maklumin aja Hai nah lalu klik new file Hai akan memunculkan abok seperti teman-teman dengan kursor ke Hai yang kedap-kedip Hai normal ya Nah disini silahkan Berikan nama Hai home Hai titik atau dot yang biasa kita istilahkan dot kalau di dunia programming itu teman-teman Hai titik atau dot CSS eh maaf html karena kita belajar html dulu teman-teman jangan langsung CSS nanti bingung mau menghiasi apa belum ada strukturnya sudah hai oke Hai Nah setelah itu klik enter jangan lupa ya Harus kritik home titik html gak pakai spasi enggak pakai pemirsa apapun jarus nyambung titik html itu adalah extensionnya hai oke Hai Nah setelah itu apa Hai Nah setelah itu Hai tadi kita sudah membahas ya Hai atm.ke apa Nah kalau untuk pengertiannya teman-teman html itu Maaf jangan di-enter dulu ini saya Zoom ya Nah ini saya tutup dulu menjelaskan kepada kalian nah ATMnya itu Apa Kaden atau MI itu singkatannya atau kepanjangannya adalah hypertext markup language Hai Oke ini sih katanya teman-teman Hai atml adalah sebuah bahasa markah yang digunakan untuk membuat halaman website Hai ini versi Wikipedia nya teman-teman jika kalian search di Google dan ada referensi dari Wikipedia ini adalah pengertian dari Wikipedia dan saya menghafalnya of course Oke kalau versi simpelnya dari saya ini kasih infonya dari saya adalah Hai untuk membuat struktur sudah sampai sini atau kalau mau disikat lagi yang bisa saya ajarkan ke murid-murid saya adalah struktur udah itu aja jadi tanamkan di otak kalian ATM tua merupakan struktur Hai dan kalian bisa menjabarkan sendiri apa yang dimaksud dengan struktur hai oke dan hai hai di JSS belakangan layak kita ATM dulu untuk atml nah ini pengertian teman-teman dan cara kerjanya Hai kalau kalian lihat di Google di browser dan lihat di website Google Klik Kanan lalu view page source Hai kalian akan menemukan kode-kode HTML Hai Nah sepertinya teman-teman Hai kalau ilmu kerumitan kita bisa cari awalnya lebih simple misalnya codepolitan ya atau apa ya Oh ya udah codepolitan aja teman-teman klik codepolitan.com Hai bisa kalian bisa belajar coding disini juga trek kanan view page source nah disini kalian akan menemukan kode-kode HTML Hai Oke ini ada kode-kode html teman-teman ada yang namanya tag-tag html dan lain-lain jadi proses didalam website hai oke itu cara kerjanya seperti Hai dan setelah itu kita akan belajar yang namanya struktur html tadi kalian lihat itu merupakan struktur demi struktur jadi dibagi-bagi teman-teman nanti kita lihat sendiri nah yang pertama adalah Tag hai hai oke hai pertama yang harus dilakukan membuat tekad email dan dia membutuhkan tag penutup hai oke Ya ini ditelan dulu aja dipahami dipaksa dipahami dulu aja nanti kita akan bahas Lebih detail lagi dan yang berikutnya adalah teh Ed Hai ini bagian kepala didalam website di dalam teks head Hai ada tag lagi yang namanya teto Hai ganti dalam tak Hai ada yang namanya tag body Hai untuk menampung bagian badan dari website hai oke Hi Ho cmah Disini Hai ada satu lagi teman-teman yang kelupaan namanya dostip hai satu lagi fotomu format tab penulisan hai hai Hai utf-8 ok hal ini diabaikan gue teman-teman ya kalau di sini ada yang berwarna-warna ini diabaikan aja dulu Hai Nah kita akan membahas satu-satu nih di baris pertama ada yang namanya dostip Hai Wah Apalagi itu Hai tenang aja teman-teman enggak usah di bingung ini dulu hai Hai dostip html ini merupakan teks yang penting Hai fungsinya sesuai dengan namanya dostip document type Hai html jadi untuk memberitahukan kepada browser kepada browser ini Hai tentang tipe dokumen kita adalah html oke Hai kamu dong kita udah ngebuat kode html tetapi sudah dianggap html oleh sih website Hai tidak ya kalau tidak kita membutuhkan tag ini tak ini sangat penting teman-teman jadi dalam html itu ada beberapa versi dan versi up-to-date nya adalah HTML5 Hai Na untuk kamu beritahukan kepada web browser Hai mengenai versi terbaru dari HTML kita ini adalah dengan cara memasukkan kode seperti ini Oh ya harus dibuka dengan kurung siku buka dan di tutup kurung siku tutup lalu di dalam antara kurung ini dimasukkan nama tekniknya hai oke seperti ini dostip html dan diawali dengan tanda seru a&g Coba teman-teman kalian praktek dulu deh jangan nonton video terus Hai hit sambil praktek aja nggak papa oke Hai mau ketinggalan kamu bisa di-pause Hai nah ini html ya yang berikutnya di baris kedua Hai Nih coba ini kita hapus dulu Hai kalau kita bertinju deh Hai kayak gini nah Hai diabaikan Duadji teman-teman eh kok tadi banyak banget gejala matte metode apa aja Nah jadi setelah kita mendeklarasikan versi terbaru dari dokumen kita yaitu HTML5 Hai Setelah itu kita harus membuka Hai yang namanya perintah untuk menuliskan kode HTML Hai atau yang biasa disebut dengan teks Hai nah tag itu tadi yang sudah saya jelaskan ciri-ciri tak itu kan harus memiliki kurung buka psycho dan kurung siku tuh tutup dan alur dalamnya adalah nama teksnya Hai nah di dalam teh itu teman-teman ada yang namanya tag menutup dan ada yang namanya self closing take artinya tidak memiliki penutup jika kalian perhatikan dostep html ini tidak memiliki penutup Kenapa karena dia dikategorikan sebagai self-closing teks atau teks yang tidak memiliki penutup dia berdiri sendiri nah sedangkan tag yang memiliki penutup seperti tekad email ini dia membutuhkan tag menutup ndak jadi kita harus membuat teks membuka dan Teknoup untuk tag penutup sendiri hanya Hai ditambahkan tanda slash di depan nama text Hai di sini ya bukan di belakang hai oh kalau di belakang kalau di Visual Studio code diatas header kita dia akan memberikan warna merah artinya error atau artinya salah Oke kita bulatin lagi nah jadi kita buka dulu nih Ayo kita buat pembukaan produknya dulu nah habis itu kita belah dua setelah Ayo kita belah dua Nah seperti ini ya engkau awalnya seperti ini kita buat teh pembuka dan tag penutup lalu kita belah dua teman-teman Nah iya berarti tandanya di dalam tktp ini kita mulai membuat multi membuka tekad email Hai jadi kita sudah siap untuk membuat ah ah kode-kode HTML hai oke Nah setelah itu Ayo kita buka atau kita buat lagi Hi Tec untuk bagian kepala yaitu tag head jika di badan kita memiliki kepala dan memiliki badan nah website seperti teman-teman ini dia membutuhkan yang namanya tag head atau bagian kepala bagian kepala ini untuk fungsinya untuk menampung informasi tambahan tentang website Hai informasi tambahan itu seperti apa informasi tambahan seperti e-toll di pojok kiri Maaf di atas window bar Kalian membaca kalian ketik itu nah ini adalah title atau judul dari website kalian dapat Hai dan di samping inilah namanya favicon atau logo kecil yang mewakili website kalian dapat Hai Na jika kita lihat lagi di dalam website ini sebenarnya ada informasi tambahan lagi nah informasi tambahan ini lebih dikhususkan untuk search engine atau robot bukan sebab untuk manusia bukan ini lebih dikhususkan untuk si robot game mesin pencari Google Oke karena sistem tadi fungsinya untuk informasi tambahan aja mengenai website hai oke nah informasi tambahan itu ada apa aja informasi tambang itu ada lagi teman-teman Ade namanya Meta tag Meta j&j membutuhkan satu atribut nama atributnya adalah utf-8 nah jika tadi kita sudah membahas Tag Ya udah sekarang kita akan membahas yang namanya atribut-atribut itu apa atribut itu nama setelah text Hai jika tak berdiri sendiri Satu kata aja Nah kalau dalam tak ada dua kata misalnya length Nah sudah dipastikan kata kedua itu setelah namatek adalah atribut Hai atribut itu adalah informasi tambahan untuk Tag hai oke Hai informasi tambahan untuk text Hai jadi chased ini adalah atribut dari tag Meta Hai dadcrush.com membutuhkan nilai Hai Bisa membutuhkan nilai bisa membutuhkan ah ah tidak membutuhkan nilai seperti layaknya html ini adalah atribut juga teman-teman atribut dari dostep Hai tapi dia tidak membutuhkan nilai karena Tibet ini sudah mendefiniskan nilainya sendiri nah sedangkan charset Hai Ia membutuhkan nilai Kenapa karena didalam atributnya set ini Hai ada beberapa nilai Jadi bukan hanya satu Nilai saja Hai Oke jadi dia membutuhkan operator sama dengan untuk memasukkan nilainya waktu sama dengan lalu tanda kutip dua hai lalu nama atau lalu nama value dari atributnya hai oke teman-teman Hai jadi atribut charset ini Hai membutuhkan Hai nilainya adalah utf-8 utf-8 ini merupakan Hai nilai atau teks perintah Hai untuk I am menjelaskan Hai kepada web browser tentang aturan penulisan Oke aturan penulisan suatu dokumen Hai sesuai dengan nama-namanya charset atau karakter set Hai jadi isinya adalah merupakan perintah untuk Hai menset karakter-karakter yang ada didalam halaman html ini dan nilainya merupakan ytf-8 atau yang Biasa disingkat ini singkatannya atau kepanjangannya adalah uniforms Translate formatting kodya salahe teman-teman bisa di-share sendiri dan Steve 8 ini adalah versi yang paling baru ya jika kalian tahu ada Hai jaman dulu atau zaman yang sebelum sekarang teman-teman Hai di dalam warnet itu sangat terbatas untuk konten-konten nya jadi Hai website seperti kata-kata seperti bahasa Arab di Korea di Jepang Hai itu tidak bisa ditranslate Translate secara baik oleh Browser Hai jadi browser dulu belum kenal Wah ini Bahasa apa jadi ketika ditranslate Dia hurufe kota-kota pernah nggak kalian mengalami hal kayak gitu Hai di handphone saya pernah mengalami teman-teman kayak gitu Jadi handphonenya akan bunyi jadi oleh teman saya kan Handphonenya Lumayan keren jadi ketika dia SMS ke saya pakai emot di handphone dia muncul Nah ketika di handphone saya itu kotak Makasih bingung ini lo ngirimin apa gitu Hai nah disitu ketika saya berada ini saya sadar Oh iya saat itu dulu sebelum ada yang terbaru tidak bisa menterjemahkan dengan baik dari browser web seperti teman-teman Jadi sekarang sebelum hadirnya 8 ini huruf-huruf seperti yang saya sebutkan tadi tidak bisa ditransfer dengan baik jadi bisa tidak bisa diterjemahkan dengan baik enggak bisa ditampilin sesuai dengan apa yang diinginkan sekarang yt-8 ini Hai Bisa amat Terjemahkan hampir semua bahasa jadi seperti rumus-rumus Matematika itu bisa diterjemahkan dengan baik oke seperti itu Ya intinya Nah setelah itu ada atribut yang tidak kalah penting yaitu yang namanya tag title sesuai dengan namanya sesuai dengan judulnya yaitu title judul yaitu untuk memberikan judul di halaman website Oke sebenarnya kalau bisa melihat nih pengertian dari masing-masing teks tinggal di cover aja Letakkan pointer di atas text yang kalian mau tahu dia theme elemen represent the root of an html document hai oke nah telo ini silakan kalian masukin nama kalian Hei Dena Rachman di hai oke daerah mandi ya Nah coba di-save kalau tanda bulat Mas tanda buat seperti ini tanya bisa tempat dia tuh Hai bisa kalian file klik save Hai atau kontrol di keyboard control es Nah kalau seperti ini biasanya teman-teman ini saya karena saya menggunakan extension atau menggunakan flagged jadi secara otomatis jadi DC seperti ini ini diabaikan aja Hai secara umum dia sama 200 kita lihat kita akses file-nya cara mengaspal gimana oke Hai masuk ke folder yang kalian buat tadi dan masuk ke dalam file html kalian yang berlogo Google Chrome nah jika logonya belum Google Chrome kalian bisa Klik Klik Kanan properties jika di Windows ya terus di open with nya ini tak ada Google Chrome atau browser kalian masuk Oh ya Sel default lalu klik change saja klik change nah lalu pilih browser yang kalian inginkan default-nya apa kalau saya Google Chrome Hai Nah klik Google Chrome aja kalau klik ok atau apply habis itu klik apply lagi yang dibawah sini Ok Jangan Hai yag otomatis langsung ngebatin jadi secara jadi ketika kita klik dua kali dia akan mengarahkan langsung ke browsernya Hai Farhat KTP ini berjalan di sisi browser.jad dua kali Nah sekarang kita sudah berhasil membuat sebuah teto dengan nama kita sendiri Hebat ya Hai mantap Oke selanjutnya kita balik lagi ini bisa di close wow browsernya Ayo kita balik lagi ya karena editornya Nah setelah itu kita baru masuk ke dalam tag body Hai wow tag body nih Techno ini seperti Eh badan kita teman-teman kita memiliki badan-badan ini tempat komponen-komponen tubuh yang paling penting ada di dalamnya Oke seperti jantung paru-paru walaupun otak kita tidak kalah pentingnya Tetapi lebih banyak di dalam padat kita nah seperti itu seperti itu juga didalam website atau jalan di tempat kita menulis kode tidak sebenarnya lebih banyak di dalam tag body di jalan tag body Hai hampir 90% yang kita tulis di jalan body itu akan tampil di dalam dosa kau tadi tekad ini Hai posisikan hanya untuk menampung informasi ya informasi tambahan termasuk titok the potato ini muncul Nah Thailand termasuk salah satu dari sekian banyak tag yang ada di dalam tag head hasilnya muncul di dalam browser Nah kalau metal case tidak muncul ya karena metal case ini lebih ke robot ke mesin pencari ke sistem bukan ke pengunjung kita lebat Nah kalau kita masukkan di lantai body ini dia akan otomatis langsung muncul di dalam browser Coba buktikan deh terus dulu misalnya nama kalian lagi lalu kontrak Hai kalau estrus diatasi oleh kotor F hai loh keren ya Ada nama kita sekarang di browser walaupun belum terlalu banyak hiasan-hiasan nya atau tidak mencerminkan sebuah website yang utuh bawa Hai kek Hai nah oke mungkin di sini ada yang bingung ya ini kenapa ada spasi disini tidak gini aja hai kenapa harus di dorong-dorong seperti itu Nah sebenarnya teman-teman karena kita akan membuat karena di dalam cerita kita pasti akan berhadapan dengan kode-kode html dan itu tidak satu atau Hai tidak sampai puluhan tidak sampai ratusan hai oke dia bisa lebih dari ratusan kode Hai nah baya Enggak tadi bisa bayangin enggak Kalau pesan kode itu semuanya sama pasti kita akan bingung banget hai maaf ini merupakan identitas atau identitas Hai untuk memberikan jarak untuk memberitahukan kepada kita bahwa tag Meta dan factory ini adalah merupakan anak dari tekad Hai jadi dalam tekad ini ada dua tak lagi Jadi dia saling terhubung dengan tank atasnya atau parent page Hai kalau sejajar ini berarti dia sama ini teman-teman Hai tekad email teketek body Hai hehe Hai itu cuman masalah apa namanya ya Hai masalah standar penulisan aja kalian harus dipanen harus ikuti juga sih kalau nggak ikutin kalian akan kebingungan nanti Oke lupakan dari cukup sampai situ aja penjelasan tentang idealnya identitasnya Nah setelah itu kita sudah tahu dan mengenal strukturnya ada dostep html Nah tadi kita sudah belajar ya tentang teks Hai terus atribut Nah tadi tak itu apa Hi Tec itu ah ciri-cirinya Maaf Hei Teks ciri-cirinya itu diawali dengan kurung siku buka dan kurung siku tutup dan ditengah-tengahnya ini merupakan nama tekniknya misalnya nama ternyata email-nya berarti dalam tekad email channel matanya body 6 body dalam ini harus di dalam ciri-cirinya yaitu Mumu Hai memiliki tag pembuka kurung siku tutup dan fungsi kubuka Hai kalau seperti ini gimana nah kalau nih seperti ini berarti bukan TKD tidak lengkap dan ketika dia proses juga dia akan Eropa atau dia tidak akan menampilkan yang semestinya akan bermasalah itu pentingnya ketelitian teman-teman [Tepuk tangan] Hai kalau Hi Tec itu membutuhkan timer untuk tinggal ditambahkan aja Techno tutupnya hai lalu butuhkan Techno tutup nah tag menutupnya harus sama aja nama teknis sebenarnya telurnya sama tapi yang membedakan dia penutup adalah ditambahkan tag ngak ditambahkan Flash hai kya Maaf ya teman-teman kalau disini Saya tidak fokus karena sudah malam sekali Halo Hana demi kalian nih buat videonya berhubung waktu saya kosongnya cuma malam jadi saya buat di malam hari waktu istirahat saya gunakan untuk video papa ya semoga bermanfaat aja Oke ini merupakan Tag hai hai Hai atau yang biasa dibilang juga elemen teman-teman teks atau elemen-elemen Hai semuanya Sama aja sih kayak atau elemen-elemen Hai yang petikan intinya itu merupakan sebuah perintah Hai keasaman seperti ini dan atribut-atribut yang sudah kita Sindir tadi yang sudah kita bahas Juga misalnya tekad email ya Um tag menutup tetapi diam membutuhkan teks ama butuh atribut juga berarti tinggal ditambahkan aja di dalam tag ini syaratnya dia harus ada di dalam lingkup teks Pembukaan Oh ya seperti ini ya Jadi tinggal di spasi aja Tidak body luar teks kalau duet seperti ini negatif bukan hal di dalam teks kita harus masuk dalam teks-teks nya juga harus di dalam tag pembuka bukan teks penutup menuliskan atributnya Hai jadi spasi laut Nama atributnya apa Nama table tennis Challenge Hai jok amembuat perintah tentang bahasa yang digunakan oleh html ini Nah untuk memasukkan nilainya dengan tanda sama dengan lalu titik kutipdua dan nilainya diapit oleh titik dua ini nilainya misalnya dua digit bahasa negara di Indonesia batia id Oh ya gitu teman-temannya pembuatan atribut Hai Nah setelah itu ada yang namanya konten konten Hai white salah apa itu konten hutan itu yang ada di dalam teks Maksudnya gimana Maksudnya gini coba Niken html yang misalnya memiliki atribut enggak usah Pusing tinggal buat aja atributnya kayak gini ya Halo kekuatan itu ada ini dia terletak di dalam antara teks pembuka dan tag penutup nah Edi tengah-tengah ini teman-teman isinya nah ini merupakan konten yang Khaled ini Oh ya akan ia tampil di browser kalian masuk hai oke Oh iya aku sehat hai hai hai kya itu merupakan Hai atek elemen dan atribute teman-teman HP di situ penjelasannya Nah sekarang kita akan membahas tag heading heading heading heading level Ya udah coba aja buat aja hak satu dan dia membutuhkan TeknoUp Hai Mbak Regita bermanfaat tuh diam ngentekno tutup dan nilainya harus kita masukkan diantara tag H1 ini soalnya sama kita lagi kotor es lalu lihat ke browsernya pastikan browser tadi belum di close jadi kita tinggal pindah aja ke browser lalu kontrol er di keyboard secara cepatnya atau direfresh tekan tombol reload this page Oh lihat ya dia akan memberikan tampilan sesuai dengan formatnya Hai di dalam html itu terdapat beberapa teks teman-teman atau beberapa perintah yang di sudah diatur oleh atau dibuat sedemikian rupa oleh html nah TK satu ini ini merupakan tag untuk memberikan judul di halaman website sampai tingkatan haknam nitikan terkecilnya dan H1 inilah tingkatan terbesarnya the Tingkatan tertinggi jadi H1 ini besar h6 ini kecil karena Teh Kotak es kalau refresh lihat kecil banget coba kita buat sampai berurutan hai hai Hai ke teman-teman sudah saya buat 1-6 kontras terlihat hasilnya Hai Keren ya kita sudah membuat akhir-akhir format jurnal dari yang paling besar sampai yang paling kecil ini untuk membuat judul teman-teman the key Hai selanjutnya kita akan belajar yang namanya encore Hai ekor elemen itu untuk membuat Link teman-teman Hai nah cukup pakai TK saja nama teknik a&y membutuhkan timer untuk sampai di sini cukup tidak dia membutuhkan atribut teman-teman nama atributnya adalah reef karena sebuah link pasti tidak lepas dari tujuannya nggak ada kan Link yang ketika kita klik gitu tidak mengarahkan ke mana-mana pastinya mengarahkan ke sesuatu tempat atau menyalahkan ke suatu website seperti itu ya nah refine iuntuk eh ia mengarahkan kita ke tujuan yang diinginkan reef ini untuk memberikan tujuannya jadi ketika Aini diklik dia akan mengarahkan ke tujuannya Hai nah hak reef ini artinya adalah hyper Friends hai hai Hai jadi referensi besarnya gitu Hai Jadi intinya itu lokasinya dimana Hai lokasinya misalnya kita mau membuat link menuju ke Hai Coba kita akan Hai google.com lalu enter nah alamat ini dicopy teman-teman dia harus lengkap ya menggunakan https titik 2 dans les enggak boleh google.com aja nanti bermasalah karena ini namanya IP Protocol temen-temen hai gak boleh kreatif ya Nah setelah itu coba kontrak SD di-save ya lalu kita lihat hasilnya kotor er loh kok nggak ada Kaden kenapa enggak ada karena kita belum memasukkan Hai data yang akan tampil Oh maksudnya gimana maksudnya Coba kita masukin aja deh langsung Hai klik disini terus kongres dan lihat hasilnya lihat bagaimana Hai Nah jadi dia tidak cukup sampai di TKJ teman-teman dia membutuhkan nilai yang mewakili tag ini Hai Jadi sekarang klik disini ini memiliki hai Hai untuk memberikan Link sesuai dengan tujuan google.com Hai Oke jadi kita untuk memasukkan link ini Hai harus namanya harus ada di dalam Hai TK atau tackling ya Enggak boleh di luar teman-teman saya dihabisin Ya udah mandi otores nah dia tidak akan terbaca sebagai link Kenapa karena dia tidak ada di ruang ATMnya atau lingkup dari tekad email ya Naho dipindahkan misalnya saya pindahkan bisa enter spasi biar jarak lalu saya punya kali kesini maka klik disini Rahmadi akan menjadi Link lihat ya Halo Keke pasti sudah paham lah untuk yang dasar seperti ini mah stress kalau menjadi ketika kita klik Coba kalian klik ini dia akan mengarahkan ke google.com Hebat ya makanya bisa membuat nih kreativitas kali aja misalnya mau mengarahkan ke website mana aja misalnya aku YouTube jadi nggak usah capek-capek nih Klik youtube.com kayak gitu Langsung aja nih diubah YouTube nah disini bisa ini aja klik Ayo Click Hai YouTube lalu apa nih jangan sering dikunjungi apa ayo Hai m di Instagram nursaleh dua aja sebanyak-banyak lalu silahkan kalian nih disilang aja halo halo diri Flash Hai nah jadinya klik Google dan klik YouTube loko ini tidak sesuai dengan apa yang kita Tuliskan di sini hem kalau kita tulis disini dia berurutan ke bawah ada garis baru jadinya kalau disini tidak kenapa nah karena html tidak sepintar itu teman-teman atau lebih tepatnya browser tidak sepintar itu jadi kita harus menuliskan perintahnya Duri alamat email ini perintah untuk membuat garis baru karena si ATM BRI tidak membaca Hai bahwa Hai Aa Syiah rap ini atau link pertama dan kedua ini ini merupakan kata2 paragraf yang Hai tetapi ketika diasti browser.jad dianggap satu baris yang sama Kenapa karena ini merupakan sifat bawaan dari masing-masing text Hai apalagi tuh Bang Nah jadi setiap tag itu teman-teman memiliki sifat masing-masing Hai jadi TKI ini sifatnya adalah inlight radio Hai apa itu Inline sesuai dengan namanya dalam baris jadi ketika dia browser ada satu Inline dan satu ini lagi dia akan disambungkan Jadi inland pertama dan Inline Hai inden pertama ini diproses oleh browser Lalu ada ingin berikutnya nah dia akan ditumpuk di satu baris nanti di dalam CSS kita bisa mengatur sifat itu teman-teman jadi kita bisa melihatnya menjadi blok-blok itu artinya dia jadi kabar pertama ini Hai bisa berbeda dengan baris kedua jadi Tidak Dianggap in lagi jadi barisnya akan seperti ini gadis baru Nah untuk menangkap ya Istilahnya ya baru Hai untuk mencegah itu teman-teman kita bisa hai menggunakan yang namanya hai oke Hai breklin artinya teman-teman jadi dia seperti enter fungsinya ini ketika kita menuliskan BR dipojok atau disuruh di akhir kalimat kritik ugal-ugalan ini dia akan membuat baris baru untuk tag berikutnya Nah coba lihat deh kontras lalu kita lihat er Hai Keren ya terjadi di enter dipaksa enter oleh Browser Hai Oke teman-teman jadi kalau kita perhatikan kalau diperhatikan misalnya nih saya klik Hai ceklik Google dia akan menimpa halaman HTML Ayo kita yang sebelumnya Hai selesai klik YouTube pagi Hai lihat dia akan menimpa halaman html kita Hai bagaimana caranya untuk Ayo kita mengoper Tab baru jadi ketika kita klik e-link apapun yang kita klik akan mengarahkan ke Tab baru jadi tidak menimpa halaman html kita yang sekarang ini jadi ketika kita klik Google dia akan mengarahkan seperti ini memberikan teh baru Hai caranya Hai tambahkan atribut Dit keliling yang kita Hai inginkan Hai target nama-nama tak nama asli punya target teman teman sebagai ah ah lalu tambahkan underscore lalu namanya Blank ini sudah dari sananya teman-teman saya bukan kreatif tipe namanya seperti ini target Blank artinya ketika Hai link ini diklik ini dia akan mengarahkan ke Tab baru atau ketika target ini diklik dia akan mengarahkan ke Tab baru Hai Nah coba lihat kantor er Hai segre Google lihat dia mengarahkan ke teh baru dengan link tujuannya tanpa menimpa halaman ATM saya Hai Oke kau di YouTube Bagaimana tingkat tambahkan aja targetnya lalu atributnya Blank sore selalu lihat nge-lag YouTube cara mengarahkan YouTube ya Hai selanjutnya ada yang namanya image ini yang ditunggu-tunggu teman-teman Hai cara kita memasukkan gambar di dalam halaman html kita atau didalam halaman otot kita Hai nama teknik adalah IMG atau image dan tidak cukup sampai disitu dia membutuhkan atribut yang namanya src hai oke Hai SC ini mengoper bola Hai atau membutuhkan nilai lokasinya lokasinya dua opsi teman-teman kita bisa memasukkan lokasinya yang ada di dalam lokal kita Oke jadi kita harus memasukkan gambar dulu ke dalam folder kita lalu kita akses di sini atau opsi kedua kita bisa mengambil gambar dari orang lain hai oke ini dia harus memiliki internet ya syaratnya harus memiliki internet harus terkoneksi internet karena kan kita mengambil gambar orang lain untuk ditampilkan di halaman atau kita otomatis kita harus kan mengotomatisasi tak harus mendownload gambar orang lain dulu lalu kita tampilkan di halaman Facebook kita seperti itu ya beda kalau kita men-download dulu lalu kita ke Hai masukkan di dalam folder kita lalu kita akses nah Disini saya akan mencontohkan untuk opsi kedua hai Hai masukkan aja ke kita cari di Google dan misalnya saya mau cari Ahmad kaum website saya gambarnya Celine Iya logonya Klik Kanan di gambar yang mau kita tampilkan lalu open image in new Tab Hai sampai seperti ini sampai dia masuk ke detail gambarnya lalu ambil link-nya teman-teman Hai kontrol C lalu pastekan di dalam src ini Hai nah oke ya Hai nah lalu kita lihat hasilnya Oke dia sudah muncul gambar teman-teman Hai itu untuk memasukkan gambar di opsi pertama Hai dan alt ada atribut kedua namanya lt28h LTE ini adalah alternatif teks sesuai dengan namanya teks alternatif untuk apathex alternatif ini stres alternatif ini untuk Hai menginformasikan ketika halaman Ketika Hai gambar ini tidak bisa diakses pernah enggak Hai mengalami gambar tidak bisa diakses atau gambar PS Hai nah klt ini akan mewakili gambar yang keras tersebut nah misalnya ya alternatif teksnya ini kan gambarnya merupakan logo berarti logo Rahmadi com Hai Nah coba kontes lalu lihat hasilnya Hai tidak terjadi apa-apa memang tidak terjadi apa-apa klt ini akan ia tampil ketika kita Hai mendapatkan linknya eror Nah karena Hai berhubung kita mengambil gambar dari orang lain atau mengambil Hai gambar dari internet Hai tidak menutup kemungkinan gambar ini dihapus oleh pemilik pemiliknya pemilu Hai atau bahkan gambar ini sedang di server sedang down otomatis gambar tidak bisa diakses Nah jadi ada ada beberapa kemungkinan teman-teman Sekarang kita akan mengambil gambar dari orang lain misalnya ya Hai seandainya link ini Crash atau gambarnya dihapus oleh pemiliknya Hai misalnya saya saya apus salah satu link-nya jadi eror kayak gini lalu konser masih bisa jangan Hai teh misalnya karena situ kan untuk security-nya Hai seperti ini protokolnya otomatis dia akan error the Bear ya kabarnya Crash menampilkan gambar seperti ini gambar tercoret lalu Hai ada nama logorama dikau nah ini adalah merupakan alternatif teksnya jadi orang tidak bingung apa ya Gambar apa yang rusak Oh ternyata gamerzhack adalah logo Rahmadi com jadwal tidak penasaran teman-teman hai oke Ya itu untuk alternatif.com ini tuh opsi pertama mengambil gambar dari orang lain Hai untuk opsi kedua yaitu kita harus mendownload dulu atau kita menyediakan gambar dulu misalnya ya hai hai Hai misalnya download gambar ini saya klik subscribe kanan save image as halo halo gede scope Hai namanya logo formatnya pnj save Hai nah lalu kembali ke Wates kita lihat halaman logo hai hai deskop ini saya pindahkan ke folder Saya belajar website Hai nah Hai masukkan aja langsung nanti di satu folder yang sama hingga teman-teman nama file-nya dan nama formatnya format png Oh no otomatis di Visual Studio kota akan muncul gambar yang kita masukkan kalau nggak muncul di klik refresh aja hari face powder Hai hadits-haditsnya default mata juga Hai Nah setelah itu src ini kita hapus semua kita masukkan gambar dari lokal kita dari komputer kita berhati-hati masukkan logo nama file-nya teman-teman karena di dalam satu folder yang sama Hai logo lalu sertakan nama formatnya Jangan sampai salah Hai harus lengkap ya dengan nama formatted pakai titik dan formatnya Hai keatas roaster lihat hasilnya dia muncul hai oke Hai itu untuk gambar Hai berikutnya adalah table cara kita membuat table Hai cara buat label kita cukup membuka Hai tablenya dulu teman-teman untuk memberikan perintah bahwa kita ingin membuat table Nah setelah itu kita masukkan baris karena di dalam html itu identik dengan baris dan kolom nah tidak html pun seperti itu teman-teman kita harus memasukkan baris terlebih dahulu baris itu namanya adalah PR atau table.row table.row nah Berarti sekarang kita dia membutuhkan rekrut ya Hai hebat sekarang kita membuat satu baris Hai nah di dalam baris pertama ini saya ingin memasukkan dua kolom berarti kita menuliskan kolom pertama dulu untuk memberikan kolom menggunakan tag TD harus di dalam ttr ya Hi Tec baris karena kita ingin buat kolomnya di dalam baris dan baris pertama Nah tadi ini artinya table data memasukkan datanya apa Diba di kolom pertama di baris pertama juga nomor misalnya terus di kolom kedua masih di baris pertama yaitu nama Nah kita lihat hasilnya Hai ok seperti ini ya Kok tidak seperti table Iya Nah betul kita bisa menambahkan border disitulah teman satu Kenapa warnanya merah karena bodoh ini sebenarnya atribut yang sudah tidak disarankan oleh Hai digantikan oleh CSS karena bordir ini sudah masuk ketampilan ngeces itu kan diciptakan untuk menghiasi untuk memberikan tampilan Hai kepada html jadi untuk masa tampilan itu diserahkan ke CSS Nah karena ini hanya untuk contoh aja untuk memudahkan kita karena kita tidak boleh langsung membahas CSS kita harus membahas html sampai kelar sampai selesai jadi kita akalin dulu teman-teman Hai pakai bodoh dulu aja walaupun saya disarankan ya Nanti kalian tidak boleh pakai border lain harus pakai CSS nah Torres melihat hasilnya Ya akan memberikan tampilan seperti ini kotak-kotak layaknya sebuah table Halo untuk memasukkan data Bagaimana masker datanya berarti kita buat baris baru lagi buat baris baru buat kolom pertamanya nomor satu berarti hai hai Hai dan kolom keduanya adalah nama saya OS dan lihat hasilnya Nomor 16 agama di kalau naik membuat 21 data lagi mana tinggal buat aja Ayo kita copy lalu paste dan nomor 2 berarti namanya misalnya Hai Agus Hai Jono counter Estate hasilnya Hai sudah berhasil oke teman-teman itu untuk membuat table hai dapus Hai selanjutnya kita akan membahas text form Hai jika kalian pernah makan ia melihat halaman login atau halaman register halaman masuk atau halaman daftar disana Pasti kalian pernah menemukan input field atau kolom input untuk memasukkan data Hai seperti nama lengkap Email nomor telepon Hai alamat Hai dan bahkan yang lain-lainnya kalau kalian pernah ke Tokopedia juga atau Bukalapak ecommerce berbelanja online karena bisa kalian pasti harus memasukkan detail pembayarannya dan Detail informasi untuk produknya setelah catatan untuk membelinya penjualnya seperti teman-teman yaitu dibuat menggunakan input field Nah introvert itu kita harus membungkus Hai di dalam teks form seperti tag table tadi j&t Khomeini membutuhkan trek menutup Hai dan action action ini sebenarnya untuk data mau dikirim ke mana ketika dia diklik hai oke Hai ini bisa dihilangkan teman-teman itu karena sudah berbau data kita belum membahas ke situ karena kita hanya membahas ATM saja Hai nah berikutnya adalah kita masukkan input tipenya text di dekat aja hasilnya Hai jadi dia membutuhkan tag input lalu membutuhkan atribut yang namanya tipe karena di dalam teks input ini sangat banyak sekali tipe-tipenya makanya ada atribut tipe dan nilainya berbeda-beda nah disini masalah aja tipenya teks otores terlalu kotor er apa yang terjadi Dia akan memberikan kotak seperti ini tapi ketika kita klik D bisa kita masukkan data nah seperti ini ya hal ini memungkinkan kita untuk mengirim data ke server Hai nah mengirim data ke server itu dibutuhkan bahasa lain selain html dan CSS yaitu bahasa pemrograman a server-side kalian dikenal bahasa untuk pemrosesan data yaitu seperti PHP Python ruby dan yang lainnya karena kita nyoba saat ML jadi kita lupakan saja dulu ini kita hanya membuat struktur nya dulu Nah untuk memberikan teks melayang di atas input ini kita bisa memasukkan attribute namanya placeholder dan Hai nilai atributnya apa misalnya Masukkan nama kotor s100rr di atasnya teman-teman dia akan memberikan teks melayang seolah-olah tak sini ada di dalam input ini jadi ketika kita ketika sesuatu Hai teks melayang ini akan hilang lihat misalnya masukan nama saya suka ama Adin menghilang Ya oke itu untuk teks melayang namanya placeholder Hai nah selain itu kita bisa memberikan judul di atas ya teman-teman jika Hai seperti ini ya kita berikan di pinggir kirinya misalnya nama lengkap titik dua spasi kotor air nah dia akan memberikan seperti ini Hai kalau inputnya ini mau di bawahnya kita bisa memberikan tgr Ayo kita enter biar lebih rapi Hai G Hai seperti itu ya Hai Nah jadi Tapi kalau kita klik nama lengkap ini Hai masukkan Nama lengkapnya tidak Hai tidak aktif secara otomatis Nah kita bisa menggunakan yang namanya tag label jadi ketika kita klik nama lengkap ini otomatis si kolom Masukkan nama ini aku otomatis aktif seperti ini karena menangkap ini kan bersangkutan ya dengan input ini jemputnya di bawahnya Hai menjadi seolah-olah nama lengkap ini ketika kita klik otomatis dia mengaktifkan kolom yang perkolom Masukkan nama ini kita bisa kurung di dalam scrable namanya Ayo kita kurung Hai jadi kita membuat suatu apa ya seperti link tadi teman-teman jadi kita bungkus Nama lengkapnya input ini seolah-olah dia mereka adalah satu komponen Hai anggota Reza Lukita covered Nah lihat ketika saya mengklik Nama lengkapnya saja otomatis psikologi ini akan aktif Oke Keren ya Oke selanjutnya ada yang namanya teks select select itu kalau kalian pernah melihat the button Jika dia diklik Dia memberikan dropdown Hai perangkat seperti itu Raya Nah itu bisa kita buat menggunakan Hai yang namanya teks select kita bisa kurung kotak label dulu teman teman seperti tadi yang hai lalu kita berikan judulnya Seperti nama lengkap tadi misalnya ini untuk gender atau jenis kelamin kelamin titik dua lalu kita berikan enter nah disini namanya adalah teks elek dia butuh merekrut teman-teman hai lalu kita membutuhkan datanya a-data dropdown jadi kita ketika kita klik baterainya dia akan menampilkan data-data yang ada misalnya karena jenis kelamin Hanya dua data aja berarti kita masukkan data Hai untuk memasukkan datanya menggunakan teko option dan membutuhkan TeknoUp Hai masukkan datanya misalnya lagi-lagi Hai opsi berikutnya adalah perem Hai perempuan perang perempuan oke Ya seperti ini nah ketika kontrol OS lalu kita kontrol er wow kenapa jadi seperti ini Hai karena kita belum memberikan gak baris baru di setiap tag label nah label ini Hai belum kita berikan enter tampilan enter Dewa seperti ini ya kalau dia masih dempet kita bisa memberikan enteni lagi walaupun cara ini tidak efektif cuman Hai bukan Cara yang terbaik Karena berhubung kita baru belajar html kita bisa mengakalinya dengan ATM dulu walaupun nanti kita bisa mengakalinya ini menggunakan css3 Hai lihat nah seperti ini ya ini ketika ketiak ketika kita klik Hai buttonnya dia akan memberikan data jadi ketika data perempuannya Saya klik dia akan otomatis mengganti cara merubah Hai inputnya Naho laki-laki laki-laki kalau Secret berempat auratnya berubah menjadi perempuan seperti deh untuk dropdown nah berikutnya Ayo kita buat table lagi kita buat label maksud saya untuk membungkus untuk membedakan satu sama lain ini saya BR lagi senter lagi Hai untuk memberikan jarak Hai Om saya betul namanya adalah yang berikutnya adalah checkbox kalau input select maaf kalau untuk select kita hanya bisa memilih satu di atas saja berbeda dengan input text box kita masukkan dua ya teman-teman untuk memilih skill misalnya Hai skill kita buat enter lalu kita masukkan inputnya hai hai Hai inputtype nya apa hai hai hai checkbox agan2 nya adalah Hai nah seperti teman-teman Hai nah bedanya kalau di input text book ini Hai lebarnya itu harus dikurung per inputnya karena kalau kita kurung di label bisa tuh judulnya juga juga masuk ke dalam label otomatis ketika kita klik skillnya otomatis isi kolom checkbox ini akan menceklis ya ngelihat ya Saya klik nama skillnya otomatisnya mau mengecek list Hai save tidak mau seperti itu Saya maunya ketika nama html nya aja kalo diklik otomatis si cekungnya muncul eh maaf Facebooknya itu membuat centang hai oke Hai jadi label ini tidak kita masukkan di dalam Hai judulnya jadi Juli kita Pisahkan Hai seperti ini nah tapi yang kita kurung dengan label satu komponen input sama namanya Hai label forget hapus Hai nah Disini Oh berarti sekarang input dan namanya kita turun di label supaya html ini Ketika saya klik akan mengarah ke input ini ya Otomatis di ceklis terlihat ya kontras.org Nah Ketika saya kerikil tidak otomatis mengecek listnya tapi kalau Ketika saya klik html nama htmlnya dia akan otomatis mencek list check box nya oh ya oh ya teh oke mantap Hai saya mau buat dua tiga cek deh kayak dua aja sbuah kedua adalah CSS nah Oke jadi skill saya html dan CSS Hai Jelly dua ya Nah itu untuk checkbox Hai yang berikutnya adalah Ayo kita buat enter lagi teman-teman biar nggak bingung Hai dan kita bisa masukkan label lagi sekarang Hai Polri hapus Hai Nah kalau di input teks ini kolomnya hanya hanya sedikit hanya satu baris kita bisa membuat input yang lebih jauh lebih besar daripada input teks ini Hai Bagaimana contohnya hijau masukkan aja pesan Jadi ini untuk memberikan pesan kepada pemilik website Hai namanya pesan pasti tidak hanya baru-baru Saya teman-temannya pasti banyak kalimat yang mau disampaikan menjadi Hai adek namanya text text area Hai untuk memberikan Hai data yang Hai jauh lebih besar bisa memberikan banyak Data sekaligus lihat ya motores kotor er Hai Nah kita bisa menuliskan banyak data di sini misalnya halo selamat siang pa pa kabar nah seperti ia pesan aja hai oke dan kita bisa memberikan flash ordernya Masukkan pesan ke hai eh salah satu er suka hai oke seperti itu teman-teman untuk pesannya ini sebenernya bisa kita lebar tinggikan oleh cc nanti Ninja default-nya aja ini terlalu mepet ya checkbox dan pesannya kita tambahkan enter lagi Oke sudah teman-teman selanjutnya tidak lengkap rasanya kalau input with an pabaton tanpa tombol untuk menyelesaikan form ini Hai nah di dalam html kita bisa menambahkan input tipenya adalah submit sesuai dengan namanya untuk mensubmit data-data yang sudah dimasukkan makanya itu pentingnya kita membuat text form Oh ya teh opini Hai yang akan menjadi penampung Hai data-data yang dimasukkan Hai jadi ketika in food safety ini diklik dia akan mengirimkan data yang ada di dalam teko Mini Hai di luar ini tidak akan dikirim Oke maka itu pentingnya tekong Hai kotor S1 correlated hasilnya tapi saya entar dulu kurang Hi Ho Ya udah punya polisi teman-teman kayaknya ambulans tuh Hai fresh water er Nah Lihat tombol submit sudah ada Coba deh kalian isikan dulu setiap formnya Hai nah terus klik submit Hai biar dia otomatis seperti merefresh seperti teman-teman karena Sapit ini yang sudah saya katakan tadi mengirim data jadi ketika sakit ini dikirim Dia akan mengirim data-data apapun yang ada di dalam setiap input field ini akan dikirimkan ke server dan dikirimkan itu diprosesnya di menggunakan atribut action dan ini Nama file-nya misalnya misalnya proses dot PHP PHP ini extension untuk bahasa pemrograman Php untuk memproses data hai oke Hai seperti teman-teman itu untuk form selanjutnya kita akan belajar yang namanya tag Div dan spend a Kau Tak Disini singkatan dari division atau pengelompokan Hai jika di dunia nyata misalnya kalau kalian sedang bekerja Pasti kalian sudah tidak asing lagi namanya division atau pembagian-pembagian ada namanya division Head Soccer atau HRD division teknologi custom programmer division marketing untuk Sales marketing sebagai teman-teman Nah itu pembagian-pembagian atau di kategori kategori ini gitu masing-masingnya biar lebih rapi nah call di dalam sekolah ada devision misalnya untuk guru kepala sekolah untuk murid untuk cleaning service atau obd seperti teman-teman jadi lebih memudahkan kita gitu untuk membagi baginya tidak disatukan di ah ah pengelompokan Hai nah di dalam wafat juga seperti teman-teman HD namanya tag Div itu untuk mengelompokkan Kenapa ada telepon bukan karena di dalam teks di dalam mesin itu semuanya merupakan pengelompokan jika kalian melihat di dalam bersedekah salnya website ini rahmah.com disini terdapat banyak sekali pengelompokan Hai Nah pertama jadi kelompok in untuk headernya dulu pengakuan pertama header jadi untuk bagian kepalanya lalu bagian kedua adalah konten dibawahnya header ini Hai berikutnya adalah pembagian footer atau kaki dari website nah jika kita lihat lagi di bagian header ini dibagi lagi teman-teman Hai di dalam teks header ini dibagi lagi division nya bagian navigasi bar atau navbar dan bagian kontennya slider dibagi lagi dalam di dalam navbar ini Hai ada pengelompokan atau Division Hai untuk logo dan pembagian berikutnya untuk menunya Oke seperti itu ya jadi bagian-bagian itu sangat wajar apalagi di website Hai adanya takdir itu untuk untuk memberikan pengelompokan pertama tag Div ada yang namanya texpand juga Hai sama-sama untuk pengelompokan tetapi yang berbeda adalah sifatnya yang Hai sifat apa tuh sifatnya adalah bagaimana dia di pedis Play Android tapilkan di dalam browser kalau Divi to display nya adalah blog atau sifatnya ada blog kalau spend sifatnya adalah Inline Hai kau kalau masih ingat dengan ini Hai sama seperti tackling dimana hasilnya dia eh tampilannya di satu baris karena sifat masing-masing link itu adalah Inline the record Coba kita kotor es kalau lihat hasilnya lihat di blog dan nilai Coba kita tambahkan teks pen lagi deh Hai Tamin dan juga dan diatasi oleh hai kenapa bisa seperti ini kenapa tag blog ini Oh maaf ya namanya blog ini hanya satu baris dan baris berikutnya dipaksa untuk Hai menjadi baris baru sedangkan di baris kedua Dia memiliki Hai nama Hai padahal yang kita disini Hai spend ini memiliki dua tag yang Hai itu merupakan sifat displaynya teman-teman kalau di fitur disebelahnya adalah blog jadi tidak perduli seberapa panjangnya konten yang di dalam dia akan mengambil satu baris full sampai mentok jadi korek konten berikutnya akan dipaksa ke baris baru seperti ini Hai nah sedangkan Inline kalau sifatnya inlay disifati darah khusus tidak seperti blog kalau begitu rakus walaupun isinya sedikit tapi dia tetap ia mengambil satu full baris nah silakan Inline ia sangat rendah hati teman-teman hai kenapa lebih hati karena dia hanya mengambil jarak sesuai dari panjangnya aja ke panjangnya enam karakter enam karakter yang ngambil Oke seperti itu ya jadi walaupun disamping masih ada Jack ruang dia memperbolehkan untuk konten berikut yang mengambil satu baris yang sama Hai seperti itu Hai Oke nanti ini bisa kita setting menggunakan CSS Hai detektif yang seperti ini sebenarnya tidak berfungsi sama sekali dalam html lebih tepatnya tidak Hai tidak begitu terlihat hasilnya di dalam Hai tidak seperti tag heading tadi kotak heading kan memberikan judul yang memberikan Huruf tebal memberikan huruf menjadi besar nakal teknis dan seperti ini sebenarnya lebih Hai fungsinya lebih ke SS kalau sudah kita poltar ke CCTV ini akan lebih berguna hai oke teman-teman seperti itu pembagiannya Lalu ada yang namanya atribut ID dan Crush Hai Idan class nah atribut Ide ini yang digunakan Hai untuk memberikan identitas unik I dan kelas juga untuk memberikan identitas tetapi bedanya adalah kotak ID hanya boleh digunakan di hai satu kali pakai aja enggak boleh lebih dari satu kali rumah kayak di satu halaman HTML unik180 Hai Nah kalau kita ngebuat halaman baru html berikutnya dengan ID yang sama tidak masalah karena akan berbeda halamannya Tetapi kalau di dalam satu halaman memiliki ID yang sama misalnya Hai di sini span juga memiliki ID sama header tidak bisa Hai karena sifat ide itu adalah unit hanya boleh satu kali pemakaian Hai nah sedangkan kelas boleh digunakan oleh siapa saja dengan nama yang sama misalnya menu di kelasnya menu ini boleh teman-teman karena kelas itu siapa tidak unik tapi bisa dipakai oleh Hai beberapa hai Hai Fungsinya untuk apa atribut ID and close ini nah fungsinya itu untuk membagi lagi Per kategori produk fashion Hai difungsi ini akan lebih cocok untuk digunakan CSS Hai tak kita kalian lihat misalnya nih ya saya membuat dua Div Hai nah misalnya di pertama ini untuk menu Nah untuk header Hai Hip kedua ini untuk konten 200 yang membedakan diperta Bandit kedua itu apa slide kontennya Nah makanya hadirlah atribut ID untuk identitas dan atribut kelas untuk identitas juga Hai disesuaikan penggunaannya jadi kita bisa jelaskan nih kepada web browser di pertama ini dengan Id headers ini berarti di pertama ini dengan header Hai untuk Hai fungsinya adalah untuk menampung beberapa komponen header dan AIDS kedua identitasnya adalah konten walaupun sama-sama Div tetapi airnya nah seperti itu ya ini untuk membuat identitas di masing-masing komponen html Oke teman-teman selesai pembahasan kita mengenai html uh sudah cukup malam sekali e-ktp sudah selesai jika ada pertanyaan silahkan komen di kolom komentar dan jangan lupa dibagikan video saya ke teman-teman kalian jika dirasa bermanfaat dan jangan lupa di-like Hai dan subscribe Tunya supaya tidak ketinggalan dengan konten berikutnya jangan lupa kunjungi web saya juga udah mandi com Hai untuk memberikan konten-konten tentang website Hai Oke kau dan CSS akan Hai diputar di video selanjutnya atau di video ini teman-teman maaf Kak Nisa di satu video saja html dan CSS tapi saya edit ya ini saya buatnya saya hentikan dulu videonya lalu saya buat lagi gitu Oke kita Makasih cuma Terima kasih teman-teman atas waktunya Hai saya mau tidur dulu masih kurang istirahat nih udah jam satu juga oke teman-teman terima kasih atas waktunya Hai assalamualaikum warahmatullahi wabarakatuh hai hai hai oke teman-teman Hai kembali lagi kita sekarang akan belajar CSS Hai Oke jika sebelumnya kita sudah membahas Apa itu HTML5 Hai Jadi sekarang kita akan coba belajar CSS hal ini bisa kita hapus dulu ya maaf Hai apa sih CSS itu Yes itu Hai fungsinya adalah untuk menghiasi MP3 di JSS kepanjangannya adalah keskeding style sheet hai oke Hai fungsinya adalah untuk menghiasi Hai komponen-komponen atau struktur-struktur yang ada di dalam Hai agar dihiasi agar lebih cantik lagi Oke teman-teman singkatnya kalau Oh ya biar saya ajarkan ke mulut saya Jazz adalah fungsinya untuk menghiasi jika html sebelumnya adalah untuk struktur jasa sendiri fungsinya atau inti dari JSS itu adalah menghiasi menghiasi hai hahaha salah penulisan teman-teman hai oke pertama kita go html dulu jika sebelumnya kita menulis kode HTML Hai ada beberapa aturan yang harus kita patuhi yang pertama adalah kita harus membuat file berekstensi extension html atau berekstensi html waktu-waktu Bang sosok Inggris ya hai hai Hai nah di dalam hate di dalam CSS pun tidak Hai semudah itu untuk menulis kode Hai yang ingin kita buat menjadi Ayo kita harus mengikuti aturan-aturan yang sudah dibuat oleh Hai browser sendiri Hai jadi cara kerja si CSS ini adalah ini dia harus menerima selector ini saya contohkan dulu teman-teman sebelum kita membahasnya misalnya saya memiliki Hai elemen H1 atau tk1 dalam bodi dengan nama-nama saya untuk es halus er reload Hai default-nya dari browser nama akan diset menjadi hitam kalau saya ingin mengubah menjadi putih menguap misalnya saya mau Ubah menjadi merah berarti itu udah masuk ke menghiasi ya kalau menghiasi berarti kita harus membuka tekstilnya dulu lalu kita select atau kita pilih apa yang mau kita style saya pilih tk1 lalu hai lalu eh jenis stylenya apa Oke jenis tadi Apa warna berarti color Hai warnanya apa warnanya adalah merah oke Hai Setelah itu kita kontrol setelah kita lihat dia akan berubah warna menjadi merah Hai ke teman-teman itu powerful nya CSS Hai jadi kita harus membuat cara untuk memasukkan kode CSS nya dulu oke sekarang saya masukkan kode CSS di dalam tak heard Hai yang sebagai informasi tambahan mengenai website lalu saya masukkan selektornya Yaitu berarti saya target tag H1 ini yang ada di dalam html lalu saya warnai untuk teksnya menjadi warna merah bagi teman-teman cara kerjanya oke Hai dan Sekarang kita akan belajar apa itu selector property dan value Hai Oke teman-teman jadi yang pertama adalah selector hai hai the selector itu apa sesuai dengan namanya select memilih Hai Jadi yang pertama kita Hai kamu harus lakukan untuk menghiasi suatu elemen atau suatu teks yang ada di dalam html kita harus memilihnya untuk pertama kali jika kita ingin mewarnai tembok misalnya apa yang pertama kali kita harus lakukan tentunya kita harus memilih oke Ayo kita harus memilih tembok itu lalu kita cat sebegitu pun accesses teman-teman seperti dikehidupan nyata sebenarnya kita harus memilihnya dulu yaitu dengan cara jika di dalam cssd memiliki aturan sendiri yaitu selector selector itu adalah di tempat kita untuk memilih hai oke selektornya disini adalah hak satu teman-teman Masa itu itu berarti mengarah ke Tag Hai hak satu yang ada dalam html berarti saya memilih teks Hai yang Idol Hai diset warnanya Hai menjadi merah berarti TK satu ini Hai akan menjadi warna merah tidak peduli dalamnya ada beberapa huruf atau beberapa kalimat pokoknya dalam hal satu ini yang di dalam tekad satu ini semuanya Ubah menjadi warna merah seperti itu teman-teman hai oke setelah itu ada yang namanya properti properti properti ini apalagi properti ini apalagi properti ini nilai atau Hai style apa yang mau kita masukkan jika yang pertama yang harus dilakukan adalah memilih memilih elemen apa yang mau kita style selanjutnya adalah properti-properti itu adalah yang tadi saya Sebutkan Hai mau disetel Hai Oke kalau mau Rizal warna berarti masukkan ke Hai keyboard-nya atau kata kunci adalah warna color names Inggris lalu dimasukkan titik dua untuk mengoper nilainya jika di html adalah kita menggunakan sama dengan lautan kutipdua kau di JSS cukup menggunakan titik dua lalu nama nilainya oke yang berikutnya adalah value teman-teman Ferry ini adalah berhubungan dengan properti Hai jika di color Ini adalah sebuah properti berarti Karet ini adalah sebuah betul sekali sebuah value The Fairy ini berhubungan dengan properti teman-teman kalau kalau propertinya itu adalah warna berarti value-nya itu adalah berupa nilai-nilai warna Hai nah di dalam html teman-teman properti warna itu terdapat empat jenis yang pertama adalah keyboard maaf Yang pertama adalah keyboard yang kedua adalah RGB Maaf ya perutnya Hai heksadesimal aja dulu exodos57 berikutnya adalah RGB Hai atau RGB yang ketiga yang keempat adalah slayer2 Hai nah di dalam saya sendiri untuk warna saja Dia memiliki peraturan hai oke silakan kaya mau memilih yang mana ada opsi pertama yaitu menggunakan keyboard sini oke reward reward artinya adalah kata kunci jadi seperti red Ini adalah kata kunci kata kunci yang sudah diatur sebelumnya oleh si CSS dimana kata kunci itu dalamnya terdapat kode-kode warna jika kisah yang masukkan itu oh dengan bahasa Inggris ya Kalau saya masukkan red berarti dia akan disetting menjadi warna merah yang menggunakan kata kunci sejauh ini sudah dapat ratusan lebih teman-teman untuk kata kuncinya dengan bahasa Inggris kalau kita mau Ubah menjadi warna merah kehitaman Ubah menjadi namanya marun lalu er maka dia akan murah kalau mau kita Ubah menjadi warna Aqua nah teman-teman motore selalu kredit konsumer jangan berubah menjadi warna Aqua seperti itu itu untuk reward kata-kata kunci hai oke dengan bahasa Inggris ya nah habis itu heksadesimal heksadesimal adalah nilai yang diawali dengan tanda pagar hai hidup memiliki nilai nol sampai enam kode Hai dan memiliki huruf a sampai F Kalau tidak salah ya Nah heksadesimal ini seperti apa eh desimal ini nilai hex yang biasa kalian dapatkan misalnya kalau di Photoshop itu ada nilai hex Nah kalau kalian mau mendapatkan nilainya bisa lihat di Google terus cari aja namanya color picker Hai nah disini misalnya kalian pilih warna apa saja bisa warna biru di sini ada kode hexadecimal yaitu diawali dengan tanda pagar lalu jenis nomornya kodenya Hai Oke coba dipastikan aja Diva Bos Kita buktikan dengan Hai ini dihapus dulu ya dimasukkan disini aja Hai nah key press lalu kontrol er maka warnanya berubah sesuai dengan Hai warna RGB warna heksadesimal nya Hai jadinya pertamanya sudah kita coba tadi warna keyboard menggunakan kata kunci yang berikutnya heksadesimal Kalau hitam berarti warnanya adalah norma teman 00000003 salah ya sampai enam kali ya betul tangkolo warna putih berarti fv6 Kali Putih hilang tentunya tapi ada nah yang berikutnya adalah RGB RGB itu adalah satuan nilai Erni adalah red gamenya adalah Green b nya adalah blue aanya ini adalah alpha atau tingkat kesensitifan jika nol berarti hilang jika satu berarti muncul kok 0,5 berarti di tengah-tengah dia muncul tapi transparan seperti teman-teman kurang lebih rgba ini adalah nilai yang cukup populer nanti kau pikir ini juga ada rgba atau org yg Hai energi bisa kita copy alamat yang bisa kita copy alamat hai maaf berikutnya kopiah Ntar ya I hope I Hai nah pagar hilangkan RGB gini pun sampai teman-teman Ah ini sebenarnya tambahan untuk lihat tingkat kesensitifan otores lalu lihat rasionya warnai akan tetap sama Jika Kita bedakan warna misalnya warna seperti ini kita copy kan Hai Taubah otores lalu kita lihat hasilnya akan berubah jika tambahkan Aa atau alpha tingkat kesensitifan ya Hai jadi 0,5 misalnya berarti dia melayang atau transparan waktu saya ahli transparan di tempat jangan lupa ini tambahkan juga Anya di depan hatinya red Glenn frendly Alfa Dan tambahkan juga nilainya berarti nahkoda menggunakan ini tinggal tiap usai teman-teman habis tua SLA artinya nih Who saturation like-like hanya Alfa nilai baru teman-teman di CSS Oke jadi coba-coba aja teman-teman itu untuk value ya berarti kita sudah kenal yang pertama adalah selector kita harus menyeleksi dua atau kita harus memilih dulu apa yang mau kita style Sehabis itu properti style apa yang mau kita lakukan terhadap selektornya lalu value-nya adalah nilai yang bersangkutan oleh properti Hai ke teman-teman seperti itu Nah berikutnya hal ini bisa kita hapus Hai Kakao dalam html kita harus membuat file html dulu habis itu baru kita bisa menuliskan kode html kalau dalam CSS kita untuk menulis kode CSS ada tiga cara teman-teman Hai cara pertama adalah Ayo kita menggunakan sebentar yang namanya Hai Inline CSS secara kedua internal CSS cara ketiga adalah external CSS hai hai Hai hilang CSS Hai cara bagaimana kita menuliskan kode CSS di dalam tag HTML jadi kita langsung menuliskan kode CSS di dalam teks ATM hai oke Hai kalau Ilen CSS tidak memperdulikannya namanya selector jika tadi sebelumnya kita sudah membuat Hai nah kode CSS di dalam teket Ayo kita harus menuliskan selektornya terlebih dahulu untuk memilih nakal di Inline selektornya itu adalah kita langsung memilih saja teks apa yang mau kita style karenanya Inline kita menulis kode CSS langsung di kode htmlnya Nah itu sama aja kita secara tidak langsung kita sudah memilih sih selektornya karena kan kita otomatis langsung menuliskan kode CSS di dalam kode HTML Hai nah seperti ini ya Misalnya Saya memiliki dua H1 dengan nama yang beda misalnya Andi wijaksono tarif as dulu nama seperti Nih misalnya saya mau menstyle nama Andi Wicaksono saja bagaimana caranya nah kode online CSS kita langsung aja Hai kethek yang mau kita hiasi yang bisa like any wijaksono ya berarti kita masuk ke teknik lalu masukkan tambahkan atribut yang namanya style nah the attribute ini kita sudah siap menuliskan kode CSS di dalam tekad email Hai ini sama aja selector ya oke habis ini kita langsung masuk aja property dan value nya properti tadi Apa propertinya tadi adalah color untuk merubah warna lalu file ini apa value-nya adalah warnanya sendiri maaf red pasta seperti aja teman-teman kotor es lalu lihat hasilnya Andi bijaksana ini akan menjadi warna merah hai oke Keren ya Nah itu untuk Inline CSS ini saya hapus ya Hai cara kedua adalah menggunakan internal CSS Hai yang kalian masukkan tadi yang sudah kita coba tadi sebenarnya itu adalah internal CSS teman-teman jadi menuliskan kode CSS di dalam teks head Hai jadi dia memisahkan antara kode html dan kode CSS Hai agar tidak tercampur aduk antara kode html dan CSS hai oke lalu yang pertama Newcastle lakukan adalah masuk ke dalam teks head sebagai penampung informasi lalu buka ya namanya text style Artinya kita membuka Hai kode program CSS agar bisa ditulis di dalam tekad email ini ini menggunakan internal ya Sesuai dengan namanya internal berarti dalam oke nah disini samangke tadi kalau di internal dia membutuhkan selector berarti kita harus memilih unik hai oke marshmelli dulu kalau mau 21 latihan 1 ya saya kan mau milih warna Andi Wicaksono aja nih satu kolornya seperti biasa tadi dan red Fortress agar hasilnya loh kok 2 kenapa nah karena dia Langsa elector cc sendiri ini sifatnya universal jadi semua tag H1 warnai menjadi warna merah nah Berarti satu pertama Nasa atuh kedua otomatis akan diwarnai menjadi merah karena sifatnya universal oke nah disitulah fungsi dari kelas dan ID Wooyoung sudah saya singgung sebelumnya Dimas html jadi kelas dan ide itu sifatnya untuk identitas misalnya saya tambahkan ID untuk Andi wijaksono aja misalkan namanya Andi nah Berarti sekarang saya udah memiliki nama yang unik nih khusus untuk si Andi aja ide Andi untuk mengakses siandi ini dengan atribut ID Andi dia tidak menggunakan satu lagi jadi kita sekarang menyeleksinya atau selector kita sekarang adalah menggunakan ID dengan namanya Andi Nah untuk menselect ID yaitu harus menggunakan tanda pagar lalu dilanjutkan dengan nama id-nya berarti Andi berbeda dengan nama teh kau dengan nama the kita cukup masukkan namanya aja tanpa kurung buka dan kurung tutup Hai itu udah bawaan dari sih CSS nya Nah kalau untuk ID kita menggunakan tanda pagar lalu dilanjutkan dengan nama id-nya seperti biasa kita buka tutup kurung kurawal lo dibelah dua seperti teman-teman jangan lupa hai lalu tambahkan misalnya warna menjadi biru ya color blue Hai Nah sekarang si Andi menjadi warna biru dan sih Hai Aden menjadi warna merah Kenapa manusia ini udah memasukkan dalam universal Hi Tec jadi misalnya saya menggunakan tk1 sebanyak-banyaknya otomatis satu ini akan menjadi warna merah semua Michiels Yandi karena Andi sudah memiliki nama yang unik dan sudah diset juga diatas Hai kau Candi belum diset saya hapus otomatis Yandi akan mengikuti dari ah bawaannya jadi akan menurun Oh seperti itu ya walaupun ia sudah memiliki tapi ID tidak dipakai sama aja bohong oke teman-teman itu cara menyeleksinya untuk id Hai itu untuk internal ya sekalian kita belajar untuk menyeleksi Hai ID nah untuk eksternal sendiri sesuai dengan namanya berarti di keluar Artinya kita benar-benar memisahkan antara file html dan file CSS kalau sebelumnya di internal kita hanya mengisahkan kode html dan kode CSS walaupun sejatinya kita tetap ada didalam halaman html tetap tercampur aduk tapi Hai the external case ini kita lebih hai sendiri-sendiri gitu jadi untuk file html di sini file CSS disini jadi lebih rapi teman-teman seperti itu Nah sekarang nih kita hapus semua Hi Ho Hai Tapus lalu kita buat file baru silakan klik new file Berikan nama style titik atau dot CSS Nah sekarang kita sudah berhasil membuat file CSS Nah coba dibuktikan skate tadi misalnya saya mau menyeleksi Hai masih Andi nya aja berarti ID aandi Saya mau bahwa nanya menjadi hijau misalnya sekarang Green kotor es lalu kita konser Hai Waduh kenapa aja berubah kita lihat ini namanya sudah benaran di airnya pun Andi apa yang salah yang salah adalah Hai html Tidak mengenali file CSS oke Hai yang harus pertama kita kenali adalah Hai file-file yang memiliki hubungan kepada halaman html kita ini nah berhubung freestyle CSS ini belum memiliki hubungan atau belum kenal dengan html maka kita buat hubungan dulu kita kenalin dulu nih html ke CSS CSS ini HTML5 theme Line inilah CSS nanti kita saling memiliki peran mah kalau Caca sini untuk menghiasi kita kiri kibat pakaian aja gitu kita cuma memiliki badan Nah kita kalau mau menghiasi badan kita harus memiliki Ambil baju celana dan seperti itu Nah cc sini barat pakaian kita nah ini kita harus memakai lu nih Nah cara memakainya itu kita hubungkan dulu dalam html cara menghubungkannya menggunakan yang namanya tackling ingat di dalam tekad karena hal ini untuk menampung informasi tambahan link dan reff Hai HPnya seperti biasa sebagai tujuan nah berhubung di dalam satu folder yang sama berarti kita langsung aja masukkan nama file-nya dan atribut yang kedua yang sangat penting adalah real atau relationship atau jenis hubungan Jadi sebenarnya apa Ini hubungannya adalah style cheat jadi terkenal sekarang baju saya ini adalah style CSS hai oke halo kita kontras Halo lihat motor er makasih Andi wajahnya berubah ke teman-teman itu tiga cara untuk memasukkan kode CSS saya hapus Hai saya tadi sudah kita bahas ya selector id Hai ini tadi cara menseleksi ID berarti kita harus Maka tambahkan dulu atribut id di dalam teks yang mau kita style kalau dia memiliki tag yang sama hai oke misalnya disini ketamakan ID card tadi aja teman-teman Nah kalau kelas sama seperti ID Silet kelas new misalnya Hai Nah kalau idqan tidak bisa dipakai bisa tempat ya ndak bisa dipakai dua kali ke coba dulu ogoh-ogoh Hai kado Kenapa bisa ini Hai sementara Andi Andi Andi Kok bisa kau hai hai hai hai a&g ternyata ternyata bisa teman-teman itu mungkin itu lebih ke javascript ya karena kan nanti kalau kita udah belajar javascript akan lebih main ke ID mungkin ketika linknya diklik itu dia tidak bisa bentrokan gitu loh oh berarti dia sama ya kayak keas kalau di style itu dia tetap bisa berarti sama juga kayak kelas jadi kayak gitu kita bisa berbagi style yang kita miliki Hai Jadi cukup aja tambahkan di ah tag yang mau kita style tinggal tambahkan saja id-nya jika eh salah satu elemen mau memiliki atribut yang memiliki style yang kita punya kayak gitu ya hai oke Hai berikutnya adalah gini kita hapus dulu Sisakan satu saja hai hai Hai nah dml adalah mandi nah sekarang ini saya kelas 2 Nah sekarang kita akan belajar mengenai Hai font cara memformat font agar tidak kaku sepertinya teman-teman acaranya bagaimana Hai caranya kita untuk belajar bisa menggunakan itu aja internal CSS Ya dihapus aja walaupun di dunia nyatanya atau di project-project Hai bikin lupa sehari-hari programmer sebenarnya kebanyakan eksternal teman-teman karena itu best praktisnya Ayo kita buka aja Hai Nah sekarang kita select dulu ha satunya habis itu Ayo kita masukkan font-family Hai Nah di sini ada beberapa dan jenis font Family ini artinya kita messed H1 ini jenis Pony hai oke Ayo kita silakan ke Google font teman-teman Hai nah Jalan google font jika ke lihat di kanan saya ada serius anseries display rating unescape ini adalah beberapa macam jenis font jika kalian belum tahu nah phone pertama adalah Sheriff artinya Dia memiliki my god siku Hip disetiap sudutnya punya agan2 sekalian Dia memiliki kaki disetiap sudutnya punya Hai lihat di setiap sudutnya itu Sheriff artinya dari bahasa latin Kausa teman-teman dan sang Sheriff arti tidak memiliki Hai kaki ngelihat kata-katanya sangat bersih di setiap sudutnya tidak ada kaki-kakinya itu artinya sang Sheriff di setelah itu artinya Hai atau yang lebih menonjol Hai pagi menonjol memiliki ciri khas dan untuk hand waiting itu adalah teks kata mavon kata mavon kata font tulisan tangan artinya tulisan tangan sesuai dengan namanya hand writing A the terminus map adalah font yang lebih ke pixelview teman-teman kayak mau kok mau hacking hacking gitukan Hai lebih kesitu lagi selain aja hai hai hai oke itu beberapa jenis pohon teman-teman nah misalnya saya mau gunain Ariel hai hai Hai kalian bisa menggunakan font dari Google font teman-teman Hai atau menggunakan komputer dari komputer kalian Nah kalau menggunakan Google font keren harus men-download dulu the canals Mojoroto ada dua cara seniman cara pertama sama kayak tadi gambar kita meminjam gambar orang lain Tetapi dia harus terkoneksi internet seperti itu sama dengan halnya font ini Hai nah ko cara percaya keduanya kita harus mendownload dulu Hai font yang mau kita inginkan Hai tetapi kelemahannya ketika website kita di upload ke internet Ayo kita menggunakan font yang kita tulis disini misalnya Ariel Hai seperti ini ya Ariel ngaji kah di komputer yang mengakses website kita itu tidak memiliki Ariel otomatis yang diakses bukan Ariel tetapi default-nya dari Browser Hai tertentu kau dari browser Google Chrome Hai Jadi udah tahu ya default-nya apa misalnya kalau dari Google Chrome itu default misalnya moonscape nah dia akan otomatis Kalau setelah cari Ariel itu ga ada di komputer yang diakses maka Moskow akan menjadi font nya seperti itu Nah kalau menggunakan internet Ayo kita cukup mendownloadnya teman-teman misalnya mau yang mana nih bisa Sheriff ya saya mau ini aja nih robot sleeve klik ini aja Plus hai lalu klik download warna Hai Nah udah ada nih langsung di klik aja dan Hai ladies ada banyak lagi teman-teman roboto-bold sayang regular aja Hai in SAW Hai lemari di komputer saya kan udah ada Dero photo Shreya the Robots lab Hai roboto seperti ini the Robots lab ke bersalah robot usleep kau dua kata dia menggunakan tanda sepertinya teman-temannya lalu kita lihat belum juga apa hai hai Hai Tambahkan saya oke oke tadi kaki download ya cara keduanya kau tidak bisa kita bisa langsung aja diinput if impornya kita masuk impor nah lalu masukkan ini dicopy Halo masakan cache Stella CSS nya di ke stylenya lalu dicopy dalam di pasti dalam hai lalu Hai masukkan familinya Hai nah seperti ini lalu lihat hasilnya Ya akan berubah ok Hai seperti teman-teman untuk melihat ovennya nah Hai dan berikutnya adalah untuk Hai membuat ukurannya yaitu dengan nama font size prosesnya bisa menggunakan satuan pixel 25 pixel misalnya hai kecil kita besarkan misalnya 40 piksel-piksel seperti ini teman-teman hai hai yang selanjutnya adalah color untuk warna tadi sudah kita Jelaskan Soalnya saya mau warna pimping pink Boy VR seperti ini jangan pingin merah aja red Nah untuk warna menjadi warna merah hai oke itu itu untuk font teman-teman Hai dan berikutnya kita bisa menambahkan background Hai bego itu artinya apa bikin itu untuk memberikan warna belakang hai hai the background misalnya warnanya sama misalnya mau warna apa dengan format yang sama selnya Black hitam Hai nah warnanya akan terlihat seperti teman-teman Black nah ini khas satu berarti displaynya sifatnya berarti blog ya bisa kalian lihat nih nifas.doc Nah kalau sifatnya Inline Coba kita ubah ini untuk mengubah sifatnya teman-teman atau displaynya Nah kita Ubah menjadi Inline otomatis kalau ini dia akan sepanjang karakternya aja foto er Nah Lihat Hai jadi tidak rakus Jadi kalau ada konten disampingnya dibawahnya dia akan otomatis ke samping berbeda dengan display box tadi jadi ngambil Terus walaupun disini kosong diserahkan seperti itu ya Oke selanjutnya my God ini adalah mengubah margin Hai padding dan border Apa itu mati paling border Nah jadi coba kita buat dulu kita buat dua Nah seperti ini ya Hai Nah jadi margin itu adalah yang kita lihat ini adalah box ya teman-teman the box model Hai atau contents Hai ini aku pakai konten jadi konten ini memiliki jarak ke atas dan muka jarak dipidi sekelilingnya atas kiri bawah dan kanan Hai nah jarak dari konten keluar diistilahkan dengan margin hai oke nah coba kita buktikan misalnya marginnya adalah sekitar hai 15/20 Hai save dan lihat Hai kurang Hai 50 pixel Nah teman-teman diajarake jadi atas kiri bawah kanan Semuanya sama sebesar 5000 hai oke Nah setelah itu ada yang namanya The Border ah ah bodoh ini apa bother ini yang jadi pembatas antara margin jarak konten keluar dan jarak konten ke dalam jarak konten ke dalam adalah padding itu belum kita bahas teman-teman kita bahas bordir dulu dibodohi ini Hai yang membatasi antara margin dan padding mencoba bodoh yang membutuhkan tiga value yaitu pertama adalah satuannya beberapa tebal habis itu ketebalannya mau Solid atau tidak ini biasanya sore teman-teman lalu warnanya Um warna apa misalnya mewarna hijau ya misalnya untuk melihat Green lalu kontrol er nah dia sudah membuat border bisa lihat kau terlihat bisa dicoba akan jadi 51 teman-teman akan menjadi seperti ini hai oke itu adalah border Nah untuk padding jarak dari border atau jarak tricotin ke dalam Ayo kita bisa lihat ya disini namanya dempet banget sama border Nah kalau kita menggunakan wedding misalnya headingnya 20 Hai nah tapi terjadi Dia memiliki jalak jarak jadinya Jadi jadi nama Alin ini dia membuat jarak sekitar 20 Fixer 20 Hai ke border ciri tidak terlalu mepet dan Hai ke teman-teman seperti itu lalu Coba sekarang kita buat link yang sudah kita pelajari sebelumnya misalnya link ke Google ya OK Google atau kuat saya deh Google terus otot saya jenis targetnya adalah Blank ini saya pergi jadi nama saja Nah setelah itu ini link klik ah ah Mandi cop Atau gini aja website-website saya aja website saya untuk SH lihat kontrev hasilnya seperti teman-temannya nah misalnya Saya ingin mereset ini saya kecilkan dulu nah saya mau mengubah format Hai link Ini format default dari si html Saya mau bahsa hiasi menggunakan si CSS cara ngereset bagaimana kita bisa Lex dulu linknya hai lalu kita ubah Hai warnanya misalnya mau menjadi warna hitam Hai warna hitam nah di sekarang sudah menjadi warna hitam teman-teman dan garis bawah ini bisa kita hilangkan menggunakannya namanya text-decoration Maaf teks lipstick oracion diversion non-aktif kita hilangkan text-decoration apapun text-decoration kita hilangkan Oke sudah hilang Hai sekarang kita buat dia menjadi display inline-block lalu kita buat menjadi background warnanya misalnya biru Hai nah pakai gitu kita ubah warnanya menjadi putih teman-teman agar terlihat karena gelap Oke habis itu fotonya kita bisa menggunakan robot sleeve lagi kita copy e-cash udah lalu kita buat padding Hai sebesar 10 ok hai lalu jaraknya Hai kau kiri atau margin kita samakan seperti yang diatas 50 pixel nah seperti teman-teman dia sudah menjadi baterai-baterai sederhana aja Hai Oke ini sudah kita diset menjadi beton Hai hiks Ketika saya klik dalam mengalahkan keramat.com Oke seperti itu Hi Ho hai hai hai oke teman-teman mungkin sampai disitu juga sampai disitu dulu untuk CSS nya Hai jadi memasang chest kita sudah selesai ya Hai jadi jangan lupa untuk ditonton videonya gitu Hai Oh ya udah ditonton ya oke thank you teman-teman jangan lupa dibagikan ke teman-teman kalian dah ini benar-benar Hai kalian bayar dengan ditonton aja deh karena saya benar-benar menghabiskan waktu saya ini Hai korbankan demi kalian size 4T jam 12.00 Keren ya i hai oke teman-teman thank you sudah menonton semoga bermanfaat jangan lupa like comment dan subscribe Hai dan yang terpenting jangan lupa dibagikan ke Hai dan comment mau apalagi kalau kontennya reupload Hai Semangat belajarnya jangan sampai jumpa Assalamualaikum warahmatullahi wabarakatuh