Pengantar Teknologi Web 3 - PowerPoint PPT Presentation

Loading...

PPT – Pengantar Teknologi Web 3 PowerPoint presentation | free to download - id: 72316b-MmM5O



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

Pengantar Teknologi Web 3

Description:

Pengantar Teknologi Web 3 Antonius Rachmat C Teknologi Web Client Web browser HTML / XML / XHTML Javascript / VBScript CSS Flash player Java Applet ActiveX / Plugin ... – PowerPoint PPT presentation

Number of Views:0
Avg rating:3.0/5.0
Date added: 9 January 2019
Slides: 35
Provided by: anton222
Learn more at: http://lecturer.ukdw.ac.id
Category:

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: 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
About PowerShow.com