Editing the College Site
(Version: 1, Date: 07/12/2006)
This guide starts with a familiarization of few important HTML tags and then proceeds to the site editing part. You can do simple edits with the WYSIWYG editor that’s available in the site management system. You would need to use this guide only if you want to do more advanced changes like changing the selected tab etc. Wishing you all the very best. Have a good time.
HTML uses the <a> (anchor) tag to create a link to another document.
An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc.
The syntax of creating an anchor:
<a href="url">Text to be displayed</a>
The <a> tag is used to create an anchor to link from, the href attribute is used to address the document to link to, and the words between the open and close of the anchor tag will be displayed as a hyperlink.
This anchor defines a link to mec homepage:
<a href="http://www.mec.ac.in/">Mec Home</a>
HTML uses the <img> tag to put images into the page.
The syntax for putting image is
<img src=”url” height=x width=y>
The url is the location of the image. We can specify the height and width also as shown in the example.
Example:
<img src=”images/mypic.jpg” height=150 width=50>
There are two types of addressing that can be used to specify link location and also the image location namely relative and absolute
In relative addressing we specify the location of the file (or image) with respect to the current location.
If the file we are in which we are putting the link resides in a folder, the files in that folder can be accessed by just just specifying the name of the file
Eg: <a href=”assignment1.html” >Assignment 1</a>
Or <img src=”mypic.jpg” >
If we need to specify the file in a subfolder of the present folder we could do it by specifying the name of the subfolder and then the file name.
Eg. <a href=”assignments/assignment1.html”>Assigment 1</a>
Or <img src=”images/mypic.jpg”>
If we need to specify files in a parent directory (directory at a higher level) we can do by using two dots.
For example:
<a href=”../assigment1.html”>Assignment 1</a> (for one
level up)
<a href=”../../assignment1.html”>Assignment 1</a> (for two levels up)
Absolute addressing is done by specifying the complete path of the page or image we need to link to.
For example:
<a href=”http://www.mec.ac.in>MEC SITE</a>
Absolute addressing can also be used in another form. They symbol “/” in the beginning of the path specifies the root folder of the site
For example:
<a href=”/departments/index.html”>MEC SITE</a>
Suppose we are making such a link an any page in www.mec.ac.in site the about link would point to www.mec.ac.in/departments/index.html
The <p> tag in HTML is used to define paragraphs.
For example: the following text forms a paragraph
<p>Hi this is a paragraph </p>
The <strong> tag is used to specify text that needs to be in bold.
For example:
Hi this text is <strong>in bold </strong>
This would be displayed in browser as:
Hi this text is in bold
The <br> tag in HTML is used to specify a new line(Enter).
For example:
The line breaks <br> here.
This would be seen in the browser as
The line breaks
Here.
Ladder basically consists of the a tags. Ladder helps users to identify the current position in the website. The ladder can also be useful for the user to go back to higher levels in the website.
<!-- InstanceBeginEditable name="Ladder" -->
<a href="/index.html">Home</a>»
<a href="/departments/index.html">Departments</a>»
<a href="/departments/ec/index.html">Electronics & Engineering</a>»
<a href="/departments/ec/faculty.html">Faculty</a>»
My Page
<!-- InstanceEndEditable -->
</div>
The ladder would look like:
Home >> Departments >> Electronics & Engineering >> Faculty >> My Page
Please note that the » stands for the “>>” symbol. Also “My Page” needn’t be a link because that’s the page which we are presently viewing
The different tabs can be specified the <a> tag. Notice
that to specify the tab which appears to be selected in a page is specified by
changing the href attribute to class=”selected”
Below is an example: in the example below HOD will be the one which appears as selected.
<!-- Tabs -->
<!-- InstanceBeginEditable name="Tabs" -->
<div id="tabs">
<a href="index.html">About</a>
<a class="selected">HOD</a>
<a href="faculty.html">Faculty</a>
<a href="facilities.html">Facilities</a>
<a href="syllabus.html">Syllabus</a>
<a href="resources.html">Resources</a>
<a href="relations.html">Relations</a>
<a href="associations.html">Associations</a>
<a href="achievements.html">Achievements</a>
</div>
<!-- InstanceEndEditable -->
<!-- Tabs End -->
We just need to write the heading in between the two Begin and End lines.
<!-- InstanceBeginEditable name="Heading" -->
Department Of Electronics and Engineering
<!-- InstanceEndEditable -->
Here’s where we put all the main contents of the page. Below is a simple example.
<!-- InstanceBeginEditable name="MainContent" -->
<p> Model Engineering College, Thrikkakara is a premier institute of engineering that has carved a niche for itself in the field of technical</p>
<!-- InstanceEndEditable -->
This is the right column where we can put images or some news flash if necessary.
Example: for putting an image.
<!-- InstanceBeginEditable name="RightColumn" -->
<img src="images/mypic.jpg" width="175" height="215"/>
<!-- InstanceEndEditable -->