Web design - handbook

[Pages:56]Computer Literacy Movement

Building a Modern Society

?

E - Learning

project of computer e-education with open access

- Handbook for Digital Literacy

Human Rights to Education & Information

E - Inclusion

Free Access

WEB DESIGN

Manual Author: Mariza Maini

Author:

Mariza Maini

Translation:

Helena Magovac

Expert review:

Kevin Furlong

Main title:

? project of computer e-education with open access ? Handbook for Digital Literacy

Subtitle:

Web Design

Headline:

Silvija Buni

Publisher:

Open Society for Idea Exchange (Otvoreno drustvo za razmjenu ideja - ODRAZI), Zagreb

Place and date of issue:

Zagreb, 2015.

Copyright:

Feel free to copy, print and distribute the whole or part of this publication including for the purpose of organized learning, whether in public or private educational organizations, but only for non-commercial purposes (do not charge a user for this publication), and with attribution to the source. (Source: ? project of computer e-education with open access). Derived works are not permitted without previous approval from the copyright holder (NGO Otvoreno drustvo za razmjenu ideja - ODRAZI). Contact for approval: info@

 ? project of computer e-education with open access

Introduction

Rapid growth and development of Information Technology (IT) characterizes today's society. As a result, we have grown to depend on the knowledge and competence of an individual in the IT field. And although this dependence is growing from day to day, the human right to education and information has not been extended to the IT field. Problems, that impact our society as a whole, create obstacles and distance people from the main reason and motivation for advancement, from the opportunity. Being computer illiterate in today's world means being someone who is unable to participate in modern society. It also means not to have opportunities. Despite the recognition of the European Commission, UNESCO, OECD and other relevant institutions on the necessity and benefits of computer literacy, there are still groups of people with hindered access to basic computer education (e.g. people with physical disabilities, people with learning difficulties, immigrant workers, the unemployed, people living in remote places where education is not accessible). This Manual, together with additional material published on website, represent our contribution to the realization and promotion of human rights to education and information in the IT field. We hope that this education will help you to master basic computer skills and in this hope we wish that you learn as much as possible and become an active member of the modern IT society. Sincerely yours,

team

is licensed under a Creative Commons AttributionNon-commercial-No Derivative Works 3.0 Croatia License

0/52

 ? project of computer e-education with open access

CONTENT:

1. WEB CONCEPTS ..........................................................................................................................4 1.1. Key Terms...........................................................................................................................4 1.1.1. Understand that the Internet supports a range of services such as the World Wide Web (WWW), File Transfer, email, instant messaging (IM) .....................................................4 1.1.2. Understand the term client/server. Understand the functionality and relationship between the browser and the web server................................................................................4 1.1.3. Understand the terms domain, Uniform Resource Locator (URL), hyperlink, web hosting, search engine. .............................................................................................................5 1.1.4. Understand the use of primary protocols: Transmission Control Protocol/ Internet Protocol (TCP/lP), Hypertext Transfer Protocol (HTTP), File Transfer Protocol (FTP) ............6 1.2. Web Publishing ..................................................................................................................7 1.2.1. Identify the main advantages of having a website: access to a global audience, ease of updating, audience interactivity and cost savings................................................................7 1.2.3 Recognize search engine optimization techniques e.g. including relevant metadata, including a sitemap and website links, registering with a search engine. ...............................7 1.2.4 Recognize the factors that impact web page download speed: audio, video, graphical objects, animation content, and file compression....................................................8 1.3 Legal Issues ........................................................................................................................9 1.3.1 Understand the term copyright and its implications for text, images, audio, and video available on websites ......................................................................................................9

2. HTML ..............................................................................................................10 2.1. Basics of HTML .................................................................................................................10 2.1.1 Understand the term Hypertext Markup Language (HTML).......................................10 2.1.2 Understand the role of W3C consortium in making HTML recommendations. ..........10 2.2. Using HTML ..................................................................................................................10 2.2.1. Using browser to view the website source code.........................................................10 2.2.3. Use markup tag to develop the layout of a web page: , , , ....................................................................................................................................................12

