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

Desain Web Untuk Anak-Anak: Konten HTML

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called Web Design for Kids.
Web Design for Kids: HTML Structure
Web Design for Kids: CSS

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

Selamat datang di pelajaran keempat seri Desain Web Untuk Anak-Anak, Konten HTML.

Dalam pelajaran sebelum ini, kita akhirnya masuk ke dalam coding dengan membangun struktur file HTML dengan beberapa elemen HTML. Sekarang kita akan menambahkan konten situs ke dalam struktur.

Ingat: File akhir untuk pelajaran ini dapat didownload di sini. Dan jika kamu terhambat sesuatu, ajukan pertanyaan dalam area komentar di bagian paling bawah halaman ini!

Container, Container, Container

Kita akan berbicara tentang container lebih banyak ketika membangun sebuah website, jadi penting untuk mengerti apa yang dilakukannya.

Seluruh konten kita akan perlu ditempatkan di dalam jenis container HTML yang benar. Container dikelola dengan elemen HTML. Tiap elemen berarti sesuatu yang spesial bagi browser, membantu itu mengerti semua hal pada halaman.

Untuk memikirkannya dalam cara lain, dalam ilustrasi di atas bangunannya berisi segala sesuatu: jendela, pintu, dan jam. Salah satu jendela bertindak sebagai container lainnya dengan seorang desainer Kota Tuts+ di dalamnya.

Menambahkan Konten

Sekarang setelah struktur kita sudah pada tempatnya kita dapat mengisi container dengan konten. Semua elemen yang kita tambahkan pada file dalam pelajaran sebelumnya membantu kita lebih tertata-mereka memberikan kita tempat untuk meletakkan atau memasukkan teks dan gambar.

Mari mulai dari yang paling atas!

Header

Seperti yang kita bicarakan, header berada di bagian paling atas sebuah website dan memiliki elemennya sendiri, <header>, yang pertama kali bersarang di dalam body.

Header umumnya berisi sebuah perkenalan dan navigasi (cara untuk menemukan tempat lainnya di dalam website). Website kita memiliki sebuah heading sambutan dan gambar yang rapi, jadi mari tambahkan mereka!

Heading

Kita perlu mendapatkan "Selamat datang di Kota Tuts+" pada halaman, yang menjadi heading utama website.

Ada enam tingkatan heading yang berbeda untuk sebuah situs; h1 adalah yang terpenting, h6 adalah yang paling tidak penting. Di dalam HTML teks untuk heading dituliskan di dalam elemen heading: <h1>, <h2>, <h3>, <h4>, <h5>, atau <h6>.

“Welcome To Tuts+ Town” adalah heading utama kita (itu sangat penting), sehingga kita akan mengetikkan ini di dalam tag pembuka dan penutup elemen <h1>.

Browser akan mengenali teks ini sebagai heading pengantar.

Gambar Kota

Juga di dalam header kita memiliki gambar cantik kota kita.

Di dalam folder utama “tutstown” kamu perlu membuat folder lainnya, “images”, dan menyimpan semua gambar di sana.

Gambar-gambar ditambahkan dengan sebuah elemen <img>. Di dalam tag ini kita perlu memberikan lokasi, atau sumber gambar, seperti ini:

Lihat / setelah src="images? Di sana kita telah mengatakan "cari sebuah file di dalam folder gambar / bernama townheader.svg".

Kemudian, sebelum kita menyelesaikan tag <img> kita akan memuat sebuah deskripsi dengan sebuah atribut alt.

Attributes adalah hal-hal yang dapat kita tambahkan ke dalam elemen yang membantu menjelaskannya lebih jauh, atau memberitahunya bagaimana berkerja. Hanya attributes tertentu yang berkerja di dalam elemen tertentu. Sebuah elemen <img> akan selalu mempunyai attribute src dan alt.

Penting! Sebuah elemen <img> termasuk jenis menutup sendiri. Ini berarti bahwa tag pembuka juga merupakan tag penutup:

Mari Kita Intip!

Pada titik ini kita dapat membuka website kita di dalam browser untuk melihat apa yang telah kita lakukan sejauh ini! Temukan folder "tutstown" dan dobel klik pada "index.html". Ini hendaklah membuka halaman di dalam browsermu.

Disanalah website kita! Tidak ada begitu banyak di sana sekarang, namun kita akan mengubahnya. Mulai sekarang, kapanpun kamu ingin melihat perubahan di dalam browser, kamu dapat menyimpan file HTML dan kemudian memuat ulang (dengan menggunakan lingkaran kecil dengan panah kecil di bagian atas) jendela browser.

Juga, kamu akan menyadari bahwa kita belum dapat awan kita, karena kita belum menambahkan background kuning itu. Kita akan melihat pada hal-hal seperti warna background, positioning, dan penentuan ukuran di dalam pelajaran selanjutnya ketika kita menggali ke dalam CSS.

Bagian Utama

Bagian utama website kita termasuk kumpulan informasi. Kita akan menampung semua konten super berguna tentang kota kita di dalam elemen <main> ini.

Section

Kita memiliki tiga group terkait pada website kita yang akan kita susun ke dalam tiga section. Sebuah section adalah bagian tersendiri website yang berisi informasi dan juga elemennya sendiri: <section>.

Lebih Banyak Struktur!

Di dalam section kita memiliki lebih banyak kerangka yang lebih kecil untuk dibuat, seperti kontainer untuk bagian kecil teks di sebelah gambar.

Mari kerjakan satu section pada satu waktu. Tiap section memiliki gambar bersarang dan sebuah elemen yang berisi beberapa teks.

