1. Class 4

3. Single line break

4. Heading

5. Strong emphasis

6. Emphasis

7. Bold

8. Italicize

9. Underline

10. Anchor (link)

11. Unordered List

12. List Item

13. Ordered List

14. Insert Image with alternative text<p> <a> <br/> <ul> <h1> <li> <strong> <ol> <em> <imgsrc=“” alt =“”> <b> <i>

15. Reviews: Inserting an Image <imgsrc=“image location” alt=“image description”/> index.html 1 images/stuart.jpg <imgsrc=“________________” alt=“stuart”/> <imgsrc=“__________________” alt=“murdoc”/> images 2 images/murdoc.jpg 1 2 stuart.jpg murdoc.jpg

16. Logical VS Physical Markups logical markup tags describe the role a piece of text plays (in line with XML) Physicalmarkup describes the appearance of a piece of text.

17. W3.org’s guideline for HTML 5 <b> <i>

18. More Tags align=“ ” left: text lines are rendered flush left. center: text lines are centered. right: text lines are rendered flush right. justify: text lines are justified to both margins. Ex) <h1 align="center"> How to Carve Wood </H1>

19. blockquote <blockquote> indents left and right margins Non-breaking space &nbsp; More Tags

20. More Tags <dl> <dt><strong>Hobbies</strong></dt> <dd>jump over fences</dd> <dd>tip over alpacas</dd> <dt><strong>Favorite Food</strong></dt> <dd>grass on bush</dd> <dd>bush on grass</dd> <dd> <a href="recipe.html">click here to see the recipe for both</a> <dt><strong>Favorite Band</strong></dt> <dd>Alpacaz</dd> <dd><a href="coldpacaz.html">Coldpacaz</a></dd> </dl> Definition List <DL> Definition Title<DT> Definition Data<DD>

21. More Links Absolute link Relative link Email link <a href="mailto:jilee@lagcc.cuny.edu">Contact me</a>

22. Using Color on Web Pages Computer monitors display color as intensities of red, green, and blue light RGB Color The values of red, green, and blue vary from 0 to 255. Hexadecimal numbers (base 16) represent these color values. 10

23. Hexadecimal Color Values # is used to indicate a hexadecimal value Hex value pairs range from 00 to FF Three hex value pairs describe an RGB color #000000 black #FFFFFF white #FF0000 red#00FF00 green #0000FF blue #CCCCCC grey 11

24. Web Color Palette A collection of 216 colors Display the most similar on the Mac and PCplatforms Hex values: 00, 33, 66, 99, CC, FF Color Chart http://webdevfoundations.net/color 12

25. Making Color Choices How to choose a color scheme? Monochromatic http://meyerweb.com/eric/tools/color-blend Choose from a photograph or other image http://www.colr.org Begin with a favorite color Use one of the sites below to choose other colors http://colorsontheweb.com/colorwizard.asp http://kuler.Adobe.com http://colorschemedesigner.com/

26. Accessibility & Color Everyone is not able to see or distinguish between colors Information must be conveyed even if color cannot be viewed According to Vischeck http://www.vischeck.com/vischeck 1 out of 20 people experience some type of color deficiency Color choice can be crucial Avoid using red, green, brown, gray, or purple next to each other White, black, and shades of blue and yellow are easier to differentiate. Simulation: http://www.vischeck.com/vischeck/vischeckURL.php

27. Configuring Text with CSS CSS properties for configuring text: font-weight Configures the boldness of text font-style Configures text to an italic style font-size Configures the size of the text font-family Configures the font typeface of the text

29. Use em or percentage font sizes – these can be easily enlarged in all browsers by users

31. Assignment Create an ‘About Me’ page and name it first_lastname_index.html Make sure to include the following: Inline style Definition List Image (source from image folder) External link Relative link (to recipe.html or band.html) Contact link Compress (zip) the package into first_lastname.zip and upload it to the discussion board.

32. Next Week Class 5 Assignment Pop Quiz Practice on p.56 of your book