This page (revision-9) was last changed on 26-Nov-2021 10:22 by adsignore

This page was created on 26-Nov-2021 10:22 by adsignore

Only authorized users are allowed to rename pages.

Only authorized users are allowed to delete pages.

Page revision history

Version Date Modified Size Author Changes ... Change note
9 26-Nov-2021 10:22 9 KB adsignore to previous
8 26-Nov-2021 10:22 9 KB adsignore to previous | to last
7 26-Nov-2021 10:22 9 KB adsignore to previous | to last
6 26-Nov-2021 10:22 9 KB adsignore to previous | to last
5 26-Nov-2021 10:22 9 KB adsignore to previous | to last
4 26-Nov-2021 10:22 9 KB adsignore to previous | to last
3 26-Nov-2021 10:22 9 KB adsignore to previous | to last
2 26-Nov-2021 10:22 5 KB adsignore to previous | to last
1 26-Nov-2021 10:22 2 KB adsignore to last

Page References

Incoming links Outgoing links
HTML Workflow Emails and Pages
HTML Workflow Emails and Pages

Version management

Difference between version and

At line 1 changed one line
!!!HTML - Understanding HTML Basics - Workflow Emails and [WAMII] Pages.
!!!HTML - Understanding HTML Basics - Workflow Emails and [WAMII] Pages
At line 4 changed one line
[TABLE_OF_CONTENTS]
[{TableOfContents }]
At line 13 changed 2 lines
\\
\\
At line 16 changed one line
Email Structure Tags
----
!Email Structure Tags
\\
At line 18 changed 7 lines
• The <!DOCTYPE html> declaration defines this document to be HTML5
• The <html> identifies that the workflow email should respect HTML formatting
• The <style> element identifies that sets for parameters (fonts, font sizes, font color etc) that should be used for each tag)
• The <body> element contains the visible formatted text in the email
• The </html> element ends the </html> formatting
• The </style> element end the <style> formatting
• The </body> element ends the <body> portion of the email.
* The <!DOCTYPE html> declaration defines this document to be HTML5
* The <html> identifies that the workflow email should respect HTML formatting
* The <style> element identifies that sets for parameters (fonts, font sizes, font color etc) that should be used for each tag)
* The <body> element contains the visible formatted text in the email
* The </html> element ends the </html> formatting
* The </style> element end the <style> formatting
* The </body> element ends the <body> portion of the email.
At line 29 added 2 lines
\\
\\
At line 32 added 5 lines
!!Email Structure Example
\\
[Email_Structure_example.png]
\\
\\
At line 38 added 25 lines
!!Data / Text Formatting Tags
%%zebra_table
||TAG||Usage||Examples and Additional Information
|<p> </p>|Begins and Ends a Paragraph|
|<br>| Produces a Line break. (Goes to next line)|
|<h1> </h1>|Begins and Ends a header/heading| You can make additional headers such as <h1>, <h2>, etc.
|<b> </b> | All test within the <b>.....</b> will be bold|
|<i> </i> | All text within the <i>....</i> will be italicized|
|<u> </u> | All text within the <u>....</u> will be underlined|
|<img src="FULL URL" /> | This inserts an image into you html email | When inserting images into emails you can align the image to the left or the right side by adding 'align=left' or 'align=right'. Example, <img src="http://www.highlinecorp.com/image1.jpg align=right />
|<a href="URL">….</a>|Create a hyperlink to the URL specified. Must be ended with a </a>. All text between the URL and the </a> will be turned into a clickable link.|Example, <a href="http://www.highlinecorp.com">This text is a link to High Lines Official Website</a>
|<a href="mailto:EMAIL_ADDRESS">clickable text</a>|Replace EMAIL_ADDRESS and clickable text with the email address of the person you want to create the hyperlink for. |Creates a hyperlink to an email address. This will open your default mail client and start a message to the specified address.
\\
\\
!Building Tables in HTML
%%zebra_table
||TAG||Usage||Examples and Additional Information
|<table border=1 width=500> </table>|Creates a Table. With a border thickness of 1 pixel and width of 500 pixels|<table border=?> Sets the width of the border around table cells. \\ <table width=?> Sets width of the table in pixels or as a percentage
|<tr> </tr>|<tr> begins the table row. At the end of the row (after you put in your cells of data) you would end the row with a </tr> tag|Creates a row. This row would be followed by the tag <td>…</td> which creates a cell in the row. When you want to start a new row of cells you would create another <td>…</td> set of tags.
|<td> </td>|<td> cell text here</td> would create one cell of text within a row (<tr>…</tr>)|Creates a cell within a row and puts text in the cell that is between the tags <td>…</td>
|<th></th>|Table Header|This is a normal cell with Bold and Centered Text.|
\\
At line 64 added 4 lines
!What is CSS formatting used for and is it mandatory?
CSS formatting is used to add additional formatting features not offered in just HTML. When creating more complex HTML Emails it is recommended to use CSS for all you’re styling as it makes things easier to configure in the long run. CSS is not mandatory for all HTML Emails. If you are creating a simple HTML email it is recommended to use basic HTML tags to format your email messages.
\\
\\
At line 69 added 3 lines
!CSS Structure
[CSS_FIG1.png]
\\
At line 73 added 3 lines
The CSS formatting tag is called <style>. It belongs right after the <html> tag and ends when you are finished defining your styles. Within the <style> tag you will create tags such as <h1> for your header style settings and <p> for your paragraph style settings. By creating styles for headers and paragraphs you ensure that every time you reference that <p> tag the email will know to use the settings you have specified in the style tag.
\\
\\
At line 33 changed one line
!!HTML/CSS Examples and Results
__Example__
\\
At line 80 added 52 lines
An Example of simple CSS Style can be seen below.
[CSS_FIG2.png]
\\
In this example we have created a style tag called “h1”. This tag has been configured so that it uses the font “Segoe UI”, has a font size of 23 pixels, the text is aligned to the left side of the screen, and the color has been set to red. Now that is has been configured every time we open a <h1> tag in an email it will use the above listed parameters until it is ended by using the </h1> tag.
\\
\\
!Differnt Types of Style Tags
%%zebra_table
||Style Tag||Usage
|<h1>|<h1> is a tag used to define how your header will be styled. If you want to create multiple styles for headers you would define them as <h1> <h2> <h3> etc.
|<p>|<p> is a tag used to define how your paragraphs will be formatted. By adding parameters to this tag it will ensure that every time you create a new paragraph in your email it will have the proper font, font size, color, etc. If you want to use multiple styles of paragraphs, then you could name the tag <p1> <p2> <p3> etc.
|<table>|<table> is a tag that is used to define how your tables will look in your email. Remember a table looks like a chart/spreadsheet in your email. It has Columns and Rows. You can define here things like fonts, colors, thickness of borders, background color of the chart etc.
|<body>|<body> is a tag that is used to define the "Default" style of your email. By adding style parameters to the <body> it will ensure that those specific parameters are always used for font, font color, font size etc. The exception to the rule is when you put your text in another tag which will override the <body> parameters. For example, If you <body> has a parameter of font size = 20 and within the <body> you put a <p> tag and that <p> tag has a parameter of font size = 10 then the end result would be font size =10 for everything within the <p> and </p> tags even though it’s also within the <body> tags.
|<a>|<a> is a tag used to define all Hyperlinks. If you add parameters to this tag then every time you have a hyperlink in your email it will show with the settings you attached to this tag. For example, you could enter a font size = 14 and color = red which would force the hyperlink to be red and size 14 font when the rest of the email was a size 10 font and blue color.
\\
\\
!Parameters Added to Style Tags
There are many different parameters you can attached to a paragraph, header, hyperlink etc. Below we will review some of the commonly used parameters that can be attached to style tags.
\\
\\
%%zebra_table
||Property||Value||Used with Elements
|color|can use hexadecimal color chart or words such as blue or red.|any element that contains text.
|text_align|left, right, center, justify|block elements h1..h6, p, li, etc.
|text-transformation|none, capitalize, uppercase, lowercase|any element that contains text.
|font|Times New Roman|any element that contains text
|font-style|normal,italic,bold|any element that contains text
|background-color| can use hexadecimal color chart or words such as blue or red.|any element with a background
|float|like align-text this will allow you to make whatever is in the tag float to the right or left of the HTML page.
|border|Applies a border to the element/tag. For example, 1px solid black would create 1 pixel sized border that is solid black color.|any element that contains text
|border-collapse|collapse (In the collapsed border model, adjacent table cells share borders. The borders are then styled using the "border" property)|any element that contains a table
\\
!HTML and CSS Examples
Below is an example of the coding and result of a complete HTML email using CSS. This example would be similar for a [WAMII - Important Information Pages|WAMII].
[HTML-CSS-FIG1.png]
[HTML-CSS-FIG2.png]
[HTML-CSS-FIG3.png]
\\
!Resulting Output from HTML/CSS
\\
[HTML-CSS-FIG4.png]
This page (revision-9) was last changed on 26-Nov-2021 10:22 by adsignoreTop