Uploaded by zstar123

HTML and CSS key points

advertisement
1) The key points from this module are:
 The latest version of HMTL is HTML5. The latest version of CSS is CSS3.
 HTML is the acronym for Hyper-text Markup Language
 CSS is the acronym for Cascading Style Sheets
 When saving a .html file in Notepad the encoding should be changed to UTF-8
 Web pages have the following file extension name: .html
 The file extension for a CSS file: .css
 <> keys are used to create tags in HTML
 Example: Paragraph element:
 <p> the opening paragraph tag
 </p> the closing paragraph tag
 <!DOCTYPE html> declares an HTML5 document:
 <html> </html> define the boundaries of an HTML web page
 Every HTML web page contains Head section and Body section:
 <head> </head> represent the head section of a web page
 <body> </body> represent the body section of a web page
 Cascading Style Sheets:
 A correctly formatted CSS style: hi {font-size:2em; >, use {} keys
 Progressive enhancement: a strategy for web design which emphasises accessibility,
semantic HTML markup, and external stylesheet and scripting technologies.
 Web links:
 Absolute URL - href="http://www.alison.com"
 Relative URL - href="another.html"
 Attributes:
 <html lang="en"> the 'lang' is known as the Attribute of the tag
 <!DOCTYPE html> declares an HTML5 document
 <html> </html> define the boundaries of an HTML web page
 Every HTML web page contains Head section and Body section:
 <head> </head> represent the head section of a web page
 <body> </body> represent the body section of a web page
 Global attributes:
 Global attributes that can be added to virtually any HTML5 element:
 id attribute - Provides programmatic access via JavaScript (on client)
 name attribute - Provides programmatic access (on the server)
 class attribute - CSS hook for stylings
2) The key points from this module are:
 Headings: (h1, h2, h3, h4, h5 and h6)
• For heading elements the h1 element represents the highest ranking heading
• The h6 element represents the lowest ranking heading.
 There is a default style setting for all of the heading elements: h1, h2, h3, h4, h5 and h6.
 The img element needs the following attributes
• src attribute - The location of the image file
• alt attribute - Alternative name for image (important for screen readers to identify
and describe image)
 The following are types of lists in HTML5:
• ul element - Unordered list
• ol element - Ordered list
• dl element - Description list (in HTML5)
• ul element - represents a list of items, where the order of the items is not important
• ol element - represents a list of items, where the items have been intentionally
ordered
• dl element - represents an association list consisting of zero or more name-value
group
 Description lists:
• <dl> element - description list (in HTML5)
• <dt> element - description term
• <dd> element - description ps (in HTML5)
 The following are elements for creating table:
 tbody element
 thead element
• tr element - represents a row of cells in a table
• td element - represents a data cell in a table
• th element - represents a header cell in a table
3) The key points from this module are:
 The following elements are used to create a form: <form> </form>
 The following are important attributes associated with form element
 method-'" attribute
 action-’" attribute
 link="" attribute
 HTTP POST - encode form data in body of HTTP message
 HTTP GET - encode form and other data in URL
 The following is a correctly formatted form element: <form method'POST"action="form.aspx"></form>
 The attribute that limits the number of characters which can be typed into a form text box:
maxlength-' " attribute
 fieldset element: represents a set of form controls optionally grouped under a common
name.
 legend element: represents a caption for the rest of the contents of the legend element's
parent fieldset element.
 label element: represents a caption in a user interface.
 select element: represents a control for selecting amongst a set of options.
 textarea element: represents a multi-line plain text edit control.

Download