Almost three weeks have passed since then and there hasn’t been an update. That is, until Friday, when a customer took his complaint about his iPhone 3G lagging on zooming, scrolling, and typing to the boss himself, CEO Steve Jobs, and got a short, clipped answer via e-mail, according to the account posted on MacRumors: “Software update coming soon.”

If it is indeed an actual reply from Jobs (which we can’t actually know–Apple doesn’t confirm the authenticity of Jobs’ e-mails that often get posted online–but the CEO is known to respond to customers personally), “soon” isn’t awfully specific. It’s possible the update he’s referring to is iOS 4.1, which is already in developers’ hands for testing.

Officially, an Apple representative said there was no update to the company’s earlier comment that it is investigating iPhone 3Gs with iOS 4-related performance issues.

Readers have complained to CNET and Apple’s own forums are filled with iPhone 3G owners unhappy with the effect of the iOS 4 update. One reader said last month iOS 4 made his iPhone 3G “massively slower in performing all tasks,” and causes it to freeze while typing, Web-browsing, and using other apps “like it never did before iOS 4.”

Some have tried downgrading their iPhone 3G to iOS 3 and seen better results. CNET’s Brian Tong made a video showing how to do this:

If Facebook Places catches on with the company’s 500 million users, Facebook could be sitting on a gold mine of local business listings that advertisers and users will love and Google will hate.

As part of Google’s quest to pack useful answers into search results pages, it has built out a database of local business listings tied to its Google Maps service that gives someone searching for “pizza san francisco” a wealth of results to browse. Businesses are encouraged to claim their listings in Google Places to add their Web sites, hours, menus, or other information that searchers might value, in hopes of encouraging more people to think of Google as the place to find information about what’s around them at any given moment.

Facebook Places is a similar idea with a social-media twist. Facebook users can “check in” to an existing list of nearby locations from their mobile phones or add new listings themselves, sharing that activity with their friends. But this isn’t just about social butterflies: this feature will give Facebook a treasure trove of local business listings, the same prize that Google, Yelp, Foursquare, Gowalla, andothers aiming for local advertising dollars are chasing.

Simply put, Facebook Places is the latest example of how the ways information is being sought and presented on the Internet are changing. Will Internet users continue to type queries into trusty old Google? Or will those users prefer to discover information through social networks like Facebook, where soon they’ll be able to get much of the same information Google provides with the added bonus of reality checks from their friends.

Advertising dollars will follow whichever company manages to figure out the best blend, as neither approach will be enough to satisfy all the people all of the time. Small local businesses with limited advertising and marketing budgets for the Internet and social media will still probably have to hedge their bets across several sites, but Facebook’s decision to add location data to its product immediately creates a Google-scale competitor that can’t be ignored.

Already Facebook is getting word out to local businesses about the launch of Facebook Places, as Techcrunch noted. Lots of businesses have already invested time in making a Facebook Page, and are in some cases being prompted to merge their Page and Place to avoid confusion.

Google has certainly noticed Facebook’s intent. The company put out a blog post Thursday (a representative claimed the timing was pure coincidence) declaring that 100 million people a month are using Google’s Maps for Mobile product and reminding business owners to “help millions of people find you by claiming your free Place Page available in Google Maps and our most used mobile ‘app’ — Google Search.”

It’s just another sign that Facebook and Google are increasingly butting heads as two of the top five destinations for U.S. Internet users. It’s not just because so many ex-Googlers are running the show over at Facebook, but because social media has emerged as an important way to navigate through the Internet, a task that for years now has been synonymous with Google.

Social-media success remains elusive at Google, although the company has put a lot more attention to the problem this year and is getting ready to launch its most ambitious effort yet, according to reports. The unquestioned leader in online information provided by computers, Google has been unable to develop a system that lets Internet users efficiently find information provided by friends or colleagues, which is Facebook’s claim to fame.

It will take Facebook some time to build out its local database, and it remains to be seen how popular Facebook Places will prove among its users: especially if privacy concerns once again rear their head.

