Tag Archives: World Wide Web

Web development #2: Our first website using HTML

This is the second installment of a blog series about web development. You can find other blogs here:

  1. Web development #1: Internet and the World Wide Web
  2. Web development #2: Our first website using HTML
  3. Web development #3: Styling our page with CSS 3
  4. Web development #4: PHP in the back
  5. Web development #5: User input with HTML Forms
  6. Web development #6: Getting interactive with JavaScript
  7. Web development #7: Dynamic page updates with AJAX
  8. Web development #8: Where to go from here

At this point I presume you know a bit about the internet and the world wide web. If you don’t please read my previous blog first. In this part we’re going to take a look at HTML and create our first web page.

The history of HTML

HTML, which stands for HyperText Markup Language, was first presented in 1991 by Sir Tim Berners-Lee, “inventor” of the internet as we know it today and chairman of the World Wide Web Consortium (W3C). HTML was based on SGML (Standard Generalized Markup Language) and was supposed to be the standard language in which web pages would be built. A proper HTML document consists of elements which consist of tags, usually a start and end tag. For example, a header followed by a paragraph in HTML would look as follows:

<h1>This is a header.</h1>
<p>This is a paragraph.</p>

In this example you can see the descriptive (markup) nature of HTML. The tag <h1> indicates “this is where a header starts” and </h1> indicates “this is where a header ends”. The forward slash (/) denotes a closing tag. The entire <h1>This is a header.</h1> makes up an element in HTML. The same goes for the paragraph and the <p> tag.
It is important to note that elements can be nested, but that a nested element must be closed before the outer element is closed. In the following example I will demonstrate this. The identation is purely for readability, it is not actually part of HTML. I’ve also added a little comment. The <!– … –> denotes a comment and is ignored in the HTML, but visible for (human) readers.

<p>
   This is a paragraph.
   <h1>
      This is a header inside a paragraph
   <!--Close h1 before closing p-->
   </h1>
</p>

Whenever a client requests a web page from a web server the web server sends an HTML document. Web browsers, like Internet Explorer, FireFox and Chrome interpret these documents and show you the page (without tags).

In 1995 the HTML 2 standard was released by IETF, introducing new tags and concepts. Subsequent HTML versions (standards) were released by W3C exclusively. HTML 3.2 was released in january 1997 and HTML 4 in december 1997, adding and dropping tags and rules (for both writing and interpreting HTML).

In 2000, after version 4.01, came XHTML (Extensible HTML) which was based on XML rather than SGML. XML is actually a more restrictive subset of SGML and by using XML browsers were able to parse HTML as XML. XHTML was supposed to be a backward compatible XML version of HTML. With XHTML 2 the W3C wanted to make a clean start and break free from the past. Backward compatibility with HTML 4 and XHTML 1 was dropped. Because of the controversy this caused XHTML 2 never saw the light of day as a standard.

In 2008 a first draft version of HTML 5 appeared, building upon XHTML. Almost seven years later (and 14 days ago at the time of this writing) HTML 5 was released as the new standard! Although browsers and developers have been working with HTML 5 for a while now. HTML 5 introduces some new concepts. In this blog post I’m working with HTML 5 and I’m going to explain what makes HTML 5 different while we’re building our first web page.

I recommend you take a look at the HTML 5 standard. It contains a description of all elements and how to use them.

Browser incompatibilities

As said it is up to web browsers to interpret HTML and translate it into visuals on screen. Each browser does this a little differently. As such your HTML code may look different in different browsers. While most browsers nowadays follow the standard pretty well it’s important to check that your website looks okay in different browsers. It’s also one of the reasons you should typically update your browser when updates are available.
Especially Internet Explorer is notorious for being just a little different. Back in the 90’s, when the internet was still young, IE and Netscape were the two browsers you typically used. Of course both wanted to be better than the other. They started making up their own supported HTML tags like <blink> and <marquee> (yes, this was a time when blinking text was considered flashy and high-tech). Netscape disappeared and IE had to support older, non-standard HTML.

Getting started

