Lesson 02 // Elements & Attributes. There are different types of elements, but the 2 most important...
-
Upload
monica-jones -
Category
Documents
-
view
217 -
download
0
Transcript of Lesson 02 // Elements & Attributes. There are different types of elements, but the 2 most important...
![Page 1: Lesson 02 // Elements & Attributes. There are different types of elements, but the 2 most important ones are BLOCK and INLINE. Block elements flow from.](https://reader036.fdocuments.us/reader036/viewer/2022082506/56649ef55503460f94c0831e/html5/thumbnails/1.jpg)
Lesson 02 // Elements & Attributes
![Page 2: Lesson 02 // Elements & Attributes. There are different types of elements, but the 2 most important ones are BLOCK and INLINE. Block elements flow from.](https://reader036.fdocuments.us/reader036/viewer/2022082506/56649ef55503460f94c0831e/html5/thumbnails/2.jpg)
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
![Page 3: Lesson 02 // Elements & Attributes. There are different types of elements, but the 2 most important ones are BLOCK and INLINE. Block elements flow from.](https://reader036.fdocuments.us/reader036/viewer/2022082506/56649ef55503460f94c0831e/html5/thumbnails/3.jpg)
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>
![Page 4: Lesson 02 // Elements & Attributes. There are different types of elements, but the 2 most important ones are BLOCK and INLINE. Block elements flow from.](https://reader036.fdocuments.us/reader036/viewer/2022082506/56649ef55503460f94c0831e/html5/thumbnails/4.jpg)
Examples of new Html5 block-level elements:
<header><footer><section><nav>
![Page 5: Lesson 02 // Elements & Attributes. There are different types of elements, but the 2 most important ones are BLOCK and INLINE. Block elements flow from.](https://reader036.fdocuments.us/reader036/viewer/2022082506/56649ef55503460f94c0831e/html5/thumbnails/5.jpg)
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)
![Page 6: Lesson 02 // Elements & Attributes. There are different types of elements, but the 2 most important ones are BLOCK and INLINE. Block elements flow from.](https://reader036.fdocuments.us/reader036/viewer/2022082506/56649ef55503460f94c0831e/html5/thumbnails/6.jpg)
Examples of new Html5 inline-level elements:
<audio><video>
![Page 7: Lesson 02 // Elements & Attributes. There are different types of elements, but the 2 most important ones are BLOCK and INLINE. Block elements flow from.](https://reader036.fdocuments.us/reader036/viewer/2022082506/56649ef55503460f94c0831e/html5/thumbnails/7.jpg)
Index of Block-level and Inline elementshttp://www.w3.org/TR/html-markup/elements.html
![Page 8: Lesson 02 // Elements & Attributes. There are different types of elements, but the 2 most important ones are BLOCK and INLINE. Block elements flow from.](https://reader036.fdocuments.us/reader036/viewer/2022082506/56649ef55503460f94c0831e/html5/thumbnails/8.jpg)
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
![Page 9: Lesson 02 // Elements & Attributes. There are different types of elements, but the 2 most important ones are BLOCK and INLINE. Block elements flow from.](https://reader036.fdocuments.us/reader036/viewer/2022082506/56649ef55503460f94c0831e/html5/thumbnails/9.jpg)
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
![Page 10: Lesson 02 // Elements & Attributes. There are different types of elements, but the 2 most important ones are BLOCK and INLINE. Block elements flow from.](https://reader036.fdocuments.us/reader036/viewer/2022082506/56649ef55503460f94c0831e/html5/thumbnails/10.jpg)
Index of Attributeshttp://www.w3.org/TR/html-markup/global-attributes.html
![Page 11: Lesson 02 // Elements & Attributes. There are different types of elements, but the 2 most important ones are BLOCK and INLINE. Block elements flow from.](https://reader036.fdocuments.us/reader036/viewer/2022082506/56649ef55503460f94c0831e/html5/thumbnails/11.jpg)
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
![Page 12: Lesson 02 // Elements & Attributes. There are different types of elements, but the 2 most important ones are BLOCK and INLINE. Block elements flow from.](https://reader036.fdocuments.us/reader036/viewer/2022082506/56649ef55503460f94c0831e/html5/thumbnails/12.jpg)
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.
![Page 13: Lesson 02 // Elements & Attributes. There are different types of elements, but the 2 most important ones are BLOCK and INLINE. Block elements flow from.](https://reader036.fdocuments.us/reader036/viewer/2022082506/56649ef55503460f94c0831e/html5/thumbnails/13.jpg)
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
![Page 14: Lesson 02 // Elements & Attributes. There are different types of elements, but the 2 most important ones are BLOCK and INLINE. Block elements flow from.](https://reader036.fdocuments.us/reader036/viewer/2022082506/56649ef55503460f94c0831e/html5/thumbnails/14.jpg)
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)
![Page 15: Lesson 02 // Elements & Attributes. There are different types of elements, but the 2 most important ones are BLOCK and INLINE. Block elements flow from.](https://reader036.fdocuments.us/reader036/viewer/2022082506/56649ef55503460f94c0831e/html5/thumbnails/15.jpg)
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