intro-web-development-building-websites-with-HTML
Coding - HTML

Introduction to Web Development – Building Websites with HTML

In this tutorial we will explore the basic techniques involved in website building. In the last part we learned some fundamental Web development concepts. Now we will look at the site building options and start creating pages in HTML markup code. You do not need to have any development or programming experience to complete this tutorial.

Managing Website Content

You can manage the content of a site without coding. For example, your Web host may provide a Content Management System such as WordPress, Joomla or Drupal. With a CMS, you access an interface through the Web browser in which you add pages, media items and other content to the site without having to worry about code. However, for full control over the content and function of your site, you do need to code the pages yourself.

Most Web hosts provide control panels you can also access through the Web browser, with login details provided by the host. A control panel lets you configure aspects of the site such as email addresses and user accounts as well as managing files and folders.

When you do code a site manually, in most cases you will use an FTP client to place your content online. With an FTP program, you can create files on your computer then upload them to your server. We will look at FTP in more detail later.

Building Pages in HTML

Even if you do end up using automated utilities such as CMS tools, it is well worth learning a little about HTML and Web development in general if you plan on being involved with websites in any role. To this end, the first technology you need to learn about is HTML (Hypertext Markup Language). HTML provides the fundamental building blocks of the Web.

In an HTML page, you include the text and media items (images, videos etc) that you want to appear in the page, all enclosed within markup structures. Markup structures tell the Web browser how to display the content items in the page. The following example code demonstrates a paragraph element:

<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat.
</p>

The paragraph includes some dummy text for demonstration. Notice the opening <p> and closing </p> tags. Together, the opening tag, paragraph content and closing tag make up a complete element. The tag name p tells the browser what sort of element it is dealing with, which determines how the browser presents the content to the visitor.

An element may also include attributes in its opening tag – these provide additional information:

<p class="description">
Paragraph text...
</p>

The class attribute can be used to group elements into categories – a common usage of this is to apply particular styling properties to a category of elements. In the above example, the page might contain a list of products, each with a paragraph element containing a product description.

Most elements have this structure (opening tag, content, closing tag), however some elements only include a single tag, such as the image element:

<img src="picture.jpg" alt="picture" />

This tag is self-closing as you can see from the forward slash at the end. It also includes a src attribute indicating the name of the image file to display.

HTML elements can contain text as you have seen, but they can also contain other elements:

<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat.
<img src="picture.jpg" alt="picture" />
</p>

Here the paragraph element contains some text and an image element. In this case the paragraph is referred to as the parent element and the image is a child element. Most pages contain multiple elements nested inside one another, which is why HTML is described as tree-structured.

Creating your First Page

You can create an HTML page in a text editor program such as Notepad, however it is easier if you use an editor that highlights the code in a way that makes it easier to work with. Free options include Notepad++ and Bluefish.

Let’s go ahead and create a page. In your chosen text editor, create a new file and save it with “.html” as the file extension, for example “page.html”. Enter the following outline:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!--page content-->
</body>
</html>

This is the basic structure of an HTML5 page. The page is contained within <html> tags, with a <head> element followed by a <body> element. The head section usually contains information about the page, such as a title, as well as styling code and sometimes scripting code. The body section holds the content of the page.

You can include many different element types in a page – start by adding a heading inside the body section:

<h1>My Page</h1>

Your page should now appear as follows:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!--page content-->
<h1>My Page</h1>
</body>
</html>

Save the file and open your page in a Web browser such as Firefox, Chrome or Internet Explorer – browse to the file in a file explorer on your computer, right-click it (or CTRL + click on Mac) and choose to open it in a browser of your choice. You should see the heading text.

website-building-page-browser

Each time you make a change to the page, open it again (or refresh it) in the browser to see the effect. In the head section (between <head> and </head>), add a title element and refresh the page:

<title>My Page</title>

website-building-page-title

The page title appears at the top of the window. Now try adding a link in the body section after the heading, inside a <div> element:

<div>
You can validate your Web page code using the 
<a href="http://validator.w3.org/">W3C Markup Validation Service</a>.
</div>

The <div> lets you divide the content of the page into sections. The link code is an HTML anchor. The link includes the destination page in the href attribute and the text that will appear to the user between the opening and closing anchor tags. Save the file and refresh the page again to see the link.

website-building-page-link

A host of HTML element types let you structure your page and include particular types of content. Try adding some more in the body section of your page – see the full list on the Mozilla Developer Network site and you can also reference our HTML cheat sheet.

Uploading

Once you have a page ready, you can upload it to your site. Your Web host should provide FTP details, including a username and password. You will need to download and install an FTP client: FileZilla, FireFTP, WinSCP and Cyberduck are all free. Once you have a client installed, start it up and make a connection to your site using your login details.

website-building-ftp

Most FTP clients use the same interface elements – an area for browsing the files on your computer and an area for browsing the files on your server. In the section for your server, locate the root directory, which is normally named “httpdocs” or “public_html”. Any files you place in this directory can be accessed at your site domain, using the following URL (Uniform Resource Locator) structure:


http://www.yourdomain.com/page.html

To put files on your site, select them on your computer in the FTP client and use the controls (often the right-click menu) to upload. The homepage for your site should be named “index”, for example “index.html”. If you give a page this name and place it in the root directory, it will be presented when someone types your domain name into their browser. Similarly, a file named “index.html” saved in a directory named “contact” in the root directory could be accessed as follows:


http://www.yourdomain.com/contact

To place a link to this section of the site from a page in the root directory, for example from the site homepage, you could use the following shorthand:

<a href="contact">Contact</a>

This link uses a relative path to refer to the index page in the “contact” sub-directory. To link to a different page in that directory, you could use the following:

<a href="contact/form.html">Contact Form</a>

A relative link specifies a location that is relative to the location of the page in which the anchor element appears. The following is an absolute path:

<a href="http://www.yourdomain.com/contact">Contact</a>

The absolute link is required when the link is on a different domain.

Browser Tips

While you are learning Web development you may wish to look at the code in sites you come across. In the Web browser, right-clicking and exploring the menus will let you see the page source, which is the markup code. You can also explore the code in a page using browser plugins for Web development such as Firebug.

Conclusion

In this tutorial we have learned how to create Web pages using HTML code. Spend some time experimenting by adding different elements and tags to your pages. Once you are comfortable with basic HTML, consider learning to style pages using CSS (Cascading Style Sheet) code and to add interactive functions using JavaScript.

About the author

I'm a developer and technical writer - see benormal.info for details. Follow me on Twitter @BrainDeadAir or email me at sue@benormal.info.

Share this post

Leave a Comment

Subscribe To Our Newsletter