HTML adalah salah satu komponen inti dari World Wide Web, membentuk struktur halaman web. Setelah membuat halaman web, Anda dapat menyimpannya sebagai dokumen HTML dan melihatnya di browser web Anda. Membuat halaman HTML dimungkinkan menggunakan editor teks dasar yang ditemukan di komputer Windows dan Mac.

Ingin belajar cara membuat situs web dengan HTML dan CSS?

Anda berada di tempat yang tepat. Dalam panduan ini, kami menunjukkan kepada Anda semua langkah untuk mendapatkan dari layar kosong ke situs web yang berfungsi yang dioptimalkan dan cukup tampan pada saat yang sama.

Tapi pertama-tama, apa itu HTML dan CSS?

Nah, Anda bisa saja mencari kedua istilah di Wikipedia, tetapi definisi tersebut tidak terlalu ramah pembaca. Mari kita sederhanakan hal-hal sedikit:

HTML (Hypertext Markup Language) mendefinisikan struktur dan isi dari halaman web - ke mana hal-hal pergi, bagaimana mereka ditata, dan apa yang ada di halaman
CSS (Cascading Style Sheets) mendefinisikan styling / presentasi halaman web dan elemen-elemen di dalamnya

html Penataan Web

Dengan server yang diurutkan, hal berikutnya yang Anda butuhkan adalah nama domain. Nama domain adalah apa yang diidentifikasi situs web di web. Misalnya, nama domain situs ini adalah odimera.com

1. Pelajari Dasar-Dasar HTML

Jika Anda baru mengenal HTML, Anda mungkin menemukan HTML ini untuk Pemula (Ultimate Guide) berguna.

Elemen utama dari struktur HTML adalah tag HTML.

Sebuah tag, misalnya, terlihat seperti ini:

<b>SOMETHING</b>

Di sini, kita berurusan dengan tag. Yang satu ini akan tebal sepotong teks yang antara tag pembuka () dan tag penutup (). Dalam hal ini, bagian teks itu adalah .<b><b></b>SOMETHING

Tetapi ada tag lain, hanya untuk beberapa nama:

<i>...</i> akan miringkan teks antara tag buka dan tutup
<u>...</u> akan menggarisbawahinya
<p>...</p> adalah paragraf teks
<h1>...</h1> adalah header utama pada halaman

Terlepas dari tag sederhana itu, ada juga tag yang lebih kompleks. Misalnya, jika Anda ingin membuat daftar seperti berikut ini:

Butir 1
Butir 2
Butir 3

... Anda dapat melakukannya dengan kode HTML berikut:

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Atau, jika Anda ingin menambahkan tautan ke halaman lain, seperti yang ini:

Ini adalah link ke homepage kami

... anda dapat melakukannya dengan kode ini:

<a href="https://websitesetup.org/">This is a link to my homepage</a>

Baca ini untuk mendapatkan daftar lengkap tag HTML. Ini akan menjadi berguna saat Anda membuat situs web dengan HTML dan CSS.

2. Memahami Struktur Dokumen HTML

Pikirkan halaman HTML Anda seolah-olah itu dibangun dari Lego. Anda meletakkan batu bata yang berbeda di atas satu sama lain untuk berakhir dengan struktur yang lebih besar.

Tapi bukannya batu bata Lego, Anda mendapatkan tag HTML ...

Berikut adalah struktur dokumen HTML yang paling sederhana:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>My first web page.</p>
  </body>
</html>

Anda dapat mengambil kode di atas, menyalin dan menempelkannya ke file baru, menyimpan dokumen sebagai , dan itu akan menjadi halaman HTML yang sangat valid.index.html

Mari kita jelaskan masing-masing bagian dari kode ini:

