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

Links

Structure

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

Tables

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

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

External JavaScript

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