Sabtu, 19 Agustus 2017

Cara Belajar Html Dasar Untuk Pembelajaran TIK Kelas 11 Kurikulum KTSP/ Kurikulum Nasional (Kurnas)

Cara belajar html dasar untuk pembelajaran kelas 11 kurikulum KTSP/ kurikulum nasional (kurnas)
Html merupakan salah satu bahasa pemrograman yang biasa digunakan untuk membangun sebuah halaman website yang ditulis dalam pemformatan hiperteks sederhana dalam format ASCII yang biasanya diawali dengan kurung siku <html> dan diakhiri dengan </html> dengan susunan bagian dalam sebuah file html didalamnya terdapat <title>, <head> dan <body> yang ditulis dalam sebuah aplikasi pengolah teks seperti Notepad, Notepad++, Wordpad dan berbagai text editor lainnya yang memungkinkan untuk menyimpan filenya dalam format hTML yaitu dengan ditandainya extension titik HTML pada nama file html yang kita simpan.

File html yang telah kita buat dapat dijalankan pada hampir semua aplikasi web browser seperti google Chrome, mozilla Firefox, safari, widows edge dan lain sebagainya. Bagian title pada file HTML merupakan teks untuk menandai judul halaman html tersebut ketika dibuka di web browser, sedangkan bagian head merupakan tempat untuk meletakkan metaTag sebuah halaman HTML yang biasanya berhubungan dengan mesin pencari, identitas penulis, untuk meletakkan kata kunci untuk halaman tersebut dan juga untuk meratakan Script yang diperlukan oleh halaman tersebut.
Belajar Html Dasar Untuk Pembelajaran TIK Kelas 11 Kurikulum KTSP/ Kurikulum Nasional (Kurnas)

Bagian body pada sebuah pada HTML berfungsi untuk menempatkan konten yang akan ditampilkan melalui halaman tersebut sehingga halaman dapat memberikan informasi kepada orang lain biasanya berupa artikel teks, kumpulan gambar, kumpulan audio dan video. Secara umum sebuah file html dapat dilihat pada kode berikut ini:

<html>
<head>
(kode html untuk head yang biasanya juga terdapat title halaman)
</head>
<body>
(konten html untuk isi halaman)
</body>
</html>

Dalam membuat sebuah website kita akan mengenal setidaknya 2 jenis bahasa pemrograman yang digunakan yaitu bahasa pemrograman yang berjalan di komputer server dan bahasa pemrograman yang berjalan di komputer client, yang nantinya akan kita kenal dengan istilah backend dan front end web dimana sebuah halaman web memiliki dua tampilan yang berbeda yaitu satu sisi tampilan dari admin yang mengelola website tersebut dan tampilan user pengguna dari website tersebut.

Bahasa pemrograman HTML merupakan bahasa pemrograman yang berjalan pada komputer client sama seperti javaScript dan CSS yang memberikan tampilan desain sebuah web menjadi lebih dinamis dan enak dilihat.

Berikut ini contoh kode untuk pengaturan content text dalam html:


<center> </center>    :    Meletakkan Text atau kalimat di tengah halaman.
<b> </b>    :    Membuat Text tebal/bold.
<i> </i>    :    Membuat Text miring/italic.
<u> </u>    :    Membuat Text bergaris bawah

<h1> </h1>    :    Membuat Text dengan ukuran font nomor 1 (terbesar).

<h2> </h2>    :    Membuat Text dengan ukuran font nomor 2.

<h3> </h3>    :    Membuat Text dengan ukuran font nomor 3.

<h4> </h4>    :    Membuat Text dengan ukuran font nomor 4 (dan seterusnya sampai nomor 7).
<br>    :    Berpindah baris tanpa berpindah paragraf dan tanpa memberi jarak spasi antar dua baris.
<p>    :    Membuat paragraf baru dengan jarak satu spasi dari paragraf sebelumnya.
<hr>    :    Membuat garis vertikal.

Membuat daftar (list) dengan nomor urut

Daftar list yang sering kita kenal dalam ms. Word adalah bullet and numbering, format paragraph ini sering digunakan untuk membuat sebuah penomoran automatis ketika menekan tombol enter baik penomoran berupa angka, huruf abjad atau menggunakan symbol.
Daftar/list dibagi menjadi dua, yaitu Ordered list (Daftar bernomor urut) dan Unordered List (Daftar tanpa nomor urut).

Berikut adalah kode HTML untuk membuat Ordered List.

