AKADEMI MANAJEMEN INFORMATIKA DAN KOMPUT (8)
AKADEMI MANAJEMEN INFORMATIKA DAN KOMPUTER
AMIK ROYAL KISARAN
PROGRAM STUDI MANAJEMEN INFORMATIKA
SATUAN ACARA PERKULIAHAN
PERTEMUAN - 1 :
TEKNOLOGI WEBPAGE
1
.
Identitas
Matakuliah
:
Kode Mata Kuliah
:
Semester
:
SKS Dan Jumlah Jam
:
Matakuliah
Pendukung
:
Pemrograman Web 1
3 ( Tiga )
2 SKS, 2 x 45 menit
- Pemrograman Terstruktur
- Basis Data
- Design Grafis
2
.
Pendukung
Matakuliah
:
- Pemrograman Web 2
Dosen
:
Andri Nata, ST, M.Kom
Minggu Ke
:
1 ( satu )
1. Unit Kompetensi
:
- Menjelaskan konsep dasar dan teknologi
Webpage
2. Elemen Kompetensi
:
- Menjelaskan tentang konsep WWW
Kompete
nsi
- Menjelaskan tentang web statis.
- Menjelaskan tentang web dinamis
3. Kriteria Kinerja
:
Mahasiswa mampu :
- Menjelaskan tentang konsep WWW
- Menjelaskan konsep dasar HTML
- Menjelaskan pengertian browser
- Menjelaskan pengertian editor
- Mengenal Web Server
3. Proses Pembelajaran
No.
ALO-
KEGIATAN
MEDIA/
HASIL
1
KASI
WAKTU
DOSEN
Penciptaan
ketertiban suasana
belajar
Berdoa
bersama
Mengabsensi siswa
Penjelasan
mengenai
tujuan
pembelajaran
1
15’
2
65’
3
10’
ALAT/
BAHAN
Whiteboard,
Laptop &
Projektor
(Kriteria Unjuk
Kerja)
-
Memahami dan
mempraktekkan
Whiteboard,
Laptop &
Projektor
Pengenalan
Teknologi
Webpage
Memahami
-
-
MAHASISWA
Menyimak dan
memahami
Membuat
catatan yang
berhubungan
dengan software
aplikasi serta
langkah – langkah
melakukan
instalasi software
aplikasi dan web
server.
Menjelaskan
istilah penting dari
situs web
Menjelaskan
pengertian dari
WWW.
Menjelaskan
pengertian dari
Browser dan Editor.
Menjelaskan
Jenis – Jenis web
server.
Menutup
proses perkuliahan
Berdoa Bersama
4. Materi Pembelajaran
A. World Wide Web
Internet merupkan jaringan global yang menghubungkan suatu network
dengan network lainya di seluruh dunia, TCP/IP
menjadi protocol penghubung
antara
seluruh
jaringan-jaringan
berkomunikasi.
yang
beragam
di
dunia
untuk
dapat
World Wide Web (WWW) merupakan bagian dari internet yang
paling cepat berkembang dan paling populer. WWW bekerja merdasarkan pada
tiga mekanisme berikut:
1. Protocol standard aturan yang di gunakan untuk berkomunikasi pada
computer
networking, Hypertext Transfer Protocol (HTTP) adalah protocol untuk
WWW.
2. Address
WWW
memiliki
aturan
penamaan
alamat
web
yaitu
URL(Uniform Resource Locator) yang di gunakan sebagai standard
alamat internet.
2
3. HTML digunakan untuk membuat document yang bisa di akses melalui
web.
Web Statis dan Web Dinamis.
Halaman web dapat digolongkan menjadi web statis dan web dinamis.
Pengertian
web statis dan
web dinamis seringkali mengundang perdebatan.
Sebagian pengguna internet menyatakan jika pada halaman-halaman
web
dilengkapi dengan animasi yang bergerak maka disebut web dinamis sedangkan
jika halaman-halaman web tersebut hanya berisi teks dan gambar yang tidak
bergerak maka disebut
web statis.
Namun berdasarkan kesepakatan maka
pengertian statis dan dinamis tidak ditentukan oleh ada atau tidaknya animasi
bergerak pada halaman-halaman web, tetapi ditentukan oleh isi atau informasi
yang ada pada halaman-halaman tersebut.
Data dan informasi yang ada pada
web statis tidak berubah-ubah.
Dokumen web yang dikirim kepada client akan sama isinya dengan apa yang ada
di
web
server.
Sedangkan
web dinamis, memiliki data dan informasi yang
berbeda-beda tergantung input apa yang disampaikan
client.
Dokumen yang
sampai di client akan berbeda dengan dokumen yang ada di web server.
B. Pengenalan HTML
Hypertext Markup Language merupkan standard bahasa yang di gunakan untuk
menampilkan
document web, yang bisa anda lakukan dengan HTML yaitu:
1. Mengontrol tampilan dari web page dan contentnya.
2. Mempublikasikan document secara online sehingga bisa di akses dari
seluruh dunia.
3. Membuat
online
form
yang
bisa
di
gunakan
untuk
menangani
pendaftaran, transaksi
secara online.
4. Menambahkan object-object seperti image, audio, video dan juga java
applet dalam
document HTML.
C. Browser dan Editor
Browser
Browser merupakan software yang di install di mesin client yang berfungsi
untuk menterjemahkan tag-tag HTML menjadi halaman web. Browser yang sering
di gunakan
biasanya Internet Explorer, Netscape Navigator dan masih banyak
yang lainya.
Editor
Program yang di gunakan untuk membuat document HTML, ada banyak
HTML editor yang bisa anda gunakan diantaranya: Ms FrontPage, Dreamweaver,
Notepad/Notepad ++.
D. Mengenal web server
Web server adalah perangkat lunak yang berfungsi menerima permintaan (
request ) berupa halaman web melalui HTTP atau HTTPS dari klien yang dikenal
dengan browser web dan mengirimkannnya kembali hasilny dalam bentuk
3
halaman-halaman web yang umumnya berbentuk dokumen HTML. Saat ini
tersedia banyak aplikasi web web server diantaranya adalah Apache Web Server,
Apache Tomcat, Internet Information Service ( IIS ), Sun Java System Web Server
dan lain sebagainya.
5. Metode Pembelajaran
6. Materi latihan
: Ceramah, tanya jawab, dan latihan.
: Memahami teknologi webserver.
7. Materi Tes
:
1. Apakah perbedaan antara web Dinamis dan Statis ?
2. Apakah kegunaan dari dokumen HTML ?
3. Apakah perbedaan antara Browser dan Editor ?
8. Kriteria Penilaian
: 1 - 100
9. Pedoman Bukti
:-
10.
:
Kunci Jawaban
1. Skor maksimal = 40
Sebagian pengguna internet menyatakan jika pada halaman-halaman web
dilengkapi dengan animasi yang bergerak maka disebut web dinamis
sedangkan jika halaman-halaman web tersebut hanya berisi teks dan gambar
yang tidak bergerak maka disebut
web statis.
Namun berdasarkan
kesepakatan maka pengertian statis dan dinamis tidak ditentukan oleh ada
atau tidaknya animasi bergerak pada halaman-halaman web, tetapi ditentukan
oleh isi atau informasi yang ada pada halaman-halaman tersebut.
2. Skor maksimal = 30
1. Mengontrol tampilan dari web page dan contentnya.
2. Mempublikasikan document secara online sehingga bisa di akses dari
seluruh dunia.
3. Membuat
online
form
yang
bisa
di
gunakan
untuk
menangani
pendaftaran, transaksi
Secara online.
4. Menambahkan object-object seperti image, audio, video
dan juga java
applet dalam
Document HTML.
3. Skor maksimal = 30
4
Browser
Browser merupakan software yang di install di mesin client yang
berfungsi untuk menterjemahkan tag-tag HTML menjadi halaman web.
Browser yang sering di gunakan
biasanya Internet Explorer, Netscape
Navigator dan masih banyak yang lainya.
Editor
Program yang di gunakan untuk membuat document HTML, ada banyak
HTML editor yang bisa anda gunakan diantaranya: Ms FrontPage,
Dreamweaver, Notepad/Notepad ++.
11. Referensi
:
1.
http://en.wikipedia.org/wiki/World_Wide_Web
2.
http://id.wikipedia.org/wiki/Web
3.
http://mysql.com
4.
http://w3c.org
5.
Jayan. 2010. CSS untuk orang awam. Palembang. Maxikom.
6.
Prijono Agus, dkk. 2005. Mudan dan Cepat Menguasai
Pemrograman WEB. Bandung. Informatika.
7.
Hakim Lukmanul. 2009. Jalan Pintas Menjadi Master PHP.
Yogyakarta. Lokomedia.
AKADEMI MANAJEMEN INFORMATIKA DAN KOMPUTER
AMIK ROYAL KISARAN
PROGRAM STUDI MANAJEMEN INFORMATIKA
SATUAN ACARA PERKULIAHAN
PERTEMUAN - 2 :
STRUKTUR DOKUMEN HTML
1
.
Identitas
Matakuliah
:
Kode Mata Kuliah
:
Semester
:
SKS Dan Jumlah Jam
:
Matakuliah
Pendukung
:
Pemrograman Web 1
3 ( Tiga )
- Pemrograman Terstruktur
- Basis Data
- Design Grafis
2
.
Pendukung
Matakuliah
:
- Pemrograman Web 2
Dosen
:
Andri Nata, ST, M.Kom
Minggu Ke
:
2 ( Dua )
:
- Menjelaskan Struktur dokumen HTML
:
- Menjelaskan dasar - dasart tag pada
HTML seperti cara menuliskantag dan
attribut dalam tag.
Kompete
nsi
1. Unit Kompetensi
2. Elemen Kompetensi
5
- Memformat teks pada dokumen HTML.
- Menampilkan gambar pada dokumen
HTML.
3. Kriteria Kinerja
:
Mahasiswa mampu :
- Melengkapi dokumen HTML dengan Head
dan title.
- Membuat Body pada dokumen.
- Menambahkan teks dan paragraf sesuai
kebutuhan
- Mengatur mengatur letak teks terhadap
gambar pada dokumen HTML.
- Menyimpanan dokumen disimpan sesuai
dengan penamaan standar.
3. Proses Pembelajaran
ALOKASI
WAKTU
1
15’
2
65’
DOSEN
Penciptaan
ketertiban suasana
belajar
Berdoa
bersama
Mengabsensi siswa
Penjelasan
mengenai
tujuan
pembelajaran
3
10’
MEDIA/
ALAT/
BAHAN
Whiteboard,
Laptop &
Projektor
HASIL
(Kriteria Unjuk
Kerja)
-
Memahami dan
mempraktekkan
Whiteboard,
Laptop &
Projektor
Pengenalan
Teknologi
Webpage
Memahami
-
-
KEGIATAN
No.
Merancang
dokumen HTML
dengan tag
Merancang
dokumen HTML
dengan tag
Merancang
dokumen HTML
dengan
memformat teks
Mempratekkan
menambah
gambar pada
dokumen web.
Mempratekkan
pengaturan letak
teks terhadap
gambar pada
dokumen web.
Mempratekkan
memberi bingkai
gambar pada
dokumen web.
Menutup
MAHASISWA
Menyimak dan
memahami
6
proses perkuliahan
Berdoa Bersama
4. Materi Pembelajaran
1. Struktur HTML Document
Document HTML bisa di bagi mejadi tiga bagian utama:
HTML
Setiap document HTML harus di awali dan di tutup dengan tag HTML
HEAD
Bagian header dari document HTML di apit oleh tag di dalam
bagian ini biasanya dimuat tag TITLE yang menampilkan judul dari halaman pada
titlenya browser. Header juga memuat tag META yang biasanya di gunakan untuk
menentukan informasi tertentu mengenai document HTML, anda bisa
menentukan author name, keywords, dan lainyan pada tag META.
BODY
Document body di gunakan untuk menampilkan text, image link dan semua yang
akan di
tampilkan pada web page.
2. Basic HTML Element
Block Level Element
Block level element yang sering di gunakan : Heading (H1 sampai H6)
Paragraf (P) List Item(LI)
List item di gunakan untuk mengelompokkan databaik berurutan (ordered list)
maupun yang tidak berurutan (unordered list).
Ada dua macam list yang bisa anda tambahkan ke document HTML:
1. Unordered List (Bullet) :
2. Ordered List (Numbering)
Contoh :
Definition List
Definition List terdiri diapit oleh tag … dan tag menentukan
definition term serta tag menentukan definition itu sendiri.
Horizontal Rules (HR)
Horizontal Rule tag digunakan untuk menggambar garis horizontal dalam
document HTML.
7
Pemformatan Page Break
Tag di gunakan untuk memulai baris baru pada document HTML, tag ini
fungsinya mirip dengan carriage return.
Font
Dengan tag anda bisa menentukan format tampilan font dalam
document HTML
seperti color, size, style dan lainya.
Contoh:
Color
Color merupakan attribute yang bisa anda tambahkan pada beberapa element
seperti body, font, link dan lainya. Color di bagi dalam tiga ketegori warna primer
yaitu red, green dan blue. Masing-masing color didefinisikan dalam dua digit
hexadecimal number.
#RRGGBB
Alignment
Align attribute digunakan untuk menentukan perataan object dalam document
HTML baik berupa text, object, image, paragraph, division dan lain-lain.
Format text
Physical Formatting
8
Preformatted text
Tag PRE di gunakan untuk menampilkan text sesuai dengan format aslinya.
3. Menampilkan Gambar
Tag HTML yang digunakan untuk menampilkan gambar yaitu .
Beberapa jenis gambar yang dapat disertakan dalam sebuah halaman web adalah
GIF, JPEG, PNG, TIFF. Tag ini mempunyai banyak atribut, tetapi hanya satu yang
harus disertakan, yaitu atribut src.Dengan catatan gambar yang hendak
ditampilkan dalam dokumen html,terlebih dahulu copy kan gambar tersebut
kedalam folder dimana file html tersebut berada. Artinya file gambar dan file html
harus dalam 1 folder.Bentuk paling sederhana dari tag adalah seperti
berikut:
AMIK ROYAL KISARAN
PROGRAM STUDI MANAJEMEN INFORMATIKA
SATUAN ACARA PERKULIAHAN
PERTEMUAN - 1 :
TEKNOLOGI WEBPAGE
1
.
Identitas
Matakuliah
:
Kode Mata Kuliah
:
Semester
:
SKS Dan Jumlah Jam
:
Matakuliah
Pendukung
:
Pemrograman Web 1
3 ( Tiga )
2 SKS, 2 x 45 menit
- Pemrograman Terstruktur
- Basis Data
- Design Grafis
2
.
Pendukung
Matakuliah
:
- Pemrograman Web 2
Dosen
:
Andri Nata, ST, M.Kom
Minggu Ke
:
1 ( satu )
1. Unit Kompetensi
:
- Menjelaskan konsep dasar dan teknologi
Webpage
2. Elemen Kompetensi
:
- Menjelaskan tentang konsep WWW
Kompete
nsi
- Menjelaskan tentang web statis.
- Menjelaskan tentang web dinamis
3. Kriteria Kinerja
:
Mahasiswa mampu :
- Menjelaskan tentang konsep WWW
- Menjelaskan konsep dasar HTML
- Menjelaskan pengertian browser
- Menjelaskan pengertian editor
- Mengenal Web Server
3. Proses Pembelajaran
No.
ALO-
KEGIATAN
MEDIA/
HASIL
1
KASI
WAKTU
DOSEN
Penciptaan
ketertiban suasana
belajar
Berdoa
bersama
Mengabsensi siswa
Penjelasan
mengenai
tujuan
pembelajaran
1
15’
2
65’
3
10’
ALAT/
BAHAN
Whiteboard,
Laptop &
Projektor
(Kriteria Unjuk
Kerja)
-
Memahami dan
mempraktekkan
Whiteboard,
Laptop &
Projektor
Pengenalan
Teknologi
Webpage
Memahami
-
-
MAHASISWA
Menyimak dan
memahami
Membuat
catatan yang
berhubungan
dengan software
aplikasi serta
langkah – langkah
melakukan
instalasi software
aplikasi dan web
server.
Menjelaskan
istilah penting dari
situs web
Menjelaskan
pengertian dari
WWW.
Menjelaskan
pengertian dari
Browser dan Editor.
Menjelaskan
Jenis – Jenis web
server.
Menutup
proses perkuliahan
Berdoa Bersama
4. Materi Pembelajaran
A. World Wide Web
Internet merupkan jaringan global yang menghubungkan suatu network
dengan network lainya di seluruh dunia, TCP/IP
menjadi protocol penghubung
antara
seluruh
jaringan-jaringan
berkomunikasi.
yang
beragam
di
dunia
untuk
dapat
World Wide Web (WWW) merupakan bagian dari internet yang
paling cepat berkembang dan paling populer. WWW bekerja merdasarkan pada
tiga mekanisme berikut:
1. Protocol standard aturan yang di gunakan untuk berkomunikasi pada
computer
networking, Hypertext Transfer Protocol (HTTP) adalah protocol untuk
WWW.
2. Address
WWW
memiliki
aturan
penamaan
alamat
web
yaitu
URL(Uniform Resource Locator) yang di gunakan sebagai standard
alamat internet.
2
3. HTML digunakan untuk membuat document yang bisa di akses melalui
web.
Web Statis dan Web Dinamis.
Halaman web dapat digolongkan menjadi web statis dan web dinamis.
Pengertian
web statis dan
web dinamis seringkali mengundang perdebatan.
Sebagian pengguna internet menyatakan jika pada halaman-halaman
web
dilengkapi dengan animasi yang bergerak maka disebut web dinamis sedangkan
jika halaman-halaman web tersebut hanya berisi teks dan gambar yang tidak
bergerak maka disebut
web statis.
Namun berdasarkan kesepakatan maka
pengertian statis dan dinamis tidak ditentukan oleh ada atau tidaknya animasi
bergerak pada halaman-halaman web, tetapi ditentukan oleh isi atau informasi
yang ada pada halaman-halaman tersebut.
Data dan informasi yang ada pada
web statis tidak berubah-ubah.
Dokumen web yang dikirim kepada client akan sama isinya dengan apa yang ada
di
web
server.
Sedangkan
web dinamis, memiliki data dan informasi yang
berbeda-beda tergantung input apa yang disampaikan
client.
Dokumen yang
sampai di client akan berbeda dengan dokumen yang ada di web server.
B. Pengenalan HTML
Hypertext Markup Language merupkan standard bahasa yang di gunakan untuk
menampilkan
document web, yang bisa anda lakukan dengan HTML yaitu:
1. Mengontrol tampilan dari web page dan contentnya.
2. Mempublikasikan document secara online sehingga bisa di akses dari
seluruh dunia.
3. Membuat
online
form
yang
bisa
di
gunakan
untuk
menangani
pendaftaran, transaksi
secara online.
4. Menambahkan object-object seperti image, audio, video dan juga java
applet dalam
document HTML.
C. Browser dan Editor
Browser
Browser merupakan software yang di install di mesin client yang berfungsi
untuk menterjemahkan tag-tag HTML menjadi halaman web. Browser yang sering
di gunakan
biasanya Internet Explorer, Netscape Navigator dan masih banyak
yang lainya.
Editor
Program yang di gunakan untuk membuat document HTML, ada banyak
HTML editor yang bisa anda gunakan diantaranya: Ms FrontPage, Dreamweaver,
Notepad/Notepad ++.
D. Mengenal web server
Web server adalah perangkat lunak yang berfungsi menerima permintaan (
request ) berupa halaman web melalui HTTP atau HTTPS dari klien yang dikenal
dengan browser web dan mengirimkannnya kembali hasilny dalam bentuk
3
halaman-halaman web yang umumnya berbentuk dokumen HTML. Saat ini
tersedia banyak aplikasi web web server diantaranya adalah Apache Web Server,
Apache Tomcat, Internet Information Service ( IIS ), Sun Java System Web Server
dan lain sebagainya.
5. Metode Pembelajaran
6. Materi latihan
: Ceramah, tanya jawab, dan latihan.
: Memahami teknologi webserver.
7. Materi Tes
:
1. Apakah perbedaan antara web Dinamis dan Statis ?
2. Apakah kegunaan dari dokumen HTML ?
3. Apakah perbedaan antara Browser dan Editor ?
8. Kriteria Penilaian
: 1 - 100
9. Pedoman Bukti
:-
10.
:
Kunci Jawaban
1. Skor maksimal = 40
Sebagian pengguna internet menyatakan jika pada halaman-halaman web
dilengkapi dengan animasi yang bergerak maka disebut web dinamis
sedangkan jika halaman-halaman web tersebut hanya berisi teks dan gambar
yang tidak bergerak maka disebut
web statis.
Namun berdasarkan
kesepakatan maka pengertian statis dan dinamis tidak ditentukan oleh ada
atau tidaknya animasi bergerak pada halaman-halaman web, tetapi ditentukan
oleh isi atau informasi yang ada pada halaman-halaman tersebut.
2. Skor maksimal = 30
1. Mengontrol tampilan dari web page dan contentnya.
2. Mempublikasikan document secara online sehingga bisa di akses dari
seluruh dunia.
3. Membuat
online
form
yang
bisa
di
gunakan
untuk
menangani
pendaftaran, transaksi
Secara online.
4. Menambahkan object-object seperti image, audio, video
dan juga java
applet dalam
Document HTML.
3. Skor maksimal = 30
4
Browser
Browser merupakan software yang di install di mesin client yang
berfungsi untuk menterjemahkan tag-tag HTML menjadi halaman web.
Browser yang sering di gunakan
biasanya Internet Explorer, Netscape
Navigator dan masih banyak yang lainya.
Editor
Program yang di gunakan untuk membuat document HTML, ada banyak
HTML editor yang bisa anda gunakan diantaranya: Ms FrontPage,
Dreamweaver, Notepad/Notepad ++.
11. Referensi
:
1.
http://en.wikipedia.org/wiki/World_Wide_Web
2.
http://id.wikipedia.org/wiki/Web
3.
http://mysql.com
4.
http://w3c.org
5.
Jayan. 2010. CSS untuk orang awam. Palembang. Maxikom.
6.
Prijono Agus, dkk. 2005. Mudan dan Cepat Menguasai
Pemrograman WEB. Bandung. Informatika.
7.
Hakim Lukmanul. 2009. Jalan Pintas Menjadi Master PHP.
Yogyakarta. Lokomedia.
AKADEMI MANAJEMEN INFORMATIKA DAN KOMPUTER
AMIK ROYAL KISARAN
PROGRAM STUDI MANAJEMEN INFORMATIKA
SATUAN ACARA PERKULIAHAN
PERTEMUAN - 2 :
STRUKTUR DOKUMEN HTML
1
.
Identitas
Matakuliah
:
Kode Mata Kuliah
:
Semester
:
SKS Dan Jumlah Jam
:
Matakuliah
Pendukung
:
Pemrograman Web 1
3 ( Tiga )
- Pemrograman Terstruktur
- Basis Data
- Design Grafis
2
.
Pendukung
Matakuliah
:
- Pemrograman Web 2
Dosen
:
Andri Nata, ST, M.Kom
Minggu Ke
:
2 ( Dua )
:
- Menjelaskan Struktur dokumen HTML
:
- Menjelaskan dasar - dasart tag pada
HTML seperti cara menuliskantag dan
attribut dalam tag.
Kompete
nsi
1. Unit Kompetensi
2. Elemen Kompetensi
5
- Memformat teks pada dokumen HTML.
- Menampilkan gambar pada dokumen
HTML.
3. Kriteria Kinerja
:
Mahasiswa mampu :
- Melengkapi dokumen HTML dengan Head
dan title.
- Membuat Body pada dokumen.
- Menambahkan teks dan paragraf sesuai
kebutuhan
- Mengatur mengatur letak teks terhadap
gambar pada dokumen HTML.
- Menyimpanan dokumen disimpan sesuai
dengan penamaan standar.
3. Proses Pembelajaran
ALOKASI
WAKTU
1
15’
2
65’
DOSEN
Penciptaan
ketertiban suasana
belajar
Berdoa
bersama
Mengabsensi siswa
Penjelasan
mengenai
tujuan
pembelajaran
3
10’
MEDIA/
ALAT/
BAHAN
Whiteboard,
Laptop &
Projektor
HASIL
(Kriteria Unjuk
Kerja)
-
Memahami dan
mempraktekkan
Whiteboard,
Laptop &
Projektor
Pengenalan
Teknologi
Webpage
Memahami
-
-
KEGIATAN
No.
Merancang
dokumen HTML
dengan tag
Merancang
dokumen HTML
dengan tag
Merancang
dokumen HTML
dengan
memformat teks
Mempratekkan
menambah
gambar pada
dokumen web.
Mempratekkan
pengaturan letak
teks terhadap
gambar pada
dokumen web.
Mempratekkan
memberi bingkai
gambar pada
dokumen web.
Menutup
MAHASISWA
Menyimak dan
memahami
6
proses perkuliahan
Berdoa Bersama
4. Materi Pembelajaran
1. Struktur HTML Document
Document HTML bisa di bagi mejadi tiga bagian utama:
HTML
Setiap document HTML harus di awali dan di tutup dengan tag HTML
HEAD
Bagian header dari document HTML di apit oleh tag di dalam
bagian ini biasanya dimuat tag TITLE yang menampilkan judul dari halaman pada
titlenya browser. Header juga memuat tag META yang biasanya di gunakan untuk
menentukan informasi tertentu mengenai document HTML, anda bisa
menentukan author name, keywords, dan lainyan pada tag META.
BODY
Document body di gunakan untuk menampilkan text, image link dan semua yang
akan di
tampilkan pada web page.
2. Basic HTML Element
Block Level Element
Block level element yang sering di gunakan : Heading (H1 sampai H6)
Paragraf (P) List Item(LI)
List item di gunakan untuk mengelompokkan databaik berurutan (ordered list)
maupun yang tidak berurutan (unordered list).
Ada dua macam list yang bisa anda tambahkan ke document HTML:
1. Unordered List (Bullet) :
2. Ordered List (Numbering)
Contoh :
Definition List
Definition List terdiri diapit oleh tag … dan tag menentukan
definition term serta tag menentukan definition itu sendiri.
Horizontal Rules (HR)
Horizontal Rule tag digunakan untuk menggambar garis horizontal dalam
document HTML.
7
Pemformatan Page Break
Tag di gunakan untuk memulai baris baru pada document HTML, tag ini
fungsinya mirip dengan carriage return.
Font
Dengan tag anda bisa menentukan format tampilan font dalam
document HTML
seperti color, size, style dan lainya.
Contoh:
Color
Color merupakan attribute yang bisa anda tambahkan pada beberapa element
seperti body, font, link dan lainya. Color di bagi dalam tiga ketegori warna primer
yaitu red, green dan blue. Masing-masing color didefinisikan dalam dua digit
hexadecimal number.
#RRGGBB
Alignment
Align attribute digunakan untuk menentukan perataan object dalam document
HTML baik berupa text, object, image, paragraph, division dan lain-lain.
Format text
Physical Formatting
8
Preformatted text
Tag PRE di gunakan untuk menampilkan text sesuai dengan format aslinya.
3. Menampilkan Gambar
Tag HTML yang digunakan untuk menampilkan gambar yaitu .
Beberapa jenis gambar yang dapat disertakan dalam sebuah halaman web adalah
GIF, JPEG, PNG, TIFF. Tag ini mempunyai banyak atribut, tetapi hanya satu yang
harus disertakan, yaitu atribut src.Dengan catatan gambar yang hendak
ditampilkan dalam dokumen html,terlebih dahulu copy kan gambar tersebut
kedalam folder dimana file html tersebut berada. Artinya file gambar dan file html
harus dalam 1 folder.Bentuk paling sederhana dari tag adalah seperti
berikut: