Scribd
Upload
34 views56 pages

FSD Unit I

Uploaded by

decmonster24
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
34 views56 pages

FSD Unit I

Uploaded by

decmonster24
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 56

Full Stack Development Unit-I

Unit-I
HTML COMMON TAGS
What is an HTML File?

 HTML stands for Hyper Text Markup Language


 An HTML file is a text file containing small markup tags
 The markup tags tell the Web browser how to display the page
 An HTML file must have an htm or html file extension
 An HTML file can be created using a simple text editor

Type in the following text in “NOTEPAD”:

<html>
<head>
<title>Title of page</title>
</head>
<body>
Hello World! This is my first homepage. <b>This text is bold</b>
</body>
</html>

Save the file as "mypage.html".

Start your Internet browser. Select "Open" (or "Open Page") in the File menu of your
browser. A dialog box will appear. Select "Browse" (or "Choose File") and locate the HTML file
you just created - "mypage.html" - select it and click "Open". Now you should see an address in
the dialog box, for example "C:\MyDocuments\webdesign\mypage.html". Click OK, and the
browser will display the page.

Example Explained

The first tag in your HTML document is <html>. This tag tells your browser that this is
the start of an HTML document. The last tag in your document is </html>. This tag tells your
browser that this is the end of the HTML document.

The text between the <head> tag and the </head> tag is header information. Header
information is not displayed in the browser window. The text between the <title> tags is the title
of your document. The title is displayed in your browser's caption. The text between the <body>
tags is the text that will be displayed in your browser. The text between the <b> and </b> tags
will be displayed in a bold font.

CSE -1-
Full Stack Development Unit-I

HTML ELEMENTS
HTML documents are text files made up of HTML elements. HTML elements are
defined using HTML tags.

HTML Tags

 HTML tags are used to mark-up HTML elements


 HTML tags are surrounded by the two characters < and >
 The surrounding characters are called angle brackets
 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 text between the start and end tags is the element content
 HTML tags are not case sensitive, <b> means the same as <B>

<b>This text is bold</b>

The purpose of the <b> tag is to define an HTML element that should be displayed as bold.

Tag Attributes
Tags can have attributes. Attributes can provide additional information about the HTML
elements on your page.

This tag defines the body element of your HTML page: <body>. With an added bgcolor
attribute, you can tell the browser that the background color of your page should be red, like this:

<body bgcolor="red">

This tag defines an HTML table: <table>. With an added border attribute, you can tell the
browser that the table should have no borders: <table border="0">. Attributes always come in
name/value pairs like this: name="value". Attributes are always added to the start tag of an
HTML element.

1. HEADINGS

Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6>
defines the smallest heading.

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>

CSE -2-
Full Stack Development Unit-I
HTML automatically adds an extra blank line before and after a heading.

2. PARAGRAPHS

Paragraphs are defined with the <p> tag.

<p>This is a paragraph</p>
<p>This is another paragraph</p>

HTML automatically adds an extra blank line before and after a paragraph.

3. LINE BREAKS

The <br> tag is used when you want to end a line, but don't want to start a new paragraph. The
<br> tag forces a line break wherever you place it.

<p>This <br> is a para<br>graph with line breaks</p>

The <br> tag is an empty tag. It has no closing tag.

4. Comments in HTML

The comment tag is used to insert a comment in the HTML source code. A comment will be
ignored by the browser. You can use comments to explain your code, which can help you when
you edit the source code at a later date.

<!-- This is a comment -->

Note that you need an exclamation point after the opening bracket, but not before the closing
bracket.

HTML TEXT FORMATTING


HTML defines a lot of elements for formatting output, like bold or italic text. How to View
HTML Source? To find out, click the VIEW option in your browser's toolbar and select
SOURCE or PAGE SOURCE. This will open a window that shows you the HTML code of the
page.
1. Text Formatting Tags
Tag Description
<i> Defines italic text. Recommend using <em>
<b> Defines bold text. Recommend using <strong>
<em> Defines emphasized text. Renders as italic text.
<strong> Defines strong text. Renders as bold text.

CSE -3-
Full Stack Development Unit-I

Example
Source Output
<i>Italic text</i><br /> Italic text
<b>Bold text</b><br /> Bold text
<em>Emphasized text</em><br> Emphasized text
<strong>Strong text</strong><br> Strong text

What is the difference between <i> & <em> and <b> & <strong>, <b> and <i> will both
become deprecated tags. Using <strong> and <em> are the tags that will be cross-browser
compatible as browsers move forward to embrace the new standards in HTML (e.g., XHTML)

2. HTML Links
HTML uses a hyperlink to link to another document on the Web. 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 W3Schools:

<a href="http://www.google.co.in/">Google</a>

The line above will look like this in a browser:

Google

The Target Attribute


With the target attribute, you can define where the linked document will be opened.
The line below will open the document in a new browser window:
<a href="http://www.google.co.in/" target="_blank">Google</a>

The Anchor Tag and the Name Attribute


The name attribute is used to create a named anchor. When using named anchors we can create
links that can jump directly into a specific section on a page, instead of letting the user scroll
around to find what he/she is looking for.
Below is the syntax of a named anchor:

CSE -4-
Full Stack Development Unit-I
<a name="label">Text to be displayed</a>
The name attribute is used to create a named anchor. The name of the anchor can be any text you
care to use.
The line below defines a named anchor:
<a name="tips">Useful Tips Section</a>
You should notice that a named anchor is not displayed in a special way. To link directly to the
"tips" section, add a # sign and the name of the anchor to the end of a URL, like this:
<a href="http://www.amyschan.com/mypage.html#tips">
Jump to the Useful Tips Section</a>

HTML LISTS
HTML supports ordered, unordered and definition lists.

1. Unordered Lists
An unordered list is a list of items. The list items are marked with bullets (typically small
black circles).
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
Here is how it looks in a browser:
 Coffee
 Milk
Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.

2. Ordered Lists
An ordered list is also a list of items. The list items are marked with numbers.
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
Here is how it looks in a browser:
1. Coffee
2. Milk
Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.

CSE -5-
Full Stack Development Unit-I
HTML TABLE
Tables are defined with the <table> tag.

A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the
<td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain
text, links, images, lists, forms, other tables, etc.

Table Example

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

How the HTML code above looks in a browser:

