How to Properly Clean and Format HTML

Modified on Thu, 5 Sep, 2024 at 2:29 PM

When working with HTML, whether it's for custom content, company configuration, or trip-specific content—you’ll be using an interface called WYSIWYG (What You See Is What You Get). This tool allows you to copy content from external sources, clean it up, and format it easily. It’s especially useful when creating visually appealing sections like guide bios, company information, or custom trip details.

However, when copying content from sources like PDFs, Microsoft Word, or Google Docs, unwanted formatting can be brought along. To avoid issues with the layout, it's important to clean the content before making changes.

Cleaning HTML

Before Cleaning:

Highlight the content you want to clean.
Click the Clean button.

After Cleaning

Note: Cleaning removes all formatting, so you’ll need to reformat the content after it’s cleaned.

Reformatting HTML

After cleaning the content, use the WYSIWYG toolbar to reapply formatting. The toolbar includes options like numbered lists, bullet points, bold, italics, underline, and much more.

Formatting Options Include:

Style: Adjust the size of your text. Larger font styles like headings are for titles, while smaller font styles are for normal text.
Remove Font Style: Clears any formatting changes (like bold, italics, or font size) and reverts text to default.
Numbered Lists: Creates a numbered list of items. Useful for ordered Lists
Paragraph adjustment: Aligns your text to the left, right, or center.
Bullet Points: Creates a list with bullet points, useful for unordered lists.
Bold, Italics, Underline:
- Bold: Makes text thicker and more prominent.
- Italics: Slants text to emphasize certain words.
- Underline: Adds a line under the text to highlight it.
Horizontal Lines: Inserts a line across the page to separate sections.
Text Highlighting: Adds a background color to selected text to make it stand out.
Insert Images: Allows you to place an image in your content.
- Learn how to add images
Insert Links: Turns text into a clickable link that directs users to another webpage.
Undo/Redo:
- Undo: Reverts your last action.
- Redo: Reapplies the action you just undid.
Full Screen: Expands the text editor to fill your entire screen for easier writing.
Code Editor: Switches to a mode where you can see and edit the raw HTML code.

Editing in Code View

If you prefer to adjust the HTML directly, switch to code view to make changes. Once finished, click the format button to tidy up the code.

Before Formatting:

After Formatting:

Viewing and Saving HTML Code

To view the structure of the HTML, use the code view option. When you’ve made changes, be sure to exit code view by clicking the button again so that you can save your edits in the standard view.

And that is how to use Basic HTML Formatting on the Oasis Travel Platform! We hope you found this guide helpful. If you need additional help or want to share your thoughts, reach out at [email protected].We love hearing from you and are always here to help.

How to Properly Clean and Format HTML

However, when copying content from sources like PDFs, Microsoft Word, or Google Docs, unwanted formatting can be brought along. To avoid issues with the layout, it's important to clean the content before making changes.

Cleaning HTML

Before Cleaning:

Highlight the content you want to clean.

Click the Clean button.

After Cleaning

Note: Cleaning removes all formatting, so you’ll need to reformat the content after it’s cleaned.

Reformatting HTML

After cleaning the content, use the WYSIWYG toolbar to reapply formatting. The toolbar includes options like numbered lists, bullet points, bold, italics, underline, and much more.

Formatting Options Include:

Style: Adjust the size of your text. Larger font styles like headings are for titles, while smaller font styles are for normal text.

Remove Font Style: Clears any formatting changes (like bold, italics, or font size) and reverts text to default.

Numbered Lists: Creates a numbered list of items. Useful for ordered Lists

Paragraph adjustment: Aligns your text to the left, right, or center.

Bullet Points: Creates a list with bullet points, useful for unordered lists.

Bold, Italics, Underline:

Bold: Makes text thicker and more prominent.

Italics: Slants text to emphasize certain words.

Underline: Adds a line under the text to highlight it.

Horizontal Lines: Inserts a line across the page to separate sections.

Text Highlighting: Adds a background color to selected text to make it stand out.

Insert Images: Allows you to place an image in your content.

Learn how to add images

Insert Links: Turns text into a clickable link that directs users to another webpage.

Undo/Redo:

Undo: Reverts your last action.

Redo: Reapplies the action you just undid.

Full Screen: Expands the text editor to fill your entire screen for easier writing.

Code Editor: Switches to a mode where you can see and edit the raw HTML code.

Editing in Code View

If you prefer to adjust the HTML directly, switch to code view to make changes. Once finished, click the format button to tidy up the code.

Before Formatting:

After Formatting:

Viewing and Saving HTML Code

To view the structure of the HTML, use the code view option. When you’ve made changes, be sure to exit code view by clicking the button again so that you can save your edits in the standard view.

And that is how to use Basic HTML Formatting on the Oasis Travel Platform! We hope you found this guide helpful. If you need additional help or want to share your thoughts, reach out at [email protected].We love hearing from you and are always here to help.