140 likes | 272 Views
Bahasa Pemrograman Untuk Desain Web. HTML By kartika puji pangesti. Bahasa yang digunakan untuk menulis halaman web statis. Mempunyai ekstensi .htm/.html Tersusun atas tag-tag yang digunakan untuk menentukan tampilan dokumen HTML yang diterjemahkan oleh browser.
E N D
Bahasa Pemrograman Untuk Desain Web HTMLBy kartika puji pangesti
Bahasa yang digunakan untuk menulis halaman web statis. Mempunyai ekstensi .htm/.html Tersusun atas tag-tag yang digunakan untuk menentukan tampilan dokumen HTML yang diterjemahkan oleh browser. HTML merupakan bahasa pemrograman yang fleksible, dapat disisipi/digabungkan dengan bahasa pemrograman lain, seperti PHP, ASP, Javascript, dll Apa itu hmtl?
Mengontrol tampilan dari web page dan contentnya Mempublikasi dokumen secara olnline sehingga dapat diakses Membuat online form yang dapat digunakan untuk menangani pendaftaran, transaksi online Menambahkan objek-objek seperti image, audio, video, dll Yang dapat dilakukan dengan html
Tag HTML ditandai dengan symbol ‘<‘ (tag awal) ‘>’ (tag akhir) ‘<namatag> ‘ sebagai tag pembuka ‘</namatag>’ sebagai tag penutup Contoh : <body>.....</body> tag pembentuk isi website Tag-tag html
HTML terdiri dari 3 bagian utama yang didefinisikan dengan 3 tag yaitu • <html>.....</html> Pada setiap penulisan HTML harus diawali dan diakhir dengan tag ini. Tag ini berfungsi untuk membentuk tampilan website secara keseluruhan • <head>.....</head> Ditulis setelah tag pembuka html. Merupakan diskripsi dokumen. Biasanya berfungsi untuk menulis judul dokumen atau kode-kode tambahan seperti CSS, javascript, dll • <body>.....</body> Merupakan tag body/isi dari dokumen html. Tag-tag tersebut tersusun sebagai berikut <html> <head> Diskripsi Dokumen </head> <body> Isi Dokumen </body? </html> Bagian utama html
Format : <! ----------- > • Fungsi • Memberi nama bagian kode dalam dokumen • Mendiskripsikan tujuan pengkodean tertentu dalam file • Memberi nama pengarang • Memberi tanggal pembuatan • Memberi nomor versi • Memberi informasi hak cipta pemilik kode • Contoh Penggunaan <html> <head> Diskripsi Dokumen </head> <! Body : isi dari dokumen, pembangun isi website > <body> Isi Dokumen </body? </html> Komentar pada html
Tag warna latar belakang Tag Heading Tag Paragraf Tag Font Tag Format document Tag-tag dalam <body>
A. Latar Belakang Warna <body bgcolor=#nnnnnn> . . . </body> Script: <html> <head> <title> PenggunaanLatarBelakangWarna </title> </head> <body bgcolor=“#f0f0f0"> <! kode utk background colour> KamisedangmulaibelajarWeb Design menggunakan bahasa pemrograman </body> </html> Tag warNa/gambar latar belakang
B. Latar Belakang Gambar <body background=“nama_file_gambar”> . . . </body> Script: <html> <head> <title> PenggunaanLatarBelakangGambar </title> </head> <body background="./gambar/picture01.jpg"> <! kode utk background image> KamisedangmulaibelajarbelajarWeb Design menggunakan bahasa pemrograman </body> </html>
Untuk menulis judul atau sub judul dalam website <h1 [align=”left”|”center”|”right”]> . . . </h1> <h2 [align=”left”|”center”|”right”]> . . . </h2> ... <h6 [align=”left”|”center”|”right”]> . . . </h6> Script: <html> <head> <title> Heading </title> </head> <body> <! Judul dan sub judul website> <h1 align="center"> Heading 1: Materi HTML </h1> <h2 align="center"> Heading 2: Materi HTML 1</h2> <h3 align="center"> Heading 3: Materi HTML 2</h3> <h4 align="center"> Heading 4: Materi HTML 3</h4> <h5 align="center"> Heading 5: Materi HTML 4</h5> <h6 align="center"> Heading 6: Materi HTML 5</h6> </body> </html> Tag heading
<p [align=”left”|”center”|”right”]> . . . </p> Script: <html> <head> <title> Paragraf </title> </head> <body> <h2 align="center"> Materi HTML </h2> <! Kode untuk paragraf > <p align="right">KamisedangmulaibelajarWeb Design dengan bahasa pemrograman. Padaawalmaterikamidiperkenalkanpadakonsepdasar Web </p> <p align="left">SaatinimasukkemateriDasar-dasar HTML </p> </body> </html> Tag paragraf
Ditulis di dekat kata atau kalimat yang dituju Ukuran font <font size=“n”> . . . </font> Jenis font <font size=“n” face=“jenis_font”> . . . </font> Warna font <font size=“n” face=“jenis_font” color=“warna”> . . . </font> Tag font
Ditulis di sebelah kata atau kalimat yang dituju Bold: <b> . . .</b> Emphasized: <em> . . . </em> Italic: <i> . . . </i> Superscript: <sup> . . .</sup> Subscripted: <sub> . . . </sub> Struck trough: <del> . . . </del> Format dokumen
Selesai -------------------------------------------------------------