SlideShare a Scribd company logo
1 of 12
Web	
  Design	
  
        Year	
  10	
  Multimedia	
  
Web	
  Sites	
  

Ê  A	
  website	
  (or	
  web	
  site)	
  is	
  a	
  collection	
  of	
  related	
  web	
  pages,	
  images,	
  
    videos	
  or	
  other	
  digital	
  assets	
  that	
  are	
  addressed	
  with	
  a	
  common	
  
    domain	
  name.	
  

Ê  Within	
  the	
  website,	
  each	
  screen	
  of	
  information	
  is	
  called	
  a	
  page.	
  Pages	
  
    may	
  contain	
  text,	
  graphic	
  images,	
  sound	
  and	
  video.	
  	
  

Ê  A	
  main	
  feature	
  are	
  the	
  "links"	
  embedded	
  within	
  a	
  page	
  that	
  can	
  be	
  
    clicked.	
  These	
  transfer	
  viewers	
  to	
  other	
  pages.	
  	
  
Web	
  Sites	
  (continued)	
  

Ê  A	
  normal	
  information	
  brochure	
  would	
  normally	
  open	
  at	
  the	
  front	
  or	
  the	
  
    back	
  and	
  browse	
  forwards	
  or	
  backwards	
  a	
  page	
  at	
  a	
  time.	
  With	
  a	
  
    website,	
  the	
  user	
  decides	
  the	
  order	
  they	
  want	
  to	
  see	
  the	
  pages	
  in	
  by	
  
    clicking	
  the	
  links	
  that	
  interest	
  them.	
  	
  

Ê  This	
  interactivity	
  generates	
  a	
  sense	
  of	
  ownership	
  and	
  participation	
  in	
  
    the	
  user,	
  binding	
  them	
  to	
  the	
  information	
  much	
  more	
  tightly	
  than	
  a	
  
    traditional	
  brochure.	
  
Web	
  Sites	
  (continued)	
  

Ê  A	
  web	
  site	
  is	
  a	
  collection	
  of	
  folders	
  and	
  files.	
  The	
  files	
  can	
  be	
  
    documents,	
  graphics,	
  multimedia	
  and	
  hypertext	
  markup	
  
    language	
  (html).	
  
Ê  Three	
  pieces	
  of	
  software	
  are	
  mainly	
  used	
  when	
  building	
  web	
  
    sites.	
  
    Ê  An	
  HTML	
  editor,	
  e.g.	
  Dreamweaver,	
  for	
  creating	
  and	
  editing.	
  	
  
    Ê  An	
  image	
  editor,	
  e.g.	
  Photoshop,	
  for	
  creating	
  and	
  editing	
  graphics.	
  
    Ê  A	
  browser,	
  e.g.	
  Internet	
  Explorer	
  or	
  Firefox	
  for	
  viewing.	
  	
  

Ê  Hypertext	
  Markup	
  Language	
  (HTML)	
  
    Web	
  sites	
  are	
  built	
  using	
  Hypertext	
  Markup	
  Language	
  (HTML).	
  
    This	
  code	
  is	
  the	
  language	
  of	
  the	
  Internet.	
  All	
  HTML	
  code	
  is	
  
    created	
  in	
  the	
  background.	
  
HTML	
  (Hypertext	
  Markup	
  Language)	
  
Ê  Web	
  sites	
  are	
  built	
  using	
  Hypertext	
  Markup	
  Language	
  (HTML).	
  This	
  
    code	
  is	
  the	
  language	
  of	
  the	
  Internet	
  for	
  creating	
  web	
  pages	
  and	
  other	
  
    information	
  that	
  can	
  be	
  displayed	
  in	
  a	
  web	
  browser.	
  
Ê  The	
  purpose	
  of	
  a	
  web	
  browser	
  is	
  to	
  read	
  HTML	
  documents	
  and	
  
    compose	
  them	
  into	
  visible	
  or	
  audible	
  web	
  pages.	
  	
  
Ê  HTML	
  is	
  written	
  in	
  the	
  form	
  of	
  HTML	
  elements	
  consisting	
  of	
  tags	
  
    enclosed	
  in	
  angle	
  brackets	
  (like	
  <html>),	
  within	
  the	
  web	
  page	
  content.	
  
Ê  HTML	
  tags	
  most	
  commonly	
  come	
  in	
  pairs	
  like	
  <h1>	
  and	
  </h1>,	
  
    although	
  some	
  tags,	
  known	
  as	
  empty	
  elements,	
  are	
  unpaired,	
  for	
  
    example	
  <img>.	
  The	
  first	
  tag	
  in	
  a	
  pair	
  is	
  the	
  start	
  tag,	
  the	
  second	
  tag	
  is	
  
    the	
  end	
  tag	
  (they	
  are	
  also	
  called	
  opening	
  tags	
  and	
  closing	
  tags).	
  In	
  
    between	
  these	
  tags	
  web	
  designers	
  can	
  add	
  text,	
  tags,	
  comments	
  and	
  
    other	
  types	
  of	
  text-­‐based	
  content.	
  	
  
Common	
  HTML	
  Tags	
  
      <a>	
                        Defines	
  a	
  hyperlink	
  
      <b>	
  or	
  <strong>	
   Defines	
  bold	
  text	
  
      <body>	
                     Defines	
  the	
  document's	
  body	
  
      <br>	
                       Defines	
  a	
  single	
  line	
  break	
  
      <em>	
                       Defines	
  emphasized	
  text	
  (italics)	
  
      <h1	
  >	
  to	
  <h6>	
     Defines	
  HTML	
  headings	
  
      <head>	
                     Defines	
  information	
  about	
  the	
  document	
  
      <img>	
                      Defines	
  an	
  image	
  
      <p>	
                        Defines	
  a	
  paragraph	
  
      <table>	
                    Defines	
  a	
  table	
  
      <td>	
                       Defines	
  a	
  cell	
  in	
  a	
  table	
  
      <title>	
                    Defines	
  a	
  title	
  for	
  the	
  document	
  
      <tr>	
                       Defines	
  a	
  row	
  in	
  a	
  table	
  
CSS	
  (Cascading	
  Style	
  Sheets)	
  

Ê  CSS	
  stands	
  for	
  Cascading	
  Style	
  Sheets	
  

Ê  Styles	
  define	
  how	
  to	
  display	
  HTML	
  elements.	
  

Ê  External	
  Style	
  Sheets	
  can	
  save	
  a	
  lot	
  of	
  work.	
  Styles	
  are	
  normally	
  saved	
  
    in	
  external	
  .css	
  files.	
  External	
  style	
  sheets	
  enable	
  you	
  to	
  change	
  the	
  
    appearance	
  and	
  layout	
  of	
  all	
  the	
  pages	
  in	
  a	
  Web	
  site,	
  just	
  by	
  editing	
  one	
  
    single	
  file!	
  
Good	
  vs.	
  Bad	
  Web	
  Design	
  

In	
  this	
  day	
  and	
  age,	
  we’re	
  all	
  so	
  used	
  to	
  using	
  the	
  internet	
  that	
  a	
  website	
  
needs	
  to	
  do	
  more	
  than	
  just	
  look	
  pretty.	
  	
  

Websites	
  need	
  to	
  be:	
  	
  
Ê  Usable	
  
Ê  Functional	
  
Ê  Appealing	
  	
  
Ê  Meet	
  audience	
  expectations	
  

Unfortunately	
  not	
  all	
  web	
  designers	
  get	
  it	
  right.	
  Surprisingly	
  even	
  some	
  of	
  
the	
  most	
  high-­‐profile	
  websites	
  aren’t	
  able	
  to	
  fulfil	
  these	
  core	
  aims.	
  	
  
Good	
  Web	
  Design	
  

The	
  key	
  purpose	
  of	
  any	
  site	
  is	
  to	
  provide	
  information.	
  Good	
  websites	
  
should	
  provide	
  information	
  in	
  an	
  efficient	
  and	
  easy-­‐to-­‐find	
  manner.	
  Users	
  
should	
  have	
  everything	
  they	
  need	
  at	
  their	
  fingertips	
  without	
  needing	
  to	
  