<!doctype html> – deklarasi awal dokumen
<html lang="en"> Deklarasi lain; Mengatakan bahwa apa yang akan datang berikutnya adalah dokumen HTML yang ditulis dalam bahasa Inggris
<head> – menandai dimulainya bagian kepala; bagian kepala adalah tempat semua parameter dasar halaman pergi; sebagian besar dari mereka tidak akan ditampilkan di layar; mereka hanya mendefinisikan apa yang terjadi di bawah tenda
<meta charset="utf-8"> mendefinisikan kumpulan karakter apa yang digunakan untuk menulis dokumen; tidak perlu menghabiskan terlalu banyak waktu untuk ini; gunakan saja deklarasi ini seperti
<title>Hello, world!</title> – judul halaman; ini adalah apa yang orang akan lihat di bilah judul browser mereka, misalnya:

<body> – menandai dimulainya bagian tubuh; di sinilah semua konten halaman berjalan; ini adalah bagian utama dari dokumen HTML; mari kita tekankan ini, bagian ini adalah tempat Anda akan menyertakan semua konten yang dimaksudkan untuk muncul di halaman
<h1>Hello, world!</h1> – header utama pada halaman
<p>My first web page.</p> paragraf teks yang sederhana
</html> – tag penutup dari seluruh dokumen HTML

Catatan penting di sini. Mengerjakan file HTML di aplikasi teks dasar atau prosesor teks yang kompleks seperti MS Word bukanlah pengalaman yang baik. Untuk membuat hal-hal mudah pada diri sendiri, instal editor HTML yang disebut Sublime Text. Ini memiliki versi untuk Mac dan PC, dan gratis.

Mengapa lebih baik? Antara lain, itu akan mewarnai sintaks file HTML. Artinya, secara visual akan membedakan tag HTML Anda dari konten teks, parameter tag, dan nilai lainnya. Pada dasarnya, semuanya akan bisa dibaca. Inilah yang terlihat seperti struktur HTML sederhana kami di Sublime Text:

Oke, kembali pada topik. Anda dapat mengambil file baru Anda, menyalinnya ke tempat direktori utama server web Anda berada, dan kemudian melihat halaman itu dengan menavigasi ke sana melalui browser web. Jangan terlalu bersemangat, meskipun; halaman ini akan agak jelek (lihat di bawah).index.html

Oke, jadi halamannya jelek, bagaimana membuatnya tidak begitu?

3. Kenali Pemilih CSS

Sama seperti HTML memiliki tag, CSS memiliki pemilih.

Penyeleksi menggambarkan bagaimana elemen tertentu harus berperilaku dari segi penampilan. Berikut adalah contoh pemilih CSS:

p {
    font-size: 18px;
}

Pemilih ini menunjukkan bahwa semua tag HTML dalam dokumen akan memiliki ukuran font 18px.<p>

Namun, cara yang lebih praktis untuk menggunakan pemilih CSS bukan untuk membatasi semua tag dari jenis tertentu untuk gaya tertentu, melainkan membuat "kelas" yang berbeda dan menetapkan mereka untuk tag satu per satu.

Misalnya, pemilih kelas di CSS terlihat seperti ini:

.normal-text {
    font-size: 18px;
}

Perhatikan titik () sebelum nama kelas (). Dengan kelas "teks normal" yang ditentukan, kita sekarang dapat menetapkan kelas itu ke tag HTML spesifik yang ingin kita buat berukuran 18px..normal-text

Misalnya:

<p class="normal-text">This text is going to be 18px.</p>

Mari kita luangkan satu menit lagi untuk menjelaskan semua elemen dari bagian kode CSS di atas:

.normal-text – definisi kelas; segala sesuatu setelah nama kelas dan antara tanda kurung pembukaan dan penutupan mendefinisikan seperti apa elemen yang ditetapkan ke kelas ini{}
font-size – contoh properti CSS
18px – nilai yang ditetapkan untuk properti

Ada satu ton properti CSS selain dari di atas. Berikut daftar lengkapnya jika Anda penasaran.font-size

4. Kumpulkan Stylesheet CSS

Dokumen HTML sangat struktural – setiap elemen memiliki tempatnya, dan urutan elemen sangat penting untuk konstruksi akhir dan tampilan halaman web yang bersangkutan. Dokumen CSS jauh lebih sedikit.

