Home

Introduction to Website/Webpages Maintenance

   

Starting a Website

 

Website Hosting

 

Storing

The Folders of a Website

Just.

The Files of a Website

 

Introduction

A file is the object that displays a webpage. Normally, a file cannot contain another object, such as another file. A file must be created in an existing folder, referred to as its parent. In the same way, many files can be created in, or can belong to, the same folder. Such a folder acts as their common parent.

One of the jobs of a webmaster is to know where a file resides, what type a file is (text-based, script-based, graphic, audio, video, etc). Part of this information is provided by the file extension. Some time to time, you will need to change or delete something in a file (such as deleting or moving words in a text-based document), you may need to tremendously change a file (such as cutting the length of a song or video), etc. Sooner or later, you will need to create, move, or delete files, for any reason. As we will learn later, you will also want one file to refer to another.

Introduction to Creating Files

You can create a file directly on your website or you can create it on yor computer before uploading it to your website. To create a file directly on your website, access the control panel of your site and and open the File Manager (or something like that). In the left frame, click the folder that will contain the file. Look for a button labeled Create A File or something like that. Provide the name of the file and make sure you add its extension. Once the file exists, you can edit it. To do this, click it and click Edit.

To create a file on your computer, you have more options. If you want to create a text-based file, you can use a text editor such as Notepad or vii or a Web editor. To create a different type of file, you should/must use the right application.

Introduction to Graphics Files

Graphic files are those that display graphics or pictures. You will need the right tool to do it. One of the most popular applications to create or manipulate pictures is Adobe Photoshop. There are other applications such as Corel PaintShop Pro, etc. We use PaintShop Pro because it is cheaper and we can do everything we want with it. The cheapest solution in Microsoft Windows is Paint, which is installed along with the operatint system. Windows Paint is very limited and can serve only as a temporary solution.

Different applications are typically used in web design because it is not unusual that a certain feature is missiing in one application that happens to have other good features. For example, because we don't know what applications you have, in the following section, we are going to use Microsoft PowerPoint to design graphics, tranferred them to Windows Paint to get the result we want.

Meta Tags

 

Introduction

A meta tag is an element that gives some functional instructions to applications that access a webpage. The clients include other webpages (such as search engines) that access your webpage, or objects connected on the visitorís computer. The objects include audio/video devices and other types of machines that assist the visitor when browsing the Internet.

Meta tags are created in the head section of a webpage. Most meta tags are created using a tag named meta. The meta element uses (or must use) attributes that indicate what it is used for. The primary element used by the meta tag is named name. This attribute is used to specify the meta tag that is being defined. The second attribute is named content and it holds the value of the first attribute. The meta element is not closed. Therefore, the primary formula to create a meta tag is:

<meta name="value" content="value" . . . >

Because you must name the meta tag you want to create, you should (must) create an individual meta tag for each definition.

Practical Learning: Creating Meta Data

  • Open the index.htm file in your text editor

The Author Meta Tag

One of the meta tags is named author. It is used to specify the name of the person who (or the company that) created (and is in charge of managing) the webpage.

Practical Learning: Specifying the Author of a Webpage

  1. Change the document as follows:
    <html>
    <head>
    
    <meta name="author" content="Catherine Watts">
    
    <title>Watts A Loan: About Us</title>
    <head>
    
    . . . 
  2. Save the file

The Description of a Webpage

To give search engines and other visitors a behind-the-scenes overview of a webpage, you can create a meta tag named description. For the value of the content attribute, write a sentence any way you want. Here is an example:

<html>
<head>

<meta name="Description" content="This paper gives a rough description of a 
periodic table with a simple overview of most chemical elements.">
<title>Chemistry: Periodic Table</title>
<head>
<body>

<h3>Chemistry: Periodic Table</h3>

<p>Hydrogen is the most widely <wbr>available substance on earth. Carbon is the 
main component of most minerals<wbr> such as diamond and graphite.</p>

</body>
</html>

Practical Learning: Specifying the Author of a Webpage

  1. Change the document as follows:
    <html>
    <head>
    
    <meta name="author" content="Catherine Watts">
    <meta name="description" content="This the corporate website Watts A Loan, a small business that provides loans and financial services.">
    <title>Watts A Loan: About Us</title>
    <head>
    
    . . .
  2. Save the file