hunt	
  around	
  for	
  too	
  long.	
  	
  

Effective	
  navigation	
  is	
  vital.	
  A	
  core	
  part	
  of	
  the	
  design	
  process	
  should	
  be	
  
deciding	
  what	
  users	
  will	
  expect	
  to	
  find	
  and	
  delivering	
  it	
  in	
  a	
  clean	
  and	
  
organised	
  way.	
  

A	
  good	
  website	
  needs	
  to	
  be	
  engaging	
  with	
  just	
  the	
  right	
  balance	
  of	
  visual	
  
appeal	
  and	
  operational	
  efficiency.	
  	
  
Bad	
  Web	
  Design	
  
Bad	
  websites	
  tend	
  to	
  prioritise	
  style	
  over	
  substance	
  with	
  high-­‐flying	
  animations	
  
often	
  being	
  seen.	
  Although	
  you	
  might	
  be	
  left	
  with	
  great	
  visuals,	
  you’ll	
  have	
  very	
  
slow	
  speeds	
  and	
  users	
  will	
  often	
  find	
  it	
  difficult	
  to	
  access	
  the	
  required	
  
information.	
  	
  

Bad	
  websites	
  haven’t	
  thought	
  about	
  navigation	
  and	
  often	
  won’t	
  think	
  about	
  the	
  
end	
  user	
  either	
  

Bad	
  websites	
  use	
  sophisticated	
  technologies	
  that	
  won’t	
  work	
  well	
  on	
  older	
  
machines	
  or	
  even	
  smartphones,	
  meaning	
  users	
  won’t	
  get	
  the	
  experience	
  they	
  
need.	
  

Users	
  should	
  not	
  have	
  to	
  look	
  through	
  page	
  after	
  page	
  of	
  information	
  and	
  not	
  be	
  
able	
  to	
  find	
  what	
  they	
  are	
  looking	
  for.	
  

Poor	
  web	
  design	
  can	
  be	
  inconvenient	
  and	
  annoying	
  and	
  visitors	
  may	
  deciding	
  to	
  
look	
  elsewhere.	
  
Web	
  Designers	
  
Web	
  designers	
  design,	
  create,	
  produce	
  and	
  maintain	
  web	
  pages.	
  They	
  
generally	
  work	
  on	
  the	
  layout	
  and	
  visual	
  appearance	
  of	
  websites	
  and	
  online	
  
marketing	
  material.	
  

Web	
  designers	
  focus	
  on:	
  
Ê  the	
  visual	
  appeal	
  of	
  a	
  web	
  site’s	
  design	
  
Ê  the	
  colour	
  palette	
  
Ê  imagery	
  
Ê  font	
  selection	
  
Ê  content	
  layout	
  
Ê  use	
  of	
  interactive	
  content	
  such	
  as	
  flash	
  
Ê  how	
  all	
  of	
  these	
  elements	
  combine	
  to	
  produce	
  an	
  effective	
  and	
  
    attractive	
  website.	
  
Web	
  Designers	
  (continued)	
  
Web	
  designers	
  also	
  perform	
  the	
  following	
  tasks:	
  
Ê  talk	
  with	
  clients,	
  and	
  discuss	
  ideas	
  to	
  get	
  a	
  clear	
  understanding	
  of	
  their	
  
    requirements	
  
Ê  develop	
  custom	
  programs	
  to	
  extend	
  the	
  functionality	
  of	
  websites	
  
Ê  talk	
  with	
  writers,	
  designers,	
  system	
  administrators	
  and	
  other	
  IT	
  staff	
  to	
  
    make	
  sure	
  the	
  website	
  will	
  fulfil	
  its	
  purpose	
  
Ê  maintain	
  or	
  update	
  the	
  website	
  once	
  it	
  is	
  completed	
  by	
  adding	
  new	
  
    content,	
  illustrations	
  or	
  features	
  
Ê  coordinate	
  other	
  people,	
  such	
  as	
  designers	
  and	
  writers,	
  to	
  help	
  
    maintain	
  the	
  website.	
  

More Related Content

What's hot

HTML Start Up - Introduction to HTML
HTML Start Up - Introduction to HTMLHTML Start Up - Introduction to HTML
HTML Start Up - Introduction to HTMLGrayzon Gonzales, LPT
 
