Designing a view Component : Part I

Designing a view Component: Views are one of two aspects of boundary components from Jaconson’s Analysis models. Types of View Components There are four fundamental types of views: Data presentation This includes any data presented on a visible screen. There are many forms of presentation including graphs, spreadsheets, listings, and so on. Data forms Forms for data entry are also considered view components. Navigational aids In this, the type of view includes menus, hyperlinks, site maps, and so on. Informational screens or pop ups This type of view includes welcome text, instructions, help…Read more
HTML: Using CSS to assign padding, margins and borders

HTML: Using CSS to assign padding, margins and borders

Introduction CSS provides many properties for formatting your HTML document. In previous articles you learned to apply fonts and colours to elements. In this article you will learn CSS formatting properties that allow you to set an element’s padding, margin and borders. You will also learn CSS formatting properties for setting an element’s height and width. Understanding an element’s padding, margin and borders is straightforward. An element is composed of its opening tag, closing tag, and all content in between the two tags. The box model refers to picturing all elements visually as…Read more

HTML : Using CSS to format hyperlinks

Introduction The formatting you applied to other elements in some of the previous articles can also be applied to hyperlinks. Moreover, you can apply these styles to hyperlinks depending upon the hyperlink’s state. You already know a hyperlink’s states from using the Web. Hyperlinks can be in one of five states: unvisited, moused-over, focused or active and visited. Before you click on a link, it is unvisited. As you move your mouse over the link, it is mousedover. When you actually click the link it is active. Alternatively, you could say a link…Read more

HTML : Using CSS to assign color

Introduction Choosing the right Colors is as important as choosing the correct fonts. The right Colors can make your site feel spooky, professional or even whimsical. Colors, like fonts, help your site convey different feels depending upon your choices. But choosing Colors seemingly at random can make your website’s pages appear unrelated to one another and unprofessional. Color is important; ignore it and your site suffers. Choosing a palette Colors are specified using RGB, hexadecimal or name values. Much like optimising images, a few years ago a tutorial like this would have opened…Read more

HTML : Formatting fonts and text using CSS

Introduction Fonts are fundamental to all written communication. Fonts convey emotion, style and help your writing convey implicit meaning. For instance, if you are chatting in a chat-room or emailing someone and you type USING ALL CAPS, a common Web convention is that you are yelling. A font’s meaning can be subtle. A choice as simple as using Comic Sans rather than Arial can convey an entirely different mood. Welcome to My Site (Comic Sans) The Comic Sans font conveys a loose and informal site while Arial seems more formal. Welcome to My…Read more

HTML : More about CSS

Understanding CSS rules A CSS rule consists of two parts, the selector and the declaration. The selector determines the element(s) affected by the rule. The declaration specifies the action taken. When specifying a selector, you can narrow the affected element to only elements of a specific class or a specific id. When specifying elements of a specific class you use a period between the element and the class name. element.classname When specifying an element with a specific id you place a hash sign between the element and the id. element#id When the browser…Read more

HTML: Introduction to CSS

Cascading Style Sheets (CSS) are what you use to apply style to your HTML documents. A CSS document is a text document that contains one or more rules which tell browsers how to format the elements on an HTML page. A rule consists of a selector that specifies the element to which to apply a style and a declaration that declares which style to apply. Declaration includes two components such as: property and value. There are many CSS properties you can set, including properties for positioning and sizing elements, properties for setting an…Read more

Peep inside HTML Forms

More about HTML Forms Adding Radio Buttons A radio button is an input of type radio. You use radio buttons to select one of two or more values from a group of related choices. For instance, you might be asked to choose your favourite flavoured ice cream from the choices: vanilla, chocolate and strawberry. However, unlike a check-box, a radio button only allows you to choose one of the three. <input type="radio" name="flavor" value="vanilla" checked="checked"/> <input type="radio" name="flavor" value="chocolate"/> <input type="radio" name="flavor" value="strawberry"/> You create a mutually exclusive radio button group by setting…Read more

HTML: Building a simple form

You add a form to an HTML page using the <form></form> tags. Two common form fields are text fields and password fields. These two form fields are both input elements, where text fields have their type indicated as text and password fields as password. Password fields mask the letters as you type so nobody can observe your password when you are typing. You can specify the width of either field using the size attribute, and you can also pre-fill either field with a default value by specifying a value attribute. <input type="password" name="passOne"…Read more

HTML: More about tables and HTML forms

More about Tables:Specifying column spans and row spansTable cells can span multiple columns and/or multiple rows. The columnspan (colspan) attribute tells the browser how many columns a data cell should use and the rowspan the number of rows. These two attributes are important if you want visually appealing tables.Note that when you specify a colspan of more than one, you must omit a <td></td> for every column spanned in the row. When spanning rows, you omit a <td></td> for each row that is being spanned.Specifying a table’s header, body and footerYou can specify…Read more