Hypertext Markup Language (HTML)

Slides:



Advertisements
Presentasi serupa
Matakuliah Pengenalan Internet
Advertisements

HTML.
HTML Hyper Text Markup Language
Pemrograman Web 1Humisar Hasugian, S.Kom 1 Pengenalan HTML HTML • Hypertext Markup Language merupakan standard bahasa yang digunakan untuk menampilkan.
Pengembangan Web Pertemuan 2 HTML Basic (Text Formating, Link & Frame)
STMIK PPKIA Pradnya Paramita
DASAR HTML Marina Azizah. Struktur Dokumen HTML Dokumen HTML bisa di bagi mejadi tiga bagian utama: HTML Setiap dokumen HTML harus di awali dan di tutup.
LAYANAN BERBASIS APLIKASI WEB Pertemuan I Budi Arifitama.
HTML.
PEMROGRAMAN BERBASIS WEB
Bahasa HTML Dasar.
HTML (Hypertext Markup Language)
Pemrograman Web/TI/ AK /2 sks
Pemrograman Berbasi Web Session 2
HTML Basic.
HTML (Hypertext Markup Language)
HTML Achmad Yasid,SKom. HTML Singkatan dari HyperText Markup Language adalah bahasa yang menjelaskan bagaimana suatu teks, video, grafik, animasi dan.
Pemrograman Web HTML (1) Andy Haryoko, ST.
HTML PEMROGRAMAN INTERNET.
BASIC TAG Belajar HTML COBA COBA 1 HASILNYA STRUKTUR HTML HTML Setiap document HTML harus di awali dan di tutup dengan tag HTML HEAD Bagian header dari.
PENULISAN DENGAN HTML (Nelly Sofi). Peng. Komp & TI 2C2 MENGENAI PENULISAN HTML Browser HTML menginterpretasikan satu atau beberapa space yang berdekatan.
Atribut dalam Body Atribut dan contoh penulisan Fungsi
ADD-ON Dasar HTML.
CSS Eksternal & Style Elemen
Pertemuan 2 : HTML.
Pertemuan 2 1.  Bahasa yang digunakan untuk menampilkan informasi pd halaman web.  bahasa ini menggunakan tanda (markup) untuk menandai perintah- perintahnya.
Dasar-dasar HTML Mengenal HTML
HTML singkatan dari HyperText Markup Language menentukan tampilan suatu teks dan tingkat kepentingan dari teks tersebut dalam suatu dokumen. Software.
S1 Teknik Informatika - Unijoyo
Pengantar Web Design.
Desain Web dengan Tag HTML
IRAWATI, S.Kom.,MT. PEMROGRAMAN WEB
STMIK PPKIA Pradnya Paramita Pemrograman berbasis Web
WEB DESIGN Materi Pelajaran TIK Kelas XI SMA NEGERI 9 MALANG.
PERTEMUAN 2 HTML (Lanjutan).
WEB 1 (HTML) STMIK A. Yani.
Tentang HTML HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web dan HTML kini merupakan standar Internet yang saat ini.
HTML.
Komputer aplikasi it-I (html)
HTML (cont.) (Devi Indriani).
PENULISAN DENGAN HTML (Sindy Nova).
HTML.
Komputer aplikasi it-I (html)
Modul 2 : Dasar-dasar HTML (1)
Pemrograman Web/TI/ AK /2 sks
INTERNET (Praktikum) STMIK “BINA NUSANTARA JAYA”
MENDESAIN WEB SMK Negeri 1 Pekanbaru.
Internet dan Web By : Lisda Juliana P..
S1 Teknik Informatika - Unijoyo
PENULISAN DENGAN HTML.
Pemrograman Berbasis WEB
Pemrograman Berorientasi Platform
Pemrograman Berorientasi Platform (IN315B)
Pemrograman Basis Data Berbasis Web
Internet dan Web Ecking Mendrofha.
Pertemuan 2 HTML Basic (Text Formating, Link & Frame)
LPIA Cileungsi Team Div-Kom ‘10
Dasar HTML Hypertext Markup Language Dasar HTML.
Darmawan satyananda Mathematics department State university of malang
Pengenalan HTML HTML Hypertext Markup Language merupakan standard bahasa yang digunakan untuk menampilkan dokumen web Untuk membuat dokumen web yang bisa.
Pemrograman Web/TI/ AK /2 sks
Tag Dasar dan Format Teks pada Html
STMIK PPKIA Pradnya Paramita Pemrograman berbasis Web
Enumerasi, Images & Table
PENULISAN DENGAN HTML.
Pengenalan HTML Cahaya Jatmoko HP/WA
Pertemuan 2 HTML Basic (Text Formating, Link & Frame)
Pertemuan 2 HTML Basic (Text Formating, Link & Frame)
Desain Web dengan Tag HTML
Pemrograman Basis Data Berbasis Web
Transcript presentasi:

