HTML Basic

Pendahuluan

Dalam berkomunikasi di Internet dibutuhkan alamat Untuk alamat internet ini biasanya dikenal dengan

Uniform Resource Locator (URL) Untuk tiap web memiliki alamat yang berbeda dan unik (IP)

Sebuah web mempunyai URL dengan skema terdiri dari nama web server itu sendiri dan alamatnya

Ada beberapa jenis protocol harus dikenal di internet yaitu

bull FTP (File Transfer Protocol)bull Telnetbull Gopherbull POP3-mail bull IRC (internet Relay Chatbull HTTP (Hypertext Transfer Protocol)

TUGAS

Jelaskan arti dan fungsi dari Protokol diatas

BROWSER

bull Fungsi dari browser adalah untuk mengirimkan dan mengambil data dari sebuah web server kemudian menerjemahkan bahasa HTML dari web server tersebut yang hasilnya kemudian ditampilkan pada layer monitor

bull Browser yang paling banyak digunakan sekarang adalah Microsoft Internet Explorer (IE) FireFox Opera Crome dll

HTML (HyperText Markup Language)

bull HTML merupakan satu-satunya bahasa pemrograman yang digunakan untuk merancang halaman web Fasilitas yang telah didukung oleh HTML adalah kemampuan untuk menampilkan teks gambar frame multimedia

bull HTML memiliki banyak kekurangan hingga HTML dikembangkan sedemikian rupa sehingga ke dalam HTML tersebut dapat ditambahkan suatu bahasa pemrograman script (scriptinglanguage) yang dapat digunakan untuk meningkatkan kemampuan perancangan sebuah halaman web

Beberapa Istilah dalam Internet

1 Upload Download File

2 HTML Editor

Ada beberapa HTML Editor yang dapat Anda gunakan yaitu MicrosoftFrontPage notepad Adobe PagemillMacromedia Dreamweaver Macromedia Dreamweaver Ultradev dll Kebanyakan dari HTML Editor ini sifatnya adalah WYSIWYG (What You See Is What You Get)

3 Komponen dari suatu browserbull 1 Balok Title window 2 Menu Browser 3 Indikator loading

halaman HTML 4 Navigator Button 5 Alamat URL 6 Frame window 7 ScrollBar window 8 Status window 9 Koneksi Browser

8

BAB II

TAG HTML

9

PENDAHULUAN

bull Sebuah dokumen HTML berisi elemen-elemen kode HTML yang disebut HTML Tag

bull Penulisannya diapit oleh apa yang disebut delimiter (pembatas) Atau suatu karakter atau kumpulan karakter yang mengawali dan mengakhiri suatu tag

bull Untuk HTML delimiter yang dipakai adalah dengan karakter lt dan gt Sebuah kode program HTML selalu diawali dan diakhiri dengan sebuah tagContoh tag

ltHTMLgt

-----Kode program

ltHTMLgt

10

bull HTML dibagi menjadi 2 bagian yaitu body (badan) dan head (kepala) Bagian head ditandai dengan tag ltHEADgt sedangkan bagian body ditandai dengan tag ltBODYgt

bull Bagian head digunakan untuk menyimpan informasi mengenai dokumen tersebut misalnya judul nama penulis komentarV

bull Sedangkan bagian body digunakan untuk menuliskan isi utama dari dokumen web tersebut

Contoh dari tag dokumen web sederhana (Aktifkan NotePad)ltHTMLgt

ltHEADgtltH1gtPelatihan WEB dasarltH1gt

ltHEADgt

ltBODYgt

Selamat datang ke pelatihan web dasar

ltBODYgt

ltHTMLgt

11

Tag dasar HTML

12

5 ltBgt hellip ltBgt Membuat tulisan tebal (Bold Text )

6 ltPgt hellip ltPgtMerupakan perintah paragraph yang termasuk diantaranya pengaturan posisi tulisan indentansi dan jarak Antara lain seperti berikut

ndash ltP ALIGN=rdquoleftrdquogt hellip ltPgt 1048774 untuk pengaturan paragraph rapat kiri (left)

ndash ltP ALIGN=rdquocenterrdquogt hellip ltPgt 1048774 untuk pengaturan paragraph di tengah (center)

ndash ltP ALIGN=rdquorightrdquogt hellip ltPgt 1048774 untuk pengaturan paragraph rapat kanan (right)

7 ltBRgtndash Untuk memberikan baris baru pergantian baris Diletakkan pada

bagian teks yang mau berganti baris

8 ltAgt hellip ltAgtndash Membuat link antar dua halaman web

9 ltIMG SRC=rdquogambarjpgrdquo hellip gthellipltIMGgtndash Jika Anda ingin meletakkan gambar file photo di web Anda maka

dapat dilakukan dengan memberikan tag ini

13

Latihan 2bull Rancanglah sebuah web dgn tampilan

seperti gambar ini

14

bull ltHTMLgtbull ltHEADgtltH2gtSELAMAT DATANG DI SMK NEGERI 3

PEMATANGSIANTARltH2gtbull ltHEADgtbull ltBODYgtbull ltH1gt--------------------------------------------------------------------ltH1gtbull ltH1gtJALAN MEDAN KM 105 PEMATANGSIANTARltH1gtbull ltH2gtKOMPETENSI KEAHLIANltH2gtbull ltH3gt1 PERHOTELANltH3gtbull ltH4gt2 REKAYASA PERANGKAT LUNAKltH4gtbull ltH5gt3 TATA BUSANA DAN KECANTIKANltH5gtbull ltBODYgtbull ltHTMLgt

15

10 Pengaturan bentuk ukuran dan warna tulisan

ndash Pengaturannya dilakukan dengan tag-tag seperti contoh berikut

16

11 ltHRgtndash Pemberian tag ini bertujuan untuk membuat garis horizontal pada dokumen

web Dapat diberikan attribute seperti pada atribut gambar image

12 Tag Tabelndash Untuk membuat tabel di dokumen web dapat dilakukan dengan memberikan

tag-tag Tabel Dalam tag-tag tabel ini terdiri dari beberapa tag seperti contoh berikut

ndash Untuk membuat tabel seperti tampak di bawah ini ndash Sel 1 baris 1 Sel 2 baris 1 Sel 3 baris 1 Sel 4 baris 1ndash Sel 1 baris 2 Sel 2 baris 2 Sel 3 baris 2 Sel 4 baris 2

Maka tag yang harus ditulis adalah sbbndash lttable border=1gtndash lttrgt lt--baris 1 awal--gtndash lttdgtSel 1 baris 1lttdgtndash lttdgtSel 2 baris 1lttdgtndash lttdgtSel 3 baris 1lttdgtndash lttdgtSel 4 baris 1lttdgtndash lttrgt lt--baris 1 akhir--gt

17

bull lttable border=1gtbull lttrgt lt--baris 1 awal--gtbull lttdgtSel 1 baris 1lttdgtbull lttdgtSel 2 baris 1lttdgtbull lttdgtSel 3 baris 1lttdgtbull lttdgtSel 4 baris 1lttdgtbull lttrgt lt--baris 1 akhir--gtbull lttrgt lt--baris 2 awal--gtbull lttdgtSel 1 baris 2lttdgtbull lttdgtSel 2 baris 2lttdgtbull lttdgtSel 3 baris 2lttdgtbull lttdgtSel 4 baris 2lttdgtbull lttrgt lt--baris 2 akhir--gtbull lttablegt

18

Prinsip-prinsip Desain Web

1 Fokus pada kebutuhan

2 Efisien dalam menggunakan sumber daya

3 Mendukung navigasi

4 Buatlah halaman Web senyaman dan seramahmungkin

5 Mendukung interaksi bila diperlukan

19

lthtmlgt

ltheadgt

lttitlegtAtribut dari Tag Fontlttitlegt

ltheadgt

ltbodygt

ltpgtltfont face=ArialgtIni Font Arialltfontgtltpgt

ltpgtltfont face=ArialgtltigtIni Font Arial dan miringltigtltfontgtltpgt

ltpgtltfont face=verdana size=4 color=bluegtltbgtIni Font Verdana berukuran 12 pt

berwarna biru sekaligus teballtbgtltfontgt

ltp align=centergtltfont face=Tahoma color=redgtltbgtIni Font Tahoma berwarna

merah tebal dan berada di tengahltbgtltfontgtltpgt

ltp align=centergtltfont face=Arial color=redgtIni Font Arial berwarna Merah

ltfontgtltfont face=Verdana color=bluegtSedangkan ini adalah font Verdana

berwarna birultfontgtltpgt

ltbodygt

lthtmlgt

Fungsi tag ltfontgt adalah untuk memanipulasi baik jenis ukuran dan warna huruf

20

F Tag ltselectgtltselectgt dan ltoption

Tag select tidak bisa berdiri sendiri dan harus menggandeng tag option untuk dapat menampilkan output

Dan cara kerjanya hampir sama dengan tag radio hanya saja tag select lebih singkat

21

Tag FORMbull Tag ltformgt berguna untuk mengirimkan(mem-

post) variabel yang bersisi data ke file tujuan yang memproses variabel tersebut Tag-tag yang biasa digunakan bersama tag form adalah tag ltinputgt dan lttextareagt

Tag ltinputgtbull Tag ltinputgt memiliki atribut type yang fungsinya

sangat vital dalam output tampilan Isi dari atribut type dapat menentukan jenis tampilan apakah itu textbox password box checkboxradio button dan sebagainya

22

Tag ltselectgtltselectgt dan ltoptiongtbull Tag select tidak bisa berdiri sendiri dan harus menggandeng tag option untuk dapat menampilkan output Dan

cara kerjanya hampir sama dengan tag radio hanya saja tag select lebih singkat

lthtmlgt

ltheadgt

lttitlegtPropeti tag Select dan Optionlttitlegt

ltheadgt

ltbodygt

ltpgtltbgtPenggunaan select dan dan optionltbgtltpgt

ltpgtDaftar kategori silahkan pilih kategoriltpgt

ltform action=cobaphp method=postgt

Kategori ltselect name=Pilihangt

ltoption value=Kategori 1gtKategori 1

ltoption value=Kategori 2gtKategori 2

ltoption value=Kategori 3gtKategori 3

ltselectgt

ltpgtltinput type=submit value=KIRIMgtltpgt

ltformgt

ltbodygt

lthtmlgt

23

Tag ltimggt

bull Untuk menampilkan gambar pada halaman dapat digunakan tag ltimggt Format file yang dapat didukung oleh tag img bermacam-macam mulai BMP JPG GIF TGA dan lain-lainTag img memiliki beberapa atribut yaitu ndash ‐ src letak file gambar yang akan ditampilkanndash ‐ border tebal bingkai gambarndash ‐ height menentukan tinggi imagegambarndash ‐ width menentukan lebar imagegambar

24

bull lthtmlgtbull ltheadgtbull lttitlegtAtribut dari Tag imglttitlegtbull ltheadgtbull ltbodygtbull ltpgtltbgtTag img hanya dengan atribut ltigtsrcltigtltbgtltpgtbull ltpgtltimg src=fileD|Hydrangeasjpg border=10gtltpgtbull ltpgtltimg src=fileC|UsersPublicPicturesSample

Picturestulipsjpg width=400 height=300gtltpgtbull ltbodygtbull lthtmlgt

TUGAS

Jelaskan arti dan fungsi dari Protokol1 FTP (File Transfer Protocol)2 Telnet3 Gopher4 POP3-mail 5 IRC (internet Relay Chat6 HTTP (Hypertext Transfer Protocol)

• HTML Basic
• Pendahuluan
• Ada beberapa jenis protocol harus dikenal di internet yaitu
• BROWSER
• HTML (HyperText Markup Language)
• Beberapa Istilah dalam Internet
• Slide 7
• BAB II
• PENDAHULUAN
• Slide 10
• Tag dasar HTML
• Slide 12
• Latihan 2
• Slide 14
• Slide 15
• Slide 16
• Slide 17
• Prinsip-prinsip Desain Web
• Fungsi tag ltfontgt adalah untuk memanipulasi baik jenis ukuran
• F Tag ltselectgtltselectgt dan ltoption
• Slide 21
• Slide 22
• Tag ltimggt
• Slide 24
• TUGAS

Pendahuluan

Dalam berkomunikasi di Internet dibutuhkan alamat Untuk alamat internet ini biasanya dikenal dengan

Uniform Resource Locator (URL) Untuk tiap web memiliki alamat yang berbeda dan unik (IP)

Sebuah web mempunyai URL dengan skema terdiri dari nama web server itu sendiri dan alamatnya

Ada beberapa jenis protocol harus dikenal di internet yaitu

bull FTP (File Transfer Protocol)bull Telnetbull Gopherbull POP3-mail bull IRC (internet Relay Chatbull HTTP (Hypertext Transfer Protocol)

TUGAS

Jelaskan arti dan fungsi dari Protokol diatas

BROWSER

bull Fungsi dari browser adalah untuk mengirimkan dan mengambil data dari sebuah web server kemudian menerjemahkan bahasa HTML dari web server tersebut yang hasilnya kemudian ditampilkan pada layer monitor

bull Browser yang paling banyak digunakan sekarang adalah Microsoft Internet Explorer (IE) FireFox Opera Crome dll

HTML (HyperText Markup Language)

bull HTML merupakan satu-satunya bahasa pemrograman yang digunakan untuk merancang halaman web Fasilitas yang telah didukung oleh HTML adalah kemampuan untuk menampilkan teks gambar frame multimedia

bull HTML memiliki banyak kekurangan hingga HTML dikembangkan sedemikian rupa sehingga ke dalam HTML tersebut dapat ditambahkan suatu bahasa pemrograman script (scriptinglanguage) yang dapat digunakan untuk meningkatkan kemampuan perancangan sebuah halaman web

Beberapa Istilah dalam Internet

1 Upload Download File

2 HTML Editor

Ada beberapa HTML Editor yang dapat Anda gunakan yaitu MicrosoftFrontPage notepad Adobe PagemillMacromedia Dreamweaver Macromedia Dreamweaver Ultradev dll Kebanyakan dari HTML Editor ini sifatnya adalah WYSIWYG (What You See Is What You Get)

3 Komponen dari suatu browserbull 1 Balok Title window 2 Menu Browser 3 Indikator loading

halaman HTML 4 Navigator Button 5 Alamat URL 6 Frame window 7 ScrollBar window 8 Status window 9 Koneksi Browser

8

BAB II

TAG HTML

9

PENDAHULUAN

bull Sebuah dokumen HTML berisi elemen-elemen kode HTML yang disebut HTML Tag

bull Penulisannya diapit oleh apa yang disebut delimiter (pembatas) Atau suatu karakter atau kumpulan karakter yang mengawali dan mengakhiri suatu tag

bull Untuk HTML delimiter yang dipakai adalah dengan karakter lt dan gt Sebuah kode program HTML selalu diawali dan diakhiri dengan sebuah tagContoh tag

ltHTMLgt

-----Kode program

ltHTMLgt

10

bull HTML dibagi menjadi 2 bagian yaitu body (badan) dan head (kepala) Bagian head ditandai dengan tag ltHEADgt sedangkan bagian body ditandai dengan tag ltBODYgt

bull Bagian head digunakan untuk menyimpan informasi mengenai dokumen tersebut misalnya judul nama penulis komentarV

bull Sedangkan bagian body digunakan untuk menuliskan isi utama dari dokumen web tersebut

Contoh dari tag dokumen web sederhana (Aktifkan NotePad)ltHTMLgt

ltHEADgtltH1gtPelatihan WEB dasarltH1gt

ltHEADgt

ltBODYgt

Selamat datang ke pelatihan web dasar

ltBODYgt

ltHTMLgt

11

Tag dasar HTML

12

5 ltBgt hellip ltBgt Membuat tulisan tebal (Bold Text )

6 ltPgt hellip ltPgtMerupakan perintah paragraph yang termasuk diantaranya pengaturan posisi tulisan indentansi dan jarak Antara lain seperti berikut

ndash ltP ALIGN=rdquoleftrdquogt hellip ltPgt 1048774 untuk pengaturan paragraph rapat kiri (left)

ndash ltP ALIGN=rdquocenterrdquogt hellip ltPgt 1048774 untuk pengaturan paragraph di tengah (center)

ndash ltP ALIGN=rdquorightrdquogt hellip ltPgt 1048774 untuk pengaturan paragraph rapat kanan (right)

7 ltBRgtndash Untuk memberikan baris baru pergantian baris Diletakkan pada

bagian teks yang mau berganti baris

8 ltAgt hellip ltAgtndash Membuat link antar dua halaman web

9 ltIMG SRC=rdquogambarjpgrdquo hellip gthellipltIMGgtndash Jika Anda ingin meletakkan gambar file photo di web Anda maka

dapat dilakukan dengan memberikan tag ini

13

Latihan 2bull Rancanglah sebuah web dgn tampilan

seperti gambar ini

14

bull ltHTMLgtbull ltHEADgtltH2gtSELAMAT DATANG DI SMK NEGERI 3

PEMATANGSIANTARltH2gtbull ltHEADgtbull ltBODYgtbull ltH1gt--------------------------------------------------------------------ltH1gtbull ltH1gtJALAN MEDAN KM 105 PEMATANGSIANTARltH1gtbull ltH2gtKOMPETENSI KEAHLIANltH2gtbull ltH3gt1 PERHOTELANltH3gtbull ltH4gt2 REKAYASA PERANGKAT LUNAKltH4gtbull ltH5gt3 TATA BUSANA DAN KECANTIKANltH5gtbull ltBODYgtbull ltHTMLgt

15

10 Pengaturan bentuk ukuran dan warna tulisan

ndash Pengaturannya dilakukan dengan tag-tag seperti contoh berikut

16

11 ltHRgtndash Pemberian tag ini bertujuan untuk membuat garis horizontal pada dokumen

web Dapat diberikan attribute seperti pada atribut gambar image

12 Tag Tabelndash Untuk membuat tabel di dokumen web dapat dilakukan dengan memberikan

tag-tag Tabel Dalam tag-tag tabel ini terdiri dari beberapa tag seperti contoh berikut

ndash Untuk membuat tabel seperti tampak di bawah ini ndash Sel 1 baris 1 Sel 2 baris 1 Sel 3 baris 1 Sel 4 baris 1ndash Sel 1 baris 2 Sel 2 baris 2 Sel 3 baris 2 Sel 4 baris 2

Maka tag yang harus ditulis adalah sbbndash lttable border=1gtndash lttrgt lt--baris 1 awal--gtndash lttdgtSel 1 baris 1lttdgtndash lttdgtSel 2 baris 1lttdgtndash lttdgtSel 3 baris 1lttdgtndash lttdgtSel 4 baris 1lttdgtndash lttrgt lt--baris 1 akhir--gt

17

bull lttable border=1gtbull lttrgt lt--baris 1 awal--gtbull lttdgtSel 1 baris 1lttdgtbull lttdgtSel 2 baris 1lttdgtbull lttdgtSel 3 baris 1lttdgtbull lttdgtSel 4 baris 1lttdgtbull lttrgt lt--baris 1 akhir--gtbull lttrgt lt--baris 2 awal--gtbull lttdgtSel 1 baris 2lttdgtbull lttdgtSel 2 baris 2lttdgtbull lttdgtSel 3 baris 2lttdgtbull lttdgtSel 4 baris 2lttdgtbull lttrgt lt--baris 2 akhir--gtbull lttablegt

18

Prinsip-prinsip Desain Web

1 Fokus pada kebutuhan

2 Efisien dalam menggunakan sumber daya

3 Mendukung navigasi

4 Buatlah halaman Web senyaman dan seramahmungkin

5 Mendukung interaksi bila diperlukan

19

lthtmlgt

ltheadgt

lttitlegtAtribut dari Tag Fontlttitlegt

ltheadgt

ltbodygt

ltpgtltfont face=ArialgtIni Font Arialltfontgtltpgt

ltpgtltfont face=ArialgtltigtIni Font Arial dan miringltigtltfontgtltpgt

ltpgtltfont face=verdana size=4 color=bluegtltbgtIni Font Verdana berukuran 12 pt

berwarna biru sekaligus teballtbgtltfontgt

ltp align=centergtltfont face=Tahoma color=redgtltbgtIni Font Tahoma berwarna

merah tebal dan berada di tengahltbgtltfontgtltpgt

ltp align=centergtltfont face=Arial color=redgtIni Font Arial berwarna Merah

ltfontgtltfont face=Verdana color=bluegtSedangkan ini adalah font Verdana

berwarna birultfontgtltpgt

ltbodygt

lthtmlgt

Fungsi tag ltfontgt adalah untuk memanipulasi baik jenis ukuran dan warna huruf

20

F Tag ltselectgtltselectgt dan ltoption

Tag select tidak bisa berdiri sendiri dan harus menggandeng tag option untuk dapat menampilkan output

Dan cara kerjanya hampir sama dengan tag radio hanya saja tag select lebih singkat

21

Tag FORMbull Tag ltformgt berguna untuk mengirimkan(mem-

post) variabel yang bersisi data ke file tujuan yang memproses variabel tersebut Tag-tag yang biasa digunakan bersama tag form adalah tag ltinputgt dan lttextareagt

Tag ltinputgtbull Tag ltinputgt memiliki atribut type yang fungsinya

sangat vital dalam output tampilan Isi dari atribut type dapat menentukan jenis tampilan apakah itu textbox password box checkboxradio button dan sebagainya

22

Tag ltselectgtltselectgt dan ltoptiongtbull Tag select tidak bisa berdiri sendiri dan harus menggandeng tag option untuk dapat menampilkan output Dan

cara kerjanya hampir sama dengan tag radio hanya saja tag select lebih singkat

lthtmlgt

ltheadgt

lttitlegtPropeti tag Select dan Optionlttitlegt

ltheadgt

ltbodygt

ltpgtltbgtPenggunaan select dan dan optionltbgtltpgt

ltpgtDaftar kategori silahkan pilih kategoriltpgt

ltform action=cobaphp method=postgt

Kategori ltselect name=Pilihangt

ltoption value=Kategori 1gtKategori 1

ltoption value=Kategori 2gtKategori 2

ltoption value=Kategori 3gtKategori 3

ltselectgt

ltpgtltinput type=submit value=KIRIMgtltpgt

ltformgt

ltbodygt

lthtmlgt

23

Tag ltimggt

bull Untuk menampilkan gambar pada halaman dapat digunakan tag ltimggt Format file yang dapat didukung oleh tag img bermacam-macam mulai BMP JPG GIF TGA dan lain-lainTag img memiliki beberapa atribut yaitu ndash ‐ src letak file gambar yang akan ditampilkanndash ‐ border tebal bingkai gambarndash ‐ height menentukan tinggi imagegambarndash ‐ width menentukan lebar imagegambar

24

bull lthtmlgtbull ltheadgtbull lttitlegtAtribut dari Tag imglttitlegtbull ltheadgtbull ltbodygtbull ltpgtltbgtTag img hanya dengan atribut ltigtsrcltigtltbgtltpgtbull ltpgtltimg src=fileD|Hydrangeasjpg border=10gtltpgtbull ltpgtltimg src=fileC|UsersPublicPicturesSample

Picturestulipsjpg width=400 height=300gtltpgtbull ltbodygtbull lthtmlgt

TUGAS

Jelaskan arti dan fungsi dari Protokol1 FTP (File Transfer Protocol)2 Telnet3 Gopher4 POP3-mail 5 IRC (internet Relay Chat6 HTTP (Hypertext Transfer Protocol)

• HTML Basic
• Pendahuluan
• Ada beberapa jenis protocol harus dikenal di internet yaitu
• BROWSER
• HTML (HyperText Markup Language)
• Beberapa Istilah dalam Internet
• Slide 7
• BAB II
• PENDAHULUAN
• Slide 10
• Tag dasar HTML
• Slide 12
• Latihan 2
• Slide 14
• Slide 15
• Slide 16
• Slide 17
• Prinsip-prinsip Desain Web
• Fungsi tag ltfontgt adalah untuk memanipulasi baik jenis ukuran
• F Tag ltselectgtltselectgt dan ltoption
• Slide 21
• Slide 22
• Tag ltimggt
• Slide 24
• TUGAS

Ada beberapa jenis protocol harus dikenal di internet yaitu

bull FTP (File Transfer Protocol)bull Telnetbull Gopherbull POP3-mail bull IRC (internet Relay Chatbull HTTP (Hypertext Transfer Protocol)

TUGAS

Jelaskan arti dan fungsi dari Protokol diatas

BROWSER

bull Fungsi dari browser adalah untuk mengirimkan dan mengambil data dari sebuah web server kemudian menerjemahkan bahasa HTML dari web server tersebut yang hasilnya kemudian ditampilkan pada layer monitor

bull Browser yang paling banyak digunakan sekarang adalah Microsoft Internet Explorer (IE) FireFox Opera Crome dll

HTML (HyperText Markup Language)

bull HTML merupakan satu-satunya bahasa pemrograman yang digunakan untuk merancang halaman web Fasilitas yang telah didukung oleh HTML adalah kemampuan untuk menampilkan teks gambar frame multimedia

bull HTML memiliki banyak kekurangan hingga HTML dikembangkan sedemikian rupa sehingga ke dalam HTML tersebut dapat ditambahkan suatu bahasa pemrograman script (scriptinglanguage) yang dapat digunakan untuk meningkatkan kemampuan perancangan sebuah halaman web

Beberapa Istilah dalam Internet

1 Upload Download File

2 HTML Editor

Ada beberapa HTML Editor yang dapat Anda gunakan yaitu MicrosoftFrontPage notepad Adobe PagemillMacromedia Dreamweaver Macromedia Dreamweaver Ultradev dll Kebanyakan dari HTML Editor ini sifatnya adalah WYSIWYG (What You See Is What You Get)

3 Komponen dari suatu browserbull 1 Balok Title window 2 Menu Browser 3 Indikator loading

halaman HTML 4 Navigator Button 5 Alamat URL 6 Frame window 7 ScrollBar window 8 Status window 9 Koneksi Browser

8

BAB II

TAG HTML

9

PENDAHULUAN

bull Sebuah dokumen HTML berisi elemen-elemen kode HTML yang disebut HTML Tag

bull Penulisannya diapit oleh apa yang disebut delimiter (pembatas) Atau suatu karakter atau kumpulan karakter yang mengawali dan mengakhiri suatu tag

bull Untuk HTML delimiter yang dipakai adalah dengan karakter lt dan gt Sebuah kode program HTML selalu diawali dan diakhiri dengan sebuah tagContoh tag

ltHTMLgt

-----Kode program

ltHTMLgt

10

bull HTML dibagi menjadi 2 bagian yaitu body (badan) dan head (kepala) Bagian head ditandai dengan tag ltHEADgt sedangkan bagian body ditandai dengan tag ltBODYgt

bull Bagian head digunakan untuk menyimpan informasi mengenai dokumen tersebut misalnya judul nama penulis komentarV

bull Sedangkan bagian body digunakan untuk menuliskan isi utama dari dokumen web tersebut

Contoh dari tag dokumen web sederhana (Aktifkan NotePad)ltHTMLgt

ltHEADgtltH1gtPelatihan WEB dasarltH1gt

ltHEADgt

ltBODYgt

Selamat datang ke pelatihan web dasar

ltBODYgt

ltHTMLgt

11

Tag dasar HTML

12

5 ltBgt hellip ltBgt Membuat tulisan tebal (Bold Text )

6 ltPgt hellip ltPgtMerupakan perintah paragraph yang termasuk diantaranya pengaturan posisi tulisan indentansi dan jarak Antara lain seperti berikut

ndash ltP ALIGN=rdquoleftrdquogt hellip ltPgt 1048774 untuk pengaturan paragraph rapat kiri (left)

ndash ltP ALIGN=rdquocenterrdquogt hellip ltPgt 1048774 untuk pengaturan paragraph di tengah (center)

ndash ltP ALIGN=rdquorightrdquogt hellip ltPgt 1048774 untuk pengaturan paragraph rapat kanan (right)

7 ltBRgtndash Untuk memberikan baris baru pergantian baris Diletakkan pada

bagian teks yang mau berganti baris

8 ltAgt hellip ltAgtndash Membuat link antar dua halaman web

9 ltIMG SRC=rdquogambarjpgrdquo hellip gthellipltIMGgtndash Jika Anda ingin meletakkan gambar file photo di web Anda maka

dapat dilakukan dengan memberikan tag ini

13

Latihan 2bull Rancanglah sebuah web dgn tampilan

seperti gambar ini

14

bull ltHTMLgtbull ltHEADgtltH2gtSELAMAT DATANG DI SMK NEGERI 3

PEMATANGSIANTARltH2gtbull ltHEADgtbull ltBODYgtbull ltH1gt--------------------------------------------------------------------ltH1gtbull ltH1gtJALAN MEDAN KM 105 PEMATANGSIANTARltH1gtbull ltH2gtKOMPETENSI KEAHLIANltH2gtbull ltH3gt1 PERHOTELANltH3gtbull ltH4gt2 REKAYASA PERANGKAT LUNAKltH4gtbull ltH5gt3 TATA BUSANA DAN KECANTIKANltH5gtbull ltBODYgtbull ltHTMLgt

15

10 Pengaturan bentuk ukuran dan warna tulisan

ndash Pengaturannya dilakukan dengan tag-tag seperti contoh berikut

16

11 ltHRgtndash Pemberian tag ini bertujuan untuk membuat garis horizontal pada dokumen

web Dapat diberikan attribute seperti pada atribut gambar image

12 Tag Tabelndash Untuk membuat tabel di dokumen web dapat dilakukan dengan memberikan

tag-tag Tabel Dalam tag-tag tabel ini terdiri dari beberapa tag seperti contoh berikut

ndash Untuk membuat tabel seperti tampak di bawah ini ndash Sel 1 baris 1 Sel 2 baris 1 Sel 3 baris 1 Sel 4 baris 1ndash Sel 1 baris 2 Sel 2 baris 2 Sel 3 baris 2 Sel 4 baris 2

Maka tag yang harus ditulis adalah sbbndash lttable border=1gtndash lttrgt lt--baris 1 awal--gtndash lttdgtSel 1 baris 1lttdgtndash lttdgtSel 2 baris 1lttdgtndash lttdgtSel 3 baris 1lttdgtndash lttdgtSel 4 baris 1lttdgtndash lttrgt lt--baris 1 akhir--gt

17

bull lttable border=1gtbull lttrgt lt--baris 1 awal--gtbull lttdgtSel 1 baris 1lttdgtbull lttdgtSel 2 baris 1lttdgtbull lttdgtSel 3 baris 1lttdgtbull lttdgtSel 4 baris 1lttdgtbull lttrgt lt--baris 1 akhir--gtbull lttrgt lt--baris 2 awal--gtbull lttdgtSel 1 baris 2lttdgtbull lttdgtSel 2 baris 2lttdgtbull lttdgtSel 3 baris 2lttdgtbull lttdgtSel 4 baris 2lttdgtbull lttrgt lt--baris 2 akhir--gtbull lttablegt

18

Prinsip-prinsip Desain Web

1 Fokus pada kebutuhan

2 Efisien dalam menggunakan sumber daya

3 Mendukung navigasi

4 Buatlah halaman Web senyaman dan seramahmungkin

5 Mendukung interaksi bila diperlukan

19

lthtmlgt

ltheadgt

lttitlegtAtribut dari Tag Fontlttitlegt

ltheadgt

ltbodygt

ltpgtltfont face=ArialgtIni Font Arialltfontgtltpgt

ltpgtltfont face=ArialgtltigtIni Font Arial dan miringltigtltfontgtltpgt

ltpgtltfont face=verdana size=4 color=bluegtltbgtIni Font Verdana berukuran 12 pt

berwarna biru sekaligus teballtbgtltfontgt

ltp align=centergtltfont face=Tahoma color=redgtltbgtIni Font Tahoma berwarna

merah tebal dan berada di tengahltbgtltfontgtltpgt

ltp align=centergtltfont face=Arial color=redgtIni Font Arial berwarna Merah

ltfontgtltfont face=Verdana color=bluegtSedangkan ini adalah font Verdana

berwarna birultfontgtltpgt

ltbodygt

lthtmlgt

Fungsi tag ltfontgt adalah untuk memanipulasi baik jenis ukuran dan warna huruf

20

F Tag ltselectgtltselectgt dan ltoption

Tag select tidak bisa berdiri sendiri dan harus menggandeng tag option untuk dapat menampilkan output

Dan cara kerjanya hampir sama dengan tag radio hanya saja tag select lebih singkat

21

Tag FORMbull Tag ltformgt berguna untuk mengirimkan(mem-

post) variabel yang bersisi data ke file tujuan yang memproses variabel tersebut Tag-tag yang biasa digunakan bersama tag form adalah tag ltinputgt dan lttextareagt

Tag ltinputgtbull Tag ltinputgt memiliki atribut type yang fungsinya

sangat vital dalam output tampilan Isi dari atribut type dapat menentukan jenis tampilan apakah itu textbox password box checkboxradio button dan sebagainya

22

Tag ltselectgtltselectgt dan ltoptiongtbull Tag select tidak bisa berdiri sendiri dan harus menggandeng tag option untuk dapat menampilkan output Dan

cara kerjanya hampir sama dengan tag radio hanya saja tag select lebih singkat

lthtmlgt

ltheadgt

lttitlegtPropeti tag Select dan Optionlttitlegt

ltheadgt

ltbodygt

ltpgtltbgtPenggunaan select dan dan optionltbgtltpgt

ltpgtDaftar kategori silahkan pilih kategoriltpgt

ltform action=cobaphp method=postgt

Kategori ltselect name=Pilihangt

ltoption value=Kategori 1gtKategori 1

ltoption value=Kategori 2gtKategori 2

ltoption value=Kategori 3gtKategori 3

ltselectgt

ltpgtltinput type=submit value=KIRIMgtltpgt

ltformgt

ltbodygt

lthtmlgt

23

Tag ltimggt

bull Untuk menampilkan gambar pada halaman dapat digunakan tag ltimggt Format file yang dapat didukung oleh tag img bermacam-macam mulai BMP JPG GIF TGA dan lain-lainTag img memiliki beberapa atribut yaitu ndash ‐ src letak file gambar yang akan ditampilkanndash ‐ border tebal bingkai gambarndash ‐ height menentukan tinggi imagegambarndash ‐ width menentukan lebar imagegambar

24

bull lthtmlgtbull ltheadgtbull lttitlegtAtribut dari Tag imglttitlegtbull ltheadgtbull ltbodygtbull ltpgtltbgtTag img hanya dengan atribut ltigtsrcltigtltbgtltpgtbull ltpgtltimg src=fileD|Hydrangeasjpg border=10gtltpgtbull ltpgtltimg src=fileC|UsersPublicPicturesSample

Picturestulipsjpg width=400 height=300gtltpgtbull ltbodygtbull lthtmlgt

TUGAS

Jelaskan arti dan fungsi dari Protokol1 FTP (File Transfer Protocol)2 Telnet3 Gopher4 POP3-mail 5 IRC (internet Relay Chat6 HTTP (Hypertext Transfer Protocol)

• HTML Basic
• Pendahuluan
• Ada beberapa jenis protocol harus dikenal di internet yaitu
• BROWSER
• HTML (HyperText Markup Language)
• Beberapa Istilah dalam Internet
• Slide 7
• BAB II
• PENDAHULUAN
• Slide 10
• Tag dasar HTML
• Slide 12
• Latihan 2
• Slide 14
• Slide 15
• Slide 16
• Slide 17
• Prinsip-prinsip Desain Web
• Fungsi tag ltfontgt adalah untuk memanipulasi baik jenis ukuran
• F Tag ltselectgtltselectgt dan ltoption
• Slide 21
• Slide 22
• Tag ltimggt
• Slide 24
• TUGAS

BROWSER

bull Fungsi dari browser adalah untuk mengirimkan dan mengambil data dari sebuah web server kemudian menerjemahkan bahasa HTML dari web server tersebut yang hasilnya kemudian ditampilkan pada layer monitor

bull Browser yang paling banyak digunakan sekarang adalah Microsoft Internet Explorer (IE) FireFox Opera Crome dll

HTML (HyperText Markup Language)

bull HTML merupakan satu-satunya bahasa pemrograman yang digunakan untuk merancang halaman web Fasilitas yang telah didukung oleh HTML adalah kemampuan untuk menampilkan teks gambar frame multimedia

bull HTML memiliki banyak kekurangan hingga HTML dikembangkan sedemikian rupa sehingga ke dalam HTML tersebut dapat ditambahkan suatu bahasa pemrograman script (scriptinglanguage) yang dapat digunakan untuk meningkatkan kemampuan perancangan sebuah halaman web

Beberapa Istilah dalam Internet

1 Upload Download File

2 HTML Editor

Ada beberapa HTML Editor yang dapat Anda gunakan yaitu MicrosoftFrontPage notepad Adobe PagemillMacromedia Dreamweaver Macromedia Dreamweaver Ultradev dll Kebanyakan dari HTML Editor ini sifatnya adalah WYSIWYG (What You See Is What You Get)

3 Komponen dari suatu browserbull 1 Balok Title window 2 Menu Browser 3 Indikator loading

halaman HTML 4 Navigator Button 5 Alamat URL 6 Frame window 7 ScrollBar window 8 Status window 9 Koneksi Browser

8

BAB II

TAG HTML

9

PENDAHULUAN

bull Sebuah dokumen HTML berisi elemen-elemen kode HTML yang disebut HTML Tag

bull Penulisannya diapit oleh apa yang disebut delimiter (pembatas) Atau suatu karakter atau kumpulan karakter yang mengawali dan mengakhiri suatu tag

bull Untuk HTML delimiter yang dipakai adalah dengan karakter lt dan gt Sebuah kode program HTML selalu diawali dan diakhiri dengan sebuah tagContoh tag

ltHTMLgt

-----Kode program

ltHTMLgt

10

bull HTML dibagi menjadi 2 bagian yaitu body (badan) dan head (kepala) Bagian head ditandai dengan tag ltHEADgt sedangkan bagian body ditandai dengan tag ltBODYgt

bull Bagian head digunakan untuk menyimpan informasi mengenai dokumen tersebut misalnya judul nama penulis komentarV

bull Sedangkan bagian body digunakan untuk menuliskan isi utama dari dokumen web tersebut

Contoh dari tag dokumen web sederhana (Aktifkan NotePad)ltHTMLgt

ltHEADgtltH1gtPelatihan WEB dasarltH1gt

ltHEADgt

ltBODYgt

Selamat datang ke pelatihan web dasar

ltBODYgt

ltHTMLgt

11

Tag dasar HTML

12

5 ltBgt hellip ltBgt Membuat tulisan tebal (Bold Text )

6 ltPgt hellip ltPgtMerupakan perintah paragraph yang termasuk diantaranya pengaturan posisi tulisan indentansi dan jarak Antara lain seperti berikut

ndash ltP ALIGN=rdquoleftrdquogt hellip ltPgt 1048774 untuk pengaturan paragraph rapat kiri (left)

ndash ltP ALIGN=rdquocenterrdquogt hellip ltPgt 1048774 untuk pengaturan paragraph di tengah (center)

ndash ltP ALIGN=rdquorightrdquogt hellip ltPgt 1048774 untuk pengaturan paragraph rapat kanan (right)

7 ltBRgtndash Untuk memberikan baris baru pergantian baris Diletakkan pada

bagian teks yang mau berganti baris

8 ltAgt hellip ltAgtndash Membuat link antar dua halaman web

9 ltIMG SRC=rdquogambarjpgrdquo hellip gthellipltIMGgtndash Jika Anda ingin meletakkan gambar file photo di web Anda maka

dapat dilakukan dengan memberikan tag ini

13

Latihan 2bull Rancanglah sebuah web dgn tampilan

seperti gambar ini

14

bull ltHTMLgtbull ltHEADgtltH2gtSELAMAT DATANG DI SMK NEGERI 3

PEMATANGSIANTARltH2gtbull ltHEADgtbull ltBODYgtbull ltH1gt--------------------------------------------------------------------ltH1gtbull ltH1gtJALAN MEDAN KM 105 PEMATANGSIANTARltH1gtbull ltH2gtKOMPETENSI KEAHLIANltH2gtbull ltH3gt1 PERHOTELANltH3gtbull ltH4gt2 REKAYASA PERANGKAT LUNAKltH4gtbull ltH5gt3 TATA BUSANA DAN KECANTIKANltH5gtbull ltBODYgtbull ltHTMLgt

15

10 Pengaturan bentuk ukuran dan warna tulisan

ndash Pengaturannya dilakukan dengan tag-tag seperti contoh berikut

16

11 ltHRgtndash Pemberian tag ini bertujuan untuk membuat garis horizontal pada dokumen

web Dapat diberikan attribute seperti pada atribut gambar image

12 Tag Tabelndash Untuk membuat tabel di dokumen web dapat dilakukan dengan memberikan

tag-tag Tabel Dalam tag-tag tabel ini terdiri dari beberapa tag seperti contoh berikut

ndash Untuk membuat tabel seperti tampak di bawah ini ndash Sel 1 baris 1 Sel 2 baris 1 Sel 3 baris 1 Sel 4 baris 1ndash Sel 1 baris 2 Sel 2 baris 2 Sel 3 baris 2 Sel 4 baris 2

Maka tag yang harus ditulis adalah sbbndash lttable border=1gtndash lttrgt lt--baris 1 awal--gtndash lttdgtSel 1 baris 1lttdgtndash lttdgtSel 2 baris 1lttdgtndash lttdgtSel 3 baris 1lttdgtndash lttdgtSel 4 baris 1lttdgtndash lttrgt lt--baris 1 akhir--gt

17

bull lttable border=1gtbull lttrgt lt--baris 1 awal--gtbull lttdgtSel 1 baris 1lttdgtbull lttdgtSel 2 baris 1lttdgtbull lttdgtSel 3 baris 1lttdgtbull lttdgtSel 4 baris 1lttdgtbull lttrgt lt--baris 1 akhir--gtbull lttrgt lt--baris 2 awal--gtbull lttdgtSel 1 baris 2lttdgtbull lttdgtSel 2 baris 2lttdgtbull lttdgtSel 3 baris 2lttdgtbull lttdgtSel 4 baris 2lttdgtbull lttrgt lt--baris 2 akhir--gtbull lttablegt

18

Prinsip-prinsip Desain Web

1 Fokus pada kebutuhan

2 Efisien dalam menggunakan sumber daya

3 Mendukung navigasi

4 Buatlah halaman Web senyaman dan seramahmungkin

5 Mendukung interaksi bila diperlukan

19

lthtmlgt

ltheadgt

lttitlegtAtribut dari Tag Fontlttitlegt

ltheadgt

ltbodygt

ltpgtltfont face=ArialgtIni Font Arialltfontgtltpgt

ltpgtltfont face=ArialgtltigtIni Font Arial dan miringltigtltfontgtltpgt

ltpgtltfont face=verdana size=4 color=bluegtltbgtIni Font Verdana berukuran 12 pt

berwarna biru sekaligus teballtbgtltfontgt

ltp align=centergtltfont face=Tahoma color=redgtltbgtIni Font Tahoma berwarna

merah tebal dan berada di tengahltbgtltfontgtltpgt

ltp align=centergtltfont face=Arial color=redgtIni Font Arial berwarna Merah

ltfontgtltfont face=Verdana color=bluegtSedangkan ini adalah font Verdana

berwarna birultfontgtltpgt

ltbodygt

lthtmlgt

Fungsi tag ltfontgt adalah untuk memanipulasi baik jenis ukuran dan warna huruf

20

F Tag ltselectgtltselectgt dan ltoption

Tag select tidak bisa berdiri sendiri dan harus menggandeng tag option untuk dapat menampilkan output

Dan cara kerjanya hampir sama dengan tag radio hanya saja tag select lebih singkat

21

Tag FORMbull Tag ltformgt berguna untuk mengirimkan(mem-

post) variabel yang bersisi data ke file tujuan yang memproses variabel tersebut Tag-tag yang biasa digunakan bersama tag form adalah tag ltinputgt dan lttextareagt

Tag ltinputgtbull Tag ltinputgt memiliki atribut type yang fungsinya

sangat vital dalam output tampilan Isi dari atribut type dapat menentukan jenis tampilan apakah itu textbox password box checkboxradio button dan sebagainya

22

Tag ltselectgtltselectgt dan ltoptiongtbull Tag select tidak bisa berdiri sendiri dan harus menggandeng tag option untuk dapat menampilkan output Dan

cara kerjanya hampir sama dengan tag radio hanya saja tag select lebih singkat

lthtmlgt

ltheadgt

lttitlegtPropeti tag Select dan Optionlttitlegt

ltheadgt

ltbodygt

ltpgtltbgtPenggunaan select dan dan optionltbgtltpgt

ltpgtDaftar kategori silahkan pilih kategoriltpgt

ltform action=cobaphp method=postgt

Kategori ltselect name=Pilihangt

ltoption value=Kategori 1gtKategori 1

ltoption value=Kategori 2gtKategori 2

ltoption value=Kategori 3gtKategori 3

ltselectgt

ltpgtltinput type=submit value=KIRIMgtltpgt

ltformgt

ltbodygt

lthtmlgt

23

Tag ltimggt

bull Untuk menampilkan gambar pada halaman dapat digunakan tag ltimggt Format file yang dapat didukung oleh tag img bermacam-macam mulai BMP JPG GIF TGA dan lain-lainTag img memiliki beberapa atribut yaitu ndash ‐ src letak file gambar yang akan ditampilkanndash ‐ border tebal bingkai gambarndash ‐ height menentukan tinggi imagegambarndash ‐ width menentukan lebar imagegambar

24

bull lthtmlgtbull ltheadgtbull lttitlegtAtribut dari Tag imglttitlegtbull ltheadgtbull ltbodygtbull ltpgtltbgtTag img hanya dengan atribut ltigtsrcltigtltbgtltpgtbull ltpgtltimg src=fileD|Hydrangeasjpg border=10gtltpgtbull ltpgtltimg src=fileC|UsersPublicPicturesSample

Picturestulipsjpg width=400 height=300gtltpgtbull ltbodygtbull lthtmlgt

TUGAS

Jelaskan arti dan fungsi dari Protokol1 FTP (File Transfer Protocol)2 Telnet3 Gopher4 POP3-mail 5 IRC (internet Relay Chat6 HTTP (Hypertext Transfer Protocol)

• HTML Basic
• Pendahuluan
• Ada beberapa jenis protocol harus dikenal di internet yaitu
• BROWSER
• HTML (HyperText Markup Language)
• Beberapa Istilah dalam Internet
• Slide 7
• BAB II
• PENDAHULUAN
• Slide 10
• Tag dasar HTML
• Slide 12
• Latihan 2
• Slide 14
• Slide 15
• Slide 16
• Slide 17
• Prinsip-prinsip Desain Web
• Fungsi tag ltfontgt adalah untuk memanipulasi baik jenis ukuran
• F Tag ltselectgtltselectgt dan ltoption
• Slide 21
• Slide 22
• Tag ltimggt
• Slide 24
• TUGAS

HTML (HyperText Markup Language)

bull HTML merupakan satu-satunya bahasa pemrograman yang digunakan untuk merancang halaman web Fasilitas yang telah didukung oleh HTML adalah kemampuan untuk menampilkan teks gambar frame multimedia

bull HTML memiliki banyak kekurangan hingga HTML dikembangkan sedemikian rupa sehingga ke dalam HTML tersebut dapat ditambahkan suatu bahasa pemrograman script (scriptinglanguage) yang dapat digunakan untuk meningkatkan kemampuan perancangan sebuah halaman web

Beberapa Istilah dalam Internet

1 Upload Download File

2 HTML Editor

Ada beberapa HTML Editor yang dapat Anda gunakan yaitu MicrosoftFrontPage notepad Adobe PagemillMacromedia Dreamweaver Macromedia Dreamweaver Ultradev dll Kebanyakan dari HTML Editor ini sifatnya adalah WYSIWYG (What You See Is What You Get)

3 Komponen dari suatu browserbull 1 Balok Title window 2 Menu Browser 3 Indikator loading

halaman HTML 4 Navigator Button 5 Alamat URL 6 Frame window 7 ScrollBar window 8 Status window 9 Koneksi Browser

8

BAB II

TAG HTML

9

PENDAHULUAN

bull Sebuah dokumen HTML berisi elemen-elemen kode HTML yang disebut HTML Tag

bull Penulisannya diapit oleh apa yang disebut delimiter (pembatas) Atau suatu karakter atau kumpulan karakter yang mengawali dan mengakhiri suatu tag

bull Untuk HTML delimiter yang dipakai adalah dengan karakter lt dan gt Sebuah kode program HTML selalu diawali dan diakhiri dengan sebuah tagContoh tag

ltHTMLgt

-----Kode program

ltHTMLgt

10

bull HTML dibagi menjadi 2 bagian yaitu body (badan) dan head (kepala) Bagian head ditandai dengan tag ltHEADgt sedangkan bagian body ditandai dengan tag ltBODYgt

bull Bagian head digunakan untuk menyimpan informasi mengenai dokumen tersebut misalnya judul nama penulis komentarV

bull Sedangkan bagian body digunakan untuk menuliskan isi utama dari dokumen web tersebut

Contoh dari tag dokumen web sederhana (Aktifkan NotePad)ltHTMLgt

ltHEADgtltH1gtPelatihan WEB dasarltH1gt

ltHEADgt

ltBODYgt

Selamat datang ke pelatihan web dasar

ltBODYgt

ltHTMLgt

11

Tag dasar HTML

12

5 ltBgt hellip ltBgt Membuat tulisan tebal (Bold Text )

6 ltPgt hellip ltPgtMerupakan perintah paragraph yang termasuk diantaranya pengaturan posisi tulisan indentansi dan jarak Antara lain seperti berikut

ndash ltP ALIGN=rdquoleftrdquogt hellip ltPgt 1048774 untuk pengaturan paragraph rapat kiri (left)

ndash ltP ALIGN=rdquocenterrdquogt hellip ltPgt 1048774 untuk pengaturan paragraph di tengah (center)

ndash ltP ALIGN=rdquorightrdquogt hellip ltPgt 1048774 untuk pengaturan paragraph rapat kanan (right)

7 ltBRgtndash Untuk memberikan baris baru pergantian baris Diletakkan pada

bagian teks yang mau berganti baris

8 ltAgt hellip ltAgtndash Membuat link antar dua halaman web

9 ltIMG SRC=rdquogambarjpgrdquo hellip gthellipltIMGgtndash Jika Anda ingin meletakkan gambar file photo di web Anda maka

dapat dilakukan dengan memberikan tag ini

13

Latihan 2bull Rancanglah sebuah web dgn tampilan

seperti gambar ini

14

bull ltHTMLgtbull ltHEADgtltH2gtSELAMAT DATANG DI SMK NEGERI 3

PEMATANGSIANTARltH2gtbull ltHEADgtbull ltBODYgtbull ltH1gt--------------------------------------------------------------------ltH1gtbull ltH1gtJALAN MEDAN KM 105 PEMATANGSIANTARltH1gtbull ltH2gtKOMPETENSI KEAHLIANltH2gtbull ltH3gt1 PERHOTELANltH3gtbull ltH4gt2 REKAYASA PERANGKAT LUNAKltH4gtbull ltH5gt3 TATA BUSANA DAN KECANTIKANltH5gtbull ltBODYgtbull ltHTMLgt

15

10 Pengaturan bentuk ukuran dan warna tulisan

ndash Pengaturannya dilakukan dengan tag-tag seperti contoh berikut

16

11 ltHRgtndash Pemberian tag ini bertujuan untuk membuat garis horizontal pada dokumen

web Dapat diberikan attribute seperti pada atribut gambar image

12 Tag Tabelndash Untuk membuat tabel di dokumen web dapat dilakukan dengan memberikan

tag-tag Tabel Dalam tag-tag tabel ini terdiri dari beberapa tag seperti contoh berikut

ndash Untuk membuat tabel seperti tampak di bawah ini ndash Sel 1 baris 1 Sel 2 baris 1 Sel 3 baris 1 Sel 4 baris 1ndash Sel 1 baris 2 Sel 2 baris 2 Sel 3 baris 2 Sel 4 baris 2

Maka tag yang harus ditulis adalah sbbndash lttable border=1gtndash lttrgt lt--baris 1 awal--gtndash lttdgtSel 1 baris 1lttdgtndash lttdgtSel 2 baris 1lttdgtndash lttdgtSel 3 baris 1lttdgtndash lttdgtSel 4 baris 1lttdgtndash lttrgt lt--baris 1 akhir--gt

17

bull lttable border=1gtbull lttrgt lt--baris 1 awal--gtbull lttdgtSel 1 baris 1lttdgtbull lttdgtSel 2 baris 1lttdgtbull lttdgtSel 3 baris 1lttdgtbull lttdgtSel 4 baris 1lttdgtbull lttrgt lt--baris 1 akhir--gtbull lttrgt lt--baris 2 awal--gtbull lttdgtSel 1 baris 2lttdgtbull lttdgtSel 2 baris 2lttdgtbull lttdgtSel 3 baris 2lttdgtbull lttdgtSel 4 baris 2lttdgtbull lttrgt lt--baris 2 akhir--gtbull lttablegt

18

Prinsip-prinsip Desain Web

1 Fokus pada kebutuhan

2 Efisien dalam menggunakan sumber daya

3 Mendukung navigasi

4 Buatlah halaman Web senyaman dan seramahmungkin

5 Mendukung interaksi bila diperlukan

19

lthtmlgt

ltheadgt

lttitlegtAtribut dari Tag Fontlttitlegt

ltheadgt

ltbodygt

ltpgtltfont face=ArialgtIni Font Arialltfontgtltpgt

ltpgtltfont face=ArialgtltigtIni Font Arial dan miringltigtltfontgtltpgt

ltpgtltfont face=verdana size=4 color=bluegtltbgtIni Font Verdana berukuran 12 pt

berwarna biru sekaligus teballtbgtltfontgt

ltp align=centergtltfont face=Tahoma color=redgtltbgtIni Font Tahoma berwarna

merah tebal dan berada di tengahltbgtltfontgtltpgt

ltp align=centergtltfont face=Arial color=redgtIni Font Arial berwarna Merah

ltfontgtltfont face=Verdana color=bluegtSedangkan ini adalah font Verdana

berwarna birultfontgtltpgt

ltbodygt

lthtmlgt

Fungsi tag ltfontgt adalah untuk memanipulasi baik jenis ukuran dan warna huruf

20

F Tag ltselectgtltselectgt dan ltoption

Tag select tidak bisa berdiri sendiri dan harus menggandeng tag option untuk dapat menampilkan output

Dan cara kerjanya hampir sama dengan tag radio hanya saja tag select lebih singkat

21

Tag FORMbull Tag ltformgt berguna untuk mengirimkan(mem-

post) variabel yang bersisi data ke file tujuan yang memproses variabel tersebut Tag-tag yang biasa digunakan bersama tag form adalah tag ltinputgt dan lttextareagt

Tag ltinputgtbull Tag ltinputgt memiliki atribut type yang fungsinya

sangat vital dalam output tampilan Isi dari atribut type dapat menentukan jenis tampilan apakah itu textbox password box checkboxradio button dan sebagainya

22

Tag ltselectgtltselectgt dan ltoptiongtbull Tag select tidak bisa berdiri sendiri dan harus menggandeng tag option untuk dapat menampilkan output Dan

cara kerjanya hampir sama dengan tag radio hanya saja tag select lebih singkat

lthtmlgt

ltheadgt

lttitlegtPropeti tag Select dan Optionlttitlegt

ltheadgt

ltbodygt

ltpgtltbgtPenggunaan select dan dan optionltbgtltpgt

ltpgtDaftar kategori silahkan pilih kategoriltpgt

ltform action=cobaphp method=postgt

Kategori ltselect name=Pilihangt

ltoption value=Kategori 1gtKategori 1

ltoption value=Kategori 2gtKategori 2

ltoption value=Kategori 3gtKategori 3

ltselectgt

ltpgtltinput type=submit value=KIRIMgtltpgt

ltformgt

ltbodygt

lthtmlgt

23

Tag ltimggt

bull Untuk menampilkan gambar pada halaman dapat digunakan tag ltimggt Format file yang dapat didukung oleh tag img bermacam-macam mulai BMP JPG GIF TGA dan lain-lainTag img memiliki beberapa atribut yaitu ndash ‐ src letak file gambar yang akan ditampilkanndash ‐ border tebal bingkai gambarndash ‐ height menentukan tinggi imagegambarndash ‐ width menentukan lebar imagegambar

24

bull lthtmlgtbull ltheadgtbull lttitlegtAtribut dari Tag imglttitlegtbull ltheadgtbull ltbodygtbull ltpgtltbgtTag img hanya dengan atribut ltigtsrcltigtltbgtltpgtbull ltpgtltimg src=fileD|Hydrangeasjpg border=10gtltpgtbull ltpgtltimg src=fileC|UsersPublicPicturesSample

Picturestulipsjpg width=400 height=300gtltpgtbull ltbodygtbull lthtmlgt

TUGAS

Jelaskan arti dan fungsi dari Protokol1 FTP (File Transfer Protocol)2 Telnet3 Gopher4 POP3-mail 5 IRC (internet Relay Chat6 HTTP (Hypertext Transfer Protocol)

• HTML Basic
• Pendahuluan
• Ada beberapa jenis protocol harus dikenal di internet yaitu
• BROWSER
• HTML (HyperText Markup Language)
• Beberapa Istilah dalam Internet
• Slide 7
• BAB II
• PENDAHULUAN
• Slide 10
• Tag dasar HTML
• Slide 12
• Latihan 2
• Slide 14
• Slide 15
• Slide 16
• Slide 17
• Prinsip-prinsip Desain Web
• Fungsi tag ltfontgt adalah untuk memanipulasi baik jenis ukuran
• F Tag ltselectgtltselectgt dan ltoption
• Slide 21
• Slide 22
• Tag ltimggt
• Slide 24
• TUGAS

Beberapa Istilah dalam Internet

1 Upload Download File

2 HTML Editor

Ada beberapa HTML Editor yang dapat Anda gunakan yaitu MicrosoftFrontPage notepad Adobe PagemillMacromedia Dreamweaver Macromedia Dreamweaver Ultradev dll Kebanyakan dari HTML Editor ini sifatnya adalah WYSIWYG (What You See Is What You Get)

3 Komponen dari suatu browserbull 1 Balok Title window 2 Menu Browser 3 Indikator loading

halaman HTML 4 Navigator Button 5 Alamat URL 6 Frame window 7 ScrollBar window 8 Status window 9 Koneksi Browser

8

BAB II

TAG HTML

9

PENDAHULUAN

bull Sebuah dokumen HTML berisi elemen-elemen kode HTML yang disebut HTML Tag

bull Penulisannya diapit oleh apa yang disebut delimiter (pembatas) Atau suatu karakter atau kumpulan karakter yang mengawali dan mengakhiri suatu tag

bull Untuk HTML delimiter yang dipakai adalah dengan karakter lt dan gt Sebuah kode program HTML selalu diawali dan diakhiri dengan sebuah tagContoh tag

ltHTMLgt

-----Kode program

ltHTMLgt

10

bull HTML dibagi menjadi 2 bagian yaitu body (badan) dan head (kepala) Bagian head ditandai dengan tag ltHEADgt sedangkan bagian body ditandai dengan tag ltBODYgt

bull Bagian head digunakan untuk menyimpan informasi mengenai dokumen tersebut misalnya judul nama penulis komentarV

bull Sedangkan bagian body digunakan untuk menuliskan isi utama dari dokumen web tersebut

Contoh dari tag dokumen web sederhana (Aktifkan NotePad)ltHTMLgt

ltHEADgtltH1gtPelatihan WEB dasarltH1gt

ltHEADgt

ltBODYgt

Selamat datang ke pelatihan web dasar

ltBODYgt

ltHTMLgt

11

Tag dasar HTML

12

5 ltBgt hellip ltBgt Membuat tulisan tebal (Bold Text )

6 ltPgt hellip ltPgtMerupakan perintah paragraph yang termasuk diantaranya pengaturan posisi tulisan indentansi dan jarak Antara lain seperti berikut

ndash ltP ALIGN=rdquoleftrdquogt hellip ltPgt 1048774 untuk pengaturan paragraph rapat kiri (left)

ndash ltP ALIGN=rdquocenterrdquogt hellip ltPgt 1048774 untuk pengaturan paragraph di tengah (center)

ndash ltP ALIGN=rdquorightrdquogt hellip ltPgt 1048774 untuk pengaturan paragraph rapat kanan (right)

7 ltBRgtndash Untuk memberikan baris baru pergantian baris Diletakkan pada

bagian teks yang mau berganti baris

8 ltAgt hellip ltAgtndash Membuat link antar dua halaman web

9 ltIMG SRC=rdquogambarjpgrdquo hellip gthellipltIMGgtndash Jika Anda ingin meletakkan gambar file photo di web Anda maka

dapat dilakukan dengan memberikan tag ini

13

Latihan 2bull Rancanglah sebuah web dgn tampilan

seperti gambar ini

14

bull ltHTMLgtbull ltHEADgtltH2gtSELAMAT DATANG DI SMK NEGERI 3

PEMATANGSIANTARltH2gtbull ltHEADgtbull ltBODYgtbull ltH1gt--------------------------------------------------------------------ltH1gtbull ltH1gtJALAN MEDAN KM 105 PEMATANGSIANTARltH1gtbull ltH2gtKOMPETENSI KEAHLIANltH2gtbull ltH3gt1 PERHOTELANltH3gtbull ltH4gt2 REKAYASA PERANGKAT LUNAKltH4gtbull ltH5gt3 TATA BUSANA DAN KECANTIKANltH5gtbull ltBODYgtbull ltHTMLgt

15

10 Pengaturan bentuk ukuran dan warna tulisan

ndash Pengaturannya dilakukan dengan tag-tag seperti contoh berikut

16

11 ltHRgtndash Pemberian tag ini bertujuan untuk membuat garis horizontal pada dokumen

web Dapat diberikan attribute seperti pada atribut gambar image

12 Tag Tabelndash Untuk membuat tabel di dokumen web dapat dilakukan dengan memberikan

tag-tag Tabel Dalam tag-tag tabel ini terdiri dari beberapa tag seperti contoh berikut

ndash Untuk membuat tabel seperti tampak di bawah ini ndash Sel 1 baris 1 Sel 2 baris 1 Sel 3 baris 1 Sel 4 baris 1ndash Sel 1 baris 2 Sel 2 baris 2 Sel 3 baris 2 Sel 4 baris 2

Maka tag yang harus ditulis adalah sbbndash lttable border=1gtndash lttrgt lt--baris 1 awal--gtndash lttdgtSel 1 baris 1lttdgtndash lttdgtSel 2 baris 1lttdgtndash lttdgtSel 3 baris 1lttdgtndash lttdgtSel 4 baris 1lttdgtndash lttrgt lt--baris 1 akhir--gt

17

bull lttable border=1gtbull lttrgt lt--baris 1 awal--gtbull lttdgtSel 1 baris 1lttdgtbull lttdgtSel 2 baris 1lttdgtbull lttdgtSel 3 baris 1lttdgtbull lttdgtSel 4 baris 1lttdgtbull lttrgt lt--baris 1 akhir--gtbull lttrgt lt--baris 2 awal--gtbull lttdgtSel 1 baris 2lttdgtbull lttdgtSel 2 baris 2lttdgtbull lttdgtSel 3 baris 2lttdgtbull lttdgtSel 4 baris 2lttdgtbull lttrgt lt--baris 2 akhir--gtbull lttablegt

18

Prinsip-prinsip Desain Web

1 Fokus pada kebutuhan

2 Efisien dalam menggunakan sumber daya

3 Mendukung navigasi

4 Buatlah halaman Web senyaman dan seramahmungkin

5 Mendukung interaksi bila diperlukan

19

lthtmlgt

ltheadgt

lttitlegtAtribut dari Tag Fontlttitlegt

ltheadgt

ltbodygt

ltpgtltfont face=ArialgtIni Font Arialltfontgtltpgt

ltpgtltfont face=ArialgtltigtIni Font Arial dan miringltigtltfontgtltpgt

ltpgtltfont face=verdana size=4 color=bluegtltbgtIni Font Verdana berukuran 12 pt

berwarna biru sekaligus teballtbgtltfontgt

ltp align=centergtltfont face=Tahoma color=redgtltbgtIni Font Tahoma berwarna

merah tebal dan berada di tengahltbgtltfontgtltpgt

ltp align=centergtltfont face=Arial color=redgtIni Font Arial berwarna Merah

ltfontgtltfont face=Verdana color=bluegtSedangkan ini adalah font Verdana

berwarna birultfontgtltpgt

ltbodygt

lthtmlgt

Fungsi tag ltfontgt adalah untuk memanipulasi baik jenis ukuran dan warna huruf

20

F Tag ltselectgtltselectgt dan ltoption

Tag select tidak bisa berdiri sendiri dan harus menggandeng tag option untuk dapat menampilkan output

Dan cara kerjanya hampir sama dengan tag radio hanya saja tag select lebih singkat

21

Tag FORMbull Tag ltformgt berguna untuk mengirimkan(mem-

post) variabel yang bersisi data ke file tujuan yang memproses variabel tersebut Tag-tag yang biasa digunakan bersama tag form adalah tag ltinputgt dan lttextareagt

Tag ltinputgtbull Tag ltinputgt memiliki atribut type yang fungsinya

sangat vital dalam output tampilan Isi dari atribut type dapat menentukan jenis tampilan apakah itu textbox password box checkboxradio button dan sebagainya

22

Tag ltselectgtltselectgt dan ltoptiongtbull Tag select tidak bisa berdiri sendiri dan harus menggandeng tag option untuk dapat menampilkan output Dan

cara kerjanya hampir sama dengan tag radio hanya saja tag select lebih singkat

lthtmlgt

ltheadgt

lttitlegtPropeti tag Select dan Optionlttitlegt

ltheadgt

ltbodygt

ltpgtltbgtPenggunaan select dan dan optionltbgtltpgt

ltpgtDaftar kategori silahkan pilih kategoriltpgt

ltform action=cobaphp method=postgt

Kategori ltselect name=Pilihangt

ltoption value=Kategori 1gtKategori 1

ltoption value=Kategori 2gtKategori 2

ltoption value=Kategori 3gtKategori 3

ltselectgt

ltpgtltinput type=submit value=KIRIMgtltpgt

ltformgt

ltbodygt

lthtmlgt

23

Tag ltimggt

bull Untuk menampilkan gambar pada halaman dapat digunakan tag ltimggt Format file yang dapat didukung oleh tag img bermacam-macam mulai BMP JPG GIF TGA dan lain-lainTag img memiliki beberapa atribut yaitu ndash ‐ src letak file gambar yang akan ditampilkanndash ‐ border tebal bingkai gambarndash ‐ height menentukan tinggi imagegambarndash ‐ width menentukan lebar imagegambar

24

bull lthtmlgtbull ltheadgtbull lttitlegtAtribut dari Tag imglttitlegtbull ltheadgtbull ltbodygtbull ltpgtltbgtTag img hanya dengan atribut ltigtsrcltigtltbgtltpgtbull ltpgtltimg src=fileD|Hydrangeasjpg border=10gtltpgtbull ltpgtltimg src=fileC|UsersPublicPicturesSample

Picturestulipsjpg width=400 height=300gtltpgtbull ltbodygtbull lthtmlgt

TUGAS

Jelaskan arti dan fungsi dari Protokol1 FTP (File Transfer Protocol)2 Telnet3 Gopher4 POP3-mail 5 IRC (internet Relay Chat6 HTTP (Hypertext Transfer Protocol)

• HTML Basic
• Pendahuluan
• Ada beberapa jenis protocol harus dikenal di internet yaitu
• BROWSER
• HTML (HyperText Markup Language)
• Beberapa Istilah dalam Internet
• Slide 7
• BAB II
• PENDAHULUAN
• Slide 10
• Tag dasar HTML
• Slide 12
• Latihan 2
• Slide 14
• Slide 15
• Slide 16
• Slide 17
• Prinsip-prinsip Desain Web
• Fungsi tag ltfontgt adalah untuk memanipulasi baik jenis ukuran
• F Tag ltselectgtltselectgt dan ltoption
• Slide 21
• Slide 22
• Tag ltimggt
• Slide 24
• TUGAS

8

BAB II

TAG HTML

9

PENDAHULUAN

bull Sebuah dokumen HTML berisi elemen-elemen kode HTML yang disebut HTML Tag

bull Penulisannya diapit oleh apa yang disebut delimiter (pembatas) Atau suatu karakter atau kumpulan karakter yang mengawali dan mengakhiri suatu tag

bull Untuk HTML delimiter yang dipakai adalah dengan karakter lt dan gt Sebuah kode program HTML selalu diawali dan diakhiri dengan sebuah tagContoh tag

ltHTMLgt

-----Kode program

ltHTMLgt

10

bull HTML dibagi menjadi 2 bagian yaitu body (badan) dan head (kepala) Bagian head ditandai dengan tag ltHEADgt sedangkan bagian body ditandai dengan tag ltBODYgt

bull Bagian head digunakan untuk menyimpan informasi mengenai dokumen tersebut misalnya judul nama penulis komentarV

bull Sedangkan bagian body digunakan untuk menuliskan isi utama dari dokumen web tersebut

Contoh dari tag dokumen web sederhana (Aktifkan NotePad)ltHTMLgt

ltHEADgtltH1gtPelatihan WEB dasarltH1gt

ltHEADgt

ltBODYgt

Selamat datang ke pelatihan web dasar

ltBODYgt

ltHTMLgt

11

Tag dasar HTML

12

5 ltBgt hellip ltBgt Membuat tulisan tebal (Bold Text )

6 ltPgt hellip ltPgtMerupakan perintah paragraph yang termasuk diantaranya pengaturan posisi tulisan indentansi dan jarak Antara lain seperti berikut

ndash ltP ALIGN=rdquoleftrdquogt hellip ltPgt 1048774 untuk pengaturan paragraph rapat kiri (left)

ndash ltP ALIGN=rdquocenterrdquogt hellip ltPgt 1048774 untuk pengaturan paragraph di tengah (center)

ndash ltP ALIGN=rdquorightrdquogt hellip ltPgt 1048774 untuk pengaturan paragraph rapat kanan (right)

7 ltBRgtndash Untuk memberikan baris baru pergantian baris Diletakkan pada

bagian teks yang mau berganti baris

8 ltAgt hellip ltAgtndash Membuat link antar dua halaman web

9 ltIMG SRC=rdquogambarjpgrdquo hellip gthellipltIMGgtndash Jika Anda ingin meletakkan gambar file photo di web Anda maka

dapat dilakukan dengan memberikan tag ini

13

Latihan 2bull Rancanglah sebuah web dgn tampilan

seperti gambar ini

14

bull ltHTMLgtbull ltHEADgtltH2gtSELAMAT DATANG DI SMK NEGERI 3

PEMATANGSIANTARltH2gtbull ltHEADgtbull ltBODYgtbull ltH1gt--------------------------------------------------------------------ltH1gtbull ltH1gtJALAN MEDAN KM 105 PEMATANGSIANTARltH1gtbull ltH2gtKOMPETENSI KEAHLIANltH2gtbull ltH3gt1 PERHOTELANltH3gtbull ltH4gt2 REKAYASA PERANGKAT LUNAKltH4gtbull ltH5gt3 TATA BUSANA DAN KECANTIKANltH5gtbull ltBODYgtbull ltHTMLgt

15

10 Pengaturan bentuk ukuran dan warna tulisan

ndash Pengaturannya dilakukan dengan tag-tag seperti contoh berikut

16

11 ltHRgtndash Pemberian tag ini bertujuan untuk membuat garis horizontal pada dokumen

web Dapat diberikan attribute seperti pada atribut gambar image

12 Tag Tabelndash Untuk membuat tabel di dokumen web dapat dilakukan dengan memberikan

tag-tag Tabel Dalam tag-tag tabel ini terdiri dari beberapa tag seperti contoh berikut

ndash Untuk membuat tabel seperti tampak di bawah ini ndash Sel 1 baris 1 Sel 2 baris 1 Sel 3 baris 1 Sel 4 baris 1ndash Sel 1 baris 2 Sel 2 baris 2 Sel 3 baris 2 Sel 4 baris 2

Maka tag yang harus ditulis adalah sbbndash lttable border=1gtndash lttrgt lt--baris 1 awal--gtndash lttdgtSel 1 baris 1lttdgtndash lttdgtSel 2 baris 1lttdgtndash lttdgtSel 3 baris 1lttdgtndash lttdgtSel 4 baris 1lttdgtndash lttrgt lt--baris 1 akhir--gt

17

bull lttable border=1gtbull lttrgt lt--baris 1 awal--gtbull lttdgtSel 1 baris 1lttdgtbull lttdgtSel 2 baris 1lttdgtbull lttdgtSel 3 baris 1lttdgtbull lttdgtSel 4 baris 1lttdgtbull lttrgt lt--baris 1 akhir--gtbull lttrgt lt--baris 2 awal--gtbull lttdgtSel 1 baris 2lttdgtbull lttdgtSel 2 baris 2lttdgtbull lttdgtSel 3 baris 2lttdgtbull lttdgtSel 4 baris 2lttdgtbull lttrgt lt--baris 2 akhir--gtbull lttablegt

18

Prinsip-prinsip Desain Web

1 Fokus pada kebutuhan

2 Efisien dalam menggunakan sumber daya

3 Mendukung navigasi

4 Buatlah halaman Web senyaman dan seramahmungkin

5 Mendukung interaksi bila diperlukan

19

lthtmlgt

ltheadgt

lttitlegtAtribut dari Tag Fontlttitlegt

ltheadgt

ltbodygt

ltpgtltfont face=ArialgtIni Font Arialltfontgtltpgt

ltpgtltfont face=ArialgtltigtIni Font Arial dan miringltigtltfontgtltpgt

ltpgtltfont face=verdana size=4 color=bluegtltbgtIni Font Verdana berukuran 12 pt

berwarna biru sekaligus teballtbgtltfontgt

ltp align=centergtltfont face=Tahoma color=redgtltbgtIni Font Tahoma berwarna

merah tebal dan berada di tengahltbgtltfontgtltpgt

ltp align=centergtltfont face=Arial color=redgtIni Font Arial berwarna Merah

ltfontgtltfont face=Verdana color=bluegtSedangkan ini adalah font Verdana

berwarna birultfontgtltpgt

ltbodygt

lthtmlgt

Fungsi tag ltfontgt adalah untuk memanipulasi baik jenis ukuran dan warna huruf

20

F Tag ltselectgtltselectgt dan ltoption

Tag select tidak bisa berdiri sendiri dan harus menggandeng tag option untuk dapat menampilkan output

Dan cara kerjanya hampir sama dengan tag radio hanya saja tag select lebih singkat

21

Tag FORMbull Tag ltformgt berguna untuk mengirimkan(mem-

post) variabel yang bersisi data ke file tujuan yang memproses variabel tersebut Tag-tag yang biasa digunakan bersama tag form adalah tag ltinputgt dan lttextareagt

Tag ltinputgtbull Tag ltinputgt memiliki atribut type yang fungsinya

sangat vital dalam output tampilan Isi dari atribut type dapat menentukan jenis tampilan apakah itu textbox password box checkboxradio button dan sebagainya

22

Tag ltselectgtltselectgt dan ltoptiongtbull Tag select tidak bisa berdiri sendiri dan harus menggandeng tag option untuk dapat menampilkan output Dan

cara kerjanya hampir sama dengan tag radio hanya saja tag select lebih singkat

lthtmlgt

ltheadgt

lttitlegtPropeti tag Select dan Optionlttitlegt

ltheadgt

ltbodygt

ltpgtltbgtPenggunaan select dan dan optionltbgtltpgt

ltpgtDaftar kategori silahkan pilih kategoriltpgt

ltform action=cobaphp method=postgt

Kategori ltselect name=Pilihangt

ltoption value=Kategori 1gtKategori 1

ltoption value=Kategori 2gtKategori 2

ltoption value=Kategori 3gtKategori 3

ltselectgt

ltpgtltinput type=submit value=KIRIMgtltpgt

ltformgt

ltbodygt

lthtmlgt

23

Tag ltimggt

bull Untuk menampilkan gambar pada halaman dapat digunakan tag ltimggt Format file yang dapat didukung oleh tag img bermacam-macam mulai BMP JPG GIF TGA dan lain-lainTag img memiliki beberapa atribut yaitu ndash ‐ src letak file gambar yang akan ditampilkanndash ‐ border tebal bingkai gambarndash ‐ height menentukan tinggi imagegambarndash ‐ width menentukan lebar imagegambar

24

bull lthtmlgtbull ltheadgtbull lttitlegtAtribut dari Tag imglttitlegtbull ltheadgtbull ltbodygtbull ltpgtltbgtTag img hanya dengan atribut ltigtsrcltigtltbgtltpgtbull ltpgtltimg src=fileD|Hydrangeasjpg border=10gtltpgtbull ltpgtltimg src=fileC|UsersPublicPicturesSample

Picturestulipsjpg width=400 height=300gtltpgtbull ltbodygtbull lthtmlgt

TUGAS

Jelaskan arti dan fungsi dari Protokol1 FTP (File Transfer Protocol)2 Telnet3 Gopher4 POP3-mail 5 IRC (internet Relay Chat6 HTTP (Hypertext Transfer Protocol)

• HTML Basic
• Pendahuluan
• Ada beberapa jenis protocol harus dikenal di internet yaitu
• BROWSER
• HTML (HyperText Markup Language)
• Beberapa Istilah dalam Internet
• Slide 7
• BAB II
• PENDAHULUAN
• Slide 10
• Tag dasar HTML
• Slide 12
• Latihan 2
• Slide 14
• Slide 15
• Slide 16
• Slide 17
• Prinsip-prinsip Desain Web
• Fungsi tag ltfontgt adalah untuk memanipulasi baik jenis ukuran
• F Tag ltselectgtltselectgt dan ltoption
• Slide 21
• Slide 22
• Tag ltimggt
• Slide 24
• TUGAS

9

PENDAHULUAN

bull Sebuah dokumen HTML berisi elemen-elemen kode HTML yang disebut HTML Tag

bull Penulisannya diapit oleh apa yang disebut delimiter (pembatas) Atau suatu karakter atau kumpulan karakter yang mengawali dan mengakhiri suatu tag

bull Untuk HTML delimiter yang dipakai adalah dengan karakter lt dan gt Sebuah kode program HTML selalu diawali dan diakhiri dengan sebuah tagContoh tag

ltHTMLgt

-----Kode program

ltHTMLgt

10

bull HTML dibagi menjadi 2 bagian yaitu body (badan) dan head (kepala) Bagian head ditandai dengan tag ltHEADgt sedangkan bagian body ditandai dengan tag ltBODYgt

bull Bagian head digunakan untuk menyimpan informasi mengenai dokumen tersebut misalnya judul nama penulis komentarV

bull Sedangkan bagian body digunakan untuk menuliskan isi utama dari dokumen web tersebut

Contoh dari tag dokumen web sederhana (Aktifkan NotePad)ltHTMLgt

ltHEADgtltH1gtPelatihan WEB dasarltH1gt

ltHEADgt

ltBODYgt

Selamat datang ke pelatihan web dasar

ltBODYgt

ltHTMLgt

11

Tag dasar HTML

12

5 ltBgt hellip ltBgt Membuat tulisan tebal (Bold Text )

6 ltPgt hellip ltPgtMerupakan perintah paragraph yang termasuk diantaranya pengaturan posisi tulisan indentansi dan jarak Antara lain seperti berikut

ndash ltP ALIGN=rdquoleftrdquogt hellip ltPgt 1048774 untuk pengaturan paragraph rapat kiri (left)

ndash ltP ALIGN=rdquocenterrdquogt hellip ltPgt 1048774 untuk pengaturan paragraph di tengah (center)

ndash ltP ALIGN=rdquorightrdquogt hellip ltPgt 1048774 untuk pengaturan paragraph rapat kanan (right)

7 ltBRgtndash Untuk memberikan baris baru pergantian baris Diletakkan pada

bagian teks yang mau berganti baris

8 ltAgt hellip ltAgtndash Membuat link antar dua halaman web

9 ltIMG SRC=rdquogambarjpgrdquo hellip gthellipltIMGgtndash Jika Anda ingin meletakkan gambar file photo di web Anda maka

dapat dilakukan dengan memberikan tag ini

13

Latihan 2bull Rancanglah sebuah web dgn tampilan

seperti gambar ini

14

bull ltHTMLgtbull ltHEADgtltH2gtSELAMAT DATANG DI SMK NEGERI 3

PEMATANGSIANTARltH2gtbull ltHEADgtbull ltBODYgtbull ltH1gt--------------------------------------------------------------------ltH1gtbull ltH1gtJALAN MEDAN KM 105 PEMATANGSIANTARltH1gtbull ltH2gtKOMPETENSI KEAHLIANltH2gtbull ltH3gt1 PERHOTELANltH3gtbull ltH4gt2 REKAYASA PERANGKAT LUNAKltH4gtbull ltH5gt3 TATA BUSANA DAN KECANTIKANltH5gtbull ltBODYgtbull ltHTMLgt

15

10 Pengaturan bentuk ukuran dan warna tulisan

ndash Pengaturannya dilakukan dengan tag-tag seperti contoh berikut

16

11 ltHRgtndash Pemberian tag ini bertujuan untuk membuat garis horizontal pada dokumen

web Dapat diberikan attribute seperti pada atribut gambar image

12 Tag Tabelndash Untuk membuat tabel di dokumen web dapat dilakukan dengan memberikan

tag-tag Tabel Dalam tag-tag tabel ini terdiri dari beberapa tag seperti contoh berikut

ndash Untuk membuat tabel seperti tampak di bawah ini ndash Sel 1 baris 1 Sel 2 baris 1 Sel 3 baris 1 Sel 4 baris 1ndash Sel 1 baris 2 Sel 2 baris 2 Sel 3 baris 2 Sel 4 baris 2

Maka tag yang harus ditulis adalah sbbndash lttable border=1gtndash lttrgt lt--baris 1 awal--gtndash lttdgtSel 1 baris 1lttdgtndash lttdgtSel 2 baris 1lttdgtndash lttdgtSel 3 baris 1lttdgtndash lttdgtSel 4 baris 1lttdgtndash lttrgt lt--baris 1 akhir--gt

17

bull lttable border=1gtbull lttrgt lt--baris 1 awal--gtbull lttdgtSel 1 baris 1lttdgtbull lttdgtSel 2 baris 1lttdgtbull lttdgtSel 3 baris 1lttdgtbull lttdgtSel 4 baris 1lttdgtbull lttrgt lt--baris 1 akhir--gtbull lttrgt lt--baris 2 awal--gtbull lttdgtSel 1 baris 2lttdgtbull lttdgtSel 2 baris 2lttdgtbull lttdgtSel 3 baris 2lttdgtbull lttdgtSel 4 baris 2lttdgtbull lttrgt lt--baris 2 akhir--gtbull lttablegt

18

Prinsip-prinsip Desain Web

1 Fokus pada kebutuhan

2 Efisien dalam menggunakan sumber daya

3 Mendukung navigasi

4 Buatlah halaman Web senyaman dan seramahmungkin

5 Mendukung interaksi bila diperlukan

19

lthtmlgt

ltheadgt

lttitlegtAtribut dari Tag Fontlttitlegt

ltheadgt

ltbodygt

ltpgtltfont face=ArialgtIni Font Arialltfontgtltpgt

ltpgtltfont face=ArialgtltigtIni Font Arial dan miringltigtltfontgtltpgt

ltpgtltfont face=verdana size=4 color=bluegtltbgtIni Font Verdana berukuran 12 pt

berwarna biru sekaligus teballtbgtltfontgt

ltp align=centergtltfont face=Tahoma color=redgtltbgtIni Font Tahoma berwarna

merah tebal dan berada di tengahltbgtltfontgtltpgt

ltp align=centergtltfont face=Arial color=redgtIni Font Arial berwarna Merah

ltfontgtltfont face=Verdana color=bluegtSedangkan ini adalah font Verdana

berwarna birultfontgtltpgt

ltbodygt

lthtmlgt

Fungsi tag ltfontgt adalah untuk memanipulasi baik jenis ukuran dan warna huruf

20

F Tag ltselectgtltselectgt dan ltoption

Tag select tidak bisa berdiri sendiri dan harus menggandeng tag option untuk dapat menampilkan output

Dan cara kerjanya hampir sama dengan tag radio hanya saja tag select lebih singkat

21

Tag FORMbull Tag ltformgt berguna untuk mengirimkan(mem-

post) variabel yang bersisi data ke file tujuan yang memproses variabel tersebut Tag-tag yang biasa digunakan bersama tag form adalah tag ltinputgt dan lttextareagt

Tag ltinputgtbull Tag ltinputgt memiliki atribut type yang fungsinya

sangat vital dalam output tampilan Isi dari atribut type dapat menentukan jenis tampilan apakah itu textbox password box checkboxradio button dan sebagainya

22

Tag ltselectgtltselectgt dan ltoptiongtbull Tag select tidak bisa berdiri sendiri dan harus menggandeng tag option untuk dapat menampilkan output Dan

cara kerjanya hampir sama dengan tag radio hanya saja tag select lebih singkat

lthtmlgt

ltheadgt

lttitlegtPropeti tag Select dan Optionlttitlegt

ltheadgt

ltbodygt

ltpgtltbgtPenggunaan select dan dan optionltbgtltpgt

ltpgtDaftar kategori silahkan pilih kategoriltpgt

ltform action=cobaphp method=postgt

Kategori ltselect name=Pilihangt

ltoption value=Kategori 1gtKategori 1

ltoption value=Kategori 2gtKategori 2

ltoption value=Kategori 3gtKategori 3

ltselectgt

ltpgtltinput type=submit value=KIRIMgtltpgt

ltformgt

ltbodygt

lthtmlgt

23

Tag ltimggt

bull Untuk menampilkan gambar pada halaman dapat digunakan tag ltimggt Format file yang dapat didukung oleh tag img bermacam-macam mulai BMP JPG GIF TGA dan lain-lainTag img memiliki beberapa atribut yaitu ndash ‐ src letak file gambar yang akan ditampilkanndash ‐ border tebal bingkai gambarndash ‐ height menentukan tinggi imagegambarndash ‐ width menentukan lebar imagegambar

24

bull lthtmlgtbull ltheadgtbull lttitlegtAtribut dari Tag imglttitlegtbull ltheadgtbull ltbodygtbull ltpgtltbgtTag img hanya dengan atribut ltigtsrcltigtltbgtltpgtbull ltpgtltimg src=fileD|Hydrangeasjpg border=10gtltpgtbull ltpgtltimg src=fileC|UsersPublicPicturesSample

Picturestulipsjpg width=400 height=300gtltpgtbull ltbodygtbull lthtmlgt

TUGAS

Jelaskan arti dan fungsi dari Protokol1 FTP (File Transfer Protocol)2 Telnet3 Gopher4 POP3-mail 5 IRC (internet Relay Chat6 HTTP (Hypertext Transfer Protocol)

• HTML Basic
• Pendahuluan
• Ada beberapa jenis protocol harus dikenal di internet yaitu
• BROWSER
• HTML (HyperText Markup Language)
• Beberapa Istilah dalam Internet
• Slide 7
• BAB II
• PENDAHULUAN
• Slide 10
• Tag dasar HTML
• Slide 12
• Latihan 2
• Slide 14
• Slide 15
• Slide 16
• Slide 17
• Prinsip-prinsip Desain Web
• Fungsi tag ltfontgt adalah untuk memanipulasi baik jenis ukuran
• F Tag ltselectgtltselectgt dan ltoption
• Slide 21
• Slide 22
• Tag ltimggt
• Slide 24
• TUGAS

10

bull HTML dibagi menjadi 2 bagian yaitu body (badan) dan head (kepala) Bagian head ditandai dengan tag ltHEADgt sedangkan bagian body ditandai dengan tag ltBODYgt

bull Bagian head digunakan untuk menyimpan informasi mengenai dokumen tersebut misalnya judul nama penulis komentarV

bull Sedangkan bagian body digunakan untuk menuliskan isi utama dari dokumen web tersebut

Contoh dari tag dokumen web sederhana (Aktifkan NotePad)ltHTMLgt

ltHEADgtltH1gtPelatihan WEB dasarltH1gt

ltHEADgt

ltBODYgt

Selamat datang ke pelatihan web dasar

ltBODYgt

ltHTMLgt

11

Tag dasar HTML

12

5 ltBgt hellip ltBgt Membuat tulisan tebal (Bold Text )

6 ltPgt hellip ltPgtMerupakan perintah paragraph yang termasuk diantaranya pengaturan posisi tulisan indentansi dan jarak Antara lain seperti berikut

ndash ltP ALIGN=rdquoleftrdquogt hellip ltPgt 1048774 untuk pengaturan paragraph rapat kiri (left)

ndash ltP ALIGN=rdquocenterrdquogt hellip ltPgt 1048774 untuk pengaturan paragraph di tengah (center)

ndash ltP ALIGN=rdquorightrdquogt hellip ltPgt 1048774 untuk pengaturan paragraph rapat kanan (right)

7 ltBRgtndash Untuk memberikan baris baru pergantian baris Diletakkan pada

bagian teks yang mau berganti baris

8 ltAgt hellip ltAgtndash Membuat link antar dua halaman web

9 ltIMG SRC=rdquogambarjpgrdquo hellip gthellipltIMGgtndash Jika Anda ingin meletakkan gambar file photo di web Anda maka

dapat dilakukan dengan memberikan tag ini

13

Latihan 2bull Rancanglah sebuah web dgn tampilan

seperti gambar ini

14

bull ltHTMLgtbull ltHEADgtltH2gtSELAMAT DATANG DI SMK NEGERI 3

PEMATANGSIANTARltH2gtbull ltHEADgtbull ltBODYgtbull ltH1gt--------------------------------------------------------------------ltH1gtbull ltH1gtJALAN MEDAN KM 105 PEMATANGSIANTARltH1gtbull ltH2gtKOMPETENSI KEAHLIANltH2gtbull ltH3gt1 PERHOTELANltH3gtbull ltH4gt2 REKAYASA PERANGKAT LUNAKltH4gtbull ltH5gt3 TATA BUSANA DAN KECANTIKANltH5gtbull ltBODYgtbull ltHTMLgt

15

10 Pengaturan bentuk ukuran dan warna tulisan

ndash Pengaturannya dilakukan dengan tag-tag seperti contoh berikut

16

11 ltHRgtndash Pemberian tag ini bertujuan untuk membuat garis horizontal pada dokumen

web Dapat diberikan attribute seperti pada atribut gambar image

12 Tag Tabelndash Untuk membuat tabel di dokumen web dapat dilakukan dengan memberikan

tag-tag Tabel Dalam tag-tag tabel ini terdiri dari beberapa tag seperti contoh berikut

ndash Untuk membuat tabel seperti tampak di bawah ini ndash Sel 1 baris 1 Sel 2 baris 1 Sel 3 baris 1 Sel 4 baris 1ndash Sel 1 baris 2 Sel 2 baris 2 Sel 3 baris 2 Sel 4 baris 2

Maka tag yang harus ditulis adalah sbbndash lttable border=1gtndash lttrgt lt--baris 1 awal--gtndash lttdgtSel 1 baris 1lttdgtndash lttdgtSel 2 baris 1lttdgtndash lttdgtSel 3 baris 1lttdgtndash lttdgtSel 4 baris 1lttdgtndash lttrgt lt--baris 1 akhir--gt

17

bull lttable border=1gtbull lttrgt lt--baris 1 awal--gtbull lttdgtSel 1 baris 1lttdgtbull lttdgtSel 2 baris 1lttdgtbull lttdgtSel 3 baris 1lttdgtbull lttdgtSel 4 baris 1lttdgtbull lttrgt lt--baris 1 akhir--gtbull lttrgt lt--baris 2 awal--gtbull lttdgtSel 1 baris 2lttdgtbull lttdgtSel 2 baris 2lttdgtbull lttdgtSel 3 baris 2lttdgtbull lttdgtSel 4 baris 2lttdgtbull lttrgt lt--baris 2 akhir--gtbull lttablegt

18

Prinsip-prinsip Desain Web

1 Fokus pada kebutuhan

2 Efisien dalam menggunakan sumber daya

3 Mendukung navigasi

4 Buatlah halaman Web senyaman dan seramahmungkin

5 Mendukung interaksi bila diperlukan

19

lthtmlgt

ltheadgt

lttitlegtAtribut dari Tag Fontlttitlegt

ltheadgt

ltbodygt

ltpgtltfont face=ArialgtIni Font Arialltfontgtltpgt

ltpgtltfont face=ArialgtltigtIni Font Arial dan miringltigtltfontgtltpgt

ltpgtltfont face=verdana size=4 color=bluegtltbgtIni Font Verdana berukuran 12 pt

berwarna biru sekaligus teballtbgtltfontgt

ltp align=centergtltfont face=Tahoma color=redgtltbgtIni Font Tahoma berwarna

merah tebal dan berada di tengahltbgtltfontgtltpgt

ltp align=centergtltfont face=Arial color=redgtIni Font Arial berwarna Merah

ltfontgtltfont face=Verdana color=bluegtSedangkan ini adalah font Verdana

berwarna birultfontgtltpgt

ltbodygt

lthtmlgt

Fungsi tag ltfontgt adalah untuk memanipulasi baik jenis ukuran dan warna huruf

20

F Tag ltselectgtltselectgt dan ltoption

Tag select tidak bisa berdiri sendiri dan harus menggandeng tag option untuk dapat menampilkan output

Dan cara kerjanya hampir sama dengan tag radio hanya saja tag select lebih singkat

21

Tag FORMbull Tag ltformgt berguna untuk mengirimkan(mem-

post) variabel yang bersisi data ke file tujuan yang memproses variabel tersebut Tag-tag yang biasa digunakan bersama tag form adalah tag ltinputgt dan lttextareagt

Tag ltinputgtbull Tag ltinputgt memiliki atribut type yang fungsinya

sangat vital dalam output tampilan Isi dari atribut type dapat menentukan jenis tampilan apakah itu textbox password box checkboxradio button dan sebagainya

22

Tag ltselectgtltselectgt dan ltoptiongtbull Tag select tidak bisa berdiri sendiri dan harus menggandeng tag option untuk dapat menampilkan output Dan

cara kerjanya hampir sama dengan tag radio hanya saja tag select lebih singkat

lthtmlgt

ltheadgt

lttitlegtPropeti tag Select dan Optionlttitlegt

ltheadgt

ltbodygt

ltpgtltbgtPenggunaan select dan dan optionltbgtltpgt

ltpgtDaftar kategori silahkan pilih kategoriltpgt

ltform action=cobaphp method=postgt

Kategori ltselect name=Pilihangt

ltoption value=Kategori 1gtKategori 1

ltoption value=Kategori 2gtKategori 2

ltoption value=Kategori 3gtKategori 3

ltselectgt

ltpgtltinput type=submit value=KIRIMgtltpgt

ltformgt

ltbodygt

lthtmlgt

23

Tag ltimggt

bull Untuk menampilkan gambar pada halaman dapat digunakan tag ltimggt Format file yang dapat didukung oleh tag img bermacam-macam mulai BMP JPG GIF TGA dan lain-lainTag img memiliki beberapa atribut yaitu ndash ‐ src letak file gambar yang akan ditampilkanndash ‐ border tebal bingkai gambarndash ‐ height menentukan tinggi imagegambarndash ‐ width menentukan lebar imagegambar

24

bull lthtmlgtbull ltheadgtbull lttitlegtAtribut dari Tag imglttitlegtbull ltheadgtbull ltbodygtbull ltpgtltbgtTag img hanya dengan atribut ltigtsrcltigtltbgtltpgtbull ltpgtltimg src=fileD|Hydrangeasjpg border=10gtltpgtbull ltpgtltimg src=fileC|UsersPublicPicturesSample

Picturestulipsjpg width=400 height=300gtltpgtbull ltbodygtbull lthtmlgt

TUGAS

Jelaskan arti dan fungsi dari Protokol1 FTP (File Transfer Protocol)2 Telnet3 Gopher4 POP3-mail 5 IRC (internet Relay Chat6 HTTP (Hypertext Transfer Protocol)

• HTML Basic
• Pendahuluan
• Ada beberapa jenis protocol harus dikenal di internet yaitu
• BROWSER
• HTML (HyperText Markup Language)
• Beberapa Istilah dalam Internet
• Slide 7
• BAB II
• PENDAHULUAN
• Slide 10
• Tag dasar HTML
• Slide 12
• Latihan 2
• Slide 14
• Slide 15
• Slide 16
• Slide 17
• Prinsip-prinsip Desain Web
• Fungsi tag ltfontgt adalah untuk memanipulasi baik jenis ukuran
• F Tag ltselectgtltselectgt dan ltoption
• Slide 21
• Slide 22
• Tag ltimggt
• Slide 24
• TUGAS

11

Tag dasar HTML

12

5 ltBgt hellip ltBgt Membuat tulisan tebal (Bold Text )

6 ltPgt hellip ltPgtMerupakan perintah paragraph yang termasuk diantaranya pengaturan posisi tulisan indentansi dan jarak Antara lain seperti berikut

ndash ltP ALIGN=rdquoleftrdquogt hellip ltPgt 1048774 untuk pengaturan paragraph rapat kiri (left)

ndash ltP ALIGN=rdquocenterrdquogt hellip ltPgt 1048774 untuk pengaturan paragraph di tengah (center)

ndash ltP ALIGN=rdquorightrdquogt hellip ltPgt 1048774 untuk pengaturan paragraph rapat kanan (right)

7 ltBRgtndash Untuk memberikan baris baru pergantian baris Diletakkan pada

bagian teks yang mau berganti baris

8 ltAgt hellip ltAgtndash Membuat link antar dua halaman web

9 ltIMG SRC=rdquogambarjpgrdquo hellip gthellipltIMGgtndash Jika Anda ingin meletakkan gambar file photo di web Anda maka

dapat dilakukan dengan memberikan tag ini

13

Latihan 2bull Rancanglah sebuah web dgn tampilan

seperti gambar ini

14

bull ltHTMLgtbull ltHEADgtltH2gtSELAMAT DATANG DI SMK NEGERI 3

PEMATANGSIANTARltH2gtbull ltHEADgtbull ltBODYgtbull ltH1gt--------------------------------------------------------------------ltH1gtbull ltH1gtJALAN MEDAN KM 105 PEMATANGSIANTARltH1gtbull ltH2gtKOMPETENSI KEAHLIANltH2gtbull ltH3gt1 PERHOTELANltH3gtbull ltH4gt2 REKAYASA PERANGKAT LUNAKltH4gtbull ltH5gt3 TATA BUSANA DAN KECANTIKANltH5gtbull ltBODYgtbull ltHTMLgt

15

10 Pengaturan bentuk ukuran dan warna tulisan

ndash Pengaturannya dilakukan dengan tag-tag seperti contoh berikut

16

11 ltHRgtndash Pemberian tag ini bertujuan untuk membuat garis horizontal pada dokumen

web Dapat diberikan attribute seperti pada atribut gambar image

12 Tag Tabelndash Untuk membuat tabel di dokumen web dapat dilakukan dengan memberikan

tag-tag Tabel Dalam tag-tag tabel ini terdiri dari beberapa tag seperti contoh berikut

ndash Untuk membuat tabel seperti tampak di bawah ini ndash Sel 1 baris 1 Sel 2 baris 1 Sel 3 baris 1 Sel 4 baris 1ndash Sel 1 baris 2 Sel 2 baris 2 Sel 3 baris 2 Sel 4 baris 2

Maka tag yang harus ditulis adalah sbbndash lttable border=1gtndash lttrgt lt--baris 1 awal--gtndash lttdgtSel 1 baris 1lttdgtndash lttdgtSel 2 baris 1lttdgtndash lttdgtSel 3 baris 1lttdgtndash lttdgtSel 4 baris 1lttdgtndash lttrgt lt--baris 1 akhir--gt

17

bull lttable border=1gtbull lttrgt lt--baris 1 awal--gtbull lttdgtSel 1 baris 1lttdgtbull lttdgtSel 2 baris 1lttdgtbull lttdgtSel 3 baris 1lttdgtbull lttdgtSel 4 baris 1lttdgtbull lttrgt lt--baris 1 akhir--gtbull lttrgt lt--baris 2 awal--gtbull lttdgtSel 1 baris 2lttdgtbull lttdgtSel 2 baris 2lttdgtbull lttdgtSel 3 baris 2lttdgtbull lttdgtSel 4 baris 2lttdgtbull lttrgt lt--baris 2 akhir--gtbull lttablegt

18

Prinsip-prinsip Desain Web

1 Fokus pada kebutuhan

2 Efisien dalam menggunakan sumber daya

3 Mendukung navigasi

4 Buatlah halaman Web senyaman dan seramahmungkin

5 Mendukung interaksi bila diperlukan

19

lthtmlgt

ltheadgt

lttitlegtAtribut dari Tag Fontlttitlegt

ltheadgt

ltbodygt

ltpgtltfont face=ArialgtIni Font Arialltfontgtltpgt

ltpgtltfont face=ArialgtltigtIni Font Arial dan miringltigtltfontgtltpgt

ltpgtltfont face=verdana size=4 color=bluegtltbgtIni Font Verdana berukuran 12 pt

berwarna biru sekaligus teballtbgtltfontgt

ltp align=centergtltfont face=Tahoma color=redgtltbgtIni Font Tahoma berwarna

merah tebal dan berada di tengahltbgtltfontgtltpgt

ltp align=centergtltfont face=Arial color=redgtIni Font Arial berwarna Merah

ltfontgtltfont face=Verdana color=bluegtSedangkan ini adalah font Verdana

berwarna birultfontgtltpgt

ltbodygt

lthtmlgt

Fungsi tag ltfontgt adalah untuk memanipulasi baik jenis ukuran dan warna huruf

20

F Tag ltselectgtltselectgt dan ltoption

Tag select tidak bisa berdiri sendiri dan harus menggandeng tag option untuk dapat menampilkan output

Dan cara kerjanya hampir sama dengan tag radio hanya saja tag select lebih singkat

21

Tag FORMbull Tag ltformgt berguna untuk mengirimkan(mem-

post) variabel yang bersisi data ke file tujuan yang memproses variabel tersebut Tag-tag yang biasa digunakan bersama tag form adalah tag ltinputgt dan lttextareagt

Tag ltinputgtbull Tag ltinputgt memiliki atribut type yang fungsinya

sangat vital dalam output tampilan Isi dari atribut type dapat menentukan jenis tampilan apakah itu textbox password box checkboxradio button dan sebagainya

22

Tag ltselectgtltselectgt dan ltoptiongtbull Tag select tidak bisa berdiri sendiri dan harus menggandeng tag option untuk dapat menampilkan output Dan

cara kerjanya hampir sama dengan tag radio hanya saja tag select lebih singkat

lthtmlgt

ltheadgt

lttitlegtPropeti tag Select dan Optionlttitlegt

ltheadgt

ltbodygt

ltpgtltbgtPenggunaan select dan dan optionltbgtltpgt

ltpgtDaftar kategori silahkan pilih kategoriltpgt

ltform action=cobaphp method=postgt

Kategori ltselect name=Pilihangt

ltoption value=Kategori 1gtKategori 1

ltoption value=Kategori 2gtKategori 2

ltoption value=Kategori 3gtKategori 3

ltselectgt

ltpgtltinput type=submit value=KIRIMgtltpgt

ltformgt

ltbodygt

lthtmlgt

23

Tag ltimggt

bull Untuk menampilkan gambar pada halaman dapat digunakan tag ltimggt Format file yang dapat didukung oleh tag img bermacam-macam mulai BMP JPG GIF TGA dan lain-lainTag img memiliki beberapa atribut yaitu ndash ‐ src letak file gambar yang akan ditampilkanndash ‐ border tebal bingkai gambarndash ‐ height menentukan tinggi imagegambarndash ‐ width menentukan lebar imagegambar

24

bull lthtmlgtbull ltheadgtbull lttitlegtAtribut dari Tag imglttitlegtbull ltheadgtbull ltbodygtbull ltpgtltbgtTag img hanya dengan atribut ltigtsrcltigtltbgtltpgtbull ltpgtltimg src=fileD|Hydrangeasjpg border=10gtltpgtbull ltpgtltimg src=fileC|UsersPublicPicturesSample

Picturestulipsjpg width=400 height=300gtltpgtbull ltbodygtbull lthtmlgt

TUGAS

Jelaskan arti dan fungsi dari Protokol1 FTP (File Transfer Protocol)2 Telnet3 Gopher4 POP3-mail 5 IRC (internet Relay Chat6 HTTP (Hypertext Transfer Protocol)

• HTML Basic
• Pendahuluan
• Ada beberapa jenis protocol harus dikenal di internet yaitu
• BROWSER
• HTML (HyperText Markup Language)
• Beberapa Istilah dalam Internet
• Slide 7
• BAB II
• PENDAHULUAN
• Slide 10
• Tag dasar HTML
• Slide 12
• Latihan 2
• Slide 14
• Slide 15
• Slide 16
• Slide 17
• Prinsip-prinsip Desain Web
• Fungsi tag ltfontgt adalah untuk memanipulasi baik jenis ukuran
• F Tag ltselectgtltselectgt dan ltoption
• Slide 21
• Slide 22
• Tag ltimggt
• Slide 24
• TUGAS

12

5 ltBgt hellip ltBgt Membuat tulisan tebal (Bold Text )

6 ltPgt hellip ltPgtMerupakan perintah paragraph yang termasuk diantaranya pengaturan posisi tulisan indentansi dan jarak Antara lain seperti berikut

ndash ltP ALIGN=rdquoleftrdquogt hellip ltPgt 1048774 untuk pengaturan paragraph rapat kiri (left)

ndash ltP ALIGN=rdquocenterrdquogt hellip ltPgt 1048774 untuk pengaturan paragraph di tengah (center)

ndash ltP ALIGN=rdquorightrdquogt hellip ltPgt 1048774 untuk pengaturan paragraph rapat kanan (right)

7 ltBRgtndash Untuk memberikan baris baru pergantian baris Diletakkan pada

bagian teks yang mau berganti baris

8 ltAgt hellip ltAgtndash Membuat link antar dua halaman web

9 ltIMG SRC=rdquogambarjpgrdquo hellip gthellipltIMGgtndash Jika Anda ingin meletakkan gambar file photo di web Anda maka

dapat dilakukan dengan memberikan tag ini

13

Latihan 2bull Rancanglah sebuah web dgn tampilan

seperti gambar ini

14

bull ltHTMLgtbull ltHEADgtltH2gtSELAMAT DATANG DI SMK NEGERI 3

PEMATANGSIANTARltH2gtbull ltHEADgtbull ltBODYgtbull ltH1gt--------------------------------------------------------------------ltH1gtbull ltH1gtJALAN MEDAN KM 105 PEMATANGSIANTARltH1gtbull ltH2gtKOMPETENSI KEAHLIANltH2gtbull ltH3gt1 PERHOTELANltH3gtbull ltH4gt2 REKAYASA PERANGKAT LUNAKltH4gtbull ltH5gt3 TATA BUSANA DAN KECANTIKANltH5gtbull ltBODYgtbull ltHTMLgt

15

10 Pengaturan bentuk ukuran dan warna tulisan

ndash Pengaturannya dilakukan dengan tag-tag seperti contoh berikut

16

11 ltHRgtndash Pemberian tag ini bertujuan untuk membuat garis horizontal pada dokumen

web Dapat diberikan attribute seperti pada atribut gambar image

12 Tag Tabelndash Untuk membuat tabel di dokumen web dapat dilakukan dengan memberikan

tag-tag Tabel Dalam tag-tag tabel ini terdiri dari beberapa tag seperti contoh berikut

ndash Untuk membuat tabel seperti tampak di bawah ini ndash Sel 1 baris 1 Sel 2 baris 1 Sel 3 baris 1 Sel 4 baris 1ndash Sel 1 baris 2 Sel 2 baris 2 Sel 3 baris 2 Sel 4 baris 2

Maka tag yang harus ditulis adalah sbbndash lttable border=1gtndash lttrgt lt--baris 1 awal--gtndash lttdgtSel 1 baris 1lttdgtndash lttdgtSel 2 baris 1lttdgtndash lttdgtSel 3 baris 1lttdgtndash lttdgtSel 4 baris 1lttdgtndash lttrgt lt--baris 1 akhir--gt

17

bull lttable border=1gtbull lttrgt lt--baris 1 awal--gtbull lttdgtSel 1 baris 1lttdgtbull lttdgtSel 2 baris 1lttdgtbull lttdgtSel 3 baris 1lttdgtbull lttdgtSel 4 baris 1lttdgtbull lttrgt lt--baris 1 akhir--gtbull lttrgt lt--baris 2 awal--gtbull lttdgtSel 1 baris 2lttdgtbull lttdgtSel 2 baris 2lttdgtbull lttdgtSel 3 baris 2lttdgtbull lttdgtSel 4 baris 2lttdgtbull lttrgt lt--baris 2 akhir--gtbull lttablegt

18

Prinsip-prinsip Desain Web

1 Fokus pada kebutuhan

2 Efisien dalam menggunakan sumber daya

3 Mendukung navigasi

4 Buatlah halaman Web senyaman dan seramahmungkin

5 Mendukung interaksi bila diperlukan

19

lthtmlgt

ltheadgt

lttitlegtAtribut dari Tag Fontlttitlegt

ltheadgt

ltbodygt

ltpgtltfont face=ArialgtIni Font Arialltfontgtltpgt

ltpgtltfont face=ArialgtltigtIni Font Arial dan miringltigtltfontgtltpgt

ltpgtltfont face=verdana size=4 color=bluegtltbgtIni Font Verdana berukuran 12 pt

berwarna biru sekaligus teballtbgtltfontgt

ltp align=centergtltfont face=Tahoma color=redgtltbgtIni Font Tahoma berwarna

merah tebal dan berada di tengahltbgtltfontgtltpgt

ltp align=centergtltfont face=Arial color=redgtIni Font Arial berwarna Merah

ltfontgtltfont face=Verdana color=bluegtSedangkan ini adalah font Verdana

berwarna birultfontgtltpgt

ltbodygt

lthtmlgt

Fungsi tag ltfontgt adalah untuk memanipulasi baik jenis ukuran dan warna huruf

20

F Tag ltselectgtltselectgt dan ltoption

Tag select tidak bisa berdiri sendiri dan harus menggandeng tag option untuk dapat menampilkan output

Dan cara kerjanya hampir sama dengan tag radio hanya saja tag select lebih singkat

21

Tag FORMbull Tag ltformgt berguna untuk mengirimkan(mem-

post) variabel yang bersisi data ke file tujuan yang memproses variabel tersebut Tag-tag yang biasa digunakan bersama tag form adalah tag ltinputgt dan lttextareagt

Tag ltinputgtbull Tag ltinputgt memiliki atribut type yang fungsinya

sangat vital dalam output tampilan Isi dari atribut type dapat menentukan jenis tampilan apakah itu textbox password box checkboxradio button dan sebagainya

22

Tag ltselectgtltselectgt dan ltoptiongtbull Tag select tidak bisa berdiri sendiri dan harus menggandeng tag option untuk dapat menampilkan output Dan

cara kerjanya hampir sama dengan tag radio hanya saja tag select lebih singkat

lthtmlgt

ltheadgt

lttitlegtPropeti tag Select dan Optionlttitlegt

ltheadgt

ltbodygt

ltpgtltbgtPenggunaan select dan dan optionltbgtltpgt

ltpgtDaftar kategori silahkan pilih kategoriltpgt

ltform action=cobaphp method=postgt

Kategori ltselect name=Pilihangt

ltoption value=Kategori 1gtKategori 1

ltoption value=Kategori 2gtKategori 2

ltoption value=Kategori 3gtKategori 3

ltselectgt

ltpgtltinput type=submit value=KIRIMgtltpgt

ltformgt

ltbodygt

lthtmlgt

23

Tag ltimggt

bull Untuk menampilkan gambar pada halaman dapat digunakan tag ltimggt Format file yang dapat didukung oleh tag img bermacam-macam mulai BMP JPG GIF TGA dan lain-lainTag img memiliki beberapa atribut yaitu ndash ‐ src letak file gambar yang akan ditampilkanndash ‐ border tebal bingkai gambarndash ‐ height menentukan tinggi imagegambarndash ‐ width menentukan lebar imagegambar

24

bull lthtmlgtbull ltheadgtbull lttitlegtAtribut dari Tag imglttitlegtbull ltheadgtbull ltbodygtbull ltpgtltbgtTag img hanya dengan atribut ltigtsrcltigtltbgtltpgtbull ltpgtltimg src=fileD|Hydrangeasjpg border=10gtltpgtbull ltpgtltimg src=fileC|UsersPublicPicturesSample

Picturestulipsjpg width=400 height=300gtltpgtbull ltbodygtbull lthtmlgt

TUGAS

Jelaskan arti dan fungsi dari Protokol1 FTP (File Transfer Protocol)2 Telnet3 Gopher4 POP3-mail 5 IRC (internet Relay Chat6 HTTP (Hypertext Transfer Protocol)

• HTML Basic
• Pendahuluan
• Ada beberapa jenis protocol harus dikenal di internet yaitu
• BROWSER
• HTML (HyperText Markup Language)
• Beberapa Istilah dalam Internet
• Slide 7
• BAB II
• PENDAHULUAN
• Slide 10
• Tag dasar HTML
• Slide 12
• Latihan 2
• Slide 14
• Slide 15
• Slide 16
• Slide 17
• Prinsip-prinsip Desain Web
• Fungsi tag ltfontgt adalah untuk memanipulasi baik jenis ukuran
• F Tag ltselectgtltselectgt dan ltoption
• Slide 21
• Slide 22
• Tag ltimggt
• Slide 24
• TUGAS

13

Latihan 2bull Rancanglah sebuah web dgn tampilan

seperti gambar ini

14

bull ltHTMLgtbull ltHEADgtltH2gtSELAMAT DATANG DI SMK NEGERI 3

PEMATANGSIANTARltH2gtbull ltHEADgtbull ltBODYgtbull ltH1gt--------------------------------------------------------------------ltH1gtbull ltH1gtJALAN MEDAN KM 105 PEMATANGSIANTARltH1gtbull ltH2gtKOMPETENSI KEAHLIANltH2gtbull ltH3gt1 PERHOTELANltH3gtbull ltH4gt2 REKAYASA PERANGKAT LUNAKltH4gtbull ltH5gt3 TATA BUSANA DAN KECANTIKANltH5gtbull ltBODYgtbull ltHTMLgt

15

10 Pengaturan bentuk ukuran dan warna tulisan

ndash Pengaturannya dilakukan dengan tag-tag seperti contoh berikut

16

11 ltHRgtndash Pemberian tag ini bertujuan untuk membuat garis horizontal pada dokumen

web Dapat diberikan attribute seperti pada atribut gambar image

12 Tag Tabelndash Untuk membuat tabel di dokumen web dapat dilakukan dengan memberikan

tag-tag Tabel Dalam tag-tag tabel ini terdiri dari beberapa tag seperti contoh berikut

ndash Untuk membuat tabel seperti tampak di bawah ini ndash Sel 1 baris 1 Sel 2 baris 1 Sel 3 baris 1 Sel 4 baris 1ndash Sel 1 baris 2 Sel 2 baris 2 Sel 3 baris 2 Sel 4 baris 2

Maka tag yang harus ditulis adalah sbbndash lttable border=1gtndash lttrgt lt--baris 1 awal--gtndash lttdgtSel 1 baris 1lttdgtndash lttdgtSel 2 baris 1lttdgtndash lttdgtSel 3 baris 1lttdgtndash lttdgtSel 4 baris 1lttdgtndash lttrgt lt--baris 1 akhir--gt

17

bull lttable border=1gtbull lttrgt lt--baris 1 awal--gtbull lttdgtSel 1 baris 1lttdgtbull lttdgtSel 2 baris 1lttdgtbull lttdgtSel 3 baris 1lttdgtbull lttdgtSel 4 baris 1lttdgtbull lttrgt lt--baris 1 akhir--gtbull lttrgt lt--baris 2 awal--gtbull lttdgtSel 1 baris 2lttdgtbull lttdgtSel 2 baris 2lttdgtbull lttdgtSel 3 baris 2lttdgtbull lttdgtSel 4 baris 2lttdgtbull lttrgt lt--baris 2 akhir--gtbull lttablegt

18

Prinsip-prinsip Desain Web

1 Fokus pada kebutuhan

2 Efisien dalam menggunakan sumber daya

3 Mendukung navigasi

4 Buatlah halaman Web senyaman dan seramahmungkin

5 Mendukung interaksi bila diperlukan

19

lthtmlgt

ltheadgt

lttitlegtAtribut dari Tag Fontlttitlegt

ltheadgt

ltbodygt

ltpgtltfont face=ArialgtIni Font Arialltfontgtltpgt

ltpgtltfont face=ArialgtltigtIni Font Arial dan miringltigtltfontgtltpgt

ltpgtltfont face=verdana size=4 color=bluegtltbgtIni Font Verdana berukuran 12 pt

berwarna biru sekaligus teballtbgtltfontgt

ltp align=centergtltfont face=Tahoma color=redgtltbgtIni Font Tahoma berwarna

merah tebal dan berada di tengahltbgtltfontgtltpgt

ltp align=centergtltfont face=Arial color=redgtIni Font Arial berwarna Merah

ltfontgtltfont face=Verdana color=bluegtSedangkan ini adalah font Verdana

berwarna birultfontgtltpgt

ltbodygt

lthtmlgt

Fungsi tag ltfontgt adalah untuk memanipulasi baik jenis ukuran dan warna huruf

20

F Tag ltselectgtltselectgt dan ltoption

Tag select tidak bisa berdiri sendiri dan harus menggandeng tag option untuk dapat menampilkan output

Dan cara kerjanya hampir sama dengan tag radio hanya saja tag select lebih singkat

21

Tag FORMbull Tag ltformgt berguna untuk mengirimkan(mem-

post) variabel yang bersisi data ke file tujuan yang memproses variabel tersebut Tag-tag yang biasa digunakan bersama tag form adalah tag ltinputgt dan lttextareagt

Tag ltinputgtbull Tag ltinputgt memiliki atribut type yang fungsinya

sangat vital dalam output tampilan Isi dari atribut type dapat menentukan jenis tampilan apakah itu textbox password box checkboxradio button dan sebagainya

22

Tag ltselectgtltselectgt dan ltoptiongtbull Tag select tidak bisa berdiri sendiri dan harus menggandeng tag option untuk dapat menampilkan output Dan

cara kerjanya hampir sama dengan tag radio hanya saja tag select lebih singkat

lthtmlgt

ltheadgt

lttitlegtPropeti tag Select dan Optionlttitlegt

ltheadgt

ltbodygt

ltpgtltbgtPenggunaan select dan dan optionltbgtltpgt

ltpgtDaftar kategori silahkan pilih kategoriltpgt

ltform action=cobaphp method=postgt

Kategori ltselect name=Pilihangt

ltoption value=Kategori 1gtKategori 1

ltoption value=Kategori 2gtKategori 2

ltoption value=Kategori 3gtKategori 3

ltselectgt

ltpgtltinput type=submit value=KIRIMgtltpgt

ltformgt

ltbodygt

lthtmlgt

23

Tag ltimggt

bull Untuk menampilkan gambar pada halaman dapat digunakan tag ltimggt Format file yang dapat didukung oleh tag img bermacam-macam mulai BMP JPG GIF TGA dan lain-lainTag img memiliki beberapa atribut yaitu ndash ‐ src letak file gambar yang akan ditampilkanndash ‐ border tebal bingkai gambarndash ‐ height menentukan tinggi imagegambarndash ‐ width menentukan lebar imagegambar

24

bull lthtmlgtbull ltheadgtbull lttitlegtAtribut dari Tag imglttitlegtbull ltheadgtbull ltbodygtbull ltpgtltbgtTag img hanya dengan atribut ltigtsrcltigtltbgtltpgtbull ltpgtltimg src=fileD|Hydrangeasjpg border=10gtltpgtbull ltpgtltimg src=fileC|UsersPublicPicturesSample

Picturestulipsjpg width=400 height=300gtltpgtbull ltbodygtbull lthtmlgt

TUGAS

Jelaskan arti dan fungsi dari Protokol1 FTP (File Transfer Protocol)2 Telnet3 Gopher4 POP3-mail 5 IRC (internet Relay Chat6 HTTP (Hypertext Transfer Protocol)

• HTML Basic
• Pendahuluan
• Ada beberapa jenis protocol harus dikenal di internet yaitu
• BROWSER
• HTML (HyperText Markup Language)
• Beberapa Istilah dalam Internet
• Slide 7
• BAB II
• PENDAHULUAN
• Slide 10
• Tag dasar HTML
• Slide 12
• Latihan 2
• Slide 14
• Slide 15
• Slide 16
• Slide 17
• Prinsip-prinsip Desain Web
• Fungsi tag ltfontgt adalah untuk memanipulasi baik jenis ukuran
• F Tag ltselectgtltselectgt dan ltoption
• Slide 21
• Slide 22
• Tag ltimggt
• Slide 24
• TUGAS

14

bull ltHTMLgtbull ltHEADgtltH2gtSELAMAT DATANG DI SMK NEGERI 3

PEMATANGSIANTARltH2gtbull ltHEADgtbull ltBODYgtbull ltH1gt--------------------------------------------------------------------ltH1gtbull ltH1gtJALAN MEDAN KM 105 PEMATANGSIANTARltH1gtbull ltH2gtKOMPETENSI KEAHLIANltH2gtbull ltH3gt1 PERHOTELANltH3gtbull ltH4gt2 REKAYASA PERANGKAT LUNAKltH4gtbull ltH5gt3 TATA BUSANA DAN KECANTIKANltH5gtbull ltBODYgtbull ltHTMLgt

15

10 Pengaturan bentuk ukuran dan warna tulisan

ndash Pengaturannya dilakukan dengan tag-tag seperti contoh berikut

16

11 ltHRgtndash Pemberian tag ini bertujuan untuk membuat garis horizontal pada dokumen

web Dapat diberikan attribute seperti pada atribut gambar image

12 Tag Tabelndash Untuk membuat tabel di dokumen web dapat dilakukan dengan memberikan

tag-tag Tabel Dalam tag-tag tabel ini terdiri dari beberapa tag seperti contoh berikut

ndash Untuk membuat tabel seperti tampak di bawah ini ndash Sel 1 baris 1 Sel 2 baris 1 Sel 3 baris 1 Sel 4 baris 1ndash Sel 1 baris 2 Sel 2 baris 2 Sel 3 baris 2 Sel 4 baris 2

Maka tag yang harus ditulis adalah sbbndash lttable border=1gtndash lttrgt lt--baris 1 awal--gtndash lttdgtSel 1 baris 1lttdgtndash lttdgtSel 2 baris 1lttdgtndash lttdgtSel 3 baris 1lttdgtndash lttdgtSel 4 baris 1lttdgtndash lttrgt lt--baris 1 akhir--gt

17

bull lttable border=1gtbull lttrgt lt--baris 1 awal--gtbull lttdgtSel 1 baris 1lttdgtbull lttdgtSel 2 baris 1lttdgtbull lttdgtSel 3 baris 1lttdgtbull lttdgtSel 4 baris 1lttdgtbull lttrgt lt--baris 1 akhir--gtbull lttrgt lt--baris 2 awal--gtbull lttdgtSel 1 baris 2lttdgtbull lttdgtSel 2 baris 2lttdgtbull lttdgtSel 3 baris 2lttdgtbull lttdgtSel 4 baris 2lttdgtbull lttrgt lt--baris 2 akhir--gtbull lttablegt

18

Prinsip-prinsip Desain Web

1 Fokus pada kebutuhan

2 Efisien dalam menggunakan sumber daya

3 Mendukung navigasi

4 Buatlah halaman Web senyaman dan seramahmungkin

5 Mendukung interaksi bila diperlukan

19

lthtmlgt

ltheadgt

lttitlegtAtribut dari Tag Fontlttitlegt

ltheadgt

ltbodygt

ltpgtltfont face=ArialgtIni Font Arialltfontgtltpgt

ltpgtltfont face=ArialgtltigtIni Font Arial dan miringltigtltfontgtltpgt

ltpgtltfont face=verdana size=4 color=bluegtltbgtIni Font Verdana berukuran 12 pt

berwarna biru sekaligus teballtbgtltfontgt

ltp align=centergtltfont face=Tahoma color=redgtltbgtIni Font Tahoma berwarna

merah tebal dan berada di tengahltbgtltfontgtltpgt

ltp align=centergtltfont face=Arial color=redgtIni Font Arial berwarna Merah

ltfontgtltfont face=Verdana color=bluegtSedangkan ini adalah font Verdana

berwarna birultfontgtltpgt

ltbodygt

lthtmlgt

Fungsi tag ltfontgt adalah untuk memanipulasi baik jenis ukuran dan warna huruf

20

F Tag ltselectgtltselectgt dan ltoption

Tag select tidak bisa berdiri sendiri dan harus menggandeng tag option untuk dapat menampilkan output

Dan cara kerjanya hampir sama dengan tag radio hanya saja tag select lebih singkat

21

Tag FORMbull Tag ltformgt berguna untuk mengirimkan(mem-

post) variabel yang bersisi data ke file tujuan yang memproses variabel tersebut Tag-tag yang biasa digunakan bersama tag form adalah tag ltinputgt dan lttextareagt

Tag ltinputgtbull Tag ltinputgt memiliki atribut type yang fungsinya

sangat vital dalam output tampilan Isi dari atribut type dapat menentukan jenis tampilan apakah itu textbox password box checkboxradio button dan sebagainya

22

Tag ltselectgtltselectgt dan ltoptiongtbull Tag select tidak bisa berdiri sendiri dan harus menggandeng tag option untuk dapat menampilkan output Dan

cara kerjanya hampir sama dengan tag radio hanya saja tag select lebih singkat

lthtmlgt

ltheadgt

lttitlegtPropeti tag Select dan Optionlttitlegt

ltheadgt

ltbodygt

ltpgtltbgtPenggunaan select dan dan optionltbgtltpgt

ltpgtDaftar kategori silahkan pilih kategoriltpgt

ltform action=cobaphp method=postgt

Kategori ltselect name=Pilihangt

ltoption value=Kategori 1gtKategori 1

ltoption value=Kategori 2gtKategori 2

ltoption value=Kategori 3gtKategori 3

ltselectgt

ltpgtltinput type=submit value=KIRIMgtltpgt

ltformgt

ltbodygt

lthtmlgt

23

Tag ltimggt

bull Untuk menampilkan gambar pada halaman dapat digunakan tag ltimggt Format file yang dapat didukung oleh tag img bermacam-macam mulai BMP JPG GIF TGA dan lain-lainTag img memiliki beberapa atribut yaitu ndash ‐ src letak file gambar yang akan ditampilkanndash ‐ border tebal bingkai gambarndash ‐ height menentukan tinggi imagegambarndash ‐ width menentukan lebar imagegambar

24

bull lthtmlgtbull ltheadgtbull lttitlegtAtribut dari Tag imglttitlegtbull ltheadgtbull ltbodygtbull ltpgtltbgtTag img hanya dengan atribut ltigtsrcltigtltbgtltpgtbull ltpgtltimg src=fileD|Hydrangeasjpg border=10gtltpgtbull ltpgtltimg src=fileC|UsersPublicPicturesSample

Picturestulipsjpg width=400 height=300gtltpgtbull ltbodygtbull lthtmlgt

TUGAS

Jelaskan arti dan fungsi dari Protokol1 FTP (File Transfer Protocol)2 Telnet3 Gopher4 POP3-mail 5 IRC (internet Relay Chat6 HTTP (Hypertext Transfer Protocol)

• HTML Basic
• Pendahuluan
• Ada beberapa jenis protocol harus dikenal di internet yaitu
• BROWSER
• HTML (HyperText Markup Language)
• Beberapa Istilah dalam Internet
• Slide 7
• BAB II
• PENDAHULUAN
• Slide 10
• Tag dasar HTML
• Slide 12
• Latihan 2
• Slide 14
• Slide 15
• Slide 16
• Slide 17
• Prinsip-prinsip Desain Web
• Fungsi tag ltfontgt adalah untuk memanipulasi baik jenis ukuran
• F Tag ltselectgtltselectgt dan ltoption
• Slide 21
• Slide 22
• Tag ltimggt
• Slide 24
• TUGAS

15

10 Pengaturan bentuk ukuran dan warna tulisan

ndash Pengaturannya dilakukan dengan tag-tag seperti contoh berikut

16

11 ltHRgtndash Pemberian tag ini bertujuan untuk membuat garis horizontal pada dokumen

web Dapat diberikan attribute seperti pada atribut gambar image

12 Tag Tabelndash Untuk membuat tabel di dokumen web dapat dilakukan dengan memberikan

tag-tag Tabel Dalam tag-tag tabel ini terdiri dari beberapa tag seperti contoh berikut

ndash Untuk membuat tabel seperti tampak di bawah ini ndash Sel 1 baris 1 Sel 2 baris 1 Sel 3 baris 1 Sel 4 baris 1ndash Sel 1 baris 2 Sel 2 baris 2 Sel 3 baris 2 Sel 4 baris 2

Maka tag yang harus ditulis adalah sbbndash lttable border=1gtndash lttrgt lt--baris 1 awal--gtndash lttdgtSel 1 baris 1lttdgtndash lttdgtSel 2 baris 1lttdgtndash lttdgtSel 3 baris 1lttdgtndash lttdgtSel 4 baris 1lttdgtndash lttrgt lt--baris 1 akhir--gt

17

bull lttable border=1gtbull lttrgt lt--baris 1 awal--gtbull lttdgtSel 1 baris 1lttdgtbull lttdgtSel 2 baris 1lttdgtbull lttdgtSel 3 baris 1lttdgtbull lttdgtSel 4 baris 1lttdgtbull lttrgt lt--baris 1 akhir--gtbull lttrgt lt--baris 2 awal--gtbull lttdgtSel 1 baris 2lttdgtbull lttdgtSel 2 baris 2lttdgtbull lttdgtSel 3 baris 2lttdgtbull lttdgtSel 4 baris 2lttdgtbull lttrgt lt--baris 2 akhir--gtbull lttablegt

18

Prinsip-prinsip Desain Web

1 Fokus pada kebutuhan

2 Efisien dalam menggunakan sumber daya

3 Mendukung navigasi

4 Buatlah halaman Web senyaman dan seramahmungkin

5 Mendukung interaksi bila diperlukan

19

lthtmlgt

ltheadgt

lttitlegtAtribut dari Tag Fontlttitlegt

ltheadgt

ltbodygt

ltpgtltfont face=ArialgtIni Font Arialltfontgtltpgt

ltpgtltfont face=ArialgtltigtIni Font Arial dan miringltigtltfontgtltpgt

ltpgtltfont face=verdana size=4 color=bluegtltbgtIni Font Verdana berukuran 12 pt

berwarna biru sekaligus teballtbgtltfontgt

ltp align=centergtltfont face=Tahoma color=redgtltbgtIni Font Tahoma berwarna

merah tebal dan berada di tengahltbgtltfontgtltpgt

ltp align=centergtltfont face=Arial color=redgtIni Font Arial berwarna Merah

ltfontgtltfont face=Verdana color=bluegtSedangkan ini adalah font Verdana

berwarna birultfontgtltpgt

ltbodygt

lthtmlgt

Fungsi tag ltfontgt adalah untuk memanipulasi baik jenis ukuran dan warna huruf

20

F Tag ltselectgtltselectgt dan ltoption

Tag select tidak bisa berdiri sendiri dan harus menggandeng tag option untuk dapat menampilkan output

Dan cara kerjanya hampir sama dengan tag radio hanya saja tag select lebih singkat

21

Tag FORMbull Tag ltformgt berguna untuk mengirimkan(mem-

post) variabel yang bersisi data ke file tujuan yang memproses variabel tersebut Tag-tag yang biasa digunakan bersama tag form adalah tag ltinputgt dan lttextareagt

Tag ltinputgtbull Tag ltinputgt memiliki atribut type yang fungsinya

sangat vital dalam output tampilan Isi dari atribut type dapat menentukan jenis tampilan apakah itu textbox password box checkboxradio button dan sebagainya

22

Tag ltselectgtltselectgt dan ltoptiongtbull Tag select tidak bisa berdiri sendiri dan harus menggandeng tag option untuk dapat menampilkan output Dan

cara kerjanya hampir sama dengan tag radio hanya saja tag select lebih singkat

lthtmlgt

ltheadgt

lttitlegtPropeti tag Select dan Optionlttitlegt

ltheadgt

ltbodygt

ltpgtltbgtPenggunaan select dan dan optionltbgtltpgt

ltpgtDaftar kategori silahkan pilih kategoriltpgt

ltform action=cobaphp method=postgt

Kategori ltselect name=Pilihangt

ltoption value=Kategori 1gtKategori 1

ltoption value=Kategori 2gtKategori 2

ltoption value=Kategori 3gtKategori 3

ltselectgt

ltpgtltinput type=submit value=KIRIMgtltpgt

ltformgt

ltbodygt

lthtmlgt

23

Tag ltimggt

bull Untuk menampilkan gambar pada halaman dapat digunakan tag ltimggt Format file yang dapat didukung oleh tag img bermacam-macam mulai BMP JPG GIF TGA dan lain-lainTag img memiliki beberapa atribut yaitu ndash ‐ src letak file gambar yang akan ditampilkanndash ‐ border tebal bingkai gambarndash ‐ height menentukan tinggi imagegambarndash ‐ width menentukan lebar imagegambar

24

bull lthtmlgtbull ltheadgtbull lttitlegtAtribut dari Tag imglttitlegtbull ltheadgtbull ltbodygtbull ltpgtltbgtTag img hanya dengan atribut ltigtsrcltigtltbgtltpgtbull ltpgtltimg src=fileD|Hydrangeasjpg border=10gtltpgtbull ltpgtltimg src=fileC|UsersPublicPicturesSample

Picturestulipsjpg width=400 height=300gtltpgtbull ltbodygtbull lthtmlgt

TUGAS

Jelaskan arti dan fungsi dari Protokol1 FTP (File Transfer Protocol)2 Telnet3 Gopher4 POP3-mail 5 IRC (internet Relay Chat6 HTTP (Hypertext Transfer Protocol)

• HTML Basic
• Pendahuluan
• Ada beberapa jenis protocol harus dikenal di internet yaitu
• BROWSER
• HTML (HyperText Markup Language)
• Beberapa Istilah dalam Internet
• Slide 7
• BAB II
• PENDAHULUAN
• Slide 10
• Tag dasar HTML
• Slide 12
• Latihan 2
• Slide 14
• Slide 15
• Slide 16
• Slide 17
• Prinsip-prinsip Desain Web
• Fungsi tag ltfontgt adalah untuk memanipulasi baik jenis ukuran
• F Tag ltselectgtltselectgt dan ltoption
• Slide 21
• Slide 22
• Tag ltimggt
• Slide 24
• TUGAS

16

11 ltHRgtndash Pemberian tag ini bertujuan untuk membuat garis horizontal pada dokumen

web Dapat diberikan attribute seperti pada atribut gambar image

12 Tag Tabelndash Untuk membuat tabel di dokumen web dapat dilakukan dengan memberikan

tag-tag Tabel Dalam tag-tag tabel ini terdiri dari beberapa tag seperti contoh berikut

ndash Untuk membuat tabel seperti tampak di bawah ini ndash Sel 1 baris 1 Sel 2 baris 1 Sel 3 baris 1 Sel 4 baris 1ndash Sel 1 baris 2 Sel 2 baris 2 Sel 3 baris 2 Sel 4 baris 2

Maka tag yang harus ditulis adalah sbbndash lttable border=1gtndash lttrgt lt--baris 1 awal--gtndash lttdgtSel 1 baris 1lttdgtndash lttdgtSel 2 baris 1lttdgtndash lttdgtSel 3 baris 1lttdgtndash lttdgtSel 4 baris 1lttdgtndash lttrgt lt--baris 1 akhir--gt

17

bull lttable border=1gtbull lttrgt lt--baris 1 awal--gtbull lttdgtSel 1 baris 1lttdgtbull lttdgtSel 2 baris 1lttdgtbull lttdgtSel 3 baris 1lttdgtbull lttdgtSel 4 baris 1lttdgtbull lttrgt lt--baris 1 akhir--gtbull lttrgt lt--baris 2 awal--gtbull lttdgtSel 1 baris 2lttdgtbull lttdgtSel 2 baris 2lttdgtbull lttdgtSel 3 baris 2lttdgtbull lttdgtSel 4 baris 2lttdgtbull lttrgt lt--baris 2 akhir--gtbull lttablegt

18

Prinsip-prinsip Desain Web

1 Fokus pada kebutuhan

2 Efisien dalam menggunakan sumber daya

3 Mendukung navigasi

4 Buatlah halaman Web senyaman dan seramahmungkin

5 Mendukung interaksi bila diperlukan

19

lthtmlgt

ltheadgt

lttitlegtAtribut dari Tag Fontlttitlegt

ltheadgt

ltbodygt

ltpgtltfont face=ArialgtIni Font Arialltfontgtltpgt

ltpgtltfont face=ArialgtltigtIni Font Arial dan miringltigtltfontgtltpgt

ltpgtltfont face=verdana size=4 color=bluegtltbgtIni Font Verdana berukuran 12 pt

berwarna biru sekaligus teballtbgtltfontgt

ltp align=centergtltfont face=Tahoma color=redgtltbgtIni Font Tahoma berwarna

merah tebal dan berada di tengahltbgtltfontgtltpgt

ltp align=centergtltfont face=Arial color=redgtIni Font Arial berwarna Merah

ltfontgtltfont face=Verdana color=bluegtSedangkan ini adalah font Verdana

berwarna birultfontgtltpgt

ltbodygt

lthtmlgt

Fungsi tag ltfontgt adalah untuk memanipulasi baik jenis ukuran dan warna huruf

20

F Tag ltselectgtltselectgt dan ltoption

Tag select tidak bisa berdiri sendiri dan harus menggandeng tag option untuk dapat menampilkan output

Dan cara kerjanya hampir sama dengan tag radio hanya saja tag select lebih singkat

21

Tag FORMbull Tag ltformgt berguna untuk mengirimkan(mem-

post) variabel yang bersisi data ke file tujuan yang memproses variabel tersebut Tag-tag yang biasa digunakan bersama tag form adalah tag ltinputgt dan lttextareagt

Tag ltinputgtbull Tag ltinputgt memiliki atribut type yang fungsinya

sangat vital dalam output tampilan Isi dari atribut type dapat menentukan jenis tampilan apakah itu textbox password box checkboxradio button dan sebagainya

22

Tag ltselectgtltselectgt dan ltoptiongtbull Tag select tidak bisa berdiri sendiri dan harus menggandeng tag option untuk dapat menampilkan output Dan

cara kerjanya hampir sama dengan tag radio hanya saja tag select lebih singkat

lthtmlgt

ltheadgt

lttitlegtPropeti tag Select dan Optionlttitlegt

ltheadgt

ltbodygt

ltpgtltbgtPenggunaan select dan dan optionltbgtltpgt

ltpgtDaftar kategori silahkan pilih kategoriltpgt

ltform action=cobaphp method=postgt

Kategori ltselect name=Pilihangt

ltoption value=Kategori 1gtKategori 1

ltoption value=Kategori 2gtKategori 2

ltoption value=Kategori 3gtKategori 3

ltselectgt

ltpgtltinput type=submit value=KIRIMgtltpgt

ltformgt

ltbodygt

lthtmlgt

23

Tag ltimggt

bull Untuk menampilkan gambar pada halaman dapat digunakan tag ltimggt Format file yang dapat didukung oleh tag img bermacam-macam mulai BMP JPG GIF TGA dan lain-lainTag img memiliki beberapa atribut yaitu ndash ‐ src letak file gambar yang akan ditampilkanndash ‐ border tebal bingkai gambarndash ‐ height menentukan tinggi imagegambarndash ‐ width menentukan lebar imagegambar

24

bull lthtmlgtbull ltheadgtbull lttitlegtAtribut dari Tag imglttitlegtbull ltheadgtbull ltbodygtbull ltpgtltbgtTag img hanya dengan atribut ltigtsrcltigtltbgtltpgtbull ltpgtltimg src=fileD|Hydrangeasjpg border=10gtltpgtbull ltpgtltimg src=fileC|UsersPublicPicturesSample

Picturestulipsjpg width=400 height=300gtltpgtbull ltbodygtbull lthtmlgt

TUGAS

Jelaskan arti dan fungsi dari Protokol1 FTP (File Transfer Protocol)2 Telnet3 Gopher4 POP3-mail 5 IRC (internet Relay Chat6 HTTP (Hypertext Transfer Protocol)

• HTML Basic
• Pendahuluan
• Ada beberapa jenis protocol harus dikenal di internet yaitu
• BROWSER
• HTML (HyperText Markup Language)
• Beberapa Istilah dalam Internet
• Slide 7
• BAB II
• PENDAHULUAN
• Slide 10
• Tag dasar HTML
• Slide 12
• Latihan 2
• Slide 14
• Slide 15
• Slide 16
• Slide 17
• Prinsip-prinsip Desain Web
• Fungsi tag ltfontgt adalah untuk memanipulasi baik jenis ukuran
• F Tag ltselectgtltselectgt dan ltoption
• Slide 21
• Slide 22
• Tag ltimggt
• Slide 24
• TUGAS

17

bull lttable border=1gtbull lttrgt lt--baris 1 awal--gtbull lttdgtSel 1 baris 1lttdgtbull lttdgtSel 2 baris 1lttdgtbull lttdgtSel 3 baris 1lttdgtbull lttdgtSel 4 baris 1lttdgtbull lttrgt lt--baris 1 akhir--gtbull lttrgt lt--baris 2 awal--gtbull lttdgtSel 1 baris 2lttdgtbull lttdgtSel 2 baris 2lttdgtbull lttdgtSel 3 baris 2lttdgtbull lttdgtSel 4 baris 2lttdgtbull lttrgt lt--baris 2 akhir--gtbull lttablegt

18

Prinsip-prinsip Desain Web

1 Fokus pada kebutuhan

2 Efisien dalam menggunakan sumber daya

3 Mendukung navigasi

4 Buatlah halaman Web senyaman dan seramahmungkin

5 Mendukung interaksi bila diperlukan

19

lthtmlgt

ltheadgt

lttitlegtAtribut dari Tag Fontlttitlegt

ltheadgt

ltbodygt

ltpgtltfont face=ArialgtIni Font Arialltfontgtltpgt

ltpgtltfont face=ArialgtltigtIni Font Arial dan miringltigtltfontgtltpgt

ltpgtltfont face=verdana size=4 color=bluegtltbgtIni Font Verdana berukuran 12 pt

berwarna biru sekaligus teballtbgtltfontgt

ltp align=centergtltfont face=Tahoma color=redgtltbgtIni Font Tahoma berwarna

merah tebal dan berada di tengahltbgtltfontgtltpgt

ltp align=centergtltfont face=Arial color=redgtIni Font Arial berwarna Merah

ltfontgtltfont face=Verdana color=bluegtSedangkan ini adalah font Verdana

berwarna birultfontgtltpgt

ltbodygt

lthtmlgt

Fungsi tag ltfontgt adalah untuk memanipulasi baik jenis ukuran dan warna huruf

20

F Tag ltselectgtltselectgt dan ltoption

Tag select tidak bisa berdiri sendiri dan harus menggandeng tag option untuk dapat menampilkan output

Dan cara kerjanya hampir sama dengan tag radio hanya saja tag select lebih singkat

21

Tag FORMbull Tag ltformgt berguna untuk mengirimkan(mem-

post) variabel yang bersisi data ke file tujuan yang memproses variabel tersebut Tag-tag yang biasa digunakan bersama tag form adalah tag ltinputgt dan lttextareagt

Tag ltinputgtbull Tag ltinputgt memiliki atribut type yang fungsinya

sangat vital dalam output tampilan Isi dari atribut type dapat menentukan jenis tampilan apakah itu textbox password box checkboxradio button dan sebagainya

22

Tag ltselectgtltselectgt dan ltoptiongtbull Tag select tidak bisa berdiri sendiri dan harus menggandeng tag option untuk dapat menampilkan output Dan

cara kerjanya hampir sama dengan tag radio hanya saja tag select lebih singkat

lthtmlgt

ltheadgt

lttitlegtPropeti tag Select dan Optionlttitlegt

ltheadgt

ltbodygt

ltpgtltbgtPenggunaan select dan dan optionltbgtltpgt

ltpgtDaftar kategori silahkan pilih kategoriltpgt

ltform action=cobaphp method=postgt

Kategori ltselect name=Pilihangt

ltoption value=Kategori 1gtKategori 1

ltoption value=Kategori 2gtKategori 2

ltoption value=Kategori 3gtKategori 3

ltselectgt

ltpgtltinput type=submit value=KIRIMgtltpgt

ltformgt

ltbodygt

lthtmlgt

23

Tag ltimggt

bull Untuk menampilkan gambar pada halaman dapat digunakan tag ltimggt Format file yang dapat didukung oleh tag img bermacam-macam mulai BMP JPG GIF TGA dan lain-lainTag img memiliki beberapa atribut yaitu ndash ‐ src letak file gambar yang akan ditampilkanndash ‐ border tebal bingkai gambarndash ‐ height menentukan tinggi imagegambarndash ‐ width menentukan lebar imagegambar

24

bull lthtmlgtbull ltheadgtbull lttitlegtAtribut dari Tag imglttitlegtbull ltheadgtbull ltbodygtbull ltpgtltbgtTag img hanya dengan atribut ltigtsrcltigtltbgtltpgtbull ltpgtltimg src=fileD|Hydrangeasjpg border=10gtltpgtbull ltpgtltimg src=fileC|UsersPublicPicturesSample

Picturestulipsjpg width=400 height=300gtltpgtbull ltbodygtbull lthtmlgt

TUGAS

Jelaskan arti dan fungsi dari Protokol1 FTP (File Transfer Protocol)2 Telnet3 Gopher4 POP3-mail 5 IRC (internet Relay Chat6 HTTP (Hypertext Transfer Protocol)

• HTML Basic
• Pendahuluan
• Ada beberapa jenis protocol harus dikenal di internet yaitu
• BROWSER
• HTML (HyperText Markup Language)
• Beberapa Istilah dalam Internet
• Slide 7
• BAB II
• PENDAHULUAN
• Slide 10
• Tag dasar HTML
• Slide 12
• Latihan 2
• Slide 14
• Slide 15
• Slide 16
• Slide 17
• Prinsip-prinsip Desain Web
• Fungsi tag ltfontgt adalah untuk memanipulasi baik jenis ukuran
• F Tag ltselectgtltselectgt dan ltoption
• Slide 21
• Slide 22
• Tag ltimggt
• Slide 24
• TUGAS

18

Prinsip-prinsip Desain Web

1 Fokus pada kebutuhan

2 Efisien dalam menggunakan sumber daya

3 Mendukung navigasi

4 Buatlah halaman Web senyaman dan seramahmungkin

5 Mendukung interaksi bila diperlukan

19

lthtmlgt

ltheadgt

lttitlegtAtribut dari Tag Fontlttitlegt

ltheadgt

ltbodygt

ltpgtltfont face=ArialgtIni Font Arialltfontgtltpgt

ltpgtltfont face=ArialgtltigtIni Font Arial dan miringltigtltfontgtltpgt

ltpgtltfont face=verdana size=4 color=bluegtltbgtIni Font Verdana berukuran 12 pt

berwarna biru sekaligus teballtbgtltfontgt

ltp align=centergtltfont face=Tahoma color=redgtltbgtIni Font Tahoma berwarna

merah tebal dan berada di tengahltbgtltfontgtltpgt

ltp align=centergtltfont face=Arial color=redgtIni Font Arial berwarna Merah

ltfontgtltfont face=Verdana color=bluegtSedangkan ini adalah font Verdana

berwarna birultfontgtltpgt

ltbodygt

lthtmlgt

Fungsi tag ltfontgt adalah untuk memanipulasi baik jenis ukuran dan warna huruf

20

F Tag ltselectgtltselectgt dan ltoption

Tag select tidak bisa berdiri sendiri dan harus menggandeng tag option untuk dapat menampilkan output

Dan cara kerjanya hampir sama dengan tag radio hanya saja tag select lebih singkat

21

Tag FORMbull Tag ltformgt berguna untuk mengirimkan(mem-

post) variabel yang bersisi data ke file tujuan yang memproses variabel tersebut Tag-tag yang biasa digunakan bersama tag form adalah tag ltinputgt dan lttextareagt

Tag ltinputgtbull Tag ltinputgt memiliki atribut type yang fungsinya

sangat vital dalam output tampilan Isi dari atribut type dapat menentukan jenis tampilan apakah itu textbox password box checkboxradio button dan sebagainya

22

Tag ltselectgtltselectgt dan ltoptiongtbull Tag select tidak bisa berdiri sendiri dan harus menggandeng tag option untuk dapat menampilkan output Dan

cara kerjanya hampir sama dengan tag radio hanya saja tag select lebih singkat

lthtmlgt

ltheadgt

lttitlegtPropeti tag Select dan Optionlttitlegt

ltheadgt

ltbodygt

ltpgtltbgtPenggunaan select dan dan optionltbgtltpgt

ltpgtDaftar kategori silahkan pilih kategoriltpgt

ltform action=cobaphp method=postgt

Kategori ltselect name=Pilihangt

ltoption value=Kategori 1gtKategori 1

ltoption value=Kategori 2gtKategori 2

ltoption value=Kategori 3gtKategori 3

ltselectgt

ltpgtltinput type=submit value=KIRIMgtltpgt

ltformgt

ltbodygt

lthtmlgt

23

Tag ltimggt

bull Untuk menampilkan gambar pada halaman dapat digunakan tag ltimggt Format file yang dapat didukung oleh tag img bermacam-macam mulai BMP JPG GIF TGA dan lain-lainTag img memiliki beberapa atribut yaitu ndash ‐ src letak file gambar yang akan ditampilkanndash ‐ border tebal bingkai gambarndash ‐ height menentukan tinggi imagegambarndash ‐ width menentukan lebar imagegambar

24

bull lthtmlgtbull ltheadgtbull lttitlegtAtribut dari Tag imglttitlegtbull ltheadgtbull ltbodygtbull ltpgtltbgtTag img hanya dengan atribut ltigtsrcltigtltbgtltpgtbull ltpgtltimg src=fileD|Hydrangeasjpg border=10gtltpgtbull ltpgtltimg src=fileC|UsersPublicPicturesSample

Picturestulipsjpg width=400 height=300gtltpgtbull ltbodygtbull lthtmlgt

TUGAS

Jelaskan arti dan fungsi dari Protokol1 FTP (File Transfer Protocol)2 Telnet3 Gopher4 POP3-mail 5 IRC (internet Relay Chat6 HTTP (Hypertext Transfer Protocol)

• HTML Basic
• Pendahuluan
• Ada beberapa jenis protocol harus dikenal di internet yaitu
• BROWSER
• HTML (HyperText Markup Language)
• Beberapa Istilah dalam Internet
• Slide 7
• BAB II
• PENDAHULUAN
• Slide 10
• Tag dasar HTML
• Slide 12
• Latihan 2
• Slide 14
• Slide 15
• Slide 16
• Slide 17
• Prinsip-prinsip Desain Web
• Fungsi tag ltfontgt adalah untuk memanipulasi baik jenis ukuran
• F Tag ltselectgtltselectgt dan ltoption
• Slide 21
• Slide 22
• Tag ltimggt
• Slide 24
• TUGAS

19

lthtmlgt

ltheadgt

lttitlegtAtribut dari Tag Fontlttitlegt

ltheadgt

ltbodygt

ltpgtltfont face=ArialgtIni Font Arialltfontgtltpgt

ltpgtltfont face=ArialgtltigtIni Font Arial dan miringltigtltfontgtltpgt

ltpgtltfont face=verdana size=4 color=bluegtltbgtIni Font Verdana berukuran 12 pt

berwarna biru sekaligus teballtbgtltfontgt

ltp align=centergtltfont face=Tahoma color=redgtltbgtIni Font Tahoma berwarna

merah tebal dan berada di tengahltbgtltfontgtltpgt

ltp align=centergtltfont face=Arial color=redgtIni Font Arial berwarna Merah

ltfontgtltfont face=Verdana color=bluegtSedangkan ini adalah font Verdana

berwarna birultfontgtltpgt

ltbodygt

lthtmlgt

Fungsi tag ltfontgt adalah untuk memanipulasi baik jenis ukuran dan warna huruf

20

F Tag ltselectgtltselectgt dan ltoption

Tag select tidak bisa berdiri sendiri dan harus menggandeng tag option untuk dapat menampilkan output

Dan cara kerjanya hampir sama dengan tag radio hanya saja tag select lebih singkat

21

Tag FORMbull Tag ltformgt berguna untuk mengirimkan(mem-

post) variabel yang bersisi data ke file tujuan yang memproses variabel tersebut Tag-tag yang biasa digunakan bersama tag form adalah tag ltinputgt dan lttextareagt

Tag ltinputgtbull Tag ltinputgt memiliki atribut type yang fungsinya

sangat vital dalam output tampilan Isi dari atribut type dapat menentukan jenis tampilan apakah itu textbox password box checkboxradio button dan sebagainya

22

Tag ltselectgtltselectgt dan ltoptiongtbull Tag select tidak bisa berdiri sendiri dan harus menggandeng tag option untuk dapat menampilkan output Dan

cara kerjanya hampir sama dengan tag radio hanya saja tag select lebih singkat

lthtmlgt

ltheadgt

lttitlegtPropeti tag Select dan Optionlttitlegt

ltheadgt

ltbodygt

ltpgtltbgtPenggunaan select dan dan optionltbgtltpgt

ltpgtDaftar kategori silahkan pilih kategoriltpgt

ltform action=cobaphp method=postgt

Kategori ltselect name=Pilihangt

ltoption value=Kategori 1gtKategori 1

ltoption value=Kategori 2gtKategori 2

ltoption value=Kategori 3gtKategori 3

ltselectgt

ltpgtltinput type=submit value=KIRIMgtltpgt

ltformgt

ltbodygt

lthtmlgt

23

Tag ltimggt

bull Untuk menampilkan gambar pada halaman dapat digunakan tag ltimggt Format file yang dapat didukung oleh tag img bermacam-macam mulai BMP JPG GIF TGA dan lain-lainTag img memiliki beberapa atribut yaitu ndash ‐ src letak file gambar yang akan ditampilkanndash ‐ border tebal bingkai gambarndash ‐ height menentukan tinggi imagegambarndash ‐ width menentukan lebar imagegambar

24

bull lthtmlgtbull ltheadgtbull lttitlegtAtribut dari Tag imglttitlegtbull ltheadgtbull ltbodygtbull ltpgtltbgtTag img hanya dengan atribut ltigtsrcltigtltbgtltpgtbull ltpgtltimg src=fileD|Hydrangeasjpg border=10gtltpgtbull ltpgtltimg src=fileC|UsersPublicPicturesSample

Picturestulipsjpg width=400 height=300gtltpgtbull ltbodygtbull lthtmlgt

TUGAS

Jelaskan arti dan fungsi dari Protokol1 FTP (File Transfer Protocol)2 Telnet3 Gopher4 POP3-mail 5 IRC (internet Relay Chat6 HTTP (Hypertext Transfer Protocol)

• HTML Basic
• Pendahuluan
• Ada beberapa jenis protocol harus dikenal di internet yaitu
• BROWSER
• HTML (HyperText Markup Language)
• Beberapa Istilah dalam Internet
• Slide 7
• BAB II
• PENDAHULUAN
• Slide 10
• Tag dasar HTML
• Slide 12
• Latihan 2
• Slide 14
• Slide 15
• Slide 16
• Slide 17
• Prinsip-prinsip Desain Web
• Fungsi tag ltfontgt adalah untuk memanipulasi baik jenis ukuran
• F Tag ltselectgtltselectgt dan ltoption
• Slide 21
• Slide 22
• Tag ltimggt
• Slide 24
• TUGAS

20

F Tag ltselectgtltselectgt dan ltoption

Tag select tidak bisa berdiri sendiri dan harus menggandeng tag option untuk dapat menampilkan output

Dan cara kerjanya hampir sama dengan tag radio hanya saja tag select lebih singkat

21

Tag FORMbull Tag ltformgt berguna untuk mengirimkan(mem-

post) variabel yang bersisi data ke file tujuan yang memproses variabel tersebut Tag-tag yang biasa digunakan bersama tag form adalah tag ltinputgt dan lttextareagt

Tag ltinputgtbull Tag ltinputgt memiliki atribut type yang fungsinya

sangat vital dalam output tampilan Isi dari atribut type dapat menentukan jenis tampilan apakah itu textbox password box checkboxradio button dan sebagainya

22

Tag ltselectgtltselectgt dan ltoptiongtbull Tag select tidak bisa berdiri sendiri dan harus menggandeng tag option untuk dapat menampilkan output Dan

cara kerjanya hampir sama dengan tag radio hanya saja tag select lebih singkat

lthtmlgt

ltheadgt

lttitlegtPropeti tag Select dan Optionlttitlegt

ltheadgt

ltbodygt

ltpgtltbgtPenggunaan select dan dan optionltbgtltpgt

ltpgtDaftar kategori silahkan pilih kategoriltpgt

ltform action=cobaphp method=postgt

Kategori ltselect name=Pilihangt

ltoption value=Kategori 1gtKategori 1

ltoption value=Kategori 2gtKategori 2

ltoption value=Kategori 3gtKategori 3

ltselectgt

ltpgtltinput type=submit value=KIRIMgtltpgt

ltformgt

ltbodygt

lthtmlgt

23

Tag ltimggt

bull Untuk menampilkan gambar pada halaman dapat digunakan tag ltimggt Format file yang dapat didukung oleh tag img bermacam-macam mulai BMP JPG GIF TGA dan lain-lainTag img memiliki beberapa atribut yaitu ndash ‐ src letak file gambar yang akan ditampilkanndash ‐ border tebal bingkai gambarndash ‐ height menentukan tinggi imagegambarndash ‐ width menentukan lebar imagegambar

24

bull lthtmlgtbull ltheadgtbull lttitlegtAtribut dari Tag imglttitlegtbull ltheadgtbull ltbodygtbull ltpgtltbgtTag img hanya dengan atribut ltigtsrcltigtltbgtltpgtbull ltpgtltimg src=fileD|Hydrangeasjpg border=10gtltpgtbull ltpgtltimg src=fileC|UsersPublicPicturesSample

Picturestulipsjpg width=400 height=300gtltpgtbull ltbodygtbull lthtmlgt

TUGAS

Jelaskan arti dan fungsi dari Protokol1 FTP (File Transfer Protocol)2 Telnet3 Gopher4 POP3-mail 5 IRC (internet Relay Chat6 HTTP (Hypertext Transfer Protocol)

• HTML Basic
• Pendahuluan
• Ada beberapa jenis protocol harus dikenal di internet yaitu
• BROWSER
• HTML (HyperText Markup Language)
• Beberapa Istilah dalam Internet
• Slide 7
• BAB II
• PENDAHULUAN
• Slide 10
• Tag dasar HTML
• Slide 12
• Latihan 2
• Slide 14
• Slide 15
• Slide 16
• Slide 17
• Prinsip-prinsip Desain Web
• Fungsi tag ltfontgt adalah untuk memanipulasi baik jenis ukuran
• F Tag ltselectgtltselectgt dan ltoption
• Slide 21
• Slide 22
• Tag ltimggt
• Slide 24
• TUGAS

21

Tag FORMbull Tag ltformgt berguna untuk mengirimkan(mem-

post) variabel yang bersisi data ke file tujuan yang memproses variabel tersebut Tag-tag yang biasa digunakan bersama tag form adalah tag ltinputgt dan lttextareagt

Tag ltinputgtbull Tag ltinputgt memiliki atribut type yang fungsinya

sangat vital dalam output tampilan Isi dari atribut type dapat menentukan jenis tampilan apakah itu textbox password box checkboxradio button dan sebagainya

22

Tag ltselectgtltselectgt dan ltoptiongtbull Tag select tidak bisa berdiri sendiri dan harus menggandeng tag option untuk dapat menampilkan output Dan

cara kerjanya hampir sama dengan tag radio hanya saja tag select lebih singkat

lthtmlgt

ltheadgt

lttitlegtPropeti tag Select dan Optionlttitlegt

ltheadgt

ltbodygt

ltpgtltbgtPenggunaan select dan dan optionltbgtltpgt

ltpgtDaftar kategori silahkan pilih kategoriltpgt

ltform action=cobaphp method=postgt

Kategori ltselect name=Pilihangt

ltoption value=Kategori 1gtKategori 1

ltoption value=Kategori 2gtKategori 2

ltoption value=Kategori 3gtKategori 3

ltselectgt

ltpgtltinput type=submit value=KIRIMgtltpgt

ltformgt

ltbodygt

lthtmlgt

23

Tag ltimggt

bull Untuk menampilkan gambar pada halaman dapat digunakan tag ltimggt Format file yang dapat didukung oleh tag img bermacam-macam mulai BMP JPG GIF TGA dan lain-lainTag img memiliki beberapa atribut yaitu ndash ‐ src letak file gambar yang akan ditampilkanndash ‐ border tebal bingkai gambarndash ‐ height menentukan tinggi imagegambarndash ‐ width menentukan lebar imagegambar

24

bull lthtmlgtbull ltheadgtbull lttitlegtAtribut dari Tag imglttitlegtbull ltheadgtbull ltbodygtbull ltpgtltbgtTag img hanya dengan atribut ltigtsrcltigtltbgtltpgtbull ltpgtltimg src=fileD|Hydrangeasjpg border=10gtltpgtbull ltpgtltimg src=fileC|UsersPublicPicturesSample

Picturestulipsjpg width=400 height=300gtltpgtbull ltbodygtbull lthtmlgt

TUGAS

Jelaskan arti dan fungsi dari Protokol1 FTP (File Transfer Protocol)2 Telnet3 Gopher4 POP3-mail 5 IRC (internet Relay Chat6 HTTP (Hypertext Transfer Protocol)

• HTML Basic
• Pendahuluan
• Ada beberapa jenis protocol harus dikenal di internet yaitu
• BROWSER
• HTML (HyperText Markup Language)
• Beberapa Istilah dalam Internet
• Slide 7
• BAB II
• PENDAHULUAN
• Slide 10
• Tag dasar HTML
• Slide 12
• Latihan 2
• Slide 14
• Slide 15
• Slide 16
• Slide 17
• Prinsip-prinsip Desain Web
• Fungsi tag ltfontgt adalah untuk memanipulasi baik jenis ukuran
• F Tag ltselectgtltselectgt dan ltoption
• Slide 21
• Slide 22
• Tag ltimggt
• Slide 24
• TUGAS

22

Tag ltselectgtltselectgt dan ltoptiongtbull Tag select tidak bisa berdiri sendiri dan harus menggandeng tag option untuk dapat menampilkan output Dan

cara kerjanya hampir sama dengan tag radio hanya saja tag select lebih singkat

lthtmlgt

ltheadgt

lttitlegtPropeti tag Select dan Optionlttitlegt

ltheadgt

ltbodygt

ltpgtltbgtPenggunaan select dan dan optionltbgtltpgt

ltpgtDaftar kategori silahkan pilih kategoriltpgt

ltform action=cobaphp method=postgt

Kategori ltselect name=Pilihangt

ltoption value=Kategori 1gtKategori 1

ltoption value=Kategori 2gtKategori 2

ltoption value=Kategori 3gtKategori 3

ltselectgt

ltpgtltinput type=submit value=KIRIMgtltpgt

ltformgt

ltbodygt

lthtmlgt

23

Tag ltimggt

bull Untuk menampilkan gambar pada halaman dapat digunakan tag ltimggt Format file yang dapat didukung oleh tag img bermacam-macam mulai BMP JPG GIF TGA dan lain-lainTag img memiliki beberapa atribut yaitu ndash ‐ src letak file gambar yang akan ditampilkanndash ‐ border tebal bingkai gambarndash ‐ height menentukan tinggi imagegambarndash ‐ width menentukan lebar imagegambar

24

bull lthtmlgtbull ltheadgtbull lttitlegtAtribut dari Tag imglttitlegtbull ltheadgtbull ltbodygtbull ltpgtltbgtTag img hanya dengan atribut ltigtsrcltigtltbgtltpgtbull ltpgtltimg src=fileD|Hydrangeasjpg border=10gtltpgtbull ltpgtltimg src=fileC|UsersPublicPicturesSample

Picturestulipsjpg width=400 height=300gtltpgtbull ltbodygtbull lthtmlgt

TUGAS

Jelaskan arti dan fungsi dari Protokol1 FTP (File Transfer Protocol)2 Telnet3 Gopher4 POP3-mail 5 IRC (internet Relay Chat6 HTTP (Hypertext Transfer Protocol)

• HTML Basic
• Pendahuluan
• Ada beberapa jenis protocol harus dikenal di internet yaitu
• BROWSER
• HTML (HyperText Markup Language)
• Beberapa Istilah dalam Internet
• Slide 7
• BAB II
• PENDAHULUAN
• Slide 10
• Tag dasar HTML
• Slide 12
• Latihan 2
• Slide 14
• Slide 15
• Slide 16
• Slide 17
• Prinsip-prinsip Desain Web
• Fungsi tag ltfontgt adalah untuk memanipulasi baik jenis ukuran
• F Tag ltselectgtltselectgt dan ltoption
• Slide 21
• Slide 22
• Tag ltimggt
• Slide 24
• TUGAS

23

Tag ltimggt

bull Untuk menampilkan gambar pada halaman dapat digunakan tag ltimggt Format file yang dapat didukung oleh tag img bermacam-macam mulai BMP JPG GIF TGA dan lain-lainTag img memiliki beberapa atribut yaitu ndash ‐ src letak file gambar yang akan ditampilkanndash ‐ border tebal bingkai gambarndash ‐ height menentukan tinggi imagegambarndash ‐ width menentukan lebar imagegambar

24

bull lthtmlgtbull ltheadgtbull lttitlegtAtribut dari Tag imglttitlegtbull ltheadgtbull ltbodygtbull ltpgtltbgtTag img hanya dengan atribut ltigtsrcltigtltbgtltpgtbull ltpgtltimg src=fileD|Hydrangeasjpg border=10gtltpgtbull ltpgtltimg src=fileC|UsersPublicPicturesSample

Picturestulipsjpg width=400 height=300gtltpgtbull ltbodygtbull lthtmlgt

TUGAS

Jelaskan arti dan fungsi dari Protokol1 FTP (File Transfer Protocol)2 Telnet3 Gopher4 POP3-mail 5 IRC (internet Relay Chat6 HTTP (Hypertext Transfer Protocol)

• HTML Basic
• Pendahuluan
• Ada beberapa jenis protocol harus dikenal di internet yaitu
• BROWSER
• HTML (HyperText Markup Language)
• Beberapa Istilah dalam Internet
• Slide 7
• BAB II
• PENDAHULUAN
• Slide 10
• Tag dasar HTML
• Slide 12
• Latihan 2
• Slide 14
• Slide 15
• Slide 16
• Slide 17
• Prinsip-prinsip Desain Web
• Fungsi tag ltfontgt adalah untuk memanipulasi baik jenis ukuran
• F Tag ltselectgtltselectgt dan ltoption
• Slide 21
• Slide 22
• Tag ltimggt
• Slide 24
• TUGAS

24

bull lthtmlgtbull ltheadgtbull lttitlegtAtribut dari Tag imglttitlegtbull ltheadgtbull ltbodygtbull ltpgtltbgtTag img hanya dengan atribut ltigtsrcltigtltbgtltpgtbull ltpgtltimg src=fileD|Hydrangeasjpg border=10gtltpgtbull ltpgtltimg src=fileC|UsersPublicPicturesSample

Picturestulipsjpg width=400 height=300gtltpgtbull ltbodygtbull lthtmlgt

TUGAS

Jelaskan arti dan fungsi dari Protokol1 FTP (File Transfer Protocol)2 Telnet3 Gopher4 POP3-mail 5 IRC (internet Relay Chat6 HTTP (Hypertext Transfer Protocol)

• HTML Basic
• Pendahuluan
• Ada beberapa jenis protocol harus dikenal di internet yaitu
• BROWSER
• HTML (HyperText Markup Language)
• Beberapa Istilah dalam Internet
• Slide 7
• BAB II
• PENDAHULUAN
• Slide 10
• Tag dasar HTML
• Slide 12
• Latihan 2
• Slide 14
• Slide 15
• Slide 16
• Slide 17
• Prinsip-prinsip Desain Web
• Fungsi tag ltfontgt adalah untuk memanipulasi baik jenis ukuran
• F Tag ltselectgtltselectgt dan ltoption
• Slide 21
• Slide 22
• Tag ltimggt
• Slide 24
• TUGAS

TUGAS

Jelaskan arti dan fungsi dari Protokol1 FTP (File Transfer Protocol)2 Telnet3 Gopher4 POP3-mail 5 IRC (internet Relay Chat6 HTTP (Hypertext Transfer Protocol)

• HTML Basic
• Pendahuluan
• Ada beberapa jenis protocol harus dikenal di internet yaitu
• BROWSER
• HTML (HyperText Markup Language)
• Beberapa Istilah dalam Internet
• Slide 7
• BAB II
• PENDAHULUAN
• Slide 10
• Tag dasar HTML
• Slide 12
• Latihan 2
• Slide 14
• Slide 15
• Slide 16
• Slide 17
• Prinsip-prinsip Desain Web
• Fungsi tag ltfontgt adalah untuk memanipulasi baik jenis ukuran
• F Tag ltselectgtltselectgt dan ltoption
• Slide 21
• Slide 22
• Tag ltimggt
• Slide 24
• TUGAS