So enough with those history lessons already! Let’s start creating our very own HTML document. Open up Notepad, type something, save it as “something.html”, open it from the location where you saved it and it will display your text in your default browser. Congrats, you’ve just created your very first web page. That was a bit of an anti-climax, right? While it works, after all you can see your typed text in your browser, creating a well formed HTML document is a bit harder than that (although creating an HTML document is actually that easy). So you can keep using Notepad or use a more sophisticated text editor. I prefer Notepad++, which even has some IntelliSense for HTML. There are other editors too, but I recommend you keep your editor simple while learning.

Now we’re heading somewhere

So, now that you have your editor in place let’s start by creating a real HTML document. First you’ll need to specify the type and version of HTML you’re using (we’ve seen there’s a few). We can do this by using the DOCTYPE tag. The version for HTML 5 has been drastically simplified. The following example illustrates this.

<!--HTML 5-->
<!DOCTYPE html>

<!--XHTML 1.1-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<!--HTML 4.01 Strict (not backward compatible)-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

After that we need some <html> tags (starting and ending tags) between which our document will be formed. A document consists of a header, which contains the title and possibly some metadata, and a body, which contains the content of our page. While your page is displayed perfectly fine when you place the header under the body, or when your header does not have a element, it is recommended to place your header above your body and put a title inside your header because that’s the W3C standard.

<!DOCTYPE html>
<html>
    <head>
        <title>Our first web page!</title>
    </head>
    <body>
        
    </body>
</html>

There’s more information you can put in your header, like links to other scripts (CSS, JavaScript…), but we’ll get to that in later blog posts. One thing that is important to mention is the <meta> element. The meta tag has a name attribute and a content attribute. Together they tell something about your page. Let’s look at an example and I think this will be clear. Notice that the <meta> tag has no ending tag.

<head>
    <title>Our first web page!</title>
    <meta charset="utf-8">
    <meta name="description" content="HTML tutorial on sanderrossel.wordpress.com">
    <meta name="keywords" content="HTML,XHTML,HTML 5,Web Development">
    <meta name="author" content="Sander Rossel">
</head>

The body of your document

Now let’s add some body to the document. We have already seen the <h1> and <p> elements. In HTML there are a couple of header tags, <h1> to <h6>. Suppose you have a header for your whole document, this would be h1. But in your document you want to have some additional headers, these would be h2. And any headers inside your h2 would be h3, etc. Again, this is not mandatory, it’s a recommendation. When a page shows more articles (like a blog home page) each article can, of couse, have a h1 header.

<body>
    <h1>Our first webpage!</h1>
        <p>HTML stands for HyperText Markup Language.</p>
        <h2>Important tags</h2>
            <p>Paragraphs are enclosed in &lt;p&gt; tags</p>
</body>

You may be wondering why &lt;p&gt; is looking so weird. Well, imagine that we said “<p>”, and a browser is going to read our HTML, it would think we started a new paragraph! So because the < and > symbols serve a purpose in HTML we can’t use these symbols in ‘regular’ text. Instead we use &lt; for the ‘lesser than’ symbol (<) and &gt; for the ‘greater than’ symbol. We must escape the ampersand symbol (&) and the quote (“) in a likewise manner (&amp; and &quot;).

At this point you may be satisfied with the content, but you may want to style it a bit. Perhaps give the header text another color, use a background, center it in the middle of the screen, etc. This is where HTML 5 is different from its predecessors. In HTML 5 we define no style whatsoever. We use elements only describe the text semantically. For example, we want to make “HyperText Markup Language” bold, because it’s important and we want to italicize “<p> tags” because it’s a technical term. For this we can use the <b>, <strong>, <i> or <em> (for emphasize) tags. Now in earlier versions of HTML the <b> tag meant bold and the <i> tag meant italic, but in HTML 5 they have a different meaning. <b> means we want to draw attention to this text without conveying extra importance. <strong> does convey this extra importance. <i> represents text in an alternative mood, but without emphasizing the importance of the text. <em> is used when you want to emphasize some text.
And that’s the big difference between HTML 5 and everything that came before. In HTML 5 we think of tags in terms of meaning (or semantics). What do we want to convey with this text, without thinking about the visual aspect. In this case I’m going with <b> and <i> because they fit the meaning of the words best (alternatively, I could’ve used <code> for the “<p> tags”).

