Pen Gen Alan Web Design

  • May 2020
  • PDF
Download

This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA

Overview

Download & View Pen Gen Alan Web Design as PDF for free.

More details

  • Words: 3,197
  • Pages: 20
1. HTML (Hypertext Markup Language) 1.1. World Wide Web Internet merupkan jaringan global yang menghubungkan suatu network dengan network lainya di seluruh dunia, TCP/IP menjadi protocol penghubung antara jaringan-jaringan yang beragam di seluruh dunia untuk dapat berkomunikasi. World Wide Web (WWW) merupakan bagian dari internet yang paling cepat berkembang dan paling populer. WWW bekerja merdasarkan pada tiga mekanisme berikut: 1. Protocol standard aturan yang di gunakan untuk berkomunikasi pada komputer networking, Hypertext Transfer Protocol (HTTP) adalah protocol untuk WWW. 2. Address WWW memiliki aturan penamaan alamat web yaitu URL (Uniform Resource Locator) yang di gunakan sebagai standard alamat internet. 3. HTML digunakan untuk membuat document yang bisa diakses melalui web. 1.2. 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 di akses dari seluruh dunia. 3. Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi secara online. 4. Menambahkan object-object seperti : image, audio, video, dan juga javascript dalam document HTML. 1.3. Browser dan Editor 1. Browser Browser merupakan software yang di install di mesin client yang berfungsi untuk menterjemahkan tag-tag HTML menjadi halaman web. Browser yang sering di gunakan biasanya Internet Explorer, Netscape Navigator dan masih banyak yang lainya. 2. Editor Program yang di gunakan untuk membuat document HTML, ada banyak HTML editor yang bisa anda gunakan diantaranya: Microsoft Office FrontPage, Dreamweaver, Notepad. 1.4. Tag Dasar HTML Command HTML biasanya disebut TAG, TAG digunakan untuk menentukan tampilan dari document HTML. Contoh: Setiap document HTML di awali dan di akhiri dengan tag HTML. . . .

Tag tidak case sensitive, jadi anda bisa gunakan atau keduanya menghasilkan output yang sama.

Gambar 1.1 Tag Workshop Guru TIK SMP RSBI – 22 s.d. 29 Maret 2009 – LPMP Jawa Tengah – Hal 1

Gambar 1.2 Tag 1.5. Struktur Dokumen HTML Document HTML bisa di bagi mejadi tiga bagian utama: 1. HTML Setiap document HTML harus di awali dan di tutup dengan tag HTML. Tag HTML memberi tahu browser bahwa yang di dalam kedua tag tersebut adalah document HTML. 2. HEAD Bagian header dari document HTML diapit oleh tag di dalam bagian ini biasanya dimuat tag TITLE yang menampilkan judul dari halaman pada titlenya browser. Selain itu Bookmark juga megunakan tag TITLE untuk memberi mark suatu web site. Browser menyimpan “titile” sebagai bookmark dan juga untuk keperluan pencarian (searching) biasanya title di gunakan sebagai keyword. Header juga memuat tag META yang biasanya di gunakan untuk menentukan informasi tertentu mengenai document HTML, anda bias menentukan author name, keywords, dan lainnya pada tag META. Contoh: <META name=”Author” contents=”Bocah Gunung”>

Author dari document tersebut adalah “Bocah Gunung”. Atribut http-equiv dapat digunakan untuk meletakkan nama HTTP. Server atribut untuk menciptakan HTTP header. Contoh: <META http-equiv=”Expires” content=”Wed, 7 May 2003 20:30:40 GMT”>

yang akan menciptakan HTTP header : Expires: Wed, 7 May 2003 20:30:40 GMT Sehingga jika documents di cached, HTTP akan megetahui kapan untuk meng-update document tersebut pada cache. 3. BODY Document body di gunakan untuk menampilkan text, image link dan semua yang akan di tampilkan pada web page. Welcome to HTML

