Basic HTML/CSS

1. Partner Certification - Silver

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. 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. 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. 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. HTML Skeleton Doctype <html> <head> <title> Title Text Goes Here </title> </head> <body> Content Area </body> </html>

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 SEO Examples: • <h1>This is a heading</h1> • <h2>This is a heading</h2> • <h3>This is a heading</h3>

8. 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>

9. 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" />

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. 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. 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. 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. Order of CSS Seniority Inline CSS Styles Internal Style Sheet External Style Sheet Browser Default

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 Pardot's Knowledge Base

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. 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

Basic HTML/CSS

Recomendados

Más contenido relacionado

Was ist angesagt?

Was ist angesagt?(20)

Destacado

Destacado(6)

Similar a Basic HTML/CSS

Similar a Basic HTML/CSS(20)

Más de Chris Heiden

Más de Chris Heiden(7)

Basic HTML/CSS