Hypertext Markup Language (HTML) BAB 2

Intro HTML : format standar untuk membuat dokumen web Spesifikasi HTML standar (HTML 4.01 ) : http://www.w3.org/TR/html4 HTML merupakan bahasa bertanda, menggunakan rangkaian teks tertentu (tag) untuk menandai teks yang mempunyai interpretasi khusus File HTML berupa file teks (plain text file), bukan binary file, sehingga dapat dibuat menggunakan editor teks biasa

Skema Dasar Dokumen HTML <HEAD> <TITLE>Judul dokumen</TITLE> </HEAD> <BODY> Isi dokumen </BODY> </HTML> HTML: menandai awal dan akhir dokumen HTML HEAD: menandai bagian header dokumen HTML TITLE: memberi judul pada dokumen HTML BODY: menandai awal dan akhir isi dokumen (yang ditampilkan)

Contoh Isi Dokumen HTML <head> <title>Homepage saya</title> </head> <body> <h1>Saya</h1> <h2>Perkenalan</h2> <p>Perkenalkan, nama saya ..... Ini adalah <i>homepage</i> <b>pertama</b> saya, karena saya baru belajar tentang cara membuat <b><i>homepage</i></b>. </p> </body> </html> <!-- akhir dokumen HTML -->

Tag HTML Tag adalah sesuatu yang digunakan untuk menandai elemen-elemen dalam suatu dokumen HTML Tag dalam HTML terdiri dari  tanda lebih kecil (<), tanda lebih besar (>), dan garis miring (/). Biasanya tag dituliskan secara berpasangan, misanya <h1> dan </h1> namun ada juga yang tidak. Tag yang tidak menggunakan garis miring (/) adalah tag pembuka atau awal elemen sedangkan yang tag yang mengandung garis miring ( / ) adalah penutup elemen atau akhir elemen

Jenis Tag HTML Containers  Standalone tag 

Tag HTML - Containers Cara penulisannya dengan cara berpasangan mempunyai tag pembuka dan penutup tag Contoh: <body> … </body> <b … </b> <i> … </i>

Tag HTML - Standalone tag Tag yang bisa berdiri sendiri tanpa perlu mempunyai tag penutup. Tag tersebut biasanya hanya berfungi menempatkan sebuah elemen pada halam website Contoh: <img> untuk menampilkan gambar <br> untuk memberi jarak antar teks ( vertikal) <hr> untuk membuat garis

Jenis Tag HTML secara fungsional Tag Dasar Tag Pemformatan Tag Computer Output Tag Cititation, Quotation, Definition Tag Link Tag Image

Tag Dasar

Tag Pemformatan

Tag Computer Output

Tag Cititation, Quotation, Definition

Tag Link

Tag Image

