Tag Dasar dan Format Teks pada Html 11/9/2018 Tag-tag Dasar Html PK&TI 2C (Minggu ke-6) Rr. Artiana Krestianti 11/9/2018 SAP PK&TI 2C Artiana Krestianti
Tag Dasar dan Format Teks pada Html 11/9/2018 Pendahuluan HTML merupakan singkatan dari HyperText Markup Language. Dokumen HTML adalah file text murni yang dapat dibuat dengan editor text sembarang dan dikenal sebagai web page. Untuk mempelajari HTML saat ini tidaklah sulit karena sudah banyak program yang mampu menghasilkan dokumen dalam format HTML, misalnya semua produk Microsoft Office, HotMetal, HotDog, HTMLLed dsb. Bahkan dengan hadirnya Microsoft Frontpage 2000 dan Frontpage XP (experience) untuk membuat dokumen atau web page sudah sangat mudah sekali, karena berbagai kebutuhan yang berhubungan dengan pembuatan web page sudah tersedia seperti component, hyperlink dan sebagainya. Pada kuliah kita yang dipakai adalah editor teks biasa yaitu notepad. 11/9/2018 SAP PK&TI 2C Artiana Krestianti
Pemberian Nama Document Html Tag Dasar dan Format Teks pada Html 11/9/2018 Pemberian Nama Document Html Dalam memberi nama dokumen HTML, pilihlah sembarang nama kemudian tambahkan sebuah ektensi .htm atau .html. Pemberian nama bersifat case sensitive, maksudnya pemberian nama dengan menggunakan case berbeda akan dianggap dokumen yang berbeda. Misalnya latihan1.htm akan beda dengan Latihan1.htm. File yang berakhiran HTM atau HTML ini sama untuk berbagai jenis sistem operasi seperti Linux, Unix, Windows dan sebagainya. 11/9/2018 SAP PK&TI 2C Artiana Krestianti
Tag Dasar dan Format Teks pada Html 11/9/2018 Elemen HTML Dokumen HTML disusun oleh elemen-elemen. Elemen merupakan istilah bagi komponen-komponen dasar pembentuk dokumen HTML. Beberapa contoh elemen adalah : head, body, table, paragraf, list, dan lain-lain. Elemen dapat berupa teks murni, atau bukan teks, atau kedua-nya. 11/9/2018 SAP PK&TI 2C Artiana Krestianti
Definisi Tag <nama tag> ……….. </nama tag> Untuk menandai berbagai elemen dalam suatu dokumen HTML, kita menggunakan tag. Petunjuk menggunakan tag adalah : Tag pada HTML terdiri atas sebuah angle bracket (kurung sudut) kiri, sebuah nama tag, dan sebuah angle bracket (kurung sudut) kanan. Cara penulisan (syntax) nya sebagai berikut : <nama tag> ……….. </nama tag> 11/9/2018 SAP PK&TI 2C
Definisi Tag (lanjutan) Tag Dasar dan Format Teks pada Html 11/9/2018 Definisi Tag (lanjutan) Pada umumnya tag berpasangan. Tag pertama menunjukkan tag awal elemen dan tag kedua menandakan tag akhir elemen. Tag yang menunjukkan akhir elemen diberi garis miring (/). Contoh : <html> ..................... </html> <head> .................... </head> <title> ....................... </title> <body> ..................... </body> 11/9/2018 SAP PK&TI 2C Artiana Krestianti
Definisi Tag (lanjutan) Tag HTML tidak case sensitive. <b> berarti sama dengan <B>. Jika dalam suatu tag ada tag lagi, maka penulisan tag akhir tidak boleh bersilang, harus berurut. Misalkan : <b><I>Huruf Tebal dan Miring<I><b> Ada beberapa elemen yang tidak mengharus-kan tagnya ditulis secara berpasangan, elemen tersebut antara lain adalah : 11/9/2018 SAP PK&TI 2C
Definisi Tag (lanjutan) Tag Dasar dan Format Teks pada Html 11/9/2018 Definisi Tag (lanjutan) Paragraf (paragraph) dengan tag <p> Ganti baris (line break) dengan tag <br> Garis mendatar (horizontal rule) dengan tag <hr> Daftar data (list) dengan tag <li> Sebagai catatan, biasakanlah menulis tag secara berpasangan agar kita mudah mengenali batasan awal dan akhir dari suatu elemen HTML. Selain itu, tag yang berpasangan sangat dianjurkan oleh W3C. 11/9/2018 SAP PK&TI 2C Artiana Krestianti
Elemen dalam Html Secara umum dokumen web dibagi menjadi dua bagian yaitu head dan body. Sehingga setiap dokumen html harus mempunyai pola dasar sebagai berikut : <html> <head> informasi tentang dokumen HTML yang ditampilkan dalam caption browser web. </head> <body> informasi yang ditampilakn dalam windows browser web. </body> </html> 11/9/2018 SAP PK&TI 2C
Tag Dasar dan Format Teks pada Html 11/9/2018 Elemen Dasar Html Elemen dasar HTML terdiri dari beberapa hal : Setiap dokumen html harus diawali dengan menuliskan tag <html> dan tag</html> diakhir dokumen. Tag ini menandai bahwa dokumen ini adalah dokumen HTML. Dalam satu dokumen hanya ada satu elemen html. Elemen head ditandai dengan tag <head> dan diakhiri dengan tag </head>. Bagian ini berisi informasi tentang dokumen HTMLnya. Minimal informasi yang dituliskan dalam elemen ini adalah judul dari dokumen, judul ini akan ditampailkan pada caption browser web, ditandai dengan menggunakan tag <title> dan diakhiri dengan </title>. 11/9/2018 SAP PK&TI 2C Artiana Krestianti
Elemen Dasar Html Elemen body ditandai dengan tag <body> dan diakhiri </body>. Bagian ini merupakan elemen terbesar di dalam dokumen html. Elemen ini berisi isi dokumen yang akan ditampilkan pada windows browser web, meliputi paragraf, grafik, link, tabel dan sebagainya. Untuk hasil yang maksimal, cobalah menuliskan dokumen HTML, kemudian lihatlah hasilnya. Dapat dimulai dengan membuat direktori kerja di drive C misalnya dengan nama latihan kemudian buat lagi sub direktori dengan nama html. Buatlah dokumen HTML dengan menggunakan teks editor notepad dan tampilkanlah hasilnya pada browser internet explorer. 11/9/2018 SAP PK&TI 2C
Persyaratan System Persyaratan systemnya : Sebuah komputer yang siap web. Komputer dengan windows 95/ 98/ NT, Mac atau Unix. Editor teks, notepad atau lainnya. Koneksi ke server web (kalau mungkin koneksi ke internet). Browser web, direkomendasikan Internet Explorer atau Mozilla Firefox atau Google Chrome. 11/9/2018 SAP PK&TI 2C
Tag Dasar dan Format Teks pada Html 11/9/2018 Belajar Html Belajar HTML akan lebih efektif, jika kita sering berlatih dan melihat bagaimana programmer web lain membuat HTML. Apabila anda kagum akan hasil karya programmer web yang mungkin tampilannya sangat menarik di browser web, anda dapat mengetahui penulisan dokumen HTMLnya degan cara klik menu VIEW pada menu bar standard, kemudian pilih SOURCE atau PAGE SOURCE. Hal ini akan membuka sebuah window baru yang memperlihatkan HTML sebenarnya dari page tersebut. Dengan melihat source ini, diharap-kan anda dapat melihat dan mempelajari tehnik untuk menghasilkan halaman web yang menarik tadi. 11/9/2018 SAP PK&TI 2C Artiana Krestianti
Tag Dasar dan Format Teks pada Html 11/9/2018 Tag-tag Dasar Html TAG AWAL KEGUNAAN <html> Mendefinisikan sebuah dokumen HTML <head> Mendefinisikan caption browser web <body> Mendefinisikan isi dokumen <h1> - <h6> Mendefinisikan heading 1 sampai dengan 6 <p> Mendefinisikan sebuah paragraf <br> Menyisipkan line break (ganti baris) <hr> Mendefinisikan sebuah garis mendatar <!--> Mendefinisikan komentar dalam source code 11/9/2018 SAP PK&TI 2C Artiana Krestianti
Tag Dasar dan Format Teks pada Html 11/9/2018 Format Teks Html TAG AWAL KEGUNAAN <b> Mendefinisikan teks yang ditebalkan <big> Mendefinisikan teks yang dibesarkan <small> Mendefinisikan teks yang dikecilkan <strong> <sub> Mendefinisikan teks subscript <sup> Mendefinisikan teks superscript <em> Mendefinisikan teks yang ditekan <i> Mendefinisikan teks yang dimiringkan <u> Menggarisbawahi teks yang ada 11/9/2018 SAP PK&TI 2C Artiana Krestianti
Tag Dasar dan Format Teks pada Html 11/9/2018 Format Teks Html TAG AWAL KEGUNAAN <ins> Mendefinisikan teks yang disisipkan <del> Mendefinisikan teks yang dihapus <strike> Mencoret teks yang ada <pre> Menyiapkan format teks terlebih dahulu <abbr> Mendefinisikan suatu singkatan <acronym> Mendefinisikan suatu akronim <blockquote> Mendefinisikan kutipan panjang <q> Mendefinisikan kutipan pendek 11/9/2018 SAP PK&TI 2C Artiana Krestianti
Tag Dasar dan Format Teks pada Html 11/9/2018 Karakter Html Beberapa karakter mempunyai arti khusus dalam HTML. Jika menginginkan browser web untuk menampilkan karakter-karakter tersebut, kita harus menyisipkan entitas karakter ke dalam source HTML. Entitas karakter mempunyai tiga bagian : Sebuah ampersand (&) Sebuah nama entitas Sebuah nomor entitas (#) Sebuah tanda titik koma (;) 11/9/2018 SAP PK&TI 2C Artiana Krestianti
Karakter Html HASIL KETERANGAN NAMA ENTITAS NOMOR ENTITAS © Copyright © © ® Registered ® ® ™ Trademark ™ Non-breaking space ¡ & Ampersand & Š “ Angle quotation mark « « 11/9/2018 SAP PK&TI 2C
Karakter Html HASIL KETERANGAN NAMA ENTITAS NOMOR ENTITAS “ Angle quotation mark » » " Tanda Kutip " " < Lebih kecil < > Lebih besar = X Tanda kali × × : Tanda bagi &devide; ÷ 11/9/2018 SAP PK&TI 2C
Contoh Tampilan Tag Dasar 11/9/2018 SAP PK&TI 2C
Contoh Program Tag Dasar 11/9/2018 SAP PK&TI 2C
Contoh Tampilan Format Teks 11/9/2018 SAP PK&TI 2C
Contoh Program Format Teks 11/9/2018 SAP PK&TI 2C
Contoh Program Format Teks 11/9/2018 SAP PK&TI 2C
Tag Dasar dan Format Teks pada Html 11/9/2018 TERIMA KASIH 11/9/2018 SAP PK&TI 2C Artiana Krestianti