Belajar Dasar-Dasar Bahasa Pemrograman HTML Desain Web

Assalam’mualaikum, kali ini di Link Pengetahuan saya akan membahas mengenai Bahasa Pemrograman HTML, apakah anda sudah mengetahui apa itu HTML?. HTML atau Hypertext Markup Language merupakan protokol yang digunakan untuk mentransfer data atau document dari web server ke browser kita (Internet Explorer, Netscape Navigator, NeoPlanet, dll). HTML ini lah yang memungkinkan Anda menjelajahi internet dan melihat halaman web yang menarik.

Sekarang sudah banyak sekali HTML authoring (software yang digunakan untuk membuat atau mendesain halaman web). Macromedia Dreamweaver, Adobe GoLive, MS FrontPage dan masih banyak lagi, itu hanya sebagian contoh.

Belajar Dasar-Dasar Bahasa Pemrograman HTML Desain Web

Tetapi sebelum Anda melangkah lebih jauh dan tidak mengetahui dasar-dasarnya Anda tidak akan memperoleh hasil yang maksimal. Mengapa begitu? Karena walaupun software-software tersebut semakin menawarkan kemudahan dalam membuat halaman web, tetapi biasanya seseorang masih perlu untuk mengedit halaman web tersebut secara manual. Terutama untuk halaman web yang sangat komplek.

Saya akan membantu Anda mengetahui sedikit dasar-dasar dari desain web, walaupun saya juga belum banyak pengalaman di dalam desain web dikarnakan saya pun berawal dari otodidak, membaca buku. Saya mendapatkan matakuliah desain web dari smster 5, di karnakan sudah menjuru pada jurusan yang saya ambil. Yang dibutuhkan hanya sebuah word processor. Anda bisa menggunakan Notepad, WordPad, MS Word atau yang lainnya. Tapi saran saya cobalah menggunakan Notepad agar lemih mudah.

Struktur Dasar HTML

HTML (Hypert Text Markup Language) merupakan bahasa pemrograman yang digunakan dalam pembuatan halaman web. Dalam penggunaannya sebagian besar kode HTML tersebut harus terletak di antara tag kontainer. Yaitu di awali dengan <namatag> dan diakhiri dengan </namatag> (terdapat tanda “/”).

Sebuah halaman web minimal mempunyai empat tag, yaitu :

<HTLM> Sebagai tanda awal dokumen HTML.

<HEAD> Sebagai informasi page header. Di dalam tag ini kita bisa meletakkan tag-tag TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE & META.

<TITLE> Sebagai title atau judul halaman. Kalimat yang terletak di dalam tag ini akan muncul pada bagian paling atas browser Anda (pada title bar).

Contoh :

<TITLE>Tips HTML – https://link-pengetahuan.blogspot.com</TITLE>

<BODY> Di dalam tag ini bisa diletakkan berbagai page attribute seperti warna latar belakang, warna teks, warna link, warna visited link, warna active link dan lain-lain.

Atribut :

BGCOLOR, BACKGROUND, TEX, LINK, VLINK, ALINK, LEFTMARGIN & TOPMARGIN.

Contoh :

Sebuah contoh sederhana dokumen HTML:

<HTML>

<HEADE>

<TITLE>Halaman Pembuka

</TITLE>

</HEAD>

Letakkan text, images, dan link Anda di sini

</BODY>

</HTML>

Pengaturan Teks

Untuk mendapatkan hasil halman web yang baik Anda harus melakukan pengaturan terhadap teks seperti memilih jenis dan ukuran huruf, perataan, dan lain-lain. Tag-tag di bawah postingan ini yang bisa digunakan dalam pengaturan teks:

Headers: <Hn>..</Hn> Digunakan untuk mengatur ukuran huruf pada header. “n” mempunyai nilai antara 1-6 merupakan ukuran terkecil.

Contoh:

<H2>Tutorial Html</H2>

Hasilnya akan terlihat seperti :

Tutorial Html

Paragraph Baru: <P> Digunakan untuk pindah alinea atau paragraf. Tag ini bisa diberi akhir </p> tapi juga bisa tidak diberi.

Line Break: <BR> Digunakan untuk pindah ke baris baru.

Non Line Break: <NOBR> Bila digunkan tag ini maka teks yang panjang tidak secara otomatis pindah baris bawahnya bila pertama sudah terlalu panjang.

Font <FONT> Untuk mendefinisikan berbagai attribut FONT, yaitu : SIZE, FACE, COLOR.

SIZE: Ukuran font yang digunakan, berkisar antara 1-7 dengan 1 merupakan ukuran terkecil dan 7 merupakan ukuran terbesar.

FACE: Jenis atau nama font. Anda bisa memilih maksimal 3 jenis font yang masing-masing dipisakhan oleh koma. Bila terdapat spasi yang terletak pada nama font maka harus digunakan tanda garis bawah ( _ ). Dalam memilih jenis font ini harus dipertimbangkan apakah font yang kita gunakan pada halam web kita nantinya akan terdapat pada komputer pengguna yang lain (pengakses web kita). Pendeknya kita ditak usah menggunakan font-font yang berbentuk aneh-aneh, gunakan saja font standar. Tapi bila Anda inin menggunakan font yang sedikit “aneh” Anda bisa menggunakan graphic.

