desain web pengantar - wordpress.com · metodologi desain web metodologi desain secara umum ... a...
TRANSCRIPT
Metodologi desain webMetodologi desain
secara umum
ideas generation
– Prototyping– testing
A Practical Guide to Designing for the Webby Mark Boulton
Tugas untuk Proyek Akhir (1):
1. Bentuk kelompok terdiri dari 2 orang
2. Temukan klien yg membutuhkan desain web (dirisendiri, komunitas, ukm, dll)
3. Gali brief dan temukan citra/imageyg ingin ditampilkan oleh klien
4. Tentukan user (siapa yg akan mengunjungi web) dan analisis perilaku/selera user
Kumpul: sebelum pertemuan selanjutnya
Email: [email protected]
Subject email: [Desweb – A/B/C/D] Tugas 1 (Nama 1) (Nama2)
Tuliskan di body email, no attachment
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Judul Web</TITLE>
</HEAD>
<BODY>
Teks (isi web) + script / coding diletakkan disini didalam tag body
</BODY>
</HTML>
▪ Type: container
▪ Function: declares document to be HTML; all content contained inside
▪ Syntax: <HTML>…</HTML>
▪ Attributes: none
▪ Type: container
▪ Function: contains tags comprising the document head
▪ Syntax: <HEAD>…</HEAD>
▪ Attributes: none
▪ Type: standalone
▪ Function:
▪ information about web data, will not be displayed on the page, but will be machine parsable.
▪ declares document meta-information: keywords, expiration date, author, page generator, etc.
▪ Attributes: charset, content, http-equiv,
name
<head><meta charset="UTF-8"><meta name="description"content="Free Web tutorials"><meta name="keywords"content="HTML,CSS,XML,JavaScript"><meta name="author"content="Hege Refsnes">
</head>
▪ Type: container
▪ Function: contains script code referenced in the <BODY>
▪ Syntax:
SCRIPT LANGUAGE=“name”>… </SCRIPT>
▪ Attributes: scr, type, charset, defer, async
<script>document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
▪ Type: container
▪ Function:
defines the title of the document
▪ Syntax: <TITLE>… </TITLE>
▪ Attributes: none
<html><head><title>Title of the document</title></head>
<body>The content of the document......</body>
</html>
▪ Type: container
▪ Function:
contains all text and
tags inside the document
(text, hyperlinks, images, tables, lists, etc.)
▪ Syntax: <BODY>… </BODY>
<html><head><title>Title of the document</title></head>
<body>The content of the document......</body>
</html>
older HTML HTML5
<div class="header">
<div id=“nav">
<div id=“section">
<div id=“article">
<div id=“aside">
<div id=“footer">