Tag Judul (Heading) Judul Tingkat 1 Judul Tingkat 2 <hn>Judul paragraf</hn> n = 1,2,3,4,5,6 (tingkat judul) Untuk menuliskan judul suatu paragraf <h1>Judul Tingkat 1</h1> <h2>Judul Tingkat 2</h2> <h3>Judul Tingkat 3</h3> <h4>Judul Tingkat 4</h4> <h5>Judul Tingkat 5</h5> <h6>Judul Tingkat 6</h6> Judul Tingkat 1 Judul Tingkat 2 Judul Tingkat 3 Judul Tingkat 4 Judul Tingkat 5 Judul Tingkat 6

Tag Paragraf (Paragraph) <p>paragraf</p> Untuk menandai suatu paragraf. Suatu paragraf akan terlihat dibatasi oleh satu baris kosong sebelum dan sesudahnya. <p> Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage. </p> <p>Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana.</p><p>Saya akan berusaha untuk terus memperbaiki homepage saya ini, sehingga semakin lama semakin menarik untuk dilihat.</p> Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage. Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana. Saya akan berusaha untuk terus memperbaiki homepage saya ini, sehingga semakin lama semakin menarik untuk dilihat.

Tag Atribut 1 (Bold, Italic, Underline) <b>Kalimat yang dicetak tebal</b> <i>Kalimat yang dicetak miring</i> <u>Kalimat yang digarisbawahi</u> Untuk menandai bagian kalimat agar dicetak tebal, miring, dan/atau digarisbawahi. <p>Kata dapat dicetak <b>tebal</b>, <i>miring</i>, <u>garis bawah</u>, <b>tebal <i>miring</i></b>, dan <b><i><u>kombinasi</u></i></b> di tengah huruf normal</p> Kata dapat dicetak tebal, miring, garis bawah, tebal miring, dan kombinasi di tengah huruf normal

Tag Atribut 2 (Superscript, Subscript) <sup>bagian yang dicetak tinggi</sup> <sub>bagian yang dicetak rendah</sub> Untuk menandai bagian karakter agar dicetak tinggi atau rendah, biasanya untuk rumus matematika atau kimia. <p>(x<sub>1</sub> + x<sub>2</sub>)<sup>2</sup> = x<sub>1</sub><sup>2</sup> + x<sub>2</sub><sup>2</sup> + 2x<sub>1</sub>x<sub>2</sub></p> <p>2H<sub>2</sub> + O<sub>2</sub> = 2 H<sub>2</sub>O (x1 + x2)2 = x12 + x22 + 2x1x2 2H2 + O2 = 2 H2O

Tag Ganti Baris (Break line) <br> Untuk pindah ke baris berikutnya. Bentuk penulisan lain yang dianjurkan (XML style) : <br /> Ganti baris <p>Perkenalkan,<br /> nama saya ..... Ini adalah<br />homepage pertama saya,<br /> karena saya baru belajar tentang cara<br /> membuat homepage.</p> <p>Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana.</p> Perkenalkan, nama saya ..... Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage. Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana. Paragraf Paragraf

Tag Font (size) Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna tertentu. Tag : font Parameter : size, face, color <font size="n"> kalimat </font> <font size="m"> kalimat </font> n = 1, 2, 3, 4, 5, 6, 7 (ukuran huruf) m = -2, -1, +0, +1, +2, +3, +4 (ukuran huruf) Ukuran Ukuran <font size="1">satu,</font> <font size="2">dua,</font> <font size="3">tiga,</font> <font size="4">empat,</font> <font size="5">lima,</font> <font size="6">enam,</font> <font size="7">tujuh</font> Ukuran satu, dua, tiga, empat, lima, enam, tujuh

Tag Font (face) Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna tertentu. Tag : font Parameter : size, face, color Jenis huruf <font face="nama font"> kalimat </font> nama font = Times New Roman, Arial, Courier New, Verdana, dll. <font face="Times New Roman">Homepage ini masih dalam tahap pengembangan</font><br /> <font face="Arial">Homepage ini masih dalam tahap pengembangan</font><br /> <font face="Courier New">Homepage ini masih dalam tahap pengembangan</font><br /> <font face="Verdana">Homepage ini masih dalam tahap pengembangan</font> Homepage ini masih dalam tahap pengembangan

