Basic (and Useful) HTML & CSS Break (to start on a new line) Horizontal Rule (a line across the page) Image (more on this later) Unordered List.

Slides:

Advertisements

Similar presentations

HTML Basics Customizing your site using the basics of HTML.

Advertisements

Computer Basics Hit List of Items to Talk About ● What and when to use left, right, middle, double and triple click? What and when to use left, right,

Cascading Style Sheets

Chapter 3 – Designing your web pages Dr. Stephanos Mavromoustakos.

HTML – A Brief introduction Title of page This is my first homepage. This text is bold  The first tag in your HTML document is. This tag tells your browser.

Web Pages and Style Sheets Bert Wachsmuth. HTML versus XHTML XHTML is a stricter version of HTML: HTML + stricter rules = XHTML. XHTML Rule violations:

Dreamweaver Cheat Sheet CSCI 100 – JW Ryder. CSCI 1002JW Ryder - Dreamweaver Notes Initial Site Set Up Goto W:\ drive – This is your web root directory.

Today’s objectives Site performance Padding, Margins, Borders

Customizing Evergreen’s Receipt Templates Terran McCanna PINES Program Manager Georgia Public Library Service

 CSS Presentation and layout is based on the CSS Box Model.  The CSS Box Model states that every element on a page is a rectangular box.  This includes:

Chapter 6 Web Typography

1 ADVANCED MICROSOFT POWERPOINT Lesson 5 – Using Advanced Text Features Microsoft Office 2003: Advanced.

The many uses of an iPad Here are a couple tips to keep in mind: Keep it simple: A website is a place for the exchange of information. It does not need.

Introducing Cascading Style Sheets  Cascading Style Sheet Basics  Creating Styles  Using Styles  Manipulating Styles  Text Formatting with CSS.

13 February Building a Web Page. HTML Files Two types of information Text Instructions on how to display Instructions are in the form of tags Tags are.

Developing a Basic Web Page with HTML

Glencoe Digital Communication Tools Create a Web Page with HTML Chapter Contents Lesson 4.1Lesson 4.1 Get Started with HTML (85) Lesson 4.2Lesson 4.2 Format.

HTML: PART ONE. Creating an HTML Document  It is a good idea to plan out a web page before you start coding  Draw a planning sketch or create a sample.

With Alex Conger – President of Webmajik.com FrontPage 2002 Level I (Intro & Training) FrontPage 2002 Level I (Intro & Training)

 Experiment with the Design features to get the look you want for your presentation.  Most design templates will keep the design the same on all your.

CSS (Cascading Style Sheets): How the web is styled Create Rules that specify how the content of an HTML Element should appear. CSS controls how your web.

Website Designing Using Ms FrontPage FrontPage 2003 Create a Web site with FrontPage.

 Using Microsoft Expression Web you can: › Create Web pages and Web sites › Set what you site will look like as you design it › Add text, images, multimedia.

Tutorial 6 Creating Tables and CSS Layouts. Objectives Session 6.1 – Create a data table to display and organize data – Modify table properties and layout.

Creating A Simple Web Page. Step 1- Open Dreamweaver & Create A New Page (File New) and blank.

Web Design Dreamweaver Semester 2 ATBs. ATB #1 What is a web site?

Tutorial 4: Using CSS for Page Layout. 2 Objectives Session 4.1 Explore CSS layout Compare types of floating layouts Examine code for CSS layouts View.

Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand.

Advanced Level Course. Site Extras Site Extras consist of four categories: Stationeries Site Trash Designs Components.

INTRODUCTION TO HTML5 Styling Text. Change the Font Size  You can use the font-size property to change the font size for a document’s text.  Instead.

Chapter 12 Cascading Style Sheets: Part II The Web Warrior Guide to Web Design Technologies.

Schoolwires 101 Frequently used “shortcut key” within the editor. ~Created by, Shannon Conley.

DREAMWEAVER Adding photos and other tips!. Making photo gallery  Gather ALL the photos you need into your images folder. (remember to copy the URL so.

IDs versus Classes Naming Your Tags for Maximum Functionality.

1 What is CSS?  CSS stands for Cascading Style Sheets  Styles define how to display HTML elements  Styles are normally stored in Style Sheets  Styles.

HTML 4 Foundation Level Course HyperText Markup Language Most common language used in creating Web documents. You can use HTML to create cross-platform.

XP Dreamweaver 8.0 Tutorial 3 1 Adding Text and Formatting Text with CSS Styles.

 A style sheet is a single page of formatting instructions that can control the appearance of many HTML pages at once.  If style sheets accomplished.

1 ADVANCED MICROSOFT EXCEL Lesson 9 Applying Advanced Worksheets and Charts Options.

 Word doc for you to download › Link at the beginning of class › 10 Questions › Answers to be added inline  Post to Sakai when completed › No resubmits.

Designing a Web Page with Tables. A text table: contains only text, evenly spaced on the Web page in rows and columns uses only standard word processing.

XP New Perspectives on Microsoft Office FrontPage 2003 Tutorial 1 1 Microsoft Office FrontPage 2003 Tutorial 1 – Creating a Web Site.

INTRODUCTORY Tutorial 4 Exploring Graphic Elements and Images.

INT222 - Internet Fundamentals Shi, Yue (Sunny) Office: T2095 SENECA COLLEGE.

1 CA201 Word Application Arranging and Printing Documents Week # 4 By Tariq Ibn Aziz Dammam Community college.

DIV, Span, CSS.

HTML GUIDE Press F5 and then Click on the links on the left to get to the section you want Section 1: Getting Started Section 2: Moving Banner Section.

Creating a Web Site Review of Concepts. Templates Templates are special HTML files that are used to quickly create pages on a web site. They contain the.

Tutorial 3 Adding and Formatting Text with CSS Styles.

Microsoft Expression Web 3 – Illustrated Unit F: Enhancing a Design with CSS.

Paper 3 Unit 15 – Web Authoring Software Choices Graphics Exporting Graphics Creating CSS RGB Colour CSS – Body, Table and TD Border Collapse Tables -

 Look especially at › File Tips and Shortcuts › Student video.

Microsoft Expression Web 3 – Illustrated Unit D: Structuring and Styling Text.

What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup.

Positioning Objects with CSS and Tables

Elements and Attributes. XHTML Elements The element contains special information that does not necessarily show up on the web page. The element determines.

Building a Website: Layout Fall Overall Structure: Home Page Title Section Title Frame Picture UNCP Math Menu Content Footer Contact Information.

CSS IS A LANGUAGE DESIGNED TO TARGET HTML ELEMENTS AND NODES BY TYPE, CLASS, ID AND VALUE, AND CHANGE THEIR VALUES CSS – change how your HTML looks and.

Schoolwires – District 205 created by Andrew Chidester.

 Add one element at a time  If it doesn’t do what you want, › Delete it › DON’T just keep piling on more items.

Text Elements. We've already learned about the,,,, and elements. Now let's learn some elements that we'll use to present actual text content on our web.

Introduction to CSS Layout

The Box Model in CSS Web Design – Sec 4-8

Dreamweaver – Project #1

The Box Model in CSS Web Design – Sec 4-8

DreamWeaver CS4.

Styles and the Box Model

Exercise 9 Skills You create and use styles to create formatting rules that can easily by applied to other pages in the Web site. You can create internal.

Session IV Chapter 15 - How Work with Fonts and Printing

Presentation transcript:

Basic (and Useful) HTML & CSS Break (to start on a new line) Horizontal Rule (a line across the page) Image (more on this later) Unordered List (bullet points) Ordered List (numbered) List Item (required for both unordered and ordered lists) Enclosures to format fonts Enclosures to format borders (block-level) 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 # (2 pixels think, solid [not dashed], and black [only option?])

Inserting an Image Image src=""path to image (required) width=""width in pixels (optional) height=""height in pixels (optional) Examples: Image on the web: Image on local computer: Image on network server: 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!

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) (shows plain text under barcode lines) (just barcode lines) Code to make it happen: *%PATRON_BARCODE%* (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

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: %price% In the “Footer” box: Cost of buying these items: $ Cost of using the library: Priceless! This does not display in the preview window, or when not using Mozilla print strategy

Special Macros and Conditional Printing “Swap Slip” - Allows changing out parts of a slip based on a different part of the slip. %some_replace% Code1 Code2 This does not display in the preview window, or when not using Mozilla print strategy

Special Macros and Conditional Printing More information is on the MassLNC site at: A PDF version is at: