SlideShare uma empresa Scribd logo
1 de 27
5. Site and page design
A well designed website is more than just a collection of linked web pages. It is a
coherent structure, easy navigable and where content can be found with minimum
effort.

     Important advice before designing our website:
     Important advice before designing our website:


1.    Design your website before you write a single web page: have a clear picture of
      how your webpage is to be organized.
2. Pay special attention to the way in which the text is laid out and to fonts and
      colors. If your text is meant to be printed out then make sure that it will look as
      good on the printed page as on the screen.

     -Examples of bad WebPages:
     http://www.webpagesthatsuck.com/worst-websites-of-2011.html
5.1 Web Style Guide
The best practical guidelines for web authors can be found in:

1. The web style guide: The web author’s “Bible "contains useful guidelines on site,
interface and page design and is the reference which every web author should consult
before designing a web page. http://www.webstyleguide.com/wsg3/index.html

2. Jakob Nielsen’s website: another well known authority on web page design
5.2 Homepage
Every website should have a homepage which is normally the main point of entry to the site,
   ideally with an easy URL.

-The homepage should be simple and short. It is just an entry point to the site and does not need
   much content. Sometimes a homepage just consists of a company logo which you click on to
   enter the main site.

- Conventionally the homepage for any web page is called index.htm or index.html.
   Web servers will automatically search for an index file in a directory so you don’t
   have to specify the name in the URL.
- We can just use http://www.ICT4LT.ORG/

-Instead of http:// www.ICT4LT.ORG/index.html

-Which makes things quick and easier to type.
5.3 Navigation aids

- A site that can not be navigated is useless.

-   A common danger with any hypertext system (language in which the web
    pages are written) is that of being lost in hyperspace. In other words going
    to another web page and not being able to navigate back to the home page

- If you don’t have fixed landmarks with which to orient you’ll become
    completely lost.

- In websites with more than one page it is essential to have some kind of
    navigation aid or map.
-   From the most basic web pages: A homepage with site landmarks, links
    to other webpages.

- To the more sophisticated web pages : Might include a site map or a full-
    blown graphic diagram, an index , and a site search engine.
5.4 shared resources
•    When you make a web page you have to introduce text,images that will be
    shared in many resources, you should put this files on the same directory so
    you can find them easily, to avoid duplication and to make site maintenance
    easier.

• Make a directory only with images, keep them just in case there is a problem
  with the server.

•   When you want to insert a picture or a file in your web page your web page
    editor will go to the common directory where you have your images and files.
    This are relative links. They are local.

• If you do not want to insert those pictures you will use an absolute links and
  you will have to specify the address.
How do relative links differ from absolute links?

        Relative Link:                           Absolute Link
Are images in a predefined location        The address has not been
   in a specified directory where the
   tools, pages, images are stored for
                                           predefined. If I want an
   my web page. They indicate the          image that Its not already
   location of a file relative to the      included in my web site
   document. Stored in a common            folder directory I need to
   directory in the web site folder.       use an absolute address so
                                           the software knows where
-It is better for Web authors to link to   to look for it, the location.
     files within the same website
                                           For example on a hard
     using relative links rather than
     absolute links, as this makes the     drive
     file maintenance easier.
5.5 What should I include on my website?
-Visitors to your website should be able to find out the following information at
    your website:

1. Who created the site?

-    Would should give detailed information on our homepage under the heading
     who are we?

-    We should name the authors of individual modules at the top of each of our
     web pages.

2. Who is the site aimed at? Who is your target audience?

3. When were the contents created and how regularly is the site updated? We
     have to give the revision date at the bottom of each page.
4. Is there a contact address at the site?

5. Is there a feedback form? If you find a mistake or you want to make a comment
    you can use the feedback form .It should be found at the bottom of each page.
    This form helps to cut down spam as it makes less obvious our email address to
    spambots.
6. Evaluation of the website: quality and reliability of the content
7. Bibliographical referencing : recommendations given by the authors of the web
page on how to reference web pages
8. A disclaimer regarding links that we make to external sites:
              -what type of links can we find in our webpage?
             - who are the links managed by?
9. Who owns the copyright on the contents of the site and what are their term uses?
6.Putting your website online
-We have already designed our web page on disc.

                         So how do we uploaded it to the World Wide WEB???

-    in order to expose it to the world wide web you need to make it available online
-    To do this you’ll need to obtain a web account on a computer connected to the
     internet running a web server
-    Then upload your website to the account.

                         So how do I get a Web account???

- Depending on your circumstances, there are a number of ways of getting file space on
     a web server:
    Work, Internet Service Provider, Free Web account providers, DIY- Running your
     own server:
6.1 Getting a web account.
   1. Work:      If your employer maintains a server for their employees.

 Through Your employer you may run a Web server on which you can host your
 site.   For example University you can put you’re a personal page on the
 server of your Company or University. you would have to have a link from the
 index page to your web page.



2.nternet Service Provider:     Almost every ISP ( telefónica) any company
 which provides you with the internet service. will provide its subscribers with a
 web account ( only to access or use the internet ,provides service to the
 internet) when we have our ISP we can use a specialists Web hosting services.
 Providers such as Titan and Amen or yahoo. Provides individuals or
 companies to make their websites accessible.
3. Free Web account providers: There are hundreds of free web space providers
  on the internet, such as Tripod , which offers both free and paid-for accounts that
  offer extra services. Probably free web pages wont offer you much space. Free
  Webspace.net. Is a useful site where you can find suitable providers.


 4. DIY- Running your own server:
                                         If you have an internet connection, either via
  your ISP or your employer, then you can turn your own computer into a web server.
  But it has some disadvantages:
1. If you do not have a lot of knowledge on Web server is very complicated. You will
  spend a decent amount of time reading documentation.
2. Any computer being connected to the internet is at risk of being broken into. So if
  you have sensitive data on your hard disc you may prefer not to use your computer
  as a sever
6.1.1 Domain names
-   If you are setting up a new website you will need to find yourself a domain
    name.
-   Domain names start with http://www which is followed by a dot and then a
    name that you choose for yourself .
               E.g. the ICT4LT website’s name is http://www.ict4lt.org.
-   Domain names always have two or more parts, separated by dots.
-   The part on the left side is more specific and the part on the right more
    general.
-   The ICT4LT website’s domain name is divided into two parts: ict4lt and
    org,
-   The former being the body and the later indicating the kind of body it is.
-   Org= organization, companies can normally be identified by com.
- How do you choose a domain name?          Check that the domain name
you have chosen is not being used by someone else. You can do this via most
hosting service providers or by looking up the name at a domain name
registration site such as Nominet or Register.com




