Sabtu, 04 April 2020

Struktur Dasar Pemrograman Web menggunakan HTML

No comments




Seperti yang sudah disinggung di awal, HTML merupakan dasar dari sebuah pemrograman web. Adapun contoh struktur dasar pemrograman web menggunakan HTML adalah sebagai berikut.

<html>

<head>

<title> Belajar Web Programming </title>

</head>

<body>

Web programming merupakan…

</body>

</html>

  • Tag
Tag adalah teks markup yang berisi dua karakter “<” dan “>”, misalnya <title> adalah tag dengan nama title.

Tag harus ditulis secara berpasangan yaitu terdiri atas tag pembuka dan tag penutup, khusus untuk tag penutup diperlukan tambahan karakter “/” sebelum “<”.
  • Elemen
Elemen terdiri atas tag pembuka, isi, dan tag penutup, misalnya untuk menampilkan isi konten, struktur dasar HTML pada browser digunakan elemen body yang mana:

- <body> adalah tag pembuka

- Web programming merupakan… adalah isi konten

- </body> adalah tag penutup
  • Atribut
Atribut terdiri atas nama dan nilai yang mana nilai atribut harus berada dalam tanda petik.

Misalnya untuk membuat warna teks menjadi ungu dan latar belakang laman web menjadi oranye digunakan atribut sebagai berikut.

<body bgcolor= “orange” text= “purple”>

Sobat mungkin masih belum memiliki banyak pengalaman di bidang web design, namun tips di bawah ini dapat membantu kamu mendesain dan membangun website yang terlihat menarik dan modern.


HTML Tips
  • Pahami Dasar-Dasar HTML
Dasar-dasar HTML yang wajib kamu pahami antara lain tag markup, format dokumen HTML, penggunaan tag kepala, penggunaan tag badan, atribut, dan parameter tag.

Tidak hanya itu, kamu juga harus mempelajari ­tag-tag yang lain agar kamu bisa dengan leluasa mengembangkannya.
  • Gunakan Map Images
Gambar-gambar yang disediakan oleh map images terlihat lebih menarik, ditambah lagi dengan adanya area yang clickable untuk menautkan dokumen atau laman lain.

 Kamu hanya perlu menambahkan elemen yang akan memberi definisi area pada gambar yang diklik oleh pengunjung.
  • Desain Menggunakan Style Sheet
Style sheet akan membantu kamu dalam membuat kode HTML dengan lebih mudah. Sobat Jagoan sudah tidak perlu menggunakan tag.
Selain itu, kamu akan memiliki kontrol yang lebih baik terhadap kenampakan laman kamu. Sobat Jagoan bisa dengan leluasa mengubah penampilan laman dengan cara menyunting style sheet.
CSS Tips
  • Lupakan <table> dan Gunakan <div>
Salah satu keunggulan CSS adalah penggunaan <div> untuk mendapatkan fleksibilitas dalam hal styling. <div> di sini berbeda dengan <table> di mana konten-kontennya ‘terkunci’ dalam sebuah sel <td>.
  • Pastikan Kode CSS Bersih
Jika kode-kode CSS Sobat Jagoan berantakan, kamu tentunya akan kebingungan dan kesulitan untuk mengacu pada kode sebelumnya.

 Untuk pemula, kamu bisa mencoba membuat indentation yang tepat dan berikan komentar yang tepat pula.
  • Pahami Tipe-Tipe Media
Ada beberapa tipe media ketika Sobat Jagoan menyatakan CSS dengan <link>. Print, projection, dan screen adalah beberapa tipe yang umum diketahui.
Cobalah pahami dan gunakan tipe-tipe media tersebut untuk meningkatkan kualitas aksesibilitas pengunjung.
JavaScript Tips
  • Pahami Dasar-Dasar Ilmu
Untuk menguasai JavaScript, Sobat Jagoan sebaiknya memahami terlebih dahulu dasar-dasar HTML, dan setidaknya sudah bisa melakukan praktek membuat halaman web sederhana menggunakan HTML.

 Selain itu, kamu juga perlu belajar sekilas tentang CSS dan PHP.
  • Gunakan Komentar Inline
Hampir seluruh bahasa pemrograman memungkinkan adanya penambahan komentar inline, termasuk JavaScript.

 Komentar ini membantu mengurangi kerumitan dari kode dengan cara menambahkan teks yang berguna untuk memperjelas informasi yang ingin dibagikan.
  • Coba Buat Sebuah Aplikasi Sederhana
Sobat Jagoan bisa mencoba membuat sebuah aplikasi sederhana yang mudah digunakan, misalnya aplikasi chat sederhana seperti WeChat.

 Namun, pastikan kamu memulainya dari awal. Semua kesulitan yang kamu alami seputar syntax, dokumen, atau kesalahan konfigurasi akan memiliki peran penting dalam proses belajar kamu.
“The sooner you get familiar and comfortable, the better.”

0 komentar:

Posting Komentar