Document HTML yang Pertama



Gambar 1.3 Dokumen HTML

Workshop Guru TIK SMP RSBI – 22 s.d. 29 Maret 2009 – LPMP Jawa Tengah – Hal 2

1.6. Elemen Dasar HTML 1. Block Level Element Block level element yang sering digunakan : Heading (H1 sampai H6) Contoh: title>Heading Elements

Heading one

Heading two

Heading three

Heading four

Heading five
Heading six


Gambar 1.4 Heading 2. Paragraf (P) Contoh: Formating Paragraf

Puisi Ceria

mawar berwarna merah, bibir kamu juga merah, bibir kamu semerah mawar

puisi sedih

Melati harum baunya, kalau nggak ganti percuma namanya.



Gambar 1.5 Paragraf

Workshop Guru TIK SMP RSBI – 22 s.d. 29 Maret 2009 – LPMP Jawa Tengah – Hal 3

3. List Item(LI) List item digunakan untuk mengelompokkan data baik berurutan (ordered list) maupun yang tidak berurutan (unordered list). a. Unordered List (Bullet) : Contoh : Unordered List

Shedule for HTML Course

  • Sunday
  • Monday
  • Tuesday
  • Wednesday


Gambar 1.6 Bullet b. Ordered List (Numbering) Contoh: Ordered List

Shedule for HTML Course

  1. Sunday
    1. Introduction to HTML
    2. Creating List
  2. Monday
    1. Creating table
    2. Inserting Image
  3. Tuesday
    1. Creating Link
    2. Preparing Website
  4. Wednesday


Workshop Guru TIK SMP RSBI – 22 s.d. 29 Maret 2009 – LPMP Jawa Tengah – Hal 4

Gambar 1.7 Numbering c. Definition List Definition List terdiri diapit oleh tag
…
dan
tag menentukan definition term serta
tag menentukan definition itu sendiri. Contoh: Definition List

List of Internet Resource

HTML
HyperText Markup Langguage is not Language Programming
HTTP
HyperText Transfer Protocol is TCP/IP Protocol
Internet
A network of network
TCP/IP
Internet protocol


Gambar 1.8 Definition List 1.7. Pemformatan Page 1. Break Tag
di gunakan untuk memulai baris baru pada document HTML, tag ini fungsinya mirip dengan carriage return.

Workshop Guru TIK SMP RSBI – 22 s.d. 29 Maret 2009 – LPMP Jawa Tengah – Hal 5

Contoh: Break Line

Membangun Aplikasi Web Dinamis

Jika Anda membangun aplikasi web dinamis,
mulai dengan membuat aplikasi server dan
menghubungkan ke database.



Gambar 1.9 Break Line 2. Font Dengan tag anda bisa menentukan format tampilan font dalam document HTML seperti color, size, style dan lainya. Contoh: Formating Font Menyiapkan Web Server

Untuk menjalankan aplikasi web, anda memerlukan sebuah web server. Sebuah web server adalah perangkat lunak yang melayani file dalam menanggapi permintaan dari web browser. Sebuah web server kadang-kadang disebut sebuah server HTTP. Umum termasuk web server IIS, Netscape Enterprise Server, Web Server iPlanet, dan Apache HTTP Server.



Gambar 1.10 Formating Font

Workshop Guru TIK SMP RSBI – 22 s.d. 29 Maret 2009 – LPMP Jawa Tengah – Hal 6

3. Color Color merupakan attribute yang bisa anda tambahkan pada beberapa element seperti body, font, link, dan lainya. Color di bagi dalam tiga ketegori warna primer yaitu red, green dan blue. Masing-masing color didefinisikan dalam dua digit hexadecimal number. #RRGGBB

Hexadecimal Color #FF0000 Red #00FF00 Green #0000FF Blue #000000 Black #FFFFFF White 4. Alignment Align attribute digunakan untuk menentukan perataan object dalam document HTML baik berupa text, object, image, paragraph, division, dan lain-lain. Value Left Right Center Justify