Wd & im session a3 _introduction to web page editors_april 08,2010
Wd & im session a3 _introduction to web page editors_april 08,2010Wd & im session a3 _introduction to web page editors_april 08,2010
Wd & im session a3 _introduction to web page editors_april 08,2010Mahesh Panchal
 
WEB DESIGNING MODULE
WEB DESIGNING MODULEWEB DESIGNING MODULE
WEB DESIGNING MODULEmar jun
 
Web Design & Development - Session 1
Web Design & Development - Session 1Web Design & Development - Session 1
Web Design & Development - Session 1Shahrzad Peyman
 
World wide web with multimedia
World wide web with multimediaWorld wide web with multimedia
World wide web with multimediaAfaq Siddiqui
 
TID Chapter 8 Web Page Development
TID Chapter 8 Web Page DevelopmentTID Chapter 8 Web Page Development
TID Chapter 8 Web Page DevelopmentWanBK Leo
 
Vskills certified html5 developer Notes
Vskills certified html5 developer NotesVskills certified html5 developer Notes
Vskills certified html5 developer NotesVskills
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTMLdilanie77
 
Web 2.0 - what is it?
Web 2.0  - what is it?Web 2.0  - what is it?
Web 2.0 - what is it?Andy Forbes
 
Macromedia Dreamweaver 8
Macromedia Dreamweaver 8Macromedia Dreamweaver 8
Macromedia Dreamweaver 8Jeff Wood
 
BP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog Template
BP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog TemplateBP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog Template
BP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog TemplateSean Burgess
 
Html power point
Html power pointHtml power point
Html power pointmarkbg
 
Personal website assignment
Personal website assignmentPersonal website assignment
Personal website assignmentcheap couk
 
Lecture3 introduction towebpages
Lecture3 introduction towebpagesLecture3 introduction towebpages
Lecture3 introduction towebpagesamitpatil777
 
"Generating static web sites with Middleman"
"Generating static web sites with Middleman""Generating static web sites with Middleman"
"Generating static web sites with Middleman"Tony Camaiani
 
Introduction to Web Design
Introduction to Web DesignIntroduction to Web Design
Introduction to Web DesignVictor M. Ortiz
 

What's hot (20)

Website
WebsiteWebsite
Website
 
HTML Start Up - Introduction to HTML
HTML Start Up - Introduction to HTMLHTML Start Up - Introduction to HTML
HTML Start Up - Introduction to HTML
 
Grade 10 COMPUTER
Grade 10 COMPUTERGrade 10 COMPUTER
Grade 10 COMPUTER
 
Wd & im session a3 _introduction to web page editors_april 08,2010
Wd & im session a3 _introduction to web page editors_april 08,2010Wd & im session a3 _introduction to web page editors_april 08,2010
Wd & im session a3 _introduction to web page editors_april 08,2010
 
WEB DESIGNING MODULE
WEB DESIGNING MODULEWEB DESIGNING MODULE
WEB DESIGNING MODULE
 
Web Design & Development - Session 1
Web Design & Development - Session 1Web Design & Development - Session 1
Web Design & Development - Session 1
 
World wide web with multimedia
World wide web with multimediaWorld wide web with multimedia
World wide web with multimedia
 
TID Chapter 8 Web Page Development
TID Chapter 8 Web Page DevelopmentTID Chapter 8 Web Page Development
TID Chapter 8 Web Page Development
 
Vskills certified html5 developer Notes
Vskills certified html5 developer NotesVskills certified html5 developer Notes
Vskills certified html5 developer Notes
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
Web 2.0 - what is it?
Web 2.0  - what is it?Web 2.0  - what is it?
Web 2.0 - what is it?
 
Macromedia Dreamweaver 8
Macromedia Dreamweaver 8Macromedia Dreamweaver 8
Macromedia Dreamweaver 8
 
BP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog Template
BP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog TemplateBP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog Template
BP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog Template
 
Html power point
Html power pointHtml power point
Html power point
 
Personal website assignment
Personal website assignmentPersonal website assignment
Personal website assignment
 
