File Names

Files are identified by their names and have an extension attached to their names. File name extensions may not be visible, if they are set to be hidden on your computer. The name of the file and its extension are separated by a dot. [Name.Extension]. Generally the extension is only 3 or 4 characters long. Program files mostly have the extension ".exe" (executable), .com (command) or .bat (batch) and data files have an extension based on the program that has been used to make it. The most common program file name extension is .exe. Program Name Program File Related Data File Data File Extension Microsoft Word winword.exe Word document. .doc Microsoft Excel excel.exe Excel Spreadsheet .xls Microsoft Power Point       excel.exe Power Point Presentation .ppt Paint Brush mspaint.exe Bitmap Images that we draw. .bmp Mine Sweeper winmine.exe         No special data file. To set windows to display the file name extensions.. From within any window displaying list of files and folders • Menu Bar Option     Tools | Folder Options ... | View [Tab] on the "Folder Options dialog box" From the "Advanced Settings" list box containing a number of options... Keep the "Hide Extensions for known file types" cleared to display the extensions. Keep it checked to hide the extensions. » Note: All these explanations are relevant in windows working environment.

Executing, Editing, Reading Files

• Program Files are Executed Program Files are made to work on their own. Making a program file work is called "Executing" the Program or Program File (in technical sense) and "Opening the Program or Program File" (in normal usage). Opening Microsoft Word, Microsoft Excel, Microsoft Power Point, Paint Brush, Mine Sweeper, etc. are some examples of executing program files. Program files cannot be edited. The only way they can be used is to make them do the work they are programmed to. • Data Files are Edited/Read Editing and Reading are the two ways in which the data files are handled. » Editing data files Editing the data files implies making changes to an existing file or creating a new file and putting in some content into it. Data files are capable of being edited unless they are locked/barred from being edited. Files which are barred from being edited may be allowed to be read, in which case they are called Read Only files. PDF files that internet users frequently come across, Song files, Movie Files etc which we generally see to be read only. To edit a data file you need the program related to it (in most cases the program that has been used to make it). • Editing a Word Document We edit a Word Document using the program Microsoft Word, Opening an existing document or Creating a new document, making changes to it, saving it in the modified form constitute the task of editing the word document. • Editing a Spreadsheet We edit a spreadsheet (made using excel) using the program Microsoft Excel, Opening an existing Spreadsheet or Creating a new spreadsheet, making changes to it, saving it in the modified form constitute the task of editing the spreadsheet. • Editing a Bitmap Image We edit a bitmap Image using paint brush or any other program which has the capability of editing a bitmap image, like Adobe Photoshop, CorelDraw, etc. Opening an existing image or Creating a new one, making changes to it, saving it in the modified form constitute the task of editing the image. One or more programs may be capable of editing a particular type of data file as in the case of the bitmap image. » Reading a data file We can either edit a data file or just read it. The word reading should be assigned a broader meaning here. It also includes the activities like copying, printing etc. Data files which are only capable of being read are identified as "Read only" files. Eg: 1. If in a word document we cannot edit the contents but can open the document and read it, we say it is a read only document (file). 2. Audio and Video files are also data files. These data files can be opened in the related media programs like windows media player, apple quick time etc. Notice that we only play them in these programs, we never edit them. They are also read only files. [Unless you are using them in some special programs and editing the audio or video]. Even for reading data files you need programs. A program that is used for creating/editing a data file is far more capable than the program that is useful only for reading the data file • Word Document Reader Microsoft Word Reader (Microsoft Word with some features removed) is a program which can be used to open and read, copy, print content. You would need the fully functional word program for editing the word document, you cannot edit it with the reader program. • Reading a PDF file The most common form of a read only file that web users see is a PDF document. If you notice the program name "Adobe Acrobat Reader" carefully, you can see the words reader in the program name for this. "Adobe Acrobat Reader" is a program that has the editing features of the "Adobe Acrobat" program removed. You can edit PDF files in the program "Adobe Acrobat" and can only read them in the program "Adobe Acrobat Reader". The reader program can also be used to print, copy the content of the PDF file (unless the security feature in the program has been used by the one making the PDF file to restrict these functions) Programs which have some of their features disabled are called Stripped down versions.