Description Rata kiri Rata kanan Rata tengah Rata kanan kiri

5. Format text a. Physical Formatting Tag ... ... ... ... <SMALL> ... <STRIKE> ... <SUP> ... <SUB> ...
...


b. Logical Formatting Tag <EM> ... <STRONG> ... ... ...

Description Bold text Italic text Underline Text Untuk ukuran yang lebih besar dari normal Untuk ukuran yang lebih kecil dari normal Untuk memberi garis di tengah text Superscript text Subscript text Center document

Description Text miring / Text tebal / Mencoret text / <STRIKE> Underline text /

c. Quotes / Indentasi Untuk membuat indentasi paragraph kita bisa menggunakan BLOCKQUOTE, untuk indentasi pendek anda bisa gunakan element Q. Contoh: Formating Font Menyiapkan Web Server



Workshop Guru TIK SMP RSBI – 22 s.d. 29 Maret 2009 – LPMP Jawa Tengah – Hal 7

Untuk menjalankan aplikasi web, anda memerlukan sebuah web server. Sebuah web server adalah perangkat lunak yang melayani file dalam menanggapi permintaan dari web browser.

Sebuah web server kadang-kadang disebut sebuah server HTTP. Yang termasuk web server IIS, Netscape Enterprise Server, Web Server iPlanet, dan Apache HTTP Server.
Jika anda tidak menggunakan layanan hosting web, pilih web server dan menginstalnya di komputer anda atau pada remote komputer.



Gambar 1.11 Blockquote d. Preformatted text Tag PRE di gunakan untuk menampilkan text sesuai dengan format aslinya. Contoh: Formating Font Menyiapkan Web Server

<pre> Untuk menjalankan aplikasi web, anda memerlukan sebuah web server. Sebuah web server adalah perangkat lunak yang melayani file dalam menanggapi permintaan dari web browser. Sebuah web server kadang-kadang disebut sebuah server HTTP. Yang termasuk web server IIS, Netscape Enterprise Server, Web Server iPlanet, dan Apache HTTP Server. Jika anda tidak menggunakan layanan hosting web, pilih web server dan menginstalnya di komputer anda atau pada remote komputer.



Workshop Guru TIK SMP RSBI – 22 s.d. 29 Maret 2009 – LPMP Jawa Tengah – Hal 8

Gambar 1.12 Pre e. Grouping element Tag DIV dan SPAN di gunakan untuk mengelompokkan element-element HTML. Span digunakan untuk mendefinisikan inline content sementara div digunakan untuk block-level content. Contoh: Div dan Span
Divisi 1

Div tag digunakan untuk mengelompokkan group element biasanya untuk blocklevel element.

Divisi 2

Ini didalam devisi kedua di tulis dengan alignment kanan.

<span style="font-size:25; color:blue"> Baris ini dalam span dengan warna blue.

Gambar 1.13 Div dan Span

Workshop Guru TIK SMP RSBI – 22 s.d. 29 Maret 2009 – LPMP Jawa Tengah – Hal 9

6. Hyperlink a. Link Address Absolute Address - merupakan full internet address (URL) yang meliputi protocol, network location dan path dan nama file. Contoh: http ://www.yahoo.com/index.html

Relatif Address - URL yang tidak menyebutkan protocol dan network location-nya (hanya path dan nama filenya). b. Anchor Anchor tag untuk menentukan hyperlink dalam document HTML. HREF property digunakan untuk menentukan tujuan dari hyperlink tersebut. Hypertext Hypertext

c. Link ke Document Lain Misalkan ada dua document html link1.htm dan link2.htm untuk membuat link dari link1.htm ke link2.htm : link1.htm Using Link
Creating Link

Click here to view document 2

Gambar 1.14 Hyperlink 1 link2.htm Document 2
Creating Link