Lecture3 introduction towebpages
Lecture3 introduction towebpagesLecture3 introduction towebpages
Lecture3 introduction towebpages
 
"Generating static web sites with Middleman"
"Generating static web sites with Middleman""Generating static web sites with Middleman"
"Generating static web sites with Middleman"
 
Introduction to Web Design
Introduction to Web DesignIntroduction to Web Design
Introduction to Web Design
 
WEB DEVELOPMENT
WEB DEVELOPMENTWEB DEVELOPMENT
WEB DEVELOPMENT
 
Html5
Html5Html5
Html5
 

Viewers also liked

Industry Study
Industry StudyIndustry Study
Industry StudyMr_Casey
 
My Working Life
My Working LifeMy Working Life
My Working LifeMr_Casey
 
Work and Change
Work and ChangeWork and Change
Work and ChangeMr_Casey
 
Medical20 packaging20regulatory20aspect overview-withaudiocompressed (1)
Medical20 packaging20regulatory20aspect overview-withaudiocompressed (1)Medical20 packaging20regulatory20aspect overview-withaudiocompressed (1)
Medical20 packaging20regulatory20aspect overview-withaudiocompressed (1)Lynn Caruso
 

Viewers also liked (6)

Materials
MaterialsMaterials
Materials
 
Slider
SliderSlider
Slider
 
Industry Study
Industry StudyIndustry Study
Industry Study
 
My Working Life
My Working LifeMy Working Life
My Working Life
 
Work and Change
Work and ChangeWork and Change
Work and Change
 
Medical20 packaging20regulatory20aspect overview-withaudiocompressed (1)
Medical20 packaging20regulatory20aspect overview-withaudiocompressed (1)Medical20 packaging20regulatory20aspect overview-withaudiocompressed (1)
Medical20 packaging20regulatory20aspect overview-withaudiocompressed (1)
 

Similar to Web Design

Web Dev - 1 PPT.pdf
Web Dev - 1 PPT.pdfWeb Dev - 1 PPT.pdf
Web Dev - 1 PPT.pdfgdsczhcet
 
Lesson 8 Computer Creating your Website.pdf
Lesson 8 Computer Creating your Website.pdfLesson 8 Computer Creating your Website.pdf
Lesson 8 Computer Creating your Website.pdfAshleyJovelClavecill
 
Web designing and publishing computer studies theory lesson
Web designing and publishing computer studies theory lessonWeb designing and publishing computer studies theory lesson
Web designing and publishing computer studies theory lessonMukalele Rogers
 
Web Designing Training in Ambala ! BATRA COMPUTER CENTRE
Web Designing Training in Ambala ! BATRA COMPUTER CENTREWeb Designing Training in Ambala ! BATRA COMPUTER CENTRE
Web Designing Training in Ambala ! BATRA COMPUTER CENTREjatin batra
 
New microsoft office power point presentation
New microsoft office power point presentationNew microsoft office power point presentation
New microsoft office power point presentationSudhir Yadav
 
New microsoft office power point presentation
New microsoft office power point presentationNew microsoft office power point presentation
New microsoft office power point presentationSudhir Yadav
 
Web development using HTML and CSS
Web development using HTML and CSSWeb development using HTML and CSS
Web development using HTML and CSSSiddhantSingh980217
 
WELCOME-FOLKS--CSS.-AND-HTMLS.pptx
WELCOME-FOLKS--CSS.-AND-HTMLS.pptxWELCOME-FOLKS--CSS.-AND-HTMLS.pptx
WELCOME-FOLKS--CSS.-AND-HTMLS.pptxHeroVins
 
Web designing and development
Web designing and developmentWeb designing and development
Web designing and developmentgherryta
 
Professional ui for a website design
Professional ui for a website designProfessional ui for a website design
Professional ui for a website designRavi Bhadauria
 
Web deveplopment courses in pune
Web deveplopment courses  in puneWeb deveplopment courses  in pune
Web deveplopment courses in puneNidhi Samdani
 
Web deveplopment courses in pune
Web deveplopment courses  in puneWeb deveplopment courses  in pune
Web deveplopment courses in puneNidhi Samdani
 
