HTML Basic.

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 :
FTP (File Transfer Protocol). Telnet Gopher POP3-mail IRC (internet Relay Chat HTTP (Hypertext Transfer Protocol) TUGAS : Jelaskan arti dan fungsi dari Protokol diatas.

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.

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.

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

BAB II TAG HTML

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 < dan > . Sebuah kode program HTML selalu diawali dan diakhiri dengan sebuah tag. Contoh tag : <HTML> -----Kode program. </HTML>

Contoh dari tag dokumen web sederhana : (Aktifkan NotePad)
HTML dibagi menjadi 2 bagian yaitu body (badan) dan head (kepala). Bagian head ditandai dengan tag <HEAD> sedangkan bagian body ditandai dengan tag <BODY>. 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) <HTML> <HEAD><H1>Pelatihan WEB dasar</H1> </HEAD> <BODY> Selamat datang ke pelatihan web dasar. </BODY> </HTML>

Tag dasar HTML

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

Latihan 2 Rancanglah sebuah web dgn tampilan seperti gambar ini

<HTML> <HEAD><H2>SELAMAT DATANG DI SMK NEGERI 3 PEMATANGSIANTAR</H2> </HEAD> <BODY> <H1> </H1> <H1>JALAN MEDAN KM 10,5 PEMATANGSIANTAR</H1> <H2>KOMPETENSI KEAHLIAN.</H2> <H3>1. PERHOTELAN.</H3> <H4>2. REKAYASA PERANGKAT LUNAK</H4> <H5>3. TATA BUSANA DAN KECANTIKAN</H5> </BODY> </HTML>

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

Maka tag yang harus ditulis adalah sbb:
11. <HR> 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: <table border="1"> <tr>  <td>Sel 1, baris 1</td> <td>Sel 2, baris 1</td> <td>Sel 3, baris 1</td> <td>Sel 4, baris 1</td> </tr>

<table border="1">
<tr>  <td>Sel 1, baris 1</td> <td>Sel 2, baris 1</td> <td>Sel 3, baris 1</td> <td>Sel 4, baris 1</td> </tr>  <tr>  <td>Sel 1, baris 2</td> <td>Sel 2, baris 2</td> <td>Sel 3, baris 2</td> <td>Sel 4, baris 2</td> </tr>  </table>

Prinsip-prinsip Desain Web
Fokus pada kebutuhan. Efisien dalam menggunakan sumber daya Mendukung navigasi Buatlah halaman Web senyaman dan seramahmungkin Mendukung interaksi, bila diperlukan

Fungsi tag <font> adalah untuk memanipulasi baik jenis, ukuran, dan warna huruf
<html> <head> <title>Atribut dari Tag Font</title> </head> <body> <p><font face="Arial">Ini Font Arial</font></p> <p><font face="Arial"><i>Ini Font Arial dan miring</i></font></p> <p><font face="verdana" size="4" color="blue"><b>Ini Font Verdana berukuran 12 pt berwarna biru sekaligus tebal</b></font> <p align="center"><font face="Tahoma" color="red"><b>Ini Font Tahoma berwarna merah, tebal dan berada di tengah</b></font><p> <p align="center"><font face="Arial" color="red">Ini Font Arial berwarna Merah, </font><font face="Verdana" color="blue">Sedangkan ini adalah font Verdana berwarna biru</font></p> </body> </html>

F. Tag <select>...</select> dan <option
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.

Tag FORM Tag <form> 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 <input> dan <textarea>. Tag <input> Tag <input> 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.

<title>Propeti tag Select dan Option</title> </head>
Tag <select>...</select> dan <option> 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. <html> <head> <title>Propeti tag Select dan Option</title> </head> <body> <p><b>Penggunaan select dan dan option</b></p> <p>Daftar kategori silahkan pilih kategori</p> <form action="coba.php" method="post"> Kategori: <select name="Pilihan"> <option value="Kategori 1">Kategori 1 <option value="Kategori 2">Kategori 2 <option value="Kategori 3">Kategori 3 </select> <p><input type="submit" value="KIRIM"></p> </form> </body> </html>

Tag <img> Untuk menampilkan gambar pada halaman dapat digunakan tag <img>. 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

<html> <head> <title>Atribut dari Tag img</title> </head> <body> <p><b>Tag img hanya dengan atribut <i>src</i></b></p> <p><img src="file:///D|/Hydrangeas.jpg" border="10"></p> <p><img src="file:///C|/Users/Public/Pictures/Sample Pictures/tulips.jpg" width="400" height="300"></p> </body> </html>

TUGAS Jelaskan arti dan fungsi dari Protokol
FTP (File Transfer Protocol). Telnet Gopher POP3-mail IRC (internet Relay Chat HTTP (Hypertext Transfer Protocol)

HTML Basic.

Presentasi serupa

Presentasi berjudul: "HTML Basic."— Transcript presentasi:

Presentasi serupa

Tentang proyek

Tanggapan

Masuk

Otorisasi melalui jaringan sosial:

HTML Basic.

Presentasi serupa

Presentasi berjudul: "HTML Basic."— Transcript presentasi:

Presentasi serupa

Tentang proyek

Tanggapan