creating web pages with html and css n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Creating Web Pages with HTML and CSS PowerPoint Presentation
Download Presentation
Creating Web Pages with HTML and CSS

Loading in 2 Seconds...

play fullscreen
1 / 46

Creating Web Pages with HTML and CSS - PowerPoint PPT Presentation


  • 140 Views
  • Uploaded on

Creating Web Pages with HTML and CSS. ISY 475. HTML Introduction. History: http://en.wikipedia.org/wiki/HTML Standard The World Wide Web Consortium (W3C) HTML 5: <!DOCTYPE html> Multimedia controls Video, audio, canvas. Online Resources for Learning HTML. w3schools.com

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

Creating Web Pages with HTML and CSS


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
html introduction
HTML Introduction
  • History:
    • http://en.wikipedia.org/wiki/HTML
  • Standard
    • The World Wide Web Consortium (W3C)
  • HTML 5: <!DOCTYPE html>
    • Multimedia controls
      • Video, audio, canvas
online resources for learning html
Online Resources for Learning HTML
  • w3schools.com
    • http://www.w3schools.com/default.asp
html tags elements
HTML Tags (Elements)
  • Heading section
    • <head>, <title>, <meta>, <script>, etc.
  • Body section
    • <body>, <p>, <h1> to <h6>, <a>, <br>
    • <div>, <span>
    • Formatting: <b>, <I>, <u>, <center>
    • Comment: <!-- comment -->
    • List <ul>
    • Image
    • Table: <table>, <tr>: a new row in table, <td>: a new cell in a table row.
    • Form: <form>, <input>, <select>
html attributes
HTML Attributes
  • HTML elements can have attributes that provide additional information about an element.
  • Attributes are always specified in the start tag
  • Attributes come in name/value pairs like: name="value“
  • Name and value are case-sensitive and lowercase is recommended.
  • Examples:
    • <div id="content">
    • <h1 class="center">
table tag
TABLE Tag

<table id=“depTable“ border="1" width=“400">

<thead>

<tr>

<th>Year</th>

<th>Value at BeginYr</th>

<th>Dep During Yr</th>

<th>Total to EndOfYr</th>

</tr>

</thead>

<tbody>

<tr>

<td>1</td>

<td>2000</td>

<td>400</td>

<td>400</td>

</tr>

</tbody>

</table>

form tag
FORM Tag
  • Form attributes:
    • action: Specify the URL of a program on a server or an email address to which a form’s data will be submitted.
    • method:
      • Get: the form’s data is appended to the URL specified by the Action attribute as a QueryString.
      • Post: A preferred method for database processing. Form’s data is sent in the HTTP body.
    • mame: Form’s name
querystring
QueryString
  • A QueryString is a set of name=value pairs appended to a target URL.
  • It can be used to pass information from one webpage to another.
  • Example:
    • http://my.com/Target.htm?CustID=C1&Cname=Chao
step by step
Step by Step
  • 1. Add a form tag:
    • Name property
    • Action: server-side program; leave it blank for client-side
  • 2. Add lables by typing
  • 3. Add text input
  • 4. Add dropdown list:
    • Number of options
  • 5. Add radiobutton
    • All buttons belong to a group
  • 6. Add button
    • Lable
    • Type:
      • Submit – submit to a server
      • Standard – client-side
  • 7. Add <br> to start a new line
dropdown list example
Dropdown List Example

<select name="Rate">

<option value=.04>4%</option>

<option value=045>4.5%</option>

<option value=.05 >5%</option>

<option value=.055>5.5%</option>

<option value=.06>6%</option>

</select>

radiobutton example radiobuttons having the same name belong to one group
RadioButton Example:RadioButtons having the same name belong to one group

<input type="radio" name="Year" value=10 />10 year<<br>

<input type="radio" name="Year" value=15 />15 year<br>

<input type="radio" name="Year" value=30 />30 year<br>

slide17

<form name="fvForm" action=“computeFV.php">

Enter PV: <input id='PV' type="text" name="PV" value="" /><br>

Select Rate: <select name="Rate">

<option value=0.04>4%</option>

<option value=0.045>4.5%</option>

