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

FrontendwebsitehtmljavacssInternship.pptx

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

More Related Content

Similar to FrontendwebsitehtmljavacssInternship.pptx (20)

Recently uploaded (20)

FrontendwebsitehtmljavacssInternship.pptx