Cheryl Wolfe
Web Services Administrator
Tampa-Hillsborough County Public Library
James Day
Electronic Services Librarian
Embry-Riddle Aeronautical University
Code For EveryLibrarianCSS – HTML – JavaScript
HTML
HTML
•Hypertext Markup Language
•Turn text into images, links, and more
•Use to build webpages and Web content
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>
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>
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>
-->
HTML Examples
Navigation List
<nav>
        <ul class="primary-nav">
            <li><a href="/hcplc/books/">Books &amp; More</a></li>
            <li><a href="/hcplc/research/">Learning &amp; Research</a></li>
            <li><a href="/hcplc/events/">Events &amp; 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>
How To Remove The Pin Field And Edit Text
How To Add Links ForDatabase Authentication
How To Change The Text On A Web Form
How To Add A Favicon And Touch Icons
How To Add a Table to a Blog Post
How To Format Text In LibWizard(LibSurveys)
CSS
CSS
•Cascading Style Sheets
•Apply styles to HTML
•Use to style and design webpages
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; }
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; }
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: .5em2.0833333333333%; width:auto; }
Background Image
body { background: #f5f5f5 url(/hcplc/images/topborder.png)repeat-x center top; } 
How To Change Text In A LibGuide Asset(Database Description)
How To Hide Page Elements in LibAnswers
JavaScript
JavaScript (JS)
•Works with HTML and CSS
•Most widely used language on the Web
•Use to add dynamic and interactive elements towebsites
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>
How To Add A Library Catalog Search Box
How To Add Google Analytics
How To Add Google Maps
How To Add Widgets
How To Change The Default ResultsFrom 10 To 20 In Library Catalog (JQuery)
How To Open A New Custom-Sized Window
How To Create An Alert
How To Customize the ProQuest SummonService
Helpful Tips
Helpful Tips
•How To Use a Browser's Inspect Feature
•Useful Code Editing Tools
•Helpful Resources on the Web
Helpful Resources