HTML & CSS A brief introduction. OUTLINE 1.What is HTML? 2.What is CSS? 3.How are they used together? 4.Troubleshooting/Common problems 5.More resources.

HTML & CSS A brief introduction

OUTLINE

1. What is HTML?

2. What is CSS?

3. How are they used together?

4. Troubleshooting/Common problems

5. More resources

HTML What is it?

HYPERTEXT MARKUP LANGUAGE HTML makes up the structure of your webpage (CSS is design)

This includes things like headers, paragraphs, links, images, divs, tables, forms, etc.

In the past, HTML used to do design, too, but most of that is depreciated code in favor of CSS.

HTML is a forgiving language (You can technically type anything in Notepad and save it as FILENAME.html and it’s an HTML document), but it does have a specific syntax that should be followed You need to declare HTML, Head, and Body at the minimum Some tags close and some don’t We’re going to go over the basics. If you were developing a production website, you would add more header information for accessibility and indexing by web searches (SEO).

THE VERY BASICS & HTML SYNTAX – 1.HTML <html><head><title>This is the title of my page</title></head>

<body><p>This is a very basic page.</p></body>

</html>

HTML

Start with HTML: this lets the browser know what is going on.

There’s an opening and closing tag to show where HTML starts and HTML ends.

Everything else is going in between these two tags.

<html></html>

HEAD

Next comes the Head.

Everything that applies to the rest of the document’s code will come in here. This means scripts like CSS (design) and JavaScript usually come into play here.

Title shows the title of your page in the tab.

<head><title>This is the title of my page</title></head>

BODY

Finally, body. This is the meat of your page. All the structures of the page, text, images, etc. will appear here.

This one just has a paragraph in it with some text. You’ll notice the paragraph also opens and closes.

HTML has attributes in its tags as well like <img src=“image.png” alt=“My Image”>

<body><p>This is a very basic page.</p></body>

A LITTLE MORE CONTENT – 2.HTML Cue to open 2.html

CSS So what is this then?

CASCADING STYLESHEETS

CSS is the design! It lets us take what we just wrote and make it nicer.

You can specifically pick out almost any aspect of the HTML and tell it to be a certain color, size, font, width, etc.

Because it’s a script that applies to the whole page, it goes in the <head> area of the HTML.

It has a different syntax than HTML.

Finally, CSS can be added into a page many different ways.

ADDING CSS & CSS SYNTAX – 3.HTML body {

background-color:#eee;

font-family:Calibri, Arial, Helvetica, sans-serif;

color:#444;

}

h1, h2, h3, h4 {

font-weight:500;

}

strong {

color:rgb(38, 131, 198);

}

CSS CAN TRANSFORM YOUR WEBSITE http://www.csszengarden.com

http://www.csszengarden.com/

http://www.csszengarden.com/

HTML & CSS – 3 WAYS TO USE THEM

TOEGETHERTogether now!

WAY #1 – INTERNAL CSS

You can just add put your CSS in the head of your HTML and wrap it in <style> tags if you like.

<html>

<head>

<title>Page</title>

<style type=“text/css”>

body {

background-color:#eee;

font-family:Calibri, Arial, Helvetica, sans-serif;

color:#444;

}

</style>

</head>

WAY #2 – EXTERNAL CSS

You can write CSS in a notepad file and just save it as a .css file type. From there, you can easily reference the coding externally with this script.

This is normally what production sites use because the stylesheets become rather large.

<html>

<head>

<title>Page</title>

<link rel=“stylesheet” href=“style.css” type=“text/css”>

</head>

WAY #3 – INLINE CSS

Style is an HTML attribute that you can add to any HTML tag. Inside, you can put CSS for that specific element.

It’s not an elegant solution in most cases, but this works really well for emails.

<html>

<head>

<title>Page</title>

</head>

<body style=“background-color:#eee; font-family:Calibri, Arial, Helvetica, sans-serif; color:#444;”>

HTML & CSS CAN DO THE SAME THING <html>

<head>

<title>Page Title</title>

</head>

<body bgcolor=“white”>

<p><font color=“blue” face=“Arial”>

Lorem ipsum</p>

<p><font color=“blue” face=“Arial”>

Lorem ipsum</p>

<html>

<head>

<title>Page Title</title>

<style>

body {

background-color:#fff;

}

p {

color:blue;

font-family:Arial;

} </style>

</head>

<body>

<p>Lorem ipsum</p>

TROUBLESHOOTING/COMMON PROBLEMS

Can we fix it? Yes, we can!

ABOUT OUR CODE

• Our Email Templates usually use a lot of inline code and span HTML tags to style text. This can cause redundancies.

• We also have certain classes that we use like “pageContainer” and “cdTableContent”

• Layouts for emails are normally made up of tables. This is also how we code layouts in Drag and Drop, Block, and Free Style.

CODE WE GENERATED LOOKS LIKE THIS

DON’T PANIC

HTML TABLES

<table>

<tbody>

<tr>

<td>Row 1, Column 1, Cell 1</td>


</tr>

<tr>



</tr>

</tbody>

</table>

TR – this indicates a row

TD – this is a cell

PROBLEM #1 – SPACING

PROBLEM #2 – FONTS AND COLORS

RESOURCES I get by with a little help from my friends

LINKS

http://www.w3schools.com/html/default.asp

http://www.codecademy.com/en/tracks/web

https://www.campaignmonitor.com/css/

http://www.emailonacid.com/images/blog_images/downloads/2014/wp_outlook.pdf

https://inlinestyler.torchbox.com/












HTML & CSS A brief introduction. OUTLINE 1.What is HTML? 2.What is CSS? 3.How are they used together? 4.Troubleshooting/Common problems 5.More resources.

Documents