Having found a suitable name, you then find an ISP or hosting service that
will give you adequate Web space for your registered name, and then you can
upload your website.
6.1.2 CGI Scripts – hypertext scripts
    If you want to add interactive features to your website:

    For example searching engines

    -We have to use server-side CGI scripts, the server that hosts your website
    will have like a library of scripts that u can use to insert on your web page.
    Such as navigation bars , form code elements. We select from the menu
    the type of element that we want to insert in to our web page and the
    programming tool generates the hypertext code to perform this function.

•    that is a program/ option used on the web server which process form
    data.
6.2 Uploading your data:
To upload the website files to the web account we need to use FTP file transfer
   protocol Software.

When do we use FTP?     It is used to upload web pages and other documents from
 one computer to another computer. Is a protocol for transferring files.

  - Many web authoring packages for example Dreamweaver or Front Page editors
   which generate hypertext mark up code html incorporate an FTP facility so that
   you can automatically upload files by just pressing a button.

-Some hosting websites provide you editor software to design and make your web
   pages and provide the method to upload it like yahoo.

If you need an FTP Client to upload your webpage the best ones are:

For windows- WSFTP.

For Macintosh- Fetch
6.3 Testing your website
It is important to test your site both on disc and online. You should check that:
     1. The major links in documents work
     2. You do not get any ‘broken image’ icons indicating that an image file
    can’t be found.
    3. The document layout is as you want.
    4. Your site works in all browsers.
- Most HTML editors now have an internal browser, that emulates a website , so that
   you can change from HTML to WYSWYG (what u see is what you get)
- You can view your website before you transfer it to the web page, which is handy to
   use when writing pages.
-To test your site you should do it live, as you can only see if it works by uploading it
   and using it online.
-It is also interesting to check your web page in the different browsers such as Firefox,
   Chrome…to be sure that the pages display as you want them to be viewed
6.3.1 HTML Validators
What are HTML Validators?
                                 Useful tools for testing your site. These are
programs which check your HTML . Verifies that your code has been generated
by your editor consistent with the rules of HTML.

 -Check to make sure that the code is right.

 -W3C Markup validation Service is a popular online validator.
6.3.2 Case sensitivity

- A common cause of errors when generating a site is case sensitivity.

- When you program your web pages with an operating system that is different
   from the host operating system. Case sensitivity may not be the same on
   both. One may be insensitive to capital or small letters and the other may
   not be. The results will be that some of the HTML codes will not be
   recognized and will generate an error .


• Falta example
6.3.3 Checking for dead links-linkrots
    You need to check your site regularly for dead links. Some of the links that you
     have made to interesting and useful sites will suddenly cease to work because the
     site you have linked to has changed its URL, moved or just disappeared. This
     phenomenon is sometimes referred as linkrot .
    The main reasons for linkrot are:
             Webmasters keep reorganizing their . sites, often without leaving
     redirecting messages and consequently URL’S keep changing.
                Some sites or pages simply disappear into the ether.
                Many large sites are now dynamically built, i.e. database-driven. This
      makes administration easier, if we want to add content to the site we just have to
      update the database rather than editing HTML documents. But the visitors may
      have no option but to enter the site through the “front door”.

.
-Most web authoring tools include a facility for checking links. At least for the
     internal links.

-For external links you may have to use a link checker

Xenu Link Sleuth is a free software package that checks websites from broken links.


 When checking your web page you should bare you have in mind:


1.    Keep a note of usefull sites, indicating the name of the person responsible for
      creating the web page into the internet . If the page goes dead then you may be
      able to find it by using a search engine.


2. Once you have created a site containing lots of links make sure that it is properly
      and constantly maintained.
- You may also be able to retrieve the contents of a dead link by entering its
   URL into the Internet Archive ( aka the Wayback Machine) it is an
   enormous archive that keeps records of revisions of websites at various
   stages in their lives http://www.archive.org/
7. A resource for web Authors.
• The HTMGoodies website is aimed at web authors and deals with all the
   issues involved in designing, developing and maintaining websites. It is a
   comprehensive resource for the web author from novice to expert
   http://www.htmlgoodies.com/
8. Case studies
The following sites are examples of work produced by secondary teachers in
the . Using Web Authorizing tools

1.The ashcombe School’s Modern Foreign Language Website: Resources for
teachers and students.
http://www.ashcombe.surrey.sch.uk/Curriculum/modlang/
2.Language Online, Royal Grammar school, High Wycombe: Interactive
   materials for secondary school learners of French, German, Spanish, Latin
   and Italian. http://www.languagesonline.org.uk/

3. St Peter’s School, York: An extensive site for Modern Foreign Languages.
   http://atschool.eduweb.co.uk/stpmlang/

4. Grahams davies’s favourite web sit
   http://www.camsoftpartners.co.uk/websites.htm
8. Copyright issues
• When creating your own website we have to pay attention to copyright.

• If you use of materials from another website make sure that you seek permission
   from the owner of the site if it is not clearly stated that the material are copyright
   free.

• If you include a link to someone’s site it is normally polite to request permission.

• Be careful about using others peoples logos.

• Down lend or donate downloaded materials to collegues in other institutions.

• Do not publish downloaded materials in printed publications or on your own website
   without the express permission of the copyright holder..

• Include your own copyright notice at your website, indicating information about the
   copyright owner, the dates on which the materials were created and your terms of
   use.

Mais conteúdo relacionado

Mais procurados

CSS can help the same webpage looks different on different devices
CSS can help the same webpage looks different on different devicesCSS can help the same webpage looks different on different devices
CSS can help the same webpage looks different on different devicesKanda P
 
The Internet Explained To Your Mum In 5 Slides
The Internet Explained To Your Mum In 5 SlidesThe Internet Explained To Your Mum In 5 Slides
The Internet Explained To Your Mum In 5 SlidesMarcello Brivio
 
03 Teknologi Web 2
03 Teknologi Web 203 Teknologi Web 2
03 Teknologi Web 2Herman Tolle
 
WEB I - 01 - Introduction to Web Development
WEB I - 01 - Introduction to Web DevelopmentWEB I - 01 - Introduction to Web Development
WEB I - 01 - Introduction to Web DevelopmentRandy Connolly
 
More Browser Basics, Tips & Tricks 2 Draft 17
More Browser Basics, Tips & Tricks 2 Draft 17More Browser Basics, Tips & Tricks 2 Draft 17
More Browser Basics, Tips & Tricks 2 Draft 17msz
 
More Browser Basics, Tips & Tricks 3 Draft 8
More Browser Basics, Tips & Tricks 3 Draft 8More Browser Basics, Tips & Tricks 3 Draft 8
More Browser Basics, Tips & Tricks 3 Draft 8msz
 
New or obscure web browsers 4x3 (rcsi draft 6)
New or obscure web browsers 4x3 (rcsi draft 6)New or obscure web browsers 4x3 (rcsi draft 6)
New or obscure web browsers 4x3 (rcsi draft 6)msz
 
