Code For Every Librarian

CSS – HTML – JavaScript

This post contains content from a presentation I did with Cheryl Wolfe, Web Services Administrator, Tampa-Hillsborough County Public Library titled Code For Every Librarian at the Florida Library Association Conference 2016.


  • Hypertext Markup Language
  • Turn text into images, links, and more
  • Use to build webpages and Web content

HTML Examples


<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 /> for a line break.


<img src=“image.jpg” border=0 alt=“image subject in words” />


<a href=“new-page.html” >Link text</a>
<a href=“new-page.html” ><img src=“go.jpg” border=0 alt=“Go” /></a>


<div id=“unique-name”>Content goes here.</div>
<span font-color=“#FF0000;”>Red text here.</span>


<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>

Row 1 Cell 1 Row 1 Cell 2
<!-- Start LibAnswers Chat Widget -->
 <div id="libchat_74ba5f"></div>
<!-- End Widget -->
Comment Out
<!-- Temporary Email Link
 <a href=""></a>
Navigation List

<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>


  • 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; }


.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; }

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; }


  • Works with HTML and CSS
  • Most widely used language on the Web
  • Use to add dynamic and interactive elements to websites

JavaScript Examples

Inline JavaScript

<a href=”#” onclick=”‘chat.html’,’mywindow’,’width=500,
height=620′)”>Chat with Us</a>

External JavaScript

<script src=”/hcplc/tech/jscripts/hcplc_allpages.js” language=”javascript”></script>

Helpful Tips

How To Use a Browser’s Inspect Feature

You can examine a webpage’s code and content and experiment making changes right in your browser.  Right-click on a webpage and select “Inspect” in Chrome, Edge, and Internet Explorer, or “Inspect Element” in Firefox.

Useful Code Editing Tools

Notepad++ is useful for editing code.  It makes reading code easier by color-coding different parts of HTML, CSS, and JavaScript.  It also allows you to view code groupings and collapse sections of code.

Helpful Resources on the Web

Download and print the Helpful Resources PDF.

Codecademy – HTML and CSS –

W3Schools – HTML, CSS, and JavaScript –


Stack Overflow –

GitHub –

CodePen –

Free Coding Courses & Tutorials –
Codecademy –
Coursera –
Free Code Camp –
Hour of Code –
KhanAcademy –
Lifehacker Learn to Code: The Full Beginner’s Guide –

Paid Online Courses and Bootcamps

Bloc Apprenticeship –
Code School –
Dev Bootcamp –
General Assembly –
Launch School –
Lrn app – –
Skillcrush –
The Firehose Project –
Treehouse –
Udacity –
Udemy –