Cara mudah membuat web dengan penguasaan CSS dan HTML KATA PENGANTAR

Please download to get full document.

View again

of 77
0 views
PDF
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
Document Description
2 KATA PENGANTAR CSS yang merupakan singkatan dari Cascading Style Sheet adalah Salah satu fasilitas yang diberikan untuk pemrograman HTML sehingga pengaturan / disain tampilan suatu webpage dapat menjadi
Document Share
Document Transcript
2 KATA PENGANTAR CSS yang merupakan singkatan dari Cascading Style Sheet adalah Salah satu fasilitas yang diberikan untuk pemrograman HTML sehingga pengaturan / disain tampilan suatu webpage dapat menjadi lebih baik. Hal ini dapat terjadi karena dengan CSS, user memiliki kemampuan untuk; mengatur posisi secara absolut, mengubah warna secara dinamis, merubah besar font secara dinamis, merubah margin secara dinamis dan lain sebagainya. Terdapat beberapa metode dalam menerapkan CSS ke suatu web-page yaitu melalui sisipan sisipan yang dilakukan pada dokumen HTML. Untuk dapat melakukan itu tentunya kita harus mengetahui tentang HTML, dengan demikian maka pada buku ini sebagai langkah awal akan dijelaskan tentang HTML. Kalau kita berbicara mengenai HTML, maka tentunya kita juga akan berbicara tentang internet yang merupakan sumber dari asal usul munculnya World Wide Web. HTML sendiri sebenarnya merupakan basis / dasar untuk membangun (membuat ) HomePage / Situs (selanjutnya penulis akan menyebutnya HomePage) di internet. Sebelum kita membicarakan lebih jauh mengenai CSS yang akan disisipkan pada HTML yang merupakan dasar untuk membangun HomePage ( bahkan ada sebagian orang yang mengatakan bahwa HTML merupakan language / bahasa pemrogramannya HomePage ). Ada baiknya kita mengenal apa itu HTML. 3 SIMBOL SIMBOL DAN ATURAN PADA BUKU INI Sebelum kita membahas lebih jauh tentang HTML dan HomePage ada baiknya kita lihat dulu simbol simbol dan aturan yang ada pada buku ini Symbol INF Simbol ini menerangkan bahwa kalimat kalimat pada area simbol ini merupakan informasi pendukung tulisan pada bagian saat itu. TIP Simbol ini menerangkan bahwa kalimat kalimat pada area simbol ini merupakan TIP & TRICK dari penulis kepada pembaca, sehubungang dengan topik yang sedang dibahas pada bagian saat itu! Simbol ini menerangkan bahwa kalimat kalimat pada area simbol ini merupakan Attention atau perhatian atau dapat dibilang peringatan kepada pembaca agar tidak melakukan kesalahan. Aturan Contoh atau potongan HTML yang dapat anda coba ditulis dengan font dan ukuran seperti berikut : HTML HEAD TITILE contoh syntax /title HEAD BODY ini hanya contoh syntax /BODY /HTML Istilah baru / penting akan ditulis dengan bentuk tebal dan miring (bold & italic) 4 APA ITU HTML? HTML HyperText Markup Language, adalah bahasa dari world wide web. Setiap kali anda mengakses internet atau lebih tepatnya homepage, anda sesungguhnya mengakses dokumen seseorang yang dibuat menggunakan format HTML. Setiap halaman / dokumen (selanjutnya penulis akan menyebutnya dokumen) ditulis dalam format HTML. Semua format dokumen, hyperlink yang dapat di-click, gambar grafis, dokumen multimedia, form yang dapat diisi, dan segala sesuatu dalam dokumen HomePage dibuat berdasarkan perintah / syntax (selanjutnya penulis akan menyebutnya syntax) HTML. Selanjutnya agar kita dapat membuat suatu dokumen untuk HomePage maka kita perlu mengetahui syntax syntax HTML. Lalu yang menjadi pertanyaan sekarang, bagaimana syntax syntax HTML itu? Untuk itu anda tidak perlu khawatir syntax syntax HTML justru akan kita pelajari pada bagian bagian selanjutnya dalam buku ini, pada bagian ini yang perlu kita ketahui adalah bahwa setiap syntax HTML pasti memiliki penanda / tag (selanjutnya penulis menyebutnya tag). Tag HTML dapat diketahui dengan mudah yaitu : dimulai dengan tanda dan ditutup dengan tanda . Penggunaan tag ini juga merupakan sesuatu yang membedakan dokumen HTML dengan dokumen teks biasa. Berikut ini beberapa contoh tag HTML : HTML dan /HTML , HEAD dan /HEAD , TITLE dan /TITLE , BODY dan /BODY , BR , P , dan lain sebagainya. 5 Tahukah anda bahwa HomePage terdiri dari beberapa halaman dan setiap halaman itu merupakan INF satu dokumen, maka berarti setiap Homepage terdiri dari beberapa dokumen. Tahukah anda arti web itu sebenarnya jaring laba laba yang besar, web pada ilmu komputer atau internet khususnya adalah jaringan yang luas mencakup seluruh dunia. Hyperlink link / hubungan yang dibuat pada dokumen untuk menghubungkan dokumen yang sedang aktif / dibuka sekarang dengan dokumen lainnya. Perlu diketahui bahwa penulisan syntax HTML ada yang perlu di tutup dengan tag penutupnya, yaitu tag yang memakai tanda / seperti pada HTML ditutup dengan /HTML dan ada yang tidak perlu tag penutup seperti BR EDITOR UNTUK MEMBUAT DOKUMEN HTML Untuk membuat dokumen HTML (dokumen dengan syntax HTML) sebenarnya kita tidak memerlukan suatu editor khusus, yang kita perlukan hanyalah sebuah editor teks. Selanjutnya yang menjadi pertanyaan sekarang adalah bagaimana kita membedakan antara dokumen HTML dengan dokumen teks biasa? Dokumen HTML memiliki extension.htm atau.html jadi untuk itu kita perlu menyimpan dokumen yang kita buat dengan memberikan extension.htm atau.html pada nama file-nya. Contohnya misal kita akan membuat dokumen dengan nama index, maka simpan file dokumen kita dengan nama index.htm atau index.html. Untuk menyimpan dokumen yang kita buat dengan menggunakan notepad yaitu : TIP Click menu File Save, kemudian pada kotak input File Name ketikkan namafile yang adan inginkan kemudian tambahkan.htm pada akhir namafile spt contoh berikut : namafile.htm Pada bagian Save As Type pilih All Files (*.*) dan selanjutnya click tombol Save Jadi kesimpulannya untuk menyimpan dokumen lakukan cara, sebagai berikut : Click menu File Save FileName = namafile.htm atau namafile.html Save As Type = AllFiles (*.*) Selain menggunakan Notepad kita juga dapat membuat dokumen HTML dengan menggunakan editor khusus untuk HTML. Beberapa editor khusus untuk HTML diantaranya adalah : 6 HomeSite dari Allaire Macromedia Dreamweaver dari Macromedia Microsoft FrontPage dari Microsoft dan masih banyak yang lainnya Pada editor editor khusus HTML seperti disebutkan diatas disediakan berbagai tools dan utility untuk membantu pemakai untuk mempermudah dalam membuat dokumen HTML. Bila anda menggunakan editor seperti yang disebutkan di atas, penulis menyarankan agar pembaca yang baru belajar, dalam membuat dokumen HTML agar menulis syntax dan isi dokumen dilakukan dengan mengetik langsung ( jangan menggunakan tools atau utility yang disediakan editor). Hal ini berguna agar pembaca terbiasa dengan syntax syntax dan aturan penulisan HTML, sehingga apabila ada kesalahan maka pembaca dapat menganalisa kemungkinan letak kesalahannya. Demikianlah pengantar dari penulis, selanjutnya mari kita mulai mempelajari HTML dan Web Design ini secara perlahan dan penulis menyarankan agar pembaca mencoba setiap contoh yang ada di buku ini dan pahami apa yang terjadi dengan syntax syntax yang ditulis pada contoh tersebut. Tangerang, Januari 2009 Penulis DOKUMEN HTML DASAR TAG HTML DASAR YANG DIBUTUHKAN DALAM DOKUMEN Berikut ini adalah tag dasar yang dibutuhkan dan harus ada dalam dokumen HTML : HTML dan /HTML HEAD dan /HEAD TITLE dan /TITLE BODY dan /BODY Tag HTML Setiap dokumen HTML dimulai dengan tag HTML dan diakhiri dengan tag /HTML , yang menyatakan suatu dokumen sebagai dokumen HTML. Contoh penulisan tag HTML dan merupakan contoh dokumen HTML paling sederhana : HTML Dokumen HTML ku yang pertama /HTML Simpan dokumen anda dengan nama : latihan1.htm. Ingat selalu tambahkan dokumen HTML anda dengan tag HTML pada awal dan akhir dokumen. TIP Ingatlah untuk menutup tag yang digunakan dengan tanda Slash (/), sesuai dengan tag tersebut. Seperti tag HTML di tutup dengan tag /HTML . Namun perlu diperhatikan bahwa ada beberapa tag yang tidak perlu ditutup dengan slash, seperti tag BR , P dan lain sebagainya. (tag ini akan kita pelajari nanti.) Tag HEAD dan BODY Dokumen HTML terdiri dari dua bagian, yaitu head (bagian kepala) dan body (bagian tubuh). Secara umum head berisi informasi umum mengenai dokumen, sedangkan body biasanya merupakan isi dokumen yang sebenarnya. Contoh penulisan tag HEAD dan BODY (coba dan lihat hasilnya): 8 HTML HEAD teks ini ditulis di area atau bagian head /HEAD BODY teks Dokumen pertamaku ini ditulis di area body /BODY /HTML ! Ingat area head (area yang dibatasi oleh tag HEAD dan /HEAD ) sebaiknya diisi dengan informasi umum dokumen saja. Contoh diatas hanya untuk menunjukkan area dari kedua bagian dokumen yaitu area head dan area body, jadi sebaiknya untuk selanjutnya area head jangan diisi dengan teks yang akan ditampilkan pada HomePage. Karena seharusnya hanya berisi informasi umum dokumen saja. Tag TITLE Tag ini akan mengakibatkan ditampilkannya judul dari dokumen pada TitleBar browser. tag TITLE ditulis di area head. INF Browser adalah aplikasi yang digunakan untuk melakukan browsing (pencarian HomePage) pada internet Browser yang umum dipakai oleh pemakai internet saat ini adalah Internet Explorer dan Netscape namun masih ada browser lain yang juga bisa dibilang bai seperti opera, lynx (browser text mode) dan lain sebagainya. Contoh penulisan : HTML HEAD TITLE Latihan I /TITLE /HEAD BODY teks Dokumen pertamaku ini ditulis di area body /BODY /HTML Coba lihat hasil dari contoh di atas apakah tulisan Latihan I ditampilkan pada browser? Jawabannya adalah tidak, melainkan ditampilkan pada TitleBar Browser (coba perhatikan TitleBar browser anda). 9 Atribut dasar Tag BODY Tag body sebenarnya memiliki attribut yang berguna untuk mengatur body (tubuh)dari suatu dokumen HTML. Dengan memanfaatkan atribut yang ada pada body kita dapat memberikan warna background (warna latar belakang), mengatur margin dan lain sebagainya. Sebagai permulaan disini akan diberikan beberapa atribut dasar yang umum dipakai pada dokumen HTML. Atribut dasar tag BODY , diantaranya : bgcolor warna background dokumen. leftmargin ukuran margin kiri dokumen. rightmargin ukuran margin kanan dokumen. topmargin ukuran margin atas dokumen. bottommargin ukuran margin bawah dokumen. link, vlink, alink warna link, aktif link dan link yang sudah dikunjungi pada dokumen. INF atribut adalah suatu pendukung yang berguna untuk mengatur perilaku atau tampilan suatu tag. Dengan memanfaatkan atribut pada suatu tag kita dapat mengatur perilaku atau tampilan dokumen yang di sebabkan oleh tag yang bersangkutan. Tiap tiap tag HTML memiliki atribut yang berbeda dan ada pula tag HTML yang tidak memiliki atribut. 10 Atribut bgcolor Berikut ini aturan nomer hexa (ingat kita harus memberikan tanda # sebelum angka hexadesimal tersebut) : #rrggbb Maksud kombinasi #rrggbb rr untuk nilai warna merah, rr diganti dengan angka 00 FF. gg untuk nilai warna hijau, gg diganti dengan angka 00 FF bb untuk nilai warna biru, bb diganti dengan angka 00 FF Misal untuk memberi warna biru pada latar belakang dokumen HTML maka kita cukup mengisikan bgcolor= blue pada tag BODY seperti berikut : BODY bgcolor= blue , atau BODY bgcolor= #0000FF Atribut leftmargin, rightmargin, topmargin dan bottommargin Nilai yang diberikan pada margin ini dalam satuan pixel. Sehingga hasilnya akan sesuai dengan setting resolusi pada monitor yang membuka /melihat dokumen. Conoth penulisan: BODY leftmargin= 25 rightmargin= 25 topmargin= 20 bottommargin= 30 Atribut link, alink, dan vlink Memberikan setting warna terhadap link yang kita buat pada dokumen. link memberikan setting warna terhadap seluruh link yang ada pada dokumen vlink memberikan setting warna terhadap seluruh visited link yang ada pada dokumen alink memberikan setting warna terhadap seluruh active link yang ada pada dokumen. Untuk pemberian nilai warna memakai cara yang sama dengan cara pada bgcolor. INF tahukah anda bahwa nilai hexadesimal hanya memiliki nilai dari 0 15, dan angka yang dikenal hanya 0 9, sedangkan untuk nilai diwakili oleh huruf A F (A, B, C, D, E, F). 11 Standard resolusi display umum (yang sering dipakai sebagai acuan/patokan) dalam membuat dokumen adalah 800 x 600. vlink (Visited link) adalah link yang pernah dikunjungi / dibuka oleh pengunjung HomePage / dokumen alink (active link) adalah link yang sedang aktif saat ini atau link yang sedang terpilih oleh kursor saat ini Contoh penulisan : HTML HEAD TITLE Latihan II /TITLE /HEAD BODY bgcolor= blue link= fuchsia alink= white vlink= silver leftmargin= 25 rightmargin= 25 topmargin= 20 bottommargin= 30 teks Dokumen pertamaku ini ditulis di area body br a href= latihan1.htm link ke dokumen latihan I /a br a href= ini link 2 /a /BODY /HTML 1. Simpan hasil perubahan itu dengan nama latihan2.htm. 2. Jalankan dokumen latihan2.htm ini pada browser dan perhatikan TitleBar browser. 3. Perhatikan isi dokumen pada browser. 4. Click pada tulisan link ke dokumen latihan I, maka kita akan dihubungkan / berpindah ke dokumen latihan I. 5. Tekan tombol back pada browser anda untuk kembali ke dokumen latihan II. Untuk melihat dampak dari link, alink dan vlink coba pindah pindahkan dengan cara menekan tombol tab pada keyboard, perhatikan perubahan warna pada link! 12 13 FORMAT TAMPILAN SEDERHANA TAG UNTUK HEADLINE Untuk membuat teks Headline (judul) kita harus melingkupi teks tersebut dengan tag pembuka dan tag penutup headline. Tag Headline ditulis dengan aturan sebagai berikut : tag pembuka Hx dan tag penutup /Hx , perhatian x diganti dengan angka contoh : H1 atau H2 atau H3 .. dst Angka tersebut menentukan besar kecilnya huruf teks judul yang berada diantara tag Hx dan /Hx . Semakin besar angka tersebut semakin kecil huruf teks judul. Contoh penulisan tag Hx simpan dengan nama latihan3.htm : HTML HEAD TITLE Format Tampilan Sederhana /TITLE /HEAD BODY H1 Headline level 1 /H1 H2 Headline level 2 /H2 H3 Headline level 3 /H3 H4 Headline level 4 /H4 /BODY /HTML Cobalah contoh di atas dan perhatikan bahwa huruf pada tulisan semakin kebawah semakin kecil. Coba simpulkan berarti (simpulkan sendiri). 14 TAG STYLE SEDERHANA Disini akan dibahas beberapa tag style, tag - tag ini digunakan untuk mengatur format teks baik itu untuk membuat teks tebal, miring atau tulisan seperti bentuk kode program (teks seperti bentuk listing program atau kalau dalam font yaitu courier new) Perhatikan tabel tag berikut : FUNGSI TAG LOGIKAL TAG FISIKAL Untuk membuat teks tebal STRONG B Untuk membuat teks miring EM I Untuk huruf fixed (font jenis fixed) CODE TT Seperti tag tag yang lalu, tag ini juga harus ditutup dengan tag penutupnya masing masing. INF Tag Fisikal tampilan akan disesuaikan dengan kemampuan resolusi cetak dari printer pada komputer yang sedang melakukan browsing dokumen kita. Tag Logikal tampilan akan dibuat sebaik mungkin tanpa kemampuan resolusi cetak dari printer pada komputer yang sedang melakukan browsing dokumen kita. Penulis menyarankan untuk menggunakan tag logikal. 15 Buka dan edit file latihan3.htm yang tadi kita buat. Ubahlah atau tambahkanlah pada dokumen tersebut sehinggan menjadi seperti berikut ini : HTML HEAD TITLE Format Tampilan Sederhana /TITLE /HEAD BODY H1 Headline level 1 /H1 H2 Headline level 2 /H2 H3 Headline level 3 /H3 H4 Headline level 4 /H4 Tulisan ini ditulis dengan STRONG Tag Strong, agar tebal /STRONG Tulisan ini ditulis dengan EM Tag EM, agar miring /EM Tulisan ini ditulis dengan CODE Tag Code, agar seperti kode program /CODE /BODY /HTML Simpan file tersebut dan cobalah, perhatikan bahwa huruf pada tulisan semakin kebawah semakin kecil. 16 FORMAT ELEMENT TEXT PER BLOK P TAG UNTUK PARAGRAPH P digunakan untuk menampilkan satu blok text dalam bentuk paragraph, dimana blok text tersebut diawali dengan P dan ditutup dengan /P . Penggunaan tag /P sebagai penutup akan memastikan bahwa paragraph akan disertai dengan extra space (extra 1 baris kosong). Contoh penulisan: HTML HEAD TITLE Tag P untuk Paragraph /TITLE /HEAD BODY P pergunakan tag P untuk membuat paragraph. Element text yang dimulai dengan tag Pakan dimulai pada baris baru, dan akan ditambahkan baris kosong padanya. /p p ini adalah line break dengan extra baris kosong, yang dibuat dengan tag P. BR Ini adalah line break yang dibuat dengan tag BR, coba bandingkan dengan tag P. /BODY /HTML 17 PRE TAG PRE- FORMATTED TEXT PRE merupakan tag yang dapat digunakan untuk membuat satu blok tulisan yang tata letaknya dapat kita atur sesuai keinginan kita, sesuai dengan tampilan pada saat pembuatan. Blok text tersebut diawali dengan PRE dan ditutup dengan /PRE . HTML HEAD TITLE Tag PRE untuk Pre-Formatted Text /TITLE /HEAD BODY PRE To: Lee Smith From: Chris Brown Subject: Meeting schedule and agenda for Web Site team Date: Thurs, 14 Aug :00:05 9/20/97 8:00 a.m. Room 218 9/21/97 9:00 a.m. Room 218 9/22/97 2:00 p.m. Room 111 At the first meeting, we should discuss how to use the STYLE tag to make our home page more interesting. /PRE /BODY /HTML DIV TAG UNTUK MEMFORMAT ALIGNMENT SATU BLOK TEXT Tag DIV dapat digunakan untuk mengatur alignment satu blok text, apakah akan kita atur rata kiri atau rata kanan atau tengah. Blok text tersebut diawali dengan DIV dan 18 ditutup dengan /DIV . Sedangkan untuk pengaturan alignment diatur pada parameter tag DIV tersebut. Yaitu dengan syntax : DIV ALIGN= LEFT CENTER RIGHT HTML HEAD TITLE Tag DIV untuk Alignment Text /TITLE /HEAD BODY DIV ALIGN=RIGHT H1 Aligning a Block of Content to the Right /H1 P You can use a DIV tag to align a block of content to the right. /p P The content can include anything you like, including tables, images, lists, and so on. Note, however, that right-aligned lists often do not look very neat. /p /DIV /BODY /HTML 19 TAG TAG UNTUK MEMFORMAT TEXT SPAN TAG UNTUK MEMFORMAT TEXT DALAM BARIS tag SPAN digunakan untuk memformat sejumlah text pada suatu baris kalimat tanpa mengganggu text lain dalam baris yang sama. Syntax: SPAN STYLE= color:warna; font-weight:bold Regular; fontstyle:italic Normal HTML HEAD TITLE Tag DIV untuk Alignment Text /TITLE /HEAD BODY P Here is some normal paragraph text. It looks OK, but it would lookmuch better if it were SPAN STYLE= color:red; font-weight:bold; font-style:italic in bright, bold, italic merah. /SPAN /BODY /HTML CENTER TAG UNTUK CENTER TEXT CENTER akan menyebabkan text atau tulisan yang diapit oleh tag CENTER dan /CENTER akan diposisikan center atau ditengah tengah secara horisontal. 20 HTML HEAD TITLE Tag DIV untuk Alignment Text /TITLE /HEAD BODY CENTER H1 Perguruan Tinggi Raharja /H1 /CENTER Selamat datang di Jurusan Sistem Komputer CCIT /BODY /HTML BR TAG UNTUK LINE BREAK BR akan menyebabkan text atau tulisan yang ada di sebelah kanannya akan turun kebawah satu baris (Line Break). Tag BR tidak memiliki tag penutup. Perhatikan contoh berikut: HTML HEAD TITLE Tag DIV untuk Alignment Text /TITLE /HEAD BODY Tulisan ini berada pada baris pertama BR Tulisan ini turun karena tag BR BR Tulisan ini juga karena tag BR. /BODY /HTML 21 HR TAG UNTUK MEMBUAT GARIS PEMISAH HORISONTAL Tag HR digunakan untuk membuat garis pemisah antar baris atau untuk membuat suatu garis horisontal sepanjang lebar halaman hompage. Tag HR tidak memiliki tag penutup. Syntax HR ALIGN= CENTER LEFT RIGHT NOSHADE SIZE= thickness WIDTH= width ALIGN untuk menentukan apakah rata kiri atau tengah atau kanan NOSHADE Jika ditulis maka garis dibuat tanpa bayangan, jika tidak maka garisnya memiliki bayangan SIZE untuk menentukan ketebalan garis (dalam pixel) 22 WIDTH Untuk menentukan lebar / panjang garis. (dalam persen %) Perhatikan contoh berikut: HTML HEAD TITLE Tag DIV untuk Alignment Text /TITLE /HEAD BODY P This text appears above a thick, unshaded, centered horizontal rule. HR NOSHADE ALIGN= CENTER WIDTH= 50% SIZE= 8 P This text appears below the horizontal rule. /BODY /HTML 23 ANCHOR DAN LINK Tag A memungkinkan kita untuk mendefinisikan anchors dan links (anchor = poin atau tempat dimana kita dapat mengaksesnya sewaktu waktu, link = pemanggil anchors atau dokumen.html lain, sehingga kita melompat ke anchor tersebut jika link kita click). A sebagai anchor Sebuah anchor mengide
We Need Your Support
Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

Thanks to everyone for your continued support.

No, Thanks