FrontendwebsitehtmljavacssInternship.pptx

VSM’S Somashekhar R. Kothiwale Institute Of Technology
Nipani- 591237
Department of Computer Science & Engineering
Submitted By: Mr Aaman R Attar
USN: 2VS22CS001
Under the guidance of: Prof. Rahul Palkar

CONTENTS
• Company profile
• Internship certificate
• Website
• Languages
• Html
• CSS
• JavaScript
• Bootstrap
• Projects
• Conclusion
• Reference

COMPANY NAME: S V MIND LOGIC
 Name: S V Mind Logic
 Address: Near Kittur Rani Chennamma Circle, Nipani, Karnataka, 591237.
 Website: www.svmindlogic.com
 Email: contactus@svmindlogic.com
 Mobile Number: 7709054041
 Company Services: Web Design, Web Development, Software Development, Mobile Application,
SEO Optimization, Domain & Hosting

WHAT IS WEBSITE?
• Website is a collection of webpages.
 Types of webpages:
1. Static Webpage:
• There is no user interaction with the webpage.
• There is no database.
• Ex: read only data.

2. Dynamic Webpage:
• There is user interaction with the webpage.
• There is database present.
• Ex: Facebook, Instagram, etc.

LANGUAGES
o HTML
o CSS
o Bootstrap
o Java script

HTML
Hyper Text Markup Language.
HTML is a use to create static webpage.
HTML is a client-side scripting language.
File extension of html is .html or .html.
HTML contains predefine tags.
Structure of html
<html>
<head><title>Title of your HTML page</title></head>
<body></body>
</html>

HTML TAGS AND PROPERTIES
 Bgcolor Property: This property is used to set background color to any tag/ page.
<body bgcolor = “blue”>
 Heading Tags: This is used to give a heading in a page.
<h1>largest font size</h1>…….<h6>smallest font size</h6>
 Align Property: This property is used to set the align to any tag. <h1 align= “center”>heading level 1</h1>
 Bold Tag: <b> This tag used to display text in bold format.</b>
 Italic Tag: <i>This tag used to display text in italic format.</i>
 Underline Tag: <u>This tag is used for to display underline to the text.</u>
 <hr>:This tag is used to display the horizontal line

 <br>:This tag is used to break the line
 Marquee Tag: < marquee direction= “right” bgcolor= “yellow” >
This tag is used to move the text or image in webpage.</marquee>
 Hyperlink Tag: This tag is used to give the link between one page to another page.
<a href= “first.html” target= “_blank”>Go To First</a>
 Image Tag: Used to display image <img src= “images/card.png” width= “100%” height= “400px” />
 Table tag:
• This tag is used to add table in a page.
• Table tag is collection of rows and columns.
• <tr> this tag is used for table rows</tr>
<table border= “2px” cellpadding= “5px” cellspacing= “8px”>
<tr><th>This tag is used for table heading</th></tr>
<tr><td>This tag is used for table column</td></tr>
</table>

 List tag
• This tag is used to display data in list format in a page
• There are 2 types of list
1. Ordered list
Display data in ordered format like numbers, alphabets, roman, etc.
Ex:
<ol>
<li>red</li>
<li>green</li>
</ol>
2. Unordered list
Display data in bullets format.
Ex:
<ul>
<li>red</li>
<li>green</li>
</ul>

 Form tag
• Form tag is used to create a form, login, contact form, etc.
<form name= “” action= “” method= “”> </form>
• name property is used for to set the name to the form. (ex: name= “loginform”)
• action property is used to set the path after click on the submit button page control will pass to assign path. (ex:
action= “first.html”)
• method property is used to get and post data.
 Input tags
1. Text:<input type= “text” name= “” />
• Used to add text field in the form.
• Type property is used to specify which type of input tag.
• Name property is used to give the name to the input tag.

2. Password:<input type= “password” name= “”/>
• Used to add password field in the form.
3. Submit Button:<input type= “submit” value= “”/>
• Used to add submit button in the form.
• Value property is used to set lable on the button. (ex: value= “login”).
4. Reset:<input type= “reset” value= “”/>
• Used to add the reset button in the form.
• This button is used to clear the user entered data.
5. Radio Button:<input type= “radio” name= “gender”/>male
• Used to add radio button in the form.
• Radio button selects only one option.

