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.

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

Images

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

Links

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

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>

Row 1 Cell 1 Row 1 Cell 2
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>
-->
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>

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

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

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

JavaScript

  • 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=”window.open(‘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 – www.codecademy.com/en/tracks/htmlcss

W3Schools – HTML, CSS, and JavaScript – www.w3schools.com

Troubleshooting

Stack Overflow – http://stackoverflow.com

GitHub – https://github.com

CodePen – http://codepen.io

Free Coding Courses & Tutorials

Code.org – https://code.org
Codecademy – https://www.codecademy.com
Coursera – https://www.coursera.org
Free Code Camp – http://www.freecodecamp.com
Hour of Code – https://hourofcode.com/us
KhanAcademy – https://www.khanacademy.org
Lifehacker Learn to Code: The Full Beginner’s Guide – http://lifehacker.com/5744113/learn-to-code-the-full-beginners-guide

Paid Online Courses and Bootcamps

Bloc Apprenticeship – https://www.bloc.io
Code School – https://www.codeschool.com
Dev Bootcamp – http://devbootcamp.com
General Assembly – https://generalassemb.ly
Launch School – https://launchschool.com
Lrn app – https://itunes.apple.com/us/app/lrn-learn-to-code-at-your/id1019622677?mt=8
Lynda.com – http://www.lynda.com
Skillcrush – http://skillcrush.com
The Firehose Project – https://www.thefirehoseproject.com
Treehouse – https://teamtreehouse.com/join/now
Udacity – https://www.udacity.com
Udemy – https://www.udemy.com