Sabtu, 11 Januari 2020

LAPORAN PRAKTIKUM MATERI II HTML (HYPERTEXT MARKUP LANGUAGE)

Jiwa Pejuang Januari 11, 2020 1 Comment

A.Tujuan
1. Memahami tentang konsep WWW
2. Memahami tentang struktur HTML
3. Memahami tentang dasar-dasar HTML
4. Memahami tentang pengaturan text,daftar item, gambar, table, form, meta.
B. Dasar Teori
A. World Wide Web
Internet Merupakan jaringan global yang menghubungkan suatu network dengan network lainnya diseluruh dunia.TCP/IP menjadi protocol penghubung antara jaringan-jaringan yang beragam diseluruh dunia untuk dapat berkomunikasi.
World Wide Web (WWW) merupakan bagian dari internet yang paling cepat berkembang dan popular. WWW berkerja mendasarkan pada tiga mekanisme :
1.      Protocol standar aturan yang digunakan untuk berkumonikasi pada computer networking, Hypertext Tranfer Protocol(HTTP) adalah protocol untuk WWW.
2.      Address WWW memiliki aturan penamaan alamat web yaitu URL(Uniform Resource Locator) yang digunakan sebagai standard internet.
3.      HTML digunakan untuk membuat dokumen yang bisa di akses melalui web.
B. HTML
            Hypertext Markup Language merupakan standard Bahasa yang digunakan untuk menampilkan document web, yang bisa anda lakukan dengan HTML yaitu :
1.      Mengontrol tampilan dari web page dan contentnya.
2.      Mempublikasikan document secara online sehingga bisa diakses dari seluruh dunia.
3.      Membuat online form yang bisa digunakan untuk menangani pendaftaran, transaksi secara online.
4.      Menampilkan object-object seperti image, audi, video dan juga java applet dalam document HTML.
C. Browser dan Editor
Browser merupakan software yang di instill di mesin client yang berfungsi untuk menterjemahkan tag-tag HTML menjadi halaman web. Browser yang sering digunakan biasanya Internet Explorer, Netscape Navigator dan masih banyak yang lainnya. Sedangkan Editor program yang digunakan untuk membuat document HTML, ada banyak HTML editor yang bisa anda gunakan diantaranya : Ms FrontPage, Dreamweaver, Notepad.
D. BASIC TAG HTML
1. Stuctur HTML Document
Document HTML bisa dibagi menjadi tiga bagian utama :
HTML, Setiap document HTML harus diawali dan ditutup dengan tag HTML.
            <HTML></HTML>
HEAD, bagian header dari document HTML di apit oleh tag <HEAD></HEAD> didalam bagian ini biasanya dimuat tag TITLE yang menampilkan judul dari halaman pada titlenya browser.Header juga membuat text META yang biasanya digunakan untuk menentukan informasi tertentu mengenai document HTML, anda bisa menentukan athour name, keywords dan lainnya pada text META
BODY, document body digunakan untuk menampilkan text, image link dan semua ditampilkan pada web page.
2. Basic HTML Element
Block  Level Element yang sering digunakan Heading (h1 sampai h6).
Elemen heading berfungsi menentukan bahwa bagian tertentu konten kamu berupa heading atau subheading dari konten kamu. Sama seperti buku yang punya judul utama, judul bab, dan subjudul, dokumen HTML juga begitu. HTML berisi 6 heading level, <h1>–<h6> meskipun kamu hanya menggunakan paling banyak 3–4:
Paragraf
Seperti dijelaskan sebelumnya, elemen <p> berguna untuk wadah paragraf teks; kamu akan sering menggunakan ini ketika menandai konten teks reguler:
<p>This is a single paragraph</p>

List
Kebanyakan konten web adalah lists, dan HTML punya special elemen untuk ini. Penandaan list selalu mengandung paling sedikit 2 elemen. Tipe list paling umum adalah terurut and tak-terurut:
1.    List tak-terurut ialah list yang urutan itemnya tidak penting, seperti daftar belanja. Ini dibungkus dalam elemen <ul>.
2.    List terurut ialah list yang urutan itemnya penting, seperti resep. Ini dibungkus dalam elemen <ol>.
Tiap item dalam list ditaruh di dalam elemen <li> (item list).
<ul>
  <li>technologists</li>
  <li>thinkers</li>
  <li>builders</li>
