1 / 27

HTML and Dreamweaver

HTML and Dreamweaver. October 21st. Overview. Element Attributes Review Semantic HTML HTML Elements for Layouts Tables Block-Level Elements, DIV element Grid Layout Demo. Element Attributes.

calvin
Download Presentation

HTML and Dreamweaver

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML and Dreamweaver October 21st

  2. Overview • Element Attributes Review • Semantic HTML • HTML Elements for Layouts • Tables • Block-Level Elements, DIV element • Grid Layout Demo

  3. Element Attributes • As we know elements have various attributes, which can be set with your markup or left to their default values. <p align=“left” id=“paragraph” class=“blue”></p> • Let’s dive deeper, what are some common attributes and how can we use them effectively?

  4. Attributes • ID • Used with:Elements inside the body of the document. • Description:The ID attribute is a common attribute used for, you guessed it, distinguishing elements from each other with a unique identifier. That last part is important. The ID attribute value should always be unique.

  5. Attributes • CLASS • Used with: Elements inside the body of the document. • Description: The class attribute is a common attribute used to group elements. The class element is similar to the ID element except for one distinction; a class is generally used on multiple elements.

  6. Attributes • STYLE • Used with: All elements contained within body • Description: Style is used to set inline CSS style information. Generally style information should be separate from your markup but using the style attribute is a valid way of ensuring a specific style for an element as it will override any CSS for the specified styles.

  7. Attributes • TITLE • Used with: All elements contained within body • Description: The title element is a common way of establishing a relevant title for an element. Think of this as meta data for elements and use it when possible in <a> elements.

  8. Attributes • ALIGN • Used with: IMG, INPUT, TABLE • Description: Align positions an element with respect to surrounding context. For example, to align an image to the right of a text use align=“right”. This attribute is not useful for positioning block elements. More on that later.

  9. Attributes • ALT • Used with: IMG, INPUT • Description: A short description to describe the element. This is required to be set with the IMG tag and is important in order to establish context for search engines.

  10. Attributes • BORDER • Used with: IMG, TABLE • Description: Establishes a border for images and table elements. Some browsers default border to 1 pixel around images that are linked so it is important to set border=“0” to images you do not want borders around.

  11. Attributes • HEIGHT, WIDTH • Used with: IMG,TABLES • Description: Height and width are used to establish dimensions for image elements. These will be assumed based on the image dimensions or can be applied to force sizing constraints.

  12. Attributes • These are just a few examples. To view all possible attributes for an element consult w3.org’s master list. • http://www.w3.org/TR/REC-html40/index/elements.html

  13. Semantic HTML • As we have covered before, writing semantic HTML is important not only for readability but for search engine optimization. • Because HTML is a broad standard developers tend to contract their own styles and uses for elements, which can make it difficult to work in a group environment. • Bad Example: <div id=“header”></div> • Good Example: <h1></h1> • By using the appropriate element for a given task we can not only write accessible code but provide a professional product that is easily interpreted by other developers and web browsers.

  14. Semantic HTML • Here is a great guide to semantic use of HTML elements. • http://www.joedolson.com/articles/2008/04/guide-to-semantic-html/

  15. Block-Level Elements • Most elements within the body of an HTML document are either block-level elements or inline elements. The main difference between block-level and inline elements is that block-level elements usually start on a new line and can generally have a defined height and width. • Some examples of block level elements: <div>,<h1>,<p>,<hr>,<ul>,<table>

  16. Block-Level Elements • Because block-level elements can have defined heights and widths they are commonly used to lay out content on a page. • For creating layouts the most common block-level element is the DIV element.

  17. DIV Element • The DIV element is a generic block-level container for content on a web page. By default a DIV element has no defined height, width, padding or margin, which makes it a great element to build a site around. • The in-line equivalent of a div is the SPAN tag. • For more information on the DIV element. http://www.w3.org/TR/REC-html40/struct/global.html#edef-DIV

  18. Tables • One of the most common elements for displaying content in grid or tabular format is the TABLE element. • The TABLE element consists of rows and columns. • A table contains at least one TR (table row), which must contain at least one TD (Table Cell). • A table may also contain header cells with the TH element.

  19. Tables • A simple table example. <table border="1">  <tr>  <th>Month</th>  <th>Savings</th> </tr>  <tr> <td>January</td> <td>$100</td> </tr> </table>

  20. Tables • A simple table in action: • http://www.w3schools.com/TAGS/tryit.asp?filename=tryhtml_table_test

  21. Tables • Tables also have a variety of other useful attributes. • BORDER: adds a border around the table, set as pixel value. • CELLSPACING: adds a padding between cell contents and the borders of each cell. • FRAME: specifies how the outer border should appear. • RULES: specifies horizontal and vertical column lines. • SUMMARY: summarizes the table for accessibility. • WIDTH: specifies the width of the table in either a pixel or percentage value.

  22. Tables • The TR and TD elements also have some useful attributes. • TR • ALIGN: aligns the content of the rows horizontally, left, center or right. • VALIGN: aligns the content of the rows vertically either top, middle, or bottom. • TD • ALIGN: aligns the content of the rows horizontally, left, center or right. • VALIGN: aligns the content of the rows vertically either top, middle, or bottom. • COLSPAN: tells the cell to expand across the defined number of cells. • ROWSPAN: makes the cell extend across the specified number of rows.

  23. Tables • Tables can provide accessibility issues for search engines and people with sight disabilities. To accomplish this you can use additional elements to define headers, footers and a caption. • <table border=“1”> <caption>This is a caption</caption> <thead> <tr><th>Artist</th><th>Title</th></tr> </thead> <tfoot> <tr><th colspan=&quot;2&quot;>This is my CD collection</th></tr> </tfoot> <tbody> <tr><td>Fred Smith</td><td>Greatest Songs</td></tr> <tr><td>Randy Connolly</td><td>Hot HTML Hits</td></tr> </tbody></table>

  24. More Table Examples • http://www.mountaindragon.com/html/tables2.htm

  25. Tables vs DIVs There are a few things tables do that DIVs do not, much to the dismay of HTML developers. • While the valign attribute works in tables it does not work in DIVs, which can present a problem when data needs to sit vertically in the middle of the DIV. • Percentage width. One of the biggest advantages to tables is the ability to set a percentage value for dimensions. This allows you to share spacing dynamically where as with a DIV you either have to let the DIV size itself or set a specific pixel amount (there is a min-width CSS property for DIV elements but its’ support is relatively new and will not work in older browsers).

  26. Tables vs DIVs • While tables can be used for building entire sites, and have been many times, this lends itself to clumsy code that is hard to maintain and defeats the ability to separate the HTML document structure from it’s visual style. • In order to produce friendly, semantic HTML tables should be used only for displaying tabular data (or in rare cases when percentage width or valign attributes are absolutely required).

  27. DIVs and the 960 grid system • The 960 grid system uses DIVs, which it assigns specific widths and margins to, allowing you to create designs that are clean and can easily be updated and transformed as requirements change (and they always do). • Since DIVs are block-level elements they like to occupy their own line, which can make placing them next to each other difficult. To overcome this the 960 grid system uses CSS to ‘float’ the elements in place. Overcoming the block-level nature of the DIV element is the biggest deterrent to using DIVs for layouts and often results in inexperienced developers resorting to tables for layouts.

More Related