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: 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: div span div img div

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: … Example: msu is a great university

Examples of new Html5 block-level elements:

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

Examples of new Html5 inline-level elements:

Index of Block-level and Inline elements

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. Example of attribute for the div element. Required attributes of the image element. P.S. The img is an empty element. Example of attribute for the table element. <> Opening Tag Closing Tag attribute namevalue

Examples of common attributes to all elements Examples of specific attributes to specific elements ElementAttribute ahref imgsrc – alt tablecellpadding – cellspacing tdcolspan – rowspan 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

Index of Attributes

The table element Title1 Title2 Title3 Hello Bonjour Marhaba English French Arabic tr Hello tr BonjourMarhaba EnglishFrenchArabic Title1Title2Title3 tr th tr td tr td table

The table element Title1 Title2 Title3 Hello Bonjour Marhaba English HelloBonjour English Title1Title2Title3 Marhaba cellspacing, cellpadding are html specific attributes of the table element, while rowspan & colspan are html specific attributes of the td element. We mention them in Html not in CSS.

Nested elements Hello What’s up? Second level deep First level deep

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

Make design considerations: Design page layout (header, footer, side-bar, main content area, etc) CREATE SKETCH Nicely designed site that is easy for user to use. Then style the page with colors, fonts - let text be legible and font consistent, urls differentiated from body copy with color… 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