HTML and CSS part 2

1,071 views

Published on

This lecture continues with html forms, then an introduction to css, text and formatting, backgrounds in css

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

No Downloads
Views
Total views
1,071
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • Get for idempotent forms that has no side effects, ex. Search forms, name=value pair appended to url after ‘?’Post for forms that will cause side effect like database modifications. name=value pairs are send in request body.
  • Mutually exclusive  only one is “on” at ant time.
  • Example of multi-select menu
  • Example select with options groups
  • There are more in each category, refer to w3.org for full lists
  • There are more in each category, refer to w3.org for full lists
  • In html 5text-shadow: if right is –ve, then acts as left, if bottomis –ve, then acts as top
  • Default font-size is 16pxRecommended use by w3.org body{ font-size:100%;} All other elements {font-size: ….em}
  • Background-size in CSS3 can be 100px 100px (length of width then height) 20% 30% (percentage of width then height)
  • Block boxes laid vertically, starting at the top, Inline boxes laid horizontally, starting at the top, vertical margins are ignored, width and height can’t be specified.
  • HTML and CSS part 2

    1. 1. Introduction to Web Technologies Lecture 2 Julie Iskander, MSc. Communication and Electronics
    2. 2. HTML Forms
    3. 3. Forms  Used to send data back to the server to be processed.  <form></form>  Contains:  control elements that get data from the user  label elements  Attributes:  action  url of page where data is sent  method  GET/POST http request method
    4. 4. Controls  Controls must have name and value attributes to be submitted.  Controls can be disabled using disabled attribute.  Each control has an initial value and a current value.  Initial values are set by value attribute.  Current value when first rendered is set to initial value.
    5. 5. Control Types  Buttons:  To submit form:  <input type=“submit” />, <button type=“submit”></button>  To reset form:  <input type=“reset” />, <button type=“reset”></button>  Just a button with no default behavior  <input type=“button” />  <button type=“button”></button>  Offers richer rendering capabilities then <input type=“text” />
    6. 6. Control Types  Checkboxes:     On/off switches. Must have name to be submitted . if no value is set, off is the value Checked attribute is set to make initial value “on”  <input type=“checkbox”/>
    7. 7. Control Types  TextBox:  Single line text input  <input type=“text”/>  Password:  Similar to TextBox, but input text is rendered as a series of asterisks or similar characters  But submitted as plain clear text  <input type=“password” />
    8. 8. Control Types  Radiobuttons:  On/off switches but are mutually exclusive.  More than one share the same name to create a mutually exclusive group.  Checked attribute is set to make initial value “on” only one of the group at a time.  <input type=“radio”/>
    9. 9. Control Types  DropDown Lists/Menus:  To choose one/more from multiple options.  Uses  <select name=“……”></select>  To select multiple options use multiple attribute  <select name=“……” multiple></select>  To define items use  <option></option>  Option can have name, value and selected attributes
    10. 10. Control Types
    11. 11. Control Types  DropDown Lists/Menus:  To logically group options use optgroup  <optgroup label=“…..”></optgroup>  label attribute is the value that appears in the list.
    12. 12. Control Types
    13. 13. Control Types  File select:  Allow users to select files to be submitted to a form.  <input type=“file” />
    14. 14. Control Types  Hidden controls:  Not rendered visually.  Values are submitted with the other form data, can help overcome stateless nature of HTTP.  <input type=“hidden” name=“….” value=“….” />
    15. 15. Control Types  Textarea controls:  Multiline text input.  Value is the content nested in the control.  <textarea>Content </textarea>  Has rows and cols attributes to set size of textarea.
    16. 16. label  Specify a label for controls that don‟t have an implicit label.  for attribute MUST match ID value of the control attached to it.  Useful for speech synthesizers readers,  <label for=“fname”>First Name :</label>  <input type=“text” id=“fname”/>
    17. 17. Structuring form  Use <fieldset> and <legend> to group related controls and labels.  Makes forms more accessible especially when rendered visually.
    18. 18. Example
    19. 19. Example
    20. 20. Cascade Style Sheets (CSS)
    21. 21. Cascade Style Sheets (CSS)  “A language for describing the rendering of structured document as HTML and XHTML” from w3.org  Provides formatting and layout of html documents.  Controls presentation, assign styling information to elements.  Not a markup language  “cascade”  means multiple stylesheets can be blended together to affect a page. If conflict occurs the last applied or the most specific rule is applied.
    22. 22. CSS Rules Syntax Selector { property1: value1; property2: value2; property3: value3; } Example body { } p { } background-color:blue; color:white; font-size:24pt; color:yellow;
    23. 23. Where to add CSS?  Inline style attribute  Applied to a single element <p style=“color : pink ; font-size : 30pt ;”  In <head>  Applied to an entire single page <head> <style> body{ font-family : arial ; background-color : black ; color : white ; } p { color : pink ; } </style> </head>
    24. 24. Where to add CSS? • In external sheet (.css) • Applied to any html file linked to it page.html style.css <head> …………………….. <link rel=“stylesheet” type=“text/css” href=“style.css” /> </head> url to css file (no markup only css rules) body{ font-family : arial ; background-color : black color : white ; } p { color : pink ; }
    25. 25. CSS Selectors  Types of Selectors:  Simple Selectors  type, class, ID, attribute, pseudo-class  Group Selectors  coma-separated list of selectors
    26. 26. Type Selector  Select by name of element (h1, p, div, span, …..etc.  Example: p { font-size:20pt; }
    27. 27. Attribute Selector  Select an element by the attributes defined in it.  Example: [href] /*select any element with attribute named href*/ { font-size : 20pt ; } h1[title] /*select any h1 element with title attribute defined */ { color : red ; } a[href=“http://www.google.com”] /*select any a element with href exactly equal http://www.google.com */ { color : blue ; }
    28. 28. Class Selector  Select an element by the class attributes defined in it.  Class is an attribute of most html elements, specifies one or more class names (space-separated list)  Example: .maincontent /*select any element with class=“maincontent” */ { font-size : 20pt; } H1.headerTitle /*select the all h1 with class=“headerTitle” */ { color : red; }
    29. 29. ID Selector  Select an element by the ID attributes defined in it.  ID is an attribute of all html elements, it must be unique throughout a certain html page  Example: #maincontent /*select the element with id=“maincontent” */ { font-size : 20pt; } h1#headerTitle /*select the only h1 with id=“headerTitle” */ { color : red; }
    30. 30. PseudoClass Selector  Selection based on special effects, Identified by „:‟  Link:  :link, :visited, :target  User actions:  :hover, :active, :focus  UI elements states:  :enabled, :disabled, :checked  Structural :  :first-child, :last-child, :nth-child(), :empty, :not()
    31. 31. PseudoClass Selector (Cont‟d)  Example: a:hover /*applied when mouse hover over any link */ { font-size:20pt; } a.red:hover /*applied when mouse hover over link with class=“red” */ { font-size:20pt; } Input[type=“text”]:disabled /*applied to any textbox which is disabled */ { color:red; }
    32. 32. PseudoElement Selector  Selection based on parts of elements, Identified by „::‟     ::first-letter ::before ::after ::first-line  Examples: p::after { content:”this content is added after the p” color:red; }
    33. 33. Combinators  Combine selectors specified by relation between elements     Descendant Direct Childof (>) Adjacent Sibling (+) General Sibling(~)  Examples: h1 em {……..} /*em descendant of h1*/ div ol > li p{…….} /*p descendant of li which is a direct child of ol which is a descandent of div*/ span+p{……..} /*p that is a direct adjacent sibling to a span*/ a~p{………} /*p that is sibling of a it may be adjacent or not*/
    34. 34. Example body{ background-color : black; color : green ; } [href] { color:pink; } a[name="next”]{ text-decoration: underline; } p.boldp{ font-weight: bold; } p#pid::first-letter{ font-size: 30px; } p::before { content: "Red text before p”; color:red; } p::after{ content: "Yellow text after p”; color:yellow; } <body> Trying Style Sheets <p>This is a paragraph tag <span>a span nested</span> in it</p> <p class="boldp">A new paragraph with more text to be shown describing</p> <a href="#next">NEXT</a> <br><br><br> <a name="next">Here is NEXT</a> &nbsp;&nbsp; <p id="pid">Next is more data to continue desribing the text</p> </body>
    35. 35. Example
    36. 36. Colors  Colors can be set using:     Keywords #-hexadecimal rgb() and rgba() hsl() and hsla()  To get full list of color keywords: https://developer.mozilla.org/enUS/docs/CSS/color_value
    37. 37. Units in css  pixel (px) absolute value  em: ratio of context size  percentage: percentage of context size
    38. 38. CSS Text Formatting color : name|#hex|rgb()|rgba()|hsl()|hsla(); /*foreground color*/ letter-spacing : normal|length (px,%,em); line-height: normal|number|length|percentage; text-align: left|right|center|justify; text-decoration: none|underline|overline|line-through|blink; text-indent: length|percentage; text-transform: capitalize|uppercase|lowercase|none; *text-shadow: rightpx bottompx blurpx color; direction: ltr | rtl; *word-wrap: normal|break-word;
    39. 39. CSS Font font-family: list of font-names to chose from in order if not supported by browser font-size: smaller|larger|xx-small|x-small|small|medium| larger|x-large|xx-large|length|percentage; font-weight: normal|bold|bolder|lighter|100-900| font-style: normal|italic|oblique font-variant: normal|small-caps font: font-family font-size font-weight font-style font-variant;
    40. 40. Background formatting  background-attachment : scroll | fixed;  background-color : color;  background-image : none | url(path);  background-position: percent|length|(top left right bottom center) /*w.r.t to top left*/  background-repeat: repeat | repeat-x|repeat-y|no-repeat  *background-size: length|percentage|cover|contain;  background: background-attachment background-color background-image background-position background-repeat
    41. 41. Block vs. Inline Elements Inline  No newlines before or after it  Page flow is not broken  Has no width and height  Takes as much width of the page as the content  Can contain only inline elements  Examples:<span>, <a>, <img>, <b>, <em>,<input> Block  Newlines appears before and after it.  Can have a width and height  Takes the whole page width  Can contain inline or block elements  Examples:<p>, <div>
    42. 42. References  http://www.w3.org/TR/html401/  http://www.w3.org/TR/CSS21/  http://www.w3.org/TR/CSS2/  https://developer.mozilla.org/en-US/docs/CSS  http://www.daaq.net/old/css/index.php?page=us ing+css  http://alistapart.com/articles/howtosizetextincss

    ×