Tag Font (color) Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna tertentu. Tag : font Parameter : size, face, color Warna <font color="#RRGGBB"> kalimat </font> RR = 00 .. FF (intensitas warna merah dalam heksadesimal) GG = 00 .. FF (intensitas warna hijau dalam heksadesimal) BB = 00 .. FF (intensitas warna biru dalam heksadesimal) <b><font color="#FF0000">Red</font><br /> <font color="#800000">Maroon</font><br /> <font color="#00FF00">Lime</font><br /> <font color="#008000">Green</font><br /> <font color="#0000FF">Blue</font><br /> <font color="#000080">Navy</font><br /> <font color="#FFFF00">Yellow</font><br /> <font color="#FF00FF">Fuchsia</font><br /> <font color="#00FFFF">Aqua</font></b> Red Maroon Lime Green Blue Navy Yellow Fuschia Aqua

Tag Enumerasi (List, Unordered List, Ordered List) <li>item</li> Untuk menandai suatu item dari daftar (enumerasi), diawali dengan simbol • (bullet) Kelompok item harus diapit oleh tag <ul> </ul> dalam daftar bertingkat. Untuk menomori enumerasi dengan nomor urut (1,2,3), apitlah dengan tag <ol> </ol> Ada beberapa sektor potensial: <li>Pariwisata</li> <li>Seni</li> <li>Budaya</li><br /> Sektor tersebut merupakan ... <p>Fasilitas penginapan di Indonesia: <ol> <li>Losmen</li><br /> Losmen merupakan tempat penginapan yang berskala kecil <li>Hotel</li> <ul> <li>Hotel melati</li> <li>Hotel berbintang</li> </ul> </ol> Perkembangan dalam ... Ada beberapa sektor potensial:  Pariwisata  Seni  Budaya Sektor tersebut merupakan … Fasilitas penginapan di Indonesia: 1. Losmen Losmen merupakan tempat penginapan yang berskala kecil 2. Hotel Hotel melati Hotel berbintang Perkembangan dalam ...

Tag Garis Mendatar (Horizontal Line) <hr> membentuk garis pemisah mendatar. Bentuk penulisan lain yang dianjurkan (XML style) : <hr /> Perkenalkan, nama saya ... Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage.<hr /> Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana. Perkenalkan, nama saya ... Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage. Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana.

Tag Gambar (Image) <img src="NamaFileGambar"> NamaFileGambar = file gambar yang mempunyai ekstensi .GIF, .JPG, atau .PNG. Untuk menampilkan sebuah file gambar. Bentuk penulisan lain yang dianjurkan (XML style) : <img src="NamaFileGambar" /> <img src="cover.jpg" align="left" /> Perkenalkan, nama saya ... Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage. Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu <img src="logo.gif" alt="Logo" /> sederhana. Saya akan berusaha untuk terus memperbaiki homepage saya ini, sehingga semakin lama semakin menarik untuk dilihat. Perkenalkan, nama saya ... Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage. Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana. Saya akan berusaha untuk terus memperbaiki homepage saya ini, sehingga semakin lama semakin menarik untuk dilihat.

Form dan Input Tag di HTML Text Field <input type="text" name="firstname"> Textarea <textarea rows="4" cols="50">Isi</textarea> Checkboxes <input type="checkbox" name="tampilan" value="Ganteng"> Radio Button <input type="radio" name="sex" value="Laki-laki">Laki-laki<br>

Latihan Soal Cari dan pelajarilah contoh lain dari Form and Input Tag pada HTML! Buatlah sebuah halaman html sederhana yang menampilkan informasi data diri / profil Anda.