Adding portlet to webcontent & vise versa

Adding web content to portlet
Web contents is really a very great feature of Liferay which allows us to create any kind of valid HTML with the
 help of very good HTML editor and use it on Liferay pages. But the way Liferay provide to use these web 
contents on the page is using the web content display portlet.
Generally, text on the JSP pages is loaded form properties file.
 Now what I think if there is some big content, we can load that from web content.
 That will be very helpful in externalizing. Another advantage is we can load different contents using the same
 name for different groups. Let's see how is that possible -
Enter the name of the Article in portal-ext.properties-

1. acticle.name=YourJournalArticleName

2. no.actical.text=No Article Exists for this category.

Now use the following code on JSP-     
 <%String content = StringPool.BLANK;
      try{

           String articleName = PropsUtil.get("acticle.name");
          ThemeDisplay themeDisplay = (ThemeDisplay) request.getAttribute(WebKeys.THEME_DISPLAY); 
          JournalArticle journalArticle = JournalArticleLocalServiceUtil.getArticleByUrlTitle 
          (themeDisplay.getScopeGroupId(), articleName);                                                                       
           String articleId = journalArticle.getArticleId(); 
          JournalArticleDisplay articleDisplay =  JournalContentUtil.getDisplay       
          (themeDisplay.getScopeGroupId(), articleId,"","",themeDisplay);                                                                                                                                                                               
           content = articleDisplay.getContent();
         }catch(Exception e){
        content = PropsUtil.get("no.article.text");
       }%>

•  <%=content %>    

------------------------------------------------------------------------------------------------------------------------------- 
  Adding portlet to webcontent
 Many people have asked, "How can I embed a portlet in web content". It's actually quite simple, 
once you know how. So I'll walk you through it.
It;s done via a runtime-portlet tag. The actual syntax looks like this:
<div id="embedded-welcome-portlet">
  <runtime-portlet name="47" instance="4433" queryString=""/>
</div>

(47 is the Hello World portlet) 

The divs are not necessary, but in order to style the embeded portlet later we need them there.

So here is the Structure for the web content with the three pieces of information to pass to the
runtime-portlet tag. (If you want, you can use hard coded values in the template of the web content)

create structure

And the template for the web content..

click on launch editor insert the following code
<p>
This is web content, with an embedded portlet!
</p>
<div id="embedded-welcome-portlet-$instance-id.getData()">
 <runtime-portlet name="$portlet-id.getData()" instance="$instance-id.getData()" queryString="$query-string.getData()"/>

</div>

Where the values from the template are passed in. We're not using the query string for this example.

So when rendered, it looks like this...

But what if you want to use your own portlet? No problem, just use the name it is given by Liferay.
In this case we'll use the Web Form portlet since it's not a Liferay built in portlet.

And now the web content looks like...