Pemogramman berorientasi objek

Nama : Idat Sudrajat

Nim : 511200056

Kelas : A(2)

1.Dasar-dasar HTML I

A. Pengertian HTML

HTML atau yang merupakan singkatan dari Hypertext Mark Up Language adalah bahasa standar pemrograman untuk membuat suatu website yang bisa diakses dengan internet. Dengan kata lain halaman website yang kita lihat dan kita baca disusun dengan menggunakan bahasa ini dan kemudian diterjemahkan oleh komputer agar dapat dipahami oleh penggunanya. Html merupakan standar pembuatan website secara luas agar laman website dapat ditampilkan pada layar komputer.

Html disusun dengan kode dan simbol tertentu yang dimasukkan ke dalam sebuah file atau dokumen. Jadi setiap Anda membuka website apapun dengan menggunakan browser maka web tersebut dibuat dengan menggunakan html.

B. Fungsi HTML

Html yang dikenal sebagai bahasa pemrograman dalam ilmu komputer memiliki beberapa fungsi, diantaranya adalah sebagai berikut:

Fungsi utama html yang diketahui adalah untuk membuat suatu halaman website yang bisa dibaca dan dipahami oleh pengguna dengan lebih mudah. Seluruh laman website yang ada dalam internet dibuat dengan html dan tidak ada pengecualian.

Menandai teks pada suatu laman, html ditulis pada suatu halaman dokumen dengan tag atau simbol tertentu dimana simbol dan tag tersebut akan menandai teks menjadi tebal, miring, bergaris tebal dan lain sebagainya. Misal jika kita membuat suatu teks menjadi teks miring atau italic, dalam laman html dituliskan kode <i>, <b> untuk teks tebal dan <u> untuk teks bergaris bawah.

Sebagai dasar website, website yang dibuat tentunya memiliki beberapa fitur yang dibuat dengan menggunakan java script (untuk mengatur perilaku web), implemetasi bahasa pemrograman server PHP, dan mendesain web menggunakan CSS. Semua bahasa tersebut dapat diaplikasikan jika web memiliki bahasa html sebagai dasarnya.

Menampilkan tabel, gambar, video, dan lainnya. Biasanya dalam website atau blog kita tidak bisa langsung meletakkan tabel, gambar maupun video oleh sebab itu komponen tersebut diletakkan pada web dengan menggunakan bahasa html.

Menandai elemen dan membuat online form, html juga berfungsi untuk menandai bagian-bagian dalam website diantaranya header, main, footer, navigation dan lain sebagainya. Selain itu html juga biasanya digunakan sebagai bahasa dalam membuat suatu online form atau formulir digital.

C. Cara Mengatur Size, Color dan Style Huruf (Font) di HTML

Sama hal nya dengan kita bekerja pada microsoft word atau open office dan software pengetikan tulisan lainya kita bisa mengatur tulisan sesuai dengan yang kita butuhkan atau inginkan. Kita bisa mengatur ukuran, jenis, gaya tulisan dan lainnya.

Sama dengan HTML juga bisa seperti itu, hanya saja kita harus memasukkan tag yg di butuhkan, sedangkan software yg saya sebutkan tadi sudah tersedia pilihan dan button nya yang memudahkan kita.

Untuk mengatur huruf pada HTML anda dapat menggunakan tag <FONT> dan tag penutup </FONT>. Tag ini mempunyai beberapa atribut untuk mengatur formatting style dari suatu teks.

1. Ukuran Font

Size=n adalah atribut yang digunakan untuk mengatur besarnya ukuran font. Nilai n berkisar antara 0 (ukuran terkecil) sampai dengan yang terbesar 7. Untuk lebih jelasnya tuliskan kode berikut kemudian simpan dengan nama ukuran_font.html.

<!DOCTYPE html>

<html>

<head>

<title>Ukuran Font</title>

</head>

<body>

<font size="1">ini adalah ukuran Font 1</font><br>

<font size="2">ini adalah ukuran Font 2</font><br>

<font size="3">ini adalah ukuran Font 3</font><br>

<font size="4">ini adalah ukuran Font 4</font><br>

<font size="5">ini adalah ukuran Font 5</font><br>

<font size="6">ini adalah ukuran Font 6</font><br>

<font size="7">ini adalah ukuran Font 7</font><br>

</body>

</html>

