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 This is the title of my page This is a very basic page.

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.

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. This is the title of my page

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 This is a very basic page.

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

HTML & CSS – 3 WAYS TO USE THEM TOEGETHER Together now!

WAY #1 – INTERNAL CSS You can just add put your CSS in the head of your HTML and wrap it in tags if you like. Page body { background-color:#eee; font-family:Calibri, Arial, Helvetica, sans-serif; color:#444; }

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

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

HTML & CSS CAN DO THE SAME THING Page Title Lorem ipsum Lorem ipsum Page Title body { background-color:#fff; } p { color:blue; font-family:Arial; } Lorem ipsum

TROUBLESHOOTING/COMMON PROBLEMS Can we fix it? Yes, we can!

ABOUT OUR CODE Our 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 s 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 Row 1, Column 1, Cell 1 Row 1, Column 2, Cell 2 Row 2, Column 1, Cell 3 Row 2, Column 2, Cell 4 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 dfhttp:// df