row 1, cell 1 row 1, cell 2

row 2, cell 1 row 2, cell 2

HTML Tables and the Border Attribute

If you do not specify a border attribute, the table will be displayed without borders. Sometimes
this can be useful, but most of the time, we want the borders to show.

To display a table with borders, specify the border attribute:

<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

CSE -6-
Full Stack Development Unit-I

HTML Table Headers

Header information in a table are defined with the <th> tag. All major browsers display the text
in the <th> element as bold and centered.

<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

How the HTML code above looks in your browser:

Header 1 Header 2

row 1, cell 1 row 1, cell 2

row 2, cell 1 row 2, cell 2

HTML Table Tags


Tag Description
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for formatting
<col> Specifies column properties for each column within a <colgroup> element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table

CSE -7-
Full Stack Development Unit-I

HTML <table> Tag


Definition and Usage
The <table> tag defines an HTML table. An HTML table consists of the <table> element and
one or more <tr>, <th>, and <td> elements. The <tr> element defines a table row, the <th>
element defines a table header, and the <td> element defines a table cell. A more complex
HTML table may also include <caption>, <col>, <colgroup>, <thead>, <tfoot>, and <tbody>
elements.
Attributes
Attribute Value Description
align left center Not supported in HTML5. Deprecated in
right HTML 4.01.Specifies the alignment of a
table according tosurrounding text
bgcolor rgb(x,x,x) Not supported in HTML5. Deprecated in HTML
#xxxxxx 4.01.Specifies the background color for a table
colorname
border “1” Specifies whether the table cells should have
borders ornot
Cellpadding pixels Not supported in HTML5. Specifies the space
between thecell wall and the cell content
Cellspacing pixels Not supported in HTML5. Specifies the space
between cells
rules none groups Not supported in HTML5. Specifies which parts
rows cols of the insideborders that should be visible
all

summary text Not supported in HTML5. Specifies a summary


of thecontent of a table
width pixels Not supported in HTML5. Specifies the width of a
% table

Example
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>

CSE -8-
Full Stack Development Unit-I
HTML IMAGES
With HTML you can display images in a document.

The Image Tag and the src Attribute

In HTML, images are defined with the <img> tag. To display an image on a page, you
need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of
the image you want to display on your page.
The syntax of defining an image: <img src="url">

The URL points to the location where the image is stored. An image named "boat.gif"
located in the directory "images" on "www.w3schools.com" has the URL:
http://www.w3schools.com/images/boat.gif. The browser puts the image where the image tag
occurs in the document. If you put an image tag between two paragraphs, the browser shows the
first paragraph, then the image, and then the second paragraph.

The Alt Attribute

The alt attribute is used to define an "alternate text" for an image. The value of the alt attribute is
an author-defined text:

<img src="images/logo.jpg” alt="Google logo">


The "alt" attribute tells the reader what he or she is missing on a page if the browser can't load
images. The browser will then display the alternate text instead of the image. It is a good practice
to include the "alt" attribute for each image on a page, to improve the display and usefulness of
your document for people who have text-only browsers.

HTML BACKGROUNDS
A good background can make a Web site look really great.
Backgrounds

The <body> tag has two attributes where you can specify backgrounds. The background can be a
color or an image.

1. Bgcolor
The bgcolor attribute specifies a background-color for an HTML page. The value of this attribute
can be a hexadecimal number, an RGB value, or a color name:
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

CSE -9-
Full Stack Development Unit-I
The lines above all set the background-color to black.
2. Background
The background attribute specifies a background-image for an HTML page. The value of this
attribute is the URL of the image you want to use. If the image is smaller than the browser
window, the image will repeat itself until it fills the entire browser window.
<body background="images/cloudswirl.jpg">
<body background="http://www.amyschan.com/images/cloudswirl.jpg">
FORMS
Forms can be used to collect information. Sophisticated forms may be linked to a
database to store the information, but this is beyond the scope of the article. This article will
show you how to create a form that emails you the information.
Here is a very basic email form:
<form action="mailto:[email protected]" method="post">
Name:<br>
<input type="text" name="name" size="20"><br>
Email:<br>
<input type="text" name="email" size="20"><br>
Comment:<br>
<textarea cols="20" rows="5"></textarea><br>
<input type="submit" value="Submit"> <input type="reset" value="Reset">
</form>
And here's what it looks like:
Name:

Email:

Comment:

Submit Reset

Notice that the "input" tag was used for the text fields as well as the buttons! The "input" tag is
the tag you will use most often in forms. Here are different forms of the input tag:
 type="text"
 type="password" (asterisks when you type)
 type="checkbox"
 type="radio"
Submit Query
 type="submit" (You can change the text on the button.)

CSE - 10 -
Full Stack Development Unit-I
Reset
 type="reset" (You can change the text on the button.)
 type="hidden" (You can't see this because it's hidden! This allows you to send additional
variables that your user can't see.)
 type="button" (You can change the text on the button.

Below you will find a table of the various form elements and how you can use them.

FORM – attributes
action This attribute usually has a link to a web page that contains code which
="[url]" processes the form. In our example above, we use "mailto" to tell the form to
send the information as an email.
method This attribute specifies how the information is sent. With the "get" method, all
="get" the information is sent in one long URL string. With the "post" method, all the
="post" information is sent but is "invisible" to the user.
name When creating complex forms and using scripting, you may need to specify the
="[name of name of the form. The name should be unique - that is, you shouldn't have other
form]" forms on the page with the same form name.
INPUT – attributes
type The "type" attribute allows you to specify what type of form element you want
="text" to use. As you can see, the "input" element can have many different forms - see
="password" above for examples.
="checkbox"
="radio"
="submit"
="reset"
="hidden"
="button"
checked This attribute does not have any values. When you put this attribute into the tag
for "radio" or "checkbox," they will be selected.
src Use this attribute when you have an "image" to specify the location of the image.
="[url]"

TEXTAREA - attributes
This form element is the multi-line text box that you often seen for "comments." The opening
and closing tag surround the text that will be initially displayed.
name This attribute must be set to a unique name so you know how to refer to the form
="[referring element.
name]"
rows This attribute allows you to set the number of rows for the text area.
="[number]"
cols This attribute allows you to set the number of columns for the text area.
="[number]"

CSE - 11 -
Full Stack Development Unit-I

