Pengantar Teknologi Web 3

1
Pengantar Teknologi Web 3

• Antonius Rachmat C

2
Teknologi Web Client

• Web browser
• HTML / XML / XHTML
• Javascript / VBScript
• CSS
• Flash player
• Java Applet
• ActiveX / Plugin program yg terintegrasi dgn
  browser
• Helper program yg terinstall di client

3
Pengembangan sisi client

• Local environment (prosesor, browser, memory,
  vga, dll)
• Tidak ada kontrol oleh web developer
• Memberikan saran kepada user
• Cth resolusi 1024 x 768
• Memberi pilihan kepada user
• Cth javascript harus aktif
• Client / user profiling

4
Pengembangan sisi client
5
Pilihan client
6
Pertimbangan Client

• Kebutuhan dan keinginan user berbeda satu dengan
  yang lain.
• Pengaruh gender, umur, pendidikan, hobi,
  pengalaman, latarbelakang, budaya, dll.
• User memiliki tujuan, tugas web developer adalah
  membantu user mencapai tujuannya (download
  program, akses jadwal, mencetak daftar harga, dll)

7
Pertimbangan jaringan

• Bandwidth
• Modem 56KBps T1 1.5MBps
• Latency waktu yang diperlukan sebuah paket data
  untuk menempuh jarak yang menghubungkan dua buah
  sistem
• Utilization, lalu lintas data pada suatu jaringan.

8
Web Browser

• MS Internet Explorer (Windows)
• Netscape Navigator/Communicator (Windows Linux)
• Mozila Firefox (Windows Linux)
• Opera (Windows Linux)
• Konqueror (Linux)
• lynx, berbasis teks (Linux)

9
HTML

• Hypertext Markup Language
• Text based
• Menggunakan tag (tanda) lt dan gt
• Tujuannya untuk tampilan di halaman web
• Bahasanya baku
• Ekstensi .html , .htm

10
HTML tag

• lthtmlgt
• ltheadgt
• lttitlegtJudul Halamanlt/titlegt
• ltmetagtlt/metagt
• ltscriptgtlt/scriptgt
• lt/headgt
• ltbodygt
• lt/bodygt
• lt/htmlgt

11
Tags vs. elements

• HTML specifies a set of tags that identify
  structure and content type
• tags are enclosed in lt gt
• ltimg src"image.gif" /gt specifies an image
• most tags come in pairs, marking a beginning and
  ending
• lttitlegt and lt/titlegt enclose the title of a page

• an HTML element is an object enclosed by a pair
  of tags
• lttitlegtMy Home Pagelt/titlegt is a TITLE element
• ltbgtThis text appears bold.lt/bgt is a BOLD element
• ltpgtPart of this text is ltbgtboldlt/bgt.lt/pgt
• is a PARAGRAPH element that contains a BOLD
  element

HTML document is a collection of elements
(text/media with context)
12
HTML
13
Aligning text
lthtmlgt lt!-- Dave Reed page04.html 1/16/04
--gt lt!-- Demo web page
--gt ltheadgt lttitlegtText Alignmentlt/titlegt lt/head
gt ltbodygt lth1 style"text-aligncenter"gtCentered
Headinglt/h1gt ltpgt Here is some left-justified
text (which is the default in HTML). lt/pgt
ltp style"text-aligncenter"gt Here is some
centered text. lt/pgt ltdiv style"text-alignri
ght"gt lth2gtRight-justified Headinglt/h2gt
ltpgtHere is some right-justified text.lt/pgt
lt/divgt lt/bodygt lt/htmlgt

• can specify how elements should be aligned
  (default is left-justified)
• utilize STYLE attribute of tag
• to justify more than one element as a group, use
  DIV tags
• ell elements enclosed in DIV are formatted
  similarly

view page in browser
14
Text styles

• can specify styles for fonts
• ltbgt lt/bgt specify bold
• ltigt lt/igt specify italics
• ltttgt lt/ttgt specify typewriter-like (fixed-width)
  font
• ltbiggt lt/biggt increase the size of the font
• ltsmallgt lt/smallgt decrease the size of the font
• ltsubgt lt/subgt specify a subscript
• ltsupgt lt/supgt a superscript
• ltp style"colorred"gtlt/pgt for paragraphs
• ltspan style"colorblue"gt
• lt/spangt for inline text
• Note if elements are nested, the order of
  opening/closing is important! (LIFO)

