Introduction to WEB HTML, CSS

2,294 views
2,152 views

Published on

This course is an introduction to WEB world.

Published in: Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,294
On SlideShare
0
From Embeds
0
Number of Embeds
40
Actions
Shares
0
Downloads
50
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Introduction to WEB HTML, CSS

  1. 1. BKITAtom, Nov 2011 Hieu Le TrungWWW course1st day
  2. 2. 2Today target Web and relative terms  Web and web programming  Website vs. webpage, domain vs. URL Course introduction  Objective  Content  Useful tools HTML basic
  3. 3. 3Web & web programming Web in English language and web in our daily talks World Wide Web and internet
  4. 4. 4Web & web programming cont. Web programming, huh? For front-end developer: the war between browsers
  5. 5. 5Website and webpage Multiple webpage Under one domain website
  6. 6. 6Domain vs. URL Domain  www.bkitclub.net  google.com  my.opera.com URL  Absolute • Relative  http://www.bkitclub.net/forum • /imgs/bg.png  http://my.opera.com/vietnamese • ../style/main.css
  7. 7. 7Course objective Understand our web Have the ability to implement a static webpage (maybe a website) Have the background to study more about web development.
  8. 8. 8What will we do? Get to know the “face” of our web (done before) Study the HTML language Study the CSS languageHum… Our case-study: a flower shop website Your assignment: blog theme building (just to be sure your effort is effectively)
  9. 9. 9Our friends Some major browsers  IE 9  Firefox 6+ with firebug add-on  Chrome 14+  Opera 11+ A text editor  Window notepad  Notepad++, Gedit  Netbeans, Eclipse W3School at http://w3school.com , BkitClub forum
  10. 10. 10HTML Stand for Hypertext Markup Language A markup language, not a programming language An HTML document is eq. to a webpage Its brother: XHTML
  11. 11. 11HTML Element<a href=“page1.html”>Click here</a><img src=“../image.jpg” alt=“hi!” />o Start/Opening tago End/Closing tago Attribute: name=valueo Content: everything between the start and end tag
  12. 12. 12HTML charater reference See the HTML Character Entity Reference.html
  13. 13. 13Document type declaration One declaration for each HTML document Tell the browser how to render the HTML document and display it on the computer screen Keep your page being viewed as the same way in several browsers and system.
  14. 14. 14HTML document structure<!DOCTYPE html><html> <head> Meta data: keywords, script, style sheet, favicon… </head> <body> The content of your page: headings, divisions, paragraphs, images, hyper links, … </body></html>
  15. 15. 15Today tags <title> <h1>, <h2>, <h3>, <h4>, <h5>, <h6> <div>, <p> <blockquote>, <q> <hr>, <br> <b>, <i> <span>
  16. 16. 16<title> Tags: opening and closing tag Set the page title Attributes: none Examples:<html><head> <title>HTML introduction</title> </head> <body> The content of the document...... </body></html>
  17. 17. 17Heading tags (<h1> - <h6>) Tags: opening and closing tag Set the HTML headings Attributes: global attributes and event attributes Level: block Examples: <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6>
  18. 18. 18<div> Tags: opening and closing tag Define a division or a section. We usually use the <div> element to group HTML elements and format them with CSS. You can, but not recommended to, use <div> with text content Attributes: global attributes and event attributes Level: block Examples:<div> <h3>This is a heading</h3> <p>This is a paragraph.</p> <a href=“/some/where”>This is a link.</a></div>
  19. 19. 19<p> Tags: opening and closing tag Define a paragraph. Attributes: global attributes and event attributes Level: block Examples: <p>This is some text in a paragraph.</p> <p>Lorem ipsum dolor sit amet <a href=”/a/link”>A link inside a paragraph</a></p>
  20. 20. 20<blockquote> Tags: opening and closing tag The <blockquote> tag specifies a section that is quoted from another source. Attributes: cite, global attributes and event attributes  cite: Specifies the source of the quotation Level: block Examples:<blockquotecite="http://www.worldwildlife.org/who/index.html">For 50 years, WWF has been protecting the future ofnature. The world’s leading conservationorganization, WWF works in 100 countries and issupported by 1.2 million members in the UnitedStates and close to 5 million globally.</blockquote>
  21. 21. 21<q> Tags: opening and closing tag Define a short quotation Attributes: cite, global attributes and event attributes  cite: Specifies the source of the quotation Level: text Examples: <p>WWFs goal is to: <q>build a future where people live in harmony with nature</q>. We hope they succeed.</p>
  22. 22. 22<hr /> Tags: opening and self-closing tag Creates a horizontal line in an HTML page. Attributes: global attributes and event attributes Level: block Examples:<h1>HTML</h1><p>HTML is a language for describing webpages.</p><hr /><h1>CSS</h1><p>CSS defines how to display HTML elements.</p>
  23. 23. 23<br /> Tags: opening and self-closing tag Inserts a single line break. We just use it to insert a line break, not to separate two paragraphs. Attributes: global attributes and event attributes Level: block Examples:<p>This text contains<br />a line break.</p>
  24. 24. 24Bold and itatic text: <b> & <i> Tags: opening and closing tag Specify a bold or itatic text. Attributes: global attributes and event attributes Level: text Examples: <p>It was a <b>red</b> house with a <b>blue</b> door.</p> <p>He named his car <i>The lightning</i>, because it was very fast.</p>
  25. 25. 25<span> Tags: opening and closing tag Provide localized formatting within documents. This tag is also used to group inline elements. Attributes: global attributes and event attributes Level: text Examples:<p>My mother has <spanstyle="color:lightblue">light blue</span>eyes.</p>
  26. 26. 26Yêu cầuHiện thực một HTML document theo yêu cầu sau: Trên trình duyệt hiển thị tiêu đề của trang web là Cửa hàng hoa <tên cửa hàng> Có sử dụng <hr /> và quotation Có ít nhất hai đoạn, mỗi đoạn có ít nhất một heading  Giới thiệu về cửa hàng  Giới thiệu về chủ cửa hàng (có thể về bạn) Các nội dụng thêmChú ý: tệp tin có phần mở rộng là .html hoặc .htm
  27. 27. BKITAtom, Nov 2011 Hieu Le TrungWWW course2nd day
  28. 28. 2Today target HTML tags  Link  Image  List  Table  Iframe  Link, script and style
  29. 29. 3Hyper link <a> Tags: opening and closing tag Defines a hyperlink, which is used to link from one page to another. Attributes: href, hreflang, rel, target global attributes and event attributes Level: inline
  30. 30. 4 Hyper link <a> Attributes http://www.w3schools.com/html5/tag_a.aspAttribute Descriptionhref The URL of the page link goes tohreflang The language of the linked documentrel The relationship between the current document and the linked documenttarget How to open the linked document
  31. 31. 5Image <img> Tags: opening and self-closing tag Defines an image in an HTML page. Attributes: src, alt, height, width global attributes and event attributes Level: inline
  32. 32. 6 Image <img> Attributes http://www.w3schools.com/html5/tag_img.aspAttribute Descriptionsrc The URL of the imagealt The alternate text for an imagewidth The width of the imageheight The height of the image
  33. 33. 7URL Review http://mydomain.comindex.html animal plants cats.html flowers trees.html dogs.html roses.html
  34. 34. 8 HTML table What is a table? Table headerAttribute Descriptionsrc The URL of the imagealt The alternate text for an image Table rowswidth The width of the imageheight The height of the image Table columns
  35. 35. 9HTML table – simple tableA simple table structure<table> <tr> <td></td> Define a row <td></td> </tr> <tr> <td></td> Define a cell <td></td> </tr></table>
  36. 36. 10HTML table – simple tableA simple table structure with spanning cell Cell merged horizontally Cell merged verticallyUse <td> attributes: colspan and rowspan
  37. 37. 11HTML table – more semanticAdditional elements: <th>, <thead>, <tbody> and<tfoot> and <caption> <th>: define a header cell. It has the same attributes as the <td> element. <thead> Define the table headers <tbody> Define the table body <tfoot> Define the table footer The table header, body and footer elements have no visual effect. <caption> Define the caption of the table
  38. 38. 12Use HTML table in layout Years ago, the story begins …  Now, we use CSS instead!
  39. 39. 13HTML list• The first item 1. The first item• The second item 2. The second item• The third item 3. The third item An unordered list An ordered listWe use <ul> or <ol> with the help of <li> tags to defineunordered (or ordered) list in HTML
  40. 40. 14HTML list<ul> <ol> <li></li> <li></li> <li></li> <li></li></ul> </ol> An unordered list An ordered listThe list is no longer styled by HTML code in HTML5, we formatour lists by CSS.The ordered list has the start attribute to set the initial valuefor the first item of the list.
  41. 41. 15 HTML formHTML forms are used to pass data to a server.<form> tag defines a form. Its attributes: • action: specifies where to send the data of the form • enctype: specifies how form-data should be encoded before sending it to the server. • method: specifies how to send form data • name: the name of the formInside the <form> tag, we can define many elements.
  42. 42. 16 HTML form elements Defines an input control (textbox, password box,<input /> submit and cancel button, radio, checkbox)<textarea> Defines a multi-line text input control<label> Defines a label for an input element<fieldset> Defines a border around elements in a form<legend> Defines a caption for a fieldset element<select> Defines a select list (drop-down list)<optgroup> Defines a group of related options in a select list<option> Defines an option in a select list<button> Defines a push button http://www.w3schools.com/html/html_forms.asp
  43. 43. 17<pre> Tags: opening and closing tag Defines preformatted text. This section is displayed in monospace font and it preserves both space and line break. Attributes: global attributes and event attributes Level: block
  44. 44. 18<script> Tags: opening and closing tag Define a client-side script, such as a JavaScript. Attributes: src global attributes and event attributes  src the URL to the external script file Level: none
  45. 45. 19HTML comments The browser ignores these comment when rendering the HTML document. Usage:<!-- The comment --> Use comments to quickly view your changes in a “safety” way or in debugging process.
  46. 46. 20And more HTML tags …Tag Description<style> Define an internal style for the HTML document<base> Set the base URL for all relative URL in the HTML document<link> Define the relationship between a document and a external source (especially a style sheet)<meta> Provide metadata for the document<object> Embed an object to the HTML document (usually a shockwave flash object) Even more in http://www.w3schools.com/html5/html5_reference.asp
  47. 47. 21Internal frame <iframe> Tags: opening and closing tag Embed an external HTML document in to this document. Attributes: src global attributes and event attributes Level: block Even more in http://www.w3schools.com/html5/html5_reference.asp
  48. 48. 22Your task (30 min)Improve your flower shop website. Be sure that you have atleast 03 pages:  Home page: introduce your shop, the shop location, your slogan, what you sell …  Showcase page: introduce which flower you have in your store, their price, their description, ….  About page: introduce yourselfYou can use images in the /action/imgs folder
  49. 49. 23Next subjectCascading Style Sheet
  50. 50. BKITAtom, Nov 2011 Hieu Le TrungWWW course 3rd day
  51. 51. TODAY TARGET Introduction  Text formation  Content and style  Text align  CSS and CSS attachment  Color and text color  HTML class and id Cascading Style Sheet  Syntax  The “cascading”  CSS selector (simple) CSS width, height  Length and percentage  Width and height 2
  52. 52. CONTENT AND STYLE Any document has two aspects: content and style You see How is it CSS presented? Information What is HTML presented? You understand 3
  53. 53. CSS – WHAT IS IT CSS stands for “Cascading Style Sheet” It’s a W3C recommendation CSS defines how to display HTML elements 4
  54. 54. ATTACH THE CSS STYLE TO A PAGE Define style of each element by its style attribute. Define style inside the <style></style> of the HTML document. Use <link> tag to define a link to an external style sheet.  <link rel=“stylesheet” href=“url/to/the/css/file” type=“text/css” /> Import external style to current style  /* CSS rule (in a CSS file or inside the <style> tag) */ @import url(“url/to/the/css/file”); 5
  55. 55. CLASS AND ID Both of them are one of the HTML global element attributes An id should be unique in a HTML document. A class can be applied to many elements in a HTML document. <div id=“main” class=“doc-section”> <h1 class=“title”>......</h1> <div class=“post”> </div> </div> 6
  56. 56. TODAY TARGET Introduction  Text formation  Content and style  Text align  CSS and CSS attachment  Color and text color  HTML class and id Cascading Style Sheet  The “cascading”  CSS Syntax  CSS selector (simple) CSS width, height  Length and percentage  Width and height 7
  57. 57. THE SIMPLE “CASCADING” The higher priority rules overrides the lower one  The style in style attribute (not recommended)  The style inside the <style> tag  The style “imported” inside the <style> tag via @import  The external style sheet which is linked to by the <link> tag  The style “imported” inside an external style sheet.  The default browser style The style defined later overrides the previous one. View more at http://www.w3.org/TR/CSS2/cascade.html 8
  58. 58. CSS SYNTAX A set of rules A rules  One selector  One or more declaration Each declaration  A css property  Its value: length, percent, color, url, constant 9
  59. 59. THE CSS SIMPLE SELECTORS Define the elements this rule applies to A selector can be one or a sequence of  Universal selector *  HTML element h1 { ... }  Id definition #mainwrap { ... }  Class definition .post { ... } Selectors can be grouped  h1, h2, .post, #wrap { ... } See more at http://www.w3.org/TR/CSS2/selector.html 10
  60. 60. THE CSS SIMPLE SELECTORS (cont.) Any p element inside a blockquote element  blockquote p { … } Any h1 element inside a element which the id is “sidebox”  #sidebox h1 { … } Any p element have the class custom-para  p.custom-para { … } 11
  61. 61. TODAY TARGET Introduction  Text formation  Content and style  Text align  CSS and CSS attachment  Color and text color  HTML class and id Cascading Style Sheet  The “cascading”  CSS Syntax  CSS selector (simple) CSS width, height  Width and height  Length and percentage 12
  62. 62. CSS PROPERTIES : WIDTH and HEIGHT width ELEMENT height13
  63. 63. CSS PROPERTIES : WIDTH and HEIGHT width: set the width of an element Value Description auto The browser calculates the width. This is default length Defines the width in px, cm, etc. % Defines the width in percent of the containing block Specifies that the value of the width property should inherit be inherited from the parent element http://www.w3schools.com/cssref/pr_dim_width.asp 14
  64. 64. CSS PROPERTIES : WIDTH and HEIGHT height: set the height of an element Value Description auto The browser calculates the height. This is default length Defines the height in px, cm, etc. % Defines the height in percent of the containing block Specifies that the value of the height property should inherit be inherited from the parent element http://www.w3schools.com/cssref/pr_dim_width.asp 15
  65. 65. CSS LENGTH and PERCENTAGE Length: px, em, mm, cm, in, pt Notation Meaning px One pixel in normal screen display em The font height pt 1/72 inch mm, cm, in millimeters, centimeters, inches Percentage: % 16
  66. 66. MORE ABOUT DIMENSION … max-width min-width max-height min-height 17
  67. 67. TODAY TARGET Introduction  Text formation  Content and style  Text align  CSS and CSS attachment  Color and text color  HTML class and id Cascading Style Sheet  The “cascading”  CSS Syntax  CSS selector (simple) CSS width, height  Width and height  Length and percentage 18
  68. 68. CSS PROPERTIES: TEXT-ALIGN Specifies the horizontal alignment of text in an element. Value Description left Aligns the text to the left (default if ltr) right Aligns the text to the right (default if rtl) center Centers the text Stretches the lines so that each line has equal width justify (like in newspapers and magazines) Specifies that the value of the text-align property should inherit be inherited from the parent element http://www.w3schools.com/cssref/pr_text_text-align.asp 19
  69. 69. CSS PROPERTIES: COLOR Specifies the color of text (foreground color)Value Description Specifies the text color. Look at CSS Color Values for acolor complete list of possible color values. Specifies that the color should be inherited from the parentinherit element. IE8 requires !DOCTYPE, IE9 and above support this value. 20
  70. 70. CSS COLOR RGB color model HSL color model (CSS3 – advanced) 21
  71. 71. CSS COLOR VALUES CSS color name: red, white, navy, … Numerical CSS color values:  RGB or RRGGBB values: #06f, #00ff27,…  RGBA values (CSS3): rgba(r, g, b, alpha) or rgba(r%, g%, b%, alpha) transparent More at: http://www.w3.org/TR/css3-color/ 22
  72. 72. ACTION Do more, get more …23
  73. 73. FIREFOX EXTENSIONS Firebug Rainbow color tool 24
  74. 74. YOUR TASK Improve your previous website by applying the new CSS rules 25
  75. 75. Next subject CSS text formation (cont.), CSS font and CSS box model26
  76. 76. BKITAtom, Dec 2011 Hieu Le TrungWWW course 4th day
  77. 77. TODAY TARGET Text formation (cont)  Background  Text decoration  Image and color  Text Transformation  Position and repeat and  Text-indent attachment Font properties  Font families  Font size and line height  Font style  Font weight  Font variation 2
  78. 78. CSS PROPERTIES : TEXT-DECORATION text-decoration: set the width of an elementValue Descriptionnone Defines a normal text. This is defaultunderline Defines a line below the textoverline Defines a line above the textline-through Defines a line through the textblink Defines a blinking text Specifies that the value of the text-decoration propertyinherit should be inherited from the parent element http://www.w3schools.com/cssref/pr_text_text-decoration.asp 3
  79. 79. CSS PROPERTIES : TEXT-TRANSFORM text-transform: controls the capitalization of text. Value Description none No capitalization. The text renders as it is. This is default capitalize Transforms the first character of each word to uppercase uppercase Transforms all characters to uppercase lowercase Transforms all characters to lowercase Specifies that the value of the text-transform property inherit should be inherited from the parent element 4
  80. 80. CSS PROPERTIES : TEXT-IDENT text-ident: specifies the indentation of the first line in a text-block. Lorem ipsum dolor sit amet, lugens quia quod ait regem ut casus homini interimat potius accipiet. Rationem non potentiae Apollonium contigit cum obiectum dixit. Dionysiadis eum est se sed esse deprecor. 5
  81. 81. CSS PROPERTIES : TEXT-IDENT Value Description length Defines a fixed indentation in px, pt, cm, em, etc. Defines the indentation in % of the width of the parent % element Specifies that the value of the text-indent property should inherit be inherited from the parent element http://www.w3schools.com/cssref/pr_text_text-indent.asp6
  82. 82. TODAY TARGET Text formation (cont)  Background  Text decoration  Image and color  Text Transformation  Position and repeat and  Text-indent attachment Font properties  Font families  Font size and line height  Font style  Font weight  Font variation 7
  83. 83. CSS FONTS – SERIF AND SANS-SERIF Serif and Sans-serif fonts Times New Roman,  Arial, Tahoma, Verdana, Georgia Segoe UI, Ubuntu Monospace fonts  Courier New, Lucida Console, Consolas, Ubuntu Mono 8
  84. 84. CSS PROPERTIES : FONT-FAMILY font-family: set font of the element Value Description family-name A prioritized list of font family names generic- and/or generic family names family Specifies that the font family should be inherit inherited from the parent element http://www.w3schools.com/cssref/pr_font_font-family.asp Try each font in the declared list until the browser finds this font in the local machine. 9
  85. 85. CSS PROPERTIES : FONT-SIZE font-size: set size of a fontValue Descriptionxx-small, x-small,small, medium, large, Sets the font-size to a certain sizex-large, xx-large Sets the font-size to a smaller size than thesmaller parent element Sets the font-size to a larger size than thelarger parent elementlength Sets the font-size to a fixed size in px, cm, etc. Sets the font-size to a percent of the parent% elements font size Specifies that the font size should be inheritedinherit from the parent element 10
  86. 86. CSS PROPERTIES : LINE-HEIGHT line-height: specifies the line height. Value Description normal A normal line height. This is default A number that will be multiplied with the current font number size to set the line height length A fixed line height in px, pt, cm, etc. % A line height in percent of the current font size Specifies that the value of the line-height property should inherit be inherited from the parent element 11
  87. 87. CSS PROPERTIES : FONT-WEIGHT font-weight: sets how thick or thin characters in text should be displayed. Value Description normal Defines normal characters. This is default bold Defines thick characters bolder Defines thicker characters lighter Defines lighter characters 100, 200, 300, Defines from thin to thick characters. 400 is 400, 500, 600, the same as normal, and 700 is the same as 700, 800, 900 bold Specifies that the font weight should be inherit inherited from the parent element 12
  88. 88. CSS PROPERTIES : FONT-STYLE font-style: set the font style of the text Value Description The browser displays a normal font style. This is normal default italic The browser displays an italic font style oblique The browser displays an oblique font style Specifies that the font style should be inherited inherit from the parent element http://www.w3schools.com/cssref/pr_font_font-variant.asp 13
  89. 89. CSS PROPERTIES : FONT-VARIATION Font-variation: decide whether this text appears in the small-cap format. Value Description normal The browser displays a normal font. This is default small-caps The browser displays a small-caps font Specifies that the font variant should be inherited inherit from the parent element A SMALL-CAP FONT IS DISPLAYED LIKE THIS, JOHN! 14
  90. 90. CSS PROPERTIES : FONT font: sets all the font properties in one declaration.Value Descriptionfont-style Specifies the font style. See font-style for possible values Specifies the font variant. See font-variant for possiblefont-variant values Specifies the font weight. See font-weight for possiblefont-weight valuesfont- Specifies the font size and the line-height. See font-sizesize/line- and line-height for possible valuesheightfont-family Specifies the font family. See font-family for possible values 15
  91. 91. TODAY TARGET Text formation (cont)  Background  Text decoration  Image and color  Text Transformation  Position and repeat and  Text-indent attachment Font properties  Font families  Font size and line height  Font style  Font weight  Font variation 16
  92. 92. CSS PROPERTIES : BACKGROUND-COLOR background-color: sets the background color of an element. Include padding and border, not margin (read more in the 5th day) Value Description Specifies the background color. Look at CSS Color Values color for a complete list of possible color values. Specifies that the background color should be transparent transparent. This is default Specifies that the background color should be inherited inherit from the parent element 17
  93. 93. CSS PROPERTIES : BACKGROUND-IMAGE background-image: sets the background image for an element.Value Descriptionurl(URL) The URL to the imagenone No background image will be displayed. This is default Specifies that the background image should be inherited frominherit the parent element 18
  94. 94. CSS PROPERTIES : BACKGROUND-REPEAT background-repeat: sets if/how a background image will be repeated. Value Description The background image will be repeated both vertically and repeat horizontally. This is default repeat-x The background image will be repeated only horizontally repeat-y The background image will be repeated only vertically no-repeat The background-image will not be repeated Specifies that the setting of the background-repeat property inherit should be inherited from the parent element 19
  95. 95. CSS PROPERTIES : BACKGROUND-ATTACHMENT ackground-attachment: sets whether a background image is fixed or scrolls with the rest of the page.Value Description The background image scrolls with the rest of the page. This isscroll defaultfixed The background image is fixed Specifies that the setting of the background-attachment propertyinherit should be inherited from the parent element 20
  96. 96. CSS PROPERTIES: BACKGROUND-POSITION background-position: sets the starting position of a background image. 21
  97. 97. CSS PROPERTIES: BACKGROUND-POSITIONValue Descriptionleft topleft centerleft bottomright topright center If you only specify one keyword, the other value will be "center"right bottomcenter topcenter centercenter bottom The first value is the horizontal position and the second value is the vertical.x% y% The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. . Default value is: 0% 0% The first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSSxpos ypos units. If you only specify one value, the other value will be 50%.You can mix % and positions Specifies that the setting of the background-position property should beinherit inherited from the parent element 22
  98. 98. CSS PROPERTIES : BACKGROUND background: sets all the background properties in one declaration.Value Descriptionbackground-color Specifies the background color to be usedbackground- Specifies the position of the background imagespositionbackground-repeat Specifies how to repeat the background imagesbackground- Specifies whether the background images are fixed orattachment scrolls with the rest of the pagebackground-image Specifies ONE or MORE background images to be used 23
  99. 99. ACTION Do more, get more …24
  100. 100. YOUR TASK Improve your previous website by applying the new CSS rules 25
  101. 101. Next subject CSS box model26
  102. 102. BKITAtom, Dec 2011 Hieu Le TrungWWW course 5th day
  103. 103. TODAY TARGET Box model  Border  Margin  Padding Float and clear  Float  Clear Display and Position  Display  Position 2
  104. 104. CSS BOX MODEL Every element can be considered as a box margin padding content border http://www.w3schools.com/cssref/pr_text_text-decoration.asp 3
  105. 105. CSS 4-D SHORTAND For border, margin, padding, we have 4 sub- elements in the top, right, bottom and left of the formated element. For a PROP property, we also have another 4 properties:  PROP-left: defines the left PROP property  PROP-right: defines the right PROP property  PROP-top: defines the top PROP property  PROP-bottom: defines the bottom PROP property 4
  106. 106. CSS 4-D SHORTAND (cont) The PROP property can also be written in a shortand way using one of the following: PROP: VALUE VALUE VALUE VALUE PROP: VALUE Defines the top , right, bottom, Defines value for all four side of the left value of the PROP formated PROP property PROP: VALUE VALUE PROP: VALUE VALUE VALUE Defines the top and bottom, left Defines the top , left and right, and right value of the PROP bottom value of the PROP 5
  107. 107. CSS BORDER border: format the border of a element Properties Description border-width The width of the border border-style The style of the border border-color The color of the border border The shortand property 6
  108. 108. CSS PROPERTIES : BORDER-WIDTH border-width: sets the width of the border of an element Value Description thin Specifies a thin border medium Specifies a medium border. This is default thick Specifies a thick border length Allows you to define the thickness of the border Specifies that the border width should be inherited inherit from the parent element 7
  109. 109. CSS PROPERTIES : BORDER-STYLE border-style: sets the style of the border of an element http://www.w3schools.com/cssref/pr_border-style.asp 8
  110. 110. CSS PROPERTIES : BORDER-COLOR border-color: sets the style of the border of an element Value Description Specifies the background color. Look at CSS Color Values color for a complete list of possible color values Specifies that the border color should be transparent. This transparent is default Specifies that the border color should be inherited from inherit the parent element 9
  111. 111. CSS PROPERTIES : MARGIN Value Description auto The browser calculates a margin length Specifies a margin in px, pt, cm, etc. Default value is 0px Specifies a margin in percent of the width of the containing % element Specifies that the margin should be inherited from the parent inherit element Margin10
  112. 112. CSS PROPERTIES : PADDINGValue Descriptionlength Specifies the padding in px, pt, cm, etc. Default value is 0px% Specifies the padding in percent of the width of the containing elementinherit Specifies that the padding should be inherited from the parent element padding 11
  113. 113. TODAY TARGET Box model  Border  Margin  Padding Float and clear  Float  Clear Display and Position  Display  Position 12
  114. 114. CSS FLOATING ~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ A floating element allows other elements~~~~~~~~~~~~~~~~~~ wrap around it if there is a space~~~~~~~~ Without floating The block element is floating13
  115. 115. CSS PROPERTIES : FLOAT float: specifies whether or not a box (an element) should float. Value Description left The element floats to the left right The element floats the right The element is not floated, and will be displayed just where it none occurs in the text. This is default Specifies that the value of the float property should be inherited inherit from the parent element 14
  116. 116. CSS PROPERTIES : CLEAR clear: specifies which sides of an element where other floating elements are not allowed.Value Descriptionleft No floating elements allowed on the left sideright No floating elements allowed on the right sideboth No floating elements allowed on either the left or the right sidenone Default. Allows floating elements on both sides Specifies that the value of the clear property should be inherited frominherit the parent element 15
  117. 117. TODAY TARGET Box model  Border  Margin  Padding Float and clear  Float  Clear Display and Position  Display  Position 16
  118. 118. CSS PROPERTIES : POSITION position: specifies the type of positioning method used for an element (static, relative, absolute or fixed).Value Description Elements renders in order, as they appear in the document flow. This isstatic default. The element is positioned relative to its first positioned (not static)absolute ancestor elementfixed The element is positioned relative to the browser window The element is positioned relative to its normal position, so "left:20" addsrelative 20 pixels to the elements LEFT positioninherit The value of the position property is inherited from the parent element 17
  119. 119. CSS PROPERTIES : DISPLAY display: specifies the type of box an element should generate.Value Descriptionnone The element will generate no box at all The element will generate a block box (a line break before and afterblock the element) The element will generate an inline box (no line break before orinline after the element). This is defaultinline-block The element will generate a block box, laid out as an inline box The element will generate an inline box (like <table>, with no lineinline-table break before or after) 18
  120. 120. CSS PROPERTIES : DISPLAYValue Description The element will generate a block box, and an inline box forlist-item the list marker The element will generate a block or inline box, depending onrun-in context The element will behave like a table (like <table>, with a linetable break before and after)table-caption The element will behave like a table caption (like <caption>)table-cell The element will behave like a table celltable-column The element will behave like a table columntable-column- The element will behave like a table column group (likegroup <colgroup>) 19
  121. 121. CSS PROPERTIES : DISPLAYValue Descriptiontable-footer- The element will behave like a table footer row groupgrouptable-header- The element will behave like a table header row groupgrouptable-row The element will behave like a table rowtable-row-group The element will behave like a table row group Specifies that the value of the display property should beinherit inherited from the parent element 20
  122. 122. ACTION Do more, get more …21
  123. 123. YOUR TASK Improve your previous website by applying the new CSS rules. You should re-layout it without using table int the main layout. 22
  124. 124. BKITAtom, Dec 2011 Hieu Le TrungWWW course 6th day
  125. 125. TODAY TARGET List formating  List style  List style image  List style position  List style type Table formating Link formating  “lovehate” rule 2
  126. 126. LIST FORMATION LIST-STYLE-IMAGE replaces the list-item marker with an image. replaces the list-item marker with an image. Value Description url The path to the image to be used as a list-item marker No image will be displayed. Instead, the list-style-type none property will define what type of list marker will be rendered.This is default Specifies that the value of the list-style-image property inherit should be inherited from the parent element 3
  127. 127. LIST FORMATION LIST-STYLE-POSITION specifies if the list-item markers should appear inside or outside the content flow. Value Description Indents the marker and the text. The bullets appear inside the inside content flow Keeps the marker to the left of the text. The bullets appears outside outside the content flow. This is default Specifies that the value of the list-style-position property inherit should be inherited from the parent element 4
  128. 128. LIST FORMATION LIST-STYLE-TYPE specifies the type of list-item marker in a list.Value Descriptionarmenian The marker is traditional Armenian numberingcircle The marker is a circlecjk-ideographic The marker is plain ideographic numbersdecimal The marker is a number.This is default for <ol>decimal-leading- The marker is a number with leading zeros (01, 02, 03,zero etc.)disc The marker is a filled circle.This is default for <ul>georgian The marker is traditional Georgian numberinghebrew The marker is traditional Hebrew numbering 5
  129. 129. LIST FORMATION LIST-STYLE-TYPE The value of the listStyleType property is inherited frominherit parent elementlower-alpha The marker is lower-alpha (a, b, c, d, e, etc.)lower-greek The marker is lower-greeklower-latin The marker is lower-latin (a, b, c, d, e, etc.)lower-roman The marker is lower-roman (i, ii, iii, iv, v, etc.)none No marker is shownsquare The marker is a squareupper-alpha The marker is upper-alpha (A, B, C, D, E, etc.)upper-latin The marker is upper-latin (A, B, C, D, E, etc.)upper-roman The marker is upper-roman (I, II, III, IV,V, etc.) 6
  130. 130. LIST FORMATION LIST-STYLE sets all the list properties in one declaration.Value Description Specifies the type of list-item marker. See list-style-type for possiblelist-style-type valueslist-style- Specifies where to place the list-item marker. See list-style-positionposition for possible values Specifies the type of list-item marker. See list-style-image for possiblelist-style-image values Specifies that the value of the list-style property should be inheritedinherit from the parent element 7
  131. 131. TODAY TARGET List formating  List style  List style image  List style position  List style type Table formating Link formating  “lovehate” rule 8
  132. 132. SAMPLE CUSTOM TABLE Column 1 Column 2 Column 3 Lorem Novoire idimu $ 5,000 Ispum Sactum liner practist $13,000 Consepti Echemica sisto $ 25,300 Lavarine Clarif Woodi $11,000 Outes Sentia Cloro Sacture $ 8,7009
  133. 133. SAMPLE CUSTOM TABLE How do you do it in CSS?10
  134. 134. TODAY TARGET List formating  List style  List style image  List style position  List style type Table formating Link formating  “lovehate” rule 11
  135. 135. HYPERLINK FORMATING (ANCHOR) What is a hyperlink? Its default display. Link Visited Hover Active • Normal • A link • Your • You’re apperance have been mouse is pressing visited over the the left anchor. mouse button! 12
  136. 136. ANCHOR PSEUDO ELEMENTS :link :visited :hover :active So we have to defines these elements in a certain order call “LoVeHAte” Pseudo elements will be discussed more in the next class. 13
  137. 137. ACTION Do more, get more …14
  138. 138. YOUR TASK Improve your previous website by applying the new CSS rules.You should re-layout it without using table int the main layout. 15
  139. 139. BKITAtom, Dec 2011 Hieu Le TrungWWW course 7th day
  140. 140. TODAY TARGET CSS 3 new features  Border-radius  Box-shadow  Opacity CSS media type CSS selector review Assignment discuss 2
  141. 141. CSS 3: BORDER-RADIUS Add rounded borders to elements! IE9+ Firefox 4+ Chrome 14+ Opera Safari 4+ border-radius: 1-4 length|% / 1-4 length|%; Horizontal radius/ Vertical radius top-left -> top-right -> bottom-right -> bottom-left 3
  142. 142. CSS 3: BOX-SHADOW Attaches one or more drop-shadows to the box. IE9+ Firefox 4+ Chrome 14+ Opera Safari 5.1.1+ box-shadow: h-shadow v-shadow blur spread color inset; 4
  143. 143. CSS 3: BOX-SHADOW Attaches one or more drop-shadows to the box.Value Description Required. The position of the horizontal shadow. Negativeh-shadow values are allowed Required. The position of the vertical shadow. Negative valuesv-shadow are allowedblur Optional. The blur distancespread Optional. The size of shadow Optional. The color of the shadow. Look at CSS Color Valuescolor for a complete list of possible color values Optional. Changes the shadow from an outer shadow (outset)inset to an inner shadow 5
  144. 144. CSS 3: OPACITY Sets the opacity level for an element. Value Description Specifies the opacity. From 0.0 (fully transparent) to value 1.0 (fully opaque) The value of the opacity property should be inherit inherited from the parent element 6
  145. 145. CSS BROWSER ALTERNATIVEPROPERTIES Before CSS3, there are many special properties which is not standard. When CSS3 is released, we need a period of time to implement all of its standards in ALL browser filter -moz- -webkit- -o- -webkit- 7
  146. 146. TODAY TARGET CSS 3 new features  Border-radius  Box-shadow  Opacity CSS media type CSS selector review Assignment discuss 8
  147. 147. CSS MEDIA TYPEMedia Type Descriptionall Used for all media type devicesaural Used for speech and sound synthesizersbraille Used for braille tactile feedback devicesembossed Used for paged braille printershandheld Used for small or handheld devicesprint Used for printersprojection Used for projected presentations, like slidesscreen Used for computer screens Used for media using a fixed-pitch character grid, liketty teletypes and terminalstv Used for television-type devices 9
  148. 148. CSS MEDIATYPE When linking to the HTML document<link href=“…” type=“…” rel=“…” media=“…” /> In CSS declarations@media …{ // CSS rules} 10
  149. 149. ACTION Do more, get more …11
  150. 150. YOUR TASK Improve your previous website by applying the new CSS rules.You should re-layout it without using table int the main layout. 12

×