PEMROGAMAN WEB HTML Introduction What is HTML l

PEMROGAMAN WEB HTML Introduction

What is HTML? l l l HTML adalah bahasa untuk mendeskripsikan web pages. HTML singkatan dari Hyper Text Markup Language HTML adalah markup language – – A markup language is a set of markup tags HTML uses markup tags to describe web pages

HTML Tags l l l HTML markup tags biasa disebut HTML tags adalah kata kunci yang dikelilingi oleh angle brackets <html> HTML tags biasanya berpsangan seperti dan Tag pertama disebut start tag, dan tag kedua disebut end tag Start dan end tags juga disebut opening tags dan closing tags.

HTML Element l l l HTML element dimulai dengan start tag HTML element diakhiri dengan end tag The element adalah semua isi yang berada diantara start dan end tag Beberapa HTML elements hanya content kosong Beberapa HTML elements tidak memiliki end tag Catatan: start tag dapat memiliki informasi tambahan (attributes)

Atribut Tag l l l Tag dapat memiliki atribut Memberikan informasi tambahan Contoh - align, bgcolor, text, link, id, class, name

Nested HTML l l Kebanyakan HTML elements dapat di “nested” (dapat berisi HTML element yang lain). Kebanyakan HTML documents dibuat dengan nested HTML elements

Empty HTML Elements l l l HTML elements tanpa isi disebut empty elements. Empty elements tidak memiliki end tag. adalah empty element tanpa closing tag. Adding a slash to the start tag, like , is the proper way of closing empty elements, accepted by HTML, XHTML and XML

HTML Documents - Web Pages l l HTML documents mendeskripsikan web pages HTML documents berisi HTML tags and plain text HTML documents disebut juga halaman web Tujuan web browsers (seperti Internet Explorer) untuk membaca HTML dan menampilkannya manjadi halaman web. – Browser tidak menampilkan HTML tags, tapi menggunakannya untuk mengintpretasikan isi dari halaman

What Do You Need? l HTML Editor – – l Notepad Front. Page, etc Browser – – – Mozilla Firefox Opera IE

HTM or HTML Extension? l l Untuk menyimpan file html dapat menggunakan. htm atau. html extension. . htm digunakan karena software versi lama tidak menerima extensi lebih dari 3 huruf

HTML Headings l Headings ditulis dengan <h 1> to <h 6> tags. – – l <h 1> heading terbesar. <h 6> heading terkecil. Note: Browsers automatically adds an empty line before and after headings

Headings

HTML Paragraphs l l l Paragraf ditulis dengan tag. Kebanyakan browsers akan menampilkan HTML dengan benar walaupun end tag tak ditulis. Contoh dibawah ini akan bekerja dengan baik di kebanyakan browsers, tetapi jangan dibiasakan. Forgetting the end tag can produce unexpected results or errors. Note: Future version of HTML will not allow you to skip end tags

Paragraphs This is a paragraph This is another paragraph This is a paragraph This is another paragraph

Problem with Paragraph l l Mengabaikan kode spasi lebih dari 1 Bagaimana menampilkan kode sintax like if($i % 2 == 0) { echo “even” }

HTML Line Breaks l l l Gunakan tag jika ingin membuat baris baru (a new line) tanpa membuat paragraf baru tag adalah empty tag. Tidak memiliki end tag seperti . Walaupun dapat bekerja di semua browser, tulislah agar kode bertahan di versi selanjutnya

Line Breaks My favorite sports are : Soccer Baseball Basketball This is a para graph with line breaks

Blockquote l l The <blockquote> tag specifies a section that is quoted from another source. Browsers usually display indent <blockquote> elements.

Blockquote <blockquote cite="http: //www. worldwildlife. org/who/index. ht ml"> For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization</blockquote>

HTML Formatting Tags l l l HTML menggunakan tag dan untuk formatting output, seperti bold atau italic text. HTML tag ini disebut formatting tags Output examples : – – – This text is bold This text is italic This is subscript and superscript

Text Formatting Tags

HTML Fonts l l Dengan tag dapat diatur jenis dan ukuran font yang ditampilkan The Tag Should NOT be Used – l The World Wide Web Consortium (W 3 C) has removed the tag from its recommendations. Untuk versi selanjutnya HTML, CSS akan digunakan untuk pengaturan dan formatting di halaman web

Fonts I'm Verdana Using size=6 My color is yellow

Character Entity l l Berberapa karakter seperti “<“ memiliki makna khusus bila di HTML, sehingga tak dapat digunakan langsung Maka diperlukan karakter entity

Entity Character Table

Tips Menulis Tag Gunakan huruf kecil semua (sesuai dengan rekomendasi W 3 C l Selalu isi nilai atribut yang diisikan l Jika menggunakan nested tags tulis seperti ini <itu><ini>tulisan</ini></itu> Jangan <itu><ini>tulisan</itu></ini> l

Tag Komentar l l Adakalanya diperlukan penulisan untuk menjelaskan suatu kode. Komentar adalah bagian yang dari kode yang tidak dieksekusi.

Tag Komentar

Tag Horizontal Line l <hr> elemen digunakan untuk memisahkan konten (atau mendefinisikan perubahan) dalam sebuah halaman HTML.

Tag Horizontal Line

Tag List l l <ol> tag digunakan untuk ordered list dapat berupa angka atau alfabet Gunakan <li> tag untuk menuliskan isi dari list.

Tag List

Tag List l l <ul> tag digunakan untuk menuliskan unordered (bulleted) list. Gunakan <li> tag untuk menuliskan isi dari list.

Tag List

Tag Image l l <Img> tag mendefinisikan sebuah gambar di halaman HTML. <Img> tag memiliki dua atribut yang diperlukan: src dan alt.

Tag Image l l Catatan: Gambar tidak secara teknis dimasukkan ke dalam halaman HTML, gambar terkait (link) dengan halaman HTML. <Img> tag menciptakan ruang untuk gambar direferensikan. Tip: Untuk menghubungkan gambar ke dokumen lain, sarang (nested) <img> tag di dalam tag <a>.

Tag Image

Tag Table l l l <Table> mendefinisikan sebuah tabel HTML. Tabel HTML terdiri dari <table> elemen dan satu atau lebih <tr>, <th>, dan <td> elemen. <Tr> elemen mendefinisikan baris tabel, yang <th> elemen mendefinisikan header tabel, dan <td> elemen mendefinisikan sel tabel.