Presentasi sedang didownload. Silahkan tunggu

Presentasi sedang didownload. Silahkan tunggu

HTML Basic. Pendahuluan  Dalam berkomunikasi di Internet dibutuhkan alamat.  Untuk alamat internet ini biasanya dikenal dengan Uniform Resource Locator.

Presentasi serupa


Presentasi berjudul: "HTML Basic. Pendahuluan  Dalam berkomunikasi di Internet dibutuhkan alamat.  Untuk alamat internet ini biasanya dikenal dengan Uniform Resource Locator."— Transcript presentasi:

1 HTML Basic

2 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.

3 Ada beberapa jenis protocol harus dikenal di internet yaitu : FTP (File Transfer Protocol). Telnet Gopher POP3-mail IRC (internet Relay Chat HTTP (Hypertext Transfer Protocol) TUGAS : Jelaskan arti dan fungsi dari Protokol diatas.

4 BROWSER 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. Browser yang paling banyak digunakan sekarang adalah Microsoft Internet Explorer (IE), FireFox, Opera, Crome dll.

5 HTML (HyperText Markup Language) 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 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.

6 Beberapa Istilah dalam Internet 1. Upload/ Download File 2. HTML Editor Ada beberapa HTML Editor yang dapat Anda gunakan yaitu: MicrosoftFrontPage, notepad, Adobe Pagemill,Macromedia Dreamweaver, Macromedia Dreamweaver Ultradev, dll. Kebanyakan dari HTML Editor ini sifatnya adalah WYSIWYG (What You See Is What You Get) 3. Komponen dari suatu browser: 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

7

8 BAB II TAG HTML 8

9 PENDAHULUAN Sebuah dokumen HTML berisi elemen-elemen kode HTML yang disebut HTML Tag. Penulisannya diapit oleh apa yang disebut delimiter (pembatas). Atau suatu karakter atau kumpulan karakter yang mengawali dan mengakhiri suatu tag. Untuk HTML delimiter yang dipakai adalah dengan karakter. Sebuah kode program HTML selalu diawali dan diakhiri dengan sebuah tag. Contoh tag : -----Kode program. 9

10 HTML dibagi menjadi 2 bagian yaitu body (badan) dan head (kepala). Bagian head ditandai dengan tag sedangkan bagian body ditandai dengan tag. Bagian head digunakan untuk menyimpan informasi mengenai dokumen tersebut, misalnya judul, nama penulis, komentar**V Sedangkan bagian body digunakan untuk menuliskan isi utama dari dokumen web tersebut. Contoh dari tag dokumen web sederhana : (Aktifkan NotePad) Pelatihan WEB dasar Selamat datang ke pelatihan web dasar. 10

11 Tag dasar HTML 11

12 5. … Membuat tulisan tebal (Bold Text ) 6. … Merupakan perintah paragraph yang termasuk diantaranya pengaturan posisi tulisan, indentansi dan jarak. Antara lain seperti berikut – … untuk pengaturan paragraph rapat kiri (left) – … untuk pengaturan paragraph di tengah (center) – … untuk pengaturan paragraph rapat kanan (right) 7. –Untuk memberikan baris baru / pergantian baris. Diletakkan pada bagian teks yang mau berganti baris. 8. …. –Membuat link antar dua halaman web 9. … –Jika Anda ingin meletakkan gambar / file photo di web Anda, maka dapat dilakukan dengan memberikan tag ini 12

13 Latihan 2 Rancanglah sebuah web dgn tampilan seperti gambar ini 13

14 SELAMAT DATANG DI SMK NEGERI 3 PEMATANGSIANTAR JALAN MEDAN KM 10,5 PEMATANGSIANTAR KOMPETENSI KEAHLIAN. 1. PERHOTELAN. 2. REKAYASA PERANGKAT LUNAK 3. TATA BUSANA DAN KECANTIKAN 14

15 10. Pengaturan bentuk, ukuran, dan warna tulisan. –Pengaturannya dilakukan dengan tag-tag seperti contoh berikut 15

16 11. –Pemberian tag ini bertujuan untuk membuat garis horizontal pada dokumen web. Dapat diberikan attribute seperti pada atribut gambar/ image. 12. Tag Tabel. –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. –Untuk membuat tabel seperti tampak di bawah ini : –Sel 1, baris 1 Sel 2, baris 1 Sel 3, baris 1 Sel 4, baris 1 –Sel 1, baris 2 Sel 2, baris 2 Sel 3, baris 2 Sel 4, baris 2 Maka tag yang harus ditulis adalah sbb: – – Sel 1, baris 1 – Sel 2, baris 1 – Sel 3, baris 1 – Sel 4, baris 1 – 16

17 Sel 1, baris 1 Sel 2, baris 1 Sel 3, baris 1 Sel 4, baris 1 Sel 1, baris 2 Sel 2, baris 2 Sel 3, baris 2 Sel 4, baris 2 17

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 18

19 Atribut dari Tag Font Ini Font Arial Ini Font Arial dan miring Ini Font Verdana berukuran 12 pt berwarna biru sekaligus tebal Ini Font Tahoma berwarna merah, tebal dan berada di tengah Ini Font Arial berwarna Merah, Sedangkan ini adalah font Verdana berwarna biru Fungsi tag adalah untuk memanipulasi baik jenis, ukuran, dan warna huruf 19

20 F. Tag... dan

21 Tag FORM Tag 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 dan. Tag Tag memiliki atribut type yang fungsinya sangat vital dalam output tampilan. Isi dari atribut type dapat menentukan jenis tampilan apakah itu textbox, password box, checkbox,radio button dan sebagainya. 21

22 Tag... dan 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. Propeti tag Select dan Option Penggunaan select dan dan option Daftar kategori silahkan pilih kategori Kategori: Kategori 1 Kategori 2 Kategori 3 22

23 Tag Untuk menampilkan gambar pada halaman dapat digunakan tag. Format file yang dapat didukung oleh tag img bermacam-macam mulai BMP, JPG, GIF, TGA dan lain-lain.Tag img memiliki beberapa atribut yaitu : – ‐ src : letak file gambar yang akan ditampilkan – ‐ border: tebal bingkai gambar – ‐ height: menentukan tinggi image/gambar – ‐ width: menentukan lebar image/gambar 23

24 Atribut dari Tag img Tag img hanya dengan atribut src 24

25 TUGAS Jelaskan arti dan fungsi dari Protokol 1.FTP (File Transfer Protocol). 2.Telnet 3.Gopher 4.POP3-mail 5.IRC (internet Relay Chat 6.HTTP (Hypertext Transfer Protocol)


Download ppt "HTML Basic. Pendahuluan  Dalam berkomunikasi di Internet dibutuhkan alamat.  Untuk alamat internet ini biasanya dikenal dengan Uniform Resource Locator."

Presentasi serupa


Iklan oleh Google