6. Checkbox:<input type= “checkbox” name= “ssc”/>SSC
• Used to add checkbox in the form.
• Checkbox can select multiple options.
7. Select Tags:Used to add dropdown in the form.
Course:
< select >
<option>Diploma</option>
<option>BE</option>
</select>
8. Textarea:Used to add textarea in the form.
< textarea rows= “6” cols= “10”></ textarea >

CSS
 CSS stands for Cascading Style Sheet.
 CSS is used for to design the webpages or html tags.
 CSS types:
1. Inline CSS
• Used to design the individual tags in a page.
• Ex: <h1 align= “center” style= “color: red; background-color:yellow;”>heading level 1<h1>
2. Internal CSS
• Used to design whole page.
• Internal css code write under the <head>tag using <style> tag.

3. External CSS
• Used to design the whole project.
• Write css code in the file
.btn-sv
{
background-color: aqua;
color: red;
}
• Save the file under the root folder as “style.css”.
• Include css file under the head tag using link tag
• <link rel= “stylesheet” href= “style.css”/>
• Access the class in a tag:
• <input type= “submit” value= “Login” class= “btn-sv”/>

 Selectors in CSS
1. Class selector
• It is a collection of css properties.
• Class can use multiple time in a page.
• Declaration:
.title
{
color: red;
border: 2px solid #ccc;
}
• Access the class under any tag:
class= “title”
2. Id selector
• It is a collection of css properties.
• Id is used only one time in a page.
• Declaration:
#title
{
color: red;
}
• Access the id under the tag:
id= “title”
3. Element/tag selector
• Used to apply design briefly to any tag.
• Ex:
h1
{
color: red;
}

JAVASCRIPT
 JavaScript is used to perform the form validation.
 Steps to perform empty field validation:
• Set id to every input tag.
<input type= “text” name= “username” id= “username” />
• Under the form tag using onsubmit method call validation_form(); function.
<form name= “loginform” action= “first.html” method= “post” onsubmit= “return validation_form();”>
• document is a javascript object used to call the functions.
• getElementById is a javascript method used for retrieve the user entered form value.
• alert is used for display the message.

• Declare definition of validation_form() under the head tag using
javascript.
<script type= “text/javascript”>
Function validation_form(){
var username=
document.getElementById(‘username’).value;
var password=
document.getElementById(‘password’).value;
if(username== ‘’){
alert(“Enter Username”);
return false;
}
if(password== ‘’){
alert(“Enter Password”);
return false;
}
}
</script>

BOOTSTRAP
 Bootstrap is a open source free CSS frame work or CSS library use to design mobile friendly responsive website.
 Steps to configure or include bootstrap
o Search on google getbootstrap.
o Open getbootstrap.com website.
o Choose include via CDN option.
o Copy bootstrap CSS link tag and paste under the head tag.
o Copy javascript bootstrap code and paste under the head tag.
o Layouts:
 Container: contains all div of web pages, container is a parent or base layout access.

 Col: Col is use to add the column in a row.
<div class=”container-fluid”>
<div class=”row”>
<div class=”col-3”>
<img src=”images/logo.png”>
</div>
<div class=”col-9”>
<h1>Website/Software/Mobile App</h1>
</div>
</div>
</div>

o Components:
 Navbar: Navbar is use to add the menu bar in a page.
 Carousel: Carousel is use to add slide show images in a page.
 Alerts: Alerts is use to add alert strip in a page.
 Card: Card is use to add cards in a page.

PROJECTS
WEBSITE FOR TOP TEN ENTRPRENUERS

CONCLUSION
In review this internship has been an excellent and rewarding experience.
One main thing that I have learned through this internship is time management skills as well
as self-motivation. From this internship and time management I had to learn how to motivate
myself through being in the work for so many hours. This was an excellent experience and I
hope that other interns got as much out of it.

REFERENCES
• Referenced the HTML tags from:
HTML Tutorial (w3schools.com)
• Referenced the CSS code from:
CSS Tutorial (w3schools.com)
• Referenced the JavaScript code from:
JavaScript Tutorial (w3schools.com)
• Referenced the Bootstrap code from:
Bootstrap 5 Tutorial (w3schools.com)
Bootstrap · The most popular HTML, CSS, and JS library in the world. (getbootstrap.com)

FrontendwebsitehtmljavacssInternship.pptx

Recommended

Recommended

More Related Content

Similar to FrontendwebsitehtmljavacssInternship.pptx

Similar to FrontendwebsitehtmljavacssInternship.pptx (20)

Recently uploaded

Recently uploaded (20)

FrontendwebsitehtmljavacssInternship.pptx