But for all the talk about how Facebook is squashing smaller services like Foursquare and Gowalla with this announcement, it’s clear from Facebook’s statements, and Google’s response, that the stakes are much higher: Facebook is little by little trying to redefine the way people find information and cash in on the desire of big businesses to get their message alongside that information. That used to be Google’s thing.

This week, just about every music trade group called for broadband policies–which could include a new federal law–that would “encourage” Internet providers to crack down on suspected piracy by their customers.

“The current legal and regulatory regime is not working for America’s creators,” the groups, including the Recording Industry Association of America (RIAA), said Wednesday in a letter to Google CEO Eric Schmidt. “Our businesses are being undermined, as are the dreams and careers of songwriters, artists, musicians, studio technicians, and other professionals.”

The music groups’ letter came in response to a joint proposal that Google and Verizon Communications releasedlast week. Their proposal says that Americans will “have access to all legal content on the Internet,” which leaves open the questions of access to illegal content and who decides what material may violate copyright law.

The Internet should be “predicated on order, rather than chaos,” wrote the 13 groups that signed the letter, which also included the American Federation of Musicians, the American Society of Composers Authors and Publishers, and the National Music Publishers Association. It said that broadband providers must “take measures to deter unlawful activity such as copyright infringement.”

Google and Verizon’s proposal, which is not suggested legislation but rather a collection of concepts, represents the companies’ attempt to craft a workable compromise and bring some finality to the often-chaotic discussions of which regulations could be imposed on tomorrow’s Internet. The proposal recommends giving the Federal Communications Commission explicit regulatory authority, but stops short at extending that power to wireless broadband.

This isn’t the first time that the RIAA has proposed injecting Net neutrality regulations with a stiff dose of copyright policing.

In January, the RIAA asked the FCC to “adopt flexible rules” that push Internet service providers to fight copyright infringement, which could involve pulling the plug on repeat offenders (a concept that has popped up in international treaty discussions too). And in 2008, the RIAA warned that one Democratic proposal could accidentally limit forms of “network management” used to police networks for copyright infringement.

At the moment, under the 1998 Digital Millennium Copyright Act, a Internet service provider generally “shall not be liable” for copyright infringement if it is merely providing a conduit for someone else’s transmissions. But Congress could rewrite that law and chip away at the broad shield it now provides.

Personally I have to admit that I am quite the little Apple maniac when it comes to IT products. A topic that often raises many eyebrows, when getting into the classic Windows vs. Linux vs. Mac discussions… Normally being quite faithful and happy with Apple’s products, I also have to admit that they in my opinion have failed miserably at least once in recent history! Namely with their so called Mighty Mouse. The concept seemed pretty good. Take a regular mouse, make it look good, and ad a scroll-wheel that enables vertical and horizontal scroll. Unfortunately the wheel constantly clutters up with dirt, so it won’t work properly after a while. The buttons sometimes didn’t react properly etc. I ended up throwing away three of them for those reasons. So, good concept, but poor product. Shit happens.

Now, Apple has released a new mouse a couple of months ago called Magic Mouse. The concept here is pretty much the same: Simple mouse, good looking, with vertical and horizontal scroll. Except: The scroll is not by swiping the fingers up/down or left/right on the mouse’s touch surface. Pretty clever I thought, so I got one and have now been testing it for a while. And working a lot online, with coding and graphics, I guess that my experiences are those of an average web-developer.

First of all, the so called Magic Mouse really looks nice. There is no doubt that Apple does master the packaging and product design better than most other companies. The functionality of the mouse itself is good. It works as intended. I find that the rather “heavy” click force needed for the left and right mouse button takes a little time to get used-to, but is neither a disadvantage or advantage. My main focus was the scrolling functionality. And it really works. I love every time I have to narrow browser windows, because I get to use the scroll again and again… And for regular computer use it is pretty good. However, there are situations where the mouse has it’s limitations. To ease the scrolling, the touch panel utilizes the momentum of you movement to understand how much you wish to scroll. I find this great for large scrolling distances, but at the same time the mouse has difficulties scrolling in minimum steps. For example when zooming in or out of a map, you have a hard time scrolling step-by-step, because you lack the physical feedback that most regular scroll-wheels offer.