Dokumen CSS sering disebut sebagai stylesheet. Pada dasarnya, stylesheet CSS adalah daftar semua definisi kelas yang digunakan dalam dokumen HTML yang sesuai. Urutan definisi kelas tidak begitu penting sebagian besar waktu (setidaknya untuk desain sederhana).

Cara Anda menempatkan stylesheet CSS bersama-sama adalah dengan mendefinisikan setiap kelas satu per satu, dan kemudian menguji apakah hasil dalam desain halaman Anda adalah apa yang Anda inginkan.

Ini terdengar seperti pekerjaan yang membosankan, dan memang begitu.

Tapi kami akan membuat segalanya lebih mudah pada Anda, dan tidak memaksa Anda untuk belajar desain HTML dan CSS dengan tangan. Alih-alih mengajari Anda segalanya dari awal, kami akan mengambil organisme hidup dan membedah elemen-elemennya.

Di sinilah sesuatu yang disebut Bootstrap ikut bermain.

5. Unduh/Instal Bootstrap

Bootstrap adalah toolkit open-source untuk membuat situs web dengan HTML dan CSS.

Dalam bahasa Inggris sederhana, Bootstrap mengurus struktur dasar dokumen HTML dan stylesheet CSS untuk Anda. Ini memberikan kerangka kerja yang memastikan bahwa perancah utama halaman web Anda siap dan dioptimalkan untuk pengembangan lebih lanjut.

Pada dasarnya, Bootstrap memungkinkan Anda untuk tidak memulai dari awal, dan malah langsung masuk ke bagian yang menyenangkan. Dengan itu, Anda tidak perlu bekerja pada tahap awal yang sering membosankan untuk membuat situs web dengan HTML dan CSS.

Ada dua jalur yang dapat Anda ambil:

Option (a): learn Bootstrap – buka homepage Bootstrap, unduh paket Bootstrap utama dan mulai membangun di atasnya.
Option (b): ambil pintasan – dapatkan kartu perdana untuk Bootstrap dengan desain yang tampan dan halaman web demo yang sudah dibangun.

Option (a) mungkin memiliki beberapa kurva belajar di awal, tetapi itu sama sekali bukan cara yang lebih buruk untuk mendekati pembuatan situs web dengan HTML dan CSS. Setelah Anda menguasai struktur Bootstrap inti, mungkin lebih mudah bagi Anda untuk membangun halaman baru dan membuatnya terlihat persis seperti yang Anda inginkan. Dokumentasi Bootstrap adalah tempat yang bagus untuk memulai dengan jalur ini.

Kami akan pergi dengan Option (b) untuk panduan ini. Kami melakukan ini karena beberapa alasan, kepala dari mereka:

Dimulai dengan struktur yang sudah jadi menghemat banyak rasa sakit dalam mencoba mencari tahu kebutuhan dasar dokumen HTML. Ini memungkinkan Anda fokus pada hal-hal menarik - seperti meletakkan konten dan membuatnya terlihat bagus.

Singkatnya, mempelajari hal-hal dengan cara ini akan memberi Anda hasil yang lebih baik lebih cepat, yang kami kira adalah apa yang Anda inginkan.

Selanjutnya anda tinggal mengatur Desain (Tema), tata letak, dan menambahkan postingan (Halaman Baru) seperti "about", "Contact Us" dll.

Apa yang harus Anda lakukan sekarang adalah membilas dan mengulangi dengan membuat halaman baru, menyetelnya, menambahkan konten ke dalamnya, dan kemudian menghubungkan semuanya dari menu navigasi.

Hal-hal lain yang layak dilakukan saat Anda melalui langkah-langkah ini adalah mempelajari lebih lanjut prinsip HTML dan CSS, melalui daftar periksa, dan juga belajar Bootstrap dan struktur dan kelasnya.

html Penataan Web

html Penataan Web