Hari / Tanggal : Rabu / 30 November 2022
Mata Pelajaran : TIK / Komputer
Kelas : 6F (SD Al - Azhar 1 Bandar Lampung)
Tema : Menggunakan HTML untuk Membuat Website dan Mengenal Tag-Tag HTML
Pembelajaran Ke- : 18
Assalamualaikum warahmatullahi wabarokatuh
Bagaimana kabar anak sholeh dan sholehah ?
Alhamdulillah semoga kita semua dalam keadaan sehat dan selalu dalam lindungan Allah SWT aamiin.
Setelah kita melaksanakan aktivitas kita di pagi hari ini, yaitu mendengarkan tausiyah, melaksakan shalat dhuha, dan melakukan muroja'ah. Selanjutnya kita akan belajar.
Sebelum mulai belajar, ada baiknya kita mengucap Bismillahirrahmaanirrahim.. dan membaca doa terlebih dahulu ya.
Tak terasa kita seudah memasuki akhir semester ganjil yang mana diakhir semester kita akan melaksanakan Penilian Akhir Semester. Untuk itu pada pertemuan minggu ini miss akan bahas materi-materi yang sudah kita pelajari selama satu semester ini.
A. Pengertian HTML
1. HTTP
HTTP (hypertext tranfer protocol) merupakan protokol yang digunakan untuk mentransfer data antara web server ke web browser.
2. TAG
Tag adalah kode-kode yang digunakan untuk mengatur dokumen web. Tag HTML biasanya berupa tag-tag yang berpasangan dan ditandai dengan simbol “< “dan “>” dan untuk tag penutup ditandai dengan “/”.
<html>
<head>
<title>berisi judul yang muncul pada title bar web browser</title>
</head>
<body>
Berisi tentang text, gambar, atau apapun yang ingin anda Tampilkan pada dokumen anda ada pada bagian ini
</body>
</html>
Langkah – langkah membuat sebuah dokumen WEB secara langsung dengan menggunakan NOTEPAD adalah :
1. Buka program notepad dengan mengklik menu start, kemudian pilih all program, kemudian pilih accessories, dan klik Notepad/Wordpad.
2. Sebagai contoh ketiklah kode berikut :
<html>
<head>
<title>SD AL-AZHAR 1 </title>
</head>
<body>
SD AL AZHAR 1 BANDAR LAMPUNG
</body>
</html>
3. Simpan file dengan mengklik menu FILE, kemudian pilih SaveAs, maka akan muncul sebuah kotak dialog penyimpanan yang menanyakan lokasi penyimpanan, nama file dan type penyimpanan.
4. tentukan lokasi penyimpanan pada drop-down Save in
5. Pilih All Files pada drop-down list Save as type
6. Isikan nama lengkap file beserta ekstensinya, misalnya LATIHAN1.html pada isian file name.
7. Klik tombol Save untuk menyimpan.
Langkah-langkah untuk melihat tampilan dokumen web pada browser adalah :
1. buka browser internet explore atau mozila, dengan mengklik menu Start, kemudian pilh program dan klik internet explore atau mozila.
2. klik menu file, kemudian pilih open
3. ketika jendela open muncul, klik tombol browse. ketika jendela baru muncul, cari folder tempat menyimpan file HTML pada drop-down list save in, kemudian pilih file html yang akan dilihat tampilannya, misalnya LATIHAN1.html.
4. klik tombol open, kemudian klik tombol ok. maka di browser akan ditampilkan :
B. Mengenal Tag - Tag HTML
1. Elemen Heading
<h1> JUDUL di halaman web
<h2> SUB JUDUL
<h3> SUB JUDUL
<h4> SUB JUDUL
<h5> SUB JUDUL
<h6> SUB JUDUL
2. Pindah ke Baris Berikutnya
Untuk membuat baris baru atau berpindah baris digunakan tag <br>.3. Mengatur Peletakan Teks
Untuk mengatur peletakan teks digunakan tag <div> dan atribut align. nilai yang dapat diisikan adalah sebagai berikut :
- left , untuk mengatur teks rata kiri terhadap halaman
- Center, untuk mengatur teks rata tengah terhadap halaman
- Right, untuk mengatur teks rata kanan terhadap halaman
- Justify, untuk mengatur teks rata kanan kiri terhadap halaman
4. Memformat Teks
Untuk memformat Teks digunakan tag <strong> agar teks ditampilkan dalam keadaan ditebalkan dan tag <em> agar teks ditampilkan dalam keadaan miring atau bisa juga menggunakan elemen ragam karakter lain seperti :
<b>bold</b> menghasilkan huruf tebal
<i>italic</i> menghasilkan huruf miring
<u>underline</u> menghasilkan huruf bergaris bawah
5. Membuat Garis Horisontal (Horizontal Rules)
Untuk membuat garis horisontal, digunakan tag <hr>. atribut – atribut pada tag <hr> adalah
- Size berfungsi untuk menentukan ketebalan garis, SIZE = Pixels (line height, default 2)
- Width berfungsi untuk menentukan lebar garis, WIDTH = Length (line width, pixel or percentage, default 100%)
- Width berfungsi untuk menentukan lebar garis, WIDTH = Length (line width, pixel or percentage, default 100%)
- Align berfungsi untuk mengatur peletakan garis pada halaman web, ALIGN =[ left | center | right ] (horizontal alignment, default center)
- Noshade berfungsi untuk mengatur agar garis tidak disertai bayangan
- Noshade berfungsi untuk mengatur agar garis tidak disertai bayangan
6. Membuat Teks Animasi Berjalan
Untuk membuat animasi teks berjalan, digunakan pasangan tag <marquee>…</marquee>.
Untuk mengubah arah pergerakan teks, digunakan atribut direction. nilai yang dapat diisikan adalah sebagai berikut :
- Right : teks bergerak dari kiri kekanan.
- Up : teks bergerak dari bawah keatas
- Down : Teks bergerak dari atas kebawah
- Right : teks bergerak dari kiri kekanan.
- Up : teks bergerak dari bawah keatas
- Down : Teks bergerak dari atas kebawah
7. Membuat Paragraf
Untuk membuat paragraf digunakan tag <p>….</p> . atribut align dapat digunakan untuk mengatur peletakan teks. nilai yang dapat diisikan adalah sebagai berikut :
- Left , Untuk mengatur teks rata kiri terhadap halaman
- Center, Untuk mengatur teks rata tengah terhadap halaman
- Right, Untuk mengatur teks rata kanan terhadap halaman
- Justify, Untuk mengatur teks rata kiri dan kanan terhadap halaman
8. Memformat Karakter
Font pada halaman HTML dapat diformat sesuai dengan desain yang anda tentukan, baik ukuran, jenis maupun warna.
- SIZE = Number (font size adjustment, default 3)
- COLOR = Color (font color adjustment, default black)
- FACE = Number (font face adjustment, default Times New Roman)
Baiklah, untuk pertemuan kita hari ini miss cukupkan sampai disini. Jangan lupa belajar dan pahami materinya dengan baik ya:)
Miss tutup pertemuan kita hari ini dengan mengucapkan Alhamdulillahirabbil'alamin :) terimakasih anak sholeh dan sholehah sudah mengikuti pembelajran TIK hari ini :) mohon maaf apabila ada kesalahan dalam penyampaian materi nya.
Wassalamu'alaikum Warahmatullahi wabarokatuh
Komentar
Posting Komentar