Kali ini kita akan ngerefresh sejenak ingatan kita mengenai HTML. Yah, artikel ini mungkin cocok buat yang baru mendalami pemrograman web.

HTML atau Hyper Text Markup Language. Adalah bahasa yang digunakan untuk mendisain dan

memformat halaman web. Kita mungkin sudah mendengar tentang bahasa program seperti C,

C++, Java, dan Visual basic. Masing-Masing bahasa ini terdiri dari perintah sintak

dan programming . Sintak ini adalah yang programmer gunakan untuk memanggil kode.

Sangatlah penting mengetahui bagaimana cara menulis kode menggunakan bahassa yang

relevan.

Lebih dari itu, kita harus konvensional dengan aturan menyangkut bahasa tertentu.

Didalam HTML, sintak ini disebut tag.Tag ditulis dengan tanda-kurung bersudut< dan

>.Ada kelompok tag yang sudah dikenal didalam HTML, yang mana digunakan untuk berbagai tujuan.

Sebagai contoh, dalam rangka memodifikasi satu baris teks ke dalam Bold, kita menerapkan

tag bold dengan suatu tag <b>, kemudian tulis beberapa teks atau suatu paragrap yang

berisi beberapa teks,dan tutup tag menggunakan tag </b> seperti dalam contoh listing 1.

Semua tag didalam HTML harus ditutup menggunakan sintak </>.Tetapi ada beberapa perkecualian pada aturan ini, yang mana kita akan mendiskusikanya nanti.Kita memakai tag ini

sebab HTML bukanlah bahasa yang sensitip seperti C++ dan Java.

Struktur

Setiap kode HTML perlu ditulis dalam suatu struktur yang mana dapat dihubungkan dengan

Word Wide Web.Tidaklah wajib untuk mengikuti struktur ini. Bagaimanapun juga,lebih

baik

mempraktekan langsung struktur ini sbg perancangan halaman web kita.

Listing 1 menunjukkan struktur suatu halaman HTML sederhana:

Listing 1

<!– Ini komentar didalam HTML.Ini tidak akan diperliatkan pada browser–>

<HTML>

<HEAD>

<TITLE>

Welcome to HTML

</TITLE>

</HEAD>

<BODY>

<!–halaman CONTENT dimulai –>

<B>Yang ditampilkan di browser, cuma tulisan ini.

</BODY>

</HTML>

Kode diatas menggunakan Notepad dan menyimpan file sebagai satu.html. Kemudian, klik kanan file yang disimpan tadi. bagaimanakah keluarannya?

Listing 2

<B>Untuk menampilkan tulisan cetak tebal</B><BR>

<I>Untuk menampilkan tulisan cetak miring (italic) </I><BR>

<U>Untuk menampilkan tulisan bergaris bawah (underline) </U><BR>

<BR> digunakan untuk menampilkan baris baru.

Listing 3

<Pon> Bla bla bla bla, dan tulisan ini pun akan dianggap satu paragraf. kalau ga percaya, coba aja sendiri. dengan menggunakannya dua kali atau lebih bakal lebih keliatan hasilnya.

</P>

Tidak wajib untuk menutup tag <P>. Tetapi seperti dikatakan sebelumnya, menutup

tiap-tiap tag adalah suatu yang baik yang pemprogram praktekkan.

Listing 4

Bekerja dengan Heading

Kita dapat menggunakan heading untuk mengorganisir teks kita dalam berbagai

tingkatan. Ada lima tingkatan heading didalam HTML seprti di bawah:

<H1>Level – 1 </H1>

<H2>Level – 2 </H2>

<H3>Level – 3 </H3>

<H4>Level – 4 </H4>

<H5>Level – 5 </H5>

Listing 5

Penempatan List contoh teks atau items.Ada dua jenis list didalam HTML.

sebagai berikut

o Ordered List

o Unordered List

Ordered List diwakili oleh tag <ol> tag secara otomatis menomori, dan

Unordered List diwakili oleh tag <ul> dan terlihat seperti bullet.

Cobalah kode di bawah ini:

<OL>

<LI>Java

<LI>C++

</OL>

kode diatas menghasilkan suatu daftar perintah bahasa. Jika kita

menginginkannya seperti bullet kemudian kita ubah tag <OL> menjadi tag <UL>

sebagai di bawah ini:

Listing 6

<UL>