3. CREATING A WEB PAGE ...........................................................................................................13 3.1. Design ................................................................................................................................13 3.1.1. Recognize planning and design techniques.................................................................13 3.2 Using the Application...................................................................................................14 3.2.1 Open, close a web authoring application. Open, close web pages. ............................14 3.2.2 Create, save a new web page to a location on a drive................................................15 3.2.3 Create, save a new web page based on an available template ...................................16 3.2.4 Add, edit a descriptive web page.................................................................................16 3.2.5 The difference between the source code and design view.........................................17 3.3 Enhancing Productivity....................................................................................................17

is licensed under a Creative Commons AttributionNon-commercial-No Derivative Works 3.0 Croatia License

1/52

 ? project of computer e-education with open access

3.3.1 Set basic preferences in the application: default preview browser, default document type, coding, fonts...................................................................................................................17

3.3.2 Using available Help functions.....................................................................................18

3.4 Text Input and Formatting...............................................................................................19

3.4.1 Insert, edit, delete text ................................................................................................19

3.4.2 Understand and use relative font size .........................................................................19

3.4.3 Apply text formatting: bold, italic, font type and color ..............................................20

3.5 Forming paragraphs ........................................................................................................21 3.5.1 Set paragraph properties............................................................................................21

3.5.2 Insert, remove paragraph break, line break ................................................................21

3.5.3 Create, modify numbered or graphical (bulleted) list.................................................22

3.6 Page Formatting ..............................................................................................................24

3.6.1 Set page margins: top, bottom, left, right...................................................................24

3.6.2 Add, modify, remove a page background color, image ..............................................24 3.6.3 Change a web page hyperlink color: visited, active, unvisited....................................25

3.7 Hyperlinks ........................................................................................................................26

3.7.1 Understand the terms absolut and relative hyperlinks...............................................26

3.7.2 Insert, add, remove a hyperlink: text, image...............................................................26

3.7.3 Insert, edit, remove an e-mail hyperlink: text, image..................................................27

3.7.4 Define hyperlink target: same window, new window ................................................27 3.7.5 Set an anchor, insert a link to an anchor .....................................................................28

3.8 Tables ...............................................................................................................................30

3.8.1 Insert, delete a table ....................................................................................................30

3.8.2 Insert, edit a table caption ...........................................................................................31

3.8.3 Align a table: left, center, right....................................................................................32

3.8.4 Modify column width, row height. .............................................................................33

3.8.5 Merge, split cells ..........................................................................................................33 3.8.6 Modify table border width, cell padding, cell spacing ................................................34

3.8.7 Add, remove a table background, graphic, image.......................................................34

4.USING OBJECTS .........................................................................................................................36

4.1. Graphical Objects ...............................................................................................................36

4.1.1. Add, remove an image on a web page .........................................................................36

4.1.2. Set, modify attributes of an image on a web page: size, border, alignment, alternative text ........................................................................................................................36

4.2.1 Add a form to a web page.................................................................................................38

4.2.2. Add, remove single line, multi-line text fields .............................................................38

4.2.3. Add, remove form fields: drop-down, check box, radio button..................................40

4.2.4. Set, modify form field properties: text field, drop-down, check box, radio button...42

is licensed under a Creative Commons AttributionNon-commercial-No Derivative Works 3.0 Croatia License

2/52

 ? project of computer e-education with open access

4.2.6. Add, remove, submit, reset buttons...........................................................................43 4.2.7. Set, modify form action to send form output by email. ............................................43 4.2.7 Set, modify form action to send form output by email..............................................44 5. STYLES ........................................................................................................................................45 5.1 CSS Concepts....................................................................................................................45 5.1.1 Understand the term Cascading Style Sheets (CSS), their use and benefits. ...............45 5.1.2 Recognize the main approaches to applying styles: inline, internal, external.............45 5.1.3 Understand the structure of a CSS rule: selector and declaration (property, value). 46 5.2 Using CSS..........................................................................................................................46 5.2.1 Create, save a new CSS file. .........................................................................................46 5.2.2 Create, modify CSS rules: color, background, font......................................................47 5.2.3 Attach an external CCS to a web page.........................................................................49 6. PREPARE UPLOAD ....................................................................................................................50 6.1. Check .................................................................................................................................50 6.1.1. Identify and fix broken links in a website....................................................................50 6.1.2 Recognize a correct use of content on a web page: including a last updated date, details of software required to open, view files, ensuring compatibility of content with other browsers ........................................................................................................................50 6.1.3 Spell check and make necessary changes....................................................................50 6.2 Publishing ..........................................................................................................................50 6.2.1. Understand the process of uploading, downloading a website to and from a web server .......................................................................................................................................50 6.2.2 Upload, download a website to and from a server .....................................................51 GENERAL TERMS OF USE .............................................................................................................52

