basic html/css
DESCRIPTION
TRANSCRIPT
Partner Certification - Silver
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
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
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
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
HTML Skeleton
Doctype<html>
<head> <title> Title Text Goes Here </title> </head>
<body> Content Area </body>
</html>
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 SEO
Examples:• <h1>This is a heading</h1>• <h2>This is a heading</h2>• <h3>This is a heading</h3>
Paragraphs in HTML
• Paragraph tags allow you to break up paragraphs in HTML
• <p> is the tag
Examples:• <p>This is a paragraph.</p>• <p>This is another paragraph.</p>
Links and Images
• Links allow you to direct people to other pages
• Links are defined with an <a> tag
• Example: <a href="http://www.w3schools.com">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" />
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
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
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>
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
Order of CSS Seniority
Inline CSS Styles
Internal Style Sheet
External Style Sheet
Browser Default
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 Pardot's Knowledge Base
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
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!