My summary of this little product review is that touch mice definitely is an interesting concept that I think we will see much more of in the future. Apple’s approach is definitely a good start, but it needs further development to become really good. At this point I would let people decide for themselves if price-tag of about EUR 69.00 is fair, instead of giving a recommendation.

This was a little out-of-the-ordinary article about a computer peripheral. If you know about more accessories that are relevant or interesting for advanced computer users, web-developers etc., please let us know by commenting to this article.

Welcome back to the development course. Now it’s time to learn about forms. You may have noticed that forms are used all over the web to get user input. This happens in various ways, by entering information into text fields, select something from a drop-down box, chose among multiple options in buttons etc. The one thing that is valid for all of them, is that it is in some way or another a method of getting information (input) from the user. In this part we will go through the basic form and input elements.

The form itself

The typical HTML form is enclosed by the <form> tag, which holds two important attributes, “method” and “action”. The “method” attribute specifies in what (technical) way the information is being submitted. In our example we use the “post” method. If you are interested, you can read more about different methods here. The “action” attribute indicates where the data is being sent to. This should be the program/script that handles the data. We will get further into scripts etc. in future articles, so for now, please accept that this is just the “destination” of the data. This article is meant to describe the HTML form elements. Not the data-handling itself.

<form method="post" action="http://mydomain.com/form_target/">
</form>

Textfields

