Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.



Published on

  • Be the first to comment

  • Be the first to like this


  1. 1. Partner Certification - Silver
  2. 2. Cool Tools – Firebug (Firefox)• Will allow you to look at the HTML and CSS and make changes locally without a lot of back and forth work in the layout template/ email template• Copy CSS and HTML created and input into your layout as needed• Free download in the Firefox Addons
  3. 3. Cool Tools – Developer Tools (Firefox)• Turn on and off different elements of your website to see if they are messing anything up on the page• Easily pinpoint issues that could cause HTML/CSS issues -- Validation
  4. 4. Cool Tools – Ghostery (Firefox)• Allows you to see all tracking scripts on a current page• See if potential prospects are using other Marketing Automation vendors or other SaaS products• Turn off easily tracking of these products and block them
  5. 5. Basic HTML• What is HTML? • HTML stands for Hyper Text Markup Language • HTML is not a programming language, it is a markup language• HTML markup tags are usually called HTML tags • HTML tags are keywords surrounded by angle brackets like <html> • HTML tags normally come in pairs like <b> and </b> • The first tag in a pair is the start tag, the second tag is the end tag• Open and Close Tags • <html> is an example of a start/open tag • </html> is an example of a end/close tag
  6. 6. HTML SkeletonDoctype<html> <head> <title> Title Text Goes Here </title> </head> <body> Content Area </body></html>
  7. 7. HTML Headings• Headings are used to label sections or title pages• Range from <h1> to <h6>• <h1> are usually reserved for page titles and very important to SEOExamples: • <h1>This is a heading</h1> • <h2>This is a heading</h2> • <h3>This is a heading</h3>
  8. 8. Paragraphs in HTML• Paragraph tags allow you to break up paragraphs in HTML• <p> is the tagExamples: • <p>This is a paragraph.</p> • <p>This is another paragraph.</p>
  9. 9. Links and Images• Links allow you to direct people to other pages• Links are defined with an <a> tag• Example: <a href="">This is a link</a>• Images allow you to display pictures in your HTML• Images are defined with an <img> tag • Note: Images do not end with </img> but instead />• Example: <img src="w3schools.jpg" width="104" height="142" />
  10. 10. CSS Basics• CSS stands for Cascading Style Sheets• Styles define how to display HTML elements• CSS can be added in three ways to HTML • External Style Sheets • Internal Style Sheets • Inline Styling• Without CSS, your page would be a bunch of text and images stacked on each other
  11. 11. Types of CSS – External Style Sheet• An external style sheet is ideal when the style is applied to many pages.• With an external style sheet, you can change the look of an entire Web site by changing one file.• Each page must link to the style sheet using the <link> tag • <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>• Commonly used for websites
  12. 12. Types of CSS – Internal Style Sheet• An internal style sheet should be used when a single document has a unique style• You define internal styles in the head section of an HTML page• Used in one-off situations. If used for an entire website, if a change is made for an element, it would need to be changed on every page• Example: <head> <style type="text/css"> p {margin-left:20px;} </style> </head>
  13. 13. Types of CSS – Internal Style Sheet• CSS does not reference any external or internal style sheets• For example: • Correct: <p style=“font-size:12px; color: #666; font-family: arial;”> • Incorrect: <p id=“paragraph”>• Used mostly on emails, but can be used in other places• Google among major email clients who does not reference external stylesheets
  14. 14. Order of CSS Seniority Inline CSS Styles Internal Style Sheet External Style Sheet Browser Default
  15. 15. CSS – Pardot Layout Templates• You may use an Internal Style Sheet to style Pardot Forms• Add the style tag within the <head> section of the template • Style tag for CSS: <style type=”text/css”> </style> • Add the CSS inside the style tags to style your form. • Examples in the “Default Form Styling” articles on Pardots Knowledge Base
  16. 16. Forms and Focus• Pardot forms are designed to have focus on them when page loads• If form is located at bottom of page, page will scroll to form when page is loaded• This can be turned off in the layout template • Administration >> Layout Templates >> Name of Template >> Form Tab • Remove the %%form-javascript-first-input-focus%% tag
  17. 17. End of Course HTML/CSS• You have reached the end of the HTML and CSS• You will now take a test of what you have learned. You must score greater than 85% to pass this portion of the test.• Good luck!