TERMINOLOGIES USED IN WEBPAGE DESIGN

Web authoring softwares – these are application /software programs that allow webpages to be visually created. It generates the required HTML code for the pages.

Examples of web designing software include Word Press, Joomla, MS front page, adobe Dreamweaver, notepad, wampserver, color wheel

Webmaster - is a person who Creates and manages the information content (words and pictures) of a Web site or does both.

Website Hosting - Service that allows individuals and organizations to have their own websites accommodated on a particular web server

Web hosts - are companies that provide space (web hosting) on a server they own for use by their clients. A web site can also be hosted on a home or private server in a home or local area network.

Website - Collection of related hyperlinked web pages hosted on a particular webserver on the World Wide Web (www).

WWW – Worldwide web, is the interconnection of computers in the whole world

Webpage - Is a document, typically written in HTML that is accessible via HTTP (hypertext transfer Protocol)..

Hyperlink - is the reference or navigation element in a document to another section of the same document or to another document that may be on a different website.

HTML - (Hypertext Markup Language) HTML uses blocks of text enclosed within angled brackets which are referred to as HTML tags.

These tags are codes which describe the structure and formatting of the document (how the web page is displayed by the browser).

Home page - A home page is the first page of a website; it contains the introductory information about the site. sometimes it is called index page.

A webserver- is a piece of computer software that can respond to the browsers request for a page and deliver the page to the browser through the internet.

A web browser- is a computer program that is used to display webpages. examples of web browsers include, google chrome, mozilla fire fox, opera, Ms edge, safari etc

FEATURES OF A WEBSITE

- Home page

- Activities

- About us

- Contact

- Content

- Hyperlinks

- Social media integration e.g twitter, Facebook, what sap etc

- FAQ (frequently asked questions)

CHARACTERISTICS OF A GOOD WEB SITE

• It should be easy to navigate

• It should have a Simple and clear layout of sections and content

• It must be pleasing to the eye to encourage visitors to the site.

• It should load quickly to avoid disappointing potential visitors to the site.

• It should have readable font, web safe eye pleasing colors so that visitors can read the content easily.

• It should be interactive with contact information, possibility of e-mail, online communication forum and chats. Message boards etc.

• It should have active links

• It should be frequently updated and must have a dated of last update.

• The web pages must have web page titles and brief summaries about the page or site.

• All pages in the web site should have a uniform layout.

USES OF A WEB PAGE OR WEB SITE

-A web site is a Publicity tool or exposure to the public of organizations such as a business or school.

-It is a Communication tool for information exchange between an organization and the public or a group of people.

-A website provides a convenient and cheap base of operation for individuals and businesses. For example, owners of websites can easily advertise on their websites.

-A website is Useful in Marketing of products.

-Web sites can be a source of income to advertisers and web site developers.

-it can create friendship

-promotes the sharing of information

-is used for research

RELEVANCE OF SCHOOL WEBSITES

-School academic work can be posted on a school website for students to access.

-Homework assignments may be included along with web-based activities that students can complete after school.

-Web Quests and research activities may be posted on to a school web site,

-Teachers can share ideas with other teachers and make them available to everyone else on the Website.

-It is possible to Communication to parents and the general public.

-Parents can have private access to their child’s class work and keep abreast of homework/prep assignments, field trips and other events.

-The school website is used to show school information and policy. Such information as school History, Mission, plans, alumni, anthem and address. School policy information might include use of the Internet in school, promotion requirements, dress code, absences, and behavior expectations.

-The site can be used to encourage parent involvement in school activities by keeping them informed.

-PTA meetings and fundraising activities-enabling parents find the activities that fit their time and schedule constraints as well as their interests.

-It helps to develop school spirit by allowing Students to submit articles, reports on class trips, and special school events in form of newsletters.

-Involving students gives them a chance to share their thoughts in writing and build school spirit.

TYPES OF WEBSITES

- Personal website- this type of website is useful for family, teenagers, grandparents, etc to stay in touch with each other.

- Photo sharing website- e.g http://flickr.com, photo site resources and information etc.

- Writers/authors websites- this is includes biography, a catalog of published books and works, links to publication on sites

- Community building websites- these are social, forum and sharing websites. they build online communities of people who want to interact with other people socially eg Facebook, twitter,

- Mobile device websites- these websites are mobile friendly. Standard websites are difficult to view and sometimes take long to download on some of these devices with their small screens and wireless connections therefore anew domain designation was created to identify mobile friendly websites.

- Blogging websites- this is a web log (shortened as blog) for online diaries, journals or editorials. It is small than a website.

- Information website- for example, Wikipedia.org, encyclopedia,

- Online business brochure/catalog websites- eg certificates, different cards, etc

- E-commerce- this is online buying and selling of goods eg. Jumia, amazon etc.

PLANNING A WEBSITE

-Set your purpose and goals- what is the purpose of your website?

-Create a budget- eg funds for web site designing

-Content strategy- which kind of content will you e displaying? Content can include but not limited to documents, videos, pictures, slide shows, embedded social media

-Structure your website- decide which features will be on each page

-Create a mock-up- also known as a wireframe, is essentially the outline of your WEBSITE to give everyone an idea of how the website will look like

- Start designing your webpages

- Test it out – this helps to catch the details that you might have missed initially

- Launching and maintenance- Once your website is launched, the work isn’t over. A website is an ongoing entity that continuously represents your company so maintenance is very important

STRUCTURE OF WEBPAGE DOCUMENT

<html>

<head>

<title>your document title goes here</title>

</head>

<body>

your document text goes here

</body>

</html>

HEAD - The second tag in your document. Enclosed within the beginning tag: <HEAD> and the ending tag: </HEAD> is information about the document that will not display in the body of the document.

TITLE - The document title, which is enclosed with a begin title tag: <TITLE> and an end title tag: </TITLE>, all of which is enclosed with the HEAD tags above. The title does not display as part of the document itself, but appears in the browser window title. It is also what is used to name your document in a bookmark list.

BODY - The complete text of your document is wrapped by a begin body tag: <BODY> and an end body tag: </BODY>.

HTML EDITORS - An HTML editor is a software application for creating web pages. Although the HTML markup of a web page can be written with any text editor such as Note pad, specialized HTML editors can offer convenience and added functionality. For example, many HTML editors work not only with HTML, but also with related technologies such as CSS, XML and JavaScript or ECMAScript, and PHP. In some cases they also manage communication with remote web servers via FTP and WebDAV, and version management systems such as CVS or Subversion.

There are many HTML Editors for purchase or download. Recent versions of Word and WordPerfect have HTML Editors, or you can choose to use a dedicated HTML editor such as FrontPage or Dreamweaver.

When using a word processing application to create an HTML file, open the word processed document, then select the menu option FILE : Save As HTML or choose to use the Ms Word web page wizard.

HTML codes, also referred to as HTML tags, are enclosed by the lesser than (<) and greater

than (>) brackets and may be written in capital or lower case letters.

.The opening bracket is followed by an element, which is a browser command, and ends with the

closing bracket.

An element may also be followed by attributes, which are words describing the properties of the

element, and further instruct the browser.

.Attributes are only contained in the opening HTML tags to the right of the element and are separated by a space and followed by an equal (=) sign.

The value follows the equal sign and is enclosed in quotes.

Examples of Basic HTML tags

.For each attribute, there is an opening and a closing tag;

Example of basic document structure:

<HTML>

<HEAD>

<TITLE>your document title goes here</TITLE>

</HEAD>

<BODY>

Your document text goes here

</BODY>

</HTML>

The very first tag in your document: <HTML> and the very last: </HTML>

.HEAD

The second tag in your document. Enclosed within the beginning tag: <HEAD> and the ending tag: </HEAD> is information about the document that will not display in the body of the document.

.TITLE

The document title, which is enclosed with a begin title tag: <TITLE> and an end title tag: </TITLE>, all of which is enclosed with the HEAD tags above.

The title does not display as part of the document itself, but appears in the browser window title. It is also what is used to name your document in a bookmark list.

.BODY

The complete text of your document is wrapped by a begin body tag: <BODY> and an end body tag:

</BODY>.

HTML EDITORS

.There are many HTML Editors for purchase or download. Recent versions of Word and

WordPerfect have HTML Editors, or you can choose to use a dedicated HTML editor such as

FrontPage or Dreamweaver .

.When using a word processing application to create an HTML file, open the word processed document, then select the menu option FILE :

Save As HTML or choose to use the MsWordweb page wizard.

What to consider when designing a web page

.The target or primary audience of the web site.

.The impression you wish the site to create to your visitors.

.The purpose of the website. Whether personal, commercial or educational. This helps to determine the design for it.

.The browser types or version likely to be used by your primary audience to determine the nature of materials to use in the website

.How to organise the site links and web pages to enable easy navigation through the site by visitors.

.To obtain the relevant content to include in your page.

.Obtaining permission to use other people’s copyrighted content or to link to other people’s sites this protects you from any possible legal problems concerning copyright violation.

BASIC HTML TAGS

Block level: these are elements that appear in the body section and are used to structure the document. As the block level begin on the line, you are not required to sepecify the closing tag.

The block level contain in line elements except the ADDRESS element.

Block level elements include

· Headers <H1-H6>

· Paragraph <p>

· Lists items <li>

· Horizontal rule <HR>

· <marquee>

THE MARQUEE TAG:

The <marquee> tag is used to specify the direction of the text, images, tables etc.

The direction may be up, down, left or right. Eg

<html>

<head>

</head>

</body>

</html>

HEADING <H1-H6>

The heading element is used to provide the heading to the text. The headings appear bold bigger, and stringer they stand out from the regular text.

The headings run from H1-H6. H1 is the biggest and H6 is the smallest eg

<html>

<head>

</head>

<H1> introduction to HTML TAGS </H1>

<H2> introduction to HTML TAGS </H2>

<H3> introduction to HTML TAGS </H3>

<H4> introduction to HTML TAGS </H4>

<H5> introduction to HTML TAGS </H5>

<H6> introduction to HTML TAGS </H6>

</body>

</html>

Horizontal rule <HR>

The horizontal rule is a tag used to draw a line across a web page. It has a start tag and forbids and end tag

The following attributes help to control the horizontal rule

· Align: this specifies the position of the horizontal line. you can align center, left, right

· Width: this specifies the length of a line. This can be specified in percentages.

· Default: this is a hundred percentage i.e across the whole document.

· Size: this specifies the thickness of the HR

· Noshade: this specifies that the HR is to be displayed in solid color.

<html>

<head>

</head>

<H1> introduction to HTML TAGS </H1>

<hr>

</body>

</html>

USING FONTS

The font tag is used to control the display of the test on the web page. You can specify attributes like size, color, or face.

The font attributes can be specified for individual word sections and elements on the webpage.

· Color: this is used to specify the font color. You can use color names or hexadecimal values eg blue= #0033CC, RED=#FF0000, WHITE= #FFFFF, BLACK= #000000, YELLO= #FFFF00

· Size; this is used to specify the font size. You can specify a range of sizes.

· Face: this is used to specify font face or type e.g

<html>

<head>

</head>

<H1> introduction to HTML TAGS </H1>

<p><font color=hotpink face=Times New Romans> this is my first HTML document</font>

<p> <font color=blue size= 6>this is going to be real fun</font>

</body>

</html>

CHOOSING ALIGNMENT

The alignment attribute is used to align the html document on the webpage. You can align texts, objects, images, headings, paragraphs etc. the alignment attribute accepts the following values i.e right, center, left e,g

<html>

<head>

</head>

<H1> introduction to HTML TAGS </H1>

<p align=left><font color=hotpink face=Times New Romans> this is my first HTML document</font>

<p> <font color=blue size= 6>this is going to be real fun</font>

</body>

Search This Blog

Tr. Kuule

WebDesign S.4

TERMINOLOGIES USED IN WEBPAGE DESIGN

Comments

Popular posts from this blog

CARE AND SAFETY OF ICT TOOLS S.1

Data Processing cycle S.1

VLOOKUP IN MS EXCEL s.3