Push the Portfolio Envelop Laura Yost KCELT Dog Days 2008

Push It How? Push It Why? Flexibility! Creativity! Adaptability! Transfer-ability!

Working Backwards: What to Put In? Possible “Digital” Portfolio Artifacts: 1. WORD documents 2. PPT presentations 3. Photos/scanned images 4. PDFs 5. Screen captures 6. Videos (teaching demo) =.doc =.ppt Photoshop Cute PDF Gadwin Videotapes

The Basics: How to Begin I use a white background create variation with HTML punctuate with graphics make standardized format/content

The Basics: How to Begin II Programs: FlashPeak BlazeFtp Accessories: Notepad Viewing 1: View → Source Viewing 2: File →Open→ Browse

The Basics: How to Begin II Programs: FlashPeak BlazeFtp Accessories: Notepad Viewing 1: View → Source Viewing 2: File →Open→ Browse

HTML – The On-line Language HTML (Hyper Text Markup Language) Basic building block of any on-line page # online code generators/tutorials

HTML – The Basics of Code HTML is a mirrored code: most commands/ tags need a match (front & back) bold underline cnn.com italicize centered!... they also need two sets of quotes

Some instances do not need a match to work Some General Issues... To CAPITALIZE your code or not? Keep it clear & clean; it’s easier to decipher! Organize images, documents, etc. If it doesn’t work, look for common mistakes! HTML – The Basics of Code

#1: No Need To Reinvent the Wheel! There is a lot you can learn & borrow from existing websites...

#2: Give Your Font Some Style Types Face & Sizing Times New Roman Verdana ! Verdana! Font Coloring Verdana! Courier!

#3: Link to a Document #4: Link to Code or a Website Kirkwood Community College syllabus Fall Syllabus! Click HERE for your Fall Syllabus! KCELT (PDF)

#5 & #6: Working with Pictures 1. Most images can be copied 2. Cautious of copyrights 3. RIGHT click loaded image 4. “Save Picture As” I MUST have that! I MADE that!

Additional Picture Information How do I link an image? LINK + IMAGE I am linked now! But I will ALWAYS have a border! OR

#7: Integrate ALT Rollovers In order to provide additional information Useful for the sight-impaired <IMG SRC=“brochure.jpg” ALT=“This brochure features a piece of gold artwork from an ancient civilization in South America. The exhibit Americas In Antiquity is at the Chicago Field Museum.” >

#8: Organize With Internal Links Straightforward presentation of information Prevents constant scrolling Click Here to Begin | Skip to End of Exercise Click Here to Begin | Skip to End of Exercise Start Here!

I want to wrap text, create cool layouts! Content TR = table rows, as many as you want! TD = in the rows, as many as you want! You can insert images, text, colors in the TD #9: Create Some Structure with Tables Content

Structure & More with Tables Dissecting Table Design = Tables within tables! It can get very complex = flexibility!

#10: Design a Graphic & Insert It Use Adobe Photoshop (request to add) Create a graphic (photo, button, title) “Save for Web” Use the “.JPG” or the “.GIF” ending

The Essence of HTML Code Basics 1.Borrow some code! 2.Give your font style 3.Link to a document 4.Link to another website 5.Include a picture – that’s not yours 6.Include a picture – that’s yours 7.Integrate ALT “rollovers” 8.Create “structure” with tables 9.Design a graphic & insert it! EASY HARD

#8: Organize With Internal Links