<body>
    <h1>Our first webpage!</h1>
        <p>HTML stands for <b>HyperText Markup Language<b>.</p>
        <h2>Important tags</h2>
            <p>Paragraphs are enclosed in <i>&lt;p&gt; tags</i></p>
</body>

When you view this body in your browser you’ll probably see some style already. Your <h1> header is pretty large while your <h2> header is a bit smaller. Your <b> element is bold and your <i> element is italicized. This is just some default style, you can easily override it. If the elements fit your meaning, but the way your browser renders them doesn’t (maybe we wanted <b> elements to be red) still go for the elements that convey the right meaning.

There’s plenty of more elements that can help you give meaning to your document. For example there is <article>, <section>, <aside>, <footer>, <small>, <blockquote>, <code>, <abbr> (from abbreviation), <address> (for contact information), etc.

The <a> element represents a hyperlink. It can link to other websites, pages, or a specific place on your current page. The place you want to link to is specified by the href attribute. The text the user has to click on to be redirected comes between the starting and ending <a> tags. Often you’ll find something like: “For my awesome blog click here”, where “here” redirects you to the blog. Don’t be like that, make your linking text descriptive, for example: “You can read more on my awesome blog” where “awesome blog” redirects you to the blog. This is, again a recommendation from the W3C. Here’s a small example of the <a> element (including a target attribute):

<p>You can read all about web development on <a href="http://www.sanderrossel.wordpress.com" target="_blank">my awesome blog</a>!</p>

There’s one last element I wish to discuss, the <img> element. I want to discuss it mostly because we can learn two things from it. First, that we should really use HTML 5 for the meaning of our text, not our styling. And second why we should create our HTML document according to the W3C standards (in a later section).
First let’s look at how we use the <img> tag. Like the <meta> tag the <img> tag has no ending tag. It has one mandatory attribute, the src (source) attribute. Next to the src attribute it is recommended to provide an alt (alternative) attribute, which is used when the image cannot be loaded from the source. It is important that your image is a part of your text (it visualizes or supports your story). DO NOT use <img> to set your background! Again, that would be styling your document and in HTML 5 we are not styling! We’ll see an example in the next section.

Putting it all together

So let’s put all of what we have learned together in a single document. I have created a small HTML file with some elements. I recommend you study the code and read the actual output page.

<!DOCTYPE html>
<html>
    <head>
        <title>Our first web page!</title>
        <meta charset="utf-8">
        <meta name="description" content="HTML tutorial on sanderrossel.wordpress.com">
        <meta name="keywords" content="HTML,XHTML,HTML 5,Web Development">
        <meta name="author" content="Sander Rossel">
    </head>
    <body>
        <article>
            <h1>Our first webpage!</h1>
                <p><abbr title="HyperText Markup Language">HTML</abbr> stands for <b>HyperText Markup Language</b>.</p>
                <p>The language consists of <i>tags</i> that describe the content of a document.
                For example, a tag can indicate that a certain text belongs to a single paragrah,
                that certain text is more important, less important, that an image should be displayed, or that a new line must be inserted.</p>
                <p>A typical piece of HTML may look as follows:<br>
                <code>&lt;p&gt;This is a paragraph with &lt;strong&gt;important text&lt;/strong&gt;&lt;/p&gt;.</code></p>
                <p>Because the &lt; and &gt; symbols are used as part of HTML you'll need to use a special code to display them as plain text.<br>
                You can write them as &amp;lt; (lesser than) and &amp;gt; (greather than).</p>
            <aside>
                <h2>Important tags</h2>
                    <p>Paragraphs are enclosed in <i>&lt;p&gt; tags</i></p>
                    <p>HTML ignores line breaks. Instead we use the <i>&lt;br&gt; tag</i><br>
                    Like this!</p>
                    <p></p>
            </aside>
            <h2>More cool stuff</h2>
            <p>You can read all about web development on <a href="http://www.sanderrossel.wordpress.com" target="_blank">Sander's bits</a>!</p>
            <p>HTML 5 is awesome!<br>
            <img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_128.png" alt="The HTML 5 Logo" title="The HTML 5 Logo"></p>
        </article>
    </body>
