• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML and CSS part 2
 

HTML and CSS part 2

on

  • 880 views

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

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

Statistics

Views

Total Views
880
Views on SlideShare
880
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 HTML and CSS part 2 Presentation Transcript

  • Introduction to Web Technologies Lecture 2 Julie Iskander, MSc. Communication and Electronics
  • HTML Forms
  • 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
  • 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.
  • 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” />
  • 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”/>
  • 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” />
  • 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”/>
  • 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
  • Control Types
  • Control Types  DropDown Lists/Menus:  To logically group options use optgroup  <optgroup label=“…..”></optgroup>  label attribute is the value that appears in the list.
  • Control Types
  • Control Types  File select:  Allow users to select files to be submitted to a form.  <input type=“file” />
  • 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=“….” />
  • 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.
  • 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”/>
  • Structuring form  Use <fieldset> and <legend> to group related controls and labels.  Makes forms more accessible especially when rendered visually.
  • Example
  • Example
  • Cascade Style Sheets (CSS)
  • 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.
  • CSS Rules Syntax Selector { property1: value1; property2: value2; property3: value3; } Example body { } p { } background-color:blue; color:white; font-size:24pt; color:yellow;
  • 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>
  • 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 ; }
  • CSS Selectors  Types of Selectors:  Simple Selectors  type, class, ID, attribute, pseudo-class  Group Selectors  coma-separated list of selectors
  • Type Selector  Select by name of element (h1, p, div, span, …..etc.  Example: p { font-size:20pt; }
  • 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 ; }
  • 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; }
  • 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; }
  • 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()
  • 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; }
  • 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; }
  • 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*/
  • 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>
  • Example
  • 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
  • Units in css  pixel (px) absolute value  em: ratio of context size  percentage: percentage of context size
  • 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;
  • 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;
  • 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
  • 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>
  • 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