Back to document 1

Gambar 1.15 Hyperlink 2

Workshop Guru TIK SMP RSBI – 22 s.d. 29 Maret 2009 – LPMP Jawa Tengah – Hal 10

1.7. Table dan Image 1. Table a. Membuat table Tag digunakan untuk membuat table dalam document HTML, bagian pokok dari tabel adalah cell yang didefinisikan dengan menggunakan tag . Using Table
. Using Table
Table dengan single cell


Gambar 1.16 Tabel 1 Kita dapat menambahkan beberapa cell untuk membuat satu baris cell. Using Table
cell 1 cell 2 cell 3 cell 4


Gambar 1.17 Tabel 2

Workshop Guru TIK SMP RSBI – 22 s.d. 29 Maret 2009 – LPMP Jawa Tengah – Hal 11

Berikutnya jika ingin membuat beberapa baris cell dalam table gunakan tag
cell 1a cell 1b cell 1c
cell 2a cell 2b cell 2c


Gambar 1.18 Tabel 3 b. Merge cell Tag memiliki atribut colspan untuk merge column dan rowspan untuk merge baris. Contoh colspan : Using Table

Workshop Guru TIK SMP RSBI – 22 s.d. 29 Maret 2009 – LPMP Jawa Tengah – Hal 12

Quarter 1 Quarter 2
Jan Feb Mar Apr May Jun
100 5000 200 1500 2500 1750
290 5050 2300 100 270 300


Gambar 1.19 Tabel 4 Contoh rowspan : Rowspan

Workshop Guru TIK SMP RSBI – 22 s.d. 29 Maret 2009 – LPMP Jawa Tengah – Hal 13

South North
Quarter 1 Jan 1000 12000
Feb 12500 1345
Mar 78090 71080


Gambar 1.20 Tabel 5 2. Image Ada banyak format image, tapi ada tiga jenis format yang paling sering digunakan : a. GIF (Graphical Interchange Format) (.GIF) b. JPEG (Joint Photographic Expert Image) (.JPG) c. PNG (Portable Network Graphics) (.PNG) 2.1. Insert Image ke Document Tag IMG di gunakan untuk menginsertkan image ke document HTML. Syntax nya: Working with Image

Gambar 1.21 Sisipkan Gambar

Workshop Guru TIK SMP RSBI – 22 s.d. 29 Maret 2009 – LPMP Jawa Tengah – Hal 14

2. Dreamweaver Dreamweaver adalah software aplikasi desain web visual yang biasa dikenal dengan istilah WYSIWYG — What You See Is What You Get — intinya Anda tidak harus berurusan dengan tag-tag HTML untuk membuat sebuah situs. Macromedia belum lama ini telah mengeluarkan rilis terbaru dari Dreamweaver yaitu Dreamweaver , dengan penambahan beberapa fasilitas baru di dalamnya. Dreamweaver tidak hanya dapat digunakan oleh para desainer web, namun juga dapat digunakan oleh programer untuk membangun halaman internaktif karena Dreamweaver mendukung pula PHP, ColdFusion, ASP.NET dan lain-lain. Dalam kesempatan ini kita akan mengenal penggunaan Dreamweaver sebagai editor HTML visual. Untuk bagian pertama, kita akan mengenal lingkungan kerja dalam Dreamweaver dan membuat halaman web sederhana. 2.1. Lingkungan Kerja Dreamweaver Lihat Gambar 1. Dreamweaver menawarkan dua layout view untuk dijadikan sebagai tampilan kerja saat Anda membuat halaman web. Setelah instalasi, Dreamweaver akan memberikan opsi: Macromedia Dreamweaver Workspace atau Macromedia Dreamweaver 4 Workspace. Anda dapat mengubah-ubah tampilan ini lewat menu preferences, Modify > Preferences > Change Workspace. Pilihan ini tentu saja terserah Anda, pada tutorial ini saya akan menggunakan Dreamweaver Workspace.

