HTML & CSS untuk pemula

Siapa pun yang ingin membuat situs web, pada suatu saat pasti akan berhubungan dengan HTML. Karena itu, kita akan bersama-sama menaklukkan dunia HTML yang indah dalam latihan video mendatang. Kalian akan melihat langkah demi langkah apa yang dimiliki bahasa ini dan bagaimana cara membuat situs web dengan menggunakan gaya desain. Namun, pada awalnya ada satu pertanyaan: Apa sebenarnya HTML dan gaya desain tersebut? Di akhir dari latihan video ini, kalian juga akan mengetahui perangkat lunak apa yang diperlukan untuk membuat dan menguji situs web.

Berbeda dengan bahasa pemrograman seperti Java, Anda dapat dengan cepat mencapai hasil awal dalam HTML tanpa perlu pelatihan khusus. Yang Anda butuhkan untuk memulai hanyalah editor dan browser. Dalam video pelatihan ini, Anda akan membuat dokumen HTML pertama Anda dan langsung mendapatkan output di browser. Selain itu, Anda akan mengetahui bagaimana dokumen HTML, atau dengan kata lain halaman web, dibangun serta struktur dasar apa yang mereka ikuti.

Kalian sudah mengenal hubungan antara elemen, tag, dan atribut dari bagian pertama seri ini. Sekarang, mari kita bahas bagaimana cara praktis menggunakan hal-hal ini dalam dokumen HTML. Sebagai penutup dari pelatihan video ini, kalian akan belajar cara memeriksa kode HTML kalian untuk kebenaran sintaksis.

Situs web Anda pasti tidak hanya terdiri dari gambar, tetapi juga dari teks. Dan teks harus diatur dengan baik untuk kemudahan dibaca. Untuk itu, HTML memiliki beragam elemen yang tersedia. Dalam pelatihan video ini, elemen-elemen struktur utama untuk teks akan dipresentasikan. Selain itu, Anda akan mengetahui cara menyembunyikan karakter-karakter khusus HTML dan bagaimana cara menampilkan daftar program.

Untuk membaca teks dengan baik, diperlukan format yang baik. Dan ini melampaui elemen struktur semata seperti judul dan paragraf teks. Dalam HTML, misalnya, kita dapat menandai kutipan dan menampilkan bagian-bagian tertentu dalam huruf tebal atau miring. Pelatihan video ini akan memberikan alat yang diperlukan untuk itu.

Unsur yang akan selalu Anda temui dalam HTML adalah daftar. Ini tidak hanya berlaku untuk daftar tugas, data kontak, tetapi juga untuk definisi menu. Jadi, daftar memainkan peran sentral dalam HTML. Cukup penting untuk memperhatikan mereka dengan cermat. Dalam pelatihan video ini, Anda akan belajar semua jenis daftar yang ditawarkan HTML. Ini termasuk daftar poin, daftar bernomor, daftar definisi, dan daftar menu. Selain itu, Anda akan mendapatkan petunjuk tentang cara menyesuaikan tampilan daftar jika diperlukan.

Tabel tetap memainkan peran penting di halaman web. Namun, ini hanya berlaku untuk penyajian data. Ketika belum ada CSS atau CSS belum didukung sepenuhnya oleh peramban, tabel juga digunakan untuk tujuan lain: menyusun tata letak. Di dalam sel-sel tabel, elemen-elemen halaman diletakkan. Tabel layout monster yang dihasilkan dari itu sudah menjadi masa lalu, berkat CSS. Saat ini, tabel dalam desain web hanya digunakan untuk tujuan yang seharusnya: menampilkan data secara jelas.

Tabel yang terlihat serasi tidak harus terdiri dari jumlah sel yang sama dalam satu baris tabel. Dalam pelatihan video ini, akan ditunjukkan bagaimana Anda dapat menghubungkan sel-sel tabel. Pada bagian kedua, Anda akan belajar tentang cara memberi label pada tabel. Aspek ini penting, karena dengan cara ini, pengunjung dapat langsung melihat data apa yang sebenarnya. Pelatihan video akan diakhiri dengan tinjauan detail tentang desain tabel dalam HTML. Karena terutama di sektor ini, telah terjadi banyak perubahan dibandingkan dengan versi HTML sebelumnya.