Fundamentals of web_design
Fundamentals of web_designFundamentals of web_design
Fundamentals of web_designWebliquids
 
4_5926925443935505826.pptx
4_5926925443935505826.pptx4_5926925443935505826.pptx
4_5926925443935505826.pptxLusi39
 
Introduction to HTML 5
Introduction to HTML 5Introduction to HTML 5
Introduction to HTML 5RAHUL SHARMA
 
Webdesigningandpublishingcomputerstudiestheorylesson 101212054612-phpapp02
Webdesigningandpublishingcomputerstudiestheorylesson 101212054612-phpapp02Webdesigningandpublishingcomputerstudiestheorylesson 101212054612-phpapp02
Webdesigningandpublishingcomputerstudiestheorylesson 101212054612-phpapp02Harshith Rockx
 

Similar to Web Design (20)

Web Dev - 1 PPT.pdf
Web Dev - 1 PPT.pdfWeb Dev - 1 PPT.pdf
Web Dev - 1 PPT.pdf
 
Lesson 8 Computer Creating your Website.pdf
Lesson 8 Computer Creating your Website.pdfLesson 8 Computer Creating your Website.pdf
Lesson 8 Computer Creating your Website.pdf
 
Web designing and publishing computer studies theory lesson
Web designing and publishing computer studies theory lessonWeb designing and publishing computer studies theory lesson
Web designing and publishing computer studies theory lesson
 
Web Designing Training in Ambala ! BATRA COMPUTER CENTRE
Web Designing Training in Ambala ! BATRA COMPUTER CENTREWeb Designing Training in Ambala ! BATRA COMPUTER CENTRE
Web Designing Training in Ambala ! BATRA COMPUTER CENTRE
 
Html-meeting1-1.pptx
Html-meeting1-1.pptxHtml-meeting1-1.pptx
Html-meeting1-1.pptx
 
New microsoft office power point presentation
New microsoft office power point presentationNew microsoft office power point presentation
New microsoft office power point presentation
 
New microsoft office power point presentation
New microsoft office power point presentationNew microsoft office power point presentation
New microsoft office power point presentation
 
Web development using HTML and CSS
Web development using HTML and CSSWeb development using HTML and CSS
Web development using HTML and CSS
 
Html
HtmlHtml
Html
 
WELCOME-FOLKS--CSS.-AND-HTMLS.pptx
WELCOME-FOLKS--CSS.-AND-HTMLS.pptxWELCOME-FOLKS--CSS.-AND-HTMLS.pptx
WELCOME-FOLKS--CSS.-AND-HTMLS.pptx
 
Web designing and development
Web designing and developmentWeb designing and development
Web designing and development
 
Professional ui for a website design
Professional ui for a website designProfessional ui for a website design
Professional ui for a website design
 
Web deveplopment courses in pune
Web deveplopment courses  in puneWeb deveplopment courses  in pune
Web deveplopment courses in pune
 
Web deveplopment courses in pune
Web deveplopment courses  in puneWeb deveplopment courses  in pune
Web deveplopment courses in pune
 
Fundamentals of web_design
Fundamentals of web_designFundamentals of web_design
Fundamentals of web_design
 
4_5926925443935505826.pptx
4_5926925443935505826.pptx4_5926925443935505826.pptx
4_5926925443935505826.pptx
 
Introduction to HTML 5
Introduction to HTML 5Introduction to HTML 5
Introduction to HTML 5
 
Webdesigningandpublishingcomputerstudiestheorylesson 101212054612-phpapp02
Webdesigningandpublishingcomputerstudiestheorylesson 101212054612-phpapp02Webdesigningandpublishingcomputerstudiestheorylesson 101212054612-phpapp02
Webdesigningandpublishingcomputerstudiestheorylesson 101212054612-phpapp02
 
ashish ppt webd.pptx
ashish ppt webd.pptxashish ppt webd.pptx
ashish ppt webd.pptx
 
Web designing course bangalore
Web designing course bangaloreWeb designing course bangalore
Web designing course bangalore
 

