User Tools

Site Tools


Sidebar

Chapter 1: Internet, Networks and TCP/IP

Chapter 2: The LINUX operating system - Setting up a Linux Web Server

Chapter 3: Your first webpage, Learning HTML and CSS

Chapter 4: Building Dynamic Websites with PHP in progress

Chapter 5: Web forms under construction

Chapter 6: Developing your first Bioinformatics web application under construction

Chapter 7: The PHP programming language: strings, arrays, functions, cycles, conditional statements, regular expressions under construction

Chapter 8: Sample Bioinformatics Web Applications under construction

chapter_3_-_your_first_webpage_-_learning_html_and_css:a_minimal_html_page

This is an old revision of the document!


3-4: A minimal HTML page

We will now assume that you are all set to publish your pages online:

  • You have a server online with an account, either an admin account or a normal user account
  • Maybe you don't have an account on an online server, but you have Linux and LAMP installed on your laptop, and you can develop locally and view your web site on localhost
  • You can create an empty page locally and upload it with FileZilla to your Document Root
  • You can connect to the server by SSH and create a file in your Document Root with the “touch” command or with nano
  • You can then edit the new files remotely by using Komodo, as explained in the previous section: first create a server in Komodo preferences, then open a remote file on this server with: File –> Open –> Remote file

In the exercise at the end of the previous section we have seen that putting a page with some text online is really easy: type the text in the page, give the page file name an html extension (test.html for example), upload the page to your Document Root, this is all is needed to get the page published.

However, the formatting of our text in the page will be quite basic. If we do not use any HTML, all the text in the page will be rendered, in the browser, on the same line. Newlines are ignored or rendered as a space.

The text/content of an HTML page is called the “source code” of the page, or just the “source”. The source of any web page can be seen by right-clicking on the page, in the browser, to show the contextual menus, and selecting the “View Page Source” option.

Figure 3-4-1: The "View Page Source" option in the browser's contextual menus

Let's consider the following source code:

We are learning
HTML and CSS
so as to develop bioinformatics applications for the web

If you copy and paste this text in a page and then view the page with your browser, you will see how newlines are ignored. Check it out. Here's what you get:

We are learning HTML and CSS so as to develop bioinformatics applications for the web

So indeed we could publish pages like this, with text only. No formatting, no links, no images, no layout, no colors. Just static text, all on one line.

This situation have some limits, as you see. In order to access all these formatting goodies, we really need to use some HTML.

For instance, concerning the example above, to introduce a line break, we could use a break tag <br>:

We are learning<br>
HTML and CSS<br>
so as to develop bioinformatics applications for the web

Check out that the code above will correctly render the lines and line breaks.

The minimal scaffold of an HTML5 web page

Before we get into the analysis of the most used HTML tags, we should start by saying that a correctly written “empty” HTML page is not really empty. It has some HTML code in it, that forms a light scaffold able to receive our contents and all the information associated with this contents, such as for instance the page Title, the page Description, the CSS styles information and more.

Let's see what a minimalistic HTML5 web page looks like. We will come back to HTML5 in more detail, for now let's just say it is the more recent “brand” of HTML, the one we'll use during this course.

All your web pages, either written manually or maybe outputted by a script, should respect this basic structure:

<!DOCTYPE html>
<html lang="en">
<head>  
  <meta charset="UTF-8">
  <title>My Title</title>
  <meta name="description" contents="The description of the site here">
</head>
<body>

  Hello World!

</body>
</html>

Let's see these lines, one by one. It is essential that you get familiar with this basic structure, as you will use it over and over, for each and every web page you will build in your life from now on (this is indeed serious staff).

Empty lines are simply ignored by the browser. However you can use them in your source code to make it more readable by humans (you for example).

The Doctype Line

This first line specifies that the document is an HTML document. It also specifies the HTML “brand” or version used in the document. The HTML5 doctype declaration is lightweight and easy to remember:

<!DOCTYPE html>

as compared for example with the HTML4.01 doctype declaration:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

The html Line

The

<html>

tag indicates that what follows is the actual HTML code of the page. See how this tag is closed at the end of the document:

</html>

Optionally, the html tag can contain a “lang” attribute (more on attributes later on). Set it's value (more on attributes values later on) to the actual language code that matches your contents.

<html lang="en">

in this last line:

  • “html” is the tag
  • “lang” is an attribute of the html tag
  • “en” is a value of the lang attribute of the html tag

See here how these different HTML elements are rendered in different colors when the code is viewed in a source code editor.

The Head Section

Then starts the Head section:

<head>

After the Head section contents, the head tag is closed:

</head>

The Head section can contain various information on the page, mostly invisible to the user (except the page Title, shown at the top of the browser window), such as Meta tags, CSS declaration and/or links to CSS style pages, Javascript code and/or links to javascipt code and more.

For now let's have a look at the Title and Meta tags, we'll be back to CSS and Javascript later in this chapter,

The Title Tag

The Title tag is used to set the page title. This is a very important piece of information as it tells search engines what your webpage is about. It is generally shown in the search engines results, linked to your web site URL. The Title is also shown

<title>Your page title here</title>

The title tag should be opened before the title text:

<title>

and then closed:

</title>

The Meta Tags

The Meta tag contains information about the page, that is not displayed to visitors, but rather used by the browsers and/or the search engines.

Meta tags are always located in the Head section.

A page can have several Meta tags

Your Head section will contain at least one Meta tag, for specifying the Charset (Characters Set) for the page, the kind of encoding for the characters in the page. We suggest you use the actual Unicode standard charset UTF-8.

<meta charset="UTF-8">

A Meta tag description, although optional, is also frequently included and provides a description of the web page contents. This description is sometimes displayed by search engines in the search results so it is worth including it for better search engines indexing of your web site. Although it is not strictly required, we have included a description line in our minimal page above.

The Body Section

After the Head tag is closed, the Body tag is opened:

<body>

The Body section contains the actual contents of your web page, those seen by the page visitors. For now we just have the usual Hello World greeting.

The Body tag is closed at the end of the page, right before the closure of the Html tag:

</body>
</html>

Syntax Highlighting in Code Editors

It is worth noting how the code for our minimal page is shown in Komodo Edit

Figure 3-4-2: Syntax highlighting in Komodo Edit

See how:

  • The Tags are in light blue
  • The Attributes are in purple
  • The Values are in dark blue
  • Normal text is in black

This makes HTML code very easy to read and manage in a specialized source code editor with respect to a generic text editor.

If you didn't already, write down your minimal HTML page and upload it to your server. Play with the Title and Break tags. Edit, save, reload and check, start to get familiar with the web development cycle.

Now that we have the basic structure of a page, we can start to learn about Text Markup with HTML.

Chapter Sections

Discussion

Enter your comment. Wiki syntax is allowed:
OHJUK
 
chapter_3_-_your_first_webpage_-_learning_html_and_css/a_minimal_html_page.1360806674.txt.gz · Last modified: 2013/02/13 20:51 by cellbiol