0.2 Rails Views: Rendering nice looking HTML

A quick HTML primer

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:

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.

Rendering HTML from your Rails controller

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:

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:

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:

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>
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

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

This is an H1

This is a p tag, and this is an em tag.

Congratulations, guest!

% of the book completed


This lesson is Copyright © 2011-2014 by Jasim A Basheer