SELECT - attributes
The SELECT tag allows you to create "select boxes" or "drop down menus." It is the "outer"
element, used with the OPTION tag. (See the example link below)
name This attribute must be set to a unique name so you know how to refer to the form
="[referring element.
name]"
size This attribute allows you to set how many rows are visible.
="[number]"
multiple This attribute does not have any "values." When you set this attribute, it allows
the user to select more than one option.
OPTION - attributes
The OPTION tag is used with the SELECT tag to define the different options in the select
box or dropdown menu. The opening and closing tag surround the text that will be displayed.
value This attribute must be set to a unique name so you know how to refer to the form
="[value]" element. It will probably be an abbreviated version of the text that is displayed.
selected This attribute does not have any "values." When you set this attribute, it marks
this option as being "preselected."
Putting it all together...
Here's a sample page using this code below:

<form>
Enter your Name: <input type="text" width="20" size="20">
<p>Favorite Color:<br>
<input type="checkbox" checked value="red" name="colors"> Red<br>
<input type="checkbox" value="blue" name="colors"> Blue</p>
<p>Gender:<br>
<input type="radio" checked value="male" name="gender">Male<br>
<input type="radio" value="female" name="gender">Female</p>
<p>Address:<br>
<textarea rows="5" cols="20">Please enter your permanent address
here.</textarea></p>
Country:<br>
<select name="country">
<option value="usa" selected>USA</option>
<option value="uk">United Kingdom</option>
<option value="canada">Canada</option>
</select>

CSE - 12 -
Full Stack Development Unit-I
CSS
Introduction to CSS:
CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be
displayed on screen, paper, or in other media. CSS saves a lot of work. It can control the layout
of multiple web pages all at once. External style sheets are stored in “.css” files. CSS is used to
define styles for your web pages, including the design, layout and variations in display for
different devices and screen sizes.

Types of CSS:
There are three types of CSS available. They are:
1) Inline CSS
2) Internal CSS
3) External CSS
1. Inline CSS:
If the styles are mentioned along with the tag then this type of CSS is known as inline CSS.
Example:
<p style=”text-align: justify; background-color: red”>Hi this is the Inline CSS. </p>
2. Internal CSS:
For internal CSS, we write all the desired “styles” for the “selectors” along with the
properties and values in the “head” section. And in the body section then newly defied
selector tags are used with the actual contents.
Example:
<html>
<head>
<style type= “text/css”>
p
{
text-align: justify;
background-color: red;
}
</style>
</head>
<body>
<p>This is Internal CSS.</p>
</body>
</html>

3. External CSS:
Sometimes we need to apply particular style to more than one web page; in such cases
external CSS can be used. The main idea in this type of CSS is that the desired styles can be
written in one “.css” file. And this file can be called in our web pages to apply the styles.

CSE - 13 -
Full Stack Development Unit-I
Example:
<html>
<head>
<link rel = “stylesheet” type = “text/css” href = “external.css”>
</head>
<body>
<p>This is Internal CSS.</p>
</body>
</html>
external.css:
p
{
text-align: justify;
background-color: red;
}

CSS Selectors:
CSS selectors are used to "find" (or select) HTML elements based on their element name,
id, class, attribute, and more.

The element Selector:


The element selector selects elements based on the element name. You can select all <p>
elements on a page like this (in this case, all <p> elements will be center-aligned, with a red text
color):
Example:
p{
text-align: center;
color: red;
}

The id Selector:
The id selector uses the id attribute of an HTML element to select a specific element. The id of
an element should be unique within a page, so the id selector is used to select one unique
element! To select an element with a specific id, write a hash (#) character, followed by the id of
the element. The style rule below will be applied to the HTML element with id="para1":
Example:
#para1 {
text-align: center;
color: red;
}

CSE - 14 -
Full Stack Development Unit-I
The class Selector:
The class selector selects elements with a specific class attribute. To select elements with a
specific class, write a period (.) character, followed by the name of the class. In the example
below, all HTML elements with class="center" will be red and center-aligned:
Example:
.center {
text-align: center;
color: red;
}
You can also specify that only specific HTML elements should be affected by a class. In the
example below, only <p> elements with class="center" will be center-aligned:
Example:
p.center {
text-align: center;
color: red;
}
HTML elements can also refer to more than one class. In the example below, the <p> element
will be styled according to class="center" and to class="large":
Example:
<p class="center large">This paragraph refers to two classes.</p>

Controlling Page Layout:


By default, HTML <div> sections will fill 100% of the web page width, and stack up one on top
of the other. It is highly unlikely that this is how we want our page elements to be arranged;
chances are we want some sections arranged side by side, and using various widths. For example
we might want to have a main content area with a menu down the left-hand side. Thankfully CSS
makes this a simple task. The first step is to understand the float property.

The CSS float Property:


The float property tells HTML elements how to arrange themselves in relation to the other divs
around them. We can specify one of two values for the float property - left or right. If we tell a
<div> to float to the left, then it will shift itself as far left on the line as it can go before bumping
into another <div> section. If we tell an element to float to the right it will shift as far right as it
can? Let's take a look at a working example; this will give us a good visualization of how
floating works. We'll begin by defining three areas for our web page:
<div id="header">This is the page header</div>
<div id="menu">Menu links goes in here</div>
<div id="content">And finally the page content in here</div>

Now, what we want to do is to have the header take up the whole of the top row, with the menu
and content underneath, arranged side by side. To do this we would use the following CSS (the
header section doesn't require any CSS):

#menu {
float: left;
}

CSE - 15 -
Full Stack Development Unit-I
#content {
float: left;
}

Using CSS to set HTML element widths:


One problem with arranging our HTML in this way is that the <div> sections will size
themselves automatically to fit the text contained within them. This means that for a standard
menu bar, where we have lots of text that we want to contain in a narrow area, we will end up
with a very wide bar which will either squeeze the content section into a small space, or ever
push it onto another line. We can fix this by specifying widths for our sections:
Example:

#menu {
float: left;
width: 10em;
}
Widths can be specified in pixels, ems or as a percentage of the total page width.
The CSS clear property
We have seen how we can position HTML elements next to each other using CSS, but
sometimes we might want an element to appear beneath other elements. We can easily force an
element to sit below another using the clear property. When using clear, we can tell an element
to either clear those elements which are floated left, those which are floated right, or both:
Example:
#divname {
clear: left / right / both;
}

