workshop 1 create a web from zero

Create A Web From Zero

#1

Eddy Tungadi

INTRODUCTIONSESSION #1

How A Web Works?

How To Develop A Web

OUR TOOLS

• HTML • CSS• JAVASCRIPT (JQUERY)• PHP

Base Template

Styling

Functionality

Server Side Scripts

Where Should We Start?

The SeriesI. Learning HTML &

CSS

II. Designing in Image Editor

III. Coding Our Theme Design With HTML and CSS Editor

IV. Learning Javascript (JQURY)

V. Server Side Script (PHP)

Descibe HTML and CSS

• Head• Body• Style

Sama seperti tubuh manusia yang memiliki bagian-bagian dengan attribut, style, dan fungsi yang berbeda-beda

How to write the code

Element CategoryTag Dasar

Format Tulisan

Blocks

Links

Frames

Forms (input)

Label (output)

Lists

Images

Tables

Styles

Meta Info

Pemrograman

List• <ul>

<li> first item </li> … </ul>

Form• <FORM

METHOD=”post” ACTION=”mailto:your@domain.com”> … </form>

Meta

• <meta http-equiv=”refresh” content=”5;url=foo.html” />

• <meta name=”keywords” content=”Physics, Maths, Science” />

Element with its Attribute#1

Required Attribute

•attribut yang harus dimasukkan agar tag berefek pada halaman web•<img src = “gambar.jpg”>

Option Attribute

•attribut yang sifatnya optional •<img width = ”10%”>

Element with its Attribute#2

Attribut inti sangat penting peranannya dalam pengaturan template web.

Mereka adalah: -Title-Class -Id -name

Core Attribute

• attribut inti untuk pengaturan elemen HTML

• <a title=”Link Ke Google”>Google </a>

Event Attribute

• attribut yang digunakan untuk memanggil event

• <a href= ”http://www.google.com” onmouseover = ”script_mouse()” > Google </a>

IMAGE TO HTMLSESSION #2

How to write the code

NAVIGATIONSESSION #3

How to write the code

TIPS AND TRICKSSESSION #4

• PENGGUNA SITUS MELAKUKAN SCAN• LEBIH SEDIKIT LEBIH BAIK • NAVIGASI• KECEPATAN AKSES • BIARKAN PENIKMAT BERBICARA!• PERHATIKAN MONITOR PENGGUNA• BROWSER APA YANG DIGUNAKAN• PLUG IN APA SAJA YANG DIMILIKI PENGGUNA• TAMBAHKAN FUNGSI JAVASCRIPT / JQUERY• KEMBANGKAN BACKEND DENGAN PHP