HTML File Editors, Readers

• HTML Files A file with the file name extension ".htm" or ".html" is a HTML document. Generally we classify a file as a data file, based on the file name extensions. Since it does not have a .exe, .com or .bat extension a HTML file is a data file but not a program file. Therefore, we need a program to edit or read the HTML file. • Content of HTML Files A HTML file is made up of the textual content that is displayed when the file is opened in the browser, as well as the various HTML tags (like <p> , <table>, <div> , </b>, <script>, <body> etc.) embedded within the text [we may also say that the tags surround the text]. To see the source/content in the current file/page in display, choose the menu option ... View | Source on your browser (Or) Right Click and from the short cut menu displayed choose View (Page) Source • HTML Editors A HTML file can be edited in many programs. Any program that can read simple text (Notepad, Wordpad etc) can be a HTML editor. There are specialised HTML editors like Frontpage, DreamWeaver, etc., which are capable of accomplishing additional tasks We can even use a word processing program like Microsoft Word for editing HTML files etc. • HTML Readers » Browser Reading a HTML file does not mean simply displaying the contents of the HTML file. It requires the program reading a HTML file to display the contents based on the HTML tags found in the text making up the file. In general all editors are readers. If a file is capable of being edited in a program it implies that it is capable of being read in that program also (A word document can be edited in the program Microsoft Word and can be read in the same program). However, a HTML editor cannot perform the function of a reader. To read a HTML file you need a special program called a browser. "Internet Explorer", "Fire Fox", "Netscape Navigator", "safari", "Opera" etc are some browser programs.

HTML Tags

HTML = Hyper Text Markup Language Hyper-Text = Machine-readable text that is not sequential but is organized so that related items of information are connected Markup = Detailed stylistic instructions for typesetting something that is to be printed; manual markup is usually written on the copy (e.g. underlining words that are to be set in italics). Markup of text for being interpreted by a browser (Hyper Text Markup) needs the instructions to be placed within special symbols called tags. Tag = A label made of cardboard or plastic or metal. [Price tags attached to the products in display in shops] HTML tags are instructions to the browser. These form instructions to the browser on how to display the content in the browser window. The browser formats the content in a web page based on these tags. For example if you place some text between the tags <b>, and </b>, the browser understands that the text between these tags is to be formatted and displayed in bold. • Opening Tag <name> The opening/beginning HTML tag is a word bound between an opening (left) angle bracket, a closing (right) angle bracket (like <div>, <span>, <table>, <b >, <p>, <img> etc). It indicates the beginning of the content being marked. • Closing Tag </name> The closing tag is the opening/beginning HTML tag with a slash immediately after the opening angle bracket (like </table>, </div>, </span>, </b>, </p>, </img> etc). It indicates the end of the markup.

Web Page

• Web Page » a HTML File A web page in its simplest sense is nothing but a HTML page. A web page can be either a HTML document or other documents consisting of HTML code. The total HTML code within a web page starts with the <HTML> tag and ends with the </HTML> tag. Generally we find these at the beginning and ending of the file respectively. • Pages with .asp, .php, .g, .jsp extensions » Are they Web Pages? The simplest form of web pages are HTML documents (the ones with .htm and .html extensions). You may have come across the file name extensions .htm, .html, .asp, .php, .jsp etc while browsing. Yes, these are also web pages for the person viewing them in his/her browser. The browser would be able to view them in the same manner because all of them have the same HTML tags describing the content within the file. The <HTML> at the beginning of the content in these files enables the browser to understand that these are web pages. » Why these different extensions? These files are treated differently by the server sending those pages. This is because they contain program code that is to be executed and their result is only to be sent to the browser/computer asking for the page.

Blog Post body » HTML

The total content relating to a web page is formed by HTML code (tags). The content that you frequently handle is the blog post body. We try giving you an understanding of the HTML relating to your blog post. Don't get perplexed by all the tags in here. Understand that these are the various tags binding the text that you key in and these would decide the appearance of the content when they are displayed in the browser window. The above post in display in a web page (blog page) after it is posted.