Mari kita lihat struktur ini sebelum kita menambahkan konten yang sebenarnya:

Sekarang, kita membicarakan tentang menambahkan gambar sebelumnya. Gambar ini akan ditambahkan dengan cara yang sama seperti gambar header, namun nama file dan deskripsinya akan berbeda.

Div

Sebuah elemen <div> merupakan elemen kontainer yang lebih umum. Itu memungkinkan kita untuk mengelompokkan sebuah halaman ketika tidak ada elemen lainnya yang cocok.

Heading dan daftar belanja akan dimuat dalam <div> ini.

Heading

Kita dapat melihat bahwa tiap section memiliki heading kecil: Sleep, Food, dan Shop. Ini memberitahu kita tentang daftar kecil tepat di bawah masing-masing itu. Kita telah menggunakan sebuah <h1> untuk pendahuluan kita di bagian atas halaman, sehingga untuk ini kita akan menggunakan <h2>, seperti ini:

Lists

Ada dua jenis daftar HTML, berurutan (dengan angka) dan tidak berurutan (dengan bullet point sebagai pengganti angka) Keduanya sangat berguna untuk membuat daftar informasi terkait dan tiap section pada situs kita berisi daftar tidak berurutan (<ul>) singkat dengan dua item.

Yang bersarang di dalam tiap daftar adalah item daftar. Ini adalah item yang membuat daftar kita dan mereka dituliskan di dalam tag <li>.

Tautan

Daftar yang baru saja kita tempatkan dimaksudkan untuk menjadi tautan pada website toko yang berbeda, sehingga pengunjung kita dapat mengkliknya untuk mendapatkan lebih banyak informasi. Untuk mengubah sebuah kata (atau kalimat) ke dalam sebuah tautan yang dapat diklik kita perlu membungkus kata tersebut di dalam tag anchor kita. Sebuah elemen anchor tampak seperti ini: <a>.

Serupa dengan bagaimana elemen <img> kita memiliki atribut khusus, tag pembuka <a> akan perlu berisi sebuah atribut yang mencakup alamat web sebuah website tempat kita ingin mengirimkan pengguna, atribut href.

Potongan kode di bawah akan memberikan kita sebuah tautan yang terhubung pada kata "here" yang akan membawa pengguna ke http://tutsplus.com/

Ini tepatnya bagaimana kita akan menambahkan tautan pada daftar kita, dengan membungkus tiap nama toko di dalam sebuah anchor. Baik tag anchor pembuka dan penutup akan berada di dalam item daftar, <li>. Satu-satunya perbedaannya adalah karena ini bukan merupakan toko sebenarnya, dengan website sebenarnya, kita akan meletakkan sebuah # untuk nilai href dan mengkliknya tidak akan membawa kita ke website lainnya.

Berikut tampilan toko pertama yang didaftarkan:

Kita membuat sebuah daftar tidak berurutan, menyarangkan sebuah item daftar di dalam daftar tersebut, dan kemudian membungkus nama toko di dalam tag anchor. Namun perlu diingat bahwa kita belum melakukan styling apapun sehingga untuk saat ini pratinjau kita akan menunjukkan tautan dalam biru standar bukannya oranye.

Pembungkusan Section

Setelah kita menyelesaikan satu section penuh kita perlu mengulangi langkah yang sama persis ini untuk dua section terakhir. Tiap kali kita perlu memastikan kontennya berubah; struktur HTML akan tetap sama untuk ketiga section, namun teks dan gambar akan berbeda.

Sekarang, mari kita ulas kode untuk ketiga section–itu cukup banyak!

Footer

Sebuah <footer> akan menjadi elemen pertama setelah tag penutup elemen <main>; itu tidak akan disarangkan di dalamnya.

Kita kemudian dapat menambahkan elemen footer pada halaman, yang akan berada pada level yang sama dengan utama karena keduanya disarangkan di dalam body.

Satu-satunya konten yang kita punya di dalam footer kita adalah sebuah kalimat tentang siapa yang membuat situs kita (itu kita!) Konten ini akan dibungkus di dalam sebuah elemen <p> (paragraf) yang disarangkan di dalam footer.

Pratinjau Utuh

Pernahkah kamu merasa bersemangat menyimpan dokumen HTML dan memuat ulang browser saat berkerja? Saya juga! Mari kita lihat tampilan akhir sebelum kita merangkum:

Melihat Kembali Elemen Yang Digunakan

Kita telah membicarakan tentang banyak elemen berbeda di sini jadi mari kita ulas secara cepat elemen yang digunakan di dalam file HTML kita:

<html> Menampung semua HTML
<head> Tempat kita meletakkan informasi tentang website
<title> Judul website
<body> Menampung semua konten halaman
<header> Menampung pesan sambutan kita
<h1> dan <h2> Heading kita
<img> Membawa sebuah gambar ke dalam halaman
<main> Untuk konten utama
<section> Memecah halaman ke dalam bagian-bagian
<div> Kontainer umum
<ul> Daftar hal-hal tidak berurutan
<li> Sebuah item di dalam sebuah daftar
<a> Digunakan untuk menautkan ke suatu tempat
<footer> Konten bagian bawah

Kesimpulan

Di dalam kursus ini kita belajar semua tentang bagaimana memasukkan konten ke dalam struktur HTMl super kokoh yang kita buat dengan tangan kosong kita sendiri (yah, dan sebuah komputer)

Berikutnya kita akan belajar bagaimana menerapkan style halaman ini untuk membuatnya secantik dan semenarik mungkin, namun juga lebih mudah dibaca dan digunakan.

Sampai ketemu 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.