</ul>
Font
Elemen HTML Font <font> mendefinisikan ukuran font, warna dan presentasi atas isinya. Seperti semua elemen HTML lainnya, unsur ini mendukung atribut global.
  • Color/warna
    • Atribut ini mengatur warna teks.
  • Face/jenis Font
    • Atribut ini mengatur jenis font yang diterapkan dalam teks.
  • Size/ukuran
    • Atribut ini mengatur ukuran font.
Color
Color merupakan attribute yang bisa anda tambahkan pada beberapa element body, font, link dan lainnya. Color dibagi dalam 3 kategori warna primer yaitu red, green , dan blue. Masing-masing color didefinisikan dalam 2 digit bilangan hexa decimal.
Format text

Preformat text
                                Tag PRE digunakan untuk menampilakan text sesuai dengan format aslinya.
Hyperlink
Link addres
Absolute Addres – merupakan full internet Addres (URL) yang meliputi protocol, network location dan path dan nama file.
Contoh : http://www.yahoo.com/index.html
Relatif  Addres – URL yang tidak menyebutkan protocol dan network locationnya(hanya path dan nama filenya).
Anchor
Anchor tag<a> untuk menentukan hyperlink dalam documents HTML. HREF property digunakan untuk menentukan tujuan hyperlink tersebut
<a href = "halx.htm">Halaman X</a>
E. Table
Membuat table
Tag <TABLE> digunakan untuk membuat table dalam document HTML, bagian pokok dari table adalah cell yang didefinisikan dengan menggunakan tag <TD>.
Berikutnya  kalo ingin membuat beberapa baris cell dalam table gunakan tag<TR>.
<tr >
<td >cell 1a</td>
<td>cell 1b</td>
</tr>
Menanmbahkan Heading cell
Untuk menambahkan heading pada table tambahkan tag<TH>pada table yang sudah dibuat.
Permormatan Table
Untuk memformat peralatan text didalam table anda bisa gunakan attribute Align yaitu center, justy, left, right dan Valign(vertical Alignmenta) yaitu baseline, top, buttom, dan middle.
<align =”center” valign=”besseline”>
Marge cell
Tag <td>memiliki atribut colspan untuk marge column dan rowspan untuk marge baris.
F. Image
<IMG SRC= "Photo1.jpg"ALIGN="MIDDLE">            
Seperti dikatakan sebelumnya, dia mengembed image ke dalam halaman sesuai posisinya via artibut src, yang berisi path ke file image kita.
Kita juga telah memasukkan artibut alt (alternative). Dalam atribut ini, kamu menentukan teks deskriptif bagi user yang tidak bisa melihat image, yang mungkin karena:
1.    User tunanetra. Mereka sering menggunakan tools pembaca screen untuk membaca semua semua alt text.
2.    Sesuatu terjadi yang mengakibatkan image tidak tampil. Contohnya, coba sengaja ganti path di dalam atribut src menjadi salah. Kalau kamu simpan dan reload halaman, kamu akan melihat sesuatu seperti ini:
https://mdn.mozillademos.org/files/9349/alt-text-example.png
Kata kunci ini mengandung semua "teks deskriptif". Teks alternatif yang kamu tulis sebaiknya menyediakan cukup informasi kepada pembaca tentang image tersebut. 



