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

div

div

span span

div

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

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

Examples of new Html5 block-level elements:

<header><footer><section><nav>

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

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)

Examples of new Html5 inline-level elements:

<audio><video>

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

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.

<table cellspacing=“5”></table>

<div id= “msu”></div>

<img src="angry.gif" alt="Angry face”>

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

name value

Examples of common attributes to all elements

Examples of specific attributes to specific elementsElement Attributea hrefimg src – alttable cellpadding – cellspacingtd colspan – 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.

titlelang

Index of Attributeshttp://www.w3.org/TR/html-markup/global-attributes.html

The table element

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

tr

tr Hello

tr

Bonjour Marhaba

English French Arabic

Title1 Title2 Title3

tr th th th

tr td td td

tr td td td

table

The table element

<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

English

Title1 Title2 Title3

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

<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

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 navigation2) a logical grouping of content3) minimal clicks to arrive to desired destination