1 / 15

Lesson 02 // Elements & Attributes

Lesson 02 // Elements & Attributes. There are different types of elements, but the 2 most important ones are BLOCK and INLINE. Block elements flow from top to bottom and generate a line break before and after the element without making a space in between – ex:. div. div. div.

priscilla-fox
Download Presentation

Lesson 02 // Elements & Attributes

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. Lesson 02 // Elements & Attributes

  2. There are different types of elements, but the 2 most important ones are BLOCK and INLINE. • Block elements flow from top to bottom and generate a line break before and after the element without making a space in between – ex: div div div • Inline elements flow from left to right and don’t generate a line break before or after the element, but create a space between each 2 elements – ex: span img span img div div

  3. Block-level elements • Some block-level elements can contain both, block and inline elements (such as div), while others can only contain inline elements (such as p) • They can have dimensions (such as width + height) • Examples of block-level elements are: <h1>…<h6> <div> <p> <ul> <ol> <li> <blockquote> <hr> <table> Example: <div> <p>msu is a great university</p> <img src=“happy.png” alt=“happy face”></div>

  4. Examples of new Html5 block-level elements: <header> <footer> <section> <nav>

  5. Inline elements • They are usually used with text • They can only nest other inline elements • They cannot be assigned dimensions except as defined by their content • They allow a limited range of styling options: changing colors, fonts… • Examples of inline elements are: span em cite br a Example: <span> <a href=“index.html”></a></span> img is a block-inline element (block because it can have dimensions – but inline because it is laid out as an inline in the flow, i.e, imgs flow from left to right)

  6. Examples of new Html5 inline-level elements: <audio> <video>

  7. Index of Block-level and Inline elements http://www.w3.org/TR/html-markup/elements.html

  8. Attributes Html elements can have different attributes. Each attribute is made up of a name and a value, written as name=“value”. Some attributes are optional, while others are required. In the examples below, the first 2 attributes are optional and the last 2 are required. attribute <table cellspacing=“5”></table> <div id=“msu”></div> <img src="angry.gif" alt="Angry face”> Example of attribute for the table element. <> Opening Tag </> Closing Tag name value Example of attribute for the div element. Required attributes of the image element. P.S. The img is an empty element.

  9. Examples of common attributes to all elements id represented by # in css (assign an id to a single element on a page) class represented by . in css (assign a class to one or more elements) style won’t use it much (inline styling)-used in newsletters for ex. title lang Examples of specific attributes to specific elements Element Attribute a href img src – alt table cellpadding – cellspacing td colspan – rowspan

  10. Index of Attributes http://www.w3.org/TR/html-markup/global-attributes.html

  11. table The table element tr tr th th th Title1 Title2 Title3 <table> <tr> <th>Title1</th> <th>Title2</th> <th>Title3</th> </tr> <tr> <td>Hello<td> <td>Bonjour<td> <td>Marhaba<td> </tr> <tr> <td>English<td> <td>French<td> <td>Arabic<td> </tr> </table> Hello td Bonjour td Marhaba td tr tr td td td tr tr English French Arabic

  12. The table element Title1 Title2 Title3 cellspacing, cellpadding are html specific attributes of the table element, while rowspan & colspanare html specific attributes of the td element. We mention them in Html not in CSS. <table cellspacing="5" cellpadding="5"> <tr> <th>Title1</th> <th>Title2</th> <th>Title3</th> </tr> <tr> <td >Hello<td> <td>Bonjour<td> <td rowspan="2">Marhaba<td> </tr> <tr> <td colspan="2">English<td> </tr> </table> Hello Bonjour Marhaba English

  13. Nested elements <div id=“bodycontent”> <div id=“container”> <p id=“firstparagraph”>Hello</p> </div> <p id=“secondparagraph”>What’s up?</p> </div> Second level deep First level deep

  14. Before creating site: • You want to plan it out: • Know the goal of website, ex: display products for sale or inform about something • Once you know the goal, you can create the content of site, ex: about, services, contact… SITE MAP • When content is ready, create a hierarchy for the pages of information you wish to display on your site (from general to specific)

  15. Make design considerations: • Three important recommendations: • Don’t have a lot of text in body copy, no one really reads endless paragraphs • Keep important info above the fold: before people scroll down • Make sure you have: • 1) an intuitive navigation • 2) a logical grouping of content • 3) minimal clicks to arrive to desired destination • Design page layout (header, footer, side-bar, main content area, etc) • Then style the page with colors, fonts - let text be legible and font consistent, urls differentiated from body copy with color… CREATE SKETCH Nicely designed site that is easy for user to use.

More Related