Gambar 1. Lingkungan kerja Dreamweaver Insert Panel Berikut ini penjelasan untuk elemen-elemen workspace seperti telah tertera pada Document Toolbar gambar. Document Window adalah tempat di mana Anda dapat membuat halaman web secara visual, kode, atau keduanya. Insert panel adalah tempat Anda dapat memasukan image, Flash movie, table,Document atau elemen lain. Insert panel ini serupa dengan menu Insert pada Window menu bar. Untuk memunculkan panel ini, klik Windows > Insert atau tekan Ctrl-F2. Property Panels Group Inspector berguna untuk melakukan pengeditan pada suatu elemen di Document Window. Document Toolbar berguna untuk mengubah tampilan dari disign/visual view, code view, atau keduanya Property sekaligus. Inspector Selain itu juga untuk memberi titel pada dokumen, melihat tampilan di browser. Panels Group merupakan kumpulan dari panel-panel Dreamweaver . Gambar 1. Area Kerja Dreamweaver Pada bagian ini kita akan membuat halaman web sederhana dengan pemformatan dasar pada teks, link, anchor, dan Page Properties. Gambar 2.1. Area Kerja Dreamweaver

Pada dasarnya Dreamweaver tidak jauh berbeda dengan program pengolah kata dalam memformat teks. Namun terdapat sedikit perbedaan karena Dreamweaver menggunakan HTML. Untuk memformat teks dapat kita lakukan dengan menggunakan Property Inspector. Lihat Gambar 2.

Workshop Guru TIK SMP RSBI – 22 s.d. 29 Maret 2009 – LPMP Jawa Tengah – Hal 15

Gambar 2.2. Property Inspector 2.2. Heading Heading (Gambar 3) digunakan untuk membuat judul dari dokumen atau sub-subjudul berbagai level. Misalnya Anda menggunakan Heading 1 untuk judul, Heading 2 untuk subjudul tingkat pertama, dan sebagainya. Anda juga dapat menggunakan insert panel, pada Insert Panel, klik Tab Text.

Gambar 2.3. Heading 2.3. Paragraf dan Line Break Bila kita menekan Enter pada pengolah kata, maka akan menghasilkan paragraf baru. Demikian pula pada Dreamweaver. Namun paragraf dalam HTML (

) secara default menghasilkan jarak lebih besar daripada jarak antarbaris. Jika kita ingin antarbaris tidak ada jarak, maka kita membutuhkan
di HTML. Untuk berpindah baris dan bukan paragraf kita menggunakan Shift-Enter, atau Insert > Line Breaks. Lihat Gambar 2.4.

Workshop Guru TIK SMP RSBI – 22 s.d. 29 Maret 2009 – LPMP Jawa Tengah – Hal 16

Gambar 2.4. Paragraf dan Line Breaks 2.4. Memformat Teks Dengan Property Inspector Seperti yang sudah kita bahas sebelumnya, Propery Inspector berguna untuk melakukan pengeditan pada sebuah elemen HTML. Kita akan menggunakan Property Inspector ini untuk memformat teks, ukuran, warna, dan perataan paragraf. Untuk memunculkan Property Inspector yaitu dengan Window > Properties atau dengan menekan Ctrl-F3. Anda dapat memilih jenis font sesuai dengan selera Anda, namun terdapat 5 jenis font yang yang umum digunakan untuk halaman web, karena hampir semua komputer memiliki jenis huruf ini: Arial, Times New Roman, Courier New, Georgia, dan Verdana. Untuk mengubah teks yang telah Anda ketik yaitu dengan memilih teks yang ingin diubah, kemudian pilih jenis font yang ingin Anda gunakan. Dalam pilihan font dari drop down Property Inspector terdapat beberapa jenis huruf lain yang dipisahkan dengan koma. Pertama-tama browser akan membaca font pertama untuk ditampilkan di browser, bila font pertama tidak terinstal di komputer maka akan dilanjutkan dengan font kedua, kemudian ketiga, dan seterusnya. Font default adalah Times New Roman. Lihat Gambar 2.5.