Front-End Web Development
Front-End Web DevelopmentFront-End Web Development
Front-End Web DevelopmentYash Sati
 
Basics of Joomla!
Basics of Joomla! Basics of Joomla!
Basics of Joomla! Saurabh Shah
 
Front end web development
Front end web developmentFront end web development
Front end web developmentviveksewa
 
Modules and Components Introduction in Joomla! 2.5
Modules and Components Introduction in Joomla! 2.5Modules and Components Introduction in Joomla! 2.5
Modules and Components Introduction in Joomla! 2.5Vishwash Gaur
 
Download PowerPoint Project on social programming for engineering students
Download PowerPoint Project on social programming for engineering studentsDownload PowerPoint Project on social programming for engineering students
Download PowerPoint Project on social programming for engineering studentsSkyingBlogger
 
Facebook Connect Tutorial
Facebook Connect TutorialFacebook Connect Tutorial
Facebook Connect TutorialPrateek Dayal
 
Joomla Introduction & Installation Tutorial
Joomla Introduction & Installation TutorialJoomla Introduction & Installation Tutorial
Joomla Introduction & Installation TutorialSingsys Pte Ltd
 

Mais procurados (20)

Web development
Web developmentWeb development
Web development
 
CSS can help the same webpage looks different on different devices
CSS can help the same webpage looks different on different devicesCSS can help the same webpage looks different on different devices
CSS can help the same webpage looks different on different devices
 
The Internet Explained To Your Mum In 5 Slides
The Internet Explained To Your Mum In 5 SlidesThe Internet Explained To Your Mum In 5 Slides
The Internet Explained To Your Mum In 5 Slides
 
03 Teknologi Web 2
03 Teknologi Web 203 Teknologi Web 2
03 Teknologi Web 2
 
WEB I - 01 - Introduction to Web Development
WEB I - 01 - Introduction to Web DevelopmentWEB I - 01 - Introduction to Web Development
WEB I - 01 - Introduction to Web Development
 
More Browser Basics, Tips & Tricks 2 Draft 17
More Browser Basics, Tips & Tricks 2 Draft 17More Browser Basics, Tips & Tricks 2 Draft 17
More Browser Basics, Tips & Tricks 2 Draft 17
 
More Browser Basics, Tips & Tricks 3 Draft 8
More Browser Basics, Tips & Tricks 3 Draft 8More Browser Basics, Tips & Tricks 3 Draft 8
More Browser Basics, Tips & Tricks 3 Draft 8
 
New or obscure web browsers 4x3 (rcsi draft 6)
New or obscure web browsers 4x3 (rcsi draft 6)New or obscure web browsers 4x3 (rcsi draft 6)
New or obscure web browsers 4x3 (rcsi draft 6)
 
Front-End Web Development
Front-End Web DevelopmentFront-End Web Development
Front-End Web Development
 
Browsers-sabina ramirez
Browsers-sabina ramirezBrowsers-sabina ramirez
Browsers-sabina ramirez
 
Basics of Joomla!
Basics of Joomla! Basics of Joomla!
Basics of Joomla!
 
Front end web development
Front end web developmentFront end web development
Front end web development
 
Modules and Components Introduction in Joomla! 2.5
Modules and Components Introduction in Joomla! 2.5Modules and Components Introduction in Joomla! 2.5
Modules and Components Introduction in Joomla! 2.5
 
FAQ's in Joomla 2.5
FAQ's in Joomla 2.5FAQ's in Joomla 2.5
FAQ's in Joomla 2.5
 
UC Browser
UC BrowserUC Browser
UC Browser
 
Download PowerPoint Project on social programming for engineering students
Download PowerPoint Project on social programming for engineering studentsDownload PowerPoint Project on social programming for engineering students
Download PowerPoint Project on social programming for engineering students
 
Facebook Connect Tutorial
Facebook Connect TutorialFacebook Connect Tutorial
Facebook Connect Tutorial
 
Facebook API for iOS
Facebook API for iOSFacebook API for iOS
Facebook API for iOS
 
Joomla Introduction & Installation Tutorial
Joomla Introduction & Installation TutorialJoomla Introduction & Installation Tutorial
Joomla Introduction & Installation Tutorial
 
Readme
ReadmeReadme
Readme
 

Destaque

BÀI 6 Làm việc với thành phần mở rộng của CSS3 - Giáo trình FPT
BÀI 6 Làm việc với thành phần mở rộng của CSS3 - Giáo trình FPTBÀI 6 Làm việc với thành phần mở rộng của CSS3 - Giáo trình FPT
BÀI 6 Làm việc với thành phần mở rộng của CSS3 - Giáo trình FPTMasterCode.vn
 
BÀI 7 Triển khai, hướng phát triển cho web mobile - Giáo trình FPT
BÀI 7 Triển khai, hướng phát triển cho web mobile - Giáo trình FPTBÀI 7 Triển khai, hướng phát triển cho web mobile - Giáo trình FPT
BÀI 7 Triển khai, hướng phát triển cho web mobile - Giáo trình FPTMasterCode.vn
 
BÀI 4 Tinh chỉnh môi trường làm việc và làm việc với cách thành phần trên web...
BÀI 4 Tinh chỉnh môi trường làm việc và làm việc với cách thành phần trên web...BÀI 4 Tinh chỉnh môi trường làm việc và làm việc với cách thành phần trên web...
BÀI 4 Tinh chỉnh môi trường làm việc và làm việc với cách thành phần trên web...MasterCode.vn
 
BÀI 4 Làm việc với các thành phần VIDEO, AUDIO, CANVAS của HTML5
BÀI 4 Làm việc với các thành phần VIDEO, AUDIO, CANVAS của HTML5BÀI 4 Làm việc với các thành phần VIDEO, AUDIO, CANVAS của HTML5
BÀI 4 Làm việc với các thành phần VIDEO, AUDIO, CANVAS của HTML5MasterCode.vn
 
BÀI 5 Làm việc với CSS3 - Giáo trình FPT
BÀI 5 Làm việc với CSS3 - Giáo trình FPTBÀI 5 Làm việc với CSS3 - Giáo trình FPT
BÀI 5 Làm việc với CSS3 - Giáo trình FPTMasterCode.vn
 
BÀI 6 Làm việc với thành phần FORM, SPRY trong DREAMWEAVER CS4 - Giáo trình FPT
BÀI 6 Làm việc với thành phần FORM, SPRY trong DREAMWEAVER CS4 - Giáo trình FPTBÀI 6 Làm việc với thành phần FORM, SPRY trong DREAMWEAVER CS4 - Giáo trình FPT
BÀI 6 Làm việc với thành phần FORM, SPRY trong DREAMWEAVER CS4 - Giáo trình FPTMasterCode.vn
 
BÀI 3 Thiết kế web cho di động với dreamweaver CS5 & Jquery - Giáo trình FPT
BÀI 3 Thiết kế web cho di động với dreamweaver CS5 & Jquery - Giáo trình FPTBÀI 3 Thiết kế web cho di động với dreamweaver CS5 & Jquery - Giáo trình FPT
BÀI 3 Thiết kế web cho di động với dreamweaver CS5 & Jquery - Giáo trình FPTMasterCode.vn
 
BÀI 5 Tối ưu hóa thiết kế web và cách làm việc cơ bản trong chế độ hiển thị C...
BÀI 5 Tối ưu hóa thiết kế web và cách làm việc cơ bản trong chế độ hiển thị C...BÀI 5 Tối ưu hóa thiết kế web và cách làm việc cơ bản trong chế độ hiển thị C...
BÀI 5 Tối ưu hóa thiết kế web và cách làm việc cơ bản trong chế độ hiển thị C...MasterCode.vn
 
BÀI 1 Bước đầu làm quen với ADOBE DREAMWEAVER CS4 và những thao tác cơ bản tr...
BÀI 1 Bước đầu làm quen với ADOBE DREAMWEAVER CS4 và những thao tác cơ bản tr...BÀI 1 Bước đầu làm quen với ADOBE DREAMWEAVER CS4 và những thao tác cơ bản tr...
BÀI 1 Bước đầu làm quen với ADOBE DREAMWEAVER CS4 và những thao tác cơ bản tr...MasterCode.vn
 
Giáo trình thiết kế web - Thiết kế web với Dreamweaver
Giáo trình thiết kế web - Thiết kế web với DreamweaverGiáo trình thiết kế web - Thiết kế web với Dreamweaver
Giáo trình thiết kế web - Thiết kế web với DreamweaverKhanhPham
 
BÀI 6 Những yếu tố: tỷ lệ, nhịp điệu, nhấn mạnh và tương phản trong TYPOGRAPH...
BÀI 6 Những yếu tố: tỷ lệ, nhịp điệu, nhấn mạnh và tương phản trong TYPOGRAPH...BÀI 6 Những yếu tố: tỷ lệ, nhịp điệu, nhấn mạnh và tương phản trong TYPOGRAPH...
BÀI 6 Những yếu tố: tỷ lệ, nhịp điệu, nhấn mạnh và tương phản trong TYPOGRAPH...MasterCode.vn
 
BÀI 3 Bố cục trang web & bảng (TABLE) trên trang web - Giáo trình FPT
BÀI 3 Bố cục trang web & bảng (TABLE) trên trang web - Giáo trình FPTBÀI 3 Bố cục trang web & bảng (TABLE) trên trang web - Giáo trình FPT
BÀI 3 Bố cục trang web & bảng (TABLE) trên trang web - Giáo trình FPTMasterCode.vn
 
BÀI 5 Làm việc với FONT, TYPEFACE và tỷ lệ nhịp điệu trong TYPOGRAPHY - Giáo ...
BÀI 5 Làm việc với FONT, TYPEFACE và tỷ lệ nhịp điệu trong TYPOGRAPHY - Giáo ...BÀI 5 Làm việc với FONT, TYPEFACE và tỷ lệ nhịp điệu trong TYPOGRAPHY - Giáo ...
BÀI 5 Làm việc với FONT, TYPEFACE và tỷ lệ nhịp điệu trong TYPOGRAPHY - Giáo ...MasterCode.vn
 
Bài 8 Tạo ảnh cho trang web - Giáo trình FPT
Bài 8 Tạo ảnh cho trang web - Giáo trình FPTBài 8 Tạo ảnh cho trang web - Giáo trình FPT
Bài 8 Tạo ảnh cho trang web - Giáo trình FPTMasterCode.vn
 
BÀI 5 Tổ chức hình vẽ với Layer & Làm việc với Symbol - Giáo trình FPT
BÀI 5 Tổ chức hình vẽ với Layer & Làm việc với Symbol - Giáo trình FPTBÀI 5 Tổ chức hình vẽ với Layer & Làm việc với Symbol - Giáo trình FPT
BÀI 5 Tổ chức hình vẽ với Layer & Làm việc với Symbol - Giáo trình FPTMasterCode.vn
 
BÀI 1 Giới thiệu những khía cạnh tổng quan về thiết kế web - Giáo trình FPT
BÀI 1 Giới thiệu những khía cạnh tổng quan về thiết kế web - Giáo trình FPTBÀI 1 Giới thiệu những khía cạnh tổng quan về thiết kế web - Giáo trình FPT
BÀI 1 Giới thiệu những khía cạnh tổng quan về thiết kế web - Giáo trình FPTMasterCode.vn
 

Destaque (20)

BÀI 6 Làm việc với thành phần mở rộng của CSS3 - Giáo trình FPT
BÀI 6 Làm việc với thành phần mở rộng của CSS3 - Giáo trình FPTBÀI 6 Làm việc với thành phần mở rộng của CSS3 - Giáo trình FPT
BÀI 6 Làm việc với thành phần mở rộng của CSS3 - Giáo trình FPT
 
BÀI 7 Triển khai, hướng phát triển cho web mobile - Giáo trình FPT
BÀI 7 Triển khai, hướng phát triển cho web mobile - Giáo trình FPTBÀI 7 Triển khai, hướng phát triển cho web mobile - Giáo trình FPT
BÀI 7 Triển khai, hướng phát triển cho web mobile - Giáo trình FPT
 
BÀI 4 Tinh chỉnh môi trường làm việc và làm việc với cách thành phần trên web...
BÀI 4 Tinh chỉnh môi trường làm việc và làm việc với cách thành phần trên web...BÀI 4 Tinh chỉnh môi trường làm việc và làm việc với cách thành phần trên web...
BÀI 4 Tinh chỉnh môi trường làm việc và làm việc với cách thành phần trên web...
 
BÀI 4 Làm việc với các thành phần VIDEO, AUDIO, CANVAS của HTML5
BÀI 4 Làm việc với các thành phần VIDEO, AUDIO, CANVAS của HTML5BÀI 4 Làm việc với các thành phần VIDEO, AUDIO, CANVAS của HTML5
BÀI 4 Làm việc với các thành phần VIDEO, AUDIO, CANVAS của HTML5
 
BÀI 5 Làm việc với CSS3 - Giáo trình FPT
BÀI 5 Làm việc với CSS3 - Giáo trình FPTBÀI 5 Làm việc với CSS3 - Giáo trình FPT
BÀI 5 Làm việc với CSS3 - Giáo trình FPT
 
BÀI 6 Làm việc với thành phần FORM, SPRY trong DREAMWEAVER CS4 - Giáo trình FPT
BÀI 6 Làm việc với thành phần FORM, SPRY trong DREAMWEAVER CS4 - Giáo trình FPTBÀI 6 Làm việc với thành phần FORM, SPRY trong DREAMWEAVER CS4 - Giáo trình FPT
BÀI 6 Làm việc với thành phần FORM, SPRY trong DREAMWEAVER CS4 - Giáo trình FPT
 
BÀI 3 Thiết kế web cho di động với dreamweaver CS5 & Jquery - Giáo trình FPT
BÀI 3 Thiết kế web cho di động với dreamweaver CS5 & Jquery - Giáo trình FPTBÀI 3 Thiết kế web cho di động với dreamweaver CS5 & Jquery - Giáo trình FPT
BÀI 3 Thiết kế web cho di động với dreamweaver CS5 & Jquery - Giáo trình FPT
 
7314 l13 slides_vn
7314 l13 slides_vn7314 l13 slides_vn
7314 l13 slides_vn
 
BÀI 5 Tối ưu hóa thiết kế web và cách làm việc cơ bản trong chế độ hiển thị C...
BÀI 5 Tối ưu hóa thiết kế web và cách làm việc cơ bản trong chế độ hiển thị C...BÀI 5 Tối ưu hóa thiết kế web và cách làm việc cơ bản trong chế độ hiển thị C...
BÀI 5 Tối ưu hóa thiết kế web và cách làm việc cơ bản trong chế độ hiển thị C...
 
Web201 slide 6
Web201   slide 6Web201   slide 6
Web201 slide 6
 
BÀI 1 Bước đầu làm quen với ADOBE DREAMWEAVER CS4 và những thao tác cơ bản tr...
BÀI 1 Bước đầu làm quen với ADOBE DREAMWEAVER CS4 và những thao tác cơ bản tr...BÀI 1 Bước đầu làm quen với ADOBE DREAMWEAVER CS4 và những thao tác cơ bản tr...
BÀI 1 Bước đầu làm quen với ADOBE DREAMWEAVER CS4 và những thao tác cơ bản tr...
 
Slide1 html5
Slide1 html5Slide1 html5
Slide1 html5
 
Giáo trình thiết kế web - Thiết kế web với Dreamweaver
Giáo trình thiết kế web - Thiết kế web với DreamweaverGiáo trình thiết kế web - Thiết kế web với Dreamweaver
Giáo trình thiết kế web - Thiết kế web với Dreamweaver
 
Slide2 html5
Slide2 html5Slide2 html5
Slide2 html5
 
BÀI 6 Những yếu tố: tỷ lệ, nhịp điệu, nhấn mạnh và tương phản trong TYPOGRAPH...
BÀI 6 Những yếu tố: tỷ lệ, nhịp điệu, nhấn mạnh và tương phản trong TYPOGRAPH...BÀI 6 Những yếu tố: tỷ lệ, nhịp điệu, nhấn mạnh và tương phản trong TYPOGRAPH...
BÀI 6 Những yếu tố: tỷ lệ, nhịp điệu, nhấn mạnh và tương phản trong TYPOGRAPH...
 
BÀI 3 Bố cục trang web & bảng (TABLE) trên trang web - Giáo trình FPT
BÀI 3 Bố cục trang web & bảng (TABLE) trên trang web - Giáo trình FPTBÀI 3 Bố cục trang web & bảng (TABLE) trên trang web - Giáo trình FPT
BÀI 3 Bố cục trang web & bảng (TABLE) trên trang web - Giáo trình FPT
 
BÀI 5 Làm việc với FONT, TYPEFACE và tỷ lệ nhịp điệu trong TYPOGRAPHY - Giáo ...
BÀI 5 Làm việc với FONT, TYPEFACE và tỷ lệ nhịp điệu trong TYPOGRAPHY - Giáo ...BÀI 5 Làm việc với FONT, TYPEFACE và tỷ lệ nhịp điệu trong TYPOGRAPHY - Giáo ...
BÀI 5 Làm việc với FONT, TYPEFACE và tỷ lệ nhịp điệu trong TYPOGRAPHY - Giáo ...
 
Bài 8 Tạo ảnh cho trang web - Giáo trình FPT
Bài 8 Tạo ảnh cho trang web - Giáo trình FPTBài 8 Tạo ảnh cho trang web - Giáo trình FPT
Bài 8 Tạo ảnh cho trang web - Giáo trình FPT
 
BÀI 5 Tổ chức hình vẽ với Layer & Làm việc với Symbol - Giáo trình FPT
BÀI 5 Tổ chức hình vẽ với Layer & Làm việc với Symbol - Giáo trình FPTBÀI 5 Tổ chức hình vẽ với Layer & Làm việc với Symbol - Giáo trình FPT
BÀI 5 Tổ chức hình vẽ với Layer & Làm việc với Symbol - Giáo trình FPT
 
BÀI 1 Giới thiệu những khía cạnh tổng quan về thiết kế web - Giáo trình FPT
BÀI 1 Giới thiệu những khía cạnh tổng quan về thiết kế web - Giáo trình FPTBÀI 1 Giới thiệu những khía cạnh tổng quan về thiết kế web - Giáo trình FPT
BÀI 1 Giới thiệu những khía cạnh tổng quan về thiết kế web - Giáo trình FPT
 

Semelhante a Ppt ict.pptx 2

Inbound Marketing Agency India | ISHAN-Tech
Inbound Marketing Agency India  | ISHAN-TechInbound Marketing Agency India  | ISHAN-Tech
Inbound Marketing Agency India | ISHAN-TechIshan Mishra
 
Web publishing
Web publishingWeb publishing
Web publishingKanav Sood
 
Std 12 Computer Chapter 3 Designing Simple Website using KompoZer
Std 12 Computer Chapter 3  Designing Simple Website using KompoZerStd 12 Computer Chapter 3  Designing Simple Website using KompoZer
Std 12 Computer Chapter 3 Designing Simple Website using KompoZerNuzhat Memon
 
Seo audit fitpass.co.in via Nikola Minkov / Serpact
Seo audit fitpass.co.in via Nikola Minkov / SerpactSeo audit fitpass.co.in via Nikola Minkov / Serpact
Seo audit fitpass.co.in via Nikola Minkov / SerpactNikola Minkov
 
Csaba Kissi - SEO Tactics 2022
Csaba Kissi - SEO Tactics 2022Csaba Kissi - SEO Tactics 2022
Csaba Kissi - SEO Tactics 2022Mubarok wei
 
Kick start your career with wordpress
Kick start your career with wordpressKick start your career with wordpress
Kick start your career with wordpressOpenDev
 
Websites: Creating Effective Content and Launching Your Site Aug 2014
Websites: Creating Effective Content and Launching Your Site Aug 2014Websites: Creating Effective Content and Launching Your Site Aug 2014
Websites: Creating Effective Content and Launching Your Site Aug 2014Greg Woodham
 
Demystifying The Web
Demystifying The WebDemystifying The Web
Demystifying The WebLoft Creative
 
Web Development Tools
Web Development ToolsWeb Development Tools
Web Development Toolschurchsquared
 
Chapter 4 Web design tech in formation technology msc class .pdf
Chapter 4 Web design tech in formation technology  msc class .pdfChapter 4 Web design tech in formation technology  msc class .pdf
Chapter 4 Web design tech in formation technology msc class .pdfwondimagegndesta
 
Create a stunning, mobile friendly business website with the divi theme
Create a stunning, mobile friendly business website with the divi themeCreate a stunning, mobile friendly business website with the divi theme
Create a stunning, mobile friendly business website with the divi themeMichelle Castillo
 
website planning and creation for beginners
website planning and creation for beginners website planning and creation for beginners
website planning and creation for beginners Shruti Goel
 
Kick start your career with WordPress
Kick start your career with WordPressKick start your career with WordPress
Kick start your career with WordPressJignasa Naik
 
Website designing company in mumbai
Website designing company in mumbaiWebsite designing company in mumbai
Website designing company in mumbaiCss Founder
 
Web development | Derin Dolen
Web development | Derin Dolen Web development | Derin Dolen
Web development | Derin Dolen Derin Dolen
 
Seo technique (TechTalk)
Seo technique (TechTalk)Seo technique (TechTalk)
Seo technique (TechTalk)Vannak Pen
 
Creating a Website with WordPress.org
Creating a Website with WordPress.orgCreating a Website with WordPress.org
Creating a Website with WordPress.orgEileen Lonergan
 

Semelhante a Ppt ict.pptx 2 (20)

Web development
Web developmentWeb development
Web development
 
Technical Seo
Technical SeoTechnical Seo
Technical Seo
 
Inbound Marketing Agency India | ISHAN-Tech
Inbound Marketing Agency India  | ISHAN-TechInbound Marketing Agency India  | ISHAN-Tech
Inbound Marketing Agency India | ISHAN-Tech
 
Web publishing
Web publishingWeb publishing
Web publishing
 
Std 12 Computer Chapter 3 Designing Simple Website using KompoZer
Std 12 Computer Chapter 3  Designing Simple Website using KompoZerStd 12 Computer Chapter 3  Designing Simple Website using KompoZer
Std 12 Computer Chapter 3 Designing Simple Website using KompoZer
 
Seo audit fitpass.co.in via Nikola Minkov / Serpact
Seo audit fitpass.co.in via Nikola Minkov / SerpactSeo audit fitpass.co.in via Nikola Minkov / Serpact
Seo audit fitpass.co.in via Nikola Minkov / Serpact
 
Csaba Kissi - SEO Tactics 2022
Csaba Kissi - SEO Tactics 2022Csaba Kissi - SEO Tactics 2022
Csaba Kissi - SEO Tactics 2022
 
Kick start your career with wordpress
Kick start your career with wordpressKick start your career with wordpress
Kick start your career with wordpress
 
Websites: Creating Effective Content and Launching Your Site Aug 2014
Websites: Creating Effective Content and Launching Your Site Aug 2014Websites: Creating Effective Content and Launching Your Site Aug 2014
Websites: Creating Effective Content and Launching Your Site Aug 2014
 
Demystifying The Web
Demystifying The WebDemystifying The Web
Demystifying The Web
 
Web Development Tools
Web Development ToolsWeb Development Tools
Web Development Tools
 
Chapter 4 Web design tech in formation technology msc class .pdf
Chapter 4 Web design tech in formation technology  msc class .pdfChapter 4 Web design tech in formation technology  msc class .pdf
Chapter 4 Web design tech in formation technology msc class .pdf
 
Presentation1 renan
Presentation1 renanPresentation1 renan
Presentation1 renan
 
Create a stunning, mobile friendly business website with the divi theme
Create a stunning, mobile friendly business website with the divi themeCreate a stunning, mobile friendly business website with the divi theme
Create a stunning, mobile friendly business website with the divi theme
 
website planning and creation for beginners
website planning and creation for beginners website planning and creation for beginners
website planning and creation for beginners
 
Kick start your career with WordPress
Kick start your career with WordPressKick start your career with WordPress
Kick start your career with WordPress
 
Website designing company in mumbai
Website designing company in mumbaiWebsite designing company in mumbai
Website designing company in mumbai
 
Web development | Derin Dolen
Web development | Derin Dolen Web development | Derin Dolen
Web development | Derin Dolen
 
Seo technique (TechTalk)
Seo technique (TechTalk)Seo technique (TechTalk)
Seo technique (TechTalk)
 
Creating a Website with WordPress.org
Creating a Website with WordPress.orgCreating a Website with WordPress.org
Creating a Website with WordPress.org
 

Último

Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17Celine George
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introductionMaksud Ahmed
 
Class 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdfClass 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdfAyushMahapatra5
 
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in DelhiRussian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhikauryashika82
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdfQucHHunhnh
 
Python Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxPython Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxRamakrishna Reddy Bijjam
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxVishalSingh1417
 
Energy Resources. ( B. Pharmacy, 1st Year, Sem-II) Natural Resources
Energy Resources. ( B. Pharmacy, 1st Year, Sem-II) Natural ResourcesEnergy Resources. ( B. Pharmacy, 1st Year, Sem-II) Natural Resources
Energy Resources. ( B. Pharmacy, 1st Year, Sem-II) Natural ResourcesShubhangi Sonawane
 
Seal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptxSeal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptxnegromaestrong
 
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104misteraugie
 
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...EduSkills OECD
 
PROCESS RECORDING FORMAT.docx
PROCESS      RECORDING        FORMAT.docxPROCESS      RECORDING        FORMAT.docx
PROCESS RECORDING FORMAT.docxPoojaSen20
 
Sociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning ExhibitSociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning Exhibitjbellavia9
 
psychiatric nursing HISTORY COLLECTION .docx
psychiatric  nursing HISTORY  COLLECTION  .docxpsychiatric  nursing HISTORY  COLLECTION  .docx
psychiatric nursing HISTORY COLLECTION .docxPoojaSen20
 
On National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan FellowsOn National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan FellowsMebane Rash
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdfQucHHunhnh
 
General Principles of Intellectual Property: Concepts of Intellectual Proper...
General Principles of Intellectual Property: Concepts of Intellectual  Proper...General Principles of Intellectual Property: Concepts of Intellectual  Proper...
General Principles of Intellectual Property: Concepts of Intellectual Proper...Poonam Aher Patil
 