G. Form
Kegunaan Form
1.      Memperoleh data-data user baik nama, alamat dan data lainnya.
2.      Memperoleh informasi pembelian secara online.
3.      Memperoleh feedback dari user mengenai website.
Berikut perintah dasar form:
<form>
Input Elemen
</form>
Ada dua atribut yang digunakan di elemen yaitu method dan action. Method yang berfungsi sebagai pengiriman data pada server dengan cara ke tujuan yaitu :
- Get: mengirim data pada server dengan cara meletakan data pada bagian akhir URL yang ditunjuk.
- Post : mengirim datanya secara terpisah.
Perbedaannya, jika kita mengisi atribut method dengan get (dimana ini adalah nilai default seandainya kita tidak menuliskannya) maka isian form akan terlihat pada url browser. Method get ini biasanya digunakan untuk query pencarian. Method post biasanya digunakan untuk data yang lebih sensitif seperti yang berisi password, atau registrasi user. Data hasil form tidak akan terlihat pada browser.Action yang berfungsi menentukan lokasi dari script yang akan memproses data dari form. Struktur dasar form akan terlihat sebagai berikut:
<form action="logindata.php" method="post">
...isi form...
</form>
Elemen-elemen Input pada Form
Elemen yang paling penting dalam form adalah elemen input. Elemen ini memungkinkan pengunjung memasukan data melalui halaman form yang datanya kemudian akan dikirimkan keserver. Ada banyak elemen-elemen input pada form, yang dapat digunakan oleh pengguna untuk mengisikan data dengan yang berbeda-beda jenisnya. Berikut ini saya akan membahas tiap-tiap elemen input  form, beserta dengan cara pembuatannya.
1.      Text Field
Elemen yang digunakan untuk memasukan text dalam satu baris. Lebar karakter defaultnya adalah 20 karakter. Penulisan :< input type=”text” />
2.      Password Field
Untuk memasukan datu baris teks dengan format chiphertext/password. Dengan karakter yang disamarkan dengan bulatan atau tanda “*”. Penulisan :< input type=”password” />
3.      Radio Button
Radio button digunakan agar dapat memilih salah satu pilihan. Contoh jenis kelamin (male or female). Penulisannya :  Radio Button<input type="radio">
4.      Text Area
Digunakan sebagai input kontrol form untuk memasukan teks lebih dari satu baris. Elemen ini mempunyai atribut yaitu name, cols, dan rows.
Nama                    = nama dari veriabel yang dikirim ke suatu aplikasi
Rows                     = panjang baris dalam karakter
Cols                       = tinggi kotak
Penulisannya : <text area Name=”name” Cols=”number” Row=”number”....></text area>
Alamat : <textarea name="Alamat" cols="25" rows="4"></textarea>
5.      Check Box
Check Box digunakan untuk dapat memilih lebih dari satu pilihan.
Penulisannya: Check Box<input type="checkbox">
6.      Select List
Digunakan untuk menampilkan daftar pilihan dalam bentuk drop-down list.
Penulisannya :
<select>
</select>
7.      Submit Button
Digunakan untuk mengirimkan data dari halaman web ke server. Setiap elemen form membutuhkan tombol submit untuk mengirimkan nama dan nilinya ke suatu aplikasi yang di tentukan dalam  atribut ACTION dlam elemen FORM.
Penulisannya : Submit<input type="submit">
8.      Reset Button
Digunakan untuk membatalkan semua proses ata mereset proses pengisian data yang dilakukan di elemen input form. Penulisannya : Reset<input type="reset">


klik disini Untuk baca lanjutan percobaan praktikum HTML
Tags:
Previous Post
Next Post
Jiwa Pejuang

1 komentar:

  1. Unknown4 Maret 2020 pukul 06.15

    In this fashion my associate Wesley Virgin's autobiography starts in this SHOCKING AND CONTROVERSIAL video.

    Wesley was in the military-and shortly after leaving-he discovered hidden, "MIND CONTROL" secrets that the CIA and others used to get whatever they want.

    As it turns out, these are the same secrets many famous people (notably those who "come out of nothing") and the greatest business people used to become rich and famous.

    You've heard that you use less than 10% of your brain.

    That's because most of your brain's power is UNTAPPED.

    Perhaps that conversation has even occurred INSIDE OF YOUR very own head... as it did in my good friend Wesley Virgin's head 7 years back, while riding an unlicensed, beat-up bucket of a car with a suspended driver's license and with $3 on his banking card.

    "I'm very frustrated with living check to check! Why can't I become successful?"

    You took part in those conversations, isn't it right?

    Your success story is waiting to be written. You just have to take a leap of faith in YOURSELF.

    WATCH WESLEY SPEAK NOW

    BalasHapus