There are two basic textfields. The most common is single-line textfields, which is used for short text or numeric data, like a name, an email address, a phone number or similar. The second type is for longer pieces of text, and quite fittingly called “textarea”. A texture can hold multiple rows of text, and would normally be seen for example to input a longer message, for example in an email web interface or a website feedback/contact form (please note how we use two different tags <input> and <textarea>, and that <input> can close itself with the slash (/) at the end.

<input type="text" name="subject" />
<textarea name="message"></textarea>

Drop-down

A basic drop-down consists of a <select> tag with multiple <option> tags, for the various possible options to select in the drop-down (logic, huh?).

<select name=”pick_a_number”>

<option value=”1″>One</option>

<option value=”2″>Two</option>

<option value=”3″>Three</option>

</select>

Other field types

There are other field types, such as radio buttons, checkboxes and more. You can get a more in-depth overview here.

Submit button

The final input type I want to describe here, is the submit button. This is a button that sends the form’s data to the target address (specified in the <form> “action” attribute). Every form needs to submit it’s data to have the input processed.

<input type=”submit” value=”Send Data” />

There are a literally unlimited amount of ways to create and style forms (yes, they can also be designed with CSS, like all other HTML elements). This article is a brief overview over the basics, and you find more in-depth information by following the posted links. When the web-development course gets into scripting (programming), we will continue with how to process and “do something” with the submitted data.

Happy coding!

Today we will take a look at tables. Tables are in general comparable with tables in for example Word or Excel, and should be used the same way in HTML. That basically means that tables are a way to represent tabular data. They are not meant to be abused for other purposes, such as for example layouts. It has been “normal” for many years to use tables for page structure, which has distorted the use of tables. The correct way of doing layout is by use of div containers and CSS positioning (like described in a previous part of this course). Tables are for data.

The table HTML structure

The <table> tag has three sub-elements, which could be described as the three main areas of the table. The head, the body and the foot. Meaning that you have one row of title elements, then you have a number of data rows, and finally you have a foot row. The following code shows a complete example of a table. It is not mandatory to use all or any of these areas, like the second example suggests, you can also have data-rows only.

<table border="0" cellpadding="0" cellspacing="0">
  <thead>
    <tr>
      <th>Title Column 1</th>
      <th>Title Column 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1, Column 1</td>
      <td>Row 1, Column 2</td>
    </tr>
    <tr>
      <td>Row 2, Column 1</td>
      <td>Row 2, Column 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Foot Column 1</td>
      <td>Foot Column 2</td>
    </tr>
  </tfoot>
</table>

<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>

Tables offer a great deal of flexibility within the sphere of tabular data. You can use or leave out any areas of the table you don’t need, you can have as many columns as you wish, there is no row-limit, and you can even merge columns or rows by use of the collspan and rowspan attributes. Example here:

<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
    <td>Row 1, Column 3</td>
  </tr>
  <tr>
    <td colspan="2">Row 2, Column 1 and 2</td>
    <td>Row 2, Column 3</td>
  </tr>
</table>

Table layout

There are unfortunately still some “odd” things going around with tables in some browsers, so to make sure I added the border, cellpadding and cellspacing attributes to the table tags. However, like with anything else, you should provide layout to your tables by use of CSS in your stylesheet. Here are some examples:

table {
  border: 1px solid #000000;
}
th {
  background-color: #cccccc;
  font-weight: bold;
}
th, td {
  padding: 5px;
}

Tables are easy to use, and probably one of the most used elements of HTML. Today many tables are modified with Javascript to add effects such as sortable behavior etc. We will get back to that in a later part of this course

Every website looks a little different, but somehow they all still contain similar elements. Like a menu, a content area, a top banner (called header) and a bottom (called footer). These can be arranged and displayed in varuous ways, but mostly they are all there – somehow. In HTML there is the <div> tag which is suited to define and seperate such areas from each other. Combined with CSS styling, these <div> containers, as they are often called, can even be positioned to match the layout you want on your website. So let’s have a look at a sample <div> container structure (part3a.html of the project files):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<title>Test Page</title>
		<link rel="stylesheet" type="text/css" href="part3.css">
	</head>
	<body>
		<div id="container">
			<div id="header"></div>
			<div id="menu"></div>
			<div id="content"></div>
			<div id="footer"></div>
		</div>
	</body>
</html>

It’s not very complicated, and it provides a good structure for the page. There are many ways of organizing div’s. I like it simple, like in this example.

Full website

In the example file part3b.html there is even content added. Since you know all the used tags from previous parts of this course, I will not go through them again. If you are new, and not sure what everything means, please refer to parts 1 and 2 of the Servage Web Development Course. In part3.css I have re-used some of the CSS from part2.css, and added some styles for the new div containers, to properly position them with a top header, right-side menu, left-oriented content, and the footer at the bottom of the page. The tags are rather simple, and you can explore them in the sample file. Please note the use of the CSS styles for “position”, “top” and “right”.

The content of part3b.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<title>Test Page</title>
		<link rel="stylesheet" type="text/css" href="part3.css">
	</head>
	<body>
		<div id="container">
			<div id="header">
				<h1>My website</h1>
			</div>
			<div id="menu">
				<ul>
					<li><a href="">Menu item 1</a></li>
					<li><a href="">Menu item 2</a></li>
					<li><a href="">Menu item 3</a></li>
					<li><a href="">Menu item 4</a></li>
					<li><a href="">Menu item 5</a></li>
				</ul>
			</div>
			<div id="content">
				<div>
					<h2>Genome analysis changes diagnosis</h2>
					<p>Saturday, 24 October 2009 01:21 GMT</p>
					<p>
						A critically ill Turkish boy has had his life saved after scientists were
						able to read his genome quickly and work out that he had a wrong diagnosis.
					</p>
					<img src="part2.jpg" alt="Illustration of DNA" />
					<p>
						The scientists writing in the journal, Proceedings of the National Academy of Sciences,
						say they completed the analysis of his blood in just 10 days. They were able to see that
						he had a mutation on a gene that coded for a gut disease and tell his doctors. Clinical
						tests proved that the boy had the disease and he is now recovering.
					</p>
					<p>
						<strong>Simultaneous analysis</strong><br />
						Richard Lifton, of Yale University Medical School who co-ordinated the research with teams
						in Beirut and Turkey, said: "The boys physicians sent a blood sample - they only had a very
						broad diagnosis of what was happening to this five-month-old child and were suspicious that
						he had a genetic disorder affecting his kidneys. [...]
					</p>
					<p>
						<a href="http://www.bbc.co.uk/go/homepage/i/int/news/worldtop/5/-/news/1/hi/health/8315258.stm">Read the full article here.</a>
					</p>
				</div>
				<div>
					<h3>Other articles</h3>
					<ul>
						<li><a href="http://news.bbc.co.uk/2/hi/uk_news/england/cornwall/8323061.stm">Farmer gets two-in-one ducklings</a></li>
						<li><a href="http://news.bbc.co.uk/2/hi/uk_news/england/cornwall/8323765.stm">Five rescued after boat capsizes</a></li>
						<li><a href="http://news.bbc.co.uk/2/hi/europe/8323651.stm">German coalition agrees tax cut</a></li>
					</ul>
				</div>
			</div>
			<div id="footer">
				© 2009 by me and my friends.
			</div>
		</div>
	</body>
</html>

The content of part3.css

body {
	font-family: Arial, Verdana;
	font-size: 12px;
	text-align: center;
	margin: 0;
	padding: 0;
}
h1 {
	font-size: 20px;
	margin: 0;
}
h2 {
	font-size: 16px;
	margin: 0;
}
h3 {
	font-size: 16px;
	margin: 0;
}
p.date {
	font-size: 10px;
	color: #aaaaaa;
}
p.description {
	font-weight: bold;
}
.article img {
	float: right;
}
a {
	color: #990000;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
ul {
	list-style-type: square;
}

#container {
	width: 700px;
	margin: 0 auto 0 auto;
	text-align: left;
	position: relative;
}
#header {
	background-color: #990000;
	color: #ffffff;
	padding: 10px;
}
#menu {
	position: absolute;
	top: 45px;
	right: 0;
	width: 150px;
}
#content {
	width: 540px;
	margin-right: 160px;
	margin-top: 10px;
	padding: 5px;
}
#footer {
	font-size: 10px;
	color: #aaaaaa;
	border-top: 1px solid #990000;
	padding: 5px;
	margin-bottom: 30px;
}

