HTML5 and CSS3 The Future of the Web Programming CSS. Sergio Luján Mora
|
|
|
- Leon Howard
- 7 years ago
- Views:
Transcription
1 HTML5 and CSS3 The Future of the Web Programming CSS Sergio Luján Mora 1
2 Content Introduction Linking HTML and CSS Rules, selectors, and properties Text properties Background Links Box model Layout Introduction CSS (Cascading Style Sheets): A style sheet is a set of instructions each of which tells a browser how to draw a particular element on a page HTML documents are a collection of elements arranged in a hierarchy 2
3 3
4 Introduction Hierarchy inheritance: If you apply style to an element (parent) which contains other elements (children) then this will be inherited by the elements inside Introduction Rules have two parts: a selector and a declaration The selector tells a browser which elements in a page will be affected by the rule. There are a number of different types of selector. The declaration tells the browser which set of properties to apply. There are many different properties. 4
5 Introduction <html> <head><title>css example</title></head> <body> <h1>university of Alicante</h1> <p> <img src="logo.png" /> <a href=" of Alicante</a> </p> <div> <h1>department of Software and Computing Systems</h1> Introduction <p> The Deparment of Software and Computing Systems teaches the following courses: <em>programming, Object-Oriented Programming, Web Programming, and Databases and Software Engineering</em>. </p> <h2>teaching Staff</h2> </div> </body> </html> 5
6 <style type="text/css"> h1 {color: blue;} Introduction h2 {color: red;} p {font-size: 1.4em;} </style> 6
7 Exercise Give color green for the paragraph One solution: p {font-size: 1.4em;} p {color: green;} Exercise - Solution Also (better): p {font-size: 1.4em; color: green;} 7
8 Introduction Some examples: body {background: white; color: black; fontsize: 15px;} h1 {background: blue; font-size: 30px;} p {background: yellow;} strong {background: red;} em {background: red; color: yellow;} If the value has two or more words: p {font-family: "Times New Roman", serif} Introduction Comments (1 or more lines): /* */ Example: /* Paragraph */ p { text-align: center; /* Center */ color: black; /* Black */ font-family: Arial; /* Font face */ } 8
9 Different versions: Introduction CSS1: CSS level CSS2: CSS level CSS2 revision CSS3: CSS level 3. (Working draft) Problem: incompatibilities between browsers More information: Introduction W3C: W3 Schools: 9
10 10
11 Linking HTML and CSS Three ways of making a style sheet affect the appearance of an HTML document: External (linking): <head> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> </head> Internal (embedded): <head> <style type="text/css" media="screen"> p {text-indent: 10pt} </style> </head> Inline: <p style="text-indent: 10pt">indented paragraph</p> 11
12 Exercise Change the previous example: link the web page to an external style sheet External: Linking HTML and CSS Many pages can be linked to a single style sheet Making changes to this style sheet can then change the appearance of all the web pages linked to it Internal: When the style sheet is used for only one web page Inline: When the style is used for only one HTML element 12
13 Linking HTML and CSS The most popular method is the external style sheet: <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> href: Tells the browser where to locate the style sheet, with either a relative or absolute URL rel: Tells the browser what to expect stylesheet alternate stylesheet Linking HTML and CSS If you define different alternative style sheets, you have to assign a title to each style sheet <link rel="alternate stylesheet" href="style.css" type="text/css" media="screen" title="style 1" /> Example: webpage of Spanish Social System (Seguridad Social) 13
14 Linking HTML and CSS <link rel="stylesheet" href="/ireach/internet/css/estilos_b.css" media="screen" type="text/css"> <link rel="alternate stylesheet" href="/ireach/internet/css/estiloshc_b.css" media="screen" type="text/css" title="2.alto Contraste"> <link rel="alternate stylesheet" href="/ireach/internet/css/estilosht_b.css" media="screen" type="text/css" title="3.texto Grande"> <link rel="stylesheet" href="/ireach/internet/css/estilosp_b.css" media="print" type="text/css"> 14
15 15
16 type: Linking HTML and CSS Tells the browser the type of document linked Common values: text/css text/javascript media: Linking HTML and CSS Tells the browser the type of device the style sheet is for: screen: Computer display print: Printer projection: Projector aural: Speech synthesizer braille: Braille line tty: Console (text) display tv: Television all: All devices (default value) 16
17 Rules, selectors, and properties Rules: the selector, followed by the set of properties, which are surrounded by curly braces (that is { and }) Selector Declaration h1 {color: #FF0000; background: #00FF00} Property Colon Value Property Separator Colon Value Rules, selectors, and properties Selector: Type: select every instance of the specified type of HTML element (tag) Class: class name preceded by. ID: identifier name preceded by # Pseudo-classes: name of the pseudo-class 17
18 Rules, selectors, and properties Property and value: the property name followed by a colon, a space (optional) and then the value (if necessary, with its unit, though no space before the unit!) The last property/value pair doesn t need the separator semi-colon (;) Rules, selectors, and properties Advices: Make sure you get the property name exactly right: it's got to be color, not colour or collor All CSS properties can only take a specified range of values: get used to consulting the specification Don't get the punctuation wrong (don t forget the semi-colon between properties) 18
19 Write a new webpage Exercise Give a background color (light gray) and a color (dark blue) to the whole page Selector: html or body Property: background-color Value: # Property: color Value: #0000AA Exercise - Solution html { background-color: #999999; color: #0000AA; } Tips: The style sheet is easier to read if you put each property on a new line it's very easy to forget semi-colons (;). Always put that extra one on the last property in a statement. You won't forget to do it when you add a new property later on 19
20 Rules, selectors, and properties Class: is an attribute we can add to HTML elements so that we can identify them from the style sheet, using a class selector, and give them their own style <p class="footer"> The form of a class selector is very simple, and it would select the specified element with the class attribute class-name p.footer { color: blue; } 20
21 Rules, selectors, and properties If you don t specify an element, the class name applies to all the elements:.important {color: red;} <p class="important"> Bla, bla, bla. </p> <ul class="important"> <li>bla, bla.</li> <li>bla, bla.</li> </ul> Exercise Write a new webpage with three paragraphs Define three classes for the three paragraphs: < p class="normal"> Color dark blue < p class="important"> Color red, background color yellow < p class="extra"> Color green, background color gold 21
22 Exercise - Solution <html> <head><title>three paragraphs</title> <style type="text/css">.normal {color: #0000AA;}.important {color: red; background-color: yellow;}.veryimportant {color: yellow; background-color: red;} </style> <body> <p class="normal"> This is the first paragraph. Bla, bla, bla, bla.</p> <p class="important"> This is the second paragraph. Bla, bla, bla, bla.</p> <p class="veryimportant"> This is the third paragraph. Bla, bla, bla, bla.</p> </body></html> 22
23 Rules, selectors, and properties ID: is an attribute we can add to HTML elements so that we can uniquely identify them from the style sheet, using an ID selector, and give them their own style <p id="paragraph-1"> The form of an ID selector is very simple, and it would select the specified element with the ID attribute value p#paragraph-1 { color: blue; } Exercise Write a new webpage with three titles and four paragraphs 23
24 h1 h2 First paragraph of first chapter Important paragraph h2 Important paragraph Exercise The main title (h1) is color white on black The chapter titles (h2) are blue on yellow The default color of paragraphs is green The first paragraph of the first chapter is black An important paragraph is yellow on red 24
25 Exercise - Solution <html> <head><title>three paragraphs</title> <style type="text/css"> p {color: green;} #title {color: white; background-color: black;} #first-chapter-par {color: black;}.chapter-title {color: blue; background-color: yellow;}.important {color: yellow; background-color: red;} </style> Exercise - Solution <body> <h1 id="title">the title of the book</h1> <h2 class="chapter-title">the first chapter</h2> <p id="first-chapter-par" > This is the first paragraph. Bla, bla, bla, bla.</p> <p class="important"> This is the second paragraph. Bla, bla, bla, bla.</p> <h2 class="chapter-title">the second chapter</h2> <p> This is the third paragraph. Bla, bla, bla, bla.</p> <p class="important"> This is the third paragraph. Bla, bla, bla, bla.</p> </body> </html> 25
26 Text properties background-color: background color of element color: color of text 26
27 Text properties Colors: Name of color red rgb(x,x,x) rgb(255,0,0) rgb(y%, y%, y%) rgb(100%,0%,0%) #rrggbb #ff0000 #rgb = #rrggbb #f00 = #ff0000 Text properties font-family: specifies a list of one or more fonts using the family name of each The font names are separated by commas A browser then uses the first font in the list that is installed on its system At the end of that list you should always put one of five generic font names: serif (e.g. Times) sans-serif (e.g. Helvetica) cursive (e.g. Zapf-Chancery) fantasy (e.g. Western) monospace (e.g. Courier) If you want to use a font with more than a single word name make sure you put it between quote marks, like this: "Times New Roman" 27
28 Text properties font-size: can take what is referred to in CSS as length values Text properties Units: %: percentage in: inches cm: centimeters mm: millimeters em: equal to the current size of text ex: equal to letter x height pt: point (1 pt = 1/72 inches) pc: pica (1 pc = 12 points) px: pixels 28
29 Units: Keywords: Text properties xx-small, x-small, small, medium, large, x-large, xx-large smaller, larger Absolute: in, cm, mm, pt, pc, px Relative: %, em, ex Best unit: em Text properties If you set the font-size using em units, they will always remain relative to the main text on the page, whatever that might be For example, if you set <h1> to 2em, it will be twice as big as the rest of the text on the page 29
30 Text properties font-style: sets the style of the font normal: default, normal font italic: an italic font oblique: an oblique font font-variant: displays text in normal or small-caps font normal small-caps Text properties font-weight: controls the boldness of text normal bold bolder lighter 100, 200,...,
31 Text properties text-align: controls the justification of text left right center justify Text properties text-decoration: for underlining and striking through text none underline overline line-through blink 31
32 Text properties text-transform: controls the letters in an element none capitalize: each word in a text starts with a capital letter uppercase lowercase Text properties letter-spacing: controls the spacing between characters word-spacing: controls the spacing between words line-height: sets the distance between lines 32
33 Exercise Use the different text properties: Add some special styles to make the headings stand out more from the main text Make the text in the paragraphs look more clean and attractive Background background-color: defines the backgroud color background-image: puts an image in the background background-image: url(logo.png); background-repeat: defines how the backgound image is going to be repeated background-position: defines the position of the background image 33
34 Background background-repeat: repeat: the image will tile to fill the whole element repeat-x: the image will only repeat horizontally across the element repeat-y: the image will only repeat vertically down the element no-repeat: only a single instance of the element will appear Exercise Create a new web page Put an image as background image Try the different repeat values 34
35 Background background-position: specify 2 values, the first for where you want the image to be horizontally, the second for where it will be vertically Length values Keyword values: top, bottom, left, right, center Background Example: background-position: center center - places the image right in the center of the element, both horizontally and vertically background-position: top left - places the image in the top left corner background-position: right bottom - places the image in the bottom right corner 35
36 Exercise Create a new web page Put an image as background image in the center of the web page Exercise Create a new web page with three paragraphs Put an image as background image in each one of the paragraphs 36
37 Links Links can have four different states: link: this is the normal state visited: when a browser has visited that destination recently hover: while the cursor is over the link active: while the link is being clicked We can create rules that apply to links in any of these states Links Pseudo-classes: a:link {...} a:visited {...} a:hover {...} a:active {...} 37
38 Exercise Give links in both their normal and visited state a background-color of #95b7cd and make their text color the same as the regular text on the page A user can t tell whether a link is to a page they have recently viewed or not. Give links in their hover state a background-color of #aaddee Give links in their active state a background-color of #3cc7f0 Exercise - Solution a:link { color: #666666; background-color: #95b7cd; } a:visited { color: #666666; background-color: #95b7cd; } a:hover { background-color: #aaddee; } a:active { background-color: #3cc7f0; } Roll over and click the links to see the effect of the hover and active states 38
39 Exercise Most browsers have a default setting for links, which is to underline them How can we change this? How can we draw a line through the text of visited links? Exercise - Solution a:link {... text-decoration: none; } a:visited {... text-decoration: line-through; } 39
40 Box model Boxes: each element of the web page is represented by a box Box model margin is the distance between the edge of an element and its adjacent elements padding is the distance between the edge of an element and its content 40
41 Box model padding, border and margin are divided into four edges: top, bottom, left y right Therefore, we have: border-left, border-right, border-top and border-bottom (and the same for margin and padding) padding, border and margin apply the values to all four edges Box model Borders can be applied either to all edges of an element, or each edge individually 41
42 Box model There are three characteristics of a border you can control: Its style, using values like solid dotted dashed double Its width, using all the usual length values Its color, using the color values Exercise Create a new web page Write four paragraphs Apply a different border style and background to each paragraph 42
43 Exercise - Solution.p1 { background-color: #999999; border: solid 5px green; }.p2 { background-color: #aa6666; border: dotted 5px green; }.p3 { background-color: #66aa66; border: dashed 5px green; }.p4 { background-color: #6666aa; border: double 5px green; } 43
44 Exercise 1 Read exercise document: Curriculum vitae Layout <span> and <div> are the main building blocks used in CSS page layouts They are simply generic HTML block element span: inline div: block You can wrap it around the different blocks of content you want to position on your page 44
45 Layout <span> and <div> need unique id attributes so that we can identify them and give them positioning properties in the style sheet ids must be unique in any single HTML document, otherwise HTML document is not valid Example: HTML: <div id="header">... </div> Layout CSS: #header {background-color: gray; color: red} 45
46 Layout Basic three column layout with a navigation bar (navbar) on the left and a sidebar on the right It uses a combination of static, relative and absolute positioning Layout <div id="header"></div> <div id="content"> <div id="navbar"></div> <div id="main-text"></div> <div id="sidebar"></div> </div> 46
47 Layout Both #header and #main-text are going to be positioned statically They simply flow down the page, one after the other, in the same order as they occur in the XHTML Layout body { margin: 0; background-color: #aaaaaa; text-align: center; } #header { background-color: #0000ff; color: #ffffff; text-align: center; font-size: 2em; } #content { position: relative; } 47
48 #navbar { position: absolute; top: 0; left: 0; width: 198px; background-color: #ff0000; } Layout #main-text { margin-left: 198px; margin-right: 198px; background-color: #ffffff; } #sidebar { position: absolute; top: 0; right: 0; width: 198px; background-color: #00ff00; } Layout 48
49 Exercise 2 Read exercise document: 2-columns layout for curriculum vitae 49
{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:
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?
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
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
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,
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
HTML5 and CSS3 Design with CSS Page 1
HTML5 and CSS3 Design with CSS Page 1 1 12 2 3 3 4 45 5 6 6 7 7 HTML5 and CSS3 DESIGN WITH CSS Styles in HTML Documents Styles provide a method of creating consistent formatting of elements throughout
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
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 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
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...
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
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
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
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
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
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,
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
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
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
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
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,
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
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
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
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.
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
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
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
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
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
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
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
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
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
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
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.
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
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
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
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
Cascading Style Sheets (CSS)
6 Cascading Style Sheets (CSS) Objectives To control the appearance of a Web site by creating style sheets. To use a style sheet to give all the pages of a Web site the same look and feel. To use the class
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
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
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
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
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
Base template development guide
Scandiweb Base template development guide General This document from Scandiweb.com contains Magento theme development guides and theme development case study. It will basically cover two topics Magento
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
Create Your own Company s Design Theme
Create Your own Company s Design Theme A simple yet effective approach to custom design theme INTRODUCTION Iron Speed Designer out of the box already gives you a good collection of design themes, up to
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
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
LaGuardia Community College 31-10 Thomson Ave, Long Island City, New York 11101 Created by ISMD s Dept. Training Team. Overview
Overview Dreamweaver gives you many options when it comes to setting the properties for your webpages. Within the "Page Properties" dialog box, you can set the appearance of your page, name your page and
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,
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
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
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
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
Web Design for Programmers. Brian Hogan NAPCS Slides and content 2008 Brian P. Hogan Do not reproduce in any form without permission
Web Design for Programmers Brian Hogan NAPCS Slides and content 2008 Brian P. Hogan Do not reproduce in any form without permission Quick Disclaimers This is a crash course! Many topics are simplified
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
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
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
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
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
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
Slicing and Coding the Navigation Background in CSS
CSS Template Tutorial Please take your time to visit http://www.freecss.info Table of Contents Step 1 Setting up. page 3 Step 2 Coding the basics.page 5 Step 3 Coding and slicing the header. page 9 Step
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
Web Development. Owen Sacco. ICS2205/ICS2230 Web Intelligence
Web Development Owen Sacco ICS2205/ICS2230 Web Intelligence Introduction Client-Side scripting involves using programming technologies to build web pages and applications that are run on the client (i.e.
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
Code View User s Guide
Code View 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
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.
Intro to Web Design. ACM Webmonkeys @ UIUC
Intro to Web Design ACM Webmonkeys @ UIUC How do websites work? Note that a similar procedure is used to load images, etc. What is HTML? An HTML file is just a plain text file. You can write all your HTML
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
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
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
Appendix H: Cascading Style Sheets (CSS)
Appendix H: Cascading Style Sheets (CSS) Cascading Style Sheets offer Web designers two key advantages in managing complex Web sites: Separation of content and design. CSS gives developers the best of
Introduction to Web Development
Introduction to Web Development Week 2 - HTML, CSS and PHP Dr. Paul Talaga 487 Rhodes paul.talaga@uc.edu ACM Lecture Series University of Cincinnati, OH October 16, 2012 1 / 1 HTML Syntax For Example:
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
CS134 Web Site Design & Development. Quiz1
CS134 Web Site Design & Development Quiz1 Name: Score: Email: I Multiple Choice Questions (2 points each, total 20 points) 1. Which of the following is an example of an IP address? [Answer: d] a. www.whitehouse.gov
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
Create a Poster Using Publisher
Contents 1. Introduction 1. Starting Publisher 2. Create a Poster Template 5. Aligning your images and text 7. Apply a background 12. Add text to your poster 14. Add pictures to your poster 17. Add graphs
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:
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
HTML TIPS FOR DESIGNING
This is the first column. Look at me, I m the second column.
Scoop Hosted Websites. USER MANUAL PART 4: Advanced Features. Phone: +61 8 9388 8188 Email: scoop@scoopdigital.com.au Website: scoopdigital.com.
Scoop Hosted Websites USER MANUAL PART 4: Advanced Features Phone: +61 8 9388 8188 Email: scoop@scoopdigital.com.au Website: scoopdigital.com.au Index Advanced Features... 3 1 Integrating Third Party Content...
Introduction to web development and JavaScript
Objectives Chapter 1 Introduction to web development and JavaScript Applied Load a web page from the Internet or an intranet into a web browser. View the source code for a web page in a web browser. Knowledge
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
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
3. Add and delete a cover page...7 Add a cover page... 7 Delete a cover page... 7
Microsoft Word: Advanced Features for Publication, Collaboration, and Instruction For your MAC (Word 2011) Presented by: Karen Gray (kagray@vt.edu) Word Help: http://mac2.microsoft.com/help/office/14/en-
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
01/42. Lecture notes. html and css
web design and applications Web Design and Applications involve the standards for building and Rendering Web pages, including HTML, CSS, SVG, Ajax, and other technologies for Web Applications ( WebApps
KOMPOZER Web Design Software
KOMPOZER Web Design Software An IGCSE Student Handbook written by Phil Watkins www.kompozer.net CONTENTS This student guide is designed to allow for you to become a competent user* of the Kompozer web
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
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
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
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...
SellerDeck 2014 Responsive Design Guide
SellerDeck 2014 Responsive Design Guide Version: 1.0.0 SellerDeck 2014 Responsive Design 1 Contents Introduction...3 Themes and Wireframe...4 Classic Theme...4 Smart Theme...5 Wireframe...6 How the Responsive
WEB DEVELOPMENT IA & IB (893 & 894)
DESCRIPTION Web Development is a course designed to guide students in a project-based environment in the development of up-to-date concepts and skills that are used in the development of today s websites.
Word Processing programs and their uses
Word Processing programs and their uses An application that provides extensive tools for creating all kinds of text based programs. They are not limited to working with text and enable you to add images
Links Getting Started with Widgets, Gadgets and Mobile Apps
Widgets, Gadgets, and Mobile Apps for Libraries: Tips, Code Samples, Explanations, and Downloads Michael Sauers Technology Innovation Librarian Nebraska Library Commission msauers@nlc.state.ne.us Jason