Template Arrangement, Carriers in IT & setting git Url - Day 14

Today we arrange this template... The codings were given to order them and show be like this. We did using our HTML, CSS , Bootstrap knowledge got in last 13 days..

This is the Github link of the coding for template

Carriers in IT

By Studying in IT we can get the following main professional works in ITcompany

• Backend Engineer
• Frontend Engineer
• UI/UX Engineer
• Tech-writer
• Business Analysist
• QA Engineer

 IT Careers in Sri Lanka

IT is a fastest growing field in the world. In Srilanka many foreign companies  and government itself take forward steps to grow the IT field in Sri Lanka.

ICT Services Offered in Sri Lanka

• Business Intelligence
• Business Solutions and MIS
• CAD / CAM / CAE
• Client-Server Architecture
• Cloud Services
• CRM
• Customer Support (Email/Voice/Chat)
• Data Mining & Processing
• Database Solutions
• e-Business Development
• ERP Software
• GPS Solutions
• GUI Designing
• Hardware Design
• Healthcare Solutions
• ICT Infrastructure & Services
• ICT Outsourcing
• Image Processing & Truncation
• Internet Research and Content Management
• Intranet and Extranet Application
• IoT
• IT Education & Training
• Mobile Application Development
• Multimedia
• Networking
• Office Automation
• Payments Processor
• Real-Time System
• Remote IT Technical Support
• Self-Service Solutions
• Software Development
• Software Engineering Services
• Software Testing
• Systems Integration
• Virtual & Wireless Banking
• Web Development
• Web Marketing
• Wireless & Mobility Solution

So, much of works in IT field of Sri Lanka.

Git Commands....

When we are going to install a github repository from Github
We have to use the following in Terminal

$ git clone URL_you_going_to_clone

after that you finished all your project... Then you have to push the new updated file to your repository. But the repository may changed to the account where you clone the file.

You can make sure whether the repository changed or not by using following command

$ git remote -v


So you have to change the remote origin to your account.

$ git remote set-url origin https://github.com/USERNAME/REPOSITORY.git

Then once again check the repository direction...

$ git remote -v

after that the following command will appear......

$ origin https://github.com/USERNAME/REPOSITORY.git (fetch) origin 

$ https://github.com/USERNAME/REPOSITORY.git (push)

That's all now, you can push your files in your repository.

Intro to Bootstrap & Creative Commons - Day 12

Introduction to Bootstrap & Creative Commons License

Bootstrap contains many HTML, CSS and JavaScript frameworks to do web development very fast. Its used to develop responsive website for both desktop and mobile.

Responsive Design means that adjust automatically for good looking website in all devices according to their height and width.

Bootstrap was developed by Mark Otto and Jacob Thornton in Twitter. In 2011 they published Bootstrap as open source project in Github.

Advantages of Bootstrap

Easy to use : The already wrote codings will help to build up a good looking site. Anybody with basic knowledge in HTML and CSS can do with Bootstrap.

Responsive Site: For both mobile and desktop we can build a responsive site.

Mobile-first approach : Nowadays usage of mobile devices usage arise to high level so building a mobile responsive site for users to access is become very important. So, Bootstrap 3 offers a great mobile responsive designs to developers.

Supports to Browsers: Browsers are the software which shoes webpages to users. Mostly all browsers support to Bootstrap design.

We can get Bootstrap in 2 ways..

1. Download Bootstrap from getbootstrap.com
2. Bootstrap from CDN (Content Delivery Network)

 Download Bootstrap
Bootstrap is available for Off line.  By downloading Bootstrap we can do our designs and host by ourself.

Bootstrap from CDN
If we don't want to download and host by ourself we can include it from CDN.
CDN support for Bootstrap's CSS and JAvascript. You have to include jQuery also.

E.g:
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Here, link tag is the only Bootstrap code.
Other 2 tags link the JavaScript.

Advantage of CDN : CDN will help to load the website very speed. To load website the nearer server of requested user's place will provide Bootstrap from it and load speedily.

Creative Common License

Its a type of copyright license  of an author right to share,use and build upon a work that they have created.
This has several type of license.

Attribution : This is kind of license offered by creator for user to copy, distribute and make derivate of his work but the user should mention the author's name.

