Lesson-9 2

You might also like

Download as pdf
Download as pdf
You are on page 1of 8
‘True or False: Write T if the sentence is correct; otherwise, write F on the space before each item. 1. HTML stands for Hypertext Markup Language. 2. The banner is where the privacy policy, terms of use, sitemap, —— social media icons and links to other important pages on the website are located. 3. The website should be regularly updated and tested so that problems can be easily resolved. 4. A website is a collection of web pages coded in HTML that are linked to each other and to pages on other sites. 5. A website has portable design when the site is accessible at a variety of speeds. 6. CSS stands for Cascading Style Sheets. 7. White spaces should not be used deliberately when designing a website. 8. The home page is the first page of your website. 9. In website designing, shapes can be used to denote boundary. 10. WYSIWYG stands for What You Sense Is What You Get. i, LESSON per) Aweb page is a document created for the World Wide Web (www) that can be accessed via a web browser such as Firefox, Google Chrome, Microsoft Edge, or Apple’s Safari. It may include many types of data or resources that you can see, hear, and interact with. A web page could include text, graphics, sound, video, and animation. You may ask, how is web page different from website? A web page is one of many files that make up a website; an example is a home page or a contact page of a particular site. A website on the other hand is a collection of web pages coded in HTML that are linked to each other and to pages on other sites. Examples of these websites are facebook.com, youtube.com, google.com and gmanetwork.com. Remember, all websites are made accessible through the use of the Internet. ‘There are many software available which you can use to create a web page. Back in the day, in order to create a decent website, you would have to learn, HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets). ‘Today, we use the WYSIWYG (What You See Is What You Get) editor. This means that all you write, insert, draw, put, rearrange, and everything you do on a page is what the audience will see. In this particular lesson, you will be creating your own website. But before we proceed to the creation of such, there are important elements and principles that we need to follow when creating a website. Basic Web Design Principles and Elements Web design is a concept where websites are planned, created, updated, and maintained. A good website design allows the user to understand the message, contents, and ideas in the most convenient way. ‘Web Design Elements In order to create an attractive, technically sound and effective web design, elements must be organized in a manner that is pleasing to the eye, well- coordinated, and that maintains good balance between elements. 1, Text ~ font family and type must be chosen correctly, simply, and in readable format. 2. Graphics/Ilustrations — must be of high quality and the text and other elements must be well organized. 3. Shapes ~ may be used to exemplify an enclosed boundary in the web page’s overall layout. Any type, such as normal geometric or abstract shape, that can be positioned that match the user's design can be placed. You should play with whatever shape you consider is appropriate. 4, Background - or texture will help provide your website with a feeling of a surface underneath. To make it look more attractive, this feature must be used to bring out the content offered on the website. 5. Color ~ must blend well and go with the elements on the page. It will help to achieve this effect by using bright and bold colors that attract but don't disrupt too much. 6. Video/Audio ~ can help viewers understand quickly what you are teaching or selling. 7. Links ~ will enable users to connect to another site or page that is related to the content of your page or site. Web Design Principles A good website design should be attractive, functional, responsive and useful. Follow the basic principles of effective web design to create a functional and impressive website. 1. Portable Design - website design must be portable and available to end users who have various browsers, operating systems, and computer platforms. Often check compatibility by viewing your sites through other browsers. 2. Design for Low Bandwidth - website design must be available at different speeds. Avoid large graphics or animations because if downloading is slow, users will leave the site. 3. Direction ~ define the order of importance of the different elements and position them in a sequence where the eye moves and perceive the objects it sees. Design and structure should be consistent. 4. Accessibility ~ a visitor must be able to quickly access the information when he/she enters the website. This means that the text needs to be legible/readable, the colors have to establish visual harmony and balance, and pictures should be of high quality. 5. White Spaces - use white spaces intentionally as breathing space in your design. White spaces can also be used to indicate division of content. 6. Simplify — the more choices you add in your site, the more difficult it is for a visitor to make a decision and more time is required to browse through them. Simplify you web page by removing distracting options and clutter. 7. Convenience ~ to allow users to make an action, the click buttons should ‘be accessible and strategically placed in the web page. 8. Regular testing - the website should be periodically upgraded, updated, and reviewed so that bugs can be fixed quickly. This includes the hyperlinks and the loading of images and other elements in the page. Visitors will not stick around or proceed if they encounter problems in loading or viewing. Parts of a Website 1. The Header Awebsite’s header or banner is the consistent section at the top of the site with the logo and navigation menu in it. It is a zone at the top of the page that stays Diamond Colston, Wedding Rings me x: A header might include: = Logo * Phonenumber = Navigation menu * Buttons + Address «Social media icons + Tagline "Search box Login or My Account link 2. ‘The Menu System ‘These are the hyperlinks at the top of the page to help you find what you're searching for. Typically, the navigation links are in or just below the header for convenient access. For certain situations, putting the navigation bar vertically on the left side of each page might be sensible. ‘The navigation bar/menu tab allows the visitors to search other website links. or sites. It appears in all pages within a website for more easy navigation. olor ne} UNIVE AeL ele jouaioe Pee ee ed Common menu found in a website: a. Home - A home page is a web page that serves as the starting point of website. This is usually the main web page that a user can see while heading to a website from a search engine, and it may also serve as a landing page for attracting web users. b. About - The primary purpose of your site's About Us page is to provide information about your website and what it can do or deliver. c. Contact - Acontact page is a common web page on a website that allows visitors to contact the organization or individual providing the website. Menus found in a website varies depending on the nature of the organization or business. 3. The Content Area This is where the main content of the web page is positioned. Content can be in a number of different forms such as text, images, video and Flash movies. Sound can also be inserted in a web page such as background music. Website content is the information your visitors consume. 4. Sidebar A sidebar is website region used to view information that is not part of the mair content of the page. A sidebar can include an opt-in, call to action, links t other parts of the website, links to popular or recent blog posts, ads, socia media links, or a brief “About” paragraph for context. 8. The Footer A footer serves the same function as the header — 's a region on a website that’s constant from page to page — except a footer is at the bottom of a page, rather than at the top. The following information may be included in the footer: copyright information, contact detail icons, a search box, and many more. , a map, links, opt-ins, social

You might also like