46
Creating Web Pages with HTML and CSS ISY 475

Creating Web Pages with HTML and CSS ISY 475. HTML Introduction History: – Standard

Embed Size (px)

Citation preview

Page 1: Creating Web Pages with HTML and CSS ISY 475. HTML Introduction History: –   Standard

Creating Web Pages with HTML and CSS

ISY 475

Page 2: Creating Web Pages with HTML and CSS ISY 475. HTML Introduction History: –   Standard

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

Page 3: Creating Web Pages with HTML and CSS ISY 475. HTML Introduction History: –   Standard

Online Resources for Learning HTML

• w3schools.com – http://www.w3schools.com/default.asp

Page 4: Creating Web Pages with HTML and CSS ISY 475. HTML Introduction History: –   Standard

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>

Page 5: Creating Web Pages with HTML and CSS ISY 475. HTML Introduction History: –   Standard

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">

Page 6: Creating Web Pages with HTML and CSS ISY 475. HTML Introduction History: –   Standard

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>

Page 7: Creating Web Pages with HTML and CSS ISY 475. HTML Introduction History: –   Standard

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

Page 8: Creating Web Pages with HTML and CSS ISY 475. HTML Introduction History: –   Standard

When to use the HTTP GET method When the request is for a page that gets data from a database

server.

When the request can be executed multiple times without causing any problems.

Page 9: Creating Web Pages with HTML and CSS ISY 475. HTML Introduction History: –   Standard

When to use the HTTP POST method When the request is for a page that writes data to a database server.

When executing the request multiple times may cause problems.

When you don’t want to include the parameters in the URL for security reasons.

When you don’t want users to be able to include parameters when they bookmark a page.

When you need to transfer more than 4 KB of data.

Page 10: Creating Web Pages with HTML and CSS ISY 475. HTML Introduction History: –   Standard

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

Page 11: Creating Web Pages with HTML and CSS ISY 475. HTML Introduction History: –   Standard

Adding HTML ControlsTools/Palette/HTML, JSPCode Clips

Page 12: Creating Web Pages with HTML and CSS ISY 475. HTML Introduction History: –   Standard

Creating HTML Form: Double-click Form element

Page 13: Creating Web Pages with HTML and CSS ISY 475. HTML Introduction History: –   Standard

Create a Form Using NetBean

Page 14: Creating Web Pages with HTML and CSS ISY 475. HTML Introduction History: –   Standard

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

Page 15: Creating Web Pages with HTML and CSS ISY 475. HTML Introduction History: –   Standard

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>

Page 16: Creating Web Pages with HTML and CSS ISY 475. HTML Introduction History: –   Standard

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>

Page 17: Creating Web Pages with HTML and CSS ISY 475. HTML Introduction History: –   Standard

<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).

Page 18: Creating Web Pages with HTML and CSS ISY 475. HTML Introduction History: –   Standard

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/

Page 19: Creating Web Pages with HTML and CSS ISY 475. HTML Introduction History: –   Standard

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">

Page 20: Creating Web Pages with HTML and CSS ISY 475. HTML Introduction History: –   Standard

'required' attribute

• Example:Your Name: <input type="text" name="name"

required>

Page 21: Creating Web Pages with HTML and CSS ISY 475. HTML Introduction History: –   Standard

‘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">

Page 22: Creating Web Pages with HTML and CSS ISY 475. HTML Introduction History: –   Standard

‘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?://.+">

Page 23: Creating Web Pages with HTML and CSS ISY 475. HTML Introduction History: –   Standard

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.

Page 24: Creating Web Pages with HTML and CSS ISY 475. HTML Introduction History: –   Standard

CSS Rule Syntax

• A CSS rule has two main parts: a selector, and one or more declarations:

Page 25: Creating Web Pages with HTML and CSS ISY 475. HTML Introduction History: –   Standard

A CSS declaration always ends with a semicolon, and

declaration groups are surrounded by curly brackets.Example:

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

Page 26: Creating Web Pages with HTML and CSS ISY 475. HTML Introduction History: –   Standard

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" />

Page 27: Creating Web Pages with HTML and CSS ISY 475. HTML Introduction History: –   Standard

Three Ways to Insert CSS

• External style sheet• Internal style sheet• Inline style

Page 28: Creating Web Pages with HTML and CSS ISY 475. HTML Introduction History: –   Standard

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>

Page 29: Creating Web Pages with HTML and CSS ISY 475. HTML Introduction History: –   Standard

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

Page 30: Creating Web Pages with HTML and CSS ISY 475. HTML Introduction History: –   Standard

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>

Page 31: Creating Web Pages with HTML and CSS ISY 475. HTML Introduction History: –   Standard

HTML Element as Selector

• Apply to all elements of a specific type:– H1 { color: blue; }– p {color:red;text-align:center;}

Page 32: Creating Web Pages with HTML and CSS ISY 475. HTML Introduction History: –   Standard

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;}

Page 33: Creating Web Pages with HTML and CSS ISY 475. HTML Introduction History: –   Standard

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;}

Page 34: Creating Web Pages with HTML and CSS ISY 475. HTML Introduction History: –   Standard

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 "."

Page 35: Creating Web Pages with HTML and CSS ISY 475. HTML Introduction History: –   Standard

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;}

Page 36: Creating Web Pages with HTML and CSS ISY 475. HTML Introduction History: –   Standard

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;}

Page 37: Creating Web Pages with HTML and CSS ISY 475. HTML Introduction History: –   Standard

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

Page 38: Creating Web Pages with HTML and CSS ISY 475. HTML Introduction History: –   Standard

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.

Page 39: Creating Web Pages with HTML and CSS ISY 475. HTML Introduction History: –   Standard

box model

Page 40: Creating Web Pages with HTML and CSS ISY 475. HTML Introduction History: –   Standard

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

Page 41: Creating Web Pages with HTML and CSS ISY 475. HTML Introduction History: –   Standard

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

Page 42: Creating Web Pages with HTML and CSS ISY 475. HTML Introduction History: –   Standard

Example: Define a box for a P tag:

p{color:red;text-align:center;width:250px; padding:10px; border:5px solid gray; margin:10px; }

Page 43: Creating Web Pages with HTML and CSS ISY 475. HTML Introduction History: –   Standard

Example: Page View

Page 44: Creating Web Pages with HTML and CSS ISY 475. HTML Introduction History: –   Standard

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>

Page 45: Creating Web Pages with HTML and CSS ISY 475. HTML Introduction History: –   Standard

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;}

Page 46: Creating Web Pages with HTML and CSS ISY 475. HTML Introduction History: –   Standard

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%