Recently uploaded

Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticscarlostorres15106
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024Lorenzo Miniero
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brandgvaughan
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Enterprise Knowledge
 
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsMiki Katsuragi
 
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Wonjun Hwang
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationSafe Software
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxhariprasad279825
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsRizwan Syed
 
costume and set research powerpoint presentation
costume and set research powerpoint presentationcostume and set research powerpoint presentation
costume and set research powerpoint presentationphoebematthew05
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...Fwdays
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubKalema Edgar
 

Recently uploaded (20)

Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
 
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special EditionDMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024
 
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food Manufacturing
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
 
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptxE-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
 
costume and set research powerpoint presentation
costume and set research powerpoint presentationcostume and set research powerpoint presentation
costume and set research powerpoint presentation
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
 
Hot Sexy call girls in Panjabi Bagh 🔝 9953056974 🔝 Delhi escort Service
Hot Sexy call girls in Panjabi Bagh 🔝 9953056974 🔝 Delhi escort ServiceHot Sexy call girls in Panjabi Bagh 🔝 9953056974 🔝 Delhi escort Service
Hot Sexy call girls in Panjabi Bagh 🔝 9953056974 🔝 Delhi escort Service
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
 

Web Design

  • 1. Web  Design   Year  10  Multimedia  
  • 2. Web  Sites   Ê  A  website  (or  web  site)  is  a  collection  of  related  web  pages,  images,   videos  or  other  digital  assets  that  are  addressed  with  a  common   domain  name.   Ê  Within  the  website,  each  screen  of  information  is  called  a  page.  Pages   may  contain  text,  graphic  images,  sound  and  video.     Ê  A  main  feature  are  the  "links"  embedded  within  a  page  that  can  be   clicked.  These  transfer  viewers  to  other  pages.    
  • 3. Web  Sites  (continued)   Ê  A  normal  information  brochure  would  normally  open  at  the  front  or  the   back  and  browse  forwards  or  backwards  a  page  at  a  time.  With  a   website,  the  user  decides  the  order  they  want  to  see  the  pages  in  by   clicking  the  links  that  interest  them.     Ê  This  interactivity  generates  a  sense  of  ownership  and  participation  in   the  user,  binding  them  to  the  information  much  more  tightly  than  a   traditional  brochure.  
  • 4. Web  Sites  (continued)   Ê  A  web  site  is  a  collection  of  folders  and  files.  The  files  can  be   documents,  graphics,  multimedia  and  hypertext  markup   language  (html).   Ê  Three  pieces  of  software  are  mainly  used  when  building  web   sites.   Ê  An  HTML  editor,  e.g.  Dreamweaver,  for  creating  and  editing.     Ê  An  image  editor,  e.g.  Photoshop,  for  creating  and  editing  graphics.   Ê  A  browser,  e.g.  Internet  Explorer  or  Firefox  for  viewing.     Ê  Hypertext  Markup  Language  (HTML)   Web  sites  are  built  using  Hypertext  Markup  Language  (HTML).   This  code  is  the  language  of  the  Internet.  All  HTML  code  is   created  in  the  background.  
  • 5. HTML  (Hypertext  Markup  Language)   Ê  Web  sites  are  built  using  Hypertext  Markup  Language  (HTML).  This   code  is  the  language  of  the  Internet  for  creating  web  pages  and  other   information  that  can  be  displayed  in  a  web  browser.   Ê  The  purpose  of  a  web  browser  is  to  read  HTML  documents  and   compose  them  into  visible  or  audible  web  pages.     Ê  HTML  is  written  in  the  form  of  HTML  elements  consisting  of  tags   enclosed  in  angle  brackets  (like  <html>),  within  the  web  page  content.   Ê  HTML  tags  most  commonly  come  in  pairs  like  <h1>  and  </h1>,   although  some  tags,  known  as  empty  elements,  are  unpaired,  for   example  <img>.  The  first  tag  in  a  pair  is  the  start  tag,  the  second  tag  is   the  end  tag  (they  are  also  called  opening  tags  and  closing  tags).  In   between  these  tags  web  designers  can  add  text,  tags,  comments  and   other  types  of  text-­‐based  content.    
  • 6. Common  HTML  Tags   <a>   Defines  a  hyperlink   <b>  or  <strong>   Defines  bold  text   <body>   Defines  the  document's  body   <br>   Defines  a  single  line  break   <em>   Defines  emphasized  text  (italics)   <h1  >  to  <h6>   Defines  HTML  headings   <head>   Defines  information  about  the  document   <img>   Defines  an  image   <p>   Defines  a  paragraph   <table>   Defines  a  table   <td>   Defines  a  cell  in  a  table   <title>   Defines  a  title  for  the  document   <tr>   Defines  a  row  in  a  table  
  • 7. CSS  (Cascading  Style  Sheets)   Ê  CSS  stands  for  Cascading  Style  Sheets   Ê  Styles  define  how  to  display  HTML  elements.   Ê  External  Style  Sheets  can  save  a  lot  of  work.  Styles  are  normally  saved   in  external  .css  files.  External  style  sheets  enable  you  to  change  the   appearance  and  layout  of  all  the  pages  in  a  Web  site,  just  by  editing  one   single  file!  
  • 8. Good  vs.  Bad  Web  Design   In  this  day  and  age,  we’re  all  so  used  to  using  the  internet  that  a  website   needs  to  do  more  than  just  look  pretty.     Websites  need  to  be:     Ê  Usable   Ê  Functional   Ê  Appealing     Ê  Meet  audience  expectations   Unfortunately  not  all  web  designers  get  it  right.  Surprisingly  even  some  of   the  most  high-­‐profile  websites  aren’t  able  to  fulfil  these  core  aims.    
  • 9. Good  Web  Design   The  key  purpose  of  any  site  is  to  provide  information.  Good  websites   should  provide  information  in  an  efficient  and  easy-­‐to-­‐find  manner.  Users   should  have  everything  they  need  at  their  fingertips  without  needing  to   hunt  around  for  too  long.     Effective  navigation  is  vital.  A  core  part  of  the  design  process  should  be   deciding  what  users  will  expect  to  find  and  delivering  it  in  a  clean  and   organised  way.   A  good  website  needs  to  be  engaging  with  just  the  right  balance  of  visual   appeal  and  operational  efficiency.    
  • 10. Bad  Web  Design   Bad  websites  tend  to  prioritise  style  over  substance  with  high-­‐flying  animations   often  being  seen.  Although  you  might  be  left  with  great  visuals,  you’ll  have  very   slow  speeds  and  users  will  often  find  it  difficult  to  access  the  required   information.     Bad  websites  haven’t  thought  about  navigation  and  often  won’t  think  about  the   end  user  either   Bad  websites  use  sophisticated  technologies  that  won’t  work  well  on  older   machines  or  even  smartphones,  meaning  users  won’t  get  the  experience  they   need.   Users  should  not  have  to  look  through  page  after  page  of  information  and  not  be   able  to  find  what  they  are  looking  for.   Poor  web  design  can  be  inconvenient  and  annoying  and  visitors  may  deciding  to   look  elsewhere.  
  • 11. Web  Designers   Web  designers  design,  create,  produce  and  maintain  web  pages.  They   generally  work  on  the  layout  and  visual  appearance  of  websites  and  online   marketing  material.   Web  designers  focus  on:   Ê  the  visual  appeal  of  a  web  site’s  design   Ê  the  colour  palette   Ê  imagery   Ê  font  selection   Ê  content  layout   Ê  use  of  interactive  content  such  as  flash   Ê  how  all  of  these  elements  combine  to  produce  an  effective  and   attractive  website.  
  • 12. Web  Designers  (continued)   Web  designers  also  perform  the  following  tasks:   Ê  talk  with  clients,  and  discuss  ideas  to  get  a  clear  understanding  of  their   requirements   Ê  develop  custom  programs  to  extend  the  functionality  of  websites   Ê  talk  with  writers,  designers,  system  administrators  and  other  IT  staff  to   make  sure  the  website  will  fulfil  its  purpose   Ê  maintain  or  update  the  website  once  it  is  completed  by  adding  new   content,  illustrations  or  features   Ê  coordinate  other  people,  such  as  designers  and  writers,  to  help   maintain  the  website.