COLOR: Warna font, didefinisikan dengan menggunakan nilai RGB/HEX atau bisa juga langsung menggunakan nama warna (red misalnya).

Contoh:

<FONT SIZE=4 FACE=”Verdana, Arial, Helvertica”COLOR=”FF0000”>Contoh teks yang berwarna merah</FONT>

Hasilnya kan terlihat seperti :

Contoh Teks yang berwarna merah

Contoh lainnya :

Base Font: <BASEFONT> Digunakan untuk mendefinisikan “defalt text”. Attribut sama dengan attribut FONT. Tag FONT akan mengoverwite setting pada BASEFONT.

Contoh:

Selain tag dan atribut di atas, masih terdapat lagi tag-tag yang berhubungan denagn pengaturan teks, yaitu:

Perhatian: Semua tag dibawah ini membutuhkan tap penutup.

<B> Bold text

<l> Italic text

<U> Underscore

<TT> Typewriter

<S> Strikeout - ~~draws a line through the text~~

<PRE> Preformatted Text <DFN> Definition

<BLINK> Text beredip (lebih baik jangan digunakan)

<STRONG> Strong

<ADDRESS> Italic

<CITE> Digunakan untuk quoting text

<CODE> Monospaced font (digunkana bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda)

<SAMP> Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda)

<KBD> Monospaced font (dugunakan bila anda inin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda)

<BIG> Ukuran teks akan lebih besar satu ukuran

<SMALL> Ukuran teks akan lebih kecil satu ukuran

<SUP> Membuat teks^superscript

<SUB> Membuat teks_superscript

<ABBREV> Abbreviations

<ACRONYM> Untuk akronim

<PERSON> Digunakan untuk indexing

<Q> Membuat short inline quotation

<VAR> Membuat variable name, selalu dalam italics

Lists

Terdapat tiga tipe list yang digunakan, yaitu

Unordered Lists: <UL> Untuk membuat daftar item dengan tanda bullet. List entries didefinisikan teg <LI>.

Contoh:

<UL>

<LI> Item nomer 1

<LI> Item nomer 2

<LI> Item nomer 3

</UL>

Hasil dari kode di atas adalah:

Item nomer 1

Item nomer 2

Item nomer 3

Dengan atribut TYPE Anda mendefinisikan bentuk disc, cirle atau spuare bullet point.

Images:

Digunakan untuk memnampilakn image atau animasi gif pada halaman web Anda.

Atribut : alt, align=(center, left, right), hspave, vspace, border, width & height

Contoh:

Links

Digunakan untuk membuat link ke halaman lain. Tulisan yang terletak anatara <A> dan </A> akan terdapat garis bawah.

Contoh:

<A HREF=”halaman2.html”>Klik di sini</A> Untuk membuat link kehalaman lain.

<A HREF=”bima:mandala@link_pengetahuan.com”>Klik di sini</A> Untuk membuat link pada alamat e-mail.

Tabel

Tabel sangat penting artinya dalam desain web. Karena dengan menggunakan tag table Anda dapat membuat halaman web “terbagi” pada beberapa kolom atau baris.

Terdapat tiga tag atau elemen utama yang digunakan dalam pembuatan table:

<TABLE>, <TR>, dan <TD>. Yang perlu diingat dalah bahwa tab <TR> dan <TD> harus terletak di antara tag <TABLE> dan <TABLE>

<TABLE>

Terdiri dari atribut :

align – perataan : rata kiri (left), tegah (center) atau kanan (right)

bgcolor – warna latar belakang (background) dari table

border – ukuran lebar border table (dalam pixel)

cellpanding – jarak antar cell (dalam pixel)

width – ukuran table dalam pixel atau percent.

Contoh:

<TR>

Tag ini digunakan untuk membuat baris baru (pada table). Terdiri dari atribut:

align – perataan : rata kiri (left), tegah (center) atau kanan (right).

bgcolor – warna latar belakang dari baris.

valign – perataan vertikal : top, middle atau bottom.

Contoh:

<TD>

Tag ini dugunakan untuk membuat kolom baru pada tabel.

align – perataan

background – image yang dugunakan sebagai latar belakang dari kolom.

bgcolor – warna gambar belakang

colspan – lihat gambar contoh

height – ukuran tinggi cell dalam pixels.

nowrap – membuat supaya isi dari kolom tetap berada pada saru baris.

rowspan – lihat gambar contoh

valign – perataan vertikal :top, middle atau bottom.

width – ukuran kolom dalam pixel atau percen.

Contoh:

Itu lah sedikit penjelasan saya mengenai bahasa pemrograman HTML dalam membuat desain web, Anda dapat mengembangkan lagi mengenai materi dalam pembahasan mengenai bahasa pemrograman HTML desain web. Dan semoga artikel ini dapat membantu dan menambah wawasan Anda sebgai pembaca.Terimakasih.

Belajar Dasar-Dasar Bahasa Pemrograman HTML Desain Web

0 Response to "Belajar Dasar-Dasar Bahasa Pemrograman HTML Desain Web"

Post a Comment