HTML and CSS part 2

Introduction to Web
Technologies
Lecture 2
Julie Iskander,
MSc. Communication and Electronics

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
 DropDown Lists/Menus:
 To logically group options use optgroup
 <optgroup label=“…..”></optgroup>

 label attribute is the value that appears in the list.

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.

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>
  
<p id="pid">Next is more data to
continue desribing the text</p>
</body>

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;

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

HTML and CSS part 2

More Related Content

What's hot

Similar to HTML and CSS part 2

More from Julie Iskander

Recently uploaded

HTML and CSS part 2

Editor's Notes