Wednesday, 5 October 2011

DITA Session 2



Things start getting clearer with the second dip into DITA. As it was known to many (I was not among those enlightened before Monday morning), the Internet and WWW are not the same thing, although the two terms are often used interchangeably.  
As it was explained during the lecture, WWW is a powerful and flexible service which operates on the Internet infrastructure.
The Internet divides computers into servers and clients. Clients send requests for information, interpret responses and display them in browsers. Server computers (much more powerful than clients) detect messages from clients, generate data which fulfil requests and send responses. At present the difference between server and client computers is fading, as the latter become more and more powerful.
Hypertext is a natural language text with linkages.
HTML is a mark up language which allows the use of hyperlinks.
Having no technical background doesn’t really help the learning process. However, it makes it more exciting!


Practical lab work.
The first task consisted of finding out the meaning of basic tags and the attributes that I can use with them.
  1. Paragraphs are marked by  <p> Paragraph </p> tag.This tag may have following attributes: <class>  with class name value, <align>  attribute may have right, left, center, justify values.
  2. Line break <br/>  is for a single line break, it is an empty tag meaning that there is no end tag. It can be used when writing the lines within limited space.
  3. Horizontal rules  <hr> are used to divide page content into sections. Attributes: class, dir, id.
  4. Tables <table>, <tr> table row, <th> table header where the element is centred and bold, <td> element is left-aligned.
          A table with two rows and two columns will look like this presented in HTML.
         <table border="1">
         <th>Month</th>
         <th> Number of students</th>
         <tr>
         </tr>
         <td> January</td>
         <td> 1228</td>
         </table>
          Attributes: align (to align content in the cell) – left, right, center, justify, char values
  1. Meta Information <meta name=””>  contains meta elements such as author, keywords, description, date last modified, copyright. These elements are used to describe an HTML document to a browser.                                                                             
  2. Unordered lists <ul> </ul> -bulleted or marked with other symbols.
  3. Ordered lists <ol type=””> <li></li> </ol>- numbered lists.
2.1 I’ve tried two HTML editors. One at home: Coffee Cup is a simple, user-friendly and well-organised editor. It was my first experience ever with HTML. After sweating for couple of hours, I managed to create an extremely basic HTML document.
The second editor I tried was EditPlus in the lab. I created three different HTML  files called first.html, index.html and myuni.html. If I understand correctly these will be three pages of my personal website. The index.html is a main file which works as a cover sheet for other HTML documents. I also managed to mutually link all three files with anchor tag.


2.2 The following task was to apply CSS to the HTML files. CSS are used to separate content and presentation. Each style sheet contains rules that determine the appearance of the elements in HTML documents (in simpler terms how it will look in the browser). Each rule has a selector, an element of an HTML document which is affected (i.e. H1, p, body) and the declaration in {color: red;}. The style sheet can be inserted into the HTML document directly with <style> tag or a link can be generated to a .css file within a <head> part of the document. Linking a style sheet to an HTML document makes it smaller and faster to download by browsers. It is to be remembered that an HTML document should remain presentable when opened without style sheets.  
I created my own style sheet which I called my myfirstcss.css
p {font-size: 20px; }
p {text-indent: 20px;}
h1 {font-size: 12px; font-weight: bold; color: ‘#ff0080; }  

body {font-family: arial; background-color:#Gray;}
I haven’t linked it to my HTML files yet.


2.3 In the last exercise I had to publish my HTML documents making them part of WWW.
This was achieved by copying all content of my session2 folder (HTML documents +images) to the City University Web Server. It happened so quickly that I am unsure how it really worked.
Reflections:
HTML is the language which defines how documents must be interpreted by a browser. Different browsers may interpret styles and mark-up elements in a slightly different way. CSS are extremely useful when applying a style to an HTML document. An HTML document is easier to write and read when its style is defined by a link to CSS. CSS may provide either consistency of style to all HTML documents of a web site or differentiate styles. It is also possible to apply specific CSS to the browser settings, instructing the browser what style to use when displaying a webpage for viewing.  This function is useful when adapting web pages for visually-impaired or colour-blind people.







No comments:

Post a Comment