How to Create a Joomla Article From an HTML Page
Joomla creates Web pages by sending HTML code to a Web browser using the template style sheets as guides. The easiest way to create a Joomla article from an existing HTML page uses the Copy and Paste functions to copy the original HTML page displayed in your browser into the Joomla article editor. More complex HTML pages will require additional work to get the page looking right. Converting complex HTML pages will require an understanding of HTML and CSS programming.
Other People Are Reading
Instructions
-
-
1
Open the HTML page you want to convert to Joomla with your Web browser. Right-click on each image and select "Save image as" from the context menu. Give each image a name and save it to your local computer.
-
2
Select "New" from the Joomla Article Manager menu. Joomla will open a new article record for editing. Enter the article name in the "Title" field and select a section and category from the drop-down lists. Scroll down and click once in the article editor to place the cursor there.
-
-
3
Switch back to the HTML page and select all the text on the page using the mouse or by pressing "Control" plus "A." Return to the Joomla Article Manager. Make sure the cursor is flashing in the editor. Press "Control" plus "V" to paste all the text into the article. Basic formatting such as bolding, italics and text size should be preserved.
-
4
Move the cursor to the location of an image. Drag the vertical scroll bar down to make the bottom of the editor visible and click on the "Image" button. The "Insert Image" dialog opens. Click on the "Browse" button at the bottom and navigate to the image on your local computer and double-click on it. Click the "Start Upload" button and wait for the image to upload. Locate the image in the list and click once on it. Click the "Insert" button and the image is inserted.
-
5
Click once on the image in the editor to select it. Click on the "Picture" icon in the editor toolbar and edit the image properties if necessary. You can adjust the size, set a margin and choose how text flows around the image. Enter an image name and description to help keep the image accessible to visually impaired users. Add other images following this and the previous step.
-
6
Click the "Apply" button in the Article Manager menu to save the article without closing it. Click the "Preview" button in the Article Manager menu to view a simple version of the article that does not include your template's formatting. Make adjustments to the page as necessary and click the "Save" button to save and close the article when you are satisfied.
-
1
Tips & Warnings
Choose a template that closely matches the look of the HTML page to make formatting easier. You may need to create custom modules and display them using specific areas of the template to mimic the look of the original HTML page.
If you need to make changes to the HTML code, switch to the "No Editor" option in your user parameters. "No Editor" selects an editor more suitable to HTML coding than the TinyMCE editor that is the default article editor.
If there are items you don't want to include from the HTML page in the new Joomla article, you may have to individually select and copy the portions of the page you do want.
Complex pages may not copy correctly using this method. Switch your article editor to "No Editor" in your user parameters and open the Joomla article as described. Copy the HTLM code directly into this editor and save it. You'll still have to upload images and define their location in code. Use this editor to make changes to the code as necessary.
References
Resources
- Photo Credit Hemera Technologies/AbleStock.com/Getty Images
