Internet Infrastruktur
Teknologi Client SideClient Side 1.HTML 2.CSS 3.Java Script 4.Apllet 5.Dll… Server SideServer Side 1.PHP 2.ASP 3.ASP.net 4.JSP 5.Servlet 6.Dll…
HTML (HyperText Markup Language) HTML (Hypertext Markup Language) adalah salah satu script Markup Language untuk membangun aplikasi Web.HTML (Hypertext Markup Language) adalah salah satu script Markup Language untuk membangun aplikasi Web. Markup Language sendiri adalah bahasa penandaan (markup) yang digunakan untuk memberi ciri khas pada sebuah dokumen atau teks yang ingin ditonjolkan.Markup Language sendiri adalah bahasa penandaan (markup) yang digunakan untuk memberi ciri khas pada sebuah dokumen atau teks yang ingin ditonjolkan. Pemberian tanda itu dilakukan dengan cara meletakkan tag diantara dokumen atau teks tersebut.Pemberian tanda itu dilakukan dengan cara meletakkan tag diantara dokumen atau teks tersebut.
Tag Command HTML biasanya disebut TAG. TAG digunakan untuk menentukan tampilan dari dokumen HTML.Command HTML biasanya disebut TAG. TAG digunakan untuk menentukan tampilan dari dokumen HTML. Penulisan Tag : Contoh : <HTML> </HTML>
Penulisan Tag Bentuk dari tag HTML sebagai berikut: Contoh : Element - nama tag Attribute - atribut dari tag Value - nilai dari atribut.
Latihan 1 Contoh penulisan kode HTML yang paling sederhana <html> Saya baru belajar HTML, HTML = Hypertext Markup Language, Saya ingin menjadi Web Programmer, Untuk menjadi Web Programmer saya harus tahu HTML, HTML merupakan salah satu bahasa Markup, Bahasa Markup menggunakan Tag sebagai commandnya, </html>
Struktur Dokumen HTML
HTMLHTML HeadHead – … – … TitleTitle – … – … BodyBody – … – … ParagrafParagraf – … – … Line BreakLine Break – – HeadingHeading – … – … PenggarisPenggaris – –
Latihan 2 <html><head> Selamat Datang di HTML Selamat Datang di HTML </head> Saya baru belajar HTML, HTML = Hypertext Markup Language, Saya ingin menjadi Web Programmer, Untuk menjadi Web Programmer saya harus tahu HTML, HTML merupakan salah satu bahasa Markup, Bahasa Markup menggunakan Tag sebagai commandnya, </body></html>
PERTEMUAN-2
List Item (LI) List item di gunakan untuk mengelompokkan data baik berurutan (ordered list) maupun yang tidak berurutan (unordered list).List item di gunakan untuk mengelompokkan data baik berurutan (ordered list) maupun yang tidak berurutan (unordered list).
Unordered List (Bullet) TagAttributeValueDescription TYPESQUAREBullet Kotak DISCBullet Titik CIRCLEBullet Lingkaran Contoh : Latih 6
Ordered List (Numbering) TagAttributeValueDescription TYPEI i A aUpper Roman Lower Roman Upercase Lowercase STARTnBegin Number Contoh : Latih 7
Definition List Definition List terdiri diapit oleh tag … dan tag menentukan definition term serta tag menentukan definition itu sendiri.Definition List terdiri diapit oleh tag … dan tag menentukan definition term serta tag menentukan definition itu sendiri. Contoh : Latih 8
FONT Dengan tag kita bisa menentukan format tampilan font dalam document HTML seperti color, size, style dan lainya.Dengan tag kita bisa menentukan format tampilan font dalam document HTML seperti color, size, style dan lainya. AttributeDescription colorUntuk menentukan warna font, bisa menggunakan nama font atau hexadecimal (# #ffffff) sizeUntuk menentukan ukuran dari font faceUntuk menentukan jenis font biasanya dalam satu list ada beberapa font dan akan di baca mulai dari yang paling kiri.
COLOR Color merupakan attribute yang bisa ditambahkan pada beberapa element seperti body, font, link dan lainya. Color dibagi dalam tiga ketegori warna primer yaitu red, green dan blue. Masing-masing color didefinisikan dalam dua digit hexadecimal number.Color merupakan attribute yang bisa ditambahkan pada beberapa element seperti body, font, link dan lainya. Color dibagi dalam tiga ketegori warna primer yaitu red, green dan blue. Masing-masing color didefinisikan dalam dua digit hexadecimal number. #RRGGBB.#RRGGBB. HexadecimalColor #FF0000 Red #00FF00 Green #0000FF Blue # Black #FFFFFF White
Alignment Align attribute digunakan untuk menentukan perataan object dalam document HTML baik berupa text, object, image, paragraph, division dan lain-lain.Align attribute digunakan untuk menentukan perataan object dalam document HTML baik berupa text, object, image, paragraph, division dan lain-lain. ValueDescription LeftRata kiri Right Rata kanan CenterRata tengah JustifyRata kanan kiri
:: Masih Belajar HTML Nih :: Latihan Ke-9 Tentang Cinta Ketika cinta datang... dia menyapamu dengan penuh keindahan cinta kan bangunkanmu dari mimpi burukmu cinta kan tidurkan kamu kembali jika kau belum puas dengan mimpi 2 mu lalu dia temani kamu dalam mimpi indahmu... Adi Area
Quotes / Indenatasi Untuk membuat indentasi paragraph kita bisa menggunakan BLOCKQUOTE, untuk indentasi pendek anda bisa gunakan element Q.Untuk membuat indentasi paragraph kita bisa menggunakan BLOCKQUOTE, untuk indentasi pendek anda bisa gunakan element Q. Contoh : Latih 10
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.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 : Latih 12
Preformatted Text Tag PRE digunakan untuk menampilkan text sesuai dengan format aslinya.Tag PRE digunakan untuk menampilkan text sesuai dengan format aslinya. Contoh : Latih 11
Image Untuk memasukkan image kedalam halaman web, gunakan Tag img. Contoh : AttributeDescription AlignUntuk menentukan posisi gambar widthUntuk menentukan panjang gambar heightUntuk menentukan tinggi gambar Contoh : Latih 15
Marquee Tag Marquee digunakan untuk membuat tulisan/ objek bergerak. Contoh : <marquee>Stikom-Bali</marquee> Maka tulisan Stikom-Bali akan bergerak. AttributeDescription directionUntuk menentukan arah gerakan (up, down, left, right) scrolldelayUntuk menentukan waktu delay gerakan bgcolorUntuk menentukan warna background dari marquee Contoh : Latih 16
Hyperlink Link atau hyperlink memungkinkan para pengguna halaman web dapat melompat ke dan dari halaman ke halaman dalam web. Tag yang digunakan untuk link dalam web adalah tag.Link atau hyperlink memungkinkan para pengguna halaman web dapat melompat ke dan dari halaman ke halaman dalam web. Tag yang digunakan untuk link dalam web adalah tag. Alamat link bisa dikategorikan menjadi 2 yaitu : Absolute Address, merupakan full internet address (URL) yang meliputi protocol, network location dan path dan nama file.Absolute Address, merupakan full internet address (URL) yang meliputi protocol, network location dan path dan nama file. Contoh: http :// Relatif Address, URL yang tidak menyebutkan protocol dan network locationya (hanya path dan nama filenya).Relatif Address, URL yang tidak menyebutkan protocol dan network locationya (hanya path dan nama filenya).
Penulisan Tag untuk melakukan link : Text Link Text Link Anchor tag untuk menentukan hyperlink dalam dokument HTML. Href property digunakan untuk menentukan tujuan dari hyperlink tersebut.Anchor tag untuk menentukan hyperlink dalam dokument HTML. Href property digunakan untuk menentukan tujuan dari hyperlink tersebut. Contoh : Text Link Text Link Contoh : Latih 13
Link ke Section tertentu dalam Document Untuk membuat link ke section tertentu dalam satu dokumen gunakan property name untuk membuat nama tujuan dari link.Untuk membuat link ke section tertentu dalam satu dokumen gunakan property name untuk membuat nama tujuan dari link. Syntax name anchor:Syntax name anchor: Judul Topik Judul Topik untuk membuat link ke name :untuk membuat link ke name : Menuju ke topic nama Menuju ke topic nama Contoh : Latih 14
Link Ke bagian tertentu Document Lain Untuk membuat link ke bagian tertentu dokumen lain anda bisa gunakan anchor name di document yang menjadi tujuan hyperlink.Untuk membuat link ke bagian tertentu dokumen lain anda bisa gunakan anchor name di document yang menjadi tujuan hyperlink. Contoh :Contoh : Menuju ke topic nama di dokumen latih_1.htm Menuju ke topic nama di dokumen latih_1.htm
Table Semua table dimulai dengan tag perintah dan berhenti dengan tag perintah.Semua table dimulai dengan tag perintah dan berhenti dengan tag perintah. Baris dan kolom dalam table dapat dibuat dengan tag perintah (table row) untuk membuat baris, sedangkan tag perintah (table detail) untuk membuat kolom.Baris dan kolom dalam table dapat dibuat dengan tag perintah (table row) untuk membuat baris, sedangkan tag perintah (table detail) untuk membuat kolom. Tag perintah digunakan untuk menambah header pada table.Tag perintah digunakan untuk menambah header pada table.
Kode Judul Pengarang BK001 Membangun Aplikasi M. Syafii BK002 Pemrograman Internet Ady Wicaksono Contoh : Latih 17
Merge Cell / Penggabungan Cell Untuk menggabungkan dua atau beberapa cell dalam table digunakan atribut colspan dan rowspan yang dimiliki oleh Tag. Atribut colspan untuk merge column dan rowspan untuk merge baris.Untuk menggabungkan dua atau beberapa cell dalam table digunakan atribut colspan dan rowspan yang dimiliki oleh Tag. Atribut colspan untuk merge column dan rowspan untuk merge baris. Contoh : Latih 19 Contoh : Latih 18
FORM Form menyediakan sebuah metode yang efisien dan konsisten untuk mengumpulkan informasi.Form menyediakan sebuah metode yang efisien dan konsisten untuk mengumpulkan informasi. Tag digunakan untuk membuat form dalam dokumen HTML.Tag digunakan untuk membuat form dalam dokumen HTML. AttributeDescription ACCEPT Mendefinisikan MIME yang di izinkan oleh server yang memuat script untuk memproses form. Syntax: ACCEPT=”Internet Media Type” METHOD Menentukan bagaimana data akan di kirim ke server. GET – data akan di kirim dengan menggunakan query string pada URL. POST – data akan di kirim ke server sebagai block data ke script. Syntax: METHOD=”POST|GET” ACTION Menentukan lokasi dari script yang akan memproses data dari form Syntax: ACTION=”URL”
HTML Input Element Pada saat membuat form, kita bisa meletakkan kontrol-kontrol pada form untuk inputan dari user.Pada saat membuat form, kita bisa meletakkan kontrol-kontrol pada form untuk inputan dari user. Semua kontrol biasanya di letakkan di antara tag tapi juga bisa meletakkan kontrol diluar tag tersebut.Semua kontrol biasanya di letakkan di antara tag tapi juga bisa meletakkan kontrol diluar tag tersebut. Untuk menambahkan kontrol gunakan tag.Untuk menambahkan kontrol gunakan tag.
TextText Input type=“text“ CheckboxCheckbox Input type=“checkbox“ RadioRadio Input type=“radio“ TextAreaTextArea tag tag ComboBox / List Box (Selection)ComboBox / List Box (Selection) Tag digunakan untuk membuat komponen combobox, sementara untuk item dari combobox menggunakan tag. ButtonButton Input type=“button”