Class4
- 1. Class 4
- 2. Reviews: TagsTags we have covered:<u>Paragraph
- 4. Heading
- 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.html1images/stuart.jpg<imgsrc=“________________” alt=“stuart”/><imgsrc=“__________________” alt=“murdoc”/>images2images/murdoc.jpg12stuart.jpgmurdoc.jpg
- 16. Logical VS Physical Markupslogical 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 Tagsalign=“ ”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 marginsNon-breaking space 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 LinksAbsolute linkRelative linkEmail link<a href="mailto:jilee@lagcc.cuny.edu">Contact me</a>
- 22. Using Color on Web PagesComputer monitors display color as intensities of red, green, and blue lightRGB ColorThe 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 valueHex value pairs range from 00 to FFThree hex value pairs describe an RGB color#000000 black #FFFFFF white#FF0000 red#00FF00 green#0000FF blue #CCCCCC grey11
- 24. Web Color PaletteA collection of 216 colorsDisplay the most similar on the Mac and PCplatformsHex values: 00, 33, 66, 99, CC, FFColor Chart http://webdevfoundations.net/color12
- 25. Making Color ChoicesHow to choose a color scheme?Monochromatichttp://meyerweb.com/eric/tools/color-blendChoose from a photograph or other imagehttp://www.colr.orgBegin with a favorite colorUse one of the sites below to choose other colorshttp://colorsontheweb.com/colorwizard.asphttp://kuler.Adobe.comhttp://colorschemedesigner.com/
- 26. Accessibility & ColorEveryone is not able to see or distinguish between colorsInformation must be conveyed even if color cannot be viewedAccording to Vischeck http://www.vischeck.com/vischeck1 out of 20 people experience some type of color deficiencyColor choice can be crucialAvoid using red, green, brown, gray, or purple next to each otherWhite, black, and shades of blue and yellow are easier to differentiate.Simulation: http://www.vischeck.com/vischeck/vischeckURL.php
- 27. Configuring Text with CSSCSS properties for configuring text:font-weight Configures the boldness of textfont-styleConfigures text to an italic stylefont-sizeConfigures the size of the textfont-familyConfigures the font typeface of the text
- 28. The font-size PropertyAccessibility Recommendation:
- 29. Use em or percentage font sizes – these can be easily enlarged in all browsers by users
- 30. Em and Percentage are relativeThe font-family PropertyNot everyone has the same fonts installed in their computerConfigure a list of fonts and include a generic family name<p style=“font-family: Arial,Verdana, sans-serif”}
- 31. AssignmentCreate an ‘About Me’ page and name it first_lastname_index.htmlMake sure to include the following:Inline styleDefinition ListImage (source from image folder)External linkRelative link (to recipe.html or band.html)Contact linkCompress (zip) the package into first_lastname.zip and upload it to the discussion board.
- 32. Next Week Class 5AssignmentPop QuizPractice on p.56 of your book