HTML in Brief ASP.NET

HTML Hypertext Markup Language Markup languages contain instructions and data in the same file … – Unlike procedural languages, i.e. C/C++, Visual Basic, Java – Does not include internal logic (if statements and loops) or data structures HTML documents are text-only files

HTML Tags Formatting codes that instruct the browser how to display page elements Tags are enclosed in angle brackets ( ) … Most tags are two-sided … – First tag tells browser to turn on feature – Second tag instructs browser to turn it off – i.e. begins boldface, turns it off

Sections of a Web Document Web pages usually divided into two main sections … – head: defines the title of the page, information about the page to help search engines find it, style sheets, etc. – body: specifies the content (visual elements) of the Web page

HTML Basic Page Outline heading elements body elements

Encloses the entire HTML file Identifies the file to browser software as one containing HTML code, i.e. – Microsoft Internet Explorer – Netscape Navigator Closing tag is

Encloses the heading elements of an HTML file, i.e. – (the title bar element) – (background sound file) – (links to style sheet files) – (provides links for search engines) Except for elements are not visible to viewer Closing tag is

Defines text displayed in the browser's title bar when the page is displayed Appears inside the … block A required element Title directly reflects page's ranking in most search engines Closing tag is

Encloses body elements of HTML file … – Elements that appear on the Web page May include background attribute, i.e. – Format: – Example: Closing tag is

through Indicates a heading line and its level … – Largest font size is, smallest is – Text displayed in bold font style Used to organize a page into sections Automatic double spacing (carriage return/line feed) also is implemented Closing tags are through

Divides text into paragraphs Automatic double spacing also is implemented within this tag Closing tag is – Not required but important if formatting attributes are added to the paragraph

Forces a new line (break) in the text … – Line feeds typed in the text editor are not recognized by the browser There is no closing tag for

The HTML font Tag The tag is used to change typeface, size, and color of text Format: <font face = "Font name 1[, Font name 2, …]" size = "n/+n/-n" color = "Color name/#HexValue"> Text

is a Deprecated Tag The W3C (World Wide Web Consortium) hopes to eliminate it in the future from the official specification … – Many current pages use it, not likely to be eliminated from future browser versions Would replace it and other formatting with cascading style sheets (CSS) … – Coding is more complex – Current browsers still do not completely follow W3C specification for style sheets

Attributes Many tags include additional data which modify how the element will render The values are assigned to these attributes Format: Example:

The face Attribute The face attribute selects font by name Comma-separated list gives browser a choice of installed fonts in order Format: Text Example: This will probably display in Lucida Sans.

The size Attribute Selects a change in font size – Valid range from 1 to 7 Can be set relative to the current size Format: Text Examples: Displays very large. Will display one size smaller than previous.

The Tag Sets an alternate default size for page Use only once in each HTML document This is a deprecated tag Format: Example:

The color Attribute To select font color as a(n): – Color name, i.e. Blue – 6-digit hexadecimal RGB value, i.e. #00FF00 Format: Text Examples: Displays blue Displays green

The text Attribute Placed within the tag to set default font color for text on the page This is a deprecated attribute Format: Examples:

The (Bold) Tag Displays text in a bold style Format: Text Example: Displays text in a bold style The tag may also be used for bold

