Pertemuan 8 - Konsep Web Dan HTML5

Modul
Web Design
Dosen:
Nofiyati, S.Kom, M.Kom
Program Studi Teknik Informatika
Universitas Jenderal Soedirman
Materi:
Pertemuan ke1 , 2 & 3.
Materi
Konsep Dasar Web Design:
Perencanaan WebSite
Typografi, Pewarnaan, LayOut / Tata Letak
Teks & Dasar Tag HTML:
Heading
Paragraf
Font
Table:
Create Table
Columns
Table Properties
LayOut with Table
Image:
Jenis File Image
Inserting Images
Resizing Images
Text & Image
Create Image
Materi:
Pertemuan ke4 & 5.
6.
Materi
Hyperlinks :
Teks Hyperlinks
Image Hyperlinks
Path Hyperlinks
Chage Hyperlinks
Active Elements:
Marquee
Counter
Animation Graphics
Bingkai:
Konsep Bingkai
Dokumen Tata Letak
Link & Target
Home Page Berbingkai
Ordered List & Unordered List
Menggunakan Forms & Fields:
Pengenalan komponen forms
Form Methode (Get, Post)
Feedback Form
Materi:
Pertemuan ke7 & 8.
9.
Materi
Pengenalan / Dasar CSS (Cascading Style Sheet)
CSS Inheritance
CSS Contextual Selector
CSS with Classes
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>
Normal body text - 12 Point
</body>
</html>

Paragraf dan Break
<html>
<head>
</head>
<body>
Universitas Jenderal Soedirman
<br>
Fakultas Teknik
<p>
Jurusan Teknik Informatika
</body>
</html>

HR (Horizontal Rule)
<html>
<head>
</head>
<body>
<h1>........</h1>
<hr>
</body>
</html>

Font
<html>
<head>
</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>
HTML5 Multimedia (2)
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>

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?

Pertemuan 8 - Konsep Web Dan HTML5

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Pertemuan 8 - Konsep Web Dan HTML5

Transféré par

Droits d'auteur :

Formats disponibles

Modul

Operator Aritmatika pada PHP

Operator Perbandingan pada PHP

Mengenal Bersyarat IF & CASE pada PHP

Menggabungkan Web Programming dengan Database MySQL

Konsep Dasar Web Design

Konsep Dasar Web Design

Konsep Dasar Web Design

Desain Halaman Web Dasar

Konsep Dasar Web Design

Konsep Dasar Web Design

Konsep Dasar Web Design

Konsep Dasar Web Design

Dasar Skrip / Tag HTML

Dasar Skrip / Tag HTML

Dasar Skrip / Tag HTML

Dasar Skrip / Tag HTML

Dasar Skrip / Tag HTML

Dasar Skrip / Tag HTML

HTML5 adalah standar terbaru untuk HTML.

Deklarasi awal agar kita menggunakan HTML 5 ialah hanya

Dalam HTML 5 ada beberapa bagianyang membedakan tiap

Pada HTML 5, kita dapat memutar suatu video maupun lagu

HTML 5 video Terdapat tiga jenis format video yang dapat di

HTML5 Multimedia (2)

HTML 5 audio Terdapat tiga jenis format video yang dapat di

Dasar Skrip / Tag HTML

Vous aimerez peut-être aussi