In the previous lessons, we tried out simple examples and rendered bland single-line responses. But thanks to HTML the web is a much more beautiful place than that. Take a look at the following HTML and run it to see how it is actually rendered:

Example Code:

<h1>Chapter 2: Troubadour</h1> <p> Excerpt from <a href='http://www.antipope.org/charlie/blog-static/fiction/accelerando/accelerando-intro.html'> Accelerando </a> by <a href='http://www.antipope.org/charlie/blog-static/fiction/faq.html'>Charles Stross</a> </p> <p>...</p> <p> Welcome to the early twenty-first century, human. </p> <p> It's night in Milton Keynes, sunrise in Hong Kong. Moore's Law rolls inexorably on, dragging humanity toward the uncertain future. The planets of the solar system have a combined mass of approximately 2 x 1027 kilograms. Around the world, laboring women produce forty-five thousand babies a day, representing 1023 MIPS of processing power. Also around the world, fab lines casually churn out thirty million microprocessors a day, representing 1023 MIPS. In another ten months, most of the MIPS being added to the solar system will be machine-hosted for the first time. About ten years after that, the solar system's installed processing power will nudge the critical 1 MIPS per gram threshold – one million instructions per second per gram of matter. After that, singularity – a vanishing point beyond which extrapolating progress becomes meaningless. The time remaining before the intelligence spike is down to single-digit years ... </p>

[reset] Need a hint? See the Solution

Hint

Output Window

Let us take a closer look at the example and understand some basic HTML. As you would have noticed, <h1> begins a 'heading' tag. There are multiple levels of headings: h1, h2, h3 and h4. Out of these, h1 has the largest text and h4 has the smallest. Once you begin a tag, you have to close it like this: </h1>.

The <p> tag is used to denote the beginning of a paragraph of text. Remember that HTML is space insensitive. That means even if you put multiple linespaces inside a text, they would be ignored. So we use the <p> tag to denote the beginning of a paragraph and </p> to denote the end.

And finally - the <a> and </a> tags. They as you might observe are used to create links to other URLs. You use the href attribute to point to the URL and put the text you want to show inside the tags.

Feel free to play around with the HTML in the above example! You should also check out Mozilla's excellent HTML reference for an in-depth understanding of HTML.

There is a simple contract between you and Rails: Rails will take care of receiving web requests and routing them to the appropriate controller. In return, you write methods in the controller that looks at those requests and uses the render method to return a response. That explanation will apply equally well to almost any web application framework.

The response you render can be plaintext as we saw in the previous lessons, or it can be richly formatted HTML like this:

Example Code:

# Here we define our web application. class HelloWorldController < ActionController::Base def index render :text => "<h1>Hello!</h1> <p>In Alice we trust.</p>" end end # Now that the web app is defined, let us try accessing it: puts HTTP.get "http://localhost:3000/index"

[reset] Need a hint? See the Solution

Hint

Output Window

Oh well, it wasn't as richly formatted as I thought it would be. This is because we printed out the exact response using puts. Let me use a RubyMonk specific method Monk.show_html to render this text as HTML in the RubyMonk console:

Example Code:

# Here we define our web application. class HelloWorldController < ActionController::Base def index render :text => "<h1>Hello!</h1> <p>In Alice we trust.</p>" end end # Now that the web app is defined, let us try accessing it: Monk.show_html HTTP.get("http://localhost:3000/index")

[reset] Need a hint? See the Solution

Hint

Output Window

We will henceforth use the Monk.show_html method to render HTML. Remember, this method is needed only in RubyMonk. In practice, the response of web applications are rendered as HTML automatically by the browser. You can use the 'Show Source' option in the browsers to view the actual HTML.

If you look at our examples, you will notice that we have been rendering all our responses directly from the controller. Like:

render :text => "Hello"

This is called in-line render and is not really useful. Almost all the time in a web application, you will want to render large chunks of HTML which will not easily fit into the render parameter. To solve this problem, Rails gives you "view templates" (a fancy name for separate HTML files) in which you can keep just your HTML and ask the controller to render that file. This is how the render method will look in that case:

Example Code:

class HelloWorldController < ActionController::Base def index @name = params[:name] render :template => "index" end end my_name = "Gary Prefontaine" url = "http://localhost:3000/index?name=#{my_name}" puts HTTP.get(url) Monk.show_html HTTP.get(url)

[reset] Need a hint? See the Solution

Hint

Output Window

When you run the above example, you should see the actual HTML which will be printed displayed through the puts statement. It also should render the HTML through the Monk.show_html statement.

Let me now show you the index.html.erb file. This is the file that is being rendered by the
render :template => "index" statement.

<h3>Hello <%= @name %>!</h3>
<p>
  This html is rendered from a view template.
  In Rails, view templates are kept inside
  <em>app/views/'controller name'</em>.

  For example, this view file is
  <em>app/views/hello_world/index.html.erb</em>
</p>

Just so you get a little practice writing HTML, try writing the corresponding HTML for the following view:

[reset] Need a hint? See the Solution

Hint

Output Window