Cara menggunakan html style tag
lebakcyber.net -Pada kesempatan kali ini kita akan mempelajari tentang bagaimana cara menggunakan style di HTML 5. Style pada HTML 5 sendiri digunakan untuk mengganti atau menambahkan element pada HTML. Show
Setiap element pada HTML memiliki style defaultnya masing-masing, seperti misalnya warna background, warna text dan lain sebagainya. Atribut style sendiri hanya bisa digunakan pada tag HTML. Untuk menggunakan style di HTML kalian harus memiliki sedikit pengetahuan mengenai properties di css seperti misalnya color, background-color, text-align dan sebagainya. Advertisements Contoh syntax dari penggunaan Style di HTML 5 adalah seperti berikut : style="property:value" Contoh Style HTML ColorPada contoh ini kita akan mencoba merubah warna teks dengan mengguna style color di HTML 5, contohnya seperti berikut ini :
Hasilnya adalah seperti pada contoh dibawah ini : Ini teks dengan warna hijauIni teks dengan warna merahContoh Style Background-ColorStyle background-color biasanya digunakan untuk merubah warna background pada HTML 5. Silahkan perhatikan contoh tag HTML dengan menggunakan property css background-color dibawah ini : Advertisements
Nanti hasilnya akan seperti dibawah ini : Ini adalah background kuningIni adalah background merahContoh Style font-familyPenggunaan style font-family biasanya digunakan untuk mengganti font pada teks yang ada di tag HTML. Contoh penggunaannya adalah seperti dibawah ini :
Nanti hasilnya akan seperti contoh dibawah ini : contoh teks dengan font times new roman Contoh teks dengan font arial Contoh Style Text-AlignStyle text-align biasanya digunakan untuk mengatur teks agar menjadi rata kanan, rata kiri atau rata tengah. Contohnya penggunaan style Text-Align adalah seperti berikut ini :
Nanti hasilnya akan seperti dibawah ini : Teks ini berada di sebelah kanan Teks ini berada di tengah Teks ini berada di sebelah kiri Oke jadi seperti itulah bagaimana cara menggunakan style di HTML 5, semoga tutorial sederhana ini dapat membantu kalian yang baru saja mempelajari HTML 5. Jangan lupa untuk selalu berkunjung ke lebakcyber.net untuk mendapatkan tutorial mengenai HTML 5 dan juga mengenai tips dan trik komputer lainnya ya. SEO Technical Writer at Niagahoster. An aquarius girl who loves music, watching movies and of course writing.Home » Web Development & Design » Bagaimana Cara Membuat Website dengan HTML dan CSS? Bagaimana Cara Membuat Website dengan HTML dan CSS?August 8, 2022 13 min read Anda ingin belajar cara membuat website, tapi bingung harus mulai darimana? Tidak usah bingung lagi, Anda bisa memulainya dari HTML dan CSS! Karena bagi seorang web developer, HTML dan CSS adalah pondasi yang wajib dipelajari untuk mengembangkan website. Oleh karena itu, artikel kali ini akan membahas mengenai cara membuat website dengan HTML dan CSS. Yuk, langsung saja simak panduan lengkapnya! Daftar isi Cara Membuat Website dengan HTML dan CSSSebelum masuk ke cara membuat website dengan HTML dan CSS, Anda harus menyiapkan Text Editor dan Web Browser terlebih dahulu. Text editor digunakan sebagai tools untuk menulis kode, sedangkan web browser digunakan untuk mengakses website. Pada tutorial ini, kami akan menggunakan Visual Studio Code (VS Code) sebagai teks editornya dan Google Chrome sebagai browsernya. Anda bebas menggunakan tool favorit Anda. Website yang akan Anda buat kali ini adalah website portfolio sederhana menggunakan HTML dan CSS saja. Nantinya, tampilan website akan seperti ini : Menariknya, untuk membuat website tersebut, Anda hanya perlu mengikuti 4 langkah saja, yaitu :
Tertarik mencobanya? Yuk, langsung saja ikuti panduan lengkap cara membuat website dengan HTML dan CSS berikut ini! 1. Membuat Struktur Project WebPertama-tama, buatlah folder penyimpanan proyek website portfolio Anda dan bukalah folder tersebut pada VS Code. Pada contoh ini, kami menggunakan nama “Web Portfolio” Kemudian, buat folder baru dengan nama images. Folder ini merupakan tempat untuk menyimpan gambar/assets yang akan digunakan pada website. Selanjutnya, buatlah dua file baru bernama index.html dan style.css web portfolio tersebut. Index.html merupakan inti dari halaman website yang dibuat, Anda dapat menambahkan konten website pada file ini. Sedangkan file style.css merupakan file pelengkap HTML yang digunakan untuk mengubah dan mempercantik tampilan website. 2. Menambahkan Kode pada File index.htmlFile HTML berisi kode utama untuk membangun struktur website Anda. Ibarat mobil, HTML di website sama seperti rangka mobil yang membentuk dan menopang body mobil. Oleh karena itu, file ini harus dibuat terlebih dahulu. Pada dasarnya, struktur setiap halaman HTML tersusun atas 4 bagian utama, yaitu :
Baca Juga : Belajar HTML Lengkap untuk Pemula Bagaimana sudah ada gambaran? Kalau begitu, cara membuat website sederhana dengan HTML bisa dimulai dengan menambahkan kode berikut ini pada file index.html Anda : Pertama, di bagian tag head ini, Anda perlu mendeklarasikan informasi mengenai meta tag charset, title website, serta link atau path dari external sources (misal : CSS dan JavaScript) yang digunakan pada website. Nah, yang perlu Anda perhatikan pada bagian head ini adalah lokasi tempat menyimpan file CSS. Pastikan file CSS berada pada folder yang sama dengan file HTML. Jika berbeda folder, pastikan Anda memasukkan path yang sesuai pada bagian
Kedua, masuk ke tag body. Bagian pertama pada body website portfolio ini adalah tampilan awal/welcome home yang terdiri dari navigation bar, text container, dan gambar. Navigation bar atau biasa disebut navbar merupakan komponen utama navigasi website yang berupa menu, biasanya terletak pada bagian header website. Sedangkan tag class text container pada kode di bawah ini merupakan bagian dimana Anda dapat menambahkan tulisan untuk tampilan awal website ketika diakses.
Ketiga, karena ini website portfolio, Anda dapat menambahkan bagian services atau layanan. Pada bagian ini, Anda dapat menunjukkan layanan yang dapat Anda kerjakan dan skill apa saja yang Anda miliki. Layanan tersebut dapat Anda tuliskan pada tag Services Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Technical Writing Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Web Design Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Web Development Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Keempat, jika Anda sudah pernah mengerjakan atau memiliki proyek, Anda dapat menambahkan testimoni pada website portfolio. Bagian ini dapat Anda isi dengan review dan rating dari klien atas hasil kerja Anda. Jangan lupa untuk menambahkan link script fontawesome pada bagian head. Karena jika tidak, ikon bintang yang akan digunakan untuk menunjukkan rating kepuasan klien tidak akan muncul di halaman web Anda. What Our Client Says.. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Kelima, bagian footer. Sebagai penutup, kami menambahkan sosial media sebagai kontak yang bisa dihubungi. Kode HTML untuk logo sosial media dapat Anda cari pada website fontawesome. Jika Anda masih bingung, Anda dapat langsung melihat hasilnya dengan menyalin keseluruhan kode berikut ini pada text editor yang Anda gunakan : Hello, I’M NIDA SEO Technical Writer & Developer An aquarius girl who loves music, watching movies and
Services Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Technical Writing Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Web Design Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Web Development Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. What Our Client Says.. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Nah, sekarang website portfolio sederhana Anda sudah jadi. Namun, karena belum menggunakan CSS, tampilannya masih seperti ini : Hmm masih agak membingungkan dan kurang menarik ya, langsung saja tambahkan CSS-nya, yuk! Baca Juga : Membuat Aplikasi Web dengan Flutter Sekarang, saatnya cara membuat website dengan CSS agar tampilannya lebih rapi dan menarik. Seperti yang sudah dibahas sebelumnya, tanpa CSS, tampilan website hanya sebatas text saja. Jika kembali pada analogi mobil sebelumnya, CSS di website seperti cat mobil yang dapat diganti dan disesuaikan untuk membuat tampilan mobil terlihat lebih keren. Meskipun rangka atau strukturnya sama, Anda dapat mengubah style tampilan sesuai selera Anda. Struktur penulisan CSS terdiri dari 3 bagian : Anda dapat coba menggunakan kode di bawah ini terlebih dulu sebelum mengubahnya menggunakan style Anda sendiri : Jadi, dari kode tersebut, manakah yang dimaksud dengan selektor, blok deklarasi, properti dan nilai? Agar lebih jelas, mari perhatikan contoh berikut : Pada kode di atas, Hello, I’M NIDA SEO Technical Writer & Developer An aquarius girl who loves music, watching movies and
Hello, I’M NIDA SEO Technical Writer & Developer An aquarius girl who loves music, watching movies and
Selektor Hello, I’M NIDA SEO Technical Writer & Developer An aquarius girl who loves music, watching movies and
Hello, I’M NIDA SEO Technical Writer & Developer An aquarius girl who loves music, watching movies and
Blok deklarasi diawali dengan tanda kurung { dan diakhiri dengan tanda kurung }. Kode Hello, I’M NIDA SEO Technical Writer & Developer An aquarius girl who loves music, watching movies and
Hello, I’M NIDA SEO Technical Writer & Developer An aquarius girl who loves music, watching movies and
Hello, I’M NIDA SEO Technical Writer & Developer An aquarius girl who loves music, watching movies and
Hello, I’M NIDA SEO Technical Writer & Developer An aquarius girl who loves music, watching movies and
Hello, I’M NIDA SEO Technical Writer & Developer An aquarius girl who loves music, watching movies and
Baca Juga : Kode Warna HTML Untuk memahami kode CSS lebih dalam, Anda dapat mencoba untuk mengubah kode di atas dan lihat bagaimana pengaruhnya terhadap tampilan website portfolio Anda. Cara membuat website dengan HTML dan CSS yang efektif adalah dengan membuka teks editor dan browser bersamaan. Kenapa begitu? Dengan membukanya secara bersamaan, setiap perubahan yang Anda lakukan pada file HTML maupun CSS dapat langsung terlihat pada browser. Sehingga proses pengembangan website akan berlangsung lebih cepat dan mudah dimodifikasi. Untuk menjalankan website, Anda hanya perlu membuka file index.html pada browser kesayangan Anda. Jika Anda melakukan perubahan pada kode, jangan lupa refresh halaman web untuk melihat perubahan. Nah, sekarang mari coba jalankan website portfolio yang sudah Anda buat sebelumnya! Inilah contoh tampilan awal website dengan kode di atas. Wajar jika tampilan website Anda agak berbeda, karena gambar/assets yang Anda gunakan juga mungkin berbeda. Jadi sesuaikan saja, ya? Oh ya, jangan lupa cek kalau ada gambar yang tidak muncul. Pastikan path tempat menyimpan gambar dan tipe file image yang digunakan sudah benar. Baca Juga : 10+ Website Penyedia Gambar Gratis Itulah cara membuat website dengan HTML dan CSS yang bisa Anda coba. Sangat mudah, kan? Hanya dengan menggunakan file HTML dan CSS saja, Anda sekarang bisa membuat website portfolio Anda sendiri. Sayangnya, website tersebut hanya bisa diakses offline sebab semua asetnya tersimpan di komputer Anda saja. Agar bisa dilihat banyak orang, Anda perlu mengonline-kan dulu, ya! Caranya, Anda memerlukan layanan web hosting untuk menyimpan aset Anda agar bisa diakses online. Namun, jangan sembarang memilih layanan hosting web, ya! Layanan Unlimited Web Hosting Niagahoster bisa jadi pilihan yang tepat. Sebab, Niagahoster memberikan jaminan keamanan untuk website Anda dengan berbagai fitur keamanan seperti Imunify360 yang mencegah serangan malware. Selain itu dengan uptime hingga 99,999%, website Anda bisa selalu online selama 24 jam penuh. Dengan begitu, Anda bisa mengonlinekan website tanpa rasa khawatir dengan downtime. Menariknya, dengan harga mulai dari Rp27rb/bulan saja, Anda bisa mendapatkan domain gratis! Tidak hanya itu, Niagahoster juga menawarkan jasa pembuatan website terbaik dengan berbagai template menarik. Yuk, langsung saja pilih layanan hosting Niagahoster untuk website Anda! Saya Ingin Memilih Web Hosting Murah Indonesia Demikianlah panduan cara membuat website dengan HTML dan CSS, semoga artikel ini bermanfaat bagi Anda ya 🙂 Share Nida Regita F Follow SEO Technical Writer at Niagahoster. An aquarius girl who loves music, watching movies and of course writing. Dapatkan beragam artikel tutorial, insight dan tips menarik seputar dunia online langsung melalui email Anda. Subscribe sekarang dan raih kesuksesan bersama kami! |