Hampir setiap situs web tidak lepas dari grafik. Tak heran bahwa hal ini menjadi penting dalam seri ini. Di video pelatihan ini dan yang akan datang, akan dijelaskan cara menyertakan grafik ke dalam situs web Anda. Namun, pada awalnya, ada aspek lain yang lebih penting: format gambar mana yang cocok untuk digunakan secara online? Bagian kedua akan membahas bagaimana cara merujuk path gambar.

Bagaimana cara referensi gambar secara mendasar telah ditunjukkan dalam bagian sebelumnya. Namun, batas gambar belum tercapai dengan demikian. Sebenarnya, gambar dapat lebih jelas dijelaskan melalui atribut yang sesuai. Itulah yang dibahas di awal video ini. Bagian kedua menjelaskan bagaimana subtitle gambar dapat diimplementasikan dengan menggunakan sintaks HTML5.

Garam dalam sup internet adalah kemampuan untuk menghubungkan konten satu sama lain melalui hyperlink. Tanpa hyperlink ini, internet dalam bentuknya saat ini tidak akan bisa terbayangkan. Berbagai variasi definisi hyperlink yang ditawarkan HTML dapat kamu pelajari dalam pelatihan video ini dan video berikutnya.

HTML memberikan jauh lebih banyak kemungkinan tentang hyperlink daripada yang ditunjukkan dalam video pelatihan sebelumnya. Misalnya, Anda dapat menentukan referensi email dan menawarkan file untuk diunduh. Anda akan belajar variasi hyperlink ini dan lainnya dalam video pelatihan ini.

Untuk memulainya: Terutama dalam HTML5, formulir telah mengalami kemajuan besar. Berkat banyak jenis field baru, formulir menarik dapat dibuat. Anda pasti akan belajar tentang kemungkinan baru ini. Namun, di video pelatihan ini, kita akan mulai dengan dasar-dasar yang diperlukan untuk mendefinisikan formulir. Pada awalnya, kita akan membahas membuat kolom input satu baris. Anda akan melihat bagaimana cara mendefinisikannya, cara mengisi nilai default, dan cara menonaktifkannya. Anda juga akan belajar tentang definisi kolom sandi. Ini adalah jenis field yang dapat berguna dari waktu ke waktu.

Dalam video ini, Anda akan belajar mengenai jenis bidang lain yang dapat Anda tambahkan ke formulir Anda. Secara khusus, ini membahas tentang bidang pemilihan, tombol radio, dan kotak centang. Semua ini adalah elemen penting yang selalu diperlukan dalam formulir. Alasan cukup bagus untuk melihat dengan lebih cermat elemen-elemen ini dan yang lainnya.

Dengan HTML5, banyak hal telah berubah terutama dalam hal formulir. Alasan cukup untuk melihat dengan cermat berbagai fitur formulir baru yang kini dapat digunakan. Karena inilah akhir dari kotak masukan biasa. Akhirnya, slider, bidang tanggal, dll. juga dapat ditentukan - dan itu semua tanpa menggunakan JavaScript.

Pelajaran tentang formulir HTML5 dalam video sebelumnya telah membuka jalan. Namun, ini belum mencapai batas maksimalnya. Sebenarnya, HTML5 masih menyediakan banyak fitur menarik di bidang ini.

Di HTML5, selain dari tipe-tipe bidang yang telah diperkenalkan, ada juga banyak aspek menarik lainnya. Misalnya, sekarang Anda dapat dengan sedikit usaha mengimplementasikan fungsi autocompletion untuk bidang formulir dengan cepat, mirip dengan Google. Hal-hal seperti ini dan lainnya akan ditunjukkan dalam pelatihan video ini.

Mereka yang mempelajari HTML5 tidak akan bisa menghindari topik Semantik. Anda akan belajar unsur-unsur penting yang dibawa oleh HTML5 dalam pelatihan video ini dan video berikutnya, yang dapat membantu Anda struktur dokumen dengan baik. Sebenarnya, struktur logis ini sangat penting jika Anda ingin membuat situs web Anda tahan lama.

HTML5 membawa banyak elemen struktur baru. Elemen-elemen dasar ini sudah ditunjukkan dalam video pelatihan sebelumnya. Sekarang saatnya untuk menggunakan elemen-elemen ini secara praktis. Karena elemen-elemen ini yang bertanggung jawab untuk struktur dokumen yang semantik. Dalam video pelatihan ini, Anda akan belajar tentang dua elemen yaitu article dan section. Kedua elemen ini membentuk struktur dasar dari dokumen HTML. Pada akhir video ini, kita juga akan melihat perbedaan antara div, article, dan section.