The (Italic) Tag Displays text in an italic style Format: Text Example: Displays text in an italic style The (emphasized), (for a citation), or (Webmaster's address) tags may also be used for italic

The (Underline) Tag Displays text in an underline style Underlining is often associated with hyperlinks and may confuse users This is a deprecated tag Format: Text Example: Displays text in an underline style

The align Attribute An attribute used with several tags to control horizontal alignment – Format: Text (justify means even left and right margins) – Example: This Title Is Centered

Adding Comments Text that displays in the HTML editor, but not in the browser window Useful for describing what developer intended when using a specific tag Beginning comment symbol is <!-- End of comment symbol is --> Example:

The (Image) Tag The src attribute must be used to name an image (graphic) file to be displayed on page Path is required if file is not located in same directory as the HTML document Format: Example:

The border Attribute Places a border (box) around image – n is the size (width of line) in pixels Format: Example: Use value of zero (0) for no border

The width and height Attributes (Page 1) Sets the image's size displayed in width and height (measured in pixels) If browser knows how much room to allow, it can fill in the rest of the text as the image continues to load It is better to avoid using width and height to make the image smaller … – Create smaller image in graphics program – Will load faster and look better

The width and height Attributes (Page 2) Format: Example:

The alt Attribute Displays text that will appear if the image does not In Windows, displays a tool tip when mouse pointer hovers over the image Format: Example:

The (Horizontal Rule) Tag Displays a horizontal line across page Attributes are color, width (default: 100%) and size (height—default: 1) Format: Examples:

Unordered Lists Also called a bulleted list A block contained within the HTML tags … (unordered list) The tag for each item is (list item) The unordered list automatically indents each item in the list to the second level

Format of the Tag Format: text <li … The type attribute is discouraged in the W3C standard in favor of style sheets

Ordered Lists Also called a numbered list A block contained within the HTML tags … (ordered list) The tag for each item is (list item) The ordered list automatically indents each item in the list to the second level

Format of the Tag Format: text <li … The type, start and value attributes are discouraged in the W3C standard in favor of style sheets

The (Anchor) Tag The href (hyperlink reference) attribute of (anchor) tag links to another Web page Format: text/object Example: Home page – Appears in Web page as: Home pageHome page

Bookmarks A named location within a Web page Enables a hyperlink to quickly access the location on the same page

Hyperlink to a Bookmark Similar to a hyperlink to another Web page – href attribute within an (anchor) tag Format: text/object – # symbol means the link is to a bookmark Example: Interest No. 1 – Appears in Web page as: Interest No. 1Interest No. 1

The name Attribute Creates an anchor (the bookmark) within a Web page so user may link to that location Format: text/object Example: – The bookmark itself is not visible in the Web page, so text or object is optional

Hyperlink to Address Uses mailto: reference in href (hyperlink reference) option of the (anchor) tag Launches software--addresses message Format: text/object Example: Send to Prof. Struck – Appears in the Web page as: Send to Prof. Struck

Creating a Table A table is a block inserted within the tags: … The tag must be included – Netscape will not display the entire table if the closing tag is missing Rows are inserted within the using: … Cells are inserted into the 's using: …

Creating a Table Example Example: Some data More data End of line

The border Attribute Width of border (lines) around the table and around all cells as a value – Default is 1 pixel Format: Example: A value of zero (0) will turn off all borders around and within the table

Inserting a Row Rows are inserted into a table using the (table row) tag Format: … cells_within_the_row … Some browsers add extra spaces between cells if and tags are omitted

Content is inserted into cells within the table using the (table data) tag Format for a single cell: content within the cell Example: Some data Creating Cells and Entering Data

Adding Table Headers Titles displayed in bold and centered above each of the columns of the table Use tags within the first (row) of the table to add the headings Usually include as many headings as there are columns Example: Monday

User Input FormsForms Designed to get information from users of the Web presentation Might include: –Reader feedback (comments, complaints, etc.) –On-line orders –Database entry

HTML Form Syntax The basic form is created using the and tags All form elements are contained within these tags Format: [form elements]

Form Dialog Elements There are three basic groups of form dialog elements: – One-line text box, password box, radio button, check box and buttons – Drop-down menu and select (list) box – Scrolling (multi-line) text box

One-Line Text Box Created by using the … – tag – type = "text" attribute and value Format: Example:

One-Line Text Box—Attributes name = "FieldName" – Fieldname that identifies the text box results to a file for processing size = "n | n% | npx" – The horizontal width of the box in number of characters (average font), percentage or pixels value = "Initial string value" – Initial value stored in the field when the form loads

Radio Button Created by using the … – tag – type = "radio" attribute and value Format: Example:

Radio Button—Attributes name = "GroupName" – The name given to all buttons in group value = "ValueName" – A value saved for processing when that button is selected from within the group checked – Optional attribute used for only one button to make it the default selection

Select Box (Page 1) Created by using the and tags The list choices are inserted into the menu between the … tags Format: A menu choice [ … ]

Select Box (Page 2) Example: Request appointment Request information Make suggestion Solve a problem Other

name = "Fieldname" – Fieldname that identifies the drop-down menu results to a file for processing size = "n | n% | npx" – The vertical height of the box in number of lines/rows (or percentage) – Value greater than one (1) turns drop-down menu into a list box Select Box—Attributes

Allows the user to select more than one option from the menu Requires use of the and/or the key on the keyboard while clicking the item (or click and drag) Example: – The multiple attribute should be set only if size is two (2) or greater (list box) Select Box--multiple Attribute

Used to insert list values into the drop-down menu or list box Format: List text Example: Make a suggestion Select Box—the Tag

The Tag—value Attribute The value attribute is the value saved for processing when the option is selected Format: List text Example: Make a suggestion

Scrolling Text Box Created by using the and tags Format: Default text Example: <textarea name = "Comments" rows = "4" cols = "65">

Scrolling Text Box—Attributes name = "Fieldname" – Fieldname that identifies the scrolling text box results to a file for processing rows = "n | n%" – The vertical height of the box in number of text lines (or percentage) cols = "n | n% | npx" – Horizontal width of the box in number of characters, percentage or pixels wrap – Automatically word wraps text (default)

Created by using the … – tag – type = "checkbox" attribute and value Example: Check Box

name = "Fieldname" – Fieldname that identifies the check box results to a file for processing value = "Text value" – The value stored if the state is checked when the form is submitted checked – Displays the box in the checked (on) state when the form loads Check Box—Attributes

Created by using the … – tag – type = "password" attribute and value Example: Password Box

name = "FieldName" – Fieldname that identifies the password box results to a file for processing size = "n | n% | npx" – The horizontal width of the box in number of characters (average font), percentage or pixels maxlength = "n" – Maximum number of characters that may be entered in box Password Box—Attributes

Created by using the … – tag – type = "buttonType" attribute and value Examples: Button

name = "Fieldname" – Fieldname that identifies the push button results to a file for processing value = ”Label value" – The value displayed as a label on the button Button—Attributes