Cheryl Wolfe Web Services Administrator Tampa-Hillsborough County Public Library James Day Electronic Services Librarian Embry-Riddle Aeronautical University.

Presentation on theme: "Cheryl Wolfe Web Services Administrator Tampa-Hillsborough County Public Library James Day Electronic Services Librarian Embry-Riddle Aeronautical University."— Presentation transcript:

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 Hypertext Markup Language Turn text into images, links, and more Use to build webpages and Web content

4 HTML Examples Text Bold also Bold Italics also Italics Heading 1 Paragraph text with full break. or Images Links Link text

5 HTML Examples Structure Content goes here. Red text here. Tables Row 1 Cell 1 Row 1 Cell 2

6 HTML Examples Comments Comment Out <!-- Temporary Email Link library@erau.edu -->

7 HTML Examples Navigation List Books & More Learning & Research Events & Classes Services Locations Using the Library

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 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="#" 'chat.html','mywindow','width=500, height=620')">Chat with Us 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 How To Use a Browser's Inspect Feature Useful Code Editing Tools Helpful Resources on the Web

35 Helpful Resources http://goo.gl/XjpsQV