ComPTIA Overview | Comptia Security+ Book SY0-701
ComPTIA Overview | Comptia Security+ Book SY0-701ComPTIA Overview | Comptia Security+ Book SY0-701
ComPTIA Overview | Comptia Security+ Book SY0-701bronxfugly43
 
ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.MaryamAhmad92
 

Último (20)

Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introduction
 
Class 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdfClass 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdf
 
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in DelhiRussian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
 
Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
 
Python Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxPython Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docx
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptx
 
Energy Resources. ( B. Pharmacy, 1st Year, Sem-II) Natural Resources
Energy Resources. ( B. Pharmacy, 1st Year, Sem-II) Natural ResourcesEnergy Resources. ( B. Pharmacy, 1st Year, Sem-II) Natural Resources
Energy Resources. ( B. Pharmacy, 1st Year, Sem-II) Natural Resources
 
Seal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptxSeal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptx
 
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104
 
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
 
PROCESS RECORDING FORMAT.docx
PROCESS      RECORDING        FORMAT.docxPROCESS      RECORDING        FORMAT.docx
PROCESS RECORDING FORMAT.docx
 
Sociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning ExhibitSociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning Exhibit
 
psychiatric nursing HISTORY COLLECTION .docx
psychiatric  nursing HISTORY  COLLECTION  .docxpsychiatric  nursing HISTORY  COLLECTION  .docx
psychiatric nursing HISTORY COLLECTION .docx
 
On National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan FellowsOn National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan Fellows
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdf
 
General Principles of Intellectual Property: Concepts of Intellectual Proper...
General Principles of Intellectual Property: Concepts of Intellectual  Proper...General Principles of Intellectual Property: Concepts of Intellectual  Proper...
General Principles of Intellectual Property: Concepts of Intellectual Proper...
 
ComPTIA Overview | Comptia Security+ Book SY0-701
ComPTIA Overview | Comptia Security+ Book SY0-701ComPTIA Overview | Comptia Security+ Book SY0-701
ComPTIA Overview | Comptia Security+ Book SY0-701
 
ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.
 

