Download to read offline
Html&css slideshare
- 1.
- 2. Agenda ■ HTML History ■An HTML Document ■ HTML and Browser 2
- 3. Agenda ■ HTML History ■An HTML Document ■ HTML and Browser 3
- 4. HTML History ■ Internet ■WorldWideWeb (WWW) – The WorldWide Web (WWW), also called the Web, is an information space where documents and other web resources are identified by Uniform Resource Locators (URLs), interlinked by hypertext links, and accessible via the Internet(wiki) – HTML (Language to create and share doc) – URL / URI – HTTP ( Language used to communicate b/w browser and server) 4
- 5.
- 6. Agenda ■ HTML History ■An HTML Document ■ HTML and Browser 6
- 7. HTML Documents ■ HTMLwas created to share documents – text , data , images all linked together ■ HTML is a markup language – Mean to be processed by a client application( browser ) 7
- 8. Anatomy of HTMLdocument ■ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head><title>Title of the document</title></head> <body>…Content…</body> </html> ■ DOCTYPE: Valid DTD List : https://www.w3.org/QA/2002/04/valid-dtd-list.html Validate HTML : https://validator.w3.org/ 8
- 9. Anatomy of HTMLdocument ( Contd.,) ■ Head : – <title> – <meta> <meta name=“keywords” content=“html , html5 ”> – <script> <script type=“text/javascript”> window.onload = function (){};</script> – <style> <style type=“text/css”> body {color: red }</style> – <link> <link rel=“stylesheet” type=“text/css” href=“abc.css”/> – <base> <base href=“/”> 9
- 10. Anatomy of HTMLdocument ( Contd.,) ■ BODY can have – Text – List – Links – Tables – Images / Objects 10
- 11. Anatomy of HTMLdocument ( Contd.,) ■ BODY can have – Text – List – Links – Tables – Images / Objects 11
- 12. BODY -TEXT (Contd.,) ■ Heading – Section Heading ■ H1 – Used by search engine ( once per page ) ■ H2- H6 – Sub Headings ■ BlockVs Inline Elements ■ Text breaking and whitespace(Ignored in block and inline elements) ■ <pre> whitespace is respected ■ <br/> ■ <hr/> ■ Character entities ( < >) ■ Document elements – <sub> , <sup> , < abbr title=“”>ASAP</abbr> , <accronym> , <strong> 12
- 13. Anatomy of HTMLdocument ( Contd.,) ■ BODY can have – Text – List – Links – Tables – Images / Objects 13
- 14. Anatomy of HTMLdocument ( Contd.,) ■ BODY can have – Text – List – Links – Tables – Images / Objects 14
- 15. BODY - List( Contd.,) ■ Un Ordered: <ul > ■ Attr – style="list-style-type:none/square/circle/disc“ ■ Ordered: <ol > ■ Attr – type=“a/A/i/1” – start=“50” 15
- 16. Anatomy of HTMLdocument ( Contd.,) ■ BODY can have – Text – List – Links – Tables – Images / Objects 16
- 17. Anatomy of HTMLdocument ( Contd.,) ■ BODY can have – Text – List – Links – Tables – Images / Objects 17
- 18. BODY - Link( Contd.,) ■ Anchor – As Source <a name=“abc”/> ■ Eg: <a id=“abc” title=“go there”>TO GO </a> – <a href=“#abc”>im here</a> – AsTarget <a href=“.abc.html” 18
- 19. Anatomy of HTMLdocument ( Contd.,) ■ BODY can have – Text – List – Links – Tables – Images / Objects 19
- 20. Anatomy of HTMLdocument ( Contd.,) ■ BODY can have – Text – List – Links – Tables (rowspan , colspan) – Images / Objects 20
- 21. Anatomy of HTMLdocument ( Contd.,) ■ BODY can have – Text – List – Links – Tables – Images / Objects 21
- 22. BODY – Images& Objects ( Contd.,) ■ Images – Reference to image file ■ Objects – Plugins (Flash/Silverlight etc) – Videos / Audio ■ <video width="" height="" controls> <source src=“abc.mp4" type="video/mp4"> Your browser does not support the video tag.</video> 22
- 23. Agenda ■ HTML History ■An HTML Document ■ HTML and Browser 23
- 24.
- 25.
- 26.
- 27. The good, thebad and the… ugly! 27 output <font size=“1" color="red">Red</font> <font size=“2" face="verdana" color="green">Green</font> <font size=“3" color="blue">Blue</font>
- 28. Cascading Style Sheets(CSS) ■ Describes the appearance, layout, and presentation of information on a web page – HTML describes the content of the page ■ Describes how information is to be displayed, not what is being displayed ■ Can be embedded in HTML document or placed into separate .css file 28
- 29. How CSSWorks —Matching ■ Every HTML document represents a document tree ■ The browser uses the tree to determine which rules apply ■ What about inheritance? And conflicts? 29
- 30. Basic CSS Stylesyntax ■ A CSS file consists of one or more rules ■ Each rule starts with a selector ■ A selector specifies an HTML element(s) and then applies style properties to them 30 selector { property: value; property: value; ... property: value; } CSS Selector Property Value p { font-family: times; } Note the punctuation:The property is followed by a colon (:) and the value is followed by a semicolon(;) CSS
- 31. Attaching a CSSfile ■ Inline CSS ■ Embedded CSS ■ External CSS 31
- 32. Attaching a CSSfile – Inline CSS(Contd.,) ■ Higher precedence than embedded or linked styles ■ Used for one-time overrides and styling a particular element ■ Bad style and should be avoided when possible (why?) 32 <p style="font-family: sans-serif; color: red;"> This is a paragraph</p> HTML This is a paragraph output
- 33. Attaching a CSSfile – Embedded CSS(Contd.,) ■ CSS code can be embedded within the head of an HTML page ■ Bad style and should be avoided when possible (why?) 33 <head> <style type="text/css"> p { font-family: sans-serif; color: red; } h2 { background-color: yellow; } </style> </head> HTML
- 34. Attaching a CSSfile – External CSS(Contd.,) ■ A page can link to multiple style sheet files – In case of a conflict (two sheets define a style for the same HTML element), the latter sheet's properties will be used 34 <head> ... <link href="filename" type="text/css" rel="stylesheet" /> ... </head> HTML <link href="style.css" type="text/css" rel="stylesheet" /> <link rel="stylesheet" type="text/css“ href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/c ss/bootstrap.min.css"/> HTML
- 35.
- 36. CSS Selectors ■ Singleelement type: – p {background-color: green } ■ Multiple element types: – h1, h2 , h3 {background-color: green} ■ All element types: – * {font-weight: bold} ■ Specific elements by id: – #a {color : red} ■ Elements belonging to a style class: – .abc {color : red} 36
- 37. CSS Selector (Contd ., ) ■ Elements of a certain type and class: < span class=“abc”> </span> ■ span.abc {font-size : x-large} ■ Source anchor elements: 37
- 38. CSS properties forcolors 38 p { color: green; background-color: yellow; } CSS This paragraph uses the style above output property description color color of the element's text background-color color that will appear behind the element
- 39. Specifying colors ■ colornames: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white (white), yellow ■ RGB codes: red, green, and blue values from 0 (none) to 255 (full) ■ hex codes: RGB values in base-16 from 00 (0, none) to FF (255, full) 39 p { color: green; } h2 { color: rgb(128, 0, 196); } h4 { color: #FF0000; } CSS This paragraph uses the first style above This h2 uses the second style above. This h4 uses the third style above. output
- 40. Grouping styles ■ Astyle can select multiple elements separated by commas ■ The individual elements can also have their own styles 40 p, h1, h2 { color: red; } h2 { background-color: yellow; } CSS This paragraph uses the above style. output This h2 uses the above styles.
- 41. CSS comments /*…*/ ■CSS (like HTML) is usually not commented as rigorously as programming languages such as Java ■ The // single-line comment style is NOT supported in CSS ■ The <!-- ... --> HTML comment style is also NOT supported in CSS 41 /* This is a comment. It can span many lines in the CSS file. */ p { color: red; background-color: aqua; } CSS
- 42. CSS properties forfonts property description font-family which font will be used font-size how large the letters will be drawn font-style used to enable/disable italic style font-weight used to enable/disable bold style 42 Complete list of font properties
- 43. font-family ■ Enclose multi-wordfont names in quotes 43 p { font-family: Georgia; } h2 { font-family: "Courier New"; } CSS This paragraph uses the first style above. This h2 uses the second style above. output
- 44. More about font-family ■We can specify multiple fonts from highest to lowest priority ■ Generic font names: – serif, sans-serif, cursive, Roboto ■ If the first font is not found on the user's computer, the next is tried ■ Placing a generic font name at the end of your font-family value, ensures that every computer will use a valid font 44 p { font-family: Garamond, "Times New Roman", serif; } CSS This paragraph uses the above style. output
- 45. font-size ■ units: pixels(px) vs. point (pt) vs. m-size (em) 16px, 16pt, 1.16em ■ vague font sizes: xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger ■ percentage font sizes, e.g.: 90%, 120% 45 p { font-size: 24pt; } CSS This paragraph uses the style above. output
- 46. font-size ■ pt specifiesnumber of point, where a point is 1/72 of an inch onscreen ■ px specifies a number of pixels on the screen ■ em specifies number of m-widths, where 1 em is equal to the font's current size 46 p { font-size: 24pt; } CSS This paragraph uses the style above. output
- 47. font-weight, font-style ■ Eitherof the above can be set to normal to turn them off (e.g. headings) 47 p { font-weight: bold; font-style: italic; } CSS This paragraph uses the style above. output
- 48. CSS properties fortext property description text-align alignment of text within its element text-decoration decorations such as underlining line-height, word-spacing, letter-spacing gaps between the various portions of the text text-indent indents the first letter of each paragraph 48
- 49. text-align ■ text-align canbe left, right, center, or justify 49 h2 { text-align: center; } CSS Title Upper Roller lower Roller output
- 50. text-decoration ■ can alsobe overline, line-through, blink, or none ■ effects can be combined: text-decoration: overline underline; 50 p { text-decoration: underline; } CSS This paragraph uses the style above. output
- 51. The list-style-type property ■Possible values: i. none : No marker ii. disc (default), circle, square iii. Decimal: 1, 2, 3, etc. iv. decimal-leading-zero: 01, 02, 03, etc. v. lower-roman: i, ii, iii, iv, v, etc. vi. upper-roman: I, II, III, IV, V, etc. vii. lower-alpha: a, b, c, d, e, etc. viii. upper-alpha: A, B, C, D, E, etc. x. lower-greek: alpha, beta, gamma, etc. others: hebrew,armenian,georgian, cjk-ideographic, hiragana… 51 ol { list-style-type: lower-roman; } CSS
- 52. Body styles ■ Appliesa style to the entire body of your page ■ Saves you from manually applying a style to each element 52 body { font-size: 16px; } CSS
- 53. Cascading Style Sheets ■Properties of an element cascade together in this order: – browser's default styles – external style sheet files (in a <link> tag) – internal style sheets (inside a <style> tag in the page's header) – inline style (the style attribute of the HTML element) 53
- 54. Inheriting styles ■ whenmultiple styles apply to an element, they are inherited ■ a more tightly matching rule can override a more general inherited rule 54 body { font-family: sans-serif; background-color: yellow; } p { color: red; background-color: aqua; } a { text-decoration: underline; } h2 { font-weight: bold; text-align: center; } CSS This is a heading • A bulleted list output A styled paragraph. Previous slides are available on the website.
- 55. Styles that conflict ■when two styles set conflicting values for the same property, the latter style takes precedence 55 p, h1, h2 { color: blue; font-style: italic; } h2 { color: red; background-color: yellow; } CSS This paragraph uses the first style above. output This heading uses both styles above.
- 56. CSS properties forbackgrounds property description background-color color to fill background background-image image to place in background background-position placement of bg image within element background-repeat whether/how bg image should be repeated background-attachment whether bg image scrolls with page background shorthand to set all background properties 56
- 57. background-image ■ background image/colorfills the element's content area 57 body { background-image: url("images/draft.jpg"); } CSS
- 58. background-position ■ value consistsof two tokens, each of which can be top, left, right, bottom, center, a percentage, or a length value in px, pt, etc. ■ value can be negative to shift left/up by a given amount 58 body { background-image: url("images/draft.jpg"); background-repeat: no-repeat; background-position: 370px 20px; } CSS
- 59. Responsive ■ @media onlyscreen and (max-width: 600px) { body { background-color: white; } } 59
- 60. W3C CSSValidator ■ jigsaw.w3.org/css-validator/ ■checks yourCSS to make sure it meets the official CSS specifications 60
- 61.
Editor's Notes
- #5 Images / Content – taken from pluralsight / wiki
- #19 https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_a_href_anchor
- #21 https://www.w3schools.com/TAGS/tryit.asp?filename=tryhtml_td_rowspan
- #23 https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video https://html.com/tags/video/
- #27 Pic src: PS
- #30 Lecture: CSS Essentials
- #32 a conflict (two sheets define a style for the same HTML element
- #35 a conflict (two sheets define a style for the same HTML element
- #50 justify (which widens all full lines of the element so that they occupy its entire width)
- #55 not all properties are inherited (notice link's color above)
- #56 (later we will learn about more specific styles that can override more general styles)
- #60 @media only screen or (max-width: 600px) , (max-height: 300px) { body { background-color: lightblue; } }
- #61 more picky than the web browser, which may render malformed CSS correctly