Intro to HTML and CSS

Intro to Web Design Lou Fuiano | Instructor Temple University Center City Fall 2013
CLASS POINTS | HTML Review Curriculum and Resources File Management Notepad Intro Exercise Tag, Element, Attribute, Value HTML and The Browser W3C Schools Adding Links Adding Images Formatting Text Tables Lists Colors HTML Quiz | PDF

CLASS POINTS | CSS HTML Quiz Styles Intro Syntax Selectors Comments External. Internal and Inline Styles Examples Background Text Font Properties Borders Outline Properties Positioning READ THIS: css-positioning-101

CLASS POINTS | CSS 2 External Style Sheet Body Class Div ID Div Class Page Layout Background image Header Design The Grid and Page Structure Styling the Nav Styling P Tags Tweaking Image Position

Project Notes Review the page layouts below and follow them as closely as possible to create a multipage web site using HTML, CSS and the images provided. Remember to use EXTERNAL STYLE SHEETS.

Try to create at least three pages; HOME page, an ABOUT Page and a PRODUCTS page. If you get in a rhythm, try to also create a contact page, list page and a news page of your own design.


Products Page

The About Page

Div Structure

Download these supplied images to help create your site. Background strip Logo Baseball Vases Noisemaker Hat

CLASS RESOURCES Start Up Outline | PDF We will start getting the very basics from this document.

Start Up Handout | PDF This is a more detailed breakdown complete with exercises.

ONLINE RESOURCES World Wide Web Consortium Web standards and active discussion.

W3Schools Full tutorials for building all aspects of web media.

CSS Zen Garden A powerful display of how to make Style Sheets bring your HTML pages to life.

A List Apart | Code An online publication that details the practices of content creators and how to best use the web an it’s available resources.

20 Things About Browsers and the Web Brilliant use of HTML5 and Javascript to create a clever user experience while seamlessly delivering the goods. Worth a look and a great primer.


BOOKS Cookwood Press HTML how-to books and resource guides by Elizabeth Castro.

Bulletproof Web Design Create flexible web pages through well crafted CSS by Dan Cederholm

Head First Labs/HTML Friendly HTML how-to books published by O’Reilly.

TOOLS Textwrangler It’s free and it works like a charm. Produced by the makers of one of the leading professional HTML and text editors for the Macintosh.

NotePad-Plus-Plus Notepad++ is a free source code editor and Notepad replacement that supports several languages. Running in the MS Windows environment.

TextMate Industry standard code and markUp editor.

XScope A great tool for getting and controlling all visual elements on the screen.

CSS Edit Dynamic Style Sheet authoring software that speeds up the process of how we work with and preview CSS.

Coda FTP and code editor with built in CSS editing

SlickMaps Diagraming tools for a live sitemap

Typetester An online tool that shows how type displays in various sizes, spacing and color.

Fetch An easy-to-use, full-featured FTP and SFTP client for the Apple Macintosh.

Boxer a full-featured text editor for Windows that’s easy to use, but sufficiently powerful for even the most complex text editing tasks.

Filezilla A free and easy-to-use, FTP client for Windows Vista.