Top Banner
15

DESAIN WEB PENGANTAR - WordPress.com · Metodologi desain web Metodologi desain secara umum ... A Practical Guide to Designing for the Web by Mark Boulton. Tugas ... Temukan klien

Mar 23, 2019

Download

Documents

nguyennguyet
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: DESAIN WEB PENGANTAR - WordPress.com · Metodologi desain web Metodologi desain secara umum ... A Practical Guide to Designing for the Web by Mark Boulton. Tugas ... Temukan klien
Page 2: DESAIN WEB PENGANTAR - WordPress.com · Metodologi desain web Metodologi desain secara umum ... A Practical Guide to Designing for the Web by Mark Boulton. Tugas ... Temukan klien

Metodologi desain webMetodologi desain

secara umum

ideas generation

– Prototyping– testing

A Practical Guide to Designing for the Webby Mark Boulton

Page 3: DESAIN WEB PENGANTAR - WordPress.com · Metodologi desain web Metodologi desain secara umum ... A Practical Guide to Designing for the Web by Mark Boulton. Tugas ... Temukan klien

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

Page 4: DESAIN WEB PENGANTAR - WordPress.com · Metodologi desain web Metodologi desain secara umum ... A Practical Guide to Designing for the Web by Mark Boulton. Tugas ... Temukan klien
Page 5: DESAIN WEB PENGANTAR - WordPress.com · Metodologi desain web Metodologi desain secara umum ... A Practical Guide to Designing for the Web by Mark Boulton. Tugas ... Temukan klien
Page 6: DESAIN WEB PENGANTAR - WordPress.com · Metodologi desain web Metodologi desain secara umum ... A Practical Guide to Designing for the Web by Mark Boulton. Tugas ... Temukan klien

<!DOCTYPE HTML>

<HTML>

<HEAD>

<TITLE>Judul Web</TITLE>

</HEAD>

<BODY>

Teks (isi web) + script / coding diletakkan disini didalam tag body

</BODY>

</HTML>

Page 7: DESAIN WEB PENGANTAR - WordPress.com · Metodologi desain web Metodologi desain secara umum ... A Practical Guide to Designing for the Web by Mark Boulton. Tugas ... Temukan klien
Page 8: DESAIN WEB PENGANTAR - WordPress.com · Metodologi desain web Metodologi desain secara umum ... A Practical Guide to Designing for the Web by Mark Boulton. Tugas ... Temukan klien
Page 9: DESAIN WEB PENGANTAR - WordPress.com · Metodologi desain web Metodologi desain secara umum ... A Practical Guide to Designing for the Web by Mark Boulton. Tugas ... Temukan klien

▪ Type: container

▪ Function: declares document to be HTML; all content contained inside

▪ Syntax: <HTML>…</HTML>

▪ Attributes: none

Page 10: DESAIN WEB PENGANTAR - WordPress.com · Metodologi desain web Metodologi desain secara umum ... A Practical Guide to Designing for the Web by Mark Boulton. Tugas ... Temukan klien

▪ Type: container

▪ Function: contains tags comprising the document head

▪ Syntax: <HEAD>…</HEAD>

▪ Attributes: none

Page 11: DESAIN WEB PENGANTAR - WordPress.com · Metodologi desain web Metodologi desain secara umum ... A Practical Guide to Designing for the Web by Mark Boulton. Tugas ... Temukan klien

▪ 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>

Page 12: DESAIN WEB PENGANTAR - WordPress.com · Metodologi desain web Metodologi desain secara umum ... A Practical Guide to Designing for the Web by Mark Boulton. Tugas ... Temukan klien

▪ 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>

Page 13: DESAIN WEB PENGANTAR - WordPress.com · Metodologi desain web Metodologi desain secara umum ... A Practical Guide to Designing for the Web by Mark Boulton. Tugas ... Temukan klien

▪ 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>

Page 14: DESAIN WEB PENGANTAR - WordPress.com · Metodologi desain web Metodologi desain secara umum ... A Practical Guide to Designing for the Web by Mark Boulton. Tugas ... Temukan klien

▪ 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>

Page 15: DESAIN WEB PENGANTAR - WordPress.com · Metodologi desain web Metodologi desain secara umum ... A Practical Guide to Designing for the Web by Mark Boulton. Tugas ... Temukan klien

older HTML HTML5

<div class="header">

<div id=“nav">

<div id=“section">

<div id=“article">

<div id=“aside">

<div id=“footer">