Pertemuan 8 - Konsep Web Dan HTML5

Modul Web Design

Dosen:Nofiyati, S.Kom, M.Kom

Program Studi Teknik InformatikaUniversitas Jenderal Soedirman

Materi:Pertemuan ke- Materi

1 , 2 & 3. Konsep Dasar Web Design: Perencanaan WebSite Typografi, Pewarnaan, LayOut / Tata LetakTeks & Dasar Tag HTML: Heading Paragraf FontTable: Create Table Columns Table Properties LayOut with TableImage: Jenis File Image Inserting Images Resizing Images Text & Image Create Image

Materi:

Pertemuan ke- Materi

4 & 5. Hyperlinks : Teks Hyperlinks Image Hyperlinks Path Hyperlinks Chage HyperlinksActive Elements: Marquee Counter Animation GraphicsBingkai: Konsep Bingkai Dokumen Tata Letak Link & Target Home Page Berbingkai

6.Ordered List & Unordered List Menggunakan Forms & Fields: Pengenalan komponen forms Form Methode (Get, Post) Feedback Form

Materi:

Pertemuan ke- Materi

7 & 8. Pengenalan / Dasar CSS (Cascading Style Sheet) CSS Inheritance CSS Contextual Selector CSS with Classes

9. Pengenalan PHP Pengenalan PHP Mengenal Variabel pada Web

10. Operator Aritmatika pada PHP Operator Assignment pada PHP

11. Operator Perbandingan pada PHP Operator Logika pada PHP

12. Mengenal Bersyarat IF & CASE pada PHP Mengenal Looping pada PHP Array di PHP

13. Function di PHP MySQL dengan PhpMyAdmin

14. Menggabungkan Web Programming dengan Database MySQL

Konsep Dasar Web Design

Perencanaan website Proses ini merupakan awal dalam merencanakan halaman web. Dimulai dengan mengumpulkan seluruh data serta informasi kemudian hasil akhirnya adalah sebuah “site map” lalu dimulai dengan merancang tata letak (LayOut) halaman, biasanya dilakukan mendesain tata letak halaman depan dan halaman kedua. Dalam mendesain halaman ini beberapa komponen penting biasanya masuk adalah content, rencana letak image, copyright/hak cipta (bagian footer), serta komponen website dan hal lain yang dianggap perlu (animasi, video, musik, dll).



Desain Halaman Web Dasar Berdasarkan hal diatas selanjutnya kita mulai melakukan desain web dengan menterjemahkan perencanaan ke dalam software desain, keahlian yang mesti diperdalam adalah typografi (kemampuan memilih font yang tepat), tata letak halaman (menguasai kemampuan membagi ruang halaman), pewarnaan (menguasai konsep warna dan pemilihan warna berdasarkan warna perusahaan dan teori pencampuran warna). Software yang digunakan salah satunya Adobe Photoshop, dengan mempelajari pembuatan tombol/navigasi, background, bekerja dengan teks, manipulasi gambar/image, dan khususnya memperdalam teknik – teknik desain website.





Dasar Skrip / Tag HTML

Pertanyaan mendasar dari web designer pemula: Sulitkah pemrograman HTML?.... Apa yang dimaksud tag dalam HTML?... Bagaimana belajar dari Design Web yang sudah ada?...


<html><head>

<title>Judul / Title</title></head>

<body>

Isi / Content

</body></html>


Heading

<html><head>

<title>Latihan 01</title></head>

<body><h1> Heading 1 - 24 Point </h1><h2> Heading 2 - 18 Point </h2><h3> Heading 3 - 14 Point </h3><h4> Heading 4 - 12 Point </h4><h5> Heading 5 - 10 Point </h5><h6> Heading 6 - 7 Point </h6>Normal body text - 12 Point

</body></html>


Paragraf dan Break

<html><head>


<body>Universitas Jenderal Soedirman<br>Fakultas Teknik<p>Jurusan Teknik Informatika

</body></html>


HR (Horizontal Rule)

<html><head>


<body><h1>........</h1><hr>

</body></html>


Font

<html><head>


<body><font face=verdana size=3 color=blue>Fakultas Ilmu Komputer</font>

</body></html>

Pengenalan HTML5 HTML5 adalah standar terbaru untuk HTML.

• Versi sebelumnya dari HTML, HTML 4.01, direlease pada tahun 1999, dan internet telah berubah secara signifikan sejak saat itu.

• Ini dirancang khusus untuk memberikan content yang banyak tanpa membutuhkan plugin tambahan. Versi ini memberikan ruang untuk animasi grafis, musik untuk film, dan juga dapat digunakan untuk membangun aplikasi web yang rumit.

• HTML5 juga lintas platform. Itu dirancang untuk bekerja apakah Anda menggunakan PC, atau Tablet, Smartphone, atau Smart TV.

Penulisan HTML 5

Deklarasi awal agar kita menggunakan HTML 5 ialah hanya menulis "<!DOCTYPE html>" pada awal halaman yang kita buat. Hal tersebut untuk membedakan HTML 5 dan HTML 4.

<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>

Pengenalan HTML 5

Dalam HTML 5 ada beberapa bagianyang membedakan tiap jenisnya, yaitu :

• Graphics / Multimedia • Semantics & Markup • Offline / Storage • Realtime / Communication • File / Hardware Access • CSS3 • Nuts & Bolts

HTML5 Multimedia

Pada HTML 5, kita dapat memutar suatu video maupun lagu hanya dengan scipt saja, tidak membutuhkan bantuan dari player. Ada dua jenis HTML 5 multimedia, yaitu :

• HTML5-video • HTML5-audio

HTML 5 video Terdapat tiga jenis format video yang dapat di putar di HTML 5 ini, Ogg, mp4 dan Webm. Setiap browser support berbeda-beda browser. Penulisannya :

Script : <video width="320" height="240"controls="controls">

<source src="yourvideo.mp4" type="video/mp4" /> Your browser does not support the video tag.

</video>

HTML 5 audio Terdapat tiga jenis format video yang dapat di putar di HTML 5 ini, Ogg, mp4 dan Waw. Setiap browser support berbeda-beda browser.

Penulisannya :

<audio controls="controls"> <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mpeg" /> Your browser does not support the audio element. </audio>

HTML5 Multimedia (2)


Soal (1)Tuliskan Source Code dari tampilan berikut:

Tugas (1)

Mencari artikel dengan tema CSS (Cascading Style Sheet) Pelajari dengan seksama artikel yang Anda dapatkan dan

berikan pendapat Anda?

Documents

Pertemuan 8 - Konsep Web Dan HTML5