1 / 13

Basic HTML & CSS: Introduction, Tags, and Image Formatting

Learn the basics of HTML and CSS, including tags like <br/>, <hr/>, <img>, <ul>, <ol>, <li>, <span>, <div>, <blockquote>, and styling properties like font-family, font-size, text-align, and border. Also, learn how to insert and format images in HTML. This article also covers printing barcodes and using special macros for conditional printing.

randic
Download Presentation

Basic HTML & CSS: Introduction, Tags, and Image Formatting

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Basic (and Useful) HTML & CSS • <br /> Break (to start on a new line) • <hr /> Horizontal Rule (a line across the page) • <img /> Image (more on this later) • <ul></ul> Unordered List (bullet points) • <ol></ol> Ordered List (numbered) • <li></li> List Item (required for both unordered and ordered lists) • <span></span> Enclosures to format fonts • <div></div> Enclosures to format borders (block-level) • <blockquote></blockquote> Similar to DIV, but has inherent properties • style="" Tag for formatting (always separate and end with a semi-colon) • font-family: arial, "Times New Roman" "Free 3 of 9" • font-size: 12pt, 2em - play with the numbers until you find the right size • text-align: left, center, right (adjusts font within a block, not the block itself) • border: 2px solid #000000 (2 pixels think, solid [not dashed], and black [only option?])

  2. Inserting an Image • <img /> Image • src="" path to image (required) • width="" width in pixels (optional) • height="" height in pixels (optional) • Examples: • Image on the web: <imgsrc="http://chelmsfordlibrary.org/assets/images/cpl-logo.gif" /> • Image on local computer: <imgsrc="file:///C:/Users/reference01/Desktop/cpl-logo.gif " /> • Image on network server: <imgsrc="file:///S:\public_html\assets\images\cpl-logo.gif " /> • Images from the web or network are easy to update once for all computers, but might be slower • Images from local computer are most reliable, but also need to be managed on each individual computer • Slashes can go either way • Remember receipt printers (probably) only print in black & white • This lets you add QR codes, too!

  3. Printing a Scannable Barcode • This lets you print a barcode on a receipt, that can be scanned • Saves staff from retyping patron barcode if they don't have they're card • Will work with self-check machines too • Can use for patron or item barcodes • Requires a barcode font to be installed on the computer (each computer) • http://www.dafont.com/barcode-font.font (shows plain text under barcode lines) • http://www.dafont.com/3of9-barcode.font (just barcode lines) • Code to make it happen: • <span style="font-family:'Free 3 of 9';font-size:40pt;">*%PATRON_BARCODE%*</span> • (replace "font-family" with other font name if using a different style of barcode) • Tips: • Barcode number (%PATRON_BARCODE%) must have an * before and after it to trigger scanner • There is a minimum size that will work, so play around • Will still work if the receipt gets crinkled

  4. Special Macros and Conditional Printing • “Sum” - Allows for summing of values throughout a slip. The sum sources can include a single leading non-digit character, such as a dollar sign. The fixed="2" in the example below tells the code to always include exactly 2 decimal places when placing the sum into the field. • In the “Line Item” box: • <span style="display: none;" sum="sum1">%price%</span> • In the “Footer” box: • <blockquote style="font-size:11pt;text-align:center;border: 2px solid #000000;"> • Cost of buying these items:<br />$<span sumout="sum1” fixed="2"></span><br /> • Cost of using the library:<br />Priceless! • </blockquote> • This does not display in the preview window, or when not using Mozilla print strategy

  5. Special Macros and Conditional Printing • “Swap Slip” - Allows changing out parts of a slip based on a different part of the slip. • <div altgroup="print1" altid="main"> • <span altcheck="print1">%some_replace%</span> • <!-- Other slip stuff --> • </div> • <div altgroup="print1" altid="alt1" style="display: none"> • <!-- Alt slip stuff --> • </div> • <div altgroup="print1" altid="alt2" style="display: none"> • <!-- Second alt slip stuff --> • </div> • <div style="display: none"> • <span alt="print1" altshow="alt1">Code1</span> • <span alt="print1" altshow="alt2">Code2</span> • </div> • This does not display in the preview window, or when not using Mozilla print strategy

  6. Special Macros and Conditional Printing • More information is on the MassLNC site at:http://masslnc.cwmars.org/node/2528 • A PDF version is at: • http://www.chelmsfordlibrary.org/temp/EGReceiptTricks-MVLC.pdf

More Related