Downloaded 14 times
Uploaded byChris Heiden
Basic HTML/CSS
This document provides an overview of HTML and CSS topics for a Partner Certification course. It includes brief explanations and examples of common HTML elements and tags like headings, paragraphs, links and images. It also covers the basics of CSS including the different types of style sheets (external, internal, inline), CSS syntax, and how to style Pardot forms using internal style sheets. The document concludes by noting students will take a test to pass this portion of the certification.
More Related Content
![Cascading style sheet (css)]](https://cdn.slidesharecdn.com/ss_thumbnails/cascadingstylesheetcss-130819011155-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Basic HTML/CSS
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 • Whatis 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 • Headingsare 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 • CSSstands 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 CSSSeniority Inline CSS Styles Internal Style Sheet External Style Sheet Browser Default
- 15. CSS – PardotLayout 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 CourseHTML/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!