Code For Every Librarian
- 1. Cheryl Wolfe Web Services Administrator Tampa-Hillsborough County Public Library James Day Electronic Services Librarian Embry-Riddle Aeronautical University Code For Every Librarian CSS – HTML – JavaScript
- 2. HTML
- 3. HTML • Hypertext Markup Language • Turn text into images, links, and more • Use to build webpages and Web content
- 4. HTML Examples Text <b>Bold</b> also <strong>Bold</strong> <i>Italics</i> also <em>Italics</em> <h1>Heading 1</h1> <p>Paragraph text with full break.</p> <br> or <br /> Images <img src=“image.jpg” border=0 alt=“image subject in words” /> Links <a href=“new-page” >Link text</a> <a href=“new-page” ><img src=“go.jpg” border=0 alt=“Go” /></a>
- 5. HTML Examples Structure <div id=“unique-name”>Content goes here.</div> <span font-color=“#FF0000;”>Red text here.</span> Tables <table> <tr> <td>Row 1 Cell 1</td> <td>Row 1 Cell 2</td> </tr> </table>
- 6. HTML Examples Comments <!-- Start LibAnswers Chat Widget --> <div id="libchat_74ba5f"></div> <!-- End Widget --> Comment Out <!-- Temporary Email Link <a href="mailto:library@erau.edu">library@erau.edu</a> -->
- 7. HTML Examples Navigation List <nav> <ul class="primary-nav"> <li><a href="/hcplc/books/">Books & More</a></li> <li><a href="/hcplc/research/">Learning & Research</a></li> <li><a href="/hcplc/events/">Events & Classes</a></li> <li><a href="/hcplc/services/">Services</a></li> <li><a href="/hcplc/locations/">Locations</a></li> <li><a href="/hcplc/using/">Using the Library</a></li> </ul> </nav>
- 8. How To Remove The Pin Field And Edit Text Proxy Server Login Page
- 9. How To Add Links For Database Authentication List of Databases
- 10. How To Change The Text On A Web Form Purchase Suggestion Form
- 11. How To Add A Favicon And Touch Icons Home Page
- 12. How To Add a Table to a Blog Post Library Technology Launchpad
- 13. How To Format Text In LibWizard (LibSurveys) LibWizard Login
- 14. CSS
- 15. CSS • Cascading Style Sheets • Apply styles to HTML • Use to style and design webpages
- 16. CSS Examples Change font size: { font-size: 14px; } Change font color: { color: #09F; } Change background color: { background-color: #A39161; } Hide an element: { display: none; } Mark as important: { display: none !important; }
- 17. CSS Examples Positioning .float-left { float: left; } .float-right { float: right; } Responsive Typography body { font-size: 100%; } h1 { font-size: 150%; } h2 { font-size: 125%; } h3 { font-size: 110%; } p { font-size: 100%; } .note { font-size: 90%; font-style: italic; }
- 18. CSS Examples Media Queries with Grid Layout @media all and (max-width: 59em) { .column-span2,.column-span3,.column-span4, .column- span5,.column-span6,.column-span7, .column-span8,.column- span9,.column-span10 { float:none; clear:both; margin: .5em 2.0833333333333%; width:auto; } Background Image body { background: #f5f5f5 url(/hcplc/images/topborder.png) repeat-x center top; }
- 19. How To Change Text In A LibGuide Asset (Database Description) LibGuides Login
- 20. How To Hide Page Elements in LibAnswers Recommended Websites
- 21. How To Update A Blog Template 2020 Vision Strategic Planning Process, 2015-2016
- 22. JavaScript
- 23. JavaScript (JS) • Works with HTML and CSS • Most widely used language on the Web • Use to add dynamic and interactive elements to websites
- 24. JavaScript Examples <a href="#" onclick="window.open('chat.html','mywindow','width=500, height=620')">Chat with Us</a> <script src="/hcplc/tech/jscripts/hcplc_allpages.js" language="javascript"></script> http://www.hcplc.org/hcplc/tech/jscripts/hcplc_allpages.js
- 25. How To Add A Library Catalog Search Box Home Page
- 26. How To Add Google Analytics Home Page
- 27. How To Add Google Maps Find a Library
- 28. How To Add Widgets Hot New Titles
- 29. How To Change The Default Results From 10 To 20 In Library Catalog (JQuery) Catalog Search
- 30. How To Open A New Custom-Sized Window JavaScript Link Example
- 31. How To Create An Alert JavaScript Alert Example
- 32. How To Customize the ProQuest Summon Service Summon JavaScript Example
- 33. Helpful Tips
- 34. Helpful Tips • How To Use a Browser's Inspect Feature • Useful Code Editing Tools • Helpful Resources on the Web