Gambar 2.5. Mengubah format huruf

Workshop Guru TIK SMP RSBI – 22 s.d. 29 Maret 2009 – LPMP Jawa Tengah – Hal 17

2.5. Membuat Link dan Target Untuk membuat link antarhalaman, selain diperlukan halaman link sumber—Source Link— juga diperlukan link tujuan—Destination Link. File contoh halaman Web sederhana di atas saya simpan dengan nama file index.html. Halaman ini yang akan menjadi link sumber kita. Mari kita buat halaman baru untuk dilink: Buatlah halaman baru untuk link tujuan, File > New, pada kotak dialog pilih Kategori Dynamic Page, dan Basic Page HTML. Lihat Gambar 2.6. Setelah selesai membuat file baru, kemudian simpanlah file tersebut dengan nama file tentangsaya.html. Pada contoh, saya memasukkan horizontal Rule, Insert > Horizontal Rule untuk memisahkan konten dari halaman tersebut. Kemudian simpan di folder yang sama dengan index.html.

Gambar 2.6. Membuat dokumen baru Pada index.html, pilihlah teks “Profil Sekolah”, kemudian pada Property Inspector ketikan profil.html pada kotak link. Atau gunakan Browse For File untuk memilih file profil.html lewat kotak dialog. Lihat Gambar 2.7. Cek dengan menggunakan browser, bukalah file index.html (Gambar 2.8).

Gambar 2.7. Memasukkan Link

Workshop Guru TIK SMP RSBI – 22 s.d. 29 Maret 2009 – LPMP Jawa Tengah – Hal 18

Gambar 2.8. Tampilan index.html di browser Untuk membuat link ke situs lain, setelah teks dipilih, ketik langsung pada kotak link alamat yang dituju, misalnya http://www.semarang.go.id. (Jangan lupakan http://). 2.6. Page Properties Page Properties adalah fasilitas untuk mengubah properti dasar sebuah dokumen Web, seperti judul halaman, warna-warna link, dsb. Untuk membuka Page Properties klik Modify > Page Properties. Lihat Gambar 12. Title untuk menentukan judul dokumen. Background Image tempat memasukkan gambar sebagai latar belakang. Background menentukan warna latar. Text untuk menentukan warna teks. Links mengubah warna link. Visited Link mengubah warna link yang telah dikunjungi. Active Link mengubah warna link yang sedang diklik. Margin menentukan margin halaman. Semua elemen ini memiliki padanannya di dalam kode HTML, yaitu dalam atribut elemen . Anda dapat melihat tampilannya di browser (Gambar 2.8).

Gambar 2.8. Page Properties Workshop Guru TIK SMP RSBI – 22 s.d. 29 Maret 2009 – LPMP Jawa Tengah – Hal 19

Gambar 2.9. Tampilan akhir profil.html

2.7. Penutup Di Internet terdapat banyak koleksi background untuk situs yang Anda buat, salah satunya adalah free-backgrounds.com.

3. Referensi a. http://ilmukomputer.com b. http://www.master.web.id/mwmag/issue/08/content/tutorial-dreamweaver-1/tutorialdreamweaver-1.html

Workshop Guru TIK SMP RSBI – 22 s.d. 29 Maret 2009 – LPMP Jawa Tengah – Hal 20

Related Documents

Pen Gen Alan Web Design
May 2020 6
Pen Gen Alan Komputer
November 2019 36
Pen Gen Alan
May 2020 24
Edited Pen Gen Alan
July 2020 23
Pen Gen Alan Internet
May 2020 23
Pen Gen Alan
May 2020 25

Copyright © 2024 PDFCOKE.