Pada HTML5, dokumen tidak hanya dapat dibagi menjadi artikel dan bagian-bagian. Sebenarnya, terdapat banyak elemen tambahan seperti header, footer & Co. untuk struktur semantik. Semua ini layak untuk diteliti lebih lanjut.

Dalam video pelatihan terakhir seri Elemen Semantik ini, kalian akan mempelajari elemen-elemen strukturasi lebih lanjut. Sebenarnya, HTML5 juga menyediakan elemen-elemen untuk area navigasi, catatan kaki, dan ringkasan.

Pada versi HTML sebelumnya, proses menambahkan konten multimedia merupakan sebuah penderitaan. Dengan kombinasi antara elemen object dan embed, mencoba untuk membawa video dan suara ke situs web. Apakah video yang disisipkan tersebut benar-benar dapat diputar, menjadi pertanyaan. Juga di bidang ini, HTML5 telah melakukan perubahan yang signifikan.

Bagaimana cara menyisipkan video, telah Anda lihat. Sekarang tentu saja video bukanlah satu-satunya hal yang dapat ditampilkan kepada pengunjung situs web Anda. Dalam pelatihan video ini, dijelaskan pilihan-pilihan yang dimiliki HTML5 untuk menyisipkan file audio dan film flash. Karena kadang-kadang Anda juga perlu menampilkan hal-hal ini di situs Anda.

Frame tidak lagi ada di HTML5. Namun, namanya yang mirip, yakni iFrame, berhasil bertahan dan hadir di era HTML yang baru. Sementara frame klasik membagi halaman ke dalam area yang independen, iFrame memungkinkan sumber daya apa pun disematkan ke dalam halaman web.

HTML digunakan untuk struktur konten. Ketika sampai pada desain halaman, Cascading Stylesheets (CSS) yang digunakan. Karena hanya kombinasi CSS dan HTMLlah yang memungkinkan untuk membuat halaman web yang menarik dari struktur HTML biasa. Alasan yang cukup bagi kita untuk melihat lebih dekat pada CSS.

Sebuah konsep yang selalu akan Anda temui dalam kaitannya dengan CSS adalah "selektor". Melalui selektor ini, Anda akhirnya menentukan elemen-elemen yang akan diformat dengan CSS. Dalam pelatihan video ini, Anda akan mengenal selektor pertama. Anda akan diperkenalkan dengan selektor elemen, ID, dan universal. Dengan selektor tersebut, saat Anda mendesain halaman web Anda dengan CSS, Anda akan berurusan dengan hal itu setiap hari.

Beberapa selektor telah diperkenalkan dalam video pelatihan sebelumnya. Namun tentu saja, CSS memiliki berbagai selektor lain yang ditawarkan.

Dalam pelatihan video pemilih terakhir ini, saya akan memperkenalkan kepada Anda sebuah bentuk pemilih yang sangat khusus. Mereka adalah yang disebut sebagai Pseudokelas dan Pseudo elemen. Itu adalah pemilih yang tidak terkait dengan elemen HTML tertentu, tetapi dihasilkan oleh perangkat output.

Pada video pelatihan ini dan pelatihan selanjutnya, saya akan memperkenalkan kepada Anda sifat-sifat CSS yang paling penting. Di sini bukan tentang mempersembahkan referensi CSS kepada Anda. Lebih dari itu, Anda akan mendapatkan perasaan apa yang mungkin dilakukan dengan CSS. Kita mulai dengan desain huruf. Hal-hal yang berkaitan langsung dengan font akan diperkenalkan dalam video pelatihan ini. Perhatikan bahwa masih ada sifat-sifat lain yang berkaitan dengan desain huruf yang akan ditunjukkan dalam video pelatihan berikutnya.

Mengenai sifat CSS yang diperkenalkan dalam pelatihan video ini, teks dan karakter dapat disesuaikan secara visual. Dengan demikian, misalnya, jarak antara setiap huruf dapat diubah dan teks dapat disusun secara tertentu. Jadi, sifat-sifat ini juga akan membantu Anda dalam menyajikan teks secara menarik.