<ol>    : Kode awal sebuah daftar.
<li>    : Isi baris/paragraf daftar.
</ol>    : Kode akhir sebuah daftar.
Contoh:
Untuk membuat daftar seperti di bawah ini,
Daftar Mata Pelajaran
1.    Pendidikan Agama Islam
2.    Pendidikan Kewarganegaraan
3.    Bahasa Indonesia
4.    Bahasa Inggris
5.    Matematika
Maka perintahnya adalah sebagai berikut:
<p> Daftar Mata Pelajaran    (judul daftar)
<ol>    (Kode awal  daftar)
<li> Pendidikan Agama Islam    (baris isi daftar)
<li> Pendidikan Kewarganegaraan    (baris isi daftar)
<li> Bahasa Indonesia    (baris isi daftar)
<li> Bahasa Inggris    (baris isi daftar)
<li> Matematika    (baris isi daftar)
</ol>    (Kode penutup daftar)

Kita dapat pula membuat daftar bertingkat seperti contoh di bawah ini,
Daftar Mata Pelajaran
1.    Mapel Pokok
       1.    Pendidikan Agama Islam
       2.    Pendidikan Kewarganegaraan
       3.    Bahasa Indonesia
       4.    Bahasa Inggris
       5.    Matematika
2.    Mapel Mulok
       1.    Bahasa Arab
       2.    Bahasa Sunda

Maka perintah HTML-nya adalah sebagai berikut,
<p> Daftar Mata Pelajaran    (judul daftar)
<ol>    (Kode awal daftar tingkat 1)
<li> Mapel Pokok (baris daftar tingkat 1)
       <ol>    (perintah pembuka awal daftar tingkat 2)
       <li> Pendidikan Agama Islam    (baris isi daftar tingkat 2)
       <li> Pendidikan Kewarganegaraan    (baris isi daftar tingkat 2)
       <li> Bahasa Indonesia    (baris isi daftar tingkat 2)
       <li> Bahasa Inggris    (baris isi daftar tingkat 2)
       <li> Matematika    (baris isi daftar tingkat 2)

       </ol>    (perintah penutup tingkat 2)

<li>Mapel Mulok    (baris daftar tingkat 1)
       <ol>    (perintah pembuka awal daftar tingkat 2)
       <li> Bahasa Arab    (baris daftar tingkat 2)
       <li> Bahasa Sunda    (baris daftar tingkat 2)
       </ol>    (Kode penutup tingkat 2)
</ol>    (Kode penutup tingkat 1)

Perintah untuk membuat daftar berurut ini mempunyai beberapa jenis penomoran. Untuk membuatnya, isilah properti bawaan perintah <ol> sesuai keinginan.

Berikut properti yang berlaku untuk perintah <ol>:
type=”1”    : Mengurutkan dengan angka.
type=”A”    : Mengurutkan dengan Huruf Kapital.
type=”a”    : Mengurutkan dengan Huruf Kecil.
type=”I”    : Mengurutkan dengan Angka Romawi Besar.
type=”i”    : Mengurutkan dengan Angka Romawi Kecil.

Contoh:
<ol type=”1”> </ol> akan menghasilkan sebuah daftar dengan nomor urut angka.
Membuat daftar (list) tanpa nomor urut
Perintahnya hampir mirip dengan yang bernomor urut, yaitu seperti di bawah ini.
<ul>    : Kode awal sebuah daftar tanpa nomor urut.
<li>    : Membuat baris/paragraf daftar.
</ul>    : Kode akhir sebuah daftar tanpa nomor urut.

Contoh:
Untuk membuat daftar seperti di bawah ini,
Daftar menu
•    Soto Ayam
•    Gule Kambing
•    Sate
•    Nasi Rawon

Maka perintahnya adalah sebagai berikut:
<p>Daftar menu    (judul daftar)
<ul>    (perintah pembuka awal daftar)
<li>Soto Ayam    (baris daftar)
<li>Gule Kambing    (baris daftar)
<li>Sate    (baris daftar)
<li>Nasi Rawon    (baris daftar)
</ul>    (perintah penutup)

Perintah untuk membuat daftar tak berurut ini mempunyai beberapa jenis simbol penandaan. Untuk membuatnya, isilah properti bawaan perintah <ul> sesuai keinginan.

Berikut properti yang berlaku untuk perintah <ul>:
type=”circle”    : Daftar dengan tanda lingkaran kosong.
type=”square”    : Daftar dengan tanda segi empat.
type=”disc”    : Daftar dengan tanda lingkaran solid.

Contoh:
<ul type=”circle”> </ul> akan menghasilkan sebuah daftar dengan simbol penanda berbentuk lingkaran kosong.

Untuk Belajar Secara Online Tentang HTML Dapat Kunjungi w3school.com

Artikel Terkait


EmoticonEmoticon