</html>

You may want to use more or less elements than I did. Maybe you want to use <section> elements for the different parts, maybe you want more <abbr> elements (by the way, notice the tooltip on <abbr>?). Since HTML 5 is all about semantics (meaning) it’s a bit difficult to tell what is wrong and right. Do we want <strong> or <em>, do we need the <article> element and is it logical to have an <article> element inside an <article> element (or <section> inside a <section>)? It’s mostly up to you!

Why use standards

You might wonder why I’m going through so much trouble to get my HTML right. The <article> element doesn’t change the way my page looks, neither does the <aside> element. Why would I need an alt attribute in my <img> tag if I know the image is available? HTML is pretty forgiving, meaning that if you miss a starting or ending tag your page will probably be correctly displayed anyway.
However, if your HTML page is well formed, meaning your ending tags match your starting tags and all your ‘mandatory’ elements (such as <title> element in your <head> element) and attributes (such as alt attribute in the <img> tag) are in place, the chances that they are correctly displayed in any browser is bigger. In addition your page might load faster.
Search engines can better index your page if your document is well formed, meaning people might sooner find your page.
But what is perhaps most important, and probably something you didn’t think of, is that people with disabilities will have it a little easier to access your page. Someone who is blind cannot see your image, but some software can read the text in your alt attribute to the person. That’s also the reason you should not have “here” link to some page, but rather a description of that page, like “my awesome blog”!

How do you know if your document is well formed? The W3C has a validator that checks various inputs, The W3C Markup Validation Service. I suggest you use it.

We’ve seen a bit of HTML 5, but there’s much more. We might get to that in a later blog. For now we know enough to move on. In the next blog we’re going to add some style to the page we just created using CSS!

Stay tuned!

Web development #1: Internet and the World Wide Web

This is the first installment of a blog series about web development. You can find other blogs here:

  1. Web development #1: Internet and the World Wide Web
  2. Web development #2: Our first website using HTML
  3. Web development #3: Styling our page with CSS 3
  4. Web development #4: PHP in the back
  5. Web development #5: User input with HTML Forms
  6. Web development #6: Getting interactive with JavaScript
  7. Web development #7: Dynamic page updates with AJAX
  8. Web development #8: Where to go from here

For the past four years I’ve worked in VB.NET, C# and WinForms. Wanting to see more than just Microsoft and WinForms I applied for a new job and was hired. Hooray for me! Anyway, I’m starting januari and I’ve been told my first assignment would be to create a website using ASP.NET MVC and Knockout.js. So that’s great! Away from WinForms and into new territory. I can’t wait to start. I’ve never done serious web development though. Sure, I’ve seen some HTML, CSS and JavaScript, but that’s about it. Of course that’s something that can be easily fixed. So I’m starting a series on web development.
I’ve been looking into web development before and the first thing I noticed was that there’s a huge amount of protocols, languages and frameworks I supposedly need to know about. But where do I start? We have TCP/IP, HTTP(S), Apache, IIS, XML, HTML, CSS, JavaScript, AJAX, PHP, ASP.NET, ASP.NET MVC, Java, Ruby On Rails, Python, SQL, jQuery, AngularJS, Knockout.js, Node.js, Bootstrap, and there’s new stuff coming almost daily… It doesn’t seem to stop!
So in this post I want to start by explaining some of those technologies and why you do or do not need them (but might want to use them). In next blog posts we are actually going to use some of them.

Understanding the Internet

Do we need to know how the internet works to create beautiful, responsive web pages? Probably not, but knowing what the internet is, what is involved, and how it works on a high level can certainly help in giving you that egde you need to become a great web developer. So in this post I’m not going to show you code and we’re not going to create a web page, instead I’m going to explain, without too much detail, how the internet works.

