|
| Some CSS, An Image I Thought I'd Add Even Though I Don't (Yet) Understand It. Image via Wikipedia |
The following are the notes I collected in my notebook for the corresponding P2PU task. My original intention was to provide a few images of my work as well, but after it started spanning 5 or more pages in this small notebook I decided it'd be better if I didn't!
Anyway, here goes...
<DIV>Used to group elements into blocks for styling purposes.
<BLOCK QUOTE>Used for large quotes that may need indentation based on the style (although the style doesn't HAVE to indent it, but it'd make sense to). Use CITE to provide a URL citation. e.g:
<blockquote cite="http://gwattsdesign.blogspotcom>Loads more text would usually go here, say a paragraph or a few lines, but because I am just giving an example there is no need for me to randomly write that much off the top of my head</blockquote>
<P>Represents a paragraph. It is used to "block" text together, and this is the most used block-level element.
<OL>Creates an ordered list. (Can be preceded by numbering or any other character or image defined in CSS). e.g:
<ol>
<li>line/item 1</li>
<li>line/item2</li>
</ol>
<UL>Similar to <ol>, bu creates a list with no numerical ordering, but just bullet points (or whatever is defined in CSS) e.g:
<ul>
<li>line/item</li>
<li>another line/item</li>
</ul>
<LI>Stands for List Item. Should only be used in a list with <ol> or <ul>
<NAV>Navigation element; contains links used to navigate the website. e.g:
<nav>
<ul>
<li>Home</li>
<li>Away</li>
<li>About</li>
<li>Links</li>
</ul>
</nav>
<MENU>Creates an unordered list. The difference is whereas <ul> solely displays items, <menu> acts as an interactive menu with items that are activated or interactive in some way (like in a window's menubar). It can also contain nested <menu>'s, or menus within menus (which presumably would display on mouse-over). e.g.:
<menu type="toolbar">
<li>
<menu label="file">
<button type="button" onclick="new()">New...</button>
<button type="button" onclick="save()">Save...</button>
</menu>
</li>
<li>
<menu label="empty">
</menu>
</li>
</menu>
<SPAN>Used for styling purposes. Similar to <div>, but is used in-line within a block, rather than acting as a block itself. (A little like when you put text in italics or bold in word processing, it doesn't necessarily act on the whole block/paragraph but only on a word, a few words or a line...?) e.g.:
<p>this <span>here</span> has just used the span tag</p>
<TIME>Represents the time and/or date of an event, whether external (like a concert) or part of the website (like the creation of an article, or update of a page). It doesn't magically do anything on its own, but it is machine readable (using, for example, something like Google Calendar or a Feed Reader) so an application can use the date to update a calendar or order news stories. Information can be internal to the tag, or surrounded by the tag, depending on whether you want to the user to see the extra information or not respectively as part of the page. e.g.:
<p>Let's meet up at <time>19:00</time>
<article>
<p>This here article was made on <time pubdate>2011-01-02</time></p>
</article>
<p>The comedy show took place on <time datetime="2001-05-15 17:00">May 15 2001</time>
<Q>
Indicates the included text is a quote. e.g.
<p>Gary said <q>Gee whiz, that is so funny!</q>.</p>
<IMG>Represents an image. e.g.:
<img src="a_pic.png" height="800" width="600" alt="What a pic!/>
Based on the P2P University activity at http://p2pu.org/en/groups/webmaking-101-html-hunting-in-the-world-around-you/content/some-tags-for-you-to-meet/