Positioning in-depth

For in-depth understanding of CSS based positioning, I can recommend the following online resource. Please also have a look at the interesting floating principle and the box-model on the same page as linked above. These are some of the core CSS skills to master, to successfully handle div containers.

So, you want to have your own blog? There are many ways to accomplish that, and lots of tools out there to help you. I would like to present Wordpress to you, which is one of the most popular, and probably one of the best, blog applications available today. Wordpress can be installed on your Servage account with just a few clicks in the Autoinstaller, whereafter it is easy to further customize your blog with your own theme, plugins/addons etc. So if you want an own blog today, read on.

Installing Wordpress

1. Login to the Servage control panel and go to “Tools > Autoinstaller”.

2. Choose Wordpress blog, and follow the instructions of the Autoinstaller.

3. Please remember to write down your Wordpress login details, that are presented on the last screen of the Autoinstaller.

Using a custom theme

You can create your own theme (design) or use one of the many themes available online. For this example I have choose the template Arclite (http://wordpress.org/extend/themes/arclite). If you want a specific template for your blog, you can most likely find something among the thousands of templates on the net.

1. Upload the template to the folder /wp-conten/themes in your Wordpress directory on your Servage account.

2. Login to your Wordpress administration interface (the URL and login data was given to you in the last step of the Autoinstaller).

3. Go to “Appearance > Themes” in the menu bar and select to activate your custom theme.

Using plugins/add-ons

There are numerous plugins for Wordpress. Plugin/add-ons allow you to add/change the standard functionality of Wordpress to whatever fits your needs. Browsing the Internet you will find that there are hundreds, if not thousands, of plugins available, for statistics, comments, ratings, weather, polls, or whatever your mind can think of… Fortunately most of these plugins can be found and directly installed via the Wordpress administration interface. Go to “Plugins > Add plugin” to do so.

Writing your blog entries

Wordpress offers a very slick and nice interface for writing and managing your blog entries. You do no only have a nice versioning system for your text, but also a media manager (for images etc.) and the option to categorized your entries by categories and tags. And of course, for good interaction with your readers, you can allow comments to your content as well. If you are using Facebook or Twitter, you might even want to look into plugins that can send updates about your blog to those networks. Due to the generous plugin architecture of Wordpress, you really have a lot of options to extend your blog to become exactly what you want it to be.

There are sooo many web 2.0 apps out there, that it can be quite hard to find what you really need. When searching for a service or and application you can use or integrate in your project, I often find myself overwhelmed by a rather large amount of possibilities – of which many turn out not exactly being the right thing. Of course a large supply of web 2.0 apps, open source scripts, code snippets etc. is nice, but sometimes I find it gets to the point where the large availability of such solutions obfuscates the possibilities. It’s hard to get an exact overview of which service does what, and more importantly, what it does not do. I personally find, that briefly browsing through the individual projects websites is the most efficient way of getting a good overview of their features. However, there are so many results not leading to project sites when searching for “best CMS”, “paypal CakePHP module”, “AJAX star rating” or whatever else you might be currently looking for. Often you end up on discussion boards, mailing lists or something else, where people are discussing problems, support, development, but not digging the general overview of features you are really looking for. So wouldn’t it be great if the search engine could give you a list of project websites when searching for a specific term?

Unfortunately the search engines are not yet so far developed, that they know what exactly we want to achieve, when searching for a term. Therefore I have come to really like and enjoy browsing through Feedmyapp.com. Both on a daily or weekly basis I find it interesting to see what’s new out there, but also for finding a solution for a specific project, I find it a great resource to quickly gain an overview over, for example, available CMS systems.

Feedmyapp is not powered by a search engine or by random users submissions. Projects can submit their information to the editors of Feedmyapp, and they will check and publish the project afterwards. Thereby the database has a very high quality and relevance.

Have fun browsing the wast possibilities of modern web 2.0 apps – but be aware: It’s highly addictive

You can click here to submit your own project to Feedmyapp.

In this part you will learn how to format (style) web pages’ main content, such as text, paragraphs, lists, images and links. The formatting will be done with CSS, which was introduced in the first part of the Bbelek Web Development Course.

Just to recap: HTML (Hypertext Markup Language) is the language used for the content of your website. CSS (Cascaded Style Sheet) is the language used to describe the design of your content. It is important to remember that we strictly separate those two elements from each other. One of the main advantages of this, is that you can not only have different people working on content and design separately from each other, you can also completely switch layouts without having to change the content (by applying a new CSS file to the same HTML content). These advantages may seem a little abstract at the moment, so please just remember: No design stuff in the HTML file

Example of an HTML page with content

In the following code (part2.html) you will see a few new HTML tags compared to the first part of the course. First of all, we have added a so called Doctype declaration in the top of the HTML document. This is a technical instruction that states which version of the HTML language we are working with. In this case, we use XHTML 1.0 Strict. But don’t worry to much about this for now

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>Test Page</title>
    <link rel="stylesheet" type="text/css" href="part2.css">
  </head>
  <body>
    <div>
      <h1>Genome analysis changes diagnosis</h1>
      <p>Saturday, 24 October 2009 01:21 GMT</p>
      <p>
        A critically ill Turkish boy has had his life saved after scientists were
        able to read his genome quickly and work out that he had a wrong diagnosis.
      </p>
      <img src="part2.jpg" alt="Illustration of DNA" />
      <p>
        The scientists writing in the journal, Proceedings of the National Academy of Sciences,
        say they completed the analysis of his blood in just 10 days. They were able to see that
        he had a mutation on a gene that coded for a gut disease and tell his doctors. Clinical
        tests proved that the boy had the disease and he is now recovering.
      </p>
      <p>
        <strong>Simultaneous analysis</strong><br />
        Richard Lifton, of Yale University Medical School who co-ordinated the research with teams
        in Beirut and Turkey, said: "The boys physicians sent a blood sample - they only had a very
        broad diagnosis of what was happening to this five-month-old child and were suspicious that
        he had a genetic disorder affecting his kidneys. [...]
      </p>
      <p>
        <a href="http://www.bbc.co.uk/go/homepage/i/int/news/worldtop/5/-/news/1/hi/health/8315258.stm">Read the full article here.</a>
      </p>
    </div>
    <div>
      <h2>Other articles</h2>
      <ul>
        <li><a href="http://news.bbc.co.uk/2/hi/uk_news/england/cornwall/8323061.stm">Farmer gets two-in-one ducklings</a></li>
        <li><a href="http://news.bbc.co.uk/2/hi/uk_news/england/cornwall/8323765.stm">Five rescued after boat capsizes</a></li>
        <li><a href="http://news.bbc.co.uk/2/hi/europe/8323651.stm">German coalition agrees tax cut</a></li>
      </ul>
    </div>
  </body>
</html>

The significant HTML tags used for content in this part are…

<div> A “container” tag that is used for logical grouping of other tags. Think of it like a “box” in which you put related things. In our example we have collected all tags related to an article within a <div> container. In another <div> container we have included links to other articles.

<h1> means “Heading 1″, and is used for the biggest title on the page. Subsequent headings are then called <h2>, <h3> and so on, to denote their relative position in comparison to other headings. So you could for example have <h1>Chapter 1</h1>, <h2>Chapter 1, Part1</h2>, <h3> Chapter 1, Part 1, Subpart 1</h3>, <h1>Chapter 2</h1> and so on…

<p> is a paragraph (of text).

<img> is an image.

<a> is a link. In our example we use a text link, but it could also enclose an <img> tag, so the image would be the link.

<ul> Is a unordered list, with multiple <li> tags (list items).

Please note that we have assigned the “class” attribute to some of the tags, in order to distinguish them from other tags of the same kind. For example we have multiple <p> tags, so we have given them different classes (”date”, “description”). You are free to make up classes, and it is strongly recommended to make use of them, because it helps make the document structure more transparent, and is necessary for CSS-based-layout instructions.

There are many more HTML tags, and we will go through more during the next parts of the Servage Web Development Course. However, if you really want to get going or a little impatient, you can see here for a full list: http://www.w3schools.com/tags/default.asp

CSS styles

Create a part2.css file with the following content:

body {
  font-family: Arial, Verdana;
  font-size: 12px;
}
.article, .other_articles {
  width: 400px;
  border: 1px solid #cccccc;
  padding: 10px;
  margin: 10px;
}
h1 {
  font-size: 20px;
  margin: 0;
}
h2 {
  font-size: 16px;
  margin: 0;
}
p.date {
  font-size: 10px;
  color: #aaaaaa;
}
p.description {
  font-weight: bold;
}
.article img {
  float: right;
}
a {
  color: #990000;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
ul {
  list-style-type: square;
}

In this stylesheet I have added quite a few design instructions. There are a whole lot of possible instructions. You can find a comprehensive CSS reference here: http://www.w3schools.com/css/css_reference.asp

Please note how  I can target different “classes” by using a dot (.). This way we can give different instructions to for example <p class=”date”> and <p class”description”>.

I encourage you to play around with the HTML and CSS code, and use the above references for further tags and CSS styles you can apply.

In the next part of the Bbelek Web Development course we will go into further HTML tags and introduce more layout-oriented techniques, so we can create a website with a top (header), columns (menu and content) and a bottom (footer). Stay tuned