<option value=0.05>5%</option>

<option value=0.055>5.5%</option>

<option value=0.06>6%</option>

<option value=0.065>6.5%</option>

<option value=0.07>7%</option>

</select><br>

Select Year: <br>

<input type="radio" name="Year" value=10 />10 year<br>

<input type="radio" name="Year" value=15 />15 year<br>

<input type="radio" name="Year" value=30 />30 year<br>

<br>

Future Value: <input type="text" name="FV" />

<br>

<input type=“submit" value="ComputeFV" name="btnCompute" />

</form>

Note: We can assign an id to a HTML tag (element).

html 5
HTML 5
  • http://www.the-art-of-web.com/html/html5-form-validation/#.UdytIOLn_zc
  • http://diveintohtml5.info/forms.html
  • http://24ways.org/2009/have-a-field-day-with-html5-forms/
new input types
New INPUT types
  • INPUT type="number"
  • INPUT type="range”
  • Other types:
    • email, url, tel, etc

Age: <input type="number" size="6" name="age" min="18" max="99" value="21"><br>

Satisfaction: <input type="range" size="2" name="satisfaction" min="1" max="5" value="3">

required attribute
'required' attribute
  • Example:

Your Name: <input type="text" name="name" required>

placeholder attribute
‘placeholder’ Attribute
  • Placeholder attribute which lets us display a prompt or instructions inside the field.
  • Example:

Email Address: <input type="email" name="email" required placeholder="Enter a valid email address">

pattern attribute
‘pattern attribute’
  • The pattern attribute uses a regular expression to validate the format of input data.
  • To accept text starting with http:// or https:// and at least one additional character:
    • pattern="https?://.+“
  • Example:

Website: <input type="url" name="website" required pattern="https?://.+">

cascading style sheets
Cascading Style Sheets
  • Cascading Style Sheets (CSS) is a mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.
  • A style sheet consists of a list of style rules. Each rule or rule-set consists of one or more selectors, and a declaration block.
css rule syntax
CSS Rule Syntax
  • A CSS rule has two main parts: a selector, and one or more declarations:
slide25
A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly brackets.Example:

p

{

color:red;

text-align:center;

}

css mime type
CSS MIME Type
  • Multipurpose Internet Mail Extensions (MIME) is an Internet standard of content type system.
  • CSS MIME type:
    • text/css
  • Example: referencing a CSS file using the <link> element inside the head section

<link rel="stylesheet" type="text/css" href="main.css" />

three ways to insert css
Three Ways to Insert CSS
  • External style sheet
  • Internal style sheet
  • Inline style
external style sheet
External Style Sheet
  • An external style sheet can be written in any text editor. It should be saved with a .css extension.
  • An external style sheet is ideal when the style is applied to many pages.
  • Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section:

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

</head>

internal style sheet
Internal Style Sheet
  • An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section of an HTML page, by using the <style> tag, like this:

<head>

<style>

hr {color:sienna;}

p {margin-left:20px;}

body {background-image:url("images/back40.gif");}

</style>

</head>

Note: Do not add a space between the property value and the unit (such as margin-left:20 px). The correct way is: margin-left:20px

inline styles
Inline Styles
  • An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly!
  • To use inline styles you use the style attribute in the relevant tag.
  • Example:

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

html element as selector
HTML Element as Selector
  • Apply to all elements of a specific type:
    • H1 { color: blue; }
    • p {color:red;text-align:center;}
example
Example

<head>

<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link rel="stylesheet" type="text/css" href="mystyle.css">

</head>

<body>

<div>

<h1> This is h1 text</h1><br>

<h3> This is h3 text</h3><br>

<h6> This is h6 text</h6><br>

<h1> This is h1 text again</h1><br>

<h3> This is h3 text again</h3><br>

<h6> This is h6 text again</h6><br>

<br>

<p> This is the P tag data</p>

</div>

</body>

H1 { color: blue; }

H3 {color:green;}

H6 {color:red;}

p {color:red;text-align:center;}

