Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Kids
Webdesign

Desain Web Untuk Anak-Anak: Struktur HTML

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Web Design for Kids.
Web Design for Kids: Getting Ready to Build a Website
Web Design for Kids: HTML Content

Indonesian (Bahasa Indonesia) translation by Yosef Andreas (you can also view the original English article)

Selamat datang di pelajaran ketiga desain Web kami untuk anak-anak seri, struktur HTML!

Kita akan belajar bagaimana menulis struktur situs kami dengan HTML. Struktur ini akan mendapatkan kita siap untuk konten situs, yang kami akan menambahkan di pelajaran berikutnya.

Jika kita membandingkan proses desain web pada sebuah bangunan (seperti bangunan Kota Tuts+) maka HTML akan menjadi sesuatu seperti fondasi dan kerangka bangunan; itu merupakan dasar tempat semuanya dibangun.

Penting! File yang akan buat di dalam pelajaran ini dapat diunduh di sini.

Apa Tepatnya HTML Itu?

Kami telah sering menyebutkan HTML di dalam seri ini, namun belum membicarakan tentang apa itu tepatnya, selain sebuah "bahasa rahasia super keren". Web selalu tentang bahasa dan komunikasi, dan HTML adalah bagian penting dari semua ini.

HyperText Markup Language, HTML, adalah sebuah bahasa yang menandai konten situs agar browser dengan memahami dan menampilkannya. Memberikan struktur file teks biasa ol ' yang browser dinyatakan tidak akan mampu membaca.

Sebagai contoh, kita tidak dapat mengetikkan sebuah paragraf di dalam editor teks dan mengharapkan browser mengerti bahwa itu paragraf. Teks paragraf harus berada di dalam penanda HTML yang benar, sebuah paragraf, atau elemen <p> (tiap teks lucu seperti <p> di sini hanya menunjukkan bahwa teks ini juga merupakan kode).

Elements

HTML dibangun dari elements yang memiliki makna penting, seperti elemen paragraf yang disebutkan di atas. Tiap elemen memiliki sebuah tag pembuka (awal) dan penutup (akhir), dengan konten situs dituliskan di antaranya.

Tag pembuka dan penutup untuk tiap elemen ini ditulis di dalam sudut siku (seperti ini: < >), walaupun tag penutup juga memiliki tanda garis miring (seperti ini: < / >).

Merencanakan Sebuah Struktur

Di dalam kursus sebelumnya kita menggambar desain website dan sekarang waktunya untuk mempersiapkan struktur, atau kerangka, desain ini.

Kita akan mulai dengan menambahkan beberapa catatan umum pada pratinjau situs kita untuk mendapatkan rasa yang lebih baik tentang bagaimana memetakan ini.

Di dalam body pada file html kita akan memiliki beberapa elemen primer: header, bagian main,  dan footer.

Mempersiapkan Dokumen

Kita juga membicarakan tentang bagaimana mengatur file situs di dalam pelajaran sebelumnya, sehingga sekarang kita akan menempatkan pengetahuan ini ke dalam tindakan!

  • Pertama, buat sebuah folder pada komputer bernama "tutsfolder".
  • Sekarang waktunya untuk membuka editor teks yang siap dan menunggu sesuatu yang menakjubkan terjadi.
  • Berikutnya, buat sebuah dokumen baru dengan editor ini (biasanya dengan memilih File > New File) dan simpan itu sebagai “index.html” dalam “tutsfolder”.

Ingat: "index" adalah nama file dan ".html" adalah ekstensinya, yang memberi tahu kita jenis filenya.

Website dapat dibuat dari banyak halaman, sehingga halaman utama selalu disebut "index.html" untuk mengatakan "Hey, ini dimana itu semua dimulai!"

Sekarang, akhirnya mari kita menuliskan beberapa HTML.

Membangun Sebuah Struktur.

Sekarang kita bisa menambahkan struktur kita. Sekali lagi, pikirkan ini sebagai menyusun bangunan, kita perlu menempatkan kerangkanya.

Bagian HTML paling awal yang akan kita tulis adalah <!DOCTYPE html> yang memberi tahu browser “Hey, ini adalah sebuah dokumen HTML!”

Kemudian, di bawah itu, kita memerlukan elemen <html>.

Semuanya akan disarangkan di dalam elemen ini.

Tunggu. Menyarangkan?

"Seperti sarang burung?" Yah, mungkin lebih seperti rumah boneka, atau untuk tetap dengan tema kota kita, bangunan kandang. Nesting adalah apa yang terjadi ketika kita menempatkan sebuah elemen di dalam elemen lainnya.

Sedikit kode di bawah menunjukkan sebuah elemen paragraf yang bersarang di dalam elemen body, karena itu tinggal di antara tag pembuka dan penutup body.

Kita membuat kode di dalam file HTML lebih mudah dibaca dengan menekan elemen bersarang lebih jauh ke kanan. Seperti ini:

OK, kembali berkerja...

Head

Sekarang, bersarang di dalam elemen html ini kita akan ingin menambahkan elemen head.

head akan berisi title halaman kita, yang akan muncul di dalam tab browser. Banyak penyarangan!

Dari banyak yang dicantumkan di dalam head sebuah dokumen HTML tidak dapat dilihat pada website itu sendiri, namun membantu memberitahu mesin pencarian, seperti Google, tentang apa website kita!

Juga, nanti ketika kita membuat file baru untuk menambahkan style pada yang satu ini, kita akan menghubungkan dua dokumen ini bersama melalui sebuah tautan yang ditambahkan di dalam head. Jadi, itu seperti pusat kendali di balik layar yang tidak dilihat oleh kebanyakan pengunjung website kita.

Body

Semua hal pada situs yang akan kita lihat di dalam browser akan disarangkan di dalam body, dan ini dimana kesenangan benar-benar dimulai!

Header

Elemen header tidak sama seperti elemen head yang telah kita bicarakan. header berada di dalam body dan umumnya berisi semua hal di bagian teratas situs.

Hal paling pertama yang kita miliki pada bagian atas situs kita adalah header yang berisi beberapa teks dan sebuah gambar Kota Tuts+.

Kita hanya akan menambahkan header untuk sekarang untuk mempersiapkan konten yang dicantumkan.

Bagian Utama

Bagian utama situs Kota Tuts+ berisi informasi yang paling penting. Daftar bisnis di kota adalah isi website kita, sehingga semua konten ini akan berada di dalam sebuah elemen bernama main.

Kita akan membicarakan tentang wadah yang lebih kecil (seperti tiga group berbeda: Sleep, Food, dan Shop) di dalam wadah main yang lebih besar di dalam pelajaran berikutnya ketika kita menambahkan konten.

Footer

footer adalah bagian pada paling akhir situs. Kita biasanya akan melihat beberapa tautan di sini, seperti Facebook dan Twitter, atau beberapa teks kecil untuk memberi tahu orang siapa yang membuat situs.

Kita akan menambahkan sebuah kalimat yang dengan bangga mengatakan bahwa kita membuat situs ini di dalam elemen footer.

Ingat: pada titik ini kita tetap menambahkan elemen yang disarangkan di dalam body.

Kajian Akhir

Sekarang, mari kita lakukan kajian akhir struktur HTML sejauh ini.

Sangat mudah untuk melupakan tag penutup, yang akan menyebabkan beberapa error pada website. Kita ingin memastikan bahwa setiap tag yang kita buka memiliki tag penutup.

Sepertinya semuanya ditutup! Waktunya untuk mulai menambahkan konten pada struktur super solid yang kita buat ini.

Catatan Singkat Tentang Catatan

HTML memungkinkan kita menulis catatan yang membantu di dalam pekerjaan kita. Catatan ini tidak akan tampak pada website kita, namun brilian untuk menambahkan sedikit informasi berguna bagi desainer lainnya yang melihat kode kita.

File HTML untuk pelajaran ini (yang dapat kamu download) memiliki beberapa catatan untuk membantu kita memahami itu dengan lebih baik.

Kerja Bagus!

Di dalam pelajaran ini kita mempelajari tentang apa HTML itu, apa yang dimaksud dengan elemen, bagaimana menyarangkan elemen ini, dan bagaimana mempersiapkan struktur HTML dasar dengan beberapa elemen wadah yang umum.

Di dalam pelajaran berikutnya, kita akan menambahkan teks dan gambar situs kita ke dalam struktur yang baru dibuat ini.

Sampai jumpa di sekitar kota!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.