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.
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:
<code>We are learning HTML and CSS so as to develop bioinformatics applications for the web</code>
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:
<meta name=”description” contents=”The description of the site here”>
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:
as compared for example with the HTML4.01 doctype declaration:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
The html Line
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:
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.
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:
After the Head section contents, the head tag is closed:
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
<code><title>Your page title here</title></code>
The title tag should be opened before the title text:
and then closed:
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.
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:
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:
Syntax Highlighting in Code Editors
It is worth noting how the code for our minimal page is shown in Komodo Edit
* 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.
You can also use the [[http://www.cellbiol.com/bioinformatics_web_development/tryiteditor?code=<%21DOCTYPE%20html>%0A<html%20lang%3D%22en%22>%0A<head>%20%20%0A%20%20<meta%20charset%3D%22UTF-8%22>%0A%20%20<title>My%20Title</title>%0A%20%20<meta%20name%3D%22description%22%20contents%3D%22The%20description%20of%20the%20site%20here%22>%0A</head>%0A<body>%0A%0A%20%20Hello%20World%21%0A%0A</body>%0A</html>|Tryit editor]] to practice with code editing without having to edit or upload documents.
Now that we have the basic structure of a page, we can start to learn about Text Markup with HTML.
- 3-1: Hosts, Domains and URLs
- 3-2: Uploading local files to a remote server
- 3-3: Code Text Editors
- 3-4: A minimal HTML page
- 3-5: Text Markup with HTML
- 3-6: Styling your webpages or website with CSS
- 3-7: CSS Basic Concepts
- 3-8: Introducing HTML5 footer, header, nav, article, section and aside elements
- 3-9: Styling common HTML tags with CSS
- 3-10: Website Page Layouts