Creating a Job Aid using HTML and CSS

Size: px
Start display at page:

Download "Creating a Job Aid using HTML and CSS"

Transcription

1 Creating a Job Aid using HTML and CSS In this tutorial we will apply what we have learned about HTML and CSS. We will create a web page containing a job aid about how to buy from a vending machine. Optionally, you can create a job aid about a different topic. As shown in the image to the right, the job aid will include several steps. Each step is composed of: a) an action b) description or explanation c) an image or graphic illustrating the step It is assumed that you have the information for each step and the corresponding images prior to creating the web page. A demo of the job aid is located at: Section 1: Preparing the Folder Structure 1. In your local computer, create a folder called jobaid (optionally, you can give it any other name). 2. Inside this folder, create two more folders: css and img 3. Download the photos from: And move them into the img folder (optionally, you can put there your own photos or illustrations for the job aid you will be creating). Your folder structure should look like the following image: 1

2 4. Open Dreamweaver and create a new HTML5 file. For doing this, in the Dreamweaver top menu select File > New, then select HTML under Page Type and select HTML5 as Doc Type: 5. You should see a new document with the following HTML code: <!doctype html> <html> <head> <meta charset="utf- 8"> <title>untitled Document</title> </head> <body> </body> </html> 6. Save the file as index.html within the jobaid folder Section 2: Writing the Job Aid Document 1. The index.html file will include the job aid information. Let s give a title to the web page. In the HTML code replace: <title>untitled Document</title> by, <title>job Aid: Buying from a Vending Machine</title> Notice that this title does not appear as part of the content of the page; it just appears as the title of the browser s tab. 2

3 2. Copy and paste the following code within the <body> tag. This code includes the main header, the subheader and the content for the first step of the job aid. <h1> How to Buy from a Vending Machine </h1> <h2> By John Doe </h2> <br /> <div class="steptitle"> Step 1: Select Visually the Item of Choice </div> <div class="stepcontent"> <div class="stepdescription"> <p>scan through the different snacks and check whether there is something that might satisfy your cravings. The types of products that you can buy vary from machine to machine; however, most of them include some kind of chips, chocolates, cookies, and gums. Some machines offer healthy snacks such as baked chips, granola bars, and peanuts.</p> <p>even though most vending machines contain fresh products, it might be convenient to try to visually double check the expiration date of the snack you want to buy.</p> <p>also, it is important to <strong>inspect visually whether the item of choice is all the way to the front in the dispensing coil</strong>, otherwise, the item will not be push out when the coil spins.</p> </div> <div class="stepimage"> <img src="img/step1.png" /> </div> <br style="clear:both"> </div> <!--stepcontent--> Note: Observe that the above code is using four div containers: one for the step title and another one for the step content. There are two more div containers within the stepcontent container. In general, it is convenient to use div containers when you want to change the style of an HTML document or when having a layout with two or more columns: The step title will use a gray background and the description and images are using two columns. 3

4 3. Open the index.html file in a web browser. You will notice that it does not have any formatting yet and that the image is not displayed next to the description but below it. This is because we haven t given it any style yet. Adding the content for the remaining steps would basically consists of copying and pasting the steptitle and stepcontent div containers multiple times and replacing the content for each step. However, before doing that, let s add the style that will be used in all steps. Section 3: Adding the Style Document 1. The CSS document for this web page is available at: Download it and save it within the css folder that you created in step We need to link this external CSS file within our index.html document. To do that, open the index.html file and add the following line within the <head> </head> tags: <link href="css/jobaid.css" rel="stylesheet" type="text/css" > 3. Open the index.html file in a web browser and you should be able to see the CSS style now. If you don t see it, make sure that you downloaded the jobaid.css file into the right folder and that the file has the right name and extension. 4. Let s analyze the CSS rules one by one and let s make a few changes to them. Open the jobaid.css file in Dreamweaver. The first section surrounded by body applies formatting to the whole document, including the background color, text color, text size, and font family. Remove the background color (highlighted in yellow below). DO NOT remove the colon symbol located after background: and DO NOT remove the semicolon located after the color. Once you delete #d0d5cd, type a hash tag (#) and a color picker should be automatically displayed. Select the color of your choice, save the file, and you should see that the background of the page changes to the color you selected. Explore changing the other rules too (text color, font size and font family). body { background: #d0d5cd; /* background color */ color: #444; /* text color for whole document */ font-size: 12px; font-family: Verdana, Geneva, sans-serif; } 4