Changing Background:
The CSS background properties are used to define the background effects for elements.
CSS background properties:
 background-color
 background-image
 background-repeat
 background-attachment
 background-position

Background Color
The background-color property specifies the background color of an element. The
background color of a page is set like this:
Example
body {
background-color: lightblue;
}
With CSS, a color is most often specified by:
 A valid color name - like "red"
 A HEX value - like "#ff0000"
 An RGB value - like "rgb(255,0,0)"

CSE - 16 -
Full Stack Development Unit-I

Background Image:
The background-image property specifies an image to use as the background of an
element. By default, the image is repeated so it covers the entire element. The background image
for a page can be set like this:
Example:
body {
background-image: url("paper.gif");
}

Background Image - Repeat Horizontally or Vertically:


By default, the background-image property repeats an image both horizontally and
vertically. Some images should be repeated only horizontally or vertically, or they will look
strange, like this:
Example:
body {
background-image: url("gradient_bg.png");
}
If the image above is repeated only horizontally (background-repeat: repeat-x;), the
background will look better:
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
Tip: To repeat an image vertically, set background-repeat: repeat-y;

Background Image - Set position and no-repeat:


Showing the background image only once is also specified by the background-repeat
property:
Example:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
In the example above, the background image is shown in the same place as the text. We
want to change the position of the image, so that it does not disturb the text too much. The
position of the image is specified by the background-position property:
Example:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}

CSE - 17 -
Full Stack Development Unit-I
Background Image - Fixed position
To specify that the background image should be fixed (will not scroll with the rest of the
page), use the background-attachment property:
Example:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}

Controlling borders of the HTML elements using CSS:


The CSS border properties allow you to specify the style, width, and color of an element's
border. The border-style property specifies what kind of border to display.
The following values are allowed:
 dotted - Defines a dotted border
 dashed - Defines a dashed border
 solid - Defines a solid border
 double - Defines a double border
 groove - Defines a 3D grooved border. The effect depends on the border-color value
 ridge - Defines a 3D ridged border. The effect depends on the border-color value
 inset - Defines a 3D inset border. The effect depends on the border-color value
 outset - Defines a 3D outset border. The effect depends on the border-color value
 none - Defines no border
 hidden - Defines a hidden border
The border-style property can have from one to four values (for the top border, right border,
bottom border, and the left border).
Example:
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

The border-width property specifies the width of the four borders. The width can be set as a
specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin,
medium, or thick. The border-width property can have from one to four values (for the top
border, right border, bottom border, and the left border).

CSE - 18 -
Web Technologies (A60512) Unit-V

Example
p.one {
border-style: solid;
border-width: 5px;
}

p.two {
border-style: solid;
border-width: medium;
}

p.three {
border-style: solid;
border-width: 2px 10px 4px 20px;
}

The border-color property is used to set the color of the four borders. The color can be set by:
 name - specify a color name, like "red"
 Hex - specify a hex value, like "#ff0000"
 RGB - specify a RGB value, like "rgb(255,0,0)"
 transparent
The border-color property can have from one to four values (for the top border, right border,
bottom border, and the left border). If border-color is not set, it inherits the color of the
element.
Example
p.one {
border-style: solid;
border-color: red;
}

p.two {
border-style: solid;
border-color: green;
}

p.three {
border-style: solid;
border-color: red green blue yellow;
}

CSE 19
Web Servers UNIT-I

Web Servers

Web pages are a collection of data, including images, text files, hyperlinks,
database files etc., all located on some computer (also known as server space)
on the Internet. A web server is dedicated software that runs on the server-
side. When any user requests their web browser to run any web page, the
webserver places all the data materials together into an organized web page
and forwards them back to the web browser with the help of the Internet.
Therefore, we can conclude that: -

A web server is a dedicated computer responsible for running websites sitting


out on those computers somewhere on the Internet. They are specialized
programs that circulate web pages as summoned by the user. The primary
objective of any web server is to collect process and provide web pages to the
users.

This intercommunication of a web server with a web browser is done with the
help of a protocol named HTTP (Hypertext Transfer Protocol). These stored
web pages mostly use static content, containing HTML documents, images,
style sheets, text files, etc. However, web servers can serve static as well as
dynamic contents. Web Servers also assists in emailing services and storing
files. Therefore it also uses SMTP (Simple Mail Transfer Protocol) and FTP (File
Transfer Protocol) protocols to support the respective services. Web servers
are mainly used in web hosting or hosting the website's data and running
web-based applications.

Page | 20
Web Servers UNIT-I

The hardware of the web servers are connected to the Internet that manages
the data exchange facility within different connected devices. In contrast, the
software of web server software is responsible for controlling how a user
accesses delivered files. Typically, web server management is an ideal example
of the client/server model. Therefore, it is compulsory for all computers that
host websites (whether with state or dynamic web page content) to have
web server software.

How do web servers work?


The term web server can denote server hardware or server software, or in most
cases, both hardware and software might be working together.

1. On the hardware side, a web server is defined as a computer that


stores software and another website raw data, such as HTML files,
images, text documents, and JavaScript files. The hardware of the web

Page | 21
Web Servers UNIT-I

servers are connected to the web and supports the data exchange with
different devices connected to the Internet.
2. On the software side, a web server includes server software accessed
through website domain names. It controls how web users access the
web files and ensures the supply of website content to the end-user. The
web server contains several components, including an HTTP server.

Whenever any web browser, such as Google Chrome,


Microsoft Edge or Firefox, requests for a web page hosted on a web server,
the browser will process the request forward with the help of HTTP. At the
server end, when it receives the request, the HTTP server will accept the
request and immediately start looking for the requested data and forwards it
back to the web browser via HTTP.
Let's discover the step-by-step process of what happens whenever a web
browser approaches the web server and requests a web file or file. Follow the
below steps:
1. First, any web user is required to type the URL of the web page in the
address bar of your web browser.
2. With the help of the URL, your web browser will fetch the IP address
of your domain name either by converting the URL via DNS (Domain
Name System) or by looking for the IP in cache memory. The IP address
will direct your browser to the web server.
3. After making the connection, the web browser will request for the
web page from the web server with the help of an HTTP request.
4. As soon as the web server receives this request, it immediately responds
by sending back the requested page or file to the web browser HTTP.
5. If the web page requested by the browser does not exist or if there
occurs some error in the process, the web server will return an error
message.
6. If there occurs no error, the browser will successfully display the
webpage.
Page | 22
Web Servers UNIT-I