Share-alike (SA): Licensees may distribute derivative works only under a license identical ("not more restrictive") to the license that governs the original work. Without share-alike, derivative works might be sub licensed with compatible but more restrictive license clauses.

Non-commercial: Users can copy, distribute, display and perform derivative only if it is a non-commercial work. No one sell it or buy it.

No Derivative Works : Users can copy, distribute and cannot perform any derivatives. He should keep all as original.

License Types..

Free to use globally without any restrictions.

Attribution, Non-commercial and No Derivatives.

Attribution, Non Commercial and Share alike

Attribution and Non-commercial

Attribution and No-derivatives

Attribution and Share alike

Attribution Only. ( Author's name)

Uki2 Class 11 - Div,Id and Class Discussion & CSS Exercise

Id Class and Div

In CSS Id, Class and Div different kind of attributes are found. When writing CSS
we denote # before a word is to indicate that is an ID
and . to indicate that it is class.

The div tag is used to divide up the page into sections, for organizational purposes and to help you style sections of the page differently. Class and ID are attributes that you can apply to different elements, including div elements, so you can select them with CSS to apply styles that you specify for that class or ID.
Use ID if there's only one element on your page that's going to be styled a certain way (there should only be one element corresponding to each ID that you use) and use class if you want to apply the same styles to multiple elements.

IDs - can only be used once within the page and help pinpoint a specific item,
IDs can be targeted using things like CSS or Javascript, and can be used
on any item you wish to target.

ID's are unique
Each element can have only one ID
Each page can have only one element with that ID

Class - can be used over and over to target parts of your page,
Classes are NOT unique
You can use the same class on multiple elements.
You can use multiple classes on the same element.

We did an exercise to create a site with multiple HTML, CSS coding...

HTML Quiz

1)Who introduced HTML?
Tim Berners Lee

2) how to add paragraph color in HTML?
<p style="color:red">I am a paragraph</p>

3) How to add heading font size in html?
<h1 style="font-size:60px;">Heading 1</h1>

4) how to add horizontal rule in HTML?<hr>

5) Why use <br> tag in HTML?
Line break

6) Why use <pre> Tag in Html?

7) How to add body background color in HTML?
<body style="background-color:powderblue;">

8) how to add font in html?
<h1 style="font-family:verdana;">This is a heading</h1>

9) how to add text alignment in html?
<h1 style="text-align:center;">Centered Heading</h1>

11) Tags’ function?
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Small text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text

12) how to write comment in html?
<!-- Write your comments here →→

13) why we use comments in html?
Developers easy to understand what they have written

14) <h1 style="border:2px solid Tomato;">Hello World</h1>
What is output?

Hello World

15) how to add link html?
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>

16) why we use <th> tag in html?
Table Header - Used to write Table Headings

17) what is different between an order list and an unordered list?
Order list are in Numbers like 1,2,3 or Roman Letters or a,b,c letters..
Unorder list are some shapes like disc,circle and square.

18) how to write an order list in html?
<ol>
<li> List </li>
</ol>

19) how to write an unordered list in html?
<ul>
<li> List</li>
</ul>

20) why use <marquee> tag?
To move Text right and left or bottom to top.

21) how to add video in html ?
<video> tag
<embedded> tag

22) how to insert text box in html from?
  <input type="text" name="firstname"><br>

23) how to inser redio button in html from?
<input type="radio" name="gender" value="male" checked> Male<br>

24) how to add submit button in html from?
  <input type="submit" value="Submit">

25) <fieldset> <legend> why we use these tags?
To limit the form using lines

26) how to create drop-down list n html?
<select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

27) what is different for textbox and textarea?
Text area we can write so many characters,... but textbox has limited characters

28) how to write textarea in html?
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

29) how add password in html?
<input type="password" name="psw">

30) why use reset button and how write reset button?
  <input type="reset">

31) how to ADD checkbox in html?
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>

32)  What HTML Stands for?
Hyper Text Markup Language

33) How to define a link in HTML?
<a href="URL">Url Description </a>

34) How to define a image in HTML?
<img src="IMG URL">

35)  What are Block Elements? Give some examples?
Block elements which cannot be write in a tag. They have to be written in a new tag.
<pre>, <div>

36) Give some examples to Inline Elements?
<a>  <p> <h1>

37) What are the ways we use, to save HTML Documents?

• .html
• .hml

