Blogger Widgets

Sunday, 16 December 2012



      SMILE  ?
      this one?   

Link : Smile Image
        
= NOPE

what is it???

        Before this I only know what is molecular structure of chemistry which usually seen at the cover of chemistry’s books or examination sheet of paper, however, I don’t even know how to draw it. Do you know what, I think that is a simply way which draw it directly by hand with pen or pencil, oppss.... but how to make it using computer? And what is the system used to make the molecular structure? Luckily, I learn it in computer in science (KOS 1110) subject.....
Huhuhuhu, now I know the secret on how to make it using computer, by using ACD/ChemSketch Software and Simplified Molecular Input Line Entry System (SMILE), which is easier.

         First thing to do, you must have the ACD/ChemSkecth(Freeware) which you may download it at the internet. 

 The ACD/ChemSketch (Freeware) Software
Second thing to do, you also need the ACD/ChemSketch’s Tutorial (version 8.0 for Microsoft window) so that you will be able to draw the chemical structure and the graphical image professionally.




The ACD/ChemSketch Manual  pdf
The Structure Mode Screen























      SMILE  is stand for Simplified Molecular Input Line Entry System, a simple yet comprehensive chemical language in which molecules and reactions can be specified using ASCII characters representing atom and bond symbols which is widely used and it is computationally efficient. SMILE strings can be imported by most molecule editors for conversion back into two-dimensional drawing or three-dimensional models of the molecules.

     SMILES contains the same information as is found in an extended connection table but with several advantages.SMILES supports all elements in the periodic table. An atom is represented using its respective atomic symbol. Upper case letters refer to non-aromatic atom; lower case letters refer to aromatic atoms. If the atomic has more than one letter th second letter must be lower case.Besides, SMILES  used the hydrogen-suppressed molecular graphs (HSMG).

     On the other hand, in terms of a graph-based computational procedure, SMILES is a string obtained by printing the symbol nodes encountered in a depth-first tree traversal of a chemical graph. The chemical graph is first trimmed to remove hydrogen atoms and cycles are broken to turn it into a spanning tree, where, cycles have been broken, numeric suffix labels are included to indicate the connected nodes. Parentheses are used to indicate point of branching on the tree.


SMILES are divided into 2 term that are Conical SMILES term and Isomeric SMILES term. The differences between both of this may be seen as follow:



Canonical SMILES Isomeric SMILES

  • Rules for ensuring that each distinct chemical molecule has a single unique SMILES representation

  • Extensions to support the specification of isotopes, chirality and configuration about double bond


Application :
  1. Indexing
  2. Ensuring uniqueness of molecules in a database

Application :
  1. Allow rigorous partial specification of chirality


Bond are denoted as shown:

   
-
Single Bond
= Double Bond
# Triple Bond
* Aromatic Bond
. Disconnected Structure


Smile branches

·         Represented by enclosure in parentheses
  • Can be nested or stacked
  • Examples:
*      Fluoroform
*      C(F)(F)F or FC(F)F
*      Branches may be stacked.  


Smiles Atoms

          Use normal chemical symbols
          Add punctuation symbols if necessary
          No super- or subscripts


Smile bonds

  •         Single bonds are denoted by a dash, `-'. Single bond symbols and aromatic bond symbols (`:') may be omitted : Ethanol (C-C-O)

      
  •      Double bonds are denoted by an equals sign `=' : Carbon Dioxide (O=C=O)


  •        Triple bonds are denoted by a pound sign `#' : Hydrogen Cyanide (C#N)



Smiles Symbols

          String of alphanumeric characters and certain punctuation symbols
•          Terminates at the first space encountered when read left to right
•          The ORGANIC SUBSET:

                                              B, C, N, O, P, S, F, Cl, Br, I

Other Smiles Atoms


          Aliphatic or nonaromatic carbon:  C

                     1.     Cyclohexane: C1CCCCC1





            Atom in aromatic ring: lowercase letter
                   
                    2.      Benzene : c1ccccc1

                                                       

  Smiles Charge


          Specify attached hydrogens and charges in square brackets
          Number of attached hydrogens is the symbol H followed by optional digit
          Example
  1.          Proton [H+]




           2.    Ammonium Ion [NH4+]


  

     Cyclic Structures


          Numbers indicate start and stop of ring
          Same number indicates start and end of the ring, entered immediately following the start/end atoms
          Only numbers 1 – 9 are used
          A number should appear only twice
          Atom can be associated w. 2 consecutive numbers, e.g.,  Napthalene : c12ccccc1cccc2


     Further Restriction

         A branch cannot begin a SMILES notation
         A branch cannot immediately follow a double- or triple-bond symbol
         Example: C=(CC)C is invalid, but
         C(=CC)C or C(CC)=C are valid SMILES


    Smiles Fragment

  1.     Nitro > N(=O)(=O)
  2.     Nitrate > ON(=O)(=O)
  3.     cyanide > C#N
  4.     Azide > N=N#N

    Isomeric and Chiral Smiles

          Isomeric configuration indicated by forward and backward slashes: /  \
          Examples:
        trans-difluoroethene:  F/C=C/F

          The F's are on "opposite sides" of the double bond


                    –        cis-difluoroethene: cis-difluoroethene

                                    .   The F's are on the "same side" of the double bond




                     Chirality indicated by the “@” symbol
               •       Example : L-alanine >  N[C@@H](C)C(=O)O


 

   An application for SMILE


  •      JMDraw/SMILESViewer (Christoph Steinbeck)
  •          JME Molecular Editor (Peter Ertl)
  •          STN Express (SMILES as output)
  •         Tripos (dbtranslate: SMILES to MOL)
  •       Marvin (Ferenc Csizmadia)
  •        http://chemaxon.com/marvin/
  •       CACTVS http://www2.ccc.uni-erlangen.de/cactvs/
  •      SMILESCAS Database
  •      http://www.syrres.com/esc/smilecas.htm
  •     Over 103,000 SMILES notations
  •       Input CAS Registry Number
  •       Leads to SMILES and thence to a structure search

        

       Here are some exercises that we did :)



























Tuesday, 9 October 2012

HTML


INTRODUCTION..!

What is HTML?

HTML is a language for describing web pages.

  • HTML stands for Hyper Text Markup Language
  • HTML is a markup language
  • A markup language is a set of markup tags
  • The tags describes document content
  • HTML documents contain HTML tags and plain text
  • HTML documents are also called web pages

HTML Tags

HTML markup tags are usually called HTML tags
  • HTML tags are keywords (tag names) surrounded by angle brackets like <html>
  • HTML tags normally come in pairs like <b> and </b>
  • The first tag in a pair is the start tag, the second tag is the end tag
  • The end tag is written like the start tag, with a forward slash before the tag name
  • Start and end tags are also called opening tags and closing tags

Example:<tagname>content</tagname>

HTML Elements


"HTML tags" and "HTML elements" are often used to describe the same thing.But strictly speaking, an HTML element is everything between the start tag and the end tag, including the tags:HTML Element:

Example:<p>This is a paragraph.</p>




The world Wide Web

Definations

   -The World Wide Web
       >The set of computers on the Internet that support HTTP.
       >Not a separate network

   -HTTP
     >The HyperText Transfer Protocol
     >The language used by a WWW Client to request documents from a WWW server.

   -HTML
     >The HyperText Markup Language
     >The language used to design web pages

Main HTML Elements 

1.DOCTOTYPE

   -Refers to the rules for the markup the language
   -Browsers render the content correctly

2.HTML

   -Defines the whole HTML documents

3.HEAD

-TITLE element required
-Title in the browser toolbar, title for the page when its added to favourites and search-engine oages

 -Optional elements
     -Base- default address/target for all links on a page
     -META- defines metadata about an HTML document
     -SCRIPT,NONSCRIPT- define a client-side script(JavaScript)
     -STYLE- to define style information for an HTML documents
     -LINK- defines the relationship between a document and an external 
               resources 

Example.:

Text-Level Elements

The Text-Level Elements can be divided into 3:

  1. Physical Character Styles
  2. Logical Character Styles
  3. Hypertext Links

Physical Character Styles

Physical character styles are included of font(it size,colour and face),base font and size.For an example, in html format <b>,<i>,<tt>,<u>,<sub>,<small>,<strike> and etc.


Logical Character Styles


The example of logical character styles that usually being used in html format are:
<em>,<strong>,<code>,<samp>,<kbd>,<dfn>,<var>,<cite>


Hypertext Styles (Hypertext Links)



  • A - For an example: <href>,<name>,<target>
  • IMG- For an example: <src>(required),<alt>,<align>,<width>,<height>,<hspace>,<boarder>
  • Misc.Text-Level Elements - For an example: BR(Explicit line Break), AREA (Client-side image maps), APPLET (Java)

You may type all of it on the notepad which then being save as html format,that is .html which allow you to open and read it online. The steps are shown as follow:


First step:



Write html on Notepad


Second step:


Save as html (Text-level Element.html)





Third step: 


The result of html (Test-level element)



Hypertext Links

Link can contain an images and other text-level element.

  • Link to Absolute URL- Complete URL beginning with http://
  • Link to Relative URL - Use a filename or relative path to file name
  • Links to Section - Use a section name preceded by #
  • Link to Section in URL -Use relative or absolute URL,then #,then section name

Naming a SECTION

-Use <A Name="....." and do not include the pound sign


IMG : Embedding Images

The IMG allow picture or an image to be upload in the html text.
For an example : <img src="SomeFile.gif" alt="My Cat" width ="400" height="300"


IMG -The Image Embedded step

Table Element Attributes

The are a lot of table element attributes that are align,boarder, cell spacing, cell padding,width, BG colour,bordercolor,bordercolordark,bordercolorlight,background, rules and frames.

THE TABLE ELEMENT ATTRIBUTES ITS SPECIFICATIONS


Element Attributes Specifications
ALIGN
  • It gives the horizontal alignment of the table as whole
  • Legal values are LEFT,RIGHT and CENTER with LEFT being the default
BORDER
  • This specifies the width in pixels of the boarder around the table
  • This is in addition to the boarder around each cell (the CELLSPACING)
CELLSPACING
  • This gives the space in the pixel between adjacent cells.Drawn as a 3D if BORDER is nonzero,otherwise empty space in the background color is used
  • The default is usually about 3
CELLPADDING
  • Determines the empty space,in pixels,between the cell's boarder and the table element
  • The default is usually about 1
WIDTH
  • This specifies the width of the table,either in pixels (<TABLE WIDTH=250>) or as a percentage of the current browser window width (<TABLE WIDTH="75%">)
BGCOLOR
  • Specify the background color of the TABLE
BORDERCOLOR,
BORDERCOLORDARK,
BORDERCOLORLIGHT
  • Non standard attributes supported by IE to specify the colors to user for the borders
BACKGROUND
  • This nonstandard attribute supported by IE gives an image file that will be tiled as the background of the table
RULES
  • HTML 4.0 attribute that specifies which inner dividing lines are drawn
  • All are drawn if this attributes is omitted
  • Legal values are NONE,ROWS COLS and ALL
FRAMES
  • Specifies which outer boarder are drawn 
  • All four are drawn if this attribute is omitted
  • Legal values are BORDER or BOX (all), VOID(none), ABOVE(top), BELOW(bottom), HSIDES(top and bottom,despite the somewhat confusing name), VSIDES (left and right),LHS (left) and RHS (right)


The example:

Table Attribute - align (deprecated)

This table is right aligned
Text flows around it to the left
This is text that is flowing around the table.

Table Attribute - border

This is a border with a 1px border.
And here is the second example:
And this table has a border of 10.

Table Attribute - cellspacing
This table has a cellspacing of 20.
Cells will be separated by 20 pixels.

Table Attribute - cellpadding
This table has a cellpadding of 20.
Cells will be separated by 20 pixels.

Table Attribute - rules
This 4x4 table hasthe rows not columns
outlined with therules attribute.
the more rowsthere are
the more rules there are
And here is an example with the columns highlighted:
This isa tablewhere the
columnsarehighlighted
nottherows

Table Attribute - frame

This tablewill have
only theleft side framed.
And another example
This table has a frame on the bottom.




The Table Elements Attributes Descriptions & Differences Between HTML 4.01 AND HTML 5


AttributeValueDescription
alignleft
center
right
Not supported in HTML5. Deprecated in HTML 4.01.Specifies the alignment of a table according to surrounding text
bgcolorrgb(x,x,x)
#xxxxxx
colorname
Not supported in HTML5. Deprecated in HTML 4.01.Specifies the background color for a table
border1
""
Specifies whether the table cells should have borders or not
cellpaddingpixelsNot supported in HTML5. Specifies the space between the cell wall and the cell content
cellspacingpixelsNot supported in HTML5. Specifies the space between cells
framevoid
above
below
hsides
lhs
rhs
vsides
box
border
Not supported in HTML5. Specifies which parts of the outside borders that should be visible
rulesnone
groups
rows
cols
all
Not supported in HTML5. Specifies which parts of the inside borders that should be visible
summarytextNot supported in HTML5. Specifies a summary of the content of a table
widthpixels
%
Not supported in HTML5. Specifies the width of a table


HERE!! There is an exercise for you..do you able to do it???
Do exactly like this:

Table example (exercise)