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 18 changed one line
\\
At line 29 added 2 lines
\\
\\
At line 33 added one line
\\
At line 35 added 2 lines
\\
\\
At line 51 added 2 lines
\\
\\
At line 47 removed one line
At line 66 added 2 lines
\\
\\
At line 75 added one line
\\
At line 68 changed one line
__Example__
__Example__
\\
At line 86 added 2 lines
\\
\\
At line 76 changed one line
!!HTML/CSS Examples and Results
!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.
At line 98 added 34 lines
\\
\\
!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