Friday, February 3, 2012

Using CSS styling with HTML

1) The css fileis (the files with the .css extension, included in the directory where the html files are, on the server) responsible for the presentation (look) of the information (content) included in the html file (the file with htm or html file).
2) Open your favourite text editor enter the CSS basic components, give the file a name and save it with the extension .css. The html file will include in the head tag a refernce to this CSS file.
eg. <head>
<link rel="stylesheet" type="text/css" href="jsites.css">
</head>
3) To decide on the look of the content in the html file using the CSS file, the css file would include for the tags in html a selector and a style block. The style block will include the elemnt properties and the style values.
eg. html file would include the following tags:
<h1>Building sites using Joomla</h1>
<p>Keywords: Site, menus, content, components, extensions, tools, help, add new article, article manager, front page mnanager, section manager, category manager, media manager, menu manager, language manager, user manager, global configuration, control panel, logout, mainmenu, user menu, top menu, banner, contacts, news feed. polls, search, web links, module manager, plug-in manager, template manager, clean cache, mass mail, read messages, write message.</p>
The corresponding CSS file in our example isjsites.css would include the following selectors to tell the html tags how to appear in the page:
h1 { color:red; background:yellow;}
body {background-color:tan;}
p {color:blue;}
The body colour decide on the page background colour.
4) The following topics will be covered, hereafter, how to include styling with html documents, id & class selectors, backgrounds, text, fonts, links, lists, tables, the box model (border, outline, margin & padding), plus a few advanced topics.
5) How to include styling: there are 3 methods the external style sheet, the internal style sheet and the inline styling method.
5-1) For the external style sheet, you open your favourite text editor, enter your style, how you want your web page or pages displayed in the browser, save the document with .css extension and you refer to it inbetween the head tags of the html page or pages.
5-2) For the internal the style of the page is defined in the head (between the head tags) section of the web page and it will be applicable to only this html page. The style tags are used to enclose the style defined in the head section (<style> </style>).
5-3) To use inline styles you use the style attribute in the relevant html tag (eg p, h1,...). The style attribute can contain any CSS property.
To read more, click here.
Posted by at No comments:

Building web sites using HTML tags

1) with HTML plus JS you are in full control, in the look and response of your web page. The use of CSS (cascaded style sheets) will make the look of the web pages in you web site consistent, The use of PHP in your site would enhance it and gives it more functionality.
2) The basic idea of HTML is the use of tags to tell the browser how and what to display in your page. Basically, there are types of tags one having a start and an end tag and the other has only one tag to describe the action or the function. Examples are <b></b> bold and <img src="imagename3.ext">
3) More commonly used tags: <i></i> italics, <u></u> underline. <br>: carriage return or line feed
4) These tags are called elements and can be classified broadly into: document structure elements, anchor element, block formatting elements, character data, document sound, dynamic documents, forms, inline images, character formatting elements, list elements and tables. The latest version is HTML5, the HTML standard is under the control of W3 (world wide web consortium) plus all other web related standards. The most widely acceptable HTML standard is version 4.01. HTML would have more elements (though so far not all browsers support the newer standard. The new tags belong to the following categories: markup elements, media elements, canvas element, form elements and input type attribute values.
5) To start a web page, open your favourite text editor, enter the tags and the text (body of your page) and save the document with .html extension (eg. index.html, index is usually the front page of your web site).
To read more, click here.
Posted by at No comments:

Building web sites using Joomla

Keywords: Site, menus, content, components, extensions, tools, help, add new article, article manager, front page mananager, section manager, category manager, media manager, menu manager, language manager, user manager, global configuration. control panel, logout, mainmenu, user menu, top menu, banner, contacts, news feed. polls, search, web links, module manager, plug-in manager, template manager, clean cache, mass mail, read messages, write message.
1) after downloading and/or installing oomla to your server, go through the existing categories, sections and articles (it is the Hierarchy of building any site using Joomla), deleting or unpublishing those you do not to have in your site. Now you can go to the menu manager, modifying and deleting the existing ones.In the coming steps we shall create a new category, adding to it sections and articles and adding menu items to navigate through the site plus other funcions like external links.
2) our example will include adding a section named Building web sites, a couple of categories the first named HTML, CSS & JS and the second named CMS (content management system). Under the first category we shall have 3 articles named HTML, CSS and JS (javascript).The second category will have 2 articles namely joomla and drupal.
3) Go into Joomla administrator mode (logging into administrator as admin with your password), click Section Manager from the buttons infront of you. Click New button on the top, then enter the Title (in our example we shall call it Building web sites), then for the following parameters select as shown: Published: yes, Access level: public, now click Save shown closer to the top of your screen (you have created a new section and you gave it a title).
4) From the top menu, click Content then choose Category Manager.From the screen in front of you, select New, in the title field, enter the name of your category that belongs to section you created in (3) above (in our example, we enter HTML, CSS, JS), from the drop down list select the section name. Now click Save. Follow this process to create the second category, CMS, that belongs to the section named Building web sites.
5) Now we shall create the articles that belong to either of the categories in step (4) above and these articles contain what we want to show in our web pages. Click Content from the top menu, pick Article manager. From the 2 pull-down list boxes select the following: Section: Building web sites, Category: CMS. Now click the New button, close to the top of the screen, then enter the Title (in our example Joomla), Published, check yes, for Front page and check no. Type in the content (text) of the page whatever subject you want to cover and the visitors read, enter images, links,..etc. and format your text.Click save to save your web page. The same process can be followed to create other articles (web pages). For example you may want to create a Drupal page under the CMS category. Maybe you may want want to enter a page for HTML another for JavaScript under the category HTML, CSS, JS cretd in step (4) above. Note: your front page now will have Joomla as the first item in the Latest portion of the page.
To read more, click here.
Posted by at No comments:

Building web sites using Drupal

Keywords: content management, site building, site configuration, user management, reports, comments, content, content types, post settings, RSS, taxonomy, blocks, menus, modules, themes, access rules, permissions, roles, user settings, actions, administration theme, clean URL, date & time, error reporting, filesystem, image toolkit, input format, logging & alerts, performance, site information, site maintenance, recent log entries, available updates, status reports, access denied & page not found.

1) After downloadin and/or installing Drupal, you log in as uer admin and change the existing password. To do that after logging in with the existing password, you click Administer (in the navigation menu), then choose User management, the click Users, From the users names list, choose admin, then click the Edit tab on the top, enter the required data including the new password (twice), then click save.
2) Log in as administrater (admin), click Create content, then choose Page, enter the title (eg. Front page), click Input format (close o the bottom of the page) and choose Full HTML, now enter the body of the front page. Go tothe Publishing options and click Front page (now this page will be promoted and will be the first page of your site), click save.
3) Click administer, from the Site building section, choose Menus, click Navigation (and leave the other 2 for now, primary & secondary links), click the Add item tab close to the top of the page, enter the Link and Title (eg.../drupal/node/1 and Front page as title) and now click Save. Now you have Front page menu item added to the Navigation menu.
4) Moving page blocks around the web page: click Administer, then click Blocks from the Site building section. In Block table heading in front of you, locate User login, then go to the Region table header click the drop down list and pick Right sidebar, click Save blocks. The login block is moved from the left to the right.
5) Click Menus, choose Primary link, click Add item tab, enter link (eg. ../drupal/node/1) enter title (eg. Front page). Now youwill havea link to the front page displayed at the top of the page. The secondary links would display at lower location (underneath the primary links) on the page.
To read more, click here.
Posted by at No comments:
Subscribe to: Posts (Atom)