lthtmlgt lt!-- Dave Reed page05.html 1/16/04
--gt lt!-- Demo web page
--gt ltheadgt lttitlegtText Styleslt/titlegt lt/headgt
ltbodygt ltpgt Text can be emphasized using
ltbgtboldlt/bgt, ltigtitalicslt/igt, or even
ltbiggtresizinglt/biggt. ltbr/gt The typewriter font
is good for displaying code ltttgtsum sum
ilt/ttgt ltbr /gt And remember ltspan
style"colorred"gt ltsmallgt2ltsupgt10lt/supgtlt/small
gt 1024lt/spangt lt/pgt lt/bodygt lt/htmlgt
view page in browser
15
Font
16
Lists

• there are 3 different types of list elements
• ltolgtlt/olgt specifies an ordered list (using
  numbers or letters to label each list item)
• ltligt identifies each list item
• can set type of ordering, start index
• ltulgtlt/ulgt specifies unordered list (using a
  bullet for each)
• ltligt identifies each list item
• ltdlgtlt/dlgt specifies a definition list
• ltdtgt identifies each term
• ltddgt identifies its definition

lthtmlgt lt!-- Dave Reed page07.html 1/16/04
--gt ltheadgt lttitlegtSimple Listslt/titlegt lt/headgt
ltbodygt ltpgt ltolgt ltligtFirst thing.
ltligtSecond thing. ltligtThird thing. lt/olgt
lt/pgt ltpgt ltdlgt ltdtgtHTML ltddgtHyperText
Markup Language ltdtgtHTTP ltddgtHyperText
Transfer Protocol lt/dlgt lt/pgt lt/bodygt lt/htmlgt
view page in browser
17
Tabel 1 baris 2 kolom
18
Tabel 2 baris 2 kolom
19
URL
20
Hyperlinks

• perhaps the most important HTML element is the
  hyperlink, or ANCHOR
• lta href"URL"gtlt/agt
• where URL is the Web address of the page to be
  displayed when the user clicks on the link
• if the page is accessed over the Web, must start
  with http//
• if not there, the browser will assume it is the
  name of a local file
• lta href"URL" target"_blank"gtlt/agt
• causes the page to be loaded in a new window

lthtmlgt lt!-- Dave Reed page08.html 1/16/04
--gt ltheadgt lttitlegtHyperlinkslt/titlegt lt/headgt lt
bodygt ltpgt lta href"http//www.creighton.edu"gt
Creighton Universitylt/agt ltbrgt lta
href"page07.html" target"_blank"gt Open page07
in a new windowlt/agt lt/pgt lt/bodygt lt/htmlgt
view page in browser
21
Hyperlinks - anchor

• for long documents, you can even have links to
  other locations in that document
• lta name"ident"gtlt/agt
• where ident is a variable for identifying this
  location
• lta href"ident"gtlt/agt
• will then jump to that location within the file
• lta href"URLident"gtlt/agt
• can jump into the middle of another file just as
  easily

lthtmlgt lt!-- Dave Reed page09.html 1/16/04
--gt ltheadgt lttitlegtInternal Links in a
Pagelt/titlegt lt/headgt ltbodygt ltp
align"center"gt lta href"HTML"gtHTMLlt/agt
lta href"HTTP"gtHTTPlt/agt lta
href"IP"gtIPlt/agt lta href"TCP"gtTCPlt/agt
lt/pgt ltpgt Computer acronyms ltdlgt lta
name"HTML"gtlt/agtltdtgtHTML ltddgtHyperText Markup
Language lta name"HTTP"gtlt/agtltdtgtHTTP
ltddgtHyperText Transfer Protocol lta
name"IP"gtlt/agtltdtgtIP ltddgtInternet Protocol
lta name"TCP"gtlt/agtltdtgtTCP ltddgtTransfer
Control Protocol lt/pgt lt/bodygt lt/htmlgt
view page in browser
22
Images

• can include images using IMG
• by default, browsers can display GIF and JPEG
  files
• other image formats may require plug-in
  applications for display
• ltimg src"filename" alt"alternate text" /gt
• again, if file is to be accessed over the Web,
  must start with http// (if not, will assume
  local file)

lthtmlgt lt!-- Dave Reed page10.html 1/16/04
--gt ltheadgt lttitlegtImageslt/titlegt lt/headgt ltbody
gt ltdiv style"text-aligncenter"gt ltimg
src"http//www.creighton.edu/davereed/Images/ree
d.gif" alt"Dave Reed" /gt ltpgtDave
Reedlt/pgt lt/divgt lt/bodygt lt/htmlgt
view page in browser
23
Frames