Tentu saja, dalam CSS, definisi warna dan latar belakang grafis juga tidak boleh absen. Properti-properti yang sesuai akan diperkenalkan dalam training video ini. Sebenarnya, CSS juga memiliki banyak pilihan di bidang ini. Tidak hanya mendefinisikan warna dan gambar secara sederhana, namun juga memungkinkan penggunaan gambar latar belakang yang berulang.

Terutama ketika merancang tata letak halaman web, Anda akan berurusan dengan definisi margin luar dan jarak. Pada pelatihan video terakhir dalam seri ini, proyek contoh yang komprehensif akan diimplementasikan, di mana penggunaan properti CSS dan yang lainnya akan ditunjukkan secara praktis.

CSS menyediakan sejumlah properti menarik untuk paragraf dan blok teks yang tidak ingin saya simpan untuk diri saya sendiri. Misalnya, Anda dapat membuat paragraf teks rata kiri dan rata kanan.

Ketika membicarakan bingkai, kebanyakan orang pasti pertama kali memikirkan tabel. Dan memang bingkai berperan penting dalam hubungannya dengan tabel. Namun, menggunakan CSS, kita juga dapat memberikan bingkai pada elemen lain. Dan bagaimana bingkai tersebut akhirnya terlihat, juga dapat ditentukan secara eksplisit melalui definisi CSS.

Bagaimana cara mendefinisikan daftar, mungkin kalian sudah tahu. Ini telah diperlihatkan secara komprehensif dalam rangkaian ini. Namun, secara alami, daftar tidak selalu terlihat menarik. Untuk membuatnya juga menarik secara visual, terdapat properti CSS yang sesuai. Kalian akan mengetahui properti-propertri tersebut dan cara menggunakannya dalam video pelatihan ini. Pada bagian kedua, akan dibahas mengenai counter, yang memungkinkan penerapan penomoran yang lebih kompleks.

Ketika berbicara tentang merancang tata letak halaman web, model kotak yang disebut akan menjadi teman setia kalian. Karena melalui ini, pada akhirnya menentukan cara dan tempat elemen ditempatkan.

Untuk dapat memposisikan elemen di dalam halaman web ke lokasi yang diinginkan, Anda harus menggunakan properti CSS tertentu.

Pada pelatihan video sebelumnya, konsep Floating sudah disinggung secara singkat. Namun, topik ini begitu kompleks sehingga kita perlu melihatnya secara detail sekali lagi. Karena sebenarnya ini adalah konsep penting dalam CSS. Hanya jika kita memahami topik ini, kita dapat benar-benar membuat halaman web.

Dalam pelatihan video sebelumnya, dasar-dasar bekerja dengan HTML dan CSS telah dijelaskan. Sekarang tentu saja kita juga harus mulai menuai hasilnya. Pada pelatihan video selanjutnya, sebuah situs web contoh akan dibangun langkah demi langkah. Namun dalam pelatihan video ini, Anda akan terlebih dahulu belajar berbagai varian tata letak. Karena pemilihan bentuk tata letak yang sesuai harus selalu menjadi pertimbangan awal dalam perancangan sebuah situs web.

Saya akan berasumsi dengan tata letak kolom yang khas dalam proyek praktik kita. Namun sebelum saya mempresentasikan proyek ini secara live dan berwarna, saya ingin menunjukkan secara spesifik bagaimana Anda sendiri dapat menerapkan tata letak kolom. Kita akan memfokuskan pada tata letak dua dan tiga kolom di sini, karena ini masih menjadi dasar bagi sebagian besar situs web.

Pada video pelatihan berikutnya, saya akan menunjukkan kepada Anda bagaimana membuat tata letak halaman web langkah demi langkah. Ada berbagai pendekatan yang berbeda untuk ini. Seringkali tata letak dibuat di Photoshop. Setelah itu, elemen-elemen halaman dipotong dan kemudian digabungkan kembali menggunakan CSS dan HTML menjadi sebuah situs web. Sama seperti yang dilakukan di sini. Namun, saya menggunakan GIMP yang tersedia secara gratis sebagai gantinya. Langkah-langkah yang dijelaskan ini juga dapat diikuti di Photoshop.

