🌐
Miniclass Web
  • Miniclass Web
  • 1. Pengenalan Pemrograman Web
    • Cara Kerja Website
    • Pengenalan Backend dan Frontend
    • HTTP Request dan HTTP Response
  • 2. HTML
    • Pengenalan HTML
    • Text Formatting
    • Link
    • Media
    • List
    • Table
    • Form
    • Grouping
  • 3. CSS
    • Pengenalan CSS
    • Selector CSS
    • Text Formatting
    • Background
    • Border
    • Height dan Width
    • Spacing
    • Layouting
    • Responsive Design
    • Membuat Template Web Responsive
  • 4. Javascript
    • Pengenalan JavaScript
    • Javascript for Java developer
    • Array
    • Fungsi
    • Manipulasi DOM
    • Event
    • Fetch API
    • Object JavaScript
    • UI Component Lanjutan
  • 5. Node.js
    • Pengenalan Node.js
    • Membuat Server HTTP
    • Routing
    • Import Export
    • Node Package Manager
    • Nodemon
  • 6. Express.js
    • Pengenalan Express.js
    • HTTP Method
    • Menerima Data dari URL
    • Middleware
    • Menerima Data dari Body
    • Mengunggah File
    • Menampilkan File dalam Folder
    • Menyimpan Data ke Database MySQL
  • 7. Modern Frontend Development
    • ECMAScript
    • Transpiler
    • Module Bundler
  • 8. React Fundamental
    • Pengenalan React JS
    • Props
    • Event
    • State
    • Conditional Rendering
    • Component Mapping
    • Side Effect
    • Custom Hook
  • 9. React State Management
    • Lifting State Up
    • Context
    • Reducer
  • 10. React Performance
    • Debounce
    • Throttling
    • Memoization
    • Profiling
  • 11. React Testing
    • Component Testing
    • Hook Testing
    • Mocking
    • End to End Testing
  • 12. Object Relational Mapping
    • Pengenalan Object Relational Mapping
  • 13. Document Oriented Database
    • Document Oriented Database
    • Object Document Mapping
  • 14. Web Service
    • REST
    • GraphQL
  • 15. Autentikasi
    • JSON Web Token
    • Membuat Web Service Sederhana
  • 16. Microservices
    • Microservices
    • Microservices Gateway
    • Message Queue
    • Remote Procedure Call
    • Membuat Micro Service Sederhana
  • 18. Caching
Powered by GitBook
On this page
  • 1. Permasalahan
  • 2. Penjelasan HTML
  • 3. Penjelasan Struktur Dasar HTML
  • 3.1. Tag <html>
  • 3.2. Tag <head>
  • 3.3. Tag <title>
  • 3.4. Tag <body>
  • 3.5. Struktur Dasar Secara Keseluruhan
  • 4. Contoh Kasus
  • 4.1. Membuat File HTML
  • 4.2. Menulis Struktur Dasar HTML
  • 4.3. Menambahkan Judul Website
  • 4.4. Menambahkan Konten Website
  • 4.5. Simpan Perubahan

Was this helpful?

  1. 2. HTML

Pengenalan HTML

1. Permasalahan

Website merupakan kumpulan dari beberapa halaman yang dapat diakses melalui internet. Dimana pada masing - masing halaman terdiri dari beberapa bagian seperti header, body, content, dan footer. Apabila bagian - bagian tersebut digabung, akan membentuk sebuah struktur website yang utuh. Maka dari itu, langkah pertama untuk membuat website adalah menentukan struktur dari website yang ingin kita buat.

2. Penjelasan HTML

Untuk membantu dalam menentukan struktur website, kita bisa menggunakan HTML. HTML (Hypertext Markup Language) adalah satu dari banyak bahasa markup yang digunakan untuk menentukan struktur dari website yang akan kita buat. Di dalam HTML terdapat syntax yang bisa digunakan untuk menjadi acuan dalam menentukan struktur website sehingga kita bisa menentukan letak header, body, content, footer dengan mudah.

3. Penjelasan Struktur Dasar HTML

HTML memiliki 4 tag dasar yang perlu kita pahami, antara lain

3.1. Tag <html>

<html></html>

Tag tersebut digunakan untuk mengawali dokumen HTML. Semua kode HTML yang akan dibuat harus dimasukkan dalam tag tersebut.

3.2. Tag <head>

<head></head>

Tag <head> ditulis di dalam tag <html>. Tag ini digunakan untuk menyimpan informasi dari website yang kita buat.

3.3. Tag <title>

<title></title>

Tag <title> ditulis di dalam tag <head>. Tag <title> akan menampilkan judul dari website yang akan ditampilkan pada tab browser.

3.4. Tag <body>

<body></body>

Tag <body> ditulis di bawah tag head. Tag <body> merupakan tag pembuka dari badan dari dokumen HTML. Tag <body> nantinya akan berisi konten dari website kita

3.5. Struktur Dasar Secara Keseluruhan

Berikut struktur dasar dari HTML secara keseluruhan

<html>
  <head>
    <title>Judul website</title>
  </head>
  <body>
    konten website
  </body>
</html>

4. Contoh Kasus

Pada studi kasus kali ini, kita akan mencoba mengimplementasikan struktur dasar HTML diatas dengan membuat sebuah website sederhana. Ikuti langkah berikut ini:

4.1. Membuat File HTML

Pertama, buatlah file HTML baru bernama pengenalan.html, perlu diingat bahwa semua file HTML harus berformat .html

4.2. Menulis Struktur Dasar HTML

Selanjutnya, kita perlu membuat struktur dasar HTML. Tulis kode program di bawah ini dalam file pengenalan.html

<html>
  <head>
    <title></title>
  </head>

  <body></body>
</html>

4.3. Menambahkan Judul Website

Tambahkan judul website di dalam tag <title> agar user tau tentang apa website yang kita buat

<html>
  <head>
    <title>Belajar HTML</title>
  </head>

  <body></body>
</html>

4.4. Menambahkan Konten Website

Untuk menambahkan konten dari website, kita perlu menuliskannya di dalam tag <body>. Disini kita akan menggunakan tag <h1> untuk membuat heading dan tag <p> untuk membuat paragraf. Kalian bisa isi kedua tag tersebut dengan kalimat seperti yang ada di bawah ini.

<html>
  <head>
    <title>Belajar HTML</title>
  </head>
  <body>
    <h1>Apasih HTML itu??</h1>
    <p>
      HyperText Markup Language atau yang lebih akrab dikenal HTML adalah bahasa
      pemrograman atau komputer yang digunakan untuk membuat suatu website.
      “HyperText” mengacu pada Hyperlink yang ada pada page HTML, sedangkan
      “Markup Language” melambangkan cara suatu Tags digunakan untuk
      mendefinisikan layout atau desain suatu page dan element-element
      didalamnya.
    </p>
  </body>
</html>

4.5. Simpan Perubahan

Simpan perubahan yang dilakukan kemudian buka file tersebut di web browser. Akan muncul website dengan judul "Belajar Website" dengan konten yang sudah dibuat sebelumnya.

PreviousHTTP Request dan HTTP ResponseNextText Formatting

Last updated 4 years ago

Was this helpful?