HTML By kartika puji pangesti Bahasa Pemrograman Untuk Desain Web HTML By kartika puji pangesti
Apa itu hmtl? 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
Yang dapat dilakukan dengan html 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
Tag-tag 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
Bagian utama 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>
Komentar pada 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>
Tag-tag dalam <body> Tag warna latar belakang Tag Heading Tag Paragraf Tag Font Tag Format document
Tag warNa/gambar latar belakang A. Latar Belakang Warna <body bgcolor=#nnnnnn> . . . </body> Script: <html> <head> <title> Penggunaan Latar Belakang Warna </title> </head> <body bgcolor=“#f0f0f0"> <! kode utk background colour> Kami sedang mulai belajar Web Design menggunakan bahasa pemrograman </body> </html>
B. Latar Belakang Gambar <body background=“nama_file_gambar”> B. Latar Belakang Gambar <body background=“nama_file_gambar”> . . . </body> Script: <html> <head> <title> Penggunaan Latar Belakang Gambar </title> </head> <body background="./gambar/picture01.jpg"> <! kode utk background image> Kami sedang mulai belajar belajar Web Design menggunakan bahasa pemrograman </body> </html>
Tag heading 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 paragraf <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">Kami sedang mulai belajar Web Design dengan bahasa pemrograman. Pada awal materi kami diperkenalkan pada konsep dasar Web </p> <p align="left">Saat ini masuk ke materi Dasar-dasar HTML </p> </body> </html>
Tag font 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>
Format dokumen 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>
Selesai -------------------------------------------------------------