Langkah pertama menuju tata letak sendiri telah dilakukan dalam pelatihan video sebelumnya. Tentu saja masih banyak elemen yang kurang. Elemen-elemen tersebut akan ditambahkan dalam pelatihan video ini. Setelah tata letaknya tersusun, proses pemotongan (slicing) akan dilanjutkan. Karena pada akhirnya, langkah ini merupakan cara agar desain yang telah dibuat dapat diimplementasikan dengan HTML dan CSS secara praktis.

Kalian telah membuat tata letaknya. Sekarang saatnya untuk menerapkannya secara praktis. Dalam pelatihan video ini, kita akan bersama-sama membuat struktur dasar HTML dari situs web tersebut.

Struktur dasar situs telah ada, namun terlihat cukup sederhana. Dalam video pelatihan ini, konten situs akan diperluas. Fokusnya terutama ada pada menu yang terletak di bagian atas halaman. Diikuti oleh menu kanan dan bawah.

Salah satu aspek penting untuk sebuah situs web yang menarik secara visual tentu saja adalah tata letak tulisannya. Selama seri ini, Anda sudah mengenal berbagai kemungkinan yang ditawarkan oleh HTML dan CSS dalam hal desain tulisan. Dalam video pelatihan ini, kita akan menggunakan hal tersebut untuk mempercantik halaman. Kita juga tidak hanya akan fokus pada varian klasik. Kata kunci untuk penggunaan font "eksoitk" adalah @font-face.

Biasanya, kita seharusnya memberikan pengunjung kesempatan untuk menghubungi. Dalam kasus yang paling sederhana, cukup mencantumkan nomor telepon dan/atau alamat email. Ini adalah cara yang dapat dilakukan, tetapi tidak terlalu nyaman untuk pengunjung. Oleh karena itu, dalam pelatihan video ini, kita akan membuat formulir di mana pengunjung dapat dengan mudah menghubungi kita. Dan tentu saja, kita akan memanfaatkan kemungkinan yang ditawarkan oleh HTML5 dan CSS3.

Struktur dasar dan desain dasar formulir telah ditetapkan dan selesai. Dan sebenarnya, formulir ini sudah cukup menarik saat ini. Namun, berkat CSS3, masih banyak lagi yang bisa dilakukan untuk mempercantik tampilan formulir. Oleh karena itu, formulir ini akan didesain lebih lanjut dalam video tutorial ini.

Pada saat ini, tentu saja kalian telah menghabiskan banyak waktu dan kerja keras dalam pengembangan situs web kalian. Mulai dari konsepsi hingga desain tata letak dan pengimplementasian dalam HTML dan CSS. Cukuplah alasan untuk akhirnya memperkenalkan situs web kalian kepada dunia. Itulah yang akan dibahas dalam video pelatihan ini. Saya akan menunjukkan kepada kalian cara untuk mempublikasikan situs web secara online. Pertama-tama, kalian akan belajar cara mendapatkan penyedia layanan yang tepat dan paket ruang web yang sesuai. Kemudian, data akan diunggah ke server dengan menggunakan FileZilla yang populer. Dan pada akhirnya, situs web kalian benar-benar akan online.

Pada pelatihan video ini, saya ingin memberikan wawasan kecil tentang lingkungan pengembangan yang tepat untuk membuat halaman web. Mereka yang telah menulis halaman web lengkap atau halaman tunggal yang lebih kecil biasanya sudah memiliki editor ini dan dapat melewati video ini.

Dimostrasi:
DreamWeaver
Panic Coda
Panic Transmit: http://panic.com/transmit/
Filezilla: http://filezilla.de/

Boilerplate HTML5 adalah template yang kuat untuk situs web HTML5 dan CSS3; itu membuat HTML5 sekompatibel mungkin dengan CrossBrowser dan berisi beberapa template kode yang sangat baik dalam JavaScript, CSS3, dan tentu saja HTML.

Di video pelatihan ini, saya ingin memperkenalkan kepada Anda fitur-fitur tersebut. Untuk memulai di bidang HTML5 dan CSS3, saat ini tidak ada template yang lebih baik.

Pada video pelatihan ini, saya ingin memperkenalkan kepada Anda beberapa alat yang sangat membantu untuk mengembangkan HTML5 dan CSS3.

Termasuk di antaranya:
html5css3box.com
kuler.adobe.com (sekarang https://color.adobe.com/de/create/color-wheel)
css3generator.com
typetester.org
google.com/webfonts
cufon.shoqolate.com
videojs.com