<LI>Java

<LI>C++

</UL>

Listing 7

Penerapan Definisi List

Definisi List adalah serupa dengan daftar kata. Diterapkan menggunakan tag <DL>

dan <DT> seperti ditunjukkan listing 7 dibawah ini.

<DL>

<DT>Java

<DD>Developed by Sun Microsystems Inc

<DT>Yang kedua

<DD>Developed by saya sendiri

</DL>

Listing 8

Indenting Text

Tag <BLOCKQUOTE> yaitu teks yang menjorok lebih kedalam dari garis tepi secara

otomatis dari kiri ke kanan. Cobalah contoh berikut :

You can use Sound Recorder to record, play, and edit sound files.

To use Sound Recorder, you must have a sound card and speakers

installed on your computer. If you want to record live sound,

you also need a microphone.

</BLOCKQUOTE>

2. Koleksi Trik dan Teknik CSS untuk Membuat Website

Seperti yang kita ketahui bersama bahwa CSS (Cascading Style Script) adalah sebuah bahasa untuk mendukung bahasa HTML. Banyaknya unsur yang terkandung didalamnya membuat kita harus rajin menemukan sesuatu yang kreatif dan inovatif didalamnya, apalagi untuk permasalahan desain website.

3. Gambar html

Website tanpa gambar ibarat sayuran tanpa garam, akan terasa hambar. Sebab, kemungkinan website akan terasa membosankan, sulit dipahami, dan tidak menarik.

Oleh karena itu, memasukkan gambar pada website cukup penting. Website akan menjadi lebih cantik dan dapat menjalankan tujuannya dengan maksimal. Bahkan, kombinasi gambar dan teks 323% lebih efektif mengarahkan pengunjung ke action yang diharapkan

Sekarang, mungkin Anda bertanya-tanya bagaimana cara memberikan gambar ke website. Salah satu caranya yaitu dengan memahami cara memasukkan gambar di HTML. Kenapa HTML?

Alasannya, HTML adalah salah satu tag yang paling umum digunakan untuk membangun struktur website. Bahkan, 90,4% website di dunia menggunakan HTML. Jadi, kami cukup merekomendasikan Anda untuk memahami basic HTML.

Nah, Anda sudah datang ke tempat yang tepat. Pada artikel ini, Anda akan mengetahui cara memasukkan gambar di HTML. Lengkap dengan cara mengaturnya supaya gambar lebih cantik dan fungsional.

4. Memahami Elemen HTML dalam Membuat Tabel

Ketika kamu membuat tabel dengan HTML ada beberapa tag atau elemen HTML yang harus kamu ketahui. Akan tetapi pada dasarnya kamu sudah bisa membuat tabel dengan hanya menggunakan 3 elemen HTML berikut :

Elemen <table> digunakan untuk mendefinisikan pembuatan tabel

Elemen <tr> digunakan untuk mendefinisikan pembuatan baris pada tabel

Elemen <td> digunakan untuk membuat kolom atau sel di setiap baris pada tabel

Seiring dengan perkembangan dan kebutuhan akan tabel, HTML juga menyediakan elemen-elemen opsional lain dalam pembuatan tabel seperti berikut :

Elemen <th> digunakan untuk mendefinisikan header di dalam tabel

Elemen <thead> digunakan untuk membungkus konten bagian judul atau kepala tabel

Elemen <tbody> digunakan untuk membungkus konten bagian isi atau tubuh dari tabel

Elemen <tfoot> digunakan untuk membungkus konten bagian kaki atau bawah dari tabel

Daripada kamu bingung dengan elemen-elemen tersebut, mari kita praktikkan saja langsung dengan menggunakan 3 elemen yang umum digunakan dalam membuat tabel.

Pertama silakan buat file html baru. Beri nama file html tersebut sesuai selera atau dapat kita beri nama “index.html”. Silakan perhatikan contoh kode berikut dan salin ke dalam file index.html.

<!DOCTYPE html>

<head>

<title>Mengenal Tabel HTML</title>

</head>

<body>

<tr>

<td>Baris ke 1 - Kolom ke 1</td>

<td>Baris ke 1 - Kolom ke 2</td>

</tr>

<tr>

<td>Baris ke 2 - Kolom ke 1</td>

<td>Baris ke 2 - Kolom ke 2</td>

</tr>

</table>

</body>

</html>