38) What is a web browser?
Web browser is a software used to browse web pages.

39) What is a tag?
An element between < and > symbols are Tags.
Eg: <b> , <p> , <h1>

40)  What is an element?
element is a text used inside a tag.

41) What CSS Stands for?
Cascading Style Sheet

42) The function of “pre” tag?
Pre tag will show  in the webpage as what is written on html code... With same spacing and shapes and design

43)How many heading tags are there?

h1, h2 , h3 , h4, h5, h6

Uki2 Class 10 + Git Commands

10th day @ Uki....

We did the continuity of Time Table coding and then practiced in Github to push our coding to Github site.

Github

Github is an online storage repository used by developers to push their coding/ programming source codes to edit it wherever or which device platform in this world. Its very useful to handle the source code. The following are the steps to push the files to online github repository in Ubuntu OS.

 1 Installing Git for Linux

We have to open the Terminal in Ubuntu and type the following..

sudo apt-get install git

2 Configuring GitHub

After the installation we have to configure our Github account to create an online repository in Github site.

 git config --global user.name "user_name"

git config --global user.email "email_id"

we have to enter our Github user name in user_name place and then type our e-mail address in the place of email_id.

3 Creating a local repository

Then we have to create a local folder that is repository in Online cloud storing folder which will be pushed to Github later.

git init

If the process is success we will receive 

Initialized empty Git repository in /home/akshay/html/.git/

Note: This command should be typed in the folder where your coding folders which are going to be pushed are saved.

4 Adding repository files to an index

Next, we have to add the files to the repository.

git add index.html

here index.html is a file's which is going to be pushed.

You can add whole files in the folder using 

 git add . or git add *

6 Committing changes made to the index

After we add files... we have to commit that the files to be uploaded are finalized and ready to push.

 git commit -m "some_message"

"some_message" is user's description. You have to replace it with your description.

7 Creating a repository on GitHub

 Notice that the name of the repository should be the same as the repository's on the local system. 

That is your folder's name and github's repository names should be the same.

To do this login to your account on https://github.com. Then click on the "plus(+)" symbol at the top right corner of the page and select "create new repository".  

Then you have to type the folder's name in the first form...

Then click  "create repository" button.

Once this is created, we can push the contents of the local repository onto the GitHub repository inside the profile.

Then type this command and replace the link with your repository URL

git remote add origin https://github.com/user_name/html.git

8 Pushing files in local repository to GitHub repository

The last step is to push the local repository files into the GitHub, using the following command:

git push -u origin master

Then you have to enter your user name of github and password...

After that your repository is created on Github...

9 To Clone an Existing Repository

If you want a working copy of your repository on another machine

git clone https://github.com/user_name/repo_name.git  

10 To pull changes from Github Repository

git pull

Uki2 Class 9 - Time Table Exercise

Hi, Today we designed our Uki timetable using HTML and Css...

Output of the coding is given below.

The HTML coding is below..

<!Doctype html>

<html>
<head>
<link rel="stylesheet" type="text/css" href="table.css">   { /* Linking External CSS file to HTML                                                                                                                           document */ }
 
 <title>
    Uki2 Time Table
  </title>

</head>

<body>
  
<div width="100%"> 

<table>           { Table Tag }

   <tr>                     {1 st Row }
    <th class="day">
Time Slot
</th>

    <th class="day">
Monday
</th>

    <th class="day">
Tuesday
</th>

    <th class="day">
Wednesday
</th>

    <th class="day">
Thursday
</th>

    <th class="day">
Friday
</th>

</tr>

<tr>                                {2nd Row }
    <td class="time">
9-9.30
</td>

    <td class="yoga">
Yoga and Meditation
</td>

    <td class="pcoach" rowspan="2">
Personal Coaching 9.15 to 11.15
</td>

    <td class="yoga"">
Yoga and Meditation
</td>

    <td class="yoga">
Yoga and Meditation
</td>

    <td class="pcoach" rowspan="2">
Personal Coaching 9.15 to 11.15
</td>
</tr>

<tr>                    [ 3 rd Row ]
    <td class="time">
9.30-10
</td>

    <td class="yoga">
Touchtyping and Blogging
</td>
    <td class="eng" rowspan="2" colspan="2">
English -BC Elementary
</td>

</tr>