Ppt ict.pptx 2

  • 1. 5. Site and page design A well designed website is more than just a collection of linked web pages. It is a coherent structure, easy navigable and where content can be found with minimum effort. Important advice before designing our website: Important advice before designing our website: 1. Design your website before you write a single web page: have a clear picture of how your webpage is to be organized. 2. Pay special attention to the way in which the text is laid out and to fonts and colors. If your text is meant to be printed out then make sure that it will look as good on the printed page as on the screen. -Examples of bad WebPages: http://www.webpagesthatsuck.com/worst-websites-of-2011.html
  • 2. 5.1 Web Style Guide The best practical guidelines for web authors can be found in: 1. The web style guide: The web author’s “Bible "contains useful guidelines on site, interface and page design and is the reference which every web author should consult before designing a web page. http://www.webstyleguide.com/wsg3/index.html 2. Jakob Nielsen’s website: another well known authority on web page design
  • 3. 5.2 Homepage Every website should have a homepage which is normally the main point of entry to the site, ideally with an easy URL. -The homepage should be simple and short. It is just an entry point to the site and does not need much content. Sometimes a homepage just consists of a company logo which you click on to enter the main site. - Conventionally the homepage for any web page is called index.htm or index.html. Web servers will automatically search for an index file in a directory so you don’t have to specify the name in the URL. - We can just use http://www.ICT4LT.ORG/ -Instead of http:// www.ICT4LT.ORG/index.html -Which makes things quick and easier to type.
  • 4. 5.3 Navigation aids - A site that can not be navigated is useless. - A common danger with any hypertext system (language in which the web pages are written) is that of being lost in hyperspace. In other words going to another web page and not being able to navigate back to the home page - If you don’t have fixed landmarks with which to orient you’ll become completely lost. - In websites with more than one page it is essential to have some kind of navigation aid or map.
  • 5. - From the most basic web pages: A homepage with site landmarks, links to other webpages. - To the more sophisticated web pages : Might include a site map or a full- blown graphic diagram, an index , and a site search engine.
  • 6. 5.4 shared resources • When you make a web page you have to introduce text,images that will be shared in many resources, you should put this files on the same directory so you can find them easily, to avoid duplication and to make site maintenance easier. • Make a directory only with images, keep them just in case there is a problem with the server. • When you want to insert a picture or a file in your web page your web page editor will go to the common directory where you have your images and files. This are relative links. They are local. • If you do not want to insert those pictures you will use an absolute links and you will have to specify the address.
  • 7. How do relative links differ from absolute links? Relative Link: Absolute Link Are images in a predefined location The address has not been in a specified directory where the tools, pages, images are stored for predefined. If I want an my web page. They indicate the image that Its not already location of a file relative to the included in my web site document. Stored in a common folder directory I need to directory in the web site folder. use an absolute address so the software knows where -It is better for Web authors to link to to look for it, the location. files within the same website For example on a hard using relative links rather than absolute links, as this makes the drive file maintenance easier.
  • 8. 5.5 What should I include on my website? -Visitors to your website should be able to find out the following information at your website: 1. Who created the site? - Would should give detailed information on our homepage under the heading who are we? - We should name the authors of individual modules at the top of each of our web pages. 2. Who is the site aimed at? Who is your target audience? 3. When were the contents created and how regularly is the site updated? We have to give the revision date at the bottom of each page.
  • 9. 4. Is there a contact address at the site? 5. Is there a feedback form? If you find a mistake or you want to make a comment you can use the feedback form .It should be found at the bottom of each page. This form helps to cut down spam as it makes less obvious our email address to spambots.
  • 10. 6. Evaluation of the website: quality and reliability of the content 7. Bibliographical referencing : recommendations given by the authors of the web page on how to reference web pages 8. A disclaimer regarding links that we make to external sites: -what type of links can we find in our webpage? - who are the links managed by? 9. Who owns the copyright on the contents of the site and what are their term uses?
  • 11. 6.Putting your website online -We have already designed our web page on disc. So how do we uploaded it to the World Wide WEB??? - in order to expose it to the world wide web you need to make it available online - To do this you’ll need to obtain a web account on a computer connected to the internet running a web server - Then upload your website to the account. So how do I get a Web account??? - Depending on your circumstances, there are a number of ways of getting file space on a web server: Work, Internet Service Provider, Free Web account providers, DIY- Running your own server:
  • 12. 6.1 Getting a web account. 1. Work: If your employer maintains a server for their employees. Through Your employer you may run a Web server on which you can host your site. For example University you can put you’re a personal page on the server of your Company or University. you would have to have a link from the index page to your web page. 2.nternet Service Provider: Almost every ISP ( telefónica) any company which provides you with the internet service. will provide its subscribers with a web account ( only to access or use the internet ,provides service to the internet) when we have our ISP we can use a specialists Web hosting services. Providers such as Titan and Amen or yahoo. Provides individuals or companies to make their websites accessible.
  • 13. 3. Free Web account providers: There are hundreds of free web space providers on the internet, such as Tripod , which offers both free and paid-for accounts that offer extra services. Probably free web pages wont offer you much space. Free Webspace.net. Is a useful site where you can find suitable providers. 4. DIY- Running your own server: If you have an internet connection, either via your ISP or your employer, then you can turn your own computer into a web server. But it has some disadvantages: 1. If you do not have a lot of knowledge on Web server is very complicated. You will spend a decent amount of time reading documentation. 2. Any computer being connected to the internet is at risk of being broken into. So if you have sensitive data on your hard disc you may prefer not to use your computer as a sever
  • 14. 6.1.1 Domain names - If you are setting up a new website you will need to find yourself a domain name. - Domain names start with http://www which is followed by a dot and then a name that you choose for yourself . E.g. the ICT4LT website’s name is http://www.ict4lt.org. - Domain names always have two or more parts, separated by dots. - The part on the left side is more specific and the part on the right more general. - The ICT4LT website’s domain name is divided into two parts: ict4lt and org, - The former being the body and the later indicating the kind of body it is. - Org= organization, companies can normally be identified by com.
  • 15. - How do you choose a domain name? Check that the domain name you have chosen is not being used by someone else. You can do this via most hosting service providers or by looking up the name at a domain name registration site such as Nominet or Register.com Having found a suitable name, you then find an ISP or hosting service that will give you adequate Web space for your registered name, and then you can upload your website.
  • 16. 6.1.2 CGI Scripts – hypertext scripts If you want to add interactive features to your website: For example searching engines -We have to use server-side CGI scripts, the server that hosts your website will have like a library of scripts that u can use to insert on your web page. Such as navigation bars , form code elements. We select from the menu the type of element that we want to insert in to our web page and the programming tool generates the hypertext code to perform this function. • that is a program/ option used on the web server which process form data.
  • 17. 6.2 Uploading your data: To upload the website files to the web account we need to use FTP file transfer protocol Software. When do we use FTP? It is used to upload web pages and other documents from one computer to another computer. Is a protocol for transferring files. - Many web authoring packages for example Dreamweaver or Front Page editors which generate hypertext mark up code html incorporate an FTP facility so that you can automatically upload files by just pressing a button. -Some hosting websites provide you editor software to design and make your web pages and provide the method to upload it like yahoo. If you need an FTP Client to upload your webpage the best ones are: For windows- WSFTP. For Macintosh- Fetch
  • 18. 6.3 Testing your website It is important to test your site both on disc and online. You should check that: 1. The major links in documents work 2. You do not get any ‘broken image’ icons indicating that an image file can’t be found. 3. The document layout is as you want. 4. Your site works in all browsers. - Most HTML editors now have an internal browser, that emulates a website , so that you can change from HTML to WYSWYG (what u see is what you get) - You can view your website before you transfer it to the web page, which is handy to use when writing pages. -To test your site you should do it live, as you can only see if it works by uploading it and using it online. -It is also interesting to check your web page in the different browsers such as Firefox, Chrome…to be sure that the pages display as you want them to be viewed
  • 19. 6.3.1 HTML Validators What are HTML Validators? Useful tools for testing your site. These are programs which check your HTML . Verifies that your code has been generated by your editor consistent with the rules of HTML. -Check to make sure that the code is right. -W3C Markup validation Service is a popular online validator.
  • 20. 6.3.2 Case sensitivity - A common cause of errors when generating a site is case sensitivity. - When you program your web pages with an operating system that is different from the host operating system. Case sensitivity may not be the same on both. One may be insensitive to capital or small letters and the other may not be. The results will be that some of the HTML codes will not be recognized and will generate an error . • Falta example
  • 21. 6.3.3 Checking for dead links-linkrots You need to check your site regularly for dead links. Some of the links that you have made to interesting and useful sites will suddenly cease to work because the site you have linked to has changed its URL, moved or just disappeared. This phenomenon is sometimes referred as linkrot . The main reasons for linkrot are: Webmasters keep reorganizing their . sites, often without leaving redirecting messages and consequently URL’S keep changing. Some sites or pages simply disappear into the ether. Many large sites are now dynamically built, i.e. database-driven. This makes administration easier, if we want to add content to the site we just have to update the database rather than editing HTML documents. But the visitors may have no option but to enter the site through the “front door”. .
  • 22. -Most web authoring tools include a facility for checking links. At least for the internal links. -For external links you may have to use a link checker Xenu Link Sleuth is a free software package that checks websites from broken links. When checking your web page you should bare you have in mind: 1. Keep a note of usefull sites, indicating the name of the person responsible for creating the web page into the internet . If the page goes dead then you may be able to find it by using a search engine. 2. Once you have created a site containing lots of links make sure that it is properly and constantly maintained.
  • 23. - You may also be able to retrieve the contents of a dead link by entering its URL into the Internet Archive ( aka the Wayback Machine) it is an enormous archive that keeps records of revisions of websites at various stages in their lives http://www.archive.org/
  • 24. 7. A resource for web Authors. • The HTMGoodies website is aimed at web authors and deals with all the issues involved in designing, developing and maintaining websites. It is a comprehensive resource for the web author from novice to expert http://www.htmlgoodies.com/
  • 25. 8. Case studies The following sites are examples of work produced by secondary teachers in the . Using Web Authorizing tools 1.The ashcombe School’s Modern Foreign Language Website: Resources for teachers and students. http://www.ashcombe.surrey.sch.uk/Curriculum/modlang/
  • 26. 2.Language Online, Royal Grammar school, High Wycombe: Interactive materials for secondary school learners of French, German, Spanish, Latin and Italian. http://www.languagesonline.org.uk/ 3. St Peter’s School, York: An extensive site for Modern Foreign Languages. http://atschool.eduweb.co.uk/stpmlang/ 4. Grahams davies’s favourite web sit http://www.camsoftpartners.co.uk/websites.htm
  • 27. 8. Copyright issues • When creating your own website we have to pay attention to copyright. • If you use of materials from another website make sure that you seek permission from the owner of the site if it is not clearly stated that the material are copyright free. • If you include a link to someone’s site it is normally polite to request permission. • Be careful about using others peoples logos. • Down lend or donate downloaded materials to collegues in other institutions. • Do not publish downloaded materials in printed publications or on your own website without the express permission of the copyright holder.. • Include your own copyright notice at your website, indicating information about the copyright owner, the dates on which the materials were created and your terms of use.