In short the internet is a worldwide set of computer networks. It spans many technologies, like email, chat, file transfer and web pages. The World Wide Web (or www) is a set of web pages and sites that make up a (substantial) subset of the internet. In fact, the www is so big that the terms internet and www are often used interchangeably.

A little history

You may think that the internet is a phenomenon from the past 15 to 20 years, but the first version, called ARPANET (Advanced Research Projects Agency Network), goes as far back as the late 60’s! It was initially developed to connect universities and laboratories in the U.S. to make it easier to share data. You might be surprised that many of the idea’s and technologies that were founded back then are still present in the internet as we know it today! Some of those idea’s include: sending data between computers in packets, linked networks should still work if they’re not connected to other networks, computers can be added or removed dynamically, everyone should be able to create programs and devices to connect to it through a uniform interface (protocols), and last, but not least, there is no centralized control over the network.

Organizations

Those last two points seem to contradict each other, there is no centralized control, but we do want standardization and consistency throughout the internet by using protocols. There are actually some organizations that more or less regulate internet technologies. The Internet Engineering Task Force (IETF) creates specifications for internet protocols for the way information is exchanged on the internet. ICANN, the Internet Corporation for Assigned Numbers and Names, controls web site names. The World Wide Web Consortium, also known as W3C, creates recommendations for web standards for various web programming languages like HTML and CSS and how browsers should interpret those languages.
Additionally there is the ISO (International Organization for Standardization) that provides various standards, including many for IT.

Technologies

We now know a little about the internet and its history. But we still don’t know how it all works. In the next section we’re going to take a look at some technologies and how they work together to get data across the globe.

IP (Internet Protocol)

For now, try to think as the internet as old fashioned snail mail. A packet of data is send from point A to B. Like with regular mail a computer must know where to send a packet. In the real world we have addresses and zipcodes or postal codes (unfortunately we have no worldwide standard for this). Our computers have something similar, called an IP address (Internet Protocol address). An IP address consists of four bytes (that is 4×8 bits, making a total of 32 bits). One byte can make the numbers 0 to 255. A typical IP address could look something like 192.0.78.17 (that’s the IP of WordPress.com). Because 32 bits can ‘only’ have 429.496.7296 (232) unique addresses, and this proved to be insufficient, another IP protocol is available, consisting of a total of 128 bits (or eight groups of hexadecimal digits). The two versions of IP are also called IPv4 (32 bits) and IPv6 (128 bits).
A special IP address is the IP that a computer can use to connect to itself, 127.0.01, also known as localhost.

Now whenever you send data to another computer, let’s say a blog post, your data is cut into smaller packets. Those packets are then send to a computer with a unique IP address. A router is used to locate the computer with the specific IP address. Multiple routers typically work together  to get your packets to the other computer. All computers are ultimately connected to a router. That means your computer is not connected to the other computer, but you are connected through a long chain of routers.

TCP (Transmission Control Protocol)

We have seen that the IP protocol is essential in getting data from A to B. The IP protocol is quite minimal and doesn’t actually do much other than getting that data from A to B. If, for some reason, packets of data get lost, corrupted, duplicated or delayed we need more sophisticated protocols. One such protocol is TCP, or Transmission Control Protocol, also called TCP/IP because it makes use of the IP protocol.
TCP solves the problems I just mentioned. It does this by adding extra information to packets of data. With this information TCP can put packets back in the correct order (which is the order in which they were sent, not the order in which they are received) and it can detect errors and duplicates or missing packages and try to solve these problems. So in short TCP guarantees reliable and in-order delivery of data between computers.

Additionally, TCP associates each program or service with a unique number, making it possible for multiple programs to share the same computer and internet connection. This number is also called a port. Some common internet services have been given a standard port, such as 21 for file transfer (FTP), 25 and 110 for email (SMTP and POP3) and 80 for web (HTTP).

Other protocols run on top of IP too, like UDP (User Datagram Protocol), which is faster than TCP, but at the cost of reliability. I will not discuss any here.

The World Wide Web

