Basic HTML/CSS

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>

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!

Basic HTML/CSS

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (6)

Semelhante a Basic HTML/CSS

Semelhante a Basic HTML/CSS (20)

Mais de Chris Heiden

Mais de Chris Heiden (7)

Basic HTML/CSS