FrontendwebsitehtmljavacssInternship.pptx
aamanattar01
8 views
33 slides
May 18, 2024
Slide 1 of 33
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
About This Presentation
This is a presentation of the internship in full stack done in SV Mind logic. learning how to build basic website. Clearing the basics of website. Focuses more on front end
Slide Content
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 : [email protected] Mobile Number : 7709054041 Company Services : Web Design, Web Development, Software Development, Mobile Application, SEO Optimization, Domain & Hosting
INTERNSHIP CERTIFICATE
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 HTML CSS Bootstrap 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><!--your webpage content and markup--></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 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.
Password: <input type= “password” name= “”/> Used to add password field in the form. 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”). Reset: <input type= “reset” value= “”/> Used to add the reset button in the form. This button is used to clear the user entered data. 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; border: 2px solid #ccc; } Access the id under the tag: id= “title” 3. Element/tag selector Used to apply design briefly to any tag. Ex: h1 { color: red; border: 2px solid #ccc; }
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 Search on google getbootstrap . Open getbootstrap.com website. Choose include via CDN option. Copy bootstrap CSS link tag and paste under the head tag. Copy javascript bootstrap code and paste under the head tag. Layouts : Container : contains all div of web pages, container is a parent or base layout access. Row : Row is use to add the rows. One row contains total 12 column.
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>
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)
Download
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 8
- Slides 33
- Age 561 days
Related Slideshows
23
Earthquakes_Type of Faults_Science G8.pptx
OctabellFabila1
31 views
15
Quiz #1 Science 10 in the first quarter for jhs
HendrixAntonniAmante
30 views
9
Astronomy history from long ago till doday
ssuserbd9abe
29 views
9
Great history of astronomy from long ago till today
ssuserbd9abe
27 views
20
EARTHQUAKE-DRILL.powerpoint.............
chalobrido8
30 views
9
History of astronomy from old times to the present times
ssuserbd9abe
30 views