So that’s the internet in a nutshell (a really very tiny nutshell…). That’s cool, but what we really want is to write web pages for the www! But before we get to that let’s take a closer look at how the www works.

The www is basically a worldwide set of documents formatted in a language called HTML (HyperText Markup Language), a form of XML (Extensible Markup Language). A web server is a computer that is running a special piece of software, like Apache or Microsoft’s Internet Information Services (IIS), that can serve these documents to clients (other computers). Users request these pages through web browsers like IE, Firefox and Chrome.

Domain Name System (DNS) and Uniform Resource Locators (URLs)

As we know each computer on the internet can be identified by IP. Yet, in our browser we type wordpress.com and not 192.0.78.17. We owe this convenience to the Domain Name System (DNS). The plain text name for a web server is called a domain name. Businesses and other users can buy domain names, which are managed by a known set of root DNS servers. So every time you type the name of a website the IP is fetched based on domain name and you can connect to the server using the IP address.
For a more comprehensive explanation of DNS I can recommend the following article: Domain Name System Explained.

The domain name becomes part of a larger text, known as a Uniform Resource Locator (URL). A URL starts with a protocol, then the host or domain name and finally a path to a file or document on the server. For example http://www.codeproject.com/Members/SanderRossel indicates that we are going to connect to the codeproject.com server using the HTTP (HyperText Transfer Protocol). On the server we want the folder Members/SanderRossel, which contains the default index.html document. When you type the URL in your browser window the result is that my CodeProject profile is displayed.
The www part of the URL is a convention and is completely optional (it’s not a standard).
The .com part is the top-level domain and roughly organizes websites by geography, type of organization or content. .com for commercial, .edu for educational, .nl for websites in the Netherlands, .fr for French websites, etc. The most popular top-level domain is, of course, .com (even for non-commercial websites, such as CodeProject!).
URLs can contain different information too, like the port to use and even a specific point on a document (also called an anchor).

HyperText Transfer Protocol (HTTP)

To request data from and to a web server another protocol is used, the HyperText Transfer Protocol. This is another layer on top of TCP. HTTP is a set of commands that a computer can send to a web client. These commands include, but are not limited to:

  • GET, for requesting a file from the server.
  • POST, for submitting form information to the server.
  • PUT, for uploading files to the server.

Whenever you request a webpage your browser send a GET message to the server, the server sends back the page and your browser displays it.

Along with the requested document comes a code, the HTTP status code, which indicates whether your request was successful. These status codes include, but are not limited to:

  • 200, OK.
  • 403, Forbidden to access a page.
  • 404, Page not found.

HTTP is a stateless protocol, which means there is no persistent connection between a client and a server. This is important when developing websites! The state of an application cannot be tracked on the server. I’ll get to that in later blog posts though.

You may have heard of HTTPS as well. The S stands for Secure (not Stateless!). I’m not discussing it here, but I thought I should mention it.

You can get a free ebook on HTTP from SyncFusion: HTTP Succinctly.

So what do we need?

So in the introduction of this blog post I mentioned some technologies. I have already explained some in this post. What others are we going to need for building websites?

I’ve already mentioned HTML, which is the main language to describe the contents of a website. In addition there’s CSS (Cascading Style Sheet) to supply stylistic information of a page. JavaScript can be used to make webpages interactive. To create dynamic pages you’ll need a language that generates HTML on a web server, like PHP, Java, Ruby On Rails, ASP.NET (C#), Python or others.
So there’s the good news. Basically you need to know only HTML to create the most basic of websites. To create a website that looks nice you need some CSS too. Add JavaScript to your stack and your webpage can be pretty sweet. And you probably want some server side language to actually present up-to-date information, like Java or ASP.NET.

All the others, jQuery, AngularJS, Knockout.js etc. are libraries (or files) in these languages. They are nice to have, and some are indispensable when solving specific problems, but they aren’t strictly necessary.

So we now have a basic understanding about the internet and the World Wide Web!
In the next blog post we are going to have a look at HTML and CSS, followed by JavaScript. After that we’ll take a look at generating HTML using a server side language.

Stay tuned!