HTML5 and CSS3 Design with CSS Page 1
|
|
|
- Sophia Hannah Atkinson
- 7 years ago
- Views:
Transcription
1 HTML5 and CSS3 Design with CSS Page HTML5 and CSS3 DESIGN WITH CSS Styles in HTML Documents Styles provide a method of creating consistent formatting of elements throughout an entire website For example is makes it much simpler to format all the headings, paragraphs, list elements, etc. for all the pages in the site so that they are identical in style The style is defined once and applied automatically each time the tag and/or element is used Style Implementations Style sheets may be applied at three different levels: Linked style sheet is created as a separate document file with the extension.css; a <link> tag is placed into each Web page that will implement the style sheet Embedded style sheet is embedded into a single Web page in the <head> section; only the document in which it is embedded is able to use its features in the style list Inline placed at any point in the document <body>; involves including a style attribute inside the tag; the formatting applies only to that tag at that location Try Designing It Out a Style Rule Page 1 Style sheets are written in CSS (Cascading Style Sheet) language and implement Web page formatting and layout selector property1: value1; property2: value2; The selector is the name of an element (e.g. tag) or a group of elements The property is the name of a format type and the value is the value assigned to it Designing a Style Rule Page 2 Examples: text-align: center; font-family: Arial; External Style Sheets A Web page can link to a separate (external) style sheet file Linked style sheets are created as a separate document files with the extension.css; a link tag is placed into each Web page that will implement the style sheet The link tag is placed in the head section <link href = "location/filename" rel = "stylesheet" type = "text/css" /> 8 89
2 HTML5 and CSS3 Design with CSS Page <link href = "mystyles.css" rel = "stylesheet" type = "text/css" /> Try Embedded It Out Implementation Page 1 Embedded implementation is a method in which the style sheet is embedded into a single web page Only the one Web document in which it is embedded will be able to use the features in the style list Can be useful if the several elements in an individual Web page have a unique style Implemented by placing <style> tag in the <head> section of the document <style type = "text/css"> style_rules </style> Embedded Implementation Page 2 <head> <title>style Sheet Example</title> <style type = "text/css"> a:link color: #400080; background: #FFFFD8 h1 font-weight: bold; text-align: center; color: #006000; font-family: Algerian; </style> </head> Inline Implementation Inline implementation places style sheet formatting at any point in the document <body> Involves including a style attribute inside the tag; the formatting applies only to that tag at that location An advantage of this technique is the closing tag for the element turns off all the style formatting <element style="style_rules"> <p style="color: #FFFF00; font-family: Arial"> Inline implementation is lowest in priority</p> Style Precedence and Specificity Generally a more specific style is implied instead of a more general one E.g. a style applied to a paragraph is applied before one applied to a section For styles implemented at more than one level (inline, embedded, linked) in a website, the order of precedence is: Inline (highest) 13
3 12 HTML5 and CSS3 Design with CSS Page Inline (highest) Embedded Linked (lowest) Comments in Style Sheets Style sheet comments use a form similar to multi-line comments in C++ and Java /* Comment text */ /* Author: Carl B. Struck The "mystyles.css" style sheet */ Try RGB It Colors Out in CSS Color values may be specified as RGB values using the rgb() function specifying the amounts of red, green and blue as integer values between zero (0) and 255 rgb(redn, greenn, bluen) color: rgb(255, 255, 0) Will render as yellow Color Names in CSS There is a list of 140 color names which can substitute for the RGB() function A partial list of the color names include red, pink, black, gray, yellow, blue, orange, white, etc. element: color_name; body background-color: antiquewhite; The color Property Formats the color of text for an element color: rgb(redn, greenn, bluen) color_name; color: rgb(255, 255, 0) The background-color Property Formats the background color behind text for an element background-color: rgb(redn, greenn, bluen) color_name; body background-color: antiquewhite 20
4 19 20 HTML5 and CSS3 Design with CSS Page Try The It rgba() Out Function The a in rgba() stands for alpha and relates to the amount of transparency in the color in which opacity is a decimal value between zero (0) and one (1) rgb(redn, greenn, bluen, opacity) 100% opacity is solid; 0% is invisible color: rgb(255, 255, 100, 0.7) Opacity in this example is 70% Try Contextual It Out Selectors Page 1 Takes advantage of the hierarchy of elements so that only elements descended (directly or indirectly) from a specific parent type are effected arent descendant styles header h1 Only h1 elements in the header section are effected Contextual Selectors Page 2 Contextual selectors take advantage of the rule that the more specific style takes precedence over the less specific Examples: color: red; header h1 Second example takes precedence over the first Try The It id Out Attribute Selector A style can be applied to an element based on its id A hash (#) symbol precedes the id name in the style rule #id #main Would apply to the h1 heading: <h1 id="main">my Heading</h1> Defining Classes 27
5 HTML5 and CSS3 Design with CSS Page Using Class Name in a Style Sheet Page 1 The class name following a dot (.) may used as a selector.class styles.mail Using Class Name in a Style Sheet Page 2 The class name may used as a modifier for any selector in a stylesheet which allows styles to be applied selectively to an individual tag or tags element.class styles a.mail Try Choosing It OutText Font The font-family property specifies a comma-separated list of font faces The browser selects the first installed font from the list font-family: fonts Browser selects first installed font from fonts list font-family: 'Arial Black', Arial, sans-serif; Multi-word font names are listed in 'single quotes' Generic Font Groups Describes general appearance of a typeface including: serif small ornamentation at tail end of each character sans-serif font without ornamentation monospace each character has same width as all others cursive mimics handwriting fantasy highly ornamental; not appropriate for body text Web Safe Fonts Displayed mostly the same in all browsers including: Arial, Arial Black, Century Gothic, Comic Sans MS, Courier New, Georgia, Impact, Lucida Console, Lucida Sans Unicode, Tahoma, Times New Roman (the default in many browsers), Trebuchet MS, Verdana Try Setting It Out Font Size Page 1 The font-size property is measured in length which can be specified in one of four ways: With a unit of measure As a percentage of the size of the containing element
6 HTML5 and CSS3 Design with CSS Page As a percentage of the size of the containing element With a keyword description With a keyword description that is the size relative to the size of the containing element font-size: size xx-small x-small small medium large x-large xx-large smaller larger; Setting Font Size Page 2 Example (unit of measure): font-size: 2em; Example (percentage of size of containing element): font-size: 75%; Setting Font Size Page 3 Example (keyword description): font-size: x-large; Example (keyword description where size is relative to size of containing element): font-size: smaller; CSS Units of Measure CSS recognizes several units of measure including: % percentage of containing element in (inch) cm (centimeter) mm (millimeter) em 1 em is equivalent to current font size; useful since it can adapt automatically to the font that the reader uses Historically em is equivalent to width of uppercase M t (point) 1 pt is the same as 1/72 of an inch c (pica) 1 pc is the same as 12 points x (pixel) a dot on the computer screen Try Controlling It Out Spacing between Characters The letter-spacing property controls the amount of space between characters (default is no extra space) letter-spacing: value; The value normal is used if an element might be inheriting some other value 41
7 HTML5 and CSS3 Design with CSS Page letter-spacing : 10px; Controlling Spacing between Words The word-spacing property controls the amount of space between words (default is no extra space) word-spacing: value; word-spacing : 10px; Controlling Spacing between Lines The line-height property controls the amount of space between lines of text (default is 100%) line-height : size; line-height : 115%; Controlling Indentation The text-indent will indent the element by specified size For a paragraph will indent the first line only text-indent : size; The value initial is used if to return to the default if an element might be inheriting some other value A negative value is used to create a hanging indent text-indent : 115%; Try Setting It Out the Text s Italic Style The font-style property creates italic (sloped) text font-style: normal italic oblique; The italic style generally is cursive while oblique is typically sloped versions of the regular face font-style: italic; Setting the Text s Boldface Property 46
8 HTML5 and CSS3 Design with CSS Page Setting the Text s Boldface Property The font-weight property applies boldface to text font-weight: normal bold bolder lighter ; Numeric values between 100 to 900 (in increments of 100's) indicate lighter to heavier weights (some weights may appear identical if fewer than nine weights are installed in browser) font-weight: bold; Setting the Text s Line Property The text-decoration property applies underlining, overlining and strike-through to text text-decoration: underline overline line-through none; h3 text-decoration: line-through; Transforming Text The text-transform property applies a specific text case to text as in all letters in UPPERCASE or all lowercase, or just initial Capital letters for each word text-tranform: capitalize uppercase lowercase none; text-transform: capitalize; First letter of each word will be uppercase Setting the Text s Small Caps Style The font-variant property applies SMALL CAPS style to text font-variant: small-caps normal; ul font-variant : capitalize; Aligning Text Horizontally The text-align property applies a specific alignmen to the text of a tag or other element The value justify means an even, not jagged, margin on both left and right sides of an element
9 50 HTML5 and CSS3 Design with CSS Page text-align : left right center justify; text-align: center; Aligning Text Vertically The vertical-align property applies a specific vertical alignmen to the text relative to the content around it vertical-align : value baseline sub super top text-top middle bottom text-bottom initial; h2 vertical-align: 50%; Lowers the element by half of the line height Combining Font Formatting in a Single Style The font property applies setting several font values at once including style (italic), weight (boldface), variant (small-caps), size and line height, and typeface (fontfamily) font: font-style font-variant font-weight font-size[/line-height] font-family1 [, font-family2 ]; font: oblique small-caps lighter 16pt/1.5 Verdana; Try Selecting It OutList Style Types Page 1 The list-style-type property that applies a bullet or number style to unordered and ordered lists Styles include a disk (filled-in circle), circle (open circle), square, decimal numbers (with or without leading zeros), Roman numerals in upper or lower case, and upper or lowercase letters in English or Greek list-style-type: disk circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek upper-greek none; Selecting List Style Types Page 2 Examples: ul list-style-type: square; ol list-style-type: lower-roman;
10 56 HTML5 and CSS3 Design with CSS Page list-style-type: lower-roman; Try Images It Out for List Markers The list-style-image property that applies an image file as the bullet for unordered and ordered lists list-style-image: url(path/filename) none; ul list-style-image: url(bullet.gif); Try Pseudo-Classes Page It Out 1 A pseudo-class is the classification of an element based dynamically upon its current position selector:pseudo-class styles a:hover Pseudo-Classes Page 2 There are four special pseudo-classes that are often applied to hyperlinks as follows-- Links that have not yet visited or clicked: a:link property: value [; ] Links that have previously been visited: a:visited property: value [; ] Links that have been clicked: a:active property: value [; ] The mouse is pointing to it (hovering over the hyperlink) a:hover property: value [; ] The element has received keyboard or mouse focus a:focus property: value [; ] Pseudo-Classes Page 3 The hover, active and focus pseudo-classes also can apply to non-hypertext elements nav ul li:hover background- Try Structural It Out Pseudo-Class Page 1 Items may be classified based on their locations using structural pseudo-classes including: first-0f-type first element that matches specified type last-of-type last element that matches specified type nth-of-type n th element of specified type nth-last-of-type n th from last element of specified type only-of-type only element that matches specified type 64
11 HTML5 and CSS3 Design with CSS Page only-of-type only element that matches specified type Structural Pseudo-Class Page 2 selector:structural-pseudo-class styles nav ul li:first-of-type Try Pseudo-Elements Page It Out 1 A pseudo-element is used to apply a style to a specified part of an element including: The first letter or line of an element Content to be inserted before or after an element Format (CSS3): selector::pseudo-element styles The pseudo-element may be first-letter, first-line, before or after Format (prior to CSS3): selector > pseudo-element styles Advisable still to this format for backward compatibility with older browsers Pseudo-Elements Page 2 Examples: section > p:first-letter font-size: 200%; section > p:first-line text-transform: uppercase; Try It Out 68
Web Design for Print Designers WEB DESIGN FOR PRINT DESIGNERS: WEEK 6
Web Design for Print Designers CSS uses a variety of declarations for styling text. Many use the variations of the font declaration. Other styles are done using different declarations. The font declaration
{color:blue; font-size: 12px;}
CSS stands for cascading style sheets. Styles define how to display a web page. Styles remove the formatting of a document from the content of the document. There are 3 ways that styles can be applied:
ITNP43: HTML Lecture 4
ITNP43: HTML Lecture 4 1 Style versus Content HTML purists insist that style should be separate from content and structure HTML was only designed to specify the structure and content of a document Style
Creating a Resume Webpage with
Creating a Resume Webpage with 6 Cascading Style Sheet Code In this chapter, we will learn the following to World Class CAD standards: Using a Storyboard to Create a Resume Webpage Starting a HTML Resume
CSS. CSS - cascading style sheets CSS - permite separar num documento HTML o conteúdo do estilo. ADI css 1/28
CSS CSS - cascading style sheets CSS - permite separar num documento HTML o conteúdo do estilo ADI css 1/28 Cascaded Style Sheets Por ordem de prioridade: Inline
What is CSS? Official W3C standard for controlling presentation Style sheets rely on underlying markup structure
CSS Peter Cho 161A Notes from Jennifer Niederst: Web Design in a Nutshell and Thomas A. Powell: HTML & XHTML, Fourth Edition Based on a tutorials by Prof. Daniel Sauter / Prof. Casey Reas What is CSS?
Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates
Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates What is a DIV tag? First, let s recall that HTML is a markup language. Markup provides structure and order to a page. For example,
Web Design with CSS and CSS3. Dr. Jan Stelovsky
Web Design with CSS and CSS3 Dr. Jan Stelovsky CSS Cascading Style Sheets Separate the formatting from the structure Best practice external CSS in a separate file link to a styles from numerous pages Style
Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS) W3C standard for defining presentation of web documents (way documents are displayed or delivered to users typography, colours, layout etc) Presentation separated from content
Outline of CSS: Cascading Style Sheets
Outline of CSS: Cascading Style Sheets nigelbuckner 2014 This is an introduction to CSS showing how styles are written, types of style sheets, CSS selectors, the cascade, grouping styles and how styles
CST 150 Web Design I CSS Review - In-Class Lab
CST 150 Web Design I CSS Review - In-Class Lab The purpose of this lab assignment is to review utilizing Cascading Style Sheets (CSS) to enhance the layout and formatting of web pages. For Parts 1 and
CSS 101. CSS CODE The code in a style sheet is made up of rules of the following types
CSS 101 WHY CSS? A consistent system was needed to apply stylistic values to HTML elements. What CSS does is provide a way to attach styling like color:red to HTML elements like . It does this by defining
Chapter 7 Page Layout Basics Key Concepts. Copyright 2013 Terry Ann Morris, Ed.D
Chapter 7 Page Layout Basics Key Concepts Copyright 2013 Terry Ann Morris, Ed.D 1 Learning Outcomes float fixed positioning relative positioning absolute positioning two-column page layouts vertical navigation
Web Design Basics. Cindy Royal, Ph.D. Associate Professor Texas State University
Web Design Basics Cindy Royal, Ph.D. Associate Professor Texas State University HTML and CSS HTML stands for Hypertext Markup Language. It is the main language of the Web. While there are other languages
Web Authoring CSS. www.fetac.ie. Module Descriptor
The Further Education and Training Awards Council (FETAC) was set up as a statutory body on 11 June 2001 by the Minister for Education and Science. Under the Qualifications (Education & Training) Act,
Simply download Beepip from http://beepip.com and run the file when it arrives at your computer.
Beepip User Guide How To's: How do I install Beepip? Simply download Beepip from http://beepip.com and run the file when it arrives at your computer. How do I set up Beepip? Once you've opened up Beepip,
Contents. Downloading the Data Files... 2. Centering Page Elements... 6
Creating a Web Page Using HTML Part 1: Creating the Basic Structure of the Web Site INFORMATION TECHNOLOGY SERVICES California State University, Los Angeles Version 2.0 Winter 2010 Contents Introduction...
Introduction to Adobe Dreamweaver CC
Introduction to Adobe Dreamweaver CC What is Dreamweaver? Dreamweaver is the program that we will be programming our websites into all semester. We will be slicing our designs out of Fireworks and assembling
Introduction to Cascading Style Sheets
Introduction to Cascading Style Sheets Welcome to the CSS workshop! Before you begin this workshop you should have some basic understanding of HTML and building web pages. What is CSS anyway and what will
Basics of HTML (some repetition) Cascading Style Sheets (some repetition) Web Design
Basics of HTML (some repetition) Cascading Style Sheets (some repetition) Web Design Contents HTML Quiz Design CSS basics CSS examples CV update What, why, who? Before you start to create a site, it s
Page layout & typography. graphic design
Page layout & typography graphic design first impressions lecture goals To help you better communicate the purpose of your web pages by visually emphasizing the most important features and relationships
Stylesheet or in-line CSS CSS attributes, used in stylesheets or in-line, can define:
Stylesheet or in-line CSS CSS attributes, used in stylesheets or in-line, can define: body, div, p, h1 - h6, hr, table, thead, tr, th, td, blockquote, address, ol, ul, dl, dt, dd span, a, font class e.g..stylename
Using Style Sheets for Consistency
Cascading Style Sheets enable you to easily maintain a consistent look across all the pages of a web site. In addition, they extend the power of HTML. For example, style sheets permit specifying point
Web Design and Databases WD: Class 7: HTML and CSS Part 3
Web Design and Databases WD: Class 7: HTML and CSS Part 3 Dr Helen Hastie Dept of Computer Science Heriot-Watt University Some contributions from Head First HTML with CSS and XHTML, O Reilly Recap! HTML
Print all 18 Chapters - CSS Basics
Or you can also use the @import method as shown below Print all 18 Chapters - CSS Basics CSS Basics.com Chapter: 1 - Introduction to CSS A CSS (cascading style sheet) file allows you to separate your web
Cascading Style Sheet (CSS) Tutorial Using Notepad. Step by step instructions with full color screen shots
Updated version September 2015 All Creative Designs Cascading Style Sheet (CSS) Tutorial Using Notepad Step by step instructions with full color screen shots What is (CSS) Cascading Style Sheets and why
CREATING HORIZONTAL NAVIGATION BAR USING ADOBE DREAMWEAVER CS5
CREATING HORIZONTAL NAVIGATION BAR USING ADOBE DREAMWEAVER CS5 Step 1 - Creating list of links - (5 points) Traditionally, CSS navigation is based on unordered list - . Any navigational bar can be
CIS 467/602-01: Data Visualization
CIS 467/602-01: Data Visualization HTML, CSS, SVG, (& JavaScript) Dr. David Koop Assignment 1 Posted on the course web site Due Friday, Feb. 13 Get started soon! Submission information will be posted Useful
CSS - Cascading Style Sheets
CSS - Cascading Style Sheets From http://www.csstutorial.net/ http://www.w3schools.com/css/default.asp What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements External
ICE: HTML, CSS, and Validation
ICE: HTML, CSS, and Validation Formatting a Recipe NAME: Overview Today you will be given an existing HTML page that already has significant content, in this case, a recipe. Your tasks are to: mark it
Essential HTML & CSS for WordPress. Mark Raymond Luminys, Inc. 949-654-3890 mraymond@luminys.com www.luminys.com
Essential HTML & CSS for WordPress Mark Raymond Luminys, Inc. 949-654-3890 mraymond@luminys.com www.luminys.com HTML: Hypertext Markup Language HTML is a specification that defines how pages are created
JJY s Joomla 1.5 Template Design Tutorial:
JJY s Joomla 1.5 Template Design Tutorial: Joomla 1.5 templates are relatively simple to construct, once you know a few details on how Joomla manages them. This tutorial assumes that you have a good understanding
Website Development. 2 Text. 2.1 Fonts. Terry Marris September 2007. We see how to format text and separate structure from content.
Terry Marris September 2007 Website Development 2 Text We see how to format text and separate structure from content. 2.1 Fonts Professionally written websites, such as those by Google and Microsoft, use
Inspiring Creative Fun Ysbrydoledig Creadigol Hwyl. Web Design in Nvu Workbook 2
Inspiring Creative Fun Ysbrydoledig Creadigol Hwyl Web Design in Nvu Workbook 2 CSS stands for Cascading Style Sheets, these allow you to specify the look and feel of your website. It also helps with consistency.
Web Design Revision. AQA AS-Level Computing COMP2. 39 minutes. 39 marks. Page 1 of 17
Web Design Revision AQA AS-Level Computing COMP2 204 39 minutes 39 marks Page of 7 Q. (a) (i) What does HTML stand for?... () (ii) What does CSS stand for?... () (b) Figure shows a web page that has been
CST 150 Web Design and Development I Midterm Exam Study Questions Chapters 1-3
CST 150 Web Design and Development I Midterm Exam Study Questions Chapters 1-3 Multiple Choice Identify the choice that best completes the statement or answers the question. 1. A host that provides storage
CHAPTER 10. When you complete this chapter, you will be able to:
Data Tables CHAPTER 10 When you complete this chapter, you will be able to: Use table elements Use table headers and footers Group columns Style table borders Apply padding, margins, and fl oats to tables
Garfield Public Schools Fine & Practical Arts Curriculum Web Design
Garfield Public Schools Fine & Practical Arts Curriculum Web Design (Half-Year) 2.5 Credits Course Description This course provides students with basic knowledge of HTML and CSS to create websites and
Selectors in Action LESSON 3
LESSON 3 Selectors in Action In this lesson, you will learn about the different types of selectors and how to use them. Setting Up the HTML Code Selectors are one of the most important aspects of CSS because
Coding Standards for Web Development
DotNetDaily.net Coding Standards for Web Development This document was downloaded from http://www.dotnetdaily.net/ You are permitted to use and distribute this document for any noncommercial purpose as
CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions)
CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions) Step 1 - DEFINE A NEW WEB SITE - 5 POINTS 1. From the welcome window that opens select the Dreamweaver Site... or from the main
Web Design and Development ACS-1809. Chapter 9. Page Structure
Web Design and Development ACS-1809 Chapter 9 Page Structure 1 Chapter 9: Page Structure Organize Sections of Text Format Paragraphs and Page Elements 2 Identifying Natural Divisions It is normal for a
FETAC Certificate in Multimedia Production. IBaT College Swords. FETAC Certificate in Multimedia Production Web Authoring Dreamweaver 3
IBaT College Swords FETAC Certificate in Multimedia Production Web Authoring Dreamweaver 3 Lecturer: Cara Martin M.Sc. Lecturer contact details: cmartin@ibat.ie IBaT 2009 Page 1 Cascading Style Sheets
HTML, CSS, XML, and XSL
APPENDIX C HTML, CSS, XML, and XSL T his appendix is a very brief introduction to two markup languages and their style counterparts. The appendix is intended to give a high-level introduction to these
Creating Web Pages with Dreamweaver CS 6 and CSS
Table of Contents Overview... 3 Getting Started... 3 Web Page Creation Tips... 3 Creating a Basic Web Page Exercise... 4 Create a New Page... 4 Using a Table for the Layout... 5 Adding Text... 6 Adding
Web Development 1 A4 Project Description Web Architecture
Web Development 1 Introduction to A4, Architecture, Core Technologies A4 Project Description 2 Web Architecture 3 Web Service Web Service Web Service Browser Javascript Database Javascript Other Stuff:
Full report on all 24 clients
1 of 6 3/15/2011 11:05 AM Campaign Monitor - Home Features Pricing Customers Resources Support Our Story Blog Sign Up Login Create an Account Tips & Resources Designing and building emails Designing an
When older typesetting methods gave
Typographic Terms When older typesetting methods gave way to electronic publishing, certain traditional terms got carried along. Today we use a mix of old and new terminology to describe typography. Alignment
How To Create A Web Page On A Windows 7.1.1 (For Free) With A Notepad) On A Macintosh (For A Freebie) Or Macintosh Web Browser (For Cheap) On Your Computer Or Macbook (
CREATING WEB PAGE WITH NOTEPAD USING HTML AND CSS The following exercises illustrate the process of creating and publishing Web pages with Notepad, which is the plain text editor that ships as part of
Using an external style sheet with Dreamweaver (CS6)
Using an external style sheet with Dreamweaver (CS6) nigelbuckner.com 2012 This handout explains how to create an external style sheet, the purpose of selector types and how to create styles. It does not
Web Building Blocks. Joseph Gilbert User Experience Web Developer University of Virginia Library joe.gilbert@virginia.
Web Building Blocks Core Concepts for HTML & CSS Joseph Gilbert User Experience Web Developer University of Virginia Library joe.gilbert@virginia.edu @joegilbert Why Learn the Building Blocks? The idea
BLACKBOARD 9.1: Text Editor
BLACKBOARD 9.1: Text Editor The text editor in Blackboard is a feature that appears in many different areas, but generally has the same look and feel no matter where it appears. The text editor has changed
MCH Strategic Data Best Practices Review
MCH Strategic Data Best Practices Review Presenters Alex Bardoff Manager, Creative Services abardoff@whatcounts.com Lindsey McFadden Manager, Campaign Production Services lmcfadden@whatcounts.com 2 Creative
Tips and tricks with Text boxes in Mahara
Tips and tricks with Text boxes in Mahara This tutorial assumes that you know how to drag a Text box block down to your page content area. Contents 1. The parts of a Text box... 2 2. What each of the buttons
customer community Getting started Visual Editor Guide! www.pure360community.co.uk
Getting started! 1 Contents Introduction... 3 Visual Editor Options... 3-5 Advanced Tips... 6-7 Do s and Don ts... 7-9 Testing Messages... 10 2 Welcome The Visual Editor tool is the ideal resource for
Web Development CSE2WD Final Examination June 2012. (a) Which organisation is primarily responsible for HTML, CSS and DOM standards?
Question 1. (a) Which organisation is primarily responsible for HTML, CSS and DOM standards? (b) Briefly identify the primary purpose of the flowing inside the body section of an HTML document: (i) HTML
Style & Layout in the web: CSS and Bootstrap
Style & Layout in the web: CSS and Bootstrap Ambient intelligence: technology and design Fulvio Corno Politecnico di Torino, 2014/2015 Goal Styling web content Advanced layout in web pages Responsive layouts
Web Publishing Basics 2
Web Publishing Basics 2 HTML and CSS Coding Jeff Pankin pankin@mit.edu Information Services and Technology Contents Course Objectives... 2 Creating a Web Page with HTML... 3 What is Dreamweaver?... 3 What
Basic tutorial for Dreamweaver CS5
Basic tutorial for Dreamweaver CS5 Creating a New Website: When you first open up Dreamweaver, a welcome screen introduces the user to some basic options to start creating websites. If you re going to
HTML CSS Basic Structure. HTML Structure [Source Code] CSS Structure [Cascading Styles] DIV or ID Tags and Classes. The BOX MODEL
![HTML CSS Basic Structure. HTML Structure [Source Code] CSS Structure [Cascading Styles] DIV or ID Tags and Classes. The BOX MODEL](/thumbs/40/20611446.jpg "HTML CSS Basic Structure. HTML Structure [Source Code] CSS Structure [Cascading Styles] DIV or ID Tags and Classes. The BOX MODEL")
HTML CSS Basic Structure HTML [Hypertext Markup Language] is the code read by a browser and defines the overall page structure. The HTML file or web page [.html] is made up of a head and a body. The head
Smartphones and tablets: If you have a data plan, use the SMTP server setting for the company that provides this service.
ARTSPHERE USER MANUAL Hosting for versions 5.0 and 5.1 The hosting control panel is where your website is located. We refer to this as the cpanel. To access the cpanel add /cpanel to your domain name (for
Last week we talked about creating your own tags: div tags and span tags. A div tag goes around other tags, e.g.,:
CSS Tutorial Part 2: Last week we talked about creating your own tags: div tags and span tags. A div tag goes around other tags, e.g.,: animals A paragraph about animals goes here
Colgate University Website Content Style Guide
University Website Content Style Guide Website Color Palette Maroon #862633 Dark Orange #e7810b Blue #365777 Gray #58595b Light Orange* #e39615 NOTE: No other colors are to be used within colgate.edu.
Development Perspective: DIV and CSS HTML layout. Web Design. Lesson 2. Development Perspective: DIV/CSS
Web Design Lesson 2 Development Perspective: DIV/CSS Why tables have been tabled Tables are a cell based layout tool used in HTML development. Traditionally they have been the primary tool used by web
CSS for Page Layout. Key Concepts
CSS for Page Layout Key Concepts CSS Page Layout Advantages Greater typography control Style is separate from structure Potentially smaller documents Easier site maintenance Increased page layout control
Cascading Style Sheets
Cascading Style Sheets 20 novembre 2000 Introduction = CSS syntax = Browsers = XML Conversion Tools = Document Storage Systems = DTD Development Tools Introduction CSS2 is a style sheet language that allows
Microsoft Word 2010 Basics
Microsoft Word 2010 Basics 1. Start Word if the Word 2007 icon is not on the desktop: a. Click Start>Programs>Microsoft Office>Microsoft Word 2007 b. The Ribbon- seen across the top of Microsoft Word.
HTML and CSS. Elliot Davies. April 10th, 2013. ed37@st-andrews.ac.uk
HTML and CSS Elliot Davies ed37@st-andrews.ac.uk April 10th, 2013 In this talk An introduction to HTML, the language of web development Using HTML to create simple web pages Styling web pages using CSS
How to code, test, and validate a web page
Chapter 2 How to code, test, and validate a web page Slide 1 Objectives Applied 1. Use a text editor like Aptana Studio 3 to create and edit HTML and CSS files. 2. Test an HTML document that s stored on
Creating the Surf Shop website Part3 REVISED
Creating the Surf Shop website Part3 REVISED Part 2 Recap: You should have the navigation completed for the website before starting Part 3. 1)Create a new DIV in index.html. It should come after banner
Contents. Introduction... 2. Downloading the Data Files... 2
Creating a Web Page Using HTML Part 3: Multi-page Management and Uploading INFORMATION TECHNOLOGY SERVICES California State University, Los Angeles Version 1.1 Summer 2009 Contents Introduction... 2 Downloading
How to Properly Compose E-Mail HTML Code : 1
How to Properly Compose E-Mail HTML Code : 1 For any successful business, creating and sending great looking e-mail is essential to project a professional image. With the proliferation of numerous e-mail
Mobile Web Site Style Guide
YoRk University Mobile Web Site Style Guide Table of Contents This document outlines the graphic standards for the mobile view of my.yorku.ca. It is intended to be used as a guide for all York University
MS Word 2007 practical notes
MS Word 2007 practical notes Contents Opening Microsoft Word 2007 in the practical room... 4 Screen Layout... 4 The Microsoft Office Button... 4 The Ribbon... 5 Quick Access Toolbar... 5 Moving in the
Responsive Email Design
Responsive Email Design For the Hospitality Industry By Arek Klauza, Linda Tran & Carrie Messmore February 2013 Responsive Email Design There has been a lot of chatter in recent months in regards to Responsive
Positioning Container Elements
Advanced Lesson Group 3 - Element Positioning with CSS Positioning Container Elements The position: style property is used to move block elements to a specific location on the web page. The position style
Table of Contents Find out more about NewZapp
Table of Contents Why is email display an issue in email marketing?... 2 Expert Email Design... 3 Desktop PC and Apple Mac email applications... 4 Web and mobile device email readers... 5 Creating your
Graphic Design Basics. Shannon B. Neely. Pacific Northwest National Laboratory Graphics and Multimedia Design Group
Graphic Design Basics Shannon B. Neely Pacific Northwest National Laboratory Graphics and Multimedia Design Group The Design Grid What is a Design Grid? A series of horizontal and vertical lines that evenly
Help on Icons and Drop-down Options in Document Editor
Page 1 of 5 Exact Synergy Enterprise Help on Icons and Drop-down Options in Document Editor Introduction The following table provides descriptions on the icons and drop-down options that are available
Level 1 - Clients and Markup
Level 1 - Clients and Markup The design for the email we ll build In this level The skills you ll need to compete Power Moves HTML and CSS Media queries Signature Move Using external resources An HTML
EUROPEAN COMPUTER DRIVING LICENCE / INTERNATIONAL COMPUTER DRIVING LICENCE WEB EDITING
EUROPEAN COMPUTER DRIVING LICENCE / INTERNATIONAL COMPUTER DRIVING LICENCE WEB EDITING The European Computer Driving Licence Foundation Ltd. Portview House Thorncastle Street Dublin 4 Ireland Tel: + 353
Paragraph Formatting 4
Paragraph Formatting 4 LESSON SKILL MATRIX Skill Exam Objective Objective Number Formatting Paragraphs Set indentation. 2.2.7 Setting Line Spacing in Text and Between Paragraphs Creating and Formatting
General Electric Foundation Computer Center. FrontPage 2003: The Basics
General Electric Foundation Computer Center FrontPage 2003: The Basics September 30, 2004 Alternative Format Statement This publication is available in alternative media upon request. Statement of Non-discrimination
GUIDE TO CODE KILLER RESPONSIVE EMAILS
GUIDE TO CODE KILLER RESPONSIVE EMAILS THAT WILL MAKE YOUR EMAILS BEAUTIFUL 3 Create flawless emails with the proper use of HTML, CSS, and Media Queries. But this is only possible if you keep attention
Responsive Web Design: Media Types/Media Queries/Fluid Images
HTML Media Types Responsive Web Design: Media Types/Media Queries/Fluid Images Mr Kruyer s list of HTML Media Types to deliver CSS to different devices. Important note: Only the first three are well supported.
BASICS OF WEB DESIGN CHAPTER 2 HTML BASICS KEY CONCEPTS COPYRIGHT 2013 TERRY ANN MORRIS, ED.D
BASICS OF WEB DESIGN CHAPTER 2 HTML BASICS KEY CONCEPTS COPYRIGHT 2013 TERRY ANN MORRIS, ED.D 1 LEARNING OUTCOMES Describe the anatomy of a web page Format the body of a web page with block-level elements
Web layout guidelines for daughter sites of Scotland s Environment
Web layout guidelines for daughter sites of Scotland s Environment Current homepage layout of Scotland s Aquaculture and Scotland s Soils (September 2014) Design styles A daughter site of Scotland s Environment
U T A H V A L L E Y U N I V E R S I T Y
U T A H V A L L E Y U N I V E R S I T Y W E B S T Y L E G U I D E V olume 1: Web Style Guide v1.0.1 HOW TO USE THIS STYLE GUIDE This guide is to be used in conjunction with, and is a expansion of, the
Microsoft Expression Web Quickstart Guide
Microsoft Expression Web Quickstart Guide Expression Web Quickstart Guide (20-Minute Training) Welcome to Expression Web. When you first launch the program, you ll find a number of task panes, toolbars,
Web Design and Databases WD: Class 5: HTML and CSS Part 2
Web Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer Science Heriot-Watt University Some contributions from Head First HTML with CSS and XHTML, O Reilly Hmm I need
Table of Contents THE DESIGNER S GUIDE TO CREATING NEWZAPP DRAG AND DROP TEMPLATES... 6 THE NEWZAPP SYSTEM... 7
Version 4.0.1 Table of Contents THE DESIGNER S GUIDE TO CREATING NEWZAPP DRAG AND DROP TEMPLATES... 6 THE NEWZAPP SYSTEM... 7 HOW THE SYSTEM WORKS... 7 THE TWO MAIN HTML EMAIL DESIGN OPTIONS FOR NEWZAPP...
Further web design: Cascading Style Sheets Practical workbook
Further web design: Cascading Style Sheets Practical workbook Aims and Learning Objectives This document gives an introduction to the use of Cascading Style Sheets in HTML. When you have completed these
Dreamweaver. Introduction to Editing Web Pages
Dreamweaver Introduction to Editing Web Pages WORKSHOP DESCRIPTION... 1 Overview 1 Prerequisites 1 Objectives 1 INTRODUCTION TO DREAMWEAVER... 1 Document Window 3 Toolbar 3 Insert Panel 4 Properties Panel
Web Developer Jr - Newbie Course
Web Developer Jr - Newbie Course Session Course Outline Remarks 1 Introduction to web concepts & view samples of good websites. Understand the characteristics of good website Understand the importance
Formatting Text in Microsoft Word
Formatting Text - 1 of 44 Formatting Text in Microsoft Word Page Setup 2 Centering Text 3 Line Spacing 4 Paragraph Spacing 4 Indenting a Paragraph s First Line 5 Hanging Indentation 5 Indenting an Entire
Advanced Drupal Features and Techniques
Advanced Drupal Features and Techniques Mount Holyoke College Office of Communications and Marketing 04/2/15 This MHC Drupal Manual contains proprietary information. It is the express property of Mount
HTML TIPS FOR DESIGNING
This is the first column. Look at me, I m the second column.
Using Adobe Dreamweaver CS4 (10.0)
Getting Started Before you begin create a folder on your desktop called DreamweaverTraining This is where you will save your pages. Inside of the DreamweaverTraining folder, create another folder called
Advanced Editor User s Guide
Advanced Editor User s Guide 1601 Trapelo Road Suite 329 Waltham, MA 02451 www.constantcontact.com Constant Contact, Inc. reserves the right to make any changes to the information contained in this publication
Advanced Web Design. Zac Van Note. www.design-link.org
Advanced Web Design Zac Van Note www.design-link.org COURSE ID: CP 341F90033T COURSE TITLE: Advanced Web Design COURSE DESCRIPTION: 2/21/04 Sat 9:00:00 AM - 4:00:00 PM 1 day Recommended Text: HTML for