VirtualMV/HTML/Basic/Web authoring

From WikiEducator
Jump to: navigation, search




Overview

In order to author web pages, you need to operate in three areas;

  1. File storage - to save your html web pages
  2. Web browser - to view your html web pages
  3. Html editor - to create or modify your html pages
VmvIcon Objective.png

By the end of this page you will be able to:

  • Define and describe the three areas used to create a web site

1. File Storage

Static web site

A simple web site (called a static site) is basically a collection of folders in which linked html files and associated multimedia files are stored. There are several possibilities

  • A local hard drive
    • html files are stored in appropriate folders. For example it is useful to separate multimedia files from the html files. It is possible to extend the functionality by running a personal web server (for example to add a page counter or search facility)
  • Removable storage
    • USB Stick, Floppy!, CD-ROM, DVD, USB Removable, etc
  • A network hard drive
    • html files may be browsed by users on the network.
  • An intranet
    • A web server running on a Local Area Network. The html files are maintained in folders, but web functionality is added (for example to add a page counter or search facility).
  • A web hosting service on the Internet

Dynamic Web site

To allow for interactive features such as forms or database access you need to have access to a Web Server. Two common options are Internet Information Services (from Microsoft and run in Windows) and Apache (available for both Windows and Unix)

  • Windows + Internet Information Services (IIS) - IIS is available on current versions of windows, but has to be installed separately (using Control Panel > Add Remove Programs > Windows Components)
    • Used with MS-SQL Server (for database) and Visual Studio (VisualC++ or VisualBasic - for programming)
  • Windows or Unix + Apache - Usually bundled with MySQL (for a database) and PHP (for programming)
  • Others include ColdFusion (from Adobe)and Mac OS X Server Snow Leopard (from Apple)

Public Web Hosting

  • Both free hosting and paid for hosting is available. Generally free hosting is available to private individuals and have advertising added to your pages, whereas paid for hosting is used by businesses. Well known free hosting sites include Yahoo tripod ( http://www.tripod.lycos.com/ ) and Google sites ( http://www.google.com/sites/ ). Some like Brinkster ( http://www.brinkster.com ) allow for programming/scripting to occur.

Standards

  • File names should all be lowercase.
    • Many web servers are unix based. A unix file system is case sensitive so myfile.html, Myfile.html and MYFILE.HML are all considered to be different. Traditionally unix files are lowercase.
  • Filenames should avoid the use of special characters
    • Characters such as space (ASCII Character 20) ? and & especially should be avoided as these are also used in other ways.
  • For a static web site the page that starts your web site should be index.html, or index.htm (although default.htm/.html is preferred by Microsoft products)
    • Web browers are actually file browsers, but when they are asked to display an html (or htm) file understand the tags and display a "prettied" up web page that can include multimedia elements such as graphics. To provide a level of security, a web server will not allow you to view a directory if the file index.html is stored in the directory. Today the Web Administrator may need to set this option on the web server. An Expression (Frontpage) web uses the file default.html, an ASP/ASP.net site may use default.asp/default.aspx, a PHP site may use default.php.

2. Web browser

The second area for web authoring is a web browser. This is needed to view your html creation. Many web authoring packages include a preview facility. I generally recommend that this is not used as the preview may not match current browsers. Browsers in common use

  • Microsoft’s Internet Explorer - in use by the majority of the Internet Community. Cut down versions are available on some mobile devices, although there is policy of not providing upgrades for mobiles.
  • Firefox (2005) - based on Netscape Communicator
  • Google Chrome (Dec 2008)
  • Apple's Safari - (there is a version for the PC)
  • Opera - a small but highly functional web browser, available on some mobile devices.

To view an html file in a browser, you can either double click the file in a file manager program, or in the browser use File | Open etc.

Others include

Old browers:

  • Netscape Communicator - originally the browser of choice (until 1999)

Further reading

(on virtualMV):Web Browsers

Mobile browsers

Several options are also available on a mobile phone/PDA often designed specifically for the device. Check Wikipedia(2009)[1] for more information.

3. Html editor

This is where all the authoring work takes place. An html file is basically an ASCII text file, which means that the file itself does not support any formatting. So to allow a browser to know when a part of the file is to be bold, for example, we add a tag around the text. For example; this is <b>bold</b> text.

  • Where the <b> says what follows is bold, and </b> says switch off bolding.
Spiders, HTML and Web design

So the simplest editor you can use is an ASCII text editor.

  • For Windows you can use Notepad (not WordPad as this creates RTF files)
  • Notepad++ (n.d.).[2] is a free (as in "free speech" and also as in "free beer") source code editor and Notepad replacement that supports several languages. Running in the MS Windows environment, its use is governed by GPL License..
  • Many web browsers have a View | Source option and this will sometimes display the html page in a built in editor (Firefox) or Notepad (IE prior to IE8).

Other web authoring packages provide a combination of text editing and GUI (What You See is What you get - WYSIWYG).

The most common are probably

  • Microsoft's Expression Web/SharePoint Designer/Visual Studio Web Page Editor (Formerly Frontpage), and
  • Adobe's Dreamweaver.

Probably the biggest issue with using a WYSIWYG tool is that lots of unnecessary code can be generated (e.g. Expression Web creates new styles each time you format text). You will need to drop back to raw code when adding specialty features such as JavaScript.

VmvIcon References.png References

  1. Wikipedia (2009). Mobile browser. Retrieved May 25, 2009 from http://en.wikipedia.org/wiki/Mobile_browser
  2. Notepad++(n.d.) Retrieved January 19, 2010 from http://notepad-plus.sourceforge.net/uk/site.htm
  3. Heng, C. (2011) Free HTML Editors, Web Editors, and WYSIWYG Web Editors and Site Builders, Retrieved from http://www.thefreecountry.com/webmaster/htmleditors.shtml
  4. Kyrnin,J. (2012) Finding the Perfect Web Editor. Retrieved from http://webdesign.about.com/od/htmleditors/a/find_great_edit.htm

virtualMV  |  Superquick wiki guide  |  Please give me some feedback

VirtualMV/HTML/Basic/Web authoring. (2017). In WikiEducator/VirtualMV wiki. Retrieved October 21, 2017, from http://wikieducator.org/VirtualMV/HTML/Basic/Web_authoring    (zotero)