Creating Web Pages with HTML and CSS ISY 475

HTML Introduction History: – Standard – The World Wide Web Consortium (W3C) HTML 5: – Multimedia controls Video, audio, canvas

Online Resources for Learning HTML w3schools.com –

HTML Tags (Elements) Heading section –,,,, etc. Body section –,, to,, –, – Formatting:,,, – Comment: – List – Image – Table:, : a new row in table, : a new cell in a table row. – Form:,,

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: –

TABLE Tag Year Value at BeginYr Dep During Yr Total to EndOfYr

FORM Tag Form attributes: – action: Specify the URL of a program on a server or an 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 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: –

Adding HTML Controls Tools/Palette/HTML, JSPCode Clips

Creating HTML Form: Double-click Form element

Create a Form Using NetBean

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 to start a new line

Dropdown List Example 4% 4.5% 5% 5.5% 6%

RadioButton Example: RadioButtons having the same name belong to one group 10 year 15 year 30 year

Enter PV: Select Rate: 4% 4.5% 5% 5.5% 6% 6.5% 7% Select Year: 10 year 15 year 30 year Future Value: Note: We can assign an id to a HTML tag (element).

HTML 5 form-validation/#.UdytIOLn_zc form-validation/#.UdytIOLn_zc with-html5-forms/

New INPUT types INPUT type="number" INPUT type="range” Other types: – , url, tel, etc Age: Satisfaction:

'required' attribute Example: Your Name:

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

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

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 A CSS rule has two main parts: a selector, and one or more declarations:

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 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 element inside the head section

Three Ways to Insert CSS External style sheet Internal style sheet Inline style

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 tag. The tag goes inside the head section:

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 tag, like this: hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} 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 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: This is a paragraph.

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

Example This is h1 text This is h3 text This is h6 text This is h1 text again This is h3 text again This is h6 text again This is the P tag data H1 { color: blue; } H3 {color:green;} H6 {color:red;} p {color:red;text-align:center;}

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 : – The style rule is: #mycontent { width: 450px; margin: 0 auto; padding: 15px; background: white; border: 2px solid navy; }

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 Example 1: All HTML elements with class="center" will be center-aligned: – HTML: Center-aligned heading – 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: – Style: ul.nav { list-style-type: none; margin-left: 0; padding-left: 0; }

Example This is h1 text This is h3 text This is h6 text This is h1 text again This is h3 text again This is h6 text again This is the P tag data This is the 2nd P tag data.center{ text-align:center; } p.left{text-align:left;}

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

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.

box model

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

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: p{color:red;text-align:center; width:250px; padding:10px; border:5px solid gray; margin:10px; }

Example: Page View

HTML Code Product Discount Calculator Product Description: List Price: Discount Percent: %

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

CSS Font-Size: em vs. px vs. pt vs. percent 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%