Wednesday, September 05, 2012
Tuesday, September 04, 2012
Friday, August 31, 2012
P2PU #4 HTML Hunting in the World Around You - Task #1
HTML is written in tags in this form "< tagName> ". HTML tags are either container tags or empty tags. Empty tags are written like this "<emptyTagName />" followed by its content. Container tags are written like this "<containerTagName> content to be written here </containerTagName>". HTML has many advancements since its first release on 1991 by Tim Berners-Lee, it is now known as HTML5 by the w3c "World Wide Web Consortium" the organization that responsible for the web standardization.
HTML tags are classified into many classification rather than being empty or container tags, there is also block level and inline level tags. Block level which handles text as a block of lines making room before and after, for example the <p> tag which is a container tag, refers to a paragraph, and it is a block level element or tag "tags can be also called elements", being a block level element means that it will put a break "empty line" before and after the block of text it represents. Inline elements will not do that, it will represent its contents side by side in a single queue, no breaks before or after.
All of those features of HTML elements can incredibly be changed using CSS which is the tool responsible for formatting content as HTML is the tool responsible for putting content on a page.
That was a brief introduction about HTML elements.
Now we are going to talk about some HTML elements, so let's go...! :-)
<div>
"Block level element", "container element" refers to a "division" you can combine multiple elements to be its content to apply massive formatting issues, like background, border, special formatting or just simple to separate contents.
syntax :
<div> content of the tag element or any other tags </div>
output :
. .......................................................................... Line break before
content of the tag element or any or any other tags
. .......................................................................... Line break after
description form Mozilla developer network:
The Document Division (<div>) HTML element is generic container for flow content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element (such as <article> or <nav>) is appropriate. Read More
----------------------------------------
<blockquote> "Block leve elemet", "container element" refers to a special quotation to be represented.
syntax :
<blockquote> content of the tag element or any other tags </blockquote>
output :
. .......................................................................... Line break before
content of the tag element or any or any other tags Observe the identation
. .......................................................................... Line break after
description form Mozilla developer network:
The HTML Block Quotation (<blockquote>) element indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation . A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the <cite> element.Read More
----------------------------------------
<p> "Block leve elemet", "container element" refers to a paragraph.
syntax :
<p> content of the tag element or any other tags </p>
output :
. .................................................................. Line break before
content of the tag element or any or any other tags
................................................................... Line break after
description form Mozilla developer network:
Paragraph element (<p>) represents a paragraph. Read More
----------------------------------------
<ol>
"Block level element", "container element" to introduce ordered list items, it has an extended element "<li>" or list item.
syntax :
<ol>
<li> list item no. one </li>
<li> list item no. two </li>
<li>....etc.................</li>
</ol>
output :
. .................................. Line break before
1. list item no. one Observe the identation
2. list item no. two Observe numbers
3. ....etc................
. ................................... Line break after
description form Mozilla developer network:
The HTML ordered list element (<ol>) represents an ordered list of items. Typically, ordered-list items are displayed with a preceding numbering, which can be of any form, like numerals, letters or Romans numerals or even simple bullets. This numbered style is not defined in the HTML description of the page, but in its associated CSS, using the list-style-type property. Read More
"Block level element", "container element" to introduce ordered list items, it has an extended element "<li>" or list item.
syntax :
<ol>
<li> list item no. one </li>
<li> list item no. two </li>
<li>....etc.................</li>
</ol>
output :
. .................................. Line break before
1. list item no. one Observe the identation
2. list item no. two Observe numbers
3. ....etc................
. ................................... Line break after
description form Mozilla developer network:
The HTML ordered list element (<ol>) represents an ordered list of items. Typically, ordered-list items are displayed with a preceding numbering, which can be of any form, like numerals, letters or Romans numerals or even simple bullets. This numbered style is not defined in the HTML description of the page, but in its associated CSS, using the list-style-type property. Read More
----------------------------------------
<ul> "Block level element", "container element" to introduce unordered list items, it has an extended element "<li>" or list item.
syntax :
<ol>
<li> list item no. one </li>
<li> list item no. two </li>
<li>....etc.................</li>
</ol>
output :
. .................................. Line break before
■ list item no. one Observe the identation
■ list item no. two Observe the squares
■ ....etc................
. ................................... Line break after
description form Mozilla developer network:
The HTML unordered list element (<ul>) represents an unordered list of items, namely a collection of items that do not have a numerical ordering, and their order in the list is meaningless. Typically, unordered-list items are displayed with a bullet, which can be of several forms, like a dot, a circle or a squared. The bullet style is not defined in the HTML description of the page, but in its associated CSS, using the list-style-type property. Read More
----------------------------------------
<li> "container element" to introduce list items, it is a required element for both "<ol>" and "<ul>" elements. Please revise both <ol> and <ul> elements above.
syntax :
Please, revise the syntax of both <ol> and <ul> elements please .
output :
Please, revise the output of both <ol> and <ul> elements please .
description form Mozilla developer network:
The HTML List item element (<li>) is used to represent a list item. It should be contained in an ordered list (<ol>), an unordered list (<ul>) or a menu (<menu>), where it represents a single entity in that list. In menus and unordered lists, list items are ordinarily displayed using bullet points. In order lists, they are usually displayed with some ascending counter on the left such as a number or letter. Read More
----------------------------------------
<nav> "Block level element", "container element" specifying a section for navigation elements, it is very descriptive more than programmatic element.
syntax :
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
output :
------------------------------------------ Line break before
● Home indentation is because of using <ul> element
● About waiting for CSS formatting issue
● Contact
------------------------------------------ Line break after
description form Mozilla developer network:
The HTML Navigation Element (<nav>) represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Read More
----------------------------------------
<menu> "Block level element", "container element", it is an equivalent to <ul> element.
syntax :
<menu type="toolbar">
<li>
<menu label="File">
<button type="button" onclick="void(),">New...</button>
<button type="button" onclick="void(),">Save...</button>
</menu>
</li>
<li>
<menu label="Edit">
<button type="button" onclick="void(),">Cut...</button>
<button type="button" onclick="void(),">Copy...</button>
<button type="button" onclick="void(),">Paste...</button>
</menu>
</li>
</menu>
output :
The HTML menu element (<menu>) represents an unordered list of menu choices, or commands. There is no limitation to the depth and nesting of lists defined with the <menu>, <ol> and <ul> elements. Read More
----------------------------------------
<span> "inline level element", "container element" same as <div> element except for being "inline not block level element".
syntax :
text before <span>
content of the tag element or any other tags
</span> text after
output :
text before content of the tag element or any other tags text after
description form Mozilla developer network:
This HTML element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element is appropriate. <span> is very much like a <div> element, but <div> is a block-level element whereas a <span> is an inline element. Read More
----------------------------------------
<time> "inline level element", "container element" to represent time.
syntax :
This Text was created on
<time>
30-08-2012
</time>.text after
output :
This Text was created on 30-08-2012. text after
description form Mozilla developer network:
The HTML time element (<time>) represents either time on a 24-hour clock or a precise date in the Gregorian calendar (with optional time and timezone information). This element is intended to be used presenting dates and times in a machine readable format. This can be helpful for user agents to offer any event scheduling for user's calendar. Read More
----------------------------------------
<q> "inline level element", "container element" to represent short quotation.
syntax :
text before <q>
some text as a quotation
</q> text after
output :
text before some text as a quotation text after
description form Mozilla developer network:
The quote element indicates that the enclosed text is a short inline quotation. Read More
----------------------------------------
<img> "empty tag" to place an image.
syntax :
<img src="imagelocation\imageName.ext" />
output :
description form Mozilla developer network:
The HTML Image Element (<img>) represents an image to the document. Read More
Tuesday, August 28, 2012
P2PU Challenge #3 Choose Your Weapon
I chose Sublime Text 2 as my weapon. It is elegant, easy to use, full of nice features, and sorry to say it is not free.
One of the most fantastic features is the multiple selection you can make to multiple elements everywhere and anywhere in your document, apply any changes you would like, it is really fantastic. :-)
you can find more about it in here.I also like Notepad++, it is amazing, and very nice tool, and it is FREE :-)).
Monday, August 27, 2012
P2PU first blog
Hello all, this is Usama, from Egypt. I am so eager to learn about web technologies and I would like to master all the well known techniques to develop a neat simple and beautiful web sites.
I found the
P2PU site, which helps people to learn some of those techniques I mentioned above. This blog is one of the tasks to start it over on P2PU the first challenge "Webmaking 101".
There are many features on this site, I wish to be able to go through them all.
I am trying to add special items like the small "P2PU - Webmaking 101" image on the left side. I wish you like this small blog and I am so eager to receive your feedback and comments "love it or hate it" :-).
I really enjoyed writing this blog :-)
There are many features on this site, I wish to be able to go through them all.
I am trying to add special items like the small "P2PU - Webmaking 101" image on the left side. I wish you like this small blog and I am so eager to receive your feedback and comments "love it or hate it" :-).
I really enjoyed writing this blog :-)
All Free Stuff
Hello all, that could be my first blog ever, and I would like to focus on free tools for computer users. Free tools refer to free everything, start from Operating system and end up with a fine simple text editors.
Of course there is Linux with all release names and versions, it is free to use, install and even to develop and change the core if you master programming, that was for operating system. GIMP and Inkscape are two fantastic full fledged "in my own opinion" bitmap and vector graphic tools , photo editors and more. Open office is the fantastic combination of word processor, spread sheet, slide show presentation, and math equation editors.. :-) no database engine till now, whereas you can use any of the fantastic free mySQL engine.I would like to make this post short as I am not familiar with blogging yet, so I will finish this post talking about Internet Browsers, we have the fantastic Google tool which is called "Chrome" and its developer friend "Google Chrome Canary", Opera is one of the leading free Internet Browsers, as well as Mozilla Firefox, and one of the most fantastic tool that related to the same family, is SeaMonkey, I will never forget to mention Safari from Apple store, it is free, do not get surprized, Apple offers some free tools.
that was my first post!
Subscribe to:
Posts (Atom)