5 5. The following CSS rules below body corresponds to the H1 and H2 heading elements. Notice that a rule can be applied to multiple HTML elements by listing them separated by a comma. For this specific example, the style for the H1 and H2 headings is centering the content. You can replace center by left or right to see the different alignment. You could also experiment adding more rules such as a background or text color. h1, h2 { text-align:center; /* centers h1 and h2 content */ } 6. The next CSS rule in the jobaid.css file corresponds to an element that we haven t added yet, the #wrapper: #wrapper { width: 900px; margin: 0 auto; /* centers wrapper */ border: solid 0px black; } If you open the index.html file in a browser and maximize the browser window, you will notice that the content of step 1 takes the whole width of the monitor. To avoid having web pages with very long lines of text, it is convenient to wrap the whole content of a web page within a div container and restrict its width. To add a wrapper div container, add the following line right below to the <body> tag: <div id="wrapper"> Notice that id= wrapper does not have the hash tag, however the CSS rule does. Close the wrapper container with the following line right before the closing </body> tag: </div> <!--closing the wrapper --> Save the file and jobaid.css file and refresh the index.html file in your browser to see the latest changes. Explore changing the width of the #wrapper and also the width of the border. 7. The next CSS rule applies formatting to the step title. It has some padding, the text alignment is to the left, the font size is little bi bigger (16 px) and the font weight is bolder. Observe that the rule name is preceded by a dot:.steptitle The dot is used when the CSS rule is applied to a class and the hash tag is used when it is applied to an id. An id is used to distinguish unique HTML elements, so, use it when you want to apply a specific style to just one element in the entire document. A class is used when the same style is going to be applied multiple times. For instance, in the job aid web page there will be several steps and 5