• frames provide the ability to split the screen
  into independent pages
• must define a FRAMESET that specifies the layout
  of the pages
• actual pages to be displayed must be in separate
  files

• can divide vertically
• ltframeset cols"50,50"gt
• or, horizontally
• ltframeset rows"30,,"gt
• causes the browser to divide the remaining
  space evenly
• by default, each frame scrollable
• can drag the border to resize
• can hide the border with frameset
• attribute frameborder0

lthtmlgt lt!-- Dave Reed page15.html 1/16/03
--gt ltframeset cols","gt ltframe
src"page01.html"gt ltframe src"page02.html"gt lt/f
ramesetgt lt/htmlgt
view page in browser
24
Frame controversy

• frames are probably the most controversial HTML
  feature
• some people love them, some people hate them
• 2 reasonable uses for frames
• as a navigational aid
• can divide the screen into a static menu frame
  and the main frame for navigating a site
• e.g., www.creighton.edu/davereed
• as a means of separating program input from
  output
• can divide the screen into a static man input
  form frame and the main frame for displaying
  output
• e.g., www.creighton.edu/davereed/csc551/JavaScrip
  t/story.html

25
Menu frame

• to create a menu, need to be able to direct links
  to the main frame
• name the frames in the FRAMESET
• specify the frame name as TARGET in the link
• specify _top as target to return to top level of
  browser

lthtmlgt lt!-- Dave Reed menu16.html 1/16/04
--gt ltheadgt lttitlegtMenu of Demoslt/titlegt lt/headgt
ltbodygt Links to demo pages ltpgt lta
href"page01.html" target"main"gtDemo
1lt/agtltbr/gt lta href"page02.html" target
"main"gtDemo 2lt/agtltbr/gt lta href"page03.html"
target "main"gt Demo 3lt/agtltbr/gt lta
href"page04.html" target "main"gt Demo
4lt/agtltbr/gt lta href"page05.html" target
"main"gt Demo 5lt/agtltbr/gt lta href"page06.html"
target "main"gt Demo 6lt/agtltbr/gt lta
href"http//www.creighton.edu" target"_top"
gtCreightonlt/agt lt/pgt lt/bodygt lt/htmlgt
lthtmlgt lt!-- Dave Reed page16.html 1/16/04
--gt ltheadgt lttitlegtDemo Browserlt/titlegt lt/headgt
ltframeset cols"30,"gt ltframe
src"menu16.html" name"menu"gt ltframe
src"page01.html" name"main"gt lt/framesetgt lt/html
gt
view page in browser
26
Content vs. presentation

• most HTML tags define content type, independent
  of presentation
• exceptions?
• style sheets associate presentation formats with
  HTML elements
• CSS1 developed in 1996 by W3C
• CSS2 released in 1998, but not fully supported
  by browsers
• HTML style sheets are known as Cascading Style
  Sheets, since can be defined at three different
  levels
• inline style sheets apply to the content of a
  single HTML element
• document style sheets apply to the whole BODY of
  a document
• external style sheets can be linked and applied
  to numerous documents
• lower-level style sheets can override
  higher-level style sheets

27
Inline style sheets

• Using the style attribute, can specify
  presentation style for a single HTML element
• within tag, list sequence of propertyvalue pairs
  
• font-familyCourier,monospace
• font-styleitalic
• font-weightbold
• font-size12pt font-sizelarge
  font-sizelarger
• colorred color000080
• background-colorwhite
• text-decorationunderline
• text-decorationnone
• text-alignleft text-aligncenter
• text-alignright text-alignjustify
• vertical-aligntop vertical-alignmiddle
• vertical-alignbottom

lthtmlgt lt!-- Dave Reed page17.html 1/16/04
--gt ltheadgt lttitlegtInline Style
Sheetslt/titlegt lt/headgt ltbodygt ltp
style"font-familyArial,sans-serif
text-alignright"gtThis is a right-justified
paragraph in a sans serif font (preferably
Arial), with some ltspan style"colorgreen"gtgre
en textlt/spangt. lt/pgt ltpgtAnd lta
style"colorred
text-decorationnone
font-sizelarger" href"page01.html"gt
herelt/agt is a formatted link.
lt/pgt lt/bodygt lt/htmlgt
view page in browser
28
Inline style sheets (cont.)
lthtmlgtlt!-- Dave Reed page18.html 1/16/04
--gtltheadgt lttitlegtInline Style
Sheetslt/titlegtlt/headgtltbodygt ltpgtHere is an
image ltimg src"reed.gif" alt"Dave Reed"
style"margin-left0.3in
margin-right0.3in
vertical-alignmiddle
border-styledouble
border-coloryellow"gt embedded in text.
lt/pgt ltol style"list-style-typeupper-alpha"gt
ltligt one thing ltligt or another ltul
style"list-style-typesquare
whitespacepre"gt ltligt with this ltligt
or that lt/ulgt lt/olgtlt/bodygtlt/htmlgt