Examples of web server uses


Web servers are mostly used for:

o sending and receiving mails on Internet by using SMTP (Simple Mail


transfer Protocol);
o fetching requests for File Transfer Protocol (FTP) files; and
o designing, developing, and publishing websites.

Many Web servers, even the basic one, also support the server-side scripting
technique. Server-side scripting is a web development method used to employ
scripts on a web server that produces a customized response for each user.
This technique operates on the server machine and consists of an extensive
feature set, including database access. The server-side scripting process will
have various scripting languages
such ASP, PHP, Java, JavaScript, Python, ruby and many more. This technique
also enables the HTML files to be created dynamically.
Web server software available in the market
Though there are various web servers found in today's market, but the
commonly used one are as follows:

S.NO Web Server Description

1. Apache HTTP Server


This web server is developed by Apache Software Foundation. It is an
open-source, accessible web server available for almost all operating
systems, including Windows, MACOS, Linux, FreeBSD, etc. Apache is
one of the most popular web servers used around the globe.

2. Microsoft Internet Information Services (IIS)


IIS is a high-performance web server that is developed by Microsoft
only for Microsoft platforms. This webs server is tightly integrated with
Microsoft operating system; therefore, it is not open-sourced.

Page | 23
Web Servers UNIT-I

3. Nginx
Nginx is an open-source web server commonly used by administrators
as it supports light resource application and scalability.

4. Lighttpd
Lighttpd, also known as lighty, is a free, open-source web server with
the FreeBSD operating system. This web server is fast, secure and
consumes much less CPU power. It can also run on the commonly used
operating system, unlike Windows, Mac OS X, Linus.

5. Sun Java System Web Server


Sun Java is a free web server developed by Sun Microsystems well
equipped for a medium and large website that can run on Windows,
Linux and Unix. Moreover, this web server supports several languages,
scripts and technologies essential for Web 2.0, unlike JSP, Java Servlets,
PHP, Python, HTML, etc. Though Sun Java is free, it is not an open-
source web server.

Page | 24
Shell Scripting & UNIX CLI UNIT-I

What is Shell Scripting


In Linux, shells like bash and korn support programming construct which are
saved as scripts. These scripts become shell commands and hence many Linux
commands are script.

A system administrator should have a little knowledge about scripting to


understand how their servers and applications are started, upgraded,
maintained or removed and to understand how a user environment is built.

A shell script is a type of computer program developed to be executed by a


Unix shell, which is also known as a command-line interpreter. Several shell
script dialects are treated as scripting languages. Classic operations
implemented by shell scripts contain printing text, program execution, and file
manipulation. A script configures the environment, executes the program, and
does necessary logging or clean-up is known as a wrapper.

Also, the term is more generally used to define the automated mode of
executing an operating system shell; all operating systems use a specific name
for the functions such as mainframe operating systems, shell scripts (third-
party derivatives and Windows NT stream like 4NT), VMS (command
procedures), and batch files (OS/2, MSDos-Win95 stream) are related to
several terms.

Commonly, shells represent in Unix-like and Unix systems, such as the GNU
Bash, the Bourne shell, and the Korn shell. These shells are generally
represented for backward compatibility, while the Unix operating system may
contain a distinct default shell like MacOS upon zsh.

Capabilities of Shell Script


o Comments