is licensed under a Creative Commons AttributionNon-commercial-No Derivative Works 3.0 Croatia License

3/52

 ? project of computer e-education with open access

1. WEB CONCEPTS

1.1. Key Terms

1.1.1. Understand that the Internet supports a range of services such as the World Wide Web (WWW), File Transfer, email, instant messaging (IM)

The Internet or "the network of networks" is a public network that connects computers and computer networks around the world through a common protocol (IP). All connected computers and networks mutually exchange information and use various services. Hence, the Internet is not solely the WWW, or pages and content available from a browser. In fact, the WWW is just one of the services that the Internet offers to its users although it is the most commonly used service. Other available services: File transfer - the file transfer from one computer to another.

E-mail (electronic mail) ? it is the oldest Internet service, and it enables the exchange of digital messages between two or more people.

Instant messaging (IM) ? it enables the exchange of electronic messages between two or more people in real time. Such as chat rooms (Gtalk, MSN, Skype, etc.) that also support nowadays video/ audio/ photo communication exchange.

1.1.2. Understand the term client/server. Understand the functionality and relationship between the browser and the web server

The Internet is probably the best-known example of a client/ server relationship. The difference between a client and a server is big. Here we have two computers/ programs where the client sends requests to a server, and the server processes requests and returns the results to the client. A server is typically a remote computer not visible to the user.

Web server: is the computer/ server whose entire content is visible on a website in a web browser. Web servers are constantly connected to the Internet. We access them through URL. Therefore, if we enter, for example, in a web browser, we are accessing the Google server.

Web browser: enables browsing through websites. Its mechanisms display the content, retrieved from the server, in a correct and understandable way. As such it is an intermediary between the user and the server. (e.g. Google Chrome, Firefox, Internet Explorer, etc.)

is licensed under a Creative Commons AttributionNon-commercial-No Derivative Works 3.0 Croatia License

4/52

 ? project of computer e-education with open access

1.1.3. Understand the terms domain, Uniform Resource Locator (URL), hyperlink, web hosting, search engine.

The domain is a unique name on the Internet. We might say that what in real life the ID is for a human, this is what the domain name is for a web page.

URL (Uniform Resource Locator) is another term for a web address. A URL has three parts:

protocol name (e.g., HTTP) domain name/ hostname (servers address that a user wants to connect with), for

example, file name is optional, implies the access to a file/directory into the principal

webpage. It is separated by slash Therefore, when we enter in the address bar in our web browser, the browser is instructed to connect to a server with the domain by using the HTTP protocol. Hyperlinks are separately marked words, images and other elements on a web page that represent a direct link to additional information. Most often we open other web pages when we click on hyperlinks. Furthermore, we also might be able to open other parts of a web page, download content, and run applications. The image below shows a hyperlink, which is usually marked blue in texts and sometimes underlined to stand out.

Web hosting: after we create a website, it is necessary to store it in a place where it is always available for users. We use Web hosting services/companies for this purpose. They own web servers that have the ability to store content. Search engine: Search engines allow us to search in the Internet for information, images and other types of files stored in various locations available throughout the network. Search engines work according to certain algorithms that show the user relevant, requested search results. At first, information from the various websites is collected and stored and then analyzed to organize and save them in the database for future use. When a user enters an inquiry into the search engine, the database is organized by an index and the user is presented with results that match best the entered search terms. Therefore, it

is licensed under a Creative Commons AttributionNon-commercial-No Derivative Works 3.0 Croatia License

5/52

 ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download