Pemrograman WEBPERTEMUAN KE- 1 & 2
Pengertian HTMLHTML atau Hypertext Marksup Language merupakan salah satu format yang digunakan dalampembuatan dokumen dan aplikasi yang berjalan dihalaman web. Sebenarnya, dokumen HTML hanyalah sebuah dokumen teks biasa dan disebut sebagai Markup Language yakni bahasa yang mengandung tanda (tag) tertentu yang digunakan untuk mengatur format tampilan suatudokumen. Simbol markup yang digunakan oleh HTML ditandai dengan tanda lebih kecil ( < ) dantanda lebih besar ( > ).
HTTP atau Hypertext Transfer Protokol merupakan protokol yang digunakan untuk mentransferdata atau document yang berformat HTML dari web server ke browser (Internet Explorer, Netscape Navigator, NeoPlanet, dll). Dengan HTTP inilah yang memungkinkan Anda menjelajahinternet dan melihat halaman web.
Materi bisa diakses di http://www.sinau87.wordpress.com
Pengertian HTML
WEB Server
Diakses dengan menggunakan PCDengan browser Mozila Firefox
Diakses dengan menggunakan AndroidDengan browser Google Crome
Materi bisa diakses di http://www.sinau87.wordpress.com
Pengertian Tag pada HTMLSebagai sebuah bahasa markup, HTML membutuhkan cara untuk memberitahu web browser bagaimana suatu text ditampilkan. Apakah text itu ditulis sebagai sebuah paragraf, list, atausebagai link? Dalam HTML, tanda ini dikenal dengan istilah tag. Hampir semua tag dalam HTML ditulis secara berpasangan, tag pembuka dan tag penutup, dimana objek yang dikenai perintahtag berada di antara tag pembuka dan tag penutup. Objek disini dapat berupa text, gambar, maupun video. Penulisan tag berada di antara dua kurung siku.
Format penulisan tag: objek yang dikenai perintah tag
Contoh
Contohnya jika kita ingin membuat suatu text dalam sebuah paragraf di tulis tebal atau miring, dalam HTML dapat ditulis sebagai berikut:
Ini adalah sebuah paragraf. Hanya kumpulan beberapa kalimat. Paragraf ini terdiri dari3 kalimat.
Open
Materi bisa diakses di http://www.sinau87.wordpress.com
Pengertian Elemen pada HTMLElemen adalah isi dari tag yang berada diantara tag pembuka dan tag penutup.
Contoh elemen:
Ini adalah sebuah paragraf
Dari contoh diatas, Ini adalah sebuah paragraf merupakan elemen dari tag
.
Materi bisa diakses di http://www.sinau87.wordpress.com
Pengertian Atribut pada HTMLAtribut adalah informasi tambahan yang diberikan kepada tag. Informasi ini bisa berupa instruksiuntuk warna dari text, besar huruf dari text, dll.
Setiap atribut memiliki pasangan nama dan nilai (value), dan ditulis dengan name=”value”. Value diapit tanda kutip, boleh tanda kutip satu („) atau dua (“)
Contoh attribut :
Tag
Atrribute
Nilai (value) Atrribute
Materi bisa diakses di http://www.sinau87.wordpress.com
Struktur dasar HTML
Struktur Dasar HTML
Halo Dunia HTML
Isi Website
Judul Website
Doctype HTML5
Elemen HTML: html, title, head , body, Open
Materi bisa diakses di http://www.sinau87.wordpress.com
SOAL-SOAL LATIHANBuatlah dokumen html dengan mana file latihan2.htmlKemudian simpan di folder kamu masing-masing yang ada di local disk D: dengan format nama folder Nama-KelasJudul web : SELAMAT DATANG DI WEBSITE SAYAIsi web : Hello world, ini adalah pelajaran pertama web saya
Praktekan di komputer kamu masing-masing
Materi bisa diakses di http://www.sinau87.wordpress.com
Elemen HEADBagian Head sebenarnya tidak harus ada pada dokumen HTML, tetapi pemakaian head yang benar akan meningkatkan kegunaan suatu dokumen HTML. Isi bagian head - kecuali juduldokumen - tidak akan terlihat oleh pembaca dokumen tersebut.
Elemen-elemen pada bagian head akan mengerjakan tugas-tugas sebagai berikut :
§ Menyediakan judul dokumen
§ Menjembatani hubungan antar dokumen
§ Memberitahu browser untuk membuat form pencarian
§ Menyediakan metode untuk mengirim pesan ke tipe browser
Materi bisa diakses di http://www.sinau87.wordpress.com
Elemen BodyBODY digunakan mendefinisikan teks beserta formatnya yang hendak ditampilkan sebagai isihalaman web.
ATRIBUTUT FUNGSI
alinkdigunakan untuk mengatur warna active link dokumen dengan default merah.
background Digunakan untuk mengatur latar belakang dengan gambar/image.
bgcolorDigunakan untuk mengatur warna latar belakang dokumen, dengan warna putih sebagai default-nya.
bgpropertiesJika nilai atribut ini diisi “FIXED”, maka gambar latar belakang tidakikut tergulung
leftmargin Batas kiri dokumen
linkUntuk mengatur warna link dokumen dengan warna biru sebagai warna default
textDigunakan untuk mengatur warna teks dokumen, dengan warna hitam sebagai warna default.
topmargin Menentukan batas atas
vlink Untuk mengatur warna visited link dokumen dengan default ungu
Materi bisa diakses di http://www.sinau87.wordpress.com
Elemen Body
Materi bisa diakses di http://www.sinau87.wordpress.com
Code WarnaPengaturan warna dalam dokumen HTML menggunakan mode kombinasi RGB (red, green, blue). Setiap warna ditampilkan dalam dua digit nilai heksadesimal (0, 1, 2, ..., F). Setiap bagian duadigit kode menunjukkan banyaknya intensitas dari kombinasi warna merah, hijau dan biru. Misalnya untuk warna kuning, dibuat dengan pencampuran warna sebagai berikut:
Berarti untuk warna kuning dapat dibuat dengan kode #ffff00.
Red Green Blue
FF FF 00
Materi bisa diakses di http://www.sinau87.wordpress.com
Code WarnaDisamping itu, pembuatan warna dapat juga dibuat dengan langsung menggunakan nama warnadalam Bahasa inggris, misalnya kuning=”yellow”.
Berikut ini warna-warna yang dapat digunakan dalam halaman HTML.
WARNA NILA WARNA NILAI
Black #000000 Silver #C0C0C0
Maroon #800000 Red #FF0000
Green #008000 Lime #00FF00
Olive #808000 Yellow #FFFF00
Navy #000080 Blue #0000FF
Purple #800080 Fuchsia #FF00FF
Teal #008080 Aqua #00FFFF
Gray #808080 White #FFFFFF
Open
Materi bisa diakses di http://www.sinau87.wordpress.com
KomentarKomentar adalah bagian dari kode HTML yang diabaikan oleh browser. Kegunaan komentardalam kode HTML adalah sebagai keterangan. Sebuah komentar diawali dengan .
Open
Materi bisa diakses di http://www.sinau87.wordpress.com
Format Text pada HTMLText Style pada HTML
Text style adalah sebuah fungsi yang digunakan untuk memberikan style (gaya) penulisan sebuahteks pada isi HTML. Text style ini biasanya digunakan untuk sebuah halaman web yang isinyaberupa informasi teks, karena pada web yang memiliki fungsi untuk entertaiment hanyamenggunakan sedikit teks.
Berdasarkan maksud dari style tersebut, ada 2 jenis text style yang dapat digunakan, yaituPhysical Style dan Logical Style.
Materi bisa diakses di http://www.sinau87.wordpress.com
Paragraf dan HeadingTag
digunakan untuk membuat paragraph baru.
Contoh:
Ini adalah Paragraf
Tag Heading adalah sebuah code HTM yang berfungsi untuk mengubah tulisan. Tag Heading biasa di gunakan untuk membuat judul pada sebuah artikel atau dokument. Spesifikasi Tag Heading mempunyai berbagai tingkatan yang biasa di sebut H1, H2, H3, H4, H5 dan H6 yang masing masing mempunyai fungsi yang berbeda.
Contoh
Ini adalah Heading (H1)
Materi bisa diakses di http://www.sinau87.wordpress.com
Physical StylePhysical style adalah style yang digunakan untuk melakukan text formatting secara fisik tanpaadanya maksud tertentu dari penggunaannya. Jadi, style ini digunakan hanya untukmemperlihatkan bahwa sebuah teks tidak datar sehingga tidak membosankan. Contoh tag-tag dari physical style antara lain sebagai berikut :
Tag Nama Fungsi
Bold Menebalkan font
Big Menambah ukuran font
Italic Tampilan miring pada font
Strike Mencoret Font
Small Mengurangi ukuran font
Teletype Teks teletype
Underline Memberikan garis bawah
Subscript Perpangkatan bawah
Superscript Perpangkatan atas
Materi bisa diakses di http://www.sinau87.wordpress.com
Text Physical
Teks ini ukuran normal
b: (bold) Menampilkan Tebal
big: Menambah ukuran font
i: (italic) Tampilan miring
s: (strike) Teks dicoret
small: Mengurangi ukuran font
sub: (subscript) Unsur Kimia H2O
sup: (superscript) Luas tanah 100 m2
tt: (teletype) Teks teletype
u: (underline) Garis bawah
Open
Materi bisa diakses di http://www.sinau87.wordpress.com
Logical StyleBerbeda dengan physical style, logical style tidak melakukan text formatting secara fisik, tetapimelakukan text formatting secara logic berdasarkan makna atau maksud dari sebuah teks. Logical style mengisyaratkan adanya arti tertentu dari sebuah teks. Untuk lebih memahami, berikut adalah tag-tag dalam Logical Style Tag Nama Fungsi
abbreviation Definisi singkatan
< acronym > acronym Definisi akronim
< bdo > bidirectional override
Mendefinisikan arah teks
center Ditengah
cite Referensi sumber
code Script program
comment Menambahkan sebuah komentar dalam markup
definition Untuk menjelaskan istilah
emphasis Digunakan untuk penekanan makna
Penambahan konten dari sebelumnya
< blockquote> blockquote Mendefinisikan sebuah kutipan panjang. Pada saat browser teks akan tampil menjorok ke dalam.
strong Penekanan pada teks
variable Memdefinisikan variabel
Open
Materi bisa diakses di http://www.sinau87.wordpress.com
Elemen Karakter KhususAda beberapa karakter yang berfungsi sebagai tag dalam html. Misalnya saja tanda lebih kecil () tanda kutip dua("). Dalam kode html karakter-karakter itu biasanyaberfungsi sebagai tag(tidak akan tampil di browser).
Karakter(Hasil) Kode(Entitas) Keterangan
" " tanda petik dua
< < tanda kurang dari
> > tanda lebih dari
spasi tanda spasi
& & tanda dan
© © tanda copyright
Open
Materi bisa diakses di http://www.sinau87.wordpress.com
Top Related