HTML Elements

• HTML Elements Element = A small part of the total whole. A web page i.e. a HTML page is made of a number of small parts called HTML elements. A HTML element is a larger entity than the HTML tag. The beginning and the ending HTML tags together with the content they bind within them forms a HTML element. The words element and tag are synonymously used, though they are technically not so. Almost all the content within a web page is confined within pairs of tags (the beginning tag and the ending tag), thus forming the various HTML elements (the building blocks of the web page). Every HTML element is dealt with as a single unit by the browser. The browser creates the understanding as to what it is and how to deal with it based on the tag related to it. Writing the HTML code implies writing the content that we intend to place on a web page by including them within appropriate tags. Yes, it is as simple as that if you are interested in learning HTML.

HTML Element Attributes

Attribute = An abstraction belonging to or characteristic of an entity The characteristics/attributes of HTML Elements are defined by placing them within the opening tag relating to the element. Each HTML element has its own set of allowed attributes. Two or more attributes can be included at the same time separating them by Space Bar space. The attribute takes the form attribute_name = "attribute_value". Eg: 1. The <p> tag defines a paragraph. If we intend to include some text within a paragraph, we place the <p> tag at the beginning of the text and the </p> tag at the end of the text. A paragraph may be left aligned, right aligned, centered or justified. The name of the attribute that defines the alignment property for a paragraph is "align". Therefore, if we include the statement align="left" within the opening <p> tag (looking <p align="left"> ) the paragraph would be left aligned. The browser would understand that it should format the paragraph element with left alignment by reading the attribute within the tag. Some more examples <font face=arial size=3 color=blue> <font> followed by text till </font> forms a HTML element. There are three characteristics attributed to this element using HTML attributes Name Value To make the browser face arial Apply the font face arial to the characters within the element size 3 Display the characters within the element in size 3. The actual size in which the characters are displayed is dependent on how the browser interprets this size 3, color blue Apply blue color to the characters within the element. These characteristics are applied to all the characters within that element i.e. to the characters that lie between the opening <font> tag and before the ending </font> tag. <div align=center width=200px> <div> followed by any content till the related </div> form a HTML element. There are two characteristics attributed to this element using HTML element attributes. Name Value To make the borwser align center Align all the content (text, images, tables etc) within the element (division) at the center horizontally width 200px Set the width of the element (division) as 200 px. • Number of attributes for an Element The attributes that can be defined for an element are dependent on the element itself. It would be inappropriate to list out the number of possible attributes for each element. You would be getting aware of the attributes that you can use for an element as you keep understanding what each element would represent. Learning HTML is learning about all the possible elements that exist in a HTML document and knowing the attributes allowed for each element along with the possible values that the attribute can take in relation to that element. HTML becomes very easy if you can understand this idea. We once again reiterate, "Yes it is very easy".

Style Attribute

• Style : A special Attribute To have a greater control on the behaviour of HTML elements i.e. on formatting, a special attribute by name style is used. Just like any other attribute, the style attribute is also defined within the opening tag. Unlike the other attributes which set one property to the HTML element, a single style attribute can define multiple characteristics for the HTML element. Element characteristics that are defined using the style attribute are called "properties". Multiple properties are set as values within the same style attribute using ";" (semi-colon) as a separator. The style attribute takes the form style = "property_name1 : value; property_name2 : value ; .... ". <p align=right style"font:14px verdana; border:1px solid red"> <p> indicates the beginning of a paragraph. align=right [attribute] To make the content within the paragraph (text, images, tables etc) right aligned. font : 14px verdana; [style property] To format the characters within the paragraph with verdana font face and in 14px size. border:1px solid red; [style property] To paint a red solid border of 1 px thickness around the paragraph content. <span style="font:bold 20px trebuchet ms; background-color:yellow;" > <span> indicates the beginning of a span. font:bold 20px trebuchet ms; [style property] To format the characters within the span with "trebuchet ms" font face, make them appear bold, and in 20px size. background-color:yellow; [style property] To apply yellow color to the span background. • Style Properties vs. Element Attributes Styles and attributes can be used together. Styles have a precedence over the attributes i.e. if there is a characteristic being defined both with the attribute as well as the style property, the style property is applied by the browser ignoring the attribute. Eg: Consider the following definition for the beginning of a table <table width=400px align=center style="width:400px"> The width of the HTML (table) element is defined as 600 px using the attribute and as 400px using the style property. Because the same characteristic is being defined both as an attribute as well as a style property, the value in the style property would be adopted and the attribute would be ignored by the browser (because the style property has a precedence over the attribute).

CSS

The style properties for a HTML element within a document can be defined within the opening tag. They can also be defined outside the element tag either in the document header or in an external file called a CSS file. A CSS [Cascading Style Sheet] is a file which can be related to a HTML document and contains the style properties that are defined for the various HTML elements within the document. Cascade = A succession of stages or operations or processes or units • Explanation with an Illustration Consider a HTML document with four divisions at different locations having the same style properties, defining their characteristics. <div style="background-color:ivory; border:2px double siena;"> Say the same tag appears four times in the document i.e. you are using a division with the same characteristics four times and are using the same code to define the characteristics. The style properties shown above are defined within the <div> tag as an attribute. This can be done in two other ways. Style definitions within document Header You can place the style property definition within the header of the document and get it applied to the HTML elements. This is done by placing the same style properties within <style> tags thus making it the style element. <head> <style> .one {background-color:ivory; border:2px double siena;} ← This can be used for any element div.ank {font:12pt/18pt trebuchet ms; color:navy;} ← This can be used only for a <div> element #moon {background-color:white; color:gold;} ← This can be used for any HTML element td#moon {background-color:white; color:gold;} ← This can be used for a <td> element </style> </head> Class The definition starts with a • (period) and the word after the • is the name. Using the attribute class="name" [Eg: class="one"], a property can be set to any HTML element. <div class="one">, <p class="one">, <td class="one"> If there is an element name specified before the •, then the property can be set only to that HTML element <div class="ank"> ID The definition starts with a # (hash) and the word after the # is the name. Using the attribute id="name" [Eg; id="moon"], a property can be set to any HTML element. <div id="moon">, <p id="moon">, <td id="moon"> This method of defining the characteristics for multiple elements is not advisable as it is not good practice to use the same ID attribute value for two elements. No two elements should have the same ID value within a document. This is especially to be ensured if the content is dynamic. ID has other purposes in dynamic documents. It works as an identity for elements. If there is an element name specified before the #, then the property can be set only to that HTML element. <td id="moon"> Even if the element name is the same, the ID value should not be the same for two elements. CSS :: Style definitions in an External File You can also place the style property definitions within a file and mention the file name within the header to give the same effect. The file containing such definitions is called a CSS file and has the file name extension .css. <head> <link rel="stylesheet" type="text/css" href="blog_format.css" /> </head> Content of the CSS file named blog_format.css and located on the web server. .one {background-color:ivory; border:2px double siena;} div.ank {font:12pt/18pt trebuchet ms; color:navy;} #moon {background-color:white; color:gold;} td#moon {background-color:white; color:gold;} The same content in the header without the <style> tag Using an external style sheet enables you to use the same definitions in multiple documents (useful for web sites with uniform appearance). It eliminates the need to use the code for the properties again and again thus reducing the file size. Where the same style sheet is being used over a number of pages, the appearance of all the pages can be changed with a single change in the CSS file. • Style Properties » Precedence If a particular characteristic for a HTML element is defined as an attribute, in the style attribute, within the style element in the header and also in the external style sheet, then the order of precedence as considered by the browser would be as follows: Style property definition in the opening tag Style property defined in the header of the document Style property defined in the external style sheet characteristic defined as the element attribute. What properties we would be able to use for a HTML element, is dependent on the element in consideration. It would be inappropriate to list out the number of possible properties for each element. You would be getting aware of the properties that you can use for an element as you keep understanding what each element would represent. Learning CSS is learning about all the possible properties that can be used for HTML elements and the possible values that can be used. HTML and CSS becomes very easy if you can understand this idea.

Author Credit : The Edifier

... Continued Page 16