Upload presentasi
Presentasi sedang didownload. Silahkan tunggu
1
Memahami format teks pada halaman web Menyajikan teks dalam format tertentu pada halaman web
Create By Widiyono
2
Anatomi dokumen web Secara garis besar anatomi atau susunan dari suatu halaman web terdiri dari containing block, Logo, navigation, content, white space dapat digambarkan sebagai berikut
4
Containing Block. Containing block merupakan bagian dari halaman web yang membungkus semua komponen halaman web. Umumnya dibuat dengan tag <body>, <div> atau <table>. Logo. Identitas perusahaan, organisasi, pemilik situs. Navigation. Navigasi atau menu merupakan bagian penting dari situs yang memudahkan pengunjung berpindah-pindah halaman.
5
Content. Content atau isi adalah segalanya, karena disinilah sebagian besar informasi disajikan.
Footer. Footer merupakan bagian bawah dan berisi informasi singkat pemilik situs (copyright) dan beberapa link. Whitespace. Whitespace merupakan area kosong yang membatasi antar-komponen. Whitespace menjadi penting agar pengunjung mempunyai ruang berhenti di antara bagian-bagian situs yang lain. Whitespace dapat juga diisi dengan banner atau animasi.
6
Beberapa model layout yang biasa digunakan dalam mendesain suatu halaman web, diantaranya adalah
Top Index digunakan untuk menampilkan link yang banyak ke situs lain, seperti search engine
7
Bottom Index Biasanya digunakan apabila isi dari halaman banyak berhubungan dengan topik tunggal
8
Left Index Digunakan untuk layar dengan resolusi yang lebar sehingga mudah dalam penyediaan navigasi, tanpa menimbulkan kekacauan penyajian pada halaman utama
9
Layout Split Merupakan model yang banyak dipakai, karena terjaga keseimbangan dalam halaman web
10
Alternating Index Digunakan untuk halaman yang banyak menampilkan grafik, foto dan produk yang disertai dengan teks berupa keterangan, harga, jumlah, dan lain - lain.
11
Pemformatan teks dan paragrap
<html> <head> <title>Judul Halaman</title> </head> <body> Berisi tentang text, gambar, atau apapun yang tampil pada dokumen web. </body> </html>
12
Pengaturan Properti Dokumen
Properti document diatur melalui atribut-atribut yang terdapat dalam elemen <body>. Sebagai contoh adalah pengaturan warna latar belakng halaman, wana teks, warna link dan lain-lain.
13
Atribut Elemen <body>
BACKGROUND = Lokasi dan nama file (latar belakng dokumen image dokumrn) BGCOLOR = Warna (warna latar belakng dokumen, default putih) TEXT = Warna (warna teks dokumen, default hitam) LINK = Warna (warna link dokumen, default biru) VLINK = Warna (warna visited link dokumen, default ungu) ALINK = Warna (warna aktif link dokumen, default merah)
14
Tag HTML Pemformatan Teks
15
Tag HTML “keluaran computer”
17
Tugas Tugas1 HTML Heading <!DOCTYPE html> <html>
<title>Heading</title> </head> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> </body> </html> Tugas1 HTML Heading <!DOCTYPE html> <html> <head> <tittle>Paragraf</tittle> </head> <body> <p> Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. </p> <p> Ini paragraph lainnya. Ini paragraph lainnya. Ini paragraph lainnya. Ini paragraph lainnya. Ini paragraph lainnya. </p> </body> </html>
18
Tugas3 HTML Link <!DOCTYPE html> <html> <head> <tittle>Link</tittle> </head> <body> <a href=" Ini adalah link</a> </body> </html> Tugas4 HTML Image <!DOCTYPE html> <html> <head> <tittle>Gambar/Image</tittle> </head> <body> <img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142"> </body> </html>
19
Projek Projek .Format Teks <html> <p> <head>
<title>Format Teks</title> </head> <body> <p> <b>Tulisan ini ditebalkan (bold)</b> </p> <strong>Tulisan ini ditebalkan (strong)</strong> <em>Tulisan ini miring (emphasize) </em> <p> <big>Tulisan ini besar (big)</big> </p> <i>Tulisan ini miring (italic) </i> <p>Tulisan ini <sub>subscript</sub> <sup>superscript</sup> </body> </html>
20
Projek2 <HTML> <HEAD> <TITLE>Preformat </TITLE> </HEAD> <BODY> <H2>Daftar Harga Keladi:</H2> <PRE> Red Flash Red Fire Fannie Munson </PRE> Harga sewaktu-waktu bisa berubah. </BODY> </HTML>
Presentasi serupa