6 each step will have a title, so we will be applying the steptitle style multiple times..steptitle { padding:4px; padding-top:10px; text-align:left; font-size:16px; font-weight:bold; border-top-left-radius: 10px; Another style that we are applying to the steptitle class is the border- radius to round the corners. In this case, we are rounding the top left and top right corners. You can explore changing its width from 10px to any other size, the bigger the more rounded. 8. The.stepDescription and the.stepimage CSS rules are also preceded by a dot because they are also class rules. An important CSS rule in both of them is float:left. In Web design, to have a layout with multiple columns, each column must be surrounded by a div and each div must be floated, preferably to the left. Note: When having floating elements, it is necessary to clear the floating after there are no more columns to be floated. In the index.html document, the floating is cleared with the following line: <br style="clear:both"> Section 4: Add the remaining steps Once you are satisfied with your new styles, you can keep adding the remaining steps to your job aid. Just copy and paste the steptitle and stepcontent div containers and make sure to include them within the closing </wrapper>. The style should be automatically applied to any new steps that you add. 6

To illustrate how to set TAG styles the <body> and <h1> tags (for the BODY and the HEADING 1 styles) will be adjusted.

To illustrate how to set TAG styles the <body> and <h1> tags (for the BODY and the HEADING 1 styles) will be adjusted. Chapter The formatting of CSS pages is carried out by setting the required styles. There are four different types of styles: Class which are custom styles that you create. You did this in Chapter 12. Tag

More information

AGENDA :: MULTIMEDIA TOOLS :: (1382) :: CLASS NOTES

AGENDA :: MULTIMEDIA TOOLS :: (1382) :: CLASS NOTES CLASS :: 13 12.01 2014 AGENDA SIMPLE CSS MENU W/ HOVER EFFECTS :: The Nav Element :: Styling the Nav :: UL, LI, and Anchor Elements :: Styling the UL and LI Elements TEMPLATE CREATION :: Why Templates?

More information

CSS means Cascading Style Sheets. It is used to style HTML documents.

CSS means Cascading Style Sheets. It is used to style HTML documents. CSS CSS means Cascading Style Sheets. It is used to style HTML documents. Like we mentioned in the HTML tutorial, CSS can be embedded in the HTML document but it's better, easier and neater if you style

More information

Lab 1: Introducing HTML5 and CSS3

Lab 1: Introducing HTML5 and CSS3 CS220 Human- Computer Interaction Spring 2015 Lab 1: Introducing HTML5 and CSS3 In this lab we will cover some basic HTML5 and CSS, as well as ways to make your web app look and feel like a native app.

More information

Dreamweaver CS3 Lab 2

Dreamweaver CS3 Lab 2 Dreamweaver CS3 Lab 2 Using an External Style Sheet in Dreamweaver Creating the site definition First, we'll set up the site and define it so that Dreamweaver understands the site structure for your project.

More information

Wanted! Introduction. Step 1: Styling your poster. Activity Checklist. In this project, you ll learn how to make your own poster.

Wanted! Introduction. Step 1: Styling your poster. Activity Checklist. In this project, you ll learn how to make your own poster. Wanted! Introduction In this project, you ll learn how to make your own poster. Step 1: Styling your poster Let s start by editing the CSS code for the poster. Activity Checklist Open this trinket: jumpto.cc/web-wanted.

More information

Lab 4 CSS CISC1600, Spring 2012

Lab 4 CSS CISC1600, Spring 2012 Lab 4 CSS CISC1600, Spring 2012 Part 1 Introduction 1.1 Cascading Style Sheets or CSS files provide a way to control the look and feel of your web page that is more convenient, more flexible and more comprehensive

More information

Dreamweaver CS5 Lab 2

Dreamweaver CS5 Lab 2 Dreamweaver CS5 Lab 2 Using an External Style Sheet in Dreamweaver Creating the site definition First, we'll set up the site and define it so that Dreamweaver understands the site structure for your project.

More information

Web Authoring and Design. Benjamin Kenwright

Web Authoring and Design. Benjamin Kenwright CSS Div Layouts Web Authoring and Design Benjamin Kenwright Outline Review Why use Div Layout instead of Tables? How do we use the Div Tag? How to create layouts using the CSS Div Tag? Summary Review/Discussion

More information

NAVIGATION INSTRUCTIONS

NAVIGATION INSTRUCTIONS CLASS :: 13 12.01 2014 NAVIGATION INSTRUCTIONS SIMPLE CSS MENU W/ HOVER EFFECTS :: The Nav Element :: Styling the Nav :: UL, LI, and Anchor Elements :: Styling the UL and LI Elements CSS DROP-DOWN MENU

More information

Web Publishing Intermediate 2

Web Publishing Intermediate 2 Web Publishing Intermediate 2 Building a Three Column Site with divs and float Jeff Pankin Information Services and Technology Table of Contents Course Objectives... 2 The CIG Web Site... 3 Using the Div

More information

Create a three column layout using CSS, divs and floating

Create a three column layout using CSS, divs and floating GRC 275 A6 Create a three column layout using CSS, divs and floating Tasks: 1. Create a 3 column style layout 2. Must be encoded using HTML5 and use the HTML5 semantic tags 3. Must se an internal CSS 4.

More information

Taking Fireworks Template and Applying it to Dreamweaver

Taking Fireworks Template and Applying it to Dreamweaver Taking Fireworks Template and Applying it to Dreamweaver Part 1: Define a New Site in Dreamweaver The first step to creating a site in Dreamweaver CS4 is to Define a New Site. The object is to recreate

More information

Assignments (4) Assessment as per Schedule (2)

Assignments (4) Assessment as per Schedule (2) Specification (6) Readability (4) Assignments (4) Assessment as per Schedule (2) Oral (4) Total (20) Sign of Faculty Assignment No. 02 Date of Performance:. Title: To apply various CSS properties like

More information

CSS: formatting webpages

CSS: formatting webpages CSS: formatting webpages Why CSS? separate content from formatting (style) style can be changed easily without rewriting webpages keep formatting consistent across website allows more advanced formatting

More information

Index. alt, 38, 57 class, 86, 88, 101, 107 href, 24, 51, 57 id, 86 88, 98 overview, 37. src, 37, 57. backend, WordPress, 146, 148

Index. alt, 38, 57 class, 86, 88, 101, 107 href, 24, 51, 57 id, 86 88, 98 overview, 37. src, 37, 57. backend, WordPress, 146, 148 Index Numbers & Symbols (angle brackets), in HTML, 47 : (colon), in CSS, 96 {} (curly brackets), in CSS, 75, 96. (dot), in CSS, 89, 102 # (hash mark), in CSS, 87 88, 99 % (percent) font size, in CSS,

More information

What do we mean by layouts?

What do we mean by layouts? What do we mean by layouts? A layout is how you position the elements of your page You can have columns Move paragraphs and sections around And you can do this all without changing the content of your

More information

Layout with Layers and CSS

Layout with Layers and CSS Layout with Layers and CSS Today we're going to make a Web site layout. Preparatory Step 1. Inside your folder create a new folder and name it layout. 2. Inside the layout folder create a new folder and

More information

<body bgcolor=" " fgcolor=" " link=" " vlink=" " alink=" "> These body attributes have now been deprecated, and should not be used in XHTML.

<body bgcolor=  fgcolor=  link=  vlink=  alink= > These body attributes have now been deprecated, and should not be used in XHTML. CSS Formatting Background When HTML became popular among users who were not scientists, the limited formatting offered by the built-in tags was not enough for users who wanted a more artistic layout. Netscape,

More information

Creating Layouts Using CSS. Lesson 9

Creating Layouts Using CSS. Lesson 9 Creating Layouts Using CSS Lesson 9 CSS Page Layout Advantages Greater typography control Style is separate from structure Potentially smaller documents Easier site maintenance Increased page layout control

More information

Exploring Computer Science Web Final - Website

Exploring Computer Science Web Final - Website Exploring Computer Science Web Final - Website Objective: Create a website using rollover menus. You will be graded on the following: Is your CSS in a separate file from your HTML? Are your colors and

More information

Wireframe :: tistory wireframe tistory.

Wireframe :: tistory wireframe tistory. Page 1 of 45 Wireframe :: tistory wireframe tistory Daum Tistory GO Home Location Tags Media Guestbook Admin 'XHTML+CSS' 7 1 2009/09/20 [ ] XHTML CSS - 6 (2) 2 2009/07/23 [ ] XHTML CSS - 5 (6) 3 2009/07/17

More information

CSS worksheet. JMC 105 Drake University

CSS worksheet. JMC 105 Drake University CSS worksheet JMC 105 Drake University 1. Download the css-site.zip file from the class blog and expand the files. You ll notice that you have an images folder with three images inside and an index.html

More information

Getting Started with CSS Sculptor 3

Getting Started with CSS Sculptor 3 Getting Started with CSS Sculptor 3 With CSS Sculptor, you can quickly create a cross-browser compatible layout with custom widths, margins, padding, background images and more. Additionally, you can use

More information

Title: Dec 11 3:40 PM (1 of 11)

Title: Dec 11 3:40 PM (1 of 11) ... basic iframe body {color: brown; font family: "Times New Roman"} this is a test of using iframe Here I have set up two iframes next to each

More information

Cascading Style Sheets Level 2

Cascading Style Sheets Level 2 Cascading Style Sheets Level 2 Course Objectives, Session 1 Level 1 Quick Review Chapter 6 Revisit: Web Fonts Chapter 8: Adding Graphics to Web Pages Chapter 9: Sprucing Up Your Site s Navigation Begin

More information

Unveiling the Basics of CSS and how it relates to the DataFlex Web Framework

Unveiling the Basics of CSS and how it relates to the DataFlex Web Framework Unveiling the Basics of CSS and how it relates to the DataFlex Web Framework Presented by Roel Fermont 1 Today more than ever, Cascading Style Sheets (CSS) have a dominant place in online business. CSS

More information

Class 9 / Instructor: Ira Epstein

Class 9 / Instructor: Ira Epstein Fashion Institute of Technology http://www.iraworks.com/fit Introduction to Web Design / CT244 Instructor: Ira Epstein iraepst@gmail.com Class 9 / 4-3-18 1) Attendance and Announcements... 2:10-2:20 a)

More information

Dreamweaver: Portfolio Site

Dreamweaver: Portfolio Site Dreamweaver: Portfolio Site Part 3 - Dreamweaver: Developing the Portfolio Site (L043) Create a new Site in Dreamweaver: Site > New Site (name the site something like: Portfolio, or Portfolio_c7) Go to

More information

Basic CSS Lecture 17

Basic CSS Lecture 17 Basic CSS Lecture 17 Robb T. Koether Hampden-Sydney College Wed, Feb 21, 2018 Robb T. Koether (Hampden-Sydney College) Basic CSSLecture 17 Wed, Feb 21, 2018 1 / 22 1 CSS 2 Background Styles 3 Text Styles

More information

Before you begin, make sure you have the images for these exercises saved in the location where you intend to create the Nuklear Family Website.

Before you begin, make sure you have the images for these exercises saved in the location where you intend to create the Nuklear Family Website. 9 Now it s time to challenge the serious web developers among you. In this section we will create a website that will bring together skills learned in all of the previous exercises. In many sections, rather

More information

Designing the Home Page and Creating Additional Pages

Designing the Home Page and Creating Additional Pages Designing the Home Page and Creating Additional Pages Creating a Webpage Template In Notepad++, create a basic HTML webpage with html documentation, head, title, and body starting and ending tags. From

More information

CSS Design and Layout Basic Exercise instructions. Today's exercises. Part 1: Arrange Page into Sections. Part 1, details (screenshot below)

CSS Design and Layout Basic Exercise instructions. Today's exercises. Part 1: Arrange Page into Sections. Part 1, details (screenshot below) CSS Design and Layout Basic Exercise instructions You may want to bring your textbook to Exercises to look up syntax and examples. Have a question? Ask for help, or look at the book or lecture slides.

More information

CSS: Cascading Style Sheets

CSS: Cascading Style Sheets CSS: Cascading Style Sheets Computer Science and Engineering College of Engineering The Ohio State University Lecture 13 Evolution of CSS MIME type: text/css CSS 1 ('96): early recognition of value CSS

More information

Lab Introduction to Cascading Style Sheets

Lab Introduction to Cascading Style Sheets Lab Introduction to Cascading Style Sheets For this laboratory you will need a basic text editor and a browser. In the labs, winedt or Notepad++ is recommended along with Firefox/Chrome For this activity,

More information

HTML5: Adding Style. Styling Differences. HTML5: Adding Style Nancy Gill

HTML5: Adding Style. Styling Differences. HTML5: Adding Style Nancy Gill HTML5: Adding Style In part 2 of a look at HTML5, Nancy will show you how to add CSS to the previously unstyled document from part 1 and why there are some differences you need to watch out for. In this

More information

Lab 2: Movie Review. overview.png background.png rottenbig.png rbg.png fresh.gif rotten.gif critic.gif

Lab 2: Movie Review. overview.png background.png rottenbig.png rbg.png fresh.gif rotten.gif critic.gif EDUCATIONAL GOALS Lab 2: Movie Review By the end of this lab, the student should be able to: Use Notepad++. Organize website contents. Use the basic of CSS and HTML for layout, positioning, and the CSS

More information

HTML & CSS for Library Professionals

HTML & CSS for Library Professionals These slides are online at http://bit.ly/html_lib_slides HTML & CSS for Library Professionals Robin Camille Davis Emerging Technologies & Online Learning Librarian, John Jay College of Criminal Justice

More information

<style type="text/css"> <!-- body {font-family: Verdana, Arial, sans-serif} ***set font family for entire Web page***

<style type=text/css> <!-- body {font-family: Verdana, Arial, sans-serif} ***set font family for entire Web page*** Chapter 7 Using Advanced Cascading Style Sheets HTML is limited in its ability to define the appearance, or style, across one or mare Web pages. We use Cascading style sheets to accomplish this. Remember

More information

Universal CSS Navigation Menu: Advanced Styling Patrick Julicher Universal CSS Navigation Menu: Advanced Styling

Universal CSS Navigation Menu: Advanced Styling Patrick Julicher Universal CSS Navigation Menu: Advanced Styling Universal CSS Navigation Menu: Advanced Styling Page 1 of 15 Content 1. Introduction... 3 2. How to use... 3 2.1. Editing existing CSS Styles... 3 2.2. Creating new CSS Styles... 6 3. Explanation of styles...

More information

Reading 2.2 Cascading Style Sheets

Reading 2.2 Cascading Style Sheets Reading 2.2 Cascading Style Sheets By Multiple authors, see citation after each section What is Cascading Style Sheets (CSS)? Cascading Style Sheets (CSS) is a style sheet language used for describing

More information

First Diploma Unit 10 Client Side Web. Week 4 CSS and Images

First Diploma Unit 10 Client Side Web. Week 4 CSS and Images First Diploma Unit 10 Client Side Web Week 4 CSS and Images Last Session CSS box model Concept of identity - id This Session External style sheets Using CSS in conjunction with images Introduction External

More information

CIE-H12 Web page Sample

CIE-H12 Web page Sample eztcp Technical Document CIE-H12 Web page Sample Version 1.0 2011-08-31 Sollae Systems Co., Ltd. http://www.sollae.co.kr Contents Contents 1 Overview... 3 1.1 Overview... 3 2 Default... 4 2.1 Simple Modification

More information

**Method 3** By attaching a style sheet to your web page, and then placing all your styles in that new style sheet.

**Method 3** By attaching a style sheet to your web page, and then placing all your styles in that new style sheet. CSS Tutorial Part 1: Introduction: CSS adds style to tags in your html page. With HTML you told the browser what things were (e.g., this is a paragraph). Now you are telling the browser how things look

More information

AGENDA. EMBEDDING FONTS [ Font Files & CSS font-family ] :: Online Font Converter :: ADD font-family css code to style.css

AGENDA. EMBEDDING FONTS [ Font Files & CSS font-family ] :: Online Font Converter :: ADD font-family css code to style.css CLASS :: 12 05.04 2018 3 Hours AGENDA CREATE A WORKS PAGE [ HTML ] :: Open index.html :: Save As works.html :: Edit works.html to modify header, 3 divisions for works, then add your content :: Edit index.html

More information

HTML HTML5. DOM(Document Object Model) CSS CSS

HTML HTML5. DOM(Document Object Model) CSS CSS HTML HTML5 DOM(Document Object Model) CSS CSS HTML html img jpg png gif jpg png gif

More information

Microsoft Expression Web Quickstart Guide

Microsoft Expression Web Quickstart Guide Microsoft Expression Web Quickstart Guide MS-Expression Web Quickstart Guide Page 1 of 24 Expression Web Quickstart Guide (20-Minute Training) Welcome to Expression Web. When you first launch the program,

More information

CSS Cascading Style Sheets

CSS Cascading Style Sheets CSS Cascading Style Sheets site root index.html about.html services.html stylesheet.css images boris.jpg Types of CSS External Internal Inline External CSS An external style sheet is a text document with

More information

CSS: The Basics CISC 282 September 20, 2014

CSS: The Basics CISC 282 September 20, 2014 CSS: The Basics CISC 282 September 20, 2014 Style Sheets System for defining a document's style Used in many contexts Desktop publishing Markup languages Cascading Style Sheets (CSS) Style sheets for HTML

More information

HTML and CSS a further introduction

HTML and CSS a further introduction HTML and CSS a further introduction By now you should be familiar with HTML and CSS and what they are, HTML dictates the structure of a page, CSS dictates how it looks. This tutorial will teach you a few

More information

CSS BASICS. selector { property: value; }

CSS BASICS. selector { property: value; } GETTING STARTED 1. Download the Juice-o-Rama 11-01 zip file from our course dropbox. 2. Move the file to the desktop. You have learned two ways to do this. 3. Unzip the file by double clicking it. You

More information

CSS Tutorial Part 1: Introduction: A. Adding Style to a Web Page (3 options):

CSS Tutorial Part 1: Introduction: A. Adding Style to a Web Page (3 options): CSS Tutorial Part 1: Introduction: CSS adds style to tags in your html page. With HTML you told the browser what things were (e.g., this is a paragraph). Now you are telling the browser how things look

More information

Welcome Please sit on alternating rows. powered by lucid & no.dots.nl/student

Welcome Please sit on alternating rows. powered by lucid & no.dots.nl/student Welcome Please sit on alternating rows powered by lucid & no.dots.nl/student HTML && CSS Workshop Day Day two, November January 276 powered by lucid & no.dots.nl/student About the Workshop Day two: CSS

More information

The Importance of the CSS Box Model

The Importance of the CSS Box Model The Importance of the CSS Box Model Block Element, Border, Padding and Margin Margin is on the outside of block elements and padding is on the inside. Use margin to separate the block from things outside

More information

CSS. https://developer.mozilla.org/en-us/docs/web/css

CSS. https://developer.mozilla.org/en-us/docs/web/css CSS https://developer.mozilla.org/en-us/docs/web/css http://www.w3schools.com/css/default.asp Cascading Style Sheets Specifying visual style and layout for an HTML document HTML elements inherit CSS properties

More information

HTML & CSS Cheat Sheet

HTML & CSS Cheat Sheet 1 HTML & CSS Cheat Sheet Fall 2017 HTML & CSS Cheat Sheet from Typographic Web Design 3 by Laura Franz Web safe fonts vs web fonts You can expect these web safe fonts to work across most platforms and

More information

ADOBE 9A Adobe Dreamweaver CS4 ACE.

ADOBE 9A Adobe Dreamweaver CS4 ACE. ADOBE 9A0-090 Adobe Dreamweaver CS4 ACE http://killexams.com/exam-detail/9a0-090 ,D QUESTION: 74 You use an image throughout your Web site. You want to be able to add this image to various Web pages without

More information

Appendix D CSS Properties and Values

Appendix D CSS Properties and Values HTML Appendix D CSS Properties and Values This appendix provides a brief review of Cascading Style Sheets (CSS) concepts and terminology, and lists CSS level 1 and 2 properties and values supported by

More information

HTML and CSS: An Introduction

HTML and CSS: An Introduction JMC 305 Roschke spring14 1. 2. 3. 4. 5. The Walter Cronkite School... HTML and CSS: An Introduction

More information

CSS: Layout Part 2. clear. CSS for layout and formatting: clear

CSS: Layout Part 2. clear. CSS for layout and formatting: clear CSS: Layout Part 2 Robert A. Fulkerson College of Information Science and Technology http://www.ist.unomaha.edu/ University of Nebraska at Omaha http://www.unomaha.edu/ CSS for layout and formatting: clear

More information

Using CSS for page layout

Using CSS for page layout Using CSS for page layout Advantages: Greater typographic control Style is separate from structure Potentially smaller documents Easier site maintenance Increased page layout control Increased accessibility

More information

COMSC-031 Web Site Development- Part 2

COMSC-031 Web Site Development- Part 2 COMSC-031 Web Site Development- Part 2 Part-Time Instructor: Joenil Mistal December 5, 2013 Chapter 13 13 Designing a Web Site with CSS In addition to creating styles for text, you can use CSS to create

More information

How to lay out a web page with CSS

How to lay out a web page with CSS How to lay out a web page with CSS A CSS page layout uses the Cascading Style Sheets format, rather than traditional HTML tables or frames, to organize the content on a web page. The basic building block

More information

CISC1600-SummerII2012-Raphael-lec3 1

CISC1600-SummerII2012-Raphael-lec3 1 CISC 1600 Introduction to Multi-media Computing Agenda Email Address: Course Page: Class Hours: Summer Session II 2012 Instructor : J. Raphael raphael@sci.brooklyn.cuny.edu http://www.sci.brooklyn.cuny.edu/~raphael/cisc1600.html

More information

Introduction to WEB PROGRAMMING

Introduction to WEB PROGRAMMING Introduction to WEB PROGRAMMING Web Languages: Overview HTML CSS JavaScript content structure look & feel transitions/animation s (CSS3) interaction animation server communication Full-Stack Web Frameworks

More information

CSC309 Winter Lecture 2. Larry Zhang

CSC309 Winter Lecture 2. Larry Zhang CSC309 Winter 2016 Lecture 2 Larry Zhang 1 Announcements Assignment 1 is out, due Jan 25, 10pm. Start Early! Work in groups of 2, make groups on MarkUs. Make sure you can login to MarkUs, if not let me

More information

Introduction to Web Programming and Design

Introduction to Web Programming and Design Bridges To Computing General Information: This document was created for use in the "Bridges to Computing" project of Brooklyn College. You are invited and encouraged to use this presentation to promote

More information

How to lay out a web page with CSS

How to lay out a web page with CSS How to lay out a web page with CSS You can use table design features in Adobe Dreamweaver CS3 to create a simple page layout. However, a more powerful technique is to use Cascading Style Sheets (CSS).

More information

How to lay out a web page with CSS

How to lay out a web page with CSS Activity 2.6 guide How to lay out a web page with CSS You can use table design features in Adobe Dreamweaver CS4 to create a simple page layout. However, a more powerful technique is to use Cascading Style

More information

Stamp Builder. Documentation. v1.0.0

Stamp  Builder. Documentation.   v1.0.0 Stamp Email Builder Documentation http://getemailbuilder.com v1.0.0 THANK YOU FOR PURCHASING OUR EMAIL EDITOR! This documentation covers all main features of the STAMP Self-hosted email editor. If you

More information

HTML/XML. HTML Continued Introduction to CSS

HTML/XML. HTML Continued Introduction to CSS HTML/XML HTML Continued Introduction to CSS Entities Special Characters Symbols such as +, -, %, and & are used frequently. Not all Web browsers display these symbols correctly. HTML uses a little computer

More information

Using Dreamweaver CS6

Using Dreamweaver CS6 Using Dreamweaver CS6 7 Dynamic HTML Dynamic HTML (DHTML) is a term that refers to website that use a combination of HTML, scripting such as JavaScript, CSS and the Document Object Model (DOM). HTML and

More information

Final Exam Study Guide

Final Exam Study Guide Final Exam Study Guide 1. What does HTML stand for? 2. Which file extension is used with standard web pages? a..doc b..xhtml c..txt d..html 3. Which is not part of an XHTML element? a. Anchor b. Start

More information

Creating and Building Websites

Creating and Building Websites Creating and Building Websites Stanford University Continuing Studies CS 21 Mark Branom branom@alumni.stanford.edu Course Web Site: http://web.stanford.edu/group/csp/cs21 Week 6 Slide 1 of 28 Week 6 Agenda

More information

CSS Exercises. Create a basic CSS layout Use BlueFish to open layout.html Create a layout using <div> tags Use a browser (Firefox) to view your page

CSS Exercises. Create a basic CSS layout Use BlueFish to open layout.html Create a layout using <div> tags Use a browser (Firefox) to view your page CSS Exercises Exercise 1: Create a basic CSS layout Use BlueFish to open layout.html Create a layout using tags Use a browser (Firefox) to view your page Task 1 Open layout.html in BlueFish a blank

More information

Produced by. Web Development. Eamonn de Leastar Department of Computing, Maths & Physics Waterford Institute of Technology

Produced by. Web Development. Eamonn de Leastar Department of Computing, Maths & Physics Waterford Institute of Technology Web Development Produced by Eamonn de Leastar (edeleastar@wit.ie) Department of Computing, Maths & Physics Waterford Institute of Technology http://www.wit.ie http://elearning.wit.ie CSS: Box Model Worked

More information

USER GUIDE MADCAP FLARE Tables

USER GUIDE MADCAP FLARE Tables USER GUIDE MADCAP FLARE 2018 Tables Copyright 2018 MadCap Software. All rights reserved. Information in this document is subject to change without notice. The software described in this document is furnished

More information

THE HITCHHIKERS GUIDE TO HTML

THE HITCHHIKERS GUIDE TO HTML THE HITCHHIKERS GUIDE TO HTML Computer Science I Designing technology solutions Mr. Barrett http://thestrategicblogger.com/ What is HTML HTML is a markup language for describing web pages HTML is used

More information

Chapter 6: CSS Layouts

Chapter 6: CSS Layouts Chapter 6: CSS Layouts Learning Outcomes: Identify the four types of CSS positioning: static, relative, fixed and absolute Identify the use of CSS floats Be able to implement HTML and CSS to construct

More information

Multimedia Systems and Technologies Lab class 6 HTML 5 + CSS 3

Multimedia Systems and Technologies Lab class 6 HTML 5 + CSS 3 Multimedia Systems and Technologies Lab class 6 HTML 5 + CSS 3 Instructions to use the laboratory computers (room B2): 1. If the computer is off, start it with Windows (all computers have a Linux-Windows

More information

Session 4. Style Sheets (CSS) Reading & References. A reference containing tables of CSS properties

Session 4. Style Sheets (CSS) Reading & References.   A reference containing tables of CSS properties Session 4 Style Sheets (CSS) 1 Reading Reading & References en.wikipedia.org/wiki/css Style Sheet Tutorials www.htmldog.com/guides/cssbeginner/ A reference containing tables of CSS properties web.simmons.edu/~grabiner/comm244/weekthree/css-basic-properties.html

More information

Introduction to using HTML to design webpages

Introduction to using HTML to design webpages Introduction to using HTML to design webpages #HTML is the script that web pages are written in. It describes the content and structure of a web page so that a browser is able to interpret and render the

More information

Groupings and Selectors

Groupings and Selectors Groupings and Selectors Steps to Success Using the headings.html web page you created in steps, we'll discuss the type selector and grouping. We'll look at how we can utilize grouping efficiently within

More information

CSS. Shan-Hung Wu CS, NTHU

CSS. Shan-Hung Wu CS, NTHU CSS Shan-Hung Wu CS, NTHU CSS Zen Garden 2 Outline The Basics Selectors Layout Stacking Order 3 Outline The Basics Selectors Layout Stacking Order 4 Grammar selector { property: value; 5 Example /* for

More information

Cascading style sheets, HTML, DOM and Javascript

Cascading style sheets, HTML, DOM and Javascript CSS Dynamic HTML Cascading style sheets, HTML, DOM and Javascript DHTML Collection of technologies forming dynamic clients HTML (content content) DOM (data structure) JavaScript (behaviour) Cascading Style

More information

Scripting for Multimedia LECTURE 5: INTRODUCING CSS3

Scripting for Multimedia LECTURE 5: INTRODUCING CSS3 Scripting for Multimedia LECTURE 5: INTRODUCING CSS3 CSS introduction CSS Level 1 --> CSS Level 2 --> CSS Level 3 (in modules) More than 50 modules are published Cascading style sheets (CSS) defines how

More information

Introduction to Cascading Style Sheet (CSS)

Introduction to Cascading Style Sheet (CSS) Introduction to Cascading Style Sheet (CSS) Digital Media Center 129 Herring Hall http://dmc.rice.edu/ dmc-info@rice.edu (713) 348-3635 Introduction to Cascading Style Sheets 1. Overview Cascading Style

More information

HTML Summary. All of the following are containers. Structure. Italics Bold. Line Break. Horizontal Rule. Non-break (hard) space.

HTML Summary. All of the following are containers. Structure. Italics Bold. Line Break. Horizontal Rule. Non-break (hard) space. HTML Summary Structure All of the following are containers. Structure Contains the entire web page. Contains information

More information

Introduction to Web Design CSS Reference

Introduction to Web Design CSS Reference Inline Style Syntax: Introduction to Web Design CSS Reference Example: text Internal Style Sheet Syntax: selector {property: value; Example:

More information

HTML & CSS. Rupayan Neogy

HTML & CSS. Rupayan Neogy HTML & CSS Rupayan Neogy But first My Take on Web Development There is always some tool that makes your life easier. Hypertext Markup Language The language your web browser uses to describe the content

More information

Introduction to Web Design CSS Reference

Introduction to Web Design CSS Reference Inline Style Syntax: Introduction to Web Design CSS Reference Example: text Internal Style Sheet Syntax: selector {property: value; Example:

More information

Unit 5 Web Publishing Systems Page 1 of 13 Part 4 HTML Part 4

Unit 5 Web Publishing Systems Page 1 of 13 Part 4 HTML Part 4 Unit 5 Web Publishing Systems Page 1 of 13 Part 4 HTML 4.01 Version: 4.01 Transitional Hypertext Markup Language is the coding behind web publishing. In this tutorial, basic knowledge of HTML will be covered

More information

CSS stands for Cascading Style Sheets Styles define how to display HTML elements

CSS stands for Cascading Style Sheets Styles define how to display HTML elements CSS stands for Cascading Style Sheets Styles define how to display HTML elements CSS has various levels and profiles. Each level of CSS builds upon the last, typically adding new features and typically

More information

Purpose of this doc. Most minimal. Start building your own portfolio page!

Purpose of this doc. Most minimal. Start building your own portfolio page! Purpose of this doc There are abundant online web editing tools, such as wordpress, squarespace, etc. This document is not meant to be a web editing tutorial. This simply just shows some minimal knowledge

More information

the missing manual0 O'REILLY Third Edition David Sawyer McFarland Beijing Cambridge The book that should have been in the box Farnham

the missing manual0 O'REILLY Third Edition David Sawyer McFarland Beijing Cambridge The book that should have been in the box Farnham Farnham Third Edition the missing manual0 The book that should have been in the box David Sawyer McFarland Beijing Cambridge O'REILLY Koln Sebastopol Tokyo Contents The Missing Credits vii Introduction

More information

What is the Box Model?

What is the Box Model? CSS Box Model What is the Box Model? The box model is a tool we use to understand how our content will be displayed on a web page. Each HTML element appearing on our page takes up a "box" or "container"

More information

GIMP WEB 2.0 MENUS. Web 2.0 Menus: Horizontal Navigation Bar

GIMP WEB 2.0 MENUS. Web 2.0 Menus: Horizontal Navigation Bar GIMP WEB 2.0 MENUS Web 2.0 Menus: Horizontal Navigation Bar WEB 2.0 MENUS: HORIZONTAL NAVIGATION BAR Hover effect: You may create your button in GIMP. Mine is 122 pixels by 48 pixels. You can use whatever

More information

Note: The screenshots in this document were taken on Windows in Firefox, which may differ from your system.

Note: The screenshots in this document were taken on Windows in Firefox, which may differ from your system. CSCI 366 (Database and Web Dev) Dr. Schwartz Lab 5: HTML and CSS (Adapted from Web Programming Step by Step) Due Monday, March 26 th at 11:59pm 100 pts total (69 pts Autolab) Introduction This assignment

More information

By Ryan Stevenson. Guidebook #3 CSS

By Ryan Stevenson. Guidebook #3 CSS By Ryan Stevenson Guidebook #3 CSS Table of Contents 1. How to Use CSS 2. CSS Basics 3. Text Sizes Colors & Other Styling 4. Element Layout Positioning & Sizing 5. Backgrounds & Borders How to Use CSS

More information

Responsive Web Design (RWD)

Responsive Web Design (RWD) Responsive Web Design (RWD) Responsive Web Design: design Web pages, so that it is easy to see on a wide range of of devices phone, tablet, desktop,... Fixed vs Fluid layout Fixed: elements have fixed

More information