Halo, Assalamualaikum Wr Wb Senang sekali bisa berbagi dengan kalian lagi teman-teman Selamat datang Di video kali ini kita akan belajar Tentang HTML dan CSS Cukup di satu video saja Oke teman-teman, jadi siapkan mental kalian, terutama kuota kalian untuk melihat video ini. Sebelumnya, di kedua bahasa ini kita bisa buat apa sih? Nah, dari kedua bahasa ini teman-teman, memungkinkan kita untuk membuat sebuah website yang statis. Oke?
HTML ini digunakan untuk membuat struktur di halaman website jika di badan kita ini terdapat kulit, daging, dan di dalamnya lagi adalah tulang. HTML ini bisa diibarkan seperti tulang, teman-teman. Dia adalah struktur Oke, jika dibalikkan lagi bisa seperti rumah Jika kita mundur lebih jauh tentang pembangunan rumah tersebut Kita bisa melihat struktur dari rumah sebelum jadi.
Seperti dibuat fondasinya terlebih dahulu, dibuat tiang-tiang oleh para konstruksi, seperti itu teman-teman. Jadi HTML ini dibuat untuk struktur halaman website. Sedangkan CSS digunakan untuk menghiasi struktur yang sudah kita buat. Seperti apa menghiasi ini? Seperti kata menghiasi tersebut, dia bisa mengubah warna, memberikan warna yang ada di dalam website.
Jika di dalam website tersebut ada teks, Ada gambar, ada video Nah Gambar itu Bisa di edit atau Dihiasi Menggunakan Si CSS Oke teman-teman, bisa menangkap? Nah nanti kita akan belajar langsung dengan prakteknya. Memang kalau di teori itu kita sedikit bingung, karena tidak ada yang merealisasikannya.
Oke, belajar yang terbaik itu memang belajar sambil praktek teman-teman. Oke, yang pertama yang kalian harus siapkan adalah text editor dan browser. Mungkin disini sudah tahu ya, apa itu Google Chrome Dan sudah familiar juga Sudah sangat tahu apa itu Google Chrome Google Chrome ini adalah browser teman-teman, jika belum ada yang tahu Tempat kita untuk menjelajahi website Nah, sedangkan Visual Studio Code Atau yang disebut Text Editor Sesuai dengan namanya Editor Text Kenapa Editor Text? Karena ketika kita membuat HTML dan CSS Kita bisa menjelajahi website Kita menyusun kode demi kode atau perintah demi perintah yang menjadi sebuah kumpulan perintah yang bisa menghasilkan sebuah karya tertentu. Dan di sini, adalah kita akan menghasilkan sebuah website statis dari HTML dan CSS oke nah, text editor ini digunakan untuk menuliskan perintah-perintah yang saya sebutkan tadi nah, sedangkan Google Chrome ini atau browser yang menerjemahkan oke, menerjemahkan atau menjalankan kode yang sudah kita buat Oke teman-teman, pertama untuk mendownload Visual Studio Code, kalian bisa searching aja di Google.
Download FVS Code, ini sangat populer sekali teman-teman. Di download dulu aja. Hai nih kalau mengganggu saya hilangkan dulu oke nah disesuaikan ya sama sistem operasi kalian kalau Windows ya Windows kalau Linux ya Linux kalau make make Oke simple dan kalau sudah silahkan di-install di next next aja teman-teman Hai nah kalau Google Ini sudah dipastikan lah ya, semuanya sudah menginstall. Oke. Nah, sekarang silahkan klik dua kali di Visual Studio Code-nya.
Oke, sudah kebuka ya. Nah, tampilannya akan seperti ini teman-teman. Hai nah sebelum kita memulai menuliskan kode di dalam text editor ini yang pertama yang harus kalian lakukan ini sebenarnya opsional sih bisa dilakukan atau tidak tapi untuk membuat nyaman modding kita untuk ke depannya apa salahnya kita untuk setting terlebih dahulu klik file di pojok kiri atas lalu preference lalu klik settings klik teman-teman jangan bingung ya, ada banyak menu disini diabaikan aja silahkan scroll ke bawah maaf, scroll ke bawah Cari sampai ada kata Word Wrap. Oke.
Ini untuk apa? Nah ini di-on-in aja dulu. Hai di orin aja dulu Nah setelah itu kalian bisa close caranya silang oke sih ada tombol close tapi enak seperti teman-teman hai oke sekarang kita coba buat folder dulu Hai di desktop ya Klik Kanan new Hai folder nah berikan nama folder belajar website Hai klik enter Letakkan di sebelah Google Chrome.
Atau bebas sih. Di mana aja. Gak usah terlalu kaku ikutin videonya.
Oke. Setelah itu. Ini di klik. Ditekan. Di drag.
Ke Visual Studio Code. Sudah. Kalau ada yang kesulitan, bisa manual, teman-teman. Diklik file, open folder.
Nah, lalu pilih folder yang sudah dibuat tadi. Belajar website. Kalau sudah, klik select folder. Hasilnya akan sama seperti ini, teman-teman.
Tidak usah khawatir. Oke. Nah, setelah itu bagaimana?
Nah, setelah itu, kita klik new file. Hai Oke pastikan foldernya benar sama 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 hai akan memunculkan box seperti ini teman-teman dengan kursor yang kedap-kedip normal ya nah disini silahkan berikan nama home titik atau dot yang biasa kita istilahkan dot kalau di dunia programming itu teman-teman 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. Oke?
Nah, setelah itu, klik Enter. Jangan lupa ya, harus teliti home.html. Nggak pakai spasi, nggak pakai pemisah apapun.
Dia harus nyambung. Titik HTML itu adalah extension-nya. Oke?
Hai nah setelah itu apa Hai nah setelah itu Hai tadi kita sudah membahas ya Hai HTML apa Nah kalau untuk pengertiannya teman-teman HTML itu maaf jangan dienter dulu ini saya Zoom ya nah Hai Ini saya tutup dulu untuk menjelaskan kepada kalian. HTML itu apa? Kaden.
HTML itu singkatannya atau kepanjangannya adalah Hypertext Markup Language. Oke, ini sikatannya teman-teman. HTML adalah sebuah bahasa markah yang digunakan untuk membuat halaman website. Ini versi Wikipedia-nya.
Jika kalian search di google Dan ada referensi dari wikipedia Ini adalah Pengertian dari wikipedia Dan saya menghafalnya Kalau versi simple nya Dari saya Ini versi simple nya Dari saya adalah Untuk membuat struktur. Sudah sampai sini. Atau kalau mau disingkat lagi, yang bisa saya ajarkan ke murid-murid saya adalah struktur.
Sudah, itu saja. Jadi ditanamkan di otak kalian. HTML itu merupakan struktur.
Dan kalian bisa menjabarkan sendiri apa yang dimaksud dengan struktur. Oke, done. CSS belakangan lah ya, kita HTML dulu.
Nah, untuk HTML, ini pengertiannya teman-teman. Dan cara kerjanya, kalau kalian lihat di Google, di browser, dan lihat di website Google, klik kanan, lalu view page source, kalian akan menemukan kode-kode HTML. Hai nah seperti ini teman-teman kalau ini kerumitan kita bisa cari website yang lebih simple misalnya kode politan ya atau apa ya hai hai Yaudah, kode politan aja teman-teman.
Klik kode politan.com. Ini kalian bisa belajar coding di sini juga. Terus klik kanan, view, page source. Nah, di sini kalian akan menemukan kode-kode HTML.
Oke, ini ada kode-kode HTML teman-teman. Ada yang namanya tag, tag HTML, dan lain-lain. Dia diproses di dalam website.
Oke, itu cara kerjanya. Dan setelah itu, kita akan belajar yang namanya struktur HTML. Tadi kalian lihat itu merupakan struktur demi struktur. Jadi dia dibagi-bagi teman-teman.
Nanti kita lihat sendiri. Nah, yang pertama adalah tag HTML. Oke, pertama yang harus kita lakukan membuat tag HTML dan dia membutuhkan tag penutup. Oke ya, ini detail dulu aja. Dipaksa dipahami dulu aja, nanti kita akan bahas lebih detail lagi.
Dan yang berikutnya adalah tag head. Ini bagian kepala di dalam website. Di dalam tag head, ada tag lagi yang namanya title.
Dan di dalam tag html, ada yang namanya tag body. Untuk menampung bagian badan dari website. Oke.
Hai Oits nah disini Hai ada satu lagi teman-teman yang kelupaan namanya dos type HTML Hai satu lagi untuk memformat penulisan Hai UTF-8 Oke, ini diabaikan dulu ya teman-teman ya Kalau disini ada yang berwarna-warna ini, ini abaikan aja dulu Nah, kita akan membahas satu-satu nih Di baris pertama ada yang namanya Doge Type HTML Wah, apa lagi itu bang? Tenang aja teman-teman, gak usah dibingungin dulu Jadi DogeType HTML ini merupakan tag yang penting fungsinya sesuai dengan namanya DogeTypeDocumentType HTML. Jadi untuk memberitahukan kepada browser ini, tentang tipe dokumen kita adalah HTML. Oke?
Gak mau dong kita udah ngebuat kode HTML, tetapi tidak dianggap HTML oleh si website? Tidak ya? Kalau tidak, kita membutuhkan tag ini. Tag ini sangat penting, teman-teman. Jadi di dalam HTML itu ada beberapa versi, dan versi up-to-date-nya adalah HTML5.
Untuk memberitahukan kepada web browser mengenai versi terbaru dari HTML kita adalah dengan cara memasukkan kode seperti ini. Dia harus dibuka dengan kurung. siku buka dan ditutup kurung siku tutup lalu di dalam antara kurung ini dimasukkan nama tag-nya Oke seperti ini dos type HTML dan diawali dengan tanda seru Oke coba teman-teman kalian praktek dulu deh jangan nonton video terus disambil praktek aja nggak papa oke kok ketinggalan bisa dipause hai hai Hai nah ini HTML ya yang berikutnya di baris kedua HTML Hai yang coba ini kita hapus dulu Hai kalau kita umpetin deh Hai kayak gini nah hai hai Diabaikan dulu aja ya teman-teman ya, kalau tadi banyak banget di dalam HTML itu ada apa aja. Nah, jadi setelah kita mendeklarasikan versi terbaru dari dokumen kita, yaitu HTML5, setelah itu kita harus membuka yang namanya perintah untuk menuliskan kode HTML. Atau yang biasa disebut dengan tag.
Hai nah teks itu tadi yang sudah saya jelaskan ya ciri-ciri teks itu kan harus memiliki kurung buka siku dan kurung siku tuh tutup dan lalu di dalamnya adalah nama teksnya Hai nah di Dalam tag itu teman-teman ada yang namanya tag penutup dan ada yang namanya self-closing tag artinya tidak memiliki penutup. Jika kalian perhatikan dosetab HTML ini tidak memiliki penutup. Kenapa? Karena dia dikategorikan sebagai self-closing tag. Atau tag yang tidak memiliki penutup, dia berdiri sendiri.
Sedangkan tag yang memiliki penutup, seperti tag HTML ini, dia membutuhkan tag penutup. Jadi, kita harus membuat tag membuka dan tag penutup. Untuk tag penutupnya sendiri, hanya ditambahkan tanda slash di depan nama tag.
Di sini ya, bukan di belakang Kalau di belakang, kalau di Visual Studio Code Di text editor kita, dia akan Memberikan warna merah, artinya error Atau artinya salah Oke, ini kita upetin lagi Nah, jadi kita buka dulu nih Kita buat pembukaan dan perutupnya dulu Nah, habis itu kita belah dua Kita belah dua, nah seperti ini ya Kalau awalnya seperti ini Kita buat yang membuka dan yang mendutup. Lalu kita belah dua, teman-teman. Nah, berarti tandanya di dalam TKTML ini, kita mulai membuka TKTML. Jadi, kita sudah siap untuk membuat kode-kode HTML. Oke.
Nah, setelah itu, kita... Buka atau kita buat lagi tag untuk bagian kepala, yaitu tag head. Jika di badan kita memiliki kepala dan memiliki badan, nah website pun seperti itu teman-teman. Dia membutuhkan yang namanya tag head atau bagian kepala.
Bagian kepala ini fungsinya untuk menampung informasi tambahan tentang website. Informasi tambahan itu seperti apa? Informasi tambahan itu seperti title di pojok kiri, maaf, di atas window bar kalian.
Ini bahasa kalian ketik itu. Nah ini adalah title atau judul dari website kalian. Dan di samping ini adalah namanya favicon atau logo kecil yang mewakili website kalian. Nah, 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 untuk manusia, bukan. Jadi, lebih dikhususkan untuk si robot. Kayak mesin pencari google Oke Karena Tadi fungsinya untuk informasi tambahan aja Mengenai website Oke Nah informasi tambahan itu Ada apa aja Nah informasi tambahan itu Ada lagi teman-teman Ada yang namanya meta Tag meta Dan dia membutuhkan satu atribut.
Nama atributnya adalah UTF-8. Nah, jika tadi kita sudah membahas tag. Dan sekarang kita akan membahas yang namanya atribut. Atribut itu apa? Atribut itu nama setelah tag.
Jika tag berdiri sendiri, satu kata saja. Nah, kalau di dalam tag ada dua kata, misalnya length. Nah, Sudah dipastikan kata kedua itu setelah nama tag adalah atribut. Atribut itu adalah informasi tambahan untuk tag.
Oke. Informasi tambahan untuk tag. Jadi, charset ini adalah atribut dari tag meta.
Dan atribut itu bisa membutuhkan nilai, bisa tidak membutuhkan nilai. Seperti layaknya HTML ini adalah atribut juga teman-teman, atribut dari dosetype. Tapi dia tidak membutuhkan nilai, karena atribut ini sudah mendefinisikan nilainya sendiri. Sedangkan charset, dia membutuhkan nilai.
Kenapa? Karena di dalam atribut charset ini, Ada beberapa nilai Jadi bukan hanya satu nilai saja Oke Jadi dia membutuhkan operator sama dengan Untuk memasukkan nilainya Operator sama dengan lalu Tanda kutip 2 Lalu nama Value Dari atributnya Oke teman-teman Jadi Atribut charset ini Membutuhkan nilai Nilai Nilainya adalah UTF-8. UTF-8 ini merupakan nilai atau tag perintah untuk menjelaskan kepada web browser tentang aturan penulisan aturan penulisan suatu dokumen sesuai dengan namanya char set atau karakter set jadi isinya adalah merupakan perintah untuk Hai menset karakter-karakter yang ada di dalam halaman HTML ini dan nilainya merupakan utf-8 atau yang biasa disingkat ini singkatannya atau kepanjangannya adalah uniform Translate formatting kau tidak salah teman-teman bisa di set sendiri dan setelah 8 ini adalah versi yang paling baru Hai nah jika kalian tahu Hai zaman dulu atau zaman yang sebelum sekarang Di dalam website itu sangat terbatas untuk konten-kontennya.
Jadi, website seperti kata-kata seperti bahasa Arab, Korea, Jepang, itu tidak bisa ditranslate secara baik oleh browser. Hai jadi browser dulu belum kenal Wah ini bahasa apa jadi ketika ditranslate dia hurufnya kota-kota pernah enggak kalian mengalami hal kayak gitu Hai di handphone saya pernah mengalami teman-teman kayak gitu jadi handphone saya kan dulu gadul ya Nah teman saya kan handphonenya lumayan keren jadi ketika dia SMS ke saya pakai emot di handphone muncul nah ketika di handphone saya itu kotak maka saya bingung ini ala lu ngirimin apa Nah disitu ketika saya belajar ini Saya sadar, oh iya cacat itu Dulu sebelum Ada yang terbaru, tidak bisa Menterjemahkan dengan baik Nah di browser juga seperti itu teman-teman Jadi sekarang, sebelum hadirnya UTF-8 ini Huruf-huruf seperti yang Saya sebutkan tadi itu tidak bisa Ditranslate dengan baik Jadi tidak bisa diterjemahkan dengan baik Tidak bisa ditampilin Sesuai dengan apa yang diinginkan Nah sekarang UTF-8 ini Bisa menerjemahkan 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 nama sesuai dengan judulnya yaitu title judul itu untuk memberikan judul di halaman website Oke sebenarnya kalian bisa melihat nih pengertian dari masing-masing tag tinggal dihover aja letakkan pointer di atas tag yang kalian mau tahu di HTML element represent the root of an HTML document oke nah title ini silakan kalian masukin nama kalian hey dan Rahmandi Oke, Tidak Rahman dia Nah, coba di save Kalau tanda bulat, masih tanda bulat seperti ini Tandanya belum di save teman-teman, lihat tuh Bisa kalian file Klik save Atau ctrl di keyboard, ctrl s nah kalau seperti ini, biarin aja teman-teman ini karena saya menggunakan extension atau menggunakan plugin jadi secara otomatis dia di reset seperti ini, ini diabaikan aja secara umum dia sama Terus kita lihat Kita akses filenya Cara mengakses filenya gimana Oke Masuk ke folder yang kalian buat tadi Dan masuk ke dalam File HTML kalian Yang berlawan logo Google Chrome Nah jika logonya belum Google Chrome kalian bisa Klik Klik kanan properties jika di Windows ya terus di open with nya ini ada Google Chrome atau browser kalian Hai yang secara default Nah lalu klik change aja klik change lalu pilih browser yang kalian inginkan defaultnya apa kalau saya Google Chrome Hai nah klik Google Chrome aja lalu klik ok atau apply habis itu di klik apply lagi di bawah sini oke hai hai dia akan otomatis langsung membuatkan jadi ketika kita klik 2 kali dia akan mengarahkan langsung ke browsernya karena HTML ini berjalan di sisi browser jadi klik 2 kali nah sekarang kita sudah berhasil membuat sebuah title dengan nama kita sendiri hebat ya mantap oke selanjutnya kita balik lagi ini bisa di close browsernya kita balik lagi kembali lagi ya ke text editornya Nah setelah itu kita baru masuk ke dalam text body wow text body nih text body ini seperti badan kita aja teman-teman kita memiliki badan nah 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 badan kita nah, seperti itu seperti itu juga di dalam website atau di dalam html tempat kita menulis kode sebenarnya makanya lebih banyak di dalam tag body di dalam tag body hampir 90% yang kita tulis di dalam body itu akan tampil di dalam browser kalau tadi tegat ini Hai fungsinya hanya untuk menampung informasi ya informasi tambahan termasuk title-title ini muncul nate ini termasuk salah satu dari sekian banyak teks yang ada di dalam tag head hasilnya muncul di dalam dalam browser yang kalau metacarset ini tidak muncul ya karena metacarset ini lebih ke robot ke mesin pencari ke sistem bukan ke pengunjung kita teman-teman Nah kalau kita masukkan di lantai body dia akan otomatis langsung muncul di dalam browser coba buktikan deh terus dulu misalnya nama kalian lagi lalu counter es kontor S terus lihat hasilnya kontor R loh keren ya ada nama kita sekarang di browser walaupun belum terlalu banyak hiasan-hiasannya atau tidak mencerminkan sebuah website yang utuh apa-apa oke nah oke mungkin disini ada yang bingung ya ini kenapa ada spasi disini tidak gini aja Kenapa harus didorong-dorong seperti itu? Nah, sebenarnya teman-teman, karena kita akan membuat, karena di dalam website itu kita pasti akan berhadapan dengan kode-kode HTML. Dan itu tidak satu atau tidak sampai puluhan, tidak sampai ratusan.
Oke, dia bisa lebih dari ratusan kode. Nah, bisa bayangin nggak? Kalau ratusan kode itu semuanya sama, pasti kita akan bingung banget.
Ini merupakan ident atau identation ya. Untuk memberikan jarak, untuk memberitahukan kepada kita bahwa tag meta dan tag tel ini adalah merupakan anak dari tag head. Jadi dalam tag head ini ada dua tag lagi. Jadi dia saling terhubung dengan tag yang atasnya atau parent tag.
Kalau sejajar ini berarti dia sama nih teman-teman. Hai teka TML teks body Hai Oke itu cuman masalah apa namanya Hai masalah standar penulisan aja kalian harus di harus ikuti juga sih kalau ikutin kalian akan kebingungan nanti oke lupakan dari cukup sampai situ aja penjelasan tentang ideannya identitas nya Nah setelah itu kita sudah di udah mengenal strukturnya ada dua step HTML Hai tadi kita sudah belajar ya tentang teks Hai terus atribut Hai nah tadi teks itu apa Hai teks itu ah ciri-cirinya maaf hei teks ciri-cirinya itu diawal dengan kurung siku buka dan kurung siku tutup dari tengah-tengah ini merupakan nama tag nya misalnya nama tag nya HTML berarti dalamnya tag HTML misalnya nama tag nya body ya nama tag nya body di dalam ini harus di dalam ciri-cirinya yaitu memiliki tag pembuka kurung siku tutup dan kurung siku buka Hai kalau seperti ini gimana Nah kalau ini seperti ini berarti bukan teks karena tidak lengkap dan ketika diproses juga dia akan error atau dia tidak akan menampilkan yang semestinya akan bermasalah itu pentingnya ketelitian teman-teman Hai kalau Hai tag itu membutuhkan tekmenutup tinggal ditambahkan aja tekmenutupnya HTML hai hai Hai lalu butuhkan tekmenutup nah teks penutupnya harus sama aja nama teksnya sebenarnya menulisannya sama tapi yang membedakan dia penutup adalah ditambahkan teks maaf ditambahkan slash hai hai hai hai Hai kek maaf teman-teman kalau disini saya tidak fokus karena sudah malam sekali Hai karena demi kalian nih buat videonya berhubung waktu saya kosongnya cuman malam jadi saya buat di malam hari waktu istirahat saya gunakan untuk buat video enggak papa ya Semoga bermanfaat aja oke ini merupakan tag Hai atau yang biasa dibilang juga elemen teman-teman teks atau elemen Hai sebesar sama aja sih teks atau elemen Hai yang pentingkan intinya itu merupakan sebuah perintah Hai kea elemen seperti ini dan atribut-atribut yang sudah kita sindir tadi yang sudah kita bahas juga misalnya teks HTML yang membutuhkan teks menutup tetapi dia membutuhkan teks membutuhkan ribut juga berarti tinggal ditambahkan aja di dalam tag ini syaratnya dia harus ada di dalam lingkup tag pembuka ya seperti ini ya jadi tinggal di spasi aja tidak boleh diluar tag kalau diluar seperti ini ini berarti bukan di dalam tag, kita harus masuk di dalam tag tag nya juga harus di dalam tag pembuka, bukan tag penutup menuliskan atributnya jadi spasi, lalu nama atributnya apa, nama atributnya misalnya lang untuk membuat perintah tentang bahasa yang digunakan oleh HTML ini untuk memasukkan nilainya dengan tanda sama dengan, lalu titik kutip 2 dan nilainya diampit oleh adalah titik dua ini Hai nilainya misalnya dua digit bahasa negara Indonesia berarti ID Hai kayak gitu teman-teman ya pembuatan atribut Hai nah setelah itu ada yang namanya konten Hai Woi salah Hai apa itu konten-konten itu yang ada di dalam teks maksudnya gimana maksudnya gini coba ini kan HTML yang misalnya memiliki tribut yang usah pusing tinggal buat aja tributnya kayak gini ya lalu lalu konten itu ada dia terletak di dalam antara teks membuka dan teks penutup Hai jadi tengah-tengah ini teman-teman Isinya nah ini merupakan konten Hai kok dan ini Oh ya akan Tampil di browser kalian Hai oke Hai ini hapus ya Hai atau es Nah itu merupakan Hai ngetek elemen dan atribut ya teman-teman HP disitu penjelasannya Hai Nah sekarang kita akan membahas teks heading heading heading heading level 1 Hai dan coba aja buat aja hak satu dan dia membutuhkan tek penutup Hai nah begini teman-teman satu dia membutuhkan tekmenutup dan Hai nilainya harus kita masukkan diantara teks satu ini soalnya sama kita lagi ctrl s, lalu lihat ke browsernya pastikan browsernya tadi belum di close, jadi kita tinggal pindah aja ke browser lalu ctrl r di keyboard, cara cepatnya atau di refresh tekan tombol reload display lihat ya dia akan memberikan tampilan sesuai dengan formatnya di dalam HTML itu terdapat beberapa tag teman-teman atau beberapa perintah yang disudah diatur oleh atau dibuat sedemikian rupa oleh HTML tag H1 ini merupakan tag untuk memberikan judul di halaman website sampai tingkatan H6 Ini tingkatan terkecilnya. Dan H1 ini adalah tingkatan terbesarnya atau tingkatan tertinggi. Jadi H1 ini besar. H6 ini kecil.
Kalau lihat ya, Ctrl S lalu refresh. Lihat, kecil banget. Coba kita buat sampai berurutan.
Oke teman-teman, sudah saya buat A1 sampai H6. Ctrl S, lalu lihat hasilnya. Keren ya. Kita sudah membuat format judul dari yang paling besar sampai yang paling kecil.
Ini untuk membuat judul teman-teman. Oke. Selanjutnya, kita akan belajar yang namanya Anchor Element.
Hai engkau elemen itu untuk membuat link teman-teman Hai nah cukup pakai tag aja nama tag-nya a dan dia membutuhkan tag menutup sampai di sini cukup tidak dia membutuhkan atribut teman-teman nama tributnya adalah ref karena hai hai Sebuah link pasti tidak lepas dari tujuannya. Tidak ada kan link yang ketika kita klik itu tidak mengarahkan kemana-mana. Pasti dia mengarahkan ke sesuatu tempat atau mengarahkan ke sesuatu website.
Seperti itu ya Nah ref ini untuk Mengarahkan kita ke tujuan yang diinginkan Ref ini untuk memberikan tujuannya Jadi ketika A ini di klik Dia akan mengarahkan ke tujuannya Nah ref ini artinya adalah Hyper reference Jadi referensi besarnya gitu Jadi intinya itu lokasinya dimana Nah lokasinya Misalnya kita mau membuat link menuju ke Google Coba kita ke Google Google.com. Lalu enter. Nah, alamat ini di copy, teman-teman. Dia harus lengkap ya. Menggunakan https.2 dan slash slash.
Nggak boleh google.com aja. Nanti bermasalah. Karena ini namanya IP protokol, teman-teman.
Nggak boleh kreatif ya. Nah, setelah itu coba ctrl S deh. Di save ya. Lalu kita lihat hasilnya. Ctrl R. Loh, kok nggak ada?
Kaden. Kenapa nggak ada? Car.
Karena kita belum memasukkan data yang akan tampil. Maksudnya gimana? Nah, maksudnya coba kita masukin aja deh langsung. Klik di sini. Terus Ctrl S. Nah, lihat hasilnya.
Lihat bagaimana. Nah, jadi dia tidak cukup sampai di tag aja teman-teman. Dia membutuhkan nilai yang mewakili tag ini. Jadi sekarang klik di sini ini memiliki perintah untuk memberikan link dengan tujuan google.com. Oke, jadi kita untuk memasukkan link ini.
Hai harus namanya harus ada di dalam Hai teka atau tackling nya nggak boleh di luar teman-teman saya di luar sini ya ya mandi motor es nah dia tidak akan terbaca sebagai link Kenapa karena dia tidak ada di ruang HTML nya atau lingkup dari tekat emailnya Nah kalau dipindahkan misalnya saya pindahkan bisa enter spasi biar dijarak lalu pindahkan ke sini maka klik disini rahmani akan menjadi link lihat ya oke Pasti sudah paham lah yang dasar seperti ini lalu kontur S lalu kontur R jadi ketika kita klik coba kalian klik Hai dia akan mengarahkan ke google.com hebat ya kayak bisa membuat nih kreatifitas kalian aja misalnya mau mengarahkan ke website mana aja misalnya ke YouTube jadi enggak usah capek-capek nih klik youtube.com kayak gitu langsung aja ini diubah YouTube nah disini bisa ini aja klik Google Hai klik YouTube Hai lalu apa nih Hai yang sering dikunjungi apa yo Hai Instagram lo selesai dua aja sebanyak-banyak lalu silakan kalian disilang aja lalu di refresh Hai jadinya klik Google dan klik YouTube loko ini Tidak sesuai ya dengan apa yang kita tuliskan disini Kan kalau kita tulis disini Dia berurutan ke bawah Ada garis baru jadinya Kalau disini tidak, kenapa? Karena HTML tidak sepintar itu teman-teman atau lebih tepatnya browser tidak sepintar itu jadi kita harus menuliskan perintahnya dulu di dalam HTML ini perintah untuk membuat garis baru karena si HTML ini tidak membaca bahwa si ahref ini atau link pertama dan link kedua ini merupakan dua paragraf yang berbeda Tetapi ketika diakses di browser, dia dianggap satu baris yang sama. Kenapa? Karena ini merupakan sifat bawaan dari masing-masing tag.
Apalagi itu, Bang? Nah, jadi setiap tag itu, teman-teman memiliki sifat masing-masing. Jadi tag A ini sifatnya adalah inline.
Apa itu inline sesuai dengan namanya? Dalam baris, jadi ketika di browser ada satu inline dan satu inline lagi, dia akan disambungkan. Jadi inline pertama dan... inline kedua inline pertama ini diproses oleh si browser lalu ada inline berikutnya nah dia akan ditumpuk di satu baris nah nanti di dalam CSS Kita bisa mengatur Sifat itu teman-teman Jadi kita bisa setnya menjadi block Block itu artinya dia Jadi baris pertama ini Bisa berbeda dengan Baris kedua Jadi tidak dianggap inline lagi Jadi barisnya akan seperti ini Garis baru Untuk Menang Istilahnya Untuk mencegah itu teman-teman, kita bisa menggunakan yang namanya BR.
break line artinya teman-teman jadi dia seperti enter fungsinya jadi ketika kita menuliskan br di pojok atau di di akhir kalimat klik google dia akan membuat baris baru untuk tag berikutnya nah coba kita lihat deh, kontur S lalu kita lihat kontur R keren ya jadi di enter, dipaksa enter oleh si browser Oke teman-teman, jadi kalau diperhatikan, misalnya saya klik Google, dia akan menimpa halaman HTML kita yang sebelumnya. Misalnya saya klik YouTube lagi, lihat, dia akan menimpa halaman HTML kita. Bagaimana caranya untuk Kita mengoper tab baru, jadi ketika kita klik Google, 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 tab baru.
Caranya, tambahkan atribut di link yang kita... Hai inginkan Hai target nama-nama tak nama atributnya target teman-teman lalu hai hai hai hai hai hai tambahkan underscore lalu namanya blank ini sudah dari sana teman-teman saya bukan kreatif jadi penamanya seperti ini target blank artinya ketika link ini diklik dia akan mengarahkan ke tab baru atau ketika target ini diklik dia akan mengarahkan ke tab baru Nah coba lihat, counter R. Saya klik Google.
Lihat, dia mengarahkan ke tab baru dengan link tujuannya tanpa menimpa halaman HTML saya. Oke, kalau di YouTube bagaimana? Tinggal tambahkan saja targetnya.
Lalu atributnya blank, atau S, lalu lihat. Klik YouTube, dia akan mengarahkan YouTube. Oke ya. Oke, selanjutnya ada yang namanya image. Ini yang ditunggu-tunggu teman-teman.
Cara kita memasukkan gambar di dalam halaman HTML kita. Atau di dalam halaman website kita. Nama tag-nya adalah img atau image. Dan tidak cukup sampai di situ, dia membutuhkan atribut yang namanya src.
Oke, src ini mengoper atau membutuhkan nilai lokasinya. Lokasinya ada dua opsi teman-teman. Kita bisa memasukkan lokasinya yang ada di dalam lokal kita. 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. Dia harus memiliki internet. Syaratnya harus memiliki internet Harus terkoneksi internet Karena kita mengambil gambar orang lain Untuk ditampilkan di halaman website kita Otomatis kita harus Men-download gambar orang lain dulu Lalu kita tampilkan di halaman website kita Seperti itu ya Beda kalau kita men-download dulu Lalu kita Masukkan di dalam folder kita lalu kita akses Nah disini saya akan mencontohkan untuk opsi kedua Jadi Masukkan aja Ke kita cari di google dan misalnya saya mau cari rahmadikom website saya gambarnya misalnya ini ya, logonya klik kanan di gambar yang mau kita tampilkan lalu open image in new tab sampai seperti ini, sampai dia masuk ke detail gambarnya, lalu ambil linknya teman-teman ctrl c lalu pas tekan di dalam src ini Hai oke ya Hai nah lalu kita lihat hasilnya Oke dia sudah muncul gambar teman-teman Hai itu untuk memasukkan gambar di opsi pertama Dan ALT, ada atribut kedua, namanya ALT teman-teman. ALT ini adalah Alternative Text.
Sesuai dengan namanya, Text Alternative. Untuk apa Text Alternative ini? Text Alternative ini untuk... Menginformasikan ketika gambar ini tidak bisa diakses Pernah nggak mengalami gambar tidak bisa diakses atau gambar crash?
Nah, ALTI ini akan mewakili gambar yang crash tersebut misalnya ya, alternatif textnya ini kan gambarnya merupakan logo berarti logo rahmandi.com coba ctrl s, lalu lihat hasilnya Tidak terjadi apa-apa. Memang tidak terjadi apa-apa. ALT ini akan tampil ketika kita mendapatkan linknya error. Karena berhubung kita mengambil gambar dari orang lain atau mengambil gambar dari internet, tidak menutup kemungkinan gambar ini dihapus oleh pemiliknya atau pemiliknya. Atau bahkan gambar ini di servernya sedang down.
Otomatis gambarnya tidak bisa diakses. Nah, jadi ada beberapa kemungkinan teman-teman. Karena kita kan mengambil gambar dari orang lain.
Nah, misalnya ya. Seandainya link ini crash. Atau gambarnya dihapus oleh pemiliknya.
Misalnya ya. Saya hapus salah satu linknya. Jadi error kayak gini.
Lalu ctrl R. Oh, masih bisa. Jangan S. Pertama. T misalnya karena S itu kan untuk security nya seperti ini protokolnya otomatis dia akan error lihat ya gambarnya crash menampilkan gambar seperti ini, gambar tercoret lalu ada nama logo rahmat dikom nah ini adalah merupakan alternatif text nya jadi orang tidak bingung apa gambar apa yang rusak oh ternyata gambar yang rusak adalah logo rahmadikom jadi orang tidak penasaran teman-teman oke ya itu untuk alternatif ini untuk opsi pertama mengambil gambar dari orang lain untuk opsi kedua yaitu kita harus mendownload dulu atau kita menyediakan gambar dulu misalnya ya Misalnya saya download gambar ini, saya klik kanan, save image as, lalu ke desktop, namanya logo, formatnya png ya, save. Nah, lalu kembali ke website kita, lihat alaman logo, ada di desktop, nah ini saya pindahkan ke folder saya belajar website.
Masukkan aja langsung. Berarti di satu folder yang sama. Ingat teman-teman, nama filenya dan nama formatnya.
Formatnya png. Nah, otomatis di Visual Studio Code akan muncul. Gambar yang kita masukkan. Kalau nggak muncul, di klik refresh aja.
Ada refresh explorer. Nah, lihat ya. Di sini ada formatnya juga.
Nah, setelah itu. SRC-nya ini kita hapus semua. Kita masuk. Masukkan gambar dari lokal kita.
Dari komputer kita berarti. Berarti masukkan logo. Nama filenya teman-teman. Karena ini di dalam satu folder yang sama.
Logo. Lalu sertakan nama formatnya. Jangan sampai salah. Harus lengkap ya.
Dengan nama formatnya. Pakai titik dan formatnya. Oke ya.
Terus ctrl S. Lalu lihat hasilnya. Dia muncul.
Oke. Itu untuk gambar. Hai berikutnya adalah table cara kita membuat table cara buat table kita cukup membuka Hai teks table nya dulu teman-teman untuk memberikan perintah bahwa kita ingin buat table Nah setelah itu kita masukkan baris karena di dalam HTML itu identik dengan baris dan kolom Nah di dalam HTML pun seperti itu teman-teman kita harus memasukkan baris terlebih dahulu baris itu namanya adalah tr atau table row table row nah berarti sekarang kita dia membutuhkan ekor tutup ya hai hai Nah berarti sekarang kita membuat satu baris 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 tag tr ya Tag baris Karena kita ingin membuat kolomnya di dalam baris Dan baris pertama Nah td ini artinya table data Nah masukkan Datanya apa Di kolom pertama di baris pertama juga nomor misalnya terus di kolom kedua masih di baris pertama yaitu nama kita lihat hasilnya oke seperti ini ya kok tidak seperti table iya memang betul kita bisa menambahkan border di sini teman-teman satu kenapa warnanya merah karena border ini sebenarnya atribut yang sudah tidak disarankan oleh HTML digantikan oleh CSS karena border ini sudah masuk ke tampilan nah CSS itu kan diciptakan untuk menghiasi untuk memberikan tampilan kepada HTML jadi untuk masalah tampilan itu diserahkan ke CSS nah karena ini hanya untuk contoh saja untuk memudahkan kita karena kita tidak boleh langsung membahas CSS kita harus membahas HTML sampai selesai jadi kita akalin dulu teman-teman bahas Pakai border dulu aja. Walaupun dia disarankan ya.
Nanti kalian tidak boleh pakai border. Kalian harus pakai CSS. Nah, kontrol S. Sudah lihat hasilnya.
Dia akan memberikan tampilan seperti ini. Kotak-kotak. Layaknya sebuah table.
Lalu untuk memasukkan datanya bagaimana? Masukkan datanya berarti kita buat baris baru lagi. Buat baris baru.
Buat kolom pertamanya. Nomor 1 berarti. Hai dan kolom keduanya adalah nama saya Hai kores dan lihat hasilnya nomor satu nama irhamadi kalau ini membuat 21 data lagi gimana Hai tinggal tinggal buat aja kita copy lalu paste dan nomor 2 berarti namanya misalnya siapa Agus Sur Jono ctrl s dan lihat hasilnya sudah berhasil oke teman-teman itu untuk membuat table kita hapus Selanjutnya kita akan membahas tag form.
Jika kalian pernah melihat halaman login atau halaman register, halaman masuk atau halaman daftar, di sana pasti kalian pernah menemukan input field atau kolom input untuk memasukkan data. Seperti nama lengkap, email, nomor telepon, alamat, dan bahkan yang lain-lainnya. Kalau kalian pernah ke Tokopedia juga atau Bukalapak e-commerce berbelanja online, kalian bisa pakai. pasti harus memasukkan detail pembayarannya dan detail informasi untuk produknya, misalnya catatan untuk pembelinya, penjualnya seperti teman-teman, nah itu dibuat menggunakan input field input field itu, kita harus membungkus di dalam tag form seperti tag table tadi tag form ini membutuhkan tag menutup dan action action Action ini sebenarnya untuk data mau dikirim kemana ketika dia di klik.
Oke. Ini bisa dihilangkan dulu teman-teman. Itu karena sudah berbau data.
Kita belum membahas ke situ karena kita hanya membahas HTML saja. Nah, berikutnya adalah kita masukkan input. tipenya text kita lihat aja hasilnya jadi dia membutuhkan tag input, lalu membutuhkan atribut yang namanya tipe karena di dalam tag input ini sangat banyak sekali tipe-tipenya, makanya ada atribut lalu tipe dan nilainya berbeda-beda Hai nah disini masukkan aja tipenya teks kontrol S lalu kontrol R apa terjadi dia akan memberikan kotak seperti ini tapi ketika kita klik dia bisa kita masukkan data nah seperti ini ya hai hai Jadi memungkinkan kita untuk mengirim data ke server Nah mengirim data ke server itu diputuhkan bahasa lain selain HTML dan CSS Yaitu bahasa pemrograman server-side Ada yang dikenal bahasa untuk pemrosesan data Yaitu seperti PHP, Python, Ruby dan yang lainnya Karena kita hanya membahas HTML jadi kita lupakan saja dulu Ini kita hanya membuat strukturnya dulu Nah untuk memberikan text Melayang di atas input ini. Kita bisa. Memasukkan atribut yang namanya placeholder.
Dan nama. Nilai atributnya apa. Misalnya. Masukkan nama.
Ctrl S lalu Ctrl R. Di atas ya teman-teman. Dia akan memberikan teks melayang. Seolah-olah teks ini.
Ada di dalam input ini. Jadi ketika kita ketikan sesuatu. Teks melayang ini akan menghilang.
Lihat. Misalnya masukkan nama. Terima kasih. masukkan nama adin menghilang ya oke itu untuk teks melayang namanya placeholder nah selain itu kita bisa memberikan judul di atas ya teman-teman seperti ini ya kita berikan di pinggir kirinya misalnya nama lengkap titik 2 spasi kota R nah dia akan memberikan seperti ini Hai kalau inputnya ini mau di bawahnya kita bisa memberikan tag br Ayo kita enter biar lebih rapi hai hai Oke, seperti itu ya.
Nah, tapi kalau kita klik nama lengkap ini, masukkan nama lengkapnya 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 akan otomatis aktif seperti ini Karena kan nama lengkap ini kan Bersangkutan ya dengan input ini Input yang di bawahnya Nah jadi seolah-olah nama lengkap ini Ketika kita klik Otomatis dia mengaktifkan kolom Masukkan nama ini Kita bisa kurung Di dalam tagline Hai table namanya kita kurung jadi kita membuat suatu apa ya seperti link tadi teman-teman jadi kita bungkus nama lengkap dan input ini seolah-olah dia mereka adalah satu komponen Hai motor es lalu kita kontrol R Nah lihat ketika saya mengklik nama lengkapnya saja otomatis si kolom ini akan aktif Oke keren ya oke Hai selanjutnya ada yang namanya teks select select itu kalau kalian pernah melihat button jika dia diklik dia memberikan drop down pernah lihat seperti itu pernah ya Nah itu bisa kita buat menggunakan yang namanya teks select kita bisa kurung ke teklabel dulu teman-teman seperti tadi lalu kita berikan judulnya seperti nama lengkap tadi misalnya ini untuk gender atau istilahnya ini kelamin, titik 2, lalu kita berikan enter nah disini namanya adalah tag select dia membutuhkan tag penutup teman-teman Lalu kita membutuhkan datanya.
Data drop down. Jadi ketika kita klik buttonnya dia akan menampilkan data-data yang ada. Misalnya karena jenis kelamin hanya dua data saja berarti kita masukkan data pertama. Untuk memasukkan datanya menggunakan tag option dan membutuhkan tag penutup. Masukkan datanya misalnya laki-laki.
Opsi berikutnya adalah Prem Perempuan. Perempuan. Oke ya, seperti ini.
Nah, ketika kita ctrl S, lalu kita ctrl R. Wow, kenapa jadi seperti ini? Karena kita belum memberikan baris baru di setiap tag label. Nah, label ini belum kita berikan enter. Kita berikan enter.
Dia kan seperti ini ya. Kalau dia masih dempet, kita bisa memberikan enter lagi. Oke. Walaupun cara ini tidak efektif teman-teman. Bukan cara yang terbaik.
Karena berhubung kita baru belajar HTML. Kita bisa mengakalinya dengan HTML dulu. Walaupun nanti kita bisa mengakalinya ini menggunakan CSS. Lihat. Nah seperti ini ya.
Jadi ketika kita klik buttonnya. Dia akan memberikan data. Jadi ketika data perempuannya saya klik.
Dia akan otomatis mengganti. Merubah inputnya. Nah.
Kalau laki-laki, laki-laki. Kalau saya klik perempuan, otomatis akan berubah menjadi perempuan. Seperti itu ya.
Untuk drop down. Nah, berikutnya. Kita buat table lagi.
Kita buat label maksud saya. Untuk membungkus, untuk membedakan satu sama lain. Ini saya BR lagi ya.
Saya enter lagi. Untuk memberikan jarak. Oh, ya betul. Hai namanya adalah yang berikutnya adalah cek box kalau input select maaf kalau untuk select kita hanya bisa memilih satu data saja berbeda dengan input cek box kita masukkan lagi teman-teman untuk memilih skill misalnya skill kita buat enter lalu kita masukkan inputnya hai hai Hai input-tipunya apa Hai Jack box Oh ya dan namanya adalah HTML Hai nah seperti teman-teman hai hai hai hai hai hai hai hai Nah bedanya kalau di input text box ini labelnya itu harus dikurung per inputnya. Karena kalau kita kurung di label di satu judulnya juga, judulnya masuk ke dalam label, otomatis ketika kita klik.
skillnya, otomatis si kolom cek post ini akan men-checklistnya, nah lihat ya saya klik nama skillnya, otomatis dia men-checklist saya tidak mau seperti itu, saya maunya ketika nama HTMLnya aja kalau di klik, otomatis si checkbooknya muncul eh maaf, checkbooknya itu membuat centang oke jadi label ini tidak kita masukkan di dalam judulnya jadi judulnya kita pisahkan seperti ini Hai nah tapi yang kita kurung dengan label satu komponen input sama namanya Hai e-book for kita hapus Hai nah disini Hai berarti sekarang input dan namanya kita kurung di label supaya HTML ini ketika saya klik akan mengarah ke input ini dia otomatis di ceklis terlihat ya koto es lo koto R nah ketika saya klik skill tidak otomatis checklistnya, tapi kalau ketika saya klik HTML, nama HTMLnya, dia akan otomatis men-checklist checkboxnya lihat ya oke, mantap saya mau buat 3 checkbox deh, eh 2 aja checkbox kedua adalah CSS oke, jadi skill saya HTML dan CSS Hai senyumnya dua ya Nah itu untuk cek box yang berikutnya adalah kita buat enter lagi teman-teman biar enggak bingung Hai dan kita bisa masukkan label lagi sekarang fornya hapus hai hai Nah, kalau di input text ini kolomnya hanya sedikit, hanya satu baris, kita bisa membuat input yang jauh lebih besar daripada input text ini. Bagaimana? Nah contohnya, coba masukkan aja pesan.
Jadi ini untuk memberikan pesan kepada pemilik website. Nah namanya pesan pasti tidak hanya satu baris ya teman-teman ya. Pasti banyak kalimat yang mau disampaikan. disampaikan, nah jadi ada yang namanya text area untuk memberikan data yang jauh lebih besar bisa memberikan banyak data sekaligus, lihat ya, ctrl s ctrl r nah, kita bisa menuliskan banyak data disini, misalnya halo, selamat siang apa kabar nah, seperti itu pesan aja oke dan kita bisa memberikan flash ordernya masukkan pesan Hai selesai kalau R1 pesan hai hai hai hai hai hai hai hai Oke, seperti itu teman-teman untuk pesannya.
Ini sebenarnya bisa kita lebar tinggikan oleh CSS nanti. Ini hanya defaultnya saja. Ini terlalu mepet ya. CXbox dan pesannya kita tambahkan enter lagi.
Oke, sudah teman-teman. Selanjutnya, tidak lengkap rasanya kalau input ini tanpa button. Tanpa tombol untuk menyelesaikan form ini.
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 tagform jadi tagform ini yang akan menjadi penampung data-data yang dimasukkan jadi ketika input submit ini diklik dia akan mengirimkan data yang ada di dalam tag form ini di luar ini tidak akan dikirim oke makanya itu pentingnya tag form ctrl s lalu ctrl r dan lihat hasilnya submit saya enter dulu kurang Hai ada bunyi polisi teman-teman kayaknya ambulans tuh Hai selesai kontrol air Nah lihat tombol submit sudah ada coba deh kalian isikan dulu setiap formnya Nah, terus klik submit. Lihat, dia otomatis seperti merefresh seperti itu, teman-teman. Karena submit ini yang sudah saya katakan tadi mengirim data. Jadi ketika submit ini dikirim, dia akan mengirim data.
Data apapun yang ada di dalam setiap input field ini akan dikirimkan ke server. Dan dikirimkannya itu di prosesnya menggunakan attribute action. Dan ini nama filenya misalnya. Misalnya, process.php.
PHP ini extension untuk bahasa pemrograman PHP untuk memproses data. Oke. Seperti itu teman-teman. Nah itu.
Untuk form Selanjutnya Kita akan belajar yang namanya Tag div dan span Tag div ini singkatan dari Division Atau pengelompokan Jika di dunia nyata Misalnya kalau kalian sedang Berkerja, pasti kalian sudah Tidak asing lagi yang namanya division atau Pembagian-pembagian Ada yang namanya division HR atau HRD division teknologi khusus untuk programmer division marketing untuk sales marketing seperti teman-teman nah itu pembagian-pembagian atau tetap dikategori-kategoriin gitu masing-masingnya biar lebih rapi Nah kalau di dalam sekolah ada division misalnya untuk guru untuk kepala sekolah untuk murid untuk cleaning service atau ob seperti teman-teman jadi lebih memudahkan kita gitu untuk membagi-baginya tidak disatukan di satu pengelopokan Hai nah di dalam website juga seperti teman-teman ada yang namanya tag div, itu untuk pengelompokan, kenapa? ada tag pengelompokan, karena di dalam website itu, semuanya merupakan pengelompokan jika kalian melihat di dalam website misalnya website saya ini, rahmadikom disini terdapat banyak sekali pengelompokan nah, pertama dia dikelompokin untuk headernya dulu pengelompokan pertama header jadi untuk bagian kepalanya lalu bagian kedua adalah konten, dibawahnya header ini... Berikutnya adalah pembagian footer atau kakli dari website.
Jika kita lihat lagi di pembagian header ini, dibagi lagi teman-teman. Di dalam tag header ini dibagi lagi divisionnya, bagian navigasi bar. navbar dan bagian kontennya slider, dibagi lagi di dalam navbar ini ada pengelompokan atau division untuk logo dan pembagian berikutnya untuk menu nya Seperti itu ya Jadi pembagian-pembagian itu sangat wajar Apalagi di website Ada yang namanya tag div Itu untuk memberikan pengelompokan Pertama tag div Ada yang namanya tag span juga Sama-sama untuk pengelompokan Tetapi yang berbeda adalah sifatnya Sifat apa tuh?
Sifatnya adalah Bagaimana dia Display atau ditampilkan Di dalam browser Kalau div itu itu display-nya adalah block atau sifatnya ada block kalau span sifatnya adalah inline kalau kalian masih ingat inline ini sama seperti tag link dimana hasilnya dia tampilannya di satu baris karena sifat di masing-masing link itu adalah inline coba kita kontrol S lalu lihat hasilnya lihat block dan inline Coba kita tambahkan text pen lagi deh. Namanya inline juga. Dan lihat hasilnya.
Kenapa bisa seperti ini? Kenapa tag block ini... Maaf, yang namanya blok ini hanya satu baris dan baris berikutnya dipaksa untuk menjadi baris baru.
Sedangkan di baris kedua, dia memiliki dua nama. Padahal yang kita lihat di sini, span ini memiliki dua tag yang berbeda itu merupakan sifat display nya teman-teman kalau div itu display nya adalah blok jadi dia tidak peduli seberapa panjangnya kontrol konten yang didalam dia akan mengambil satu baris full sampai mentok jadi kalau ada konten berikutnya akan dipaksa ke baris baru seperti ini nah sedangkan inline kalau sifatnya inline disipati rakus tidak seperti blog kalau blog itu rakus walaupun isinya sedikit tapi tetap Hai mengambil satu full baris sedangkan inline ya sangat rendah hati teman-teman Hai kenapa rendah hati karena dia hanya mengambil jarak sesuai dari panjangnya aja kepanjangnya enam karakter enam karakter yang ambil Oke seperti itu ya Jadi walaupun di sampingnya masih ada ruang dia memperbolehkan untuk konten berikutnya mengambil satu baris yang sama seperti itu oke, nanti ini bisa kita setting menggunakan CSS nah tag div dan span ini sebenarnya tidak berfungsi sama sekali dalam HTML lebih tepatnya tidak tidak begitu Itu terlihat hasilnya di dalam HTML. Tidak seperti tag heading tadi.
Kalau tag heading kan memberikan judul ya. Memberikan huruf tebal, memberikan huruf jadi besar. Kalau tag div dan spell ini sebenarnya fungsinya lebih ke CSS.
Kalau sudah kita pautkan ke CSS, tag div ini akan lebih... berguna. Oke teman-teman seperti itu pembagiannya lalu ada yang namanya atribut ID dan kelas ID dan kelas.
Nah atribut ID ini digunakan untuk memberikan identitas unik dan class juga untuk memberikan identitas tetapi bedanya adalah kodek id hanya boleh digunakan Satu kali pakai aja Gak boleh lebih dari Satu kali pemakaian Di satu halaman HTML Ini kan satu halaman HTML ya Nah kalau kita ngebuat halaman baru HTML berikutnya Dengan ID yang sama itu tidak masalah karena kan berbeda halamannya, tetapi kalau di dalam satu halaman memiliki ID yang sama misalnya header disini span juga memiliki ID sama, header itu tidak bisa karena sifat ID itu adalah unik, hanya boleh satu kali pemakaian sedangkan kelas boleh digunakan oleh siapa saja dengan nama yang sama, misalnya menu kelasnya menu ini boleh teman-teman karena kelas itu sifat tidak unik tapi bisa dipakai oleh Hai beberapa komponen Hai nah fungsinya untuk apa atribut ID dan kelas ini nah fungsinya itu untuk membagi lagi perkategori per division Hai ini fungsinya ini akan lebih cocok untuk digunakan CSS Hai Nah kalau kita kalian lihat misalnya nih ya saya mau membuat dua div nah misalnya div pertama ini untuk menu, eh untuk header div kedua ini untuk konten nah terus yang membedakan div pertama dan div kedua itu apa? selain kontennya, nah makanya hadir adalah atribut ID untuk identitas dan atribut kelas untuk identitas juga disesuaikan penggunaannya jadi kita bisa jelaskan nih kepada web browser div pertama ini dengan ID header ini berarti div pertama ini dengan ID header untuk Fungsinya adalah untuk menampung beberapa komponen header. Dan ID div kedua, identitasnya adalah content. Walaupun sama-sama div, tetapi ID-nya berbeda. Nah, seperti itu.
Ini untuk membuat identitas di masing-masing Komponen HTML Oke teman-teman Selesai pembahasan kita mengenai HTML Sudah cukup malam sekali HTML 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 Dan subscribe tentunya Supaya Tidak ketinggalan dengan konten-konten berikutnya Dan jangan lupa Kunjungi website saya juga Rahman di kom Hai untuk memberikan konten-konten tentang website Oke konten CSS akan Hai diputar di video selanjutnya atau di video ini teman-teman maaf khanisah di satu video saja atau medan CSS tapi saya edit ya ini saya buatnya saya hentikan dulu videonya lalu saya buat lagi Oke Terima kasih teman-teman Atas waktunya Saya mau tidur dulu Karena saya kurang istirahat nih Udah jam 1 juga Oke teman-teman terima kasih atas waktunya Assalamualaikum Warahmatullahi Wabarakatuh Oke teman-teman, kembali lagi kita sekarang akan belajar CSS. Oke, jika sebelumnya kita sudah membahas apa itu HTML, jadi sekarang kita akan coba belajar CSS. Ini bisa kita hapus dulu ya. Apa sih CSS itu? CSS itu fungsinya adalah untuk menghiasi Oke teman-teman, CSS kepanjangannya adalah Cascading Style Sheet Oke Fungsinya adalah untuk menghiasi Komponen-komponen atau struktur-struktur Yang ada di dalam HTML agar dihiasi agar lebih cantik lagi Oke teman-teman singkatnya kalau yang biasa saya ajarkan ke murid-murid saya chess adalah fungsinya untuk menghiasi jika Sebelumnya adalah untuk struktur CSS sendiri Fungsinya Atau inti dari CSS itu Adalah menghiasi Menghiasi Salah penulisan teman-teman Oke Pertama Kita ke HTML dulu Jika sebelumnya kita menulis kode HTML Ada beberapa aturan yang harus kita patuhi Yang pertama adalah kita harus membuat file Ber-extension HTML Atau ber-extension HTML Maaf teman-teman, sok-sok Inggris ya Nah, di dalam CSS pun tidak semudah itu untuk menulis kode yang ingin kita buat.
Kita harus mengikuti aturan-aturan yang sudah dibuat oleh browser sendiri. Jadi, cara kerja CSS ini adalah dia harus menerima... Selector, ini saya contohkan dulu teman-teman sebelum kita membahasnya.
Misalnya saya memiliki elemen H1 atau tag H1 dalam body dengan nama saya. Untuk S, lalu saya reload. Defaultnya dari browser nama akan diset menjadi hitam. Kalau saya ingin mengubah menjadi putih, misalnya saya mau ubah menjadi merah, berarti itu sudah masuk ke menghiasi.
Kalau menghiasi berarti kita harus membuka text style-nya dulu. Lalu kita select atau kita pilih apa yang mau kita style. Saya pilih text hazard. lalu nama lalu jenis style nya apa oke jenis style nya tadi apa warna berarti color warnanya apa warnanya adalah merah oke Setelah itu kita ctrl S Lalu kita lihat Dia akan berubah warna menjadi merah Oke teman-teman Itu powerfulnya CSS Jadi Kita harus membuat Cara untuk memasukkan kontrolnya kode CSS nya dulu sekarang saya masukkan kode CSS di dalam tag head yang sebagai informasi tambahan mengenai website lalu saya masukkan selektor nya yaitu berarti saya target tag H1 ini yang ada di dalam HTML lalu saya warnai untuk text nya menjadi warna merah begitu teman teman, cara kerjanya Oke, dan sekarang kita akan belajar apa itu selektor, property, dan value.
Oke teman-teman, jadi yang pertama adalah selektor. selector itu apa? sesuai dengan namanya select, memilih jadi yang pertama kita harus lakukan untuk menghiasi suatu elemen atau suatu tag 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 kita harus memilih tembok itu, lalu kita cat begitu pun CSS teman-teman, seperti di kehidupan nyata sebenarnya, kita harus memilihnya dulu yaitu dengan cara jika di dalam CSS dia memiliki aturan sendiri yaitu selector Selector itu adalah tempat kita untuk memilih.
Oke. Selectornya di sini adalah H1, teman-teman. H1 itu berarti mengarah ke tag H1 yang ada dalam HTML.
Berarti saya memilih tag H1 yang ada dalam HTML. Di set warnanya. Menjadi merah.
Berarti TK1 ini akan menjadi warna merah. Tidak peduli dalamnya ada beberapa huruf atau beberapa kalimat. Pokoknya di dalam H1 ini, yang di dalam TK1 ini semuanya ubah menjadi warna merah.
Seperti itu teman-teman. Oke, setelah itu ada yang namanya property. Property.
Property ini apalagi? Property ini apalagi? Property ini nilai atau... Style apa yang mau kita masukkan Jika yang pertama yang harus kita lakukan adalah memilih Memilih elemen apa yang mau kita style Selanjutnya adalah Property Property itu adalah Yang tadi saya sebutkan Mau di style apa Hai Oke kalau mau di sel warna berarti masukkan keywordnya atau kata kuncinya adalah warna color dengan bahasa Inggris lalu dimasukkan titik 2 untuk mengoper nilainya jika di HTML adalah kita menggunakan sama dengan lalu tanda kutip 2 kalau di CSS cukup menggunakan titik 2 lalu nama Hai di lainnya Oke yang berikutnya adalah value teman-teman value ini adalah berhubungan dengan properti jika di color ini adalah sebuah properti berarti red ini adalah sebuah betul sekali sebuah value hai hai Value ini berhubungan dengan property teman-teman. Kalau property-nya itu adalah warna, berarti value-nya itu adalah berupa nilai-nilai warna.
Nah, di dalam HTML teman-teman, property warna itu... itu terdapat empat jenis yang pertama adalah keyword maaf yang pertama adalah keyword yang kedua adalah RGB maaf yang kedua hexadecimal lagi dulu hexadecimal yang berikutnya adalah RGB A hai hai atau RGB yang keempat adalah HSL A atau ASL nah di dalam CSI sendiri untuk warna saja dia memiliki empat aturan oke Silahkan kalian memilih yang mana. Ada opsi pertama yaitu menggunakan keyword. Maaf, ini kok carry word.
Keyword artinya adalah kata kunci. Jadi seperti rat ini adalah kata kunci. Kata kunci yang... sudah diatur sebelumnya oleh si CSS dimana kata kunci itu dalamnya sudah terdapat kode-kode warna jika saya masukkan dengan bahasa Inggris ya, kalau saya masukkan red berarti dia akan disetting menjadi warna merah menggunakan kata kunci sejauh ini sudah ada 400an lebih teman-teman untuk kata kuncinya dengan bahasa Inggris kalau kita mau ubah menjadi warna merah ke hitaman ubah menjadi namanya marun lalu Kalau kita ubah menjadi warna aqua, nah, teman-teman, kontrol S, lalu kita lihat kontrol R, dia akan berubah menjadi warna aqua. Seperti itu.
Itu untuk keyword. Kata kunci. Oke?
Dengan bahasa Inggris ya. Nah, habis itu hexadecimal. Hexadecimal adalah nilai yang diawal dengan tanda pagar, yang memiliki nilai 0 sampai 6, dan memiliki huruf A sampai F. Kalau tidak salah ya.
Nah, hexadecimal ini seperti apa? Hexadecimal 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. Nah, di sini misalnya kalian pilih warna apa saja. Misalnya warna biru. Di sini ada kode hexadecimal.
Yaitu diawal dengan tanda panggar. Lalu jenis nomornya. ini kodenya Oke coba dipastikan aja kita hapus kita buktikan teman-teman ini dihapus dulu ya Hai dimasukkan di sini aja nah oke terus lalu kontrol R maka warnanya berubah sesuai dengan warna warna hexadecimalnya jadi ini pertamanya yang sudah kita coba tadi warna keyword menggunakan kata kunci, yang berikutnya adalah hexadecimal kalau hitam berarti warnanya adalah 0 teman-teman 0 0 0 0 0 kalau tidak salah ya, sampai 6 kali ya betul, hitam kalau warna putih berarti F P6 kali Putih hilang tentunya Tapi ada Nah Yang berikutnya adalah RGB RGB itu adalah satuan nilai R nya adalah Red G nya adalah Green B nya adalah Blue A nya ini adalah Alpha Atau tingkat kesensitifan Jika 0 berarti Hilang Jika 1 berarti muncul Kalau 0,5 berarti di tengah-tengah Dia muncul Tapi transparan Seperti itu teman-teman Kurang lebih RGBA ini adalah Nilai Yang cukup populer Nah di call picker ini juga ada RGBA atau RGB. Nah nilai RGB bisa kita copy.
Ini bisa kita copy. Maaf ini kok tidak ke copy ya. Bentar ya. Copy.
Nah, pagar hilangkan. RGB. Begini pun sama aja, teman-teman. A ini sebenarnya tambahan untuk tingkat kesensitifan. Control S, lalu lihat.
Hasilnya warnanya akan tetap sama. Jika kita bedakan warna yang misalnya warna seperti ini. Kita copy. kita ubah atau S, lalu kita lihat hasilnya akan berubah, jika kita tambahkan A atau alpha, tingkat ke sensitifannya jadi 0,5 misalnya, berarti dia melayang atau di transparan, maksud saya A, jadi transparan ya teman-teman jangan lupa ya ditambahkan juga A nya di depan artinya red, green, blue, alpha dan ditambahkan juga nilainya berarti nah kalau tidak menggunakan ini tinggal dihapus aja teman-teman habis itu A ya SLA artinya nih who saturation like like hanya Alfa nilai baru teman-teman di CSS Oke coba-coba aja teman-teman itu untuk value ya berarti kita sudah kenal yang pertama adalah selektor Kita harus meseleksi dulu atau kita harus memilih dulu apa yang mau kita style Habis itu property Style apa yang mau kita lakukan terhadap selektornya Lalu value-nya adalah nilai yang bersangkutan oleh property Oke teman-teman, seperti itu Berikutnya Ini bisa kita hapus Kalau 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 3 cara teman-teman. Cara pertama adalah kita menggunakan, sebentar, yang namanya... Inline CSS Cara kedua, Internal CSS Cara ketiga adalah External CSS Inline CSS Cara bagaimana kita menuliskan kode CSS di dalam tag HTML.
Jadi kita langsung menuliskan kode CSS di dalam tag HTML. Oke, kalau inline CSS tidak memperdulikan yang namanya selektor. Jika tadi sebelumnya kita sudah membuat kode CSS di dalam tag head, kita harus menuliskan selektornya terlebih dahulu untuk memilih.
memilih Nah kalau di inline selektornya itu adalah kita langsung memilih saja teks apa yang mau kita style karena namanya inline kita menulis kode CSS langsung di kode HTML nya 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 seperti ini ya misalnya saya memiliki 2h1 dengan nama yang beda misalnya andy wijaksono kita refresh dulu, nama seperti ini ya misalnya saya mau men-style nama andy wijaksono saja nah bagaimana caranya? nah kalau di inline css kita langsung aja ke tag yang mau kita hiasi misalnya ke andy wijaksono ya berarti kita masuk ke tag nya lalu masukkan tambahkan atribut yang namanya style Nah dengan atribut style ini kita sudah siap menuliskan kode CSS di dalam TKTML. Ini sama aja selektor ya.
Habis itu kita langsung masukin aja property dan value. Nah, property tadi apa? Property-nya tadi adalah color.
Untuk merubah warna. Lalu, value-nya apa? Value-nya adalah warnanya sendiri.
Maaf, red. Langsung seperti ini aja, teman-teman. Ctrl-S.
Lalu, lihat hasilnya. Andi Bijaksono ini akan menjadi warna merah. Oke, keren ya. Nah, itu untuk inline CSS.
Ini saya hapus. Cara kedua adalah menggunakan internal CSS. Yang kalian masukkan tadi, yang sudah kita coba tadi sebenarnya, itu adalah internal CSS, teman-teman. Jadi menuliskan kode CSS di dalam tag head. Jadi dia memisahkan antara kode HTML dan kode CSS.
Agar tidak tercampur aduk antara kode HTML dan CSS. Oke, lalu yang pertama yang harus kita lakukan adalah masuk ke dalam tag head sebagai penampung informasi. Lalu buka yang namanya text style, artinya kita membuka. kode program CSS agar bisa ditulis di dalam TKTML ini ini menggunakan internal ya, sesuai dengan namanya internal berarti di dalam oke, nah disini sama yang kayak tadi kalau di internal dia membutuhkan selektor berarti kita harus memilih dulu nih oke, harus memilih dulu kalau mau H1 Hai hak satu berarti hasil ya saya mau milih warna andy wijaxon wajah nih satu kolornya seperti biasa tadi dan red kontrol es lalu hasilnya loh kau dua Kenapa Nah karena di dalam selektor CSS Hai nih sifatnya universal jadi semua teks H1 warnai menjadi warna merah nah berarti H1 pertama dan H1 kedua otomatis akan diwarnai menjadi merah karena sifatnya universal oke Nah disitulah fungsi dari kelas dan ID.
Yang sudah saya singgung sebelumnya di pemasangan HTML. Jadi kelas dan ID itu sifatnya untuk identitas. Misalnya saya tambahkan ID untuk Andi Wijaksono aja misalnya sama ini.
Andi, nah berarti sekarang saya sudah memiliki nama yang unik nih, khusus untuk si Andi aja, id Andi untuk mengaksesi Andi ini dengan atribut id Andi, dia tidak menggunakan H1 lagi jadi kita sekarang menyeleknya atau selektor kita sekarang adalah menggunakan id dengan namanya Andi, nah untuk menyelek id yaitu harus menggunakan tanda pagar lalu Dilanjutkan dengan nama ID-nya. Berarti Andi. Berbeda ya dengan nama tag. Kalau dengan nama tag kita cukup masukkan namanya aja.
Tanpa kurung buka dan kurung tutup. Itu udah bawaan dari si CSS-nya. Nah kalau untuk ID.
Kita menggunakan tanda pagar. Lalu dilanjutkan dengan nama ID-nya. Seperti biasa kita buka tutup kurung kurawal. Lalu di belah dua seperti ini teman-teman. Jangan lupa.
Lalu tambahkan. Misalnya warnanya mau jadi biru ya. Color blue.
Nah sekarang Si Andi menjadi warna biru Dan si Aden menjadi warna merah Kenapa? Karena si Aden sudah Masuk ke dalam universal Tag Jadi Misalnya saya menggunakan tag A1 sebanyak-banyaknya Otomatis A1 ini akan menjadi warna merah semua Kecuali si Andi Karena Andi sudah memiliki nama yang unik Dan sudah di set juga di atas Kalau si Andi belum di set Misalnya saya hapus otomatis Nanti si Adi akan mengikuti dari bawaannya. Jadi akan menurun.
Seperti itu ya. Walaupun dia sudah memiliki ID, tapi ID tidak dipakai. Sama saja bohong.
Oke teman-teman, itu cara menyeleknya untuk ID. Itu untuk internal ya, sekalian kita belajar untuk menyelek ID. Nah, untuk eksternal sendiri sesuai dengan namanya, berarti di keluar, artinya kita benar-benar memisahkan antara file HTML dan file HTML. CSS, kalau sebelumnya di internal kita hanya memisahkan kode HTML dan kode CSS walaupun sejati kita tetap ada di dalam halaman HTML tetap tercampur aduk, tapi di external CSS ini kita lebih sendiri-sendiri jadi untuk file HTML disini, file CSS disini, jadi lebih rapih teman-teman, seperti itu sekarang ini kita hapus semua Kita hapus. Lalu kita buat file baru.
Hai silahkan klik new file berikan nama style titik atau dot CSS Nah sekarang kita sudah berhasil membuat file CSS nah coba dibuktikan sekai tadi misalnya saya mau menyelek si Andi nya aja berarti Hai ID Andi Saya mau ubah warnanya menjadi hijau Misalnya sekarang Green Ctrl S Lalu kita Ctrl R Waduh kenapa tidak berubah Kita lihat Ini namanya sudah benar Andi ID nya pun Andi Apa yang salah? Yang salah adalah HTML tidak mengenali file CSS Oke Yang harus pertama kita kenali adalah file-file yang memiliki hubungan kepada halaman HTML kita ini. Nah, berhubung si style CSS ini belum memiliki hubungan atau belum kenal dengan HTML, maka kita buat hubungan dulu kita kenalin dulu nih HTML ke CSS CSS ini si HTML dan HTML inilah CSS nanti kita saling memiliki peran kalau CSS ini untuk menghiasi kita jadi sebat pakaian aja gitu kita cuma memiliki badan Nah kita kalau mau menghiasi badan kita harus memiliki ambil baju celana nah seperti itu nah si CSS ini ibarat pakaian kita Nah jadi kita harus memakainya dulu nih Nah cara memakainya itu kita hubungkan dulu dalam HTML cara menghubungkannya menggunakan yang namanya tag link ingat di dalam tag head karena head ini untuk penampung informasi perubahan link dan ref-ref ini 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 rel atau relatin shift atau jenis hubungan jenis hubungannya apa jenis hubungannya adalah style sheet jadi sudah kenal sekarang baju saya ini adalah style CSS oke lalu kita Ctrl S lalu lihat Ctrl R maka si Andi bijaksananya berubah oke teman-teman itu tiga cara untuk untuk memasukkan kode CSS saya hapus nah yang tadi sudah kita bahas ya selector id ini tadi cara meselek id berarti kita harus tambahkan dulu atribut id di dalam tag yang mau kita style kalau dia memiliki tag yang sama oke, misalnya disini kita tambahkan id kayak tadi aja teman-teman kalau kelas sama, seperti id kelas new misalnya, baru nah, kalau id ini kan tidak bisa dipakai di satu tempat ya, tidak bisa dipakai dua kali kita coba dulu Aduh kenapa bisa ini Sebentar Andi andi andi Kok bisa kau Hai kek ternyata bisa teman-teman itu mungkin ID 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 hai hai hai hai hai hai Berarti dia sama ya kayak kelas Kalau di style itu dia tetap bisa Berarti sama juga kayak kelas Jadi kayak gitu Kita bisa berbagi Style yang kita miliki Jadi cukup aja tambahkan Di text yang mau kita style tinggal tambahkan aja id-nya jika salah satu elemen mau memiliki style yang kita punya kayak gitu ya oke berikutnya adalah ini kita hapus dulu sisakan satu saja Hai nah DML Adin Rahmandi Nah sekarang ini saya close dulu Nah sekarang kita akan belajar mengenai font cara memformat font agar tidak kaku seperti ini teman-teman caranya bagaimana caranya kita untuk belajar bisa menggunakan internal CSS ini dihapus saja walaupun di dunia nyatanya atau di proyek-proyek di kehidupan Sehari-hari programmer sebenarnya kebanyakan eksternal teman-teman Karena itu best practice nya Kita buka aja Nah sekarang Kita select dulu H1 nya Habis itu kita masukkan font family nah disini ada beberapa jenis font font family ini artinya kita meset H1 ini jenis fontnya apa oke kita silahkan ke google font teman teman Hai nah dalam Google font jika kelihatan lihat di kanan saya ada seri-seri display handwriting monoscape ini adalah beberapa macam jenis font jika kalian belum tahu nah font pertama adalah seri artinya dia memiliki Hai siku tip di setiap sudutnya Hai Oke bisa kalian lihat dia memiliki kaki di setiap sudutnya hai hai Lihat di setiap sudutnya itu serif artinya dari bahasa latin kalau tidak salah teman-teman dan sanserif artinya tidak memiliki kaki.
Nah lihat kata-katanya sangat bersih di setiap sudutnya tidak ada kaki-kakinya itu artinya sanserif dan display itu artinya yang lebih menonjol. Lebih menonjol, memiliki ciri khas dan untuk handwriting itu adalah... teks kata, maaf font kata maaf kok font kata font tulisan tangan artinya tulisan tangan sesuai dengan namanya handwriting dan monoscape adalah font yang lebih ke pixel gitu teman-teman kayak mau hacking lebih ke situ, nah ini disesuaikan aja Oke itu beberapa jenis font teman-teman Nah misalnya saya mau gunain Arial Kalian bisa menggunakan font dari Google Font teman-teman Atau menggunakan komputer dari komputer kalian Nah kalau menggunakan Google Font Kalian harus mendownload dulu kalian harus mendownload dulu, ada dua cara sih teman-teman cara pertama sama kayak tadi gambar kita meminjam gambar orang lain nah tapi, dia harus terkoneksi internet seperti itu, sama dengan halnya font ini nah kalau cara keduanya kita harus mendownload dulu font yang mau kita inginkan tetapi kelemahannya ketika website kita di upload ke internet Kita menggunakan font yang kita tulis di sini, misalnya Arial. Seperti ini ya, Arial.
Nah, jika di komputer yang mengakses website kita itu tidak memiliki Arial, otomatis yang di... Akses bukan Arial. Tetapi defaultnya dari browser tertentu.
Kalau dari browser Google Chrome, saya tidak tahu ya defaultnya apa. Misalnya kalau dari Google Chrome itu defaultnya misalnya monoscape. Nah dia akan otomatis kalau setelah cari area itu gak ada di komputer yang diakses Maka monoscape akan menjadi fontnya Seperti itu Nah kalau menggunakan internet Kita cukup mendownloadnya ya teman-teman Misalnya mau yang mana nih Misalnya saya rift ya Misalnya saya mau yang ini aja nih Roboto Slab Klik ini aja plus Lalu klik download Nah udah ada nih langsung di klik aja Nah di sini ada banyak lagi teman-teman Roboto Bolt saya yang regular aja di install Nah berarti di komputer saya kan udah ada Roboto Slab ya Roboto Slab Roboto seperti ini Roboto Slap Oke, penulisannya salah Roboto Slap Kalau dua kata dia menggunakan tanda Seperti ini teman-teman ya Lalu kita lihat Belum juga tambahkan serif, oke oke tadi kan kita download ya cara keduanya kalau tidak bisa kita bisa langsung aja di input nih importnya, kita masuk ke import lalu masukkan, ini di copy lalu masukkan ke style css nya ke style nya lalu copy di dalam lalu masukkan font family nya seperti ini lalu lihat hasilnya dia akan berubah seperti itu teman teman untuk mereset font nya Hai dan berikutnya adalah untuk Hai membuat ukurannya yaitu dengan nama font-size font-size nya bisa menggunakan satuan pixel 25px misalnya Hai kecil terbesarkan misalnya 45px 2px seperti ini teman-teman hai hai Selanjutnya adalah color untuk warna tadi sudah kita jelaskan.
Misalnya saya mau warna pink. Pink boy. R seperti ini.
Jangan pink. Merah aja. Red.
Nah untuk warna menjadi warna merah. Oke itu untuk font teman-teman. Dan berikutnya kita bisa menambahkan background Background itu artinya apa? Background itu untuk memberikan warna belakang Background, misalnya warnanya sama, misalnya mau warna apa dengan format yang sama Misalnya black, hitam Nah, warnanya akan terlihat seperti ini teman-teman Black Hai nah ini khas satu berarti displaynya sifatnya berarti blog ya bisa kalian lihat nih ini sifat blog Nah kalau sifatnya inline Coba kita ubah ini untuk mengubah sifatnya teman-teman atau displaynya kita mau jadi inline otomatis ini dia akan sepanjang karakternya aja. Control R. Nah lihat.
Jadi tidak rakus. Jadi kalau ada konten di sampingnya, di bawahnya dia akan otomatis ke samping. Berbeda dengan display box tadi. Jadi diambil terus walaupun di sini kosong, diserakah.
Seperti itu ya. Oke selanjutnya. adalah mengubah margin padding dan border apa itu margin padding border nah jadi coba kita buat dulu kita buat dua nah seperti ini ya nah jadi margin itu adalah yang kita lihat ini adalah box ya teman teman box model atau konten ini agak banyak konten jadi konten ini memiliki jarak ke atas dan bukannya jarak di sekelilingnya atas, kiri, bawah, dan kanan nah jarak dari konten keluar disetilahkan dengan margin oke, nah coba kita buktikan misalnya marginnya adalah sekitar 15 Atau 20px Save dan lihat Kurang 50px Nah lihat teman-teman Jadi atas, kiri, bawah, kanan Semuanya sama sebesar 50px Oke Setelah itu ada yang namanya Border Border ini apa? Border 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 border dulu. Jadi border ini. yang membatasi antara margin dan padding nah coba, border membutuhkan 3 value, yaitu pertama adalah satuannya beberapa tebal, habis itu ketebalannya mau solid atau tidak ini biasanya solid teman-teman lalu warnanya mau warna apa misalnya mau warna hijau ya misalnya untuk melihat green lalu ctrl R nah dia sudah membuat border bisa lihat kalau tidak terlihat bisa ditebalkan jadi 5px teman-teman akan menjadi seperti ini oke itu adalah border Nah untuk padding jarak dari border atau jarak dari konten ke dalam Kita bisa lihat ya, disini namanya dempet banget sama buahnya.
border, kalau kita menggunakan padding misalnya, padding nya 20px lihat apa yang terjadi, dia memiliki jarak jadi dari nama alien ini dia membuat jarak sekitar 20px ke border, jadi tidak terlalu mepet Oke teman-teman, seperti itu. Lalu, coba sekarang kita buat link yang sudah kita pelajari sebelumnya. Misalnya link ke Google ya.
Google atau ke website saya deh. Google terus. Website saya. Jenis targetnya adalah blank. Ini saya hapus aja, jadi nama saya aja.
Nah, setelah itu, ini link. Klik. Ahmadicom atau begini aja website website saya aja website saya untuk es halus kontrol air hasil seperti teman-temannya nah misalnya saya ingin mereset ini saya kecilkan dulu Saya mau mengubah format link ini, format default dari si HTML, saya mau ubah, saya hiasi menggunakan si CSS.
Cara ngerisetnya bagaimana? Kita selek dulu linknya, lalu kita ubah warnanya, misalnya mau menjadi warna hitam. Hai warna hitam nah sekarang sudah menjadi warna hitam teman-teman dan garis bawah ini bisa kita hilangkan menggunakan yang namanya teks decoration maaf hai hai hai hai hai hai hai hai hai hai text-text decoration Declaration non-atnya kita hilangkan teks decoration nya apapun teks dekorasi kita hilangkan Oke udah hilang Nah sekarang kita buat dia menjadi display inline-block Lalu kita buat menjadi background warnanya misalnya biru Oke gitu kita ubah warnanya menjadi putih teman-teman agar terlihat karena gelap.
Oke habis itu fontnya kita bisa menggunakan robotoslab lagi kita copy. Oke sudah lalu kita buat padding. Sebesar 10 pixel. Oke.
Lalu jaraknya. ke kiri atau marginnya kita samakan seperti yang di atas 50px, nah seperti itu teman-teman dia sudah menjadi button, button sederhana saja oke, ini sudah kita deset menjadi button ketika saya klik, dia akan mengarahkan ke rahmah.com oke, seperti itu Oke teman-teman, mungkin sampai disitu dulu untuk CSSnya. Jadi pembahasan CSS kita sudah selesai ya. Jadi jangan lupa untuk ditonton videonya.
Oh ya udah ditonton ya Oke thank you teman-teman Jangan lupa dibagikan ke teman-teman kalian Dan ini bener-bener Kalian bayar dengan Ditonton aja deh Karena saya bener-bener menghabiskan waktu saya nih Korban kandemika kalian selesai jam 4 dari jam 12 malam keren ya oke teman-teman Thank you sudah menonton semoga bermanfaat jangan lupa like comment dan subscribe dan yang terpenting jangan lupa dibagikan dan comment mau apa lagi kalau konten-kontennya oke semangat belajarnya dan sampai jumpa assalamualaikum warahmatullahi wabarakatuh