• more style properties values
• margin-left0.1in margin-right5
• margin3em
• padding-top0.1in padding-bottom5
• padding3em
• border-widththin border-widththick
• border-width5
• border-colorred
• border-styledashed border-styledotted
• border-styledouble border-stylenone
• whitespacepre
• list-style-typesquare
• list-style-typedecimal
• list-style-typelower-alpha
• list-style-typeupper-roman

view page in browser
29
Document style sheets

• inline style sheets apply to individual elements
  in the page
• can lead to inconsistencies as similar elements
  are formatted differently
• e.g., might like for all H1 elements to be
  centered
• inline definitions mix content presentation
• ? violates the general philosophy of HTML

• alternatively, document style sheets allow for a
  clean separation of content and presentation
• style definitions are placed in the HEAD of the
  page (within STYLE tags)
• can apply to all elements, or a subclass of
  elements, throughout the page

30
Document style sheets
lthtmlgt lt!-- Dave Reed page20.html 1/16/04
--gt ltheadgt lttitlegtDocument Style
Sheetslt/titlegt ltstyle type"text/css"gt h1
colorblue text-aligncenter
p.indented text-indent0.2in lt/stylegt
lt/headgt ltbodygt lth1gtCentered Titlelt/h1gt ltp
class"indented"gtThis paragraph will have the
first line indented, but subsequent lines will be
flush.lt/pgt ltpgtThis paragraph will not be
indented. lt/pgt lth1gtThe Endlt/h1gt lt/bodygt lt/htm
lgt

• document style sheets ensure that similar
  elements are formatted similarly
• can even define subclasses of elements and
  specify formatting
• p.indented defines subclass of paragraphs
• inherits all defaults of ltpgt
• adds new features
• to specify this newly defined class, place
  class"ID" attribute in tag
• note how "clean" the BODY is

view page in browser
31
External style sheets

• modularity is key to the development and reuse of
  software
• design/implement/test useful routines and classes
• package and make available for reuse
• saves in development cost time
• central libraries make it possible to make a
  single change and propogate

• external style sheets place the style definitions
  in separate files
• multiple pages can link to the same style sheet,
  consistent look across a site
• possible to make a single change and propagate
  automatically
• represents the ultimate in content/representation
  separation

32
Modularity style sheets
lthtmlgt lt!-- Dave Reed page23.html 1/16/04
--gt ltheadgt lttitlegtTitle for Pagelt/titlegt
ltlink rel"stylesheet" type"text/css"
href"myStyle.css"
title"myStyle"gt lt/headgt ltbodygt lth1gtCentered
Titlelt/h1gt ltp class"indented"gtThis paragraph
will have the first line indented, but subsequent
lines will be flush.lt/pgt ltpgtThis paragraph will
not be indented. lt/pgt lth1gtThe
Endlt/h1gt lt/bodygt lt/htmlgt
lt!-- myStyle.css Dave Reed 1/16/04 --gt h1
color blue text-align center p.indented
text-indent0.2in

• ideally, the developer(s) of a Web site would
  place all formatting options in an external style
  sheet
• all Web pages link to that same style sheet for a
  uniform look
• simplifies Web pages since only need to specify
  structure/content tags

view page in browser
33
Web rules of thumb

• HTML provides for lots of neat features,
• but just because you can add a feature doesn't
  mean you should!
• don't add features that distract from the content
  of the page
• use color fonts sparingly and be careful how
  elements fit together
• e.g, no purple text on a pink background, no
  weird fonts
• use images only where appropriate
• e.g., bright background images can make text hard
  to read
• e.g., the use of clickable images instead of
  buttons or links can slow access
• don't rely on window or font size for layout
• e.g., font size may be adjusted by viewer, window
  constrained
• dont be annoying
• e.g., no pop-up windows, excessive advertising,
  silly music
• break large document into smaller or provide a
  menu (either internal or frame)

34
NEXT