Logo
programming4us
programming4us
programming4us
programming4us
Home
programming4us
XP
programming4us
Windows Vista
programming4us
Windows 7
programming4us
Windows Azure
programming4us
Windows Server
programming4us
Windows Phone
 
Windows Azure

Hosting static HTML websites (part 1) - Creating a static HTML website

3/14/2011 10:23:49 PM
- Windows 10 Product Activation Keys Free 2019
- How to active Windows 8 without product key
- Malwarebytes Premium 3.7.1 Serial Keys (LifeTime) 2019

BLOBs held in a public container are accessible to the outside via a public URI over an HTTP connection. Those files can be accessed with standard web browsers such as Internet Explorer. BLOB storage also lets you configure the MIME types associated with contained files; the web browser can correctly handle the served content. These capabilities make BLOB storage not just a networked hard disk but rather a full-fledged web server farm (as shown in figure 1).

Figure 1. BLOB storage acting as a web farm (look, no web roles)


BLOB storage can serve up all modern content types (including standard HTML pages, JavaScript files, CSS files, images, movies, Word documents, PDF documents, Silverlight applications, and Flash applications), making BLOB storage a viable consideration for hosting static websites.

Why would I want to use BLOB storage rather than a web role?

Although web roles are the recommended solution for most scenarios, in some instances it might be more cost effective to use BLOB storage to host your website. If your website is a standard static HTML website that doesn’t perform any server-side processing, then it’s a suitable candidate for hosting in BLOB storage.

For example, informational sites such as local business websites, static corporate websites, and Silverlight (or Flash) games are good candidates for BLOB-storage hosting. You might conclude that a static website is a fairly uncommon scenario, but it’s far more common than you might think. For example, www.sagentia.com is a typical corporate website. Apart from a search facility (which could be implemented using Google and JavaScript), there are no interactive parts to this website. There’s no reason why this website couldn’t be hosted in BLOB storage rather than using ASP.NET or JSP.

Quite simply, if you want a cheap method of hosting websites in a scalable fashion and you don’t need to dynamically generate pages, you can save yourself the cost of web roles and just pay per request.


In this section, we’ll show you how BLOB-storage hosting works by showing you how to create and then publish a simple static HTML website. We’ll also look at a couple of issues related to using BLOB storage as a host. Now let’s get to it and create a static website that you can host in BLOB storage.

1. Creating a static HTML website

The website that you’re about to build is a simple HTML page with a JavaScript calculator, as shown in figure 2. When we say calculator, it really just adds two numbers together; abacus++ is probably a more accurate term.

Figure 2. A simple static HTML website hosted in BLOB storage


After the user enters two values and clicks the equals button, the result appears (with a gratuitous smiley face graphic), as shown in figure 3.

Figure 3. On click of the equals button, the result is displayed (along with a badly drawn smiley face)


Although this web page is a simple example, it does consist of all the major parts of a typical website: HTML, CSS, JavaScript, and assets (such as images). Table 1 gives a quick overview of the contents of this site.

Table 1. A breakdown of all the files in the website shown in figure 3
Website filePurpose
default.htmHTML page with buttons, text boxes, and stuff.
standard.cssAll good web designers use CSS for their markup.
calculator.jsThe complicated JavaScript that adds two numbers together.
happy.jpgThe smiley face that appears in figure 3.

That’s what makes up this website. Now let’s take a look at some of the code. The listing that follows contains the HTML for this page.

Listing 1. Calculator page website HTML

On click of the equals button at in listing 1, the JavaScript function at is invoked. This function takes the contents of the two text boxes (number1 and number2), calls the add function, and displays the result in the result text box. Finally, when the calculation is complete, the style at is changed from hidden to visible and the smiley face graphic as seen in figure 3 is displayed.

Now that we’ve pushed technology to its absolute limit by building a web page that can add numbers together (woo-hoo, go us), you’re going to publish your work of art to BLOB storage for hosting.

Other -----------------
- Performing storage account operations using REST (part 3) - Creating a table using the REST API
- Performing storage account operations using REST (part 2) - Deleting tables using the REST API & WCF Data Services and AtomPub
- Performing storage account operations using REST (part 1) - Listing tables in the development storage account using the REST API
- Doing CRUDy stuff with the Table service (part 3) - Deleting entities & Updating entities
- Doing CRUDy stuff with the Table service (part 2) - Adding entities & Listing entities
- Doing CRUDy stuff with the Table service (part 1) - Creating a context class
- Developing with the Table service
- Partitioning data across lots of servers : Partitioning the storage account & Partitioning tables
- Modifying an entity to work with the Table service
- How we’d normally represent entities outside of Azure
 
 
Top 10
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
Popular tags
Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 windows Phone 7 windows Phone 8
programming4us programming4us
Celebrity Style, Fashion Trends, Beauty and Makeup Tips.
 
programming4us
Windows Vista
programming4us
Windows 7
programming4us
Windows Azure
programming4us
Windows Server