<tr>                             [ 4 th Row ]
    <td rowspan=""  class="time">            
  10-12
</td>

    <td rowspan="" class="pro">
   Programming Theory
</td>

    <td rowspan="" class="yoga">
  Personal Coaching/Touchtyping and Blogging
</td> 

    <td rowspan="" class="yoga">
    Personal Coaching/Touchtyping and Blogging
</td>
</tr>

<tr>                 [ 5 th Row ]
    <td class="time">
12-1
</td>

     <td class="green" colspan="5" style="text-align:center">Lunch Break - Carrom, Badminton </td>
</tr>

<tr>               [6 th Row ]
    <td class="time">
1-2
</td>

    <td class="pro">
 Programming Practicals
</td>

    <td class="pro">
Programming Theory
</td>

    <td class="pro">
Programming Theory
</td>

    <td class="pro">
Programming Theory
</td>

    <td class="pro">
Programming Theory
</td>
</tr>

<tr>                             [ 7 th Row ]
    <td  class="time">
2-4
  </td>
  
    <td  class="pro">
Programming Practicals Project
  </td>
 
    <td  class="pro">
Programming Practicals Project
  </td>
  
    <td  class="pro">
Programming Practicals Project
  </td>
 
    <td  class="pro">
Programming Practicals Project
  </td>
 
    <td  class="pro">
Programming Practicals Project
  </td>
</tr>

<tr>           [ 8th Row ]
    <td class="time">4.15-5</td>
    <td class="green" style="text-align:center" colspan="5">Tea Break</td>
  </tr>

<tr>
    <td class="time">
    4.15-5
  </td>
     <td class="other">
Tech Talk
  </td>
    <td class="red">
Toastmasters Gavel Club
  </td>
    <td class="other">
Team Building
  </td>
    <td class="other">
Team outing / Tech Movie
  </td>
    <td class="red">
Toastmasters Gavel Club
  </td>
</tr>

</table>                    [ END OF Table Tag  ]

</div>
</body>
</html>


The CSS code for this is
Here are the css codes I have written to create class and declared it on HTML page above..

-----------------------------------------------------------------------------------------------------------------

table, td, th {
border: 1px solid black;                                  [ Creating class with border 1 px solid and in black                                                                                                                                         color.]
border-collapse: collapse;                               [ Border will joined as single line..]
}

th {
text-align: center;
}

td {
height: 25px;
vertical-align: center;
}

.yoga
{                                                                                 [ declaring class for Yoga ]
background-color:lightblue;
}

.pro
{
background-color: violet;
}

.eng{                                                                          [ declaring class for English class cell ]
background-color:orange;
}

.pcoach{
background-color:lightyellow;
}

.red{
background-color:red;
}

.other
{
background-color:tomato;
}

.day
{
background-color:blue;
}

.time{
background-color:yellow;
}

.green
{
background-color:green;
}

.........................................................................................................

Uki2 Class 8 - Programming

Today we learned about an Introduction to CSS and Git and created a Github account.

CSSCss is Cascading Style Sheet. Its used to decorates the HTML page. HTML is a skeleton of a webpage and Css is like as a dress for webpage. CSS describes how HTML look should be.
CSS defines all HTML attributes should behave in a webpage in a single format.

The CSS have following structure

 CSS can be inserted in HTML page by 3 methods

1. Inline CSS : using style in HTML attribute
2. Internal - using style tag in head section.
3. External : using external CSS file

Inline CSS

<html>
    <body>
        <h1 style="color:blue;">This is a Blue Heading</h1>
    </body>
</html>

Alignments using Inline CSS
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>

Font Family & Font Size using Inline CSS

<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>

Internal CSS

<html>
<head>
    <style>
        body {background-color: powderblue;}
        h1   {color: blue;}
        p    {color: red;}
    </style>
</head>
    <body>

    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>

    </body>
</html>

External CSS

<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

                          here style.css refers the following...

Styles.css

body {
    background-color: powderblue;
}
h1 {
    color: blue;
}
p {
    color: red;
}

Then we signed up Github and learned about Git.

Git is one of the platform for developers to store their source code, by pushing and cloning the code, they can access their code anytime anywhere.

The methods to push and clone the code were explained. Then we did a practical in it.

After that we played Kiliththattu game and had fun..

Parathan.