The Keywords of a Webpage

To assist search engines or other applications to know what your webpage contains, you can create a meta tag named keywords. In the content attribute, create a list of the desired words from the content of your webpage.

Practical Learning: Specifying the Author of a Webpage

  1. Change the document as follows:
    <html>
    <head>
    
    <meta name="author" content="Catherine Watts">
    
    <title>Watts A Loan: About Us</title>
    <head>
    
    . . . 
  2. Save the file
<meta name="keywords" content="object, oriented, programming, oop, class, data, type, int">

The Content Generator

If you used a certain software product to create your webpage and you want to indicate it, create an attribute named generator and specify the name of the software in the content attribute. Here is an example:

<meta name="generator" description="Microsoft Expression 4.0 Web">

Managing Elements

 

The Title of an Element

The title of an element is a tool tip you want to display when the visitor's mouse is positioned on top of the contents of the element. To create a tool tip for an element, add an attribute named title. Specify the text of your choice as the value of the attribute.

The Identification of an Element

All elements of a webpages are considered objects and each can be programmatically accessed with code. The primary way to access an element is by identifying it. To support this, an element can be given an attribute named id (or ID). The value of the identifier must be a string in one word starting with a letter. Here is an example:

<html>
<head>
<title>F# Programming</title>
</head>
<body>
<p>Here is an example of a record in F#:

<pre>type Employee = {
    EmployeeNumber : string
    FirstName      : string
    LastName       : string
    HourlySalary   : float }</pre>

<p id="conclusion">Now you can create objects from that type.</p>
</body>
</html>

An abbreviation

An abbreviation is a technique of using a few letters or a combination of letters and digits to represent a longer definition. To indicate that you want to show an abbreviation, create an element named abbr. Normally, creating an abbr element doesn't do anything. To indicate that a word represents an abbreviation, you should add a title attribute to it and give the complete definition as the value of that attribute.

Fundamentals of Sections

 

Introduction

A webmaster has to be careful and meticulous about positioning items such as text, paragraphs, pictures, etc. This is because the whole code of a webpage is treated as a single object.

You can create one or more sections in your webpage so that you can treat each section independently and manage it individually. HTML provides different types of sections, each using its own tag. Most sections behave as containers. That is, a section can be used to contain text and other types of objects for which it acts as parent.

Horizontal Line

One way you can create a section on a webpage is to display a horizontal line. This is done by creating an element using the hr tag. Here are examples:

<h1>F#: Object-Oriented Programming</h1>
<p>Here are examples of creating records:</p>

<hr>

<pre>type Employee = {
    EmployeeNumber : string
    FirstName      : string
    LastName       : string
    HourlySalary   : float }<pre>

<hr>

<pre>type OccupancyStatus =
| Other       = 0
| Available   = 1
| Occupied    = 2
| NeedsRepair = 3

type Apartment = {
    UnitNumber      : string
    Bedrooms        : int
    Bathrooms       : float
    SecurityDeposit : int
    MonthlyRate     : int
    Status          : OccupancyStatus }</pre>

<hr>

<pre>type Employee = {
    EmployeeNumber : string
    FirstName      : string
    LastName       : string
    HourlySalary   : float }

and
    StoreItem = {
        ItemNumber  : int
        Category    : string
        SubCategory : string
        ItemName    : string
        ItemSize    : string
        UnitPrice   : float
        DaysInStore : int
        Status      : string }</pre>

The Main Area of a Webpage

A typical webpage has a central area that interests a visitor. To delimit such an area, create a section named main. A section created using the main element doesn't automatically make it the focus point of a webpage. It is up to use to make it so and to decide what you plan to do with that section.

A Blockquote

Published scholar papers usually contain citations to give credits to authors of formal and interesting quotes. Some of the quotes are created in indented paragraphs. To let you create such a paragraph, HTML provides a tag named blockquote. Normally, a block quote behaves like a section; that is, it serves as a contrainer. In its body, you can directly create text or nest other elements such as paragraphs, etc.

 
 
 
   
   
 

Previous Copyright © 2015, FunctionX Next