id as a selector
ID as a selector
  • The id selector is used to specify a style for a single, unique element identified by the id attribute of the HTML element.
  • The selector is with a preceding '#':
  • Example:
    • A HTML element : <div id=“mycontent">
    • The style rule is:

#mycontent { width: 450px;

margin: 0 auto;

padding: 15px;

background: white;

border: 2px solid navy;

}

class as selector
Class As Selector
  • The class selector is used to specify a style for a group of elements. The class selector uses the HTML class attribute to set a particular style for many HTML elements with the same class.
  • The class selector is defined with a "."
examples of class selector
Examples of Class Selector
  • Example 1: All HTML elements with class="center" will be center-aligned:
    • HTML: <h1 class="center">Center-aligned heading</h1>
    • Style: with a preceding “.”

.center{

text-align:center;

}

  • Example 2: In the example below, all p elements with class="center" will be center-aligned:
    • p.center {text-align:center;}
  • Example 3: Only ul elements will use the “nav” class.
    • HTML: <ul class="nav">
    • Style:

ul.nav {

list-style-type: none;

margin-left: 0;

padding-left: 0;

}

example1
Example

<body>

<div id="mycontent">

<h1> This is h1 text</h1><br>

<h3 class="center"> This is h3 text</h3><br>

<h6> This is h6 text</h6><br>

<h1> This is h1 text again</h1><br>

<h3 class="center"> This is h3 text again</h3><br>

<h6> This is h6 text again</h6><br>

<br>

<p> This is the P tag data</p>

<p class="left">This is the 2nd P tag data</p>

</div>

</body>

.center{

text-align:center;

}

p.left{text-align:left;}

slide37

Pseudo Class Selector:pseudo-classes are used to add special effects to some selectors. For example, change color when mouse is over the element, a:hover {color:#FF00FF;}

  • table:hover {color:red;}
  • td:hover {color:blue;}
  • p:hover{color:blue;}
  • See list of pseudo-classess such as link, visited, focus, etc.: http://www.w3schools.com/css/css_pseudo_classes.asp
the css box model
The CSS Box Model
  • All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout.
  • The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.
explanation of the different parts of a box
Explanation of the different parts of a box
  • Margin - Clears an area around the border. The margin does not have a background color, it is completely transparent
  • Border - A border that goes around the padding and content. The border is affected by the background color of the box
  • Padding - Clears an area around the content. The padding is affected by the background color of the box
  • Content - The content of the box, where text and images appear
example2
Example

width:250px;

padding:10px;

border:5px solid gray;

margin:10px;

The total width of the element in the example is 300px:

250px (width)

+ 20px (left + right padding)

+ 10px (left + right border)

+ 20px (left + right margin)

= 300px

example define a box for a p tag
Example: Define a box for a P tag:

p{color:red;text-align:center;

width:250px;

padding:10px;

border:5px solid gray;

margin:10px;

}

html code
HTML Code

<body>

<div id=“mycontent">

<h1>Product Discount Calculator</h1>

<form action="display_discount.php" method="post">

<div id=“mydata">

<label>Product Description:</label>

<input type="text" name="product_description"/><br />

<label>List Price:</label>

<input type="text" name="list_price"/><br />

<label>Discount Percent:</label>

<input type="text" name="discount_percent"/>%<br />

</div>

<div id="buttons">

<label>&nbsp;</label>

<input type="submit" value="Calculate Discount" /><br />

</div>

</form>

</div>

</body>

slide45

body {

font-family: Arial, Helvetica, sans-serif;

margin: 10px;

padding: 0;

}

#mycontent {

width: 450px;

margin: 0 auto;

padding: 15px;

background: white;

border: 2px solid navy;

}

h1 {

color: navy;

}

label {

width: 10em;

padding-right: 1em;

float: left;

}

#mydata input {

float: left;

width: 15em;

margin-bottom: .5em;

}

#buttons input {

float: left;

margin-bottom: .5em;

}

br {

clear: left;

}

slide46
CSS Font-Size: em vs. px vs. pt vs. percenthttp://kyleschaeffer.com/user-experience/css-font-size-em-vs-px-vs-pt-vs/
  • An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc.
  • Generally, 1em = 12pt = 16px = 100%