Comments are avoided by the shell. Typically, they start with the hash (#)
symbol and continue until the completion of the line.

Page | 25
Shell Scripting & UNIX CLI UNIT-I

o Scripting language configurable choice

The hash-bang or shebang is a unique type of comment that the system


applies to decide what interpreter to utilize to run the file. The hash-bang
must be the file's first line and begin with the "#!" symbol. Following the "#!"
prefix, the characters are specified as a path to any executable program that
will specify the script in Unix-like operating systems.

o Shortcuts

A shell script can offer an easy variation of the system command in which
unique environment settings, post-processing, or command options
automatically apply, but in a form that permits the new script to act as a
completely normal Unix command.

An example would be to make an ls version, the command for listing files,


providing a reduced 'l' command name, which would normally be saved in the
bin directory of a user as /home/username/bin/l, and the command option's
default set pre-supplied.

1. #!/bin/ sh
2. LC_COLLATE=C ls -FCas "$@"

In the above example, the first line applies shebang to represent which
interpreter should run the rest of the script. The other line creates a listing
using options for several file format columns, indicators, all files, and sizes in
blocks. The LC_COLLATE=C configures the default collation sequence for not
folding lower and uppercase together.

Another shell script example that could be run as a shortcut would be to show
all file and directory lists in a given directory.

1. #!/bin/ sh
2. clear
3. ls -al

Page | 26
Shell Scripting & UNIX CLI UNIT-I

In the above example, the shell script would begin with its common beginning
line of #!/bin/ sh. Following it, the script runs the clear command, which clears
the command-line of every text before the next line. The ls -al command will
list the directories and files in the directory through which the script is being
executed. The attributes of the ls command could be modified to reflect the
requirements of the user.

Important: We can use the clr command if an implementation doesn't have a


clear command.

o Batch jobs

A shell script permits many commands that would be manually entered at a


command-line interface to be automatically executed without needing to wait
for any user to generate all sequence stages.

o Generalization

Common batch jobs are usual for separated tasks, but using shell variables,
tests, and loops gives much more compliance to users. The POSIX sh script is
used to transform JPEG images into PNG images, in which the image titles are
given possibly by wildcards in the command-line rather than all being listed in
the script; it can be made with this file, generally saved inside a file such
as /home/username/bin/jpg2png.

o Programming

Also, several modern shells supply many features generally detected only in
more practical general-purpose programming languages like subroutines,
arrays, comments, variables, control flow constructs, and so on. With these
types of features available, it's possible to reasonably write practical
applications as shell scripts.

Although, they are still restricted by the fact that almost all shell languages
have no or little support for complex math, data typing systems, threading,
classes, and other basic full language aspects, and are also much slower than

Page | 27
Shell Scripting & UNIX CLI UNIT-I

interpreted languages or compiled code specified with speed as an


administration goal.

The standard awk and sed Unix tools give additional capabilities for shell
programming. Also, Perl can be installed in shell scripts as other scripting
languages such as Tcl. Tcl and Perl also provide graphics toolkits.

How to determine Shell


You can get the name of your shell prompt, with following command :

Syntax:

1. echo $SHELL

Look at the above snapshot, with the help of above command we got the
name of our shell which is 'bash'.

The $ sign stands for a shell variable, echo will return the text whatever you
typed in.

What is CLI?
CLI stands for Command Line Interface. It is an interface for the user that is
used to issue commands in successive lines of text or command lines to
execute the tasks. It is a platform or medium in which users react to a visible
prompt by writing a command and receiving a response from the system, and
the users have to be compelled to type command or train of command to
execute the task. It is suitable for high-priced computing where input accuracy
is critical.

Page | 28
Shell Scripting & UNIX CLI UNIT-I

UNIX's operating systems include a CLI, whereas Windows and Linux include
both a CLI and a GUI. The user must have good knowledge of using the CLI
and complete knowledge of the correct syntax to issue effective commands.
Overall, the CLI uses less memory and executes faster than the GUI.

Advantages and disadvantages of CLI


There are various advantages and disadvantages of CLI. These are as follows:

Advantages

1. It provides fast performance as compared to GUI. Users may execute the


various jobs by entering commands in the CLI.
2. It may be used with a low-resolution, low-cost monitor.
3. Compared to other user interfaces, this type of interface requires less
memory (RAM).
4. The command-line interface uses less memory than the graphical user
interface. The GUI uses a lot of memory and slows down the computer,
whereas the CLI uses minimal memory and does not lead the system to
slow down.
5. CLI also allows device communication. Using CLI, users may connect
several services to the PC.
6. CLI can be run on any CPU, regardless of how it is fast or slow. The
commands are executed quickly and do not need any more computing
power.
7. All operating systems support CLI. UNIX, Linux, and Mac each have their
command-line interface. Users don't require to install Windows to
execute the commands in CLI.

Page | 29
Shell Scripting & UNIX CLI UNIT-I

Disadvantages

1. It's difficult to remember all of the CLI's commands. For CLI, UNIX
provides over 100 Some commands are combined with others and
remembering the order of the commands might be difficult.
2. The mostly commands in CLI may not be undone or reversed. So, the
users must be very careful to use the commands in CLI. In most cases,
the command's execution is not interrupted, and it continues.
3. Learning commands is a lengthy process. If users do not use commands
regularly, they will forget the majority of them. Each program has its set
of commands to execute.
4. If users write wrong commands or create a typo, the file may be deleted
or moved to the wrong location. If users delete a file by accident, it
causes difficulties because it may contain crucial information.
5. CLI might be perplexing to new users. The new user has no idea how the
CLI works or what to write in it.

Page | 30
Git(Global Information Tracker) UNIT-I

What is Git?
Git(Global Information Tracker) is an open-
source distributed version control system. It is
designed to handle minor to major projects with
high speed and efficiency. It is developed to co-
ordinate the work among the developers. The
version control allows us to track and work
together with our team members at the same workspace.

Git is foundation of many services like GitHub and GitLab, but we can use Git
without using any other Git services. Git can be used privately and publicly.

Git was created by Linus Torvalds in 2005 to develop Linux Kernel. It is also
used as an important distributed version-control tool for the DevOps.

Git is easy to learn, and has fast performance. It is superior to other SCM tools
like Subversion, CVS, Perforce, and ClearCase.

Features of Git
Some remarkable features of Git are as follows:

Page | 31
Git(Global Information Tracker) UNIT-I

o Open Source
Git is an open-source tool. It is released under the GPL (General Public
License) license.
o Scalable
Git is scalable, which means when the number of users increases, the Git
can easily handle such situations.
o Distributed
One of Git's great features is that it is distributed. Distributed means
that instead of switching the project to another machine, we can create
a "clone" of the entire repository. Also, instead of just having one central
repository that you send changes to, every user has their own repository
that contains the entire commit history of the project. We do not need
to connect to the remote repository; the change is just stored on our
local repository. If necessary, we can push these changes to a remote
repository.

Page | 32
Git(Global Information Tracker) UNIT-I

o Security
Git is secure. It uses the SHA1 (Secure Hash Function) to name and
identify objects within its repository. Files and commits are checked and
retrieved by its checksum at the time of checkout. It stores its history in
such a way that the ID of particular commits depends upon the
complete development history leading up to that commit. Once it is
published, one cannot make changes to its old version.
o Speed
Git is very fast, so it can complete all the tasks in a while. Most of the git
operations are done on the local repository, so it provides a huge
speed. Also, a centralized version control system continually
communicates with a server somewhere.
Performance tests conducted by Mozilla showed that it was extremely
fast compared to other VCSs. Fetching version history from a locally
stored repository is much faster than fetching it from the remote server.
The core part of Git is written in C, which ignores runtime overheads
associated with other high-level languages.
Git was developed to work on the Linux kernel; therefore, it
is capable enough to handle large repositories effectively. From the
beginning, speed and performance have been Git's primary goals.
o Supports non-linear development
Git supports seamless branching and merging, which helps in
visualizing and navigating a non-linear development. A branch in Git
represents a single commit. We can construct the full branch structure
with the help of its parental commit.
o Branching and Merging
Branching and merging are the great features of Git, which makes it
different from the other SCM tools. Git allows the creation of multiple
branches without affecting each other. We can perform tasks
like creation, deletion, and merging on branches, and these tasks take

Page | 33
Git(Global Information Tracker) UNIT-I

a few seconds only. Below are some features that can be achieved by
branching:
o We can create a separate branch for a new module of the
project, commit and delete it whenever we want.
o We can have a production branch, which always has what goes
into production and can be merged for testing in the test branch.
o We can create a demo branch for the experiment and check if it is
working. We can also remove it if needed.
o The core benefit of branching is if we want to push something to a
remote repository, we do not have to push all of our branches. We
can select a few of our branches, or all of them together.
o Data Assurance
The Git data model ensures the cryptographic integrity of every unit of
our project. It provides a unique commit ID to every commit through
a SHA algorithm. We can retrieve and update the commit by commit
ID. Most of the centralized version control systems do not provide such
integrity by default.
o Staging Area
The Staging area is also a unique functionality of Git. It can be
considered as a preview of our next commit, moreover,
an intermediate area where commits can be formatted and reviewed
before completion. When you make a commit, Git takes changes that
are in the staging area and make them as a new commit. We are
allowed to add and remove changes from the staging area. The staging
area can be considered as a place where Git stores the changes.
Although, Git doesn't have a dedicated staging directory where it can
store some objects representing file changes (blobs). Instead of this, it
uses a file called index.

Page | 34
Git(Global Information Tracker) UNIT-I

Another feature of Git that makes it apart from other SCM tools is that it
is possible to quickly stage some of our files and commit them
without committing other modified files in our working directory.
o Maintain the clean history
Git facilitates with Git Rebase; It is one of the most helpful features of
Git. It fetches the latest commits from the master branch and puts our
code on top of that. Thus, it maintains a clean history of the project.

Benefits of Git
A version control application allows us to keep track of all the changes that
we make in the files of our project. Every time we make changes in files of an
existing project, we can push those changes to a repository. Other developers
are allowed to pull your changes from the repository and continue to work
with the updates that you added to the project files.

Page | 35
Git(Global Information Tracker) UNIT-I

Some significant benefits of using Git are as follows:

o Saves Time
Git is lightning fast technology. Each command takes only a few seconds
to execute so we can save a lot of time as compared to login to a
GitHub account and find out its features.
o Offline Working
One of the most important benefits of Git is that it supports offline
working. If we are facing internet connectivity issues, it will not affect
our work. In Git, we can do almost everything locally. Comparatively,
other CVS like SVN is limited and prefer the connection with the central
repository.
o Undo Mistakes
One additional benefit of Git is we can Undo mistakes. Sometimes the
undo can be a savior option for us. Git provides the undo option for
almost everything.

Page | 36
Git(Global Information Tracker) UNIT-I

o Track the Changes


Git facilitates with some exciting features such as Diff, Log, and Status,
which allows us to track changes so we can check the status,
compare our files or branches.

Why Git?
We have discussed many features and benefits of Git that demonstrate the
undoubtedly Git as the leading version control system. Now, we will discuss
some other points about why should we choose Git.

o Git Integrity
Git is developed to ensure the security and integrity of content being

Page | 37
Git(Global Information Tracker) UNIT-I

version controlled. It uses checksum during transit or tampering with the


file system to confirm that information is not lost. Internally it creates a
checksum value from the contents of the file and then verifies it when
transmitting or storing data.
o Trendy Version Control System
Git is the most widely used version control system. It has maximum
projects among all the version control systems. Due to its amazing
workflow and features, it is a preferred choice of developers.
o Everything is Local
Almost All operations of Git can be performed locally; this is a significant
reason for the use of Git. We will not have to ensure internet
connectivity.
o Collaborate to Public Projects
There are many public projects available on the GitHub. We can
collaborate on those projects and show our creativity to the world. Many
developers are collaborating on public projects. The collaboration allows
us to stand with experienced developers and learn a lot from them; thus,
it takes our programming skills to the next level.
o Impress Recruiters
We can impress recruiters by mentioning the Git and GitHub on our
resume. Send your GitHub profile link to the HR of the organization you
want to join. Show your skills and influence them through your work. It
increases the chances of getting hired.

How to Install Git on Windows


To use Git, you have to install it on your computer. Even if you have already
installed Git, it's probably a good idea to upgrade it to the latest version. You
can either install it as a package or via another installer or download it from its
official site.

Page | 38
Git(Global Information Tracker) UNIT-I

Now the question arises that how to download the Git installer package.
Below is the stepwise installation process that helps you to download and
install the Git.

How to download Git?

Step1

To download the Git installer, visit the Git's official site and go to download
page. The link for the download page is https://git-scm.com/downloads. The
page looks like as

Click on the package given on the page as download 2.23.0 for windows.
The download will start after selecting the package.

Now, the Git installer package has been downloaded.

Install Git

Page | 39
Git(Global Information Tracker) UNIT-I

Step2

Click on the downloaded installer file and select yes to continue. After the
selecting yes the installation begins, and the screen will look like as

Click on next to continue.

Step3

Default components are automatically selected in this step. You can also
choose your required part.

Click next to continue.


Page | 40
Git(Global Information Tracker) UNIT-I

Step4

The default Git command-line options are selected automatically. You can
choose your preferred choice. Click next to continue.

Step5

The default transport backend options are selected in this step. Click next to
continue.

Page | 41
Git(Global Information Tracker) UNIT-I

Step6

Select your required line ending option and click next to continue.

Step7

Select preferred terminal emulator clicks on the next to continue.

Page | 42
Git(Global Information Tracker) UNIT-I

Step8

This is the last step that provides some extra features like system caching,
credential management and symbolic link. Select the required features and
click on the next option.

Step9

The files are being extracted in this step.

Page | 43
Git(Global Information Tracker) UNIT-I

Therefore, The Git installation is completed. Now you can access the Git
Gui and Git Bash.
The Git Gui looks like as

It facilitates with three features.

o Create New Repository


o Clone Existing Repository
o Open Existing Repository

The Git Bash looks like as

Page | 44
GitHub UNIT-I

GitHub
GitHub is an immense platform for code hosting. It
supports version controlling and collaboration.

It is an American company. It hosts the source code


of your project in the form of different
programming languages and keeps track of the
various changes made by programmers.

Here, we will learn GitHub essentials like a repository, branches, commits, pull
requests, and more. Further, we will learn how to use GitHub and will create
our first project on it.

What is GitHub?
GitHub is an immense platform for code hosting. It supports version
controlling and collaboration and allows developers to work together on
projects. It offers both distributed version control and source code
management (SCM) functionality of Git. It also facilitates collaboration features
such as bug tracking, feature requests, task management for every project.

Essential components of the GitHub are:

o Repositories
o Branches
o Commits
o Pull Requests
o Git (the version control tool GitHub is built on)

Page | 45
GitHub UNIT-I

Advantages of GitHub
GitHub can be separated as the Git and the Hub. GitHub service includes
access controls as well as collaboration features like task management,
repository hosting, and team management.

o The key benefits of GitHub are as follows.


o It is easy to contribute to open source projects via GitHub.
o It helps to create an excellent document.
o You can attract the recruiter by showing off your work. If you have a
profile on GitHub, you will have a higher chance of being recruited.
o It allows your work to get out there in front of the public.
o You can track changes in your code across versions.

Features of GitHub
GitHub is a place where programmers and designers work together. They
collaborate, contribute, and fix bugs together. It hosts plenty of open source
projects and codes of various programming languages.

Page | 46
GitHub UNIT-I

Some of its significant features are as follows.

o Collaboration
o Integrated issue and bug tracking
o Graphical representation of branches
o Git repositories hosting
o Project management
o Team management
o Code hosting
o Track and assign tasks
o Conversations

GitHub vs. Git


Git is an open-source distributed version control system that is available for
everyone at zero cost. It is designed to handle minor to major projects with
speed and efficiency. It is developed to co-ordinate the work among
programmers. The version control allows you to track and work together with
your team members at the same workspace.

Page | 47
GitHub UNIT-I

While GitHub is an immense platform for code hosting, it supports version


controlling and collaboration. It allows developers to work together on
projects.
It offers both distributed version control and source code management (SCM)
functionality of Git. It also facilitates collaboration features such as bug
tracking, feature requests, task management for every project.

GitHub Git

It is a cloud-based tool developed It is a distributed version control tool


around the Git tool. that is used to manage the
programmer's source code history.

It is an online service that is used to Git tool is installed on our local machine
store code and push from the for version controlling and interacting
computer running Git. with online Git service.

It is dedicated to centralize source It is dedicated to version control and


code hosting. code sharing.

It is managed through the web. It is a command-line utility tool.

It provides a desktop interface called The desktop interface of Git is called Git
GitHub desktop GUI. GUI.

It has a built-in user management It does not provide any user


feature. management feature

It has a market place for tool It has a minimal tool configuration


configuration. feature.

Page | 48
GitHub UNIT-I

How to Use GitHub?


This question is prevalent for the developers who have never used GitHub.
This tutorial will assist you in overcoming this question. There is nothing to
worry about, the necessary steps for the using GitHub are as follows:

o Create a GitHub account


o GitHub login
o GitHub Repository
o Create a repository
o Create a file
o Create Branches

Create a GitHub Account


The first step to explore the benefits of GitHub is to create a GitHub account.
GitHub provides both the free and pro membership to its user. We can explore
many exciting and useful things in its pro account. We can explore unlimited
private repository and can control the user access.

To create a GitHub account, visit GitHub.

Click on the Signup option at the upper right corner.

Fill the necessary details under sign up like your name, email address, and
password. Then click on the Next: Select a plan option.

Page | 49
GitHub UNIT-I

Under the above option, you will see the plan. Select your plan, whether you
want to be a pro member, or would like to continue with a free account.

After selecting a plan, a confirmation link will send to your email address.
Activate your account by clicking on the received link, and you are ready to go
with GitHub.

GitHub Login
Log in to your GitHub account to use the GitHub service. To login to your
account, click on the Sign-in option on the upper right corner. It will ask you
for your email id and password. You can log in by entering your credentials. At
your first login, the homepage will ask you to create your first repository and
some other options like exploring the repository.

Page | 50
GitHub UNIT-I

GitHub Repository
The repositories are the data structures used by GitHub to store metadata for
files and directories. It encloses the collection of the files as well as the history
of changes made to those files. Generally, the repository is considered a
project folder. A single project can have more than one repository.

Create a repository
We can create an unlimited public repository and unlimited private repository
(For the pro user) on GitHub. To create a repository on GitHub, click on the '+'
symbol on the upper right corner on the login screen.

There are some other options available like import repository, gist,
organization, and new project. To create a repository, choose New
repository option from the given list. When you first log in to your account,
you will see the UI as follows:

Page | 51
GitHub UNIT-I

GitHub asks you to learn Git and GitHub without any code. It will ask you to
read the hello world guide for the first uses. Also, you can create a repository
(Project) from here.

Click on the new repository option and then fill the required details like
repository name, description, and select the access of this repository. You can
also initialize the repository with a README file. After filling all the details, click
on the Create Repository option. It will create a repository for you. Consider
the below image:

Page | 52
GitHub UNIT-I

Hence, we have created a public repository.

How to create a private repository?

We can set up a repository as private during initialization and make and


manage the accessibility of the repository. The private repository feature is
only allowed to pro members. Pro members can create unlimited repositories
and set access for them.

If we are on GitHub free account and want to change a repository's visibility


from public to private, we will lose access to features like protected branches
and GitHub Pages. The GitHub pages site automatically removed from our
account.

Hence we have created a repository and set its access. Now, we are all set to
create our first file. Let's create a file:

Page | 53
GitHub UNIT-I

Create a file
In GitHub, creating a file is a straight forward process. Let's create a file in our
newly created repository. Consider the below snap of our repository:

There are distinct options available to add files to the repository. GitHub
allows us to design and upload files. To create a file, click on the 'Create new
file' option. It will open a file structure, and it will look like as follows:

Page | 54
GitHub UNIT-I

Enter the file name on the box and type the code on the editor area.

At the bottom of the page, the commit options are available. Consider the
below snap:

In the above image, we can give the commit message in the first text area and
the description in the second text area. Also, we can specify whether we want
to commit it to the master branch or want to create a new branch.

Click on the 'commit new file' option. We have successfully added and
committed a new file to our repository.

We can edit and delete this file from our project. There are many options
available, like edit, delete, Raw, Blame, and history. Consider the below snap of
the file.

Page | 55
GitHub UNIT-I

Hence we have learned how to create a file and commit changes. Now we will
see how to create a new branch.

How to create a new branch?


Branches are the pointer to snapshots of changes. Branches are created for a
particular purpose like fixing a bug, testing, release, and more. To understand
the types of branches, visit Git Flow.

It is complex to merge the unstable code with the main code base and also
facilitates you to clean up your future history before merging with the main
branch.

The master branch is the default branch of the repository.

Let's understand how to create a branch in GitHub. To create a new 'feature'


branch, drag the branch option under the repository. This option will list the
available branches. A search option is available under the branch. It will search
for the requested branch if it is not in the repository, then it will create a new
branch by the given name. Consider the below image:

Also, we can create the branch when we add a file or make some commit. It
asks to commit the changes in the existing branch or create a new one.

Page | 56

You might also like