Cascading Style Sheets Class 2, Lecture 3 Rachel A Ober

Slides:

Advertisements

Similar presentations

Tables Feb. 14, Tables Great way to organize and display information Laid out in columns and rows Think of an excel spreadsheet Defined with tag.

Advertisements

The Test Will last 60 minutes Will be submitted via the electronic coursework submission system (not part of the test itself Is worth 20% of total module.

Table, List, Blocks, Inline Style

Working with Web Tables

Intro to HTML. HTML HTML = HyperText Markup Language Used to define the content of a webpage HTML is made up of tags and attributes Content.

Slide 1. Murach's HTML5 and CSS3, C6 Slide 2 Layout Control is a critical issue in any website/pages design. Traditionally and conveniently (but not satisfactorily)

Cascading Style Sheets

MIS 425 Lecture 2 – HTML Navigation, Colors, tables and Styles Instructor: Martin Neuhard

HTML / CSS – Basics Why the heck are we doing this?

Web Design with Cascading Style Sheet Lan Vu. Overview Introduction to CSS Designing CSS Using Visual Studio to create CSS Using template for web design.

16 HTML Tables and Frames Section 16.1 Create a basic table using HTML Define borders Merge cells Align content in tables Section 16.2 Create a frames-based.

Server Web Server Pages Client Browser  HTML can do everything  We will limit our use to defining the content units – NOT formatting  Why? ›

 CSS ids  Pages  Sites  HTML: class=“name”  Names may define format OR content › Either works  CAN apply multiple classes to the same tag  Multiple.

Lecture Cascading Style Sheets (CSS) Internal Style Sheets Classes.

Art 128 Interface Programming 1 In-class Presentation Week 11B.

HTML & CSS A brief introduction. OUTLINE 1.What is HTML? 2.What is CSS? 3.How are they used together? 4.Troubleshooting/Common problems 5.More resources.

Cascading Style Sheet Basics Pepper. Looking at the HTML See the surrounding tags See head, body, paragraph, header See the ending tags See the list.

Tutorial 5 Working with Web Tables. XP Objectives Explore the structure of a Web table Create headings and cells in a table Create cells that span multiple.

18 People Surveyed HTML (HyperText Markup Language) HTML “tags” Describes structure Building blocks Headings, paragraphs, lists, links, images, quotes,

Cascading Style Sheets Class 1, Lecture 1 Rachel A Ober

Css. Definition Cascading style sheet (CSS) Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.

CSS CSS is short for C ascading S tyle S heets. It is a new web page layout method that has been added to HTML to give web developers more control over.

Form Tag How to use Form Tag Something NEW ? PARAMETER Attribute NAME Specifies the name for a form To specify which form to submit with JavaScript, this.

HTML CSS JAVASCRIPT. HTML - Stands for Hyper Text Markup Language HTML is a ‘language’ that describes web pages. This language is a collection of codes.

Cascading Style Sheets Class 2, Lecture 2 Rachel A Ober

Essentials of HTML Class 4 Instructor: Jeanne Hart

© 2011 Delmar, Cengage Learning Chapter 8 Using Styles and Design Style Sheets for Design.

Cascading Style Sheets Part 1. CSS vs HTML HTML: Originally intended to markup structure of a document (,...,,,,,...) CSS Developing technology, CSS1,

Cascading Style Sheets Dreamweaver. Styles Determine how the HTML code will display Determine how the HTML code will display Gives designers much more.

Lesson 02 // Elements & Attributes. There are different types of elements, but the 2 most important ones are BLOCK and INLINE. Block elements flow from.

>> HTML: Structure Elements. Elements in HTML are either Inline or Block. Block-level Elements – Begins on a new line – Occupy the whole width – Stacks.

Planning your site/organization on the Web Please use speaker notes for additional information!

Lecture 2 - HTML and CSS Review SFDV3011 – Advanced Web Development 1.

Intro To Web Design with Adobe Dreamweaver CSS Cascading Style Sheets (CSS) is the W3C standard for defining the presentation of documents written in HTML,

CSS October 19. Review of CSS CSS was designed to separate the content of HTML pages from their appearance We are primarily dealing with external style.

1 Web Application Programming Presented by: Mehwish Shafiq.

WRA HTML & CSS – BUILDING WEBPAGES. TODAY’S AGENDA Review: external stylesheets Review: transforming a list Intro: the object Intro: the.

INTRODUCTION TO CSS. TOPICS TO BE DISCUSSED……….  Introduction Introduction  Features of CSS Features of CSS  Creating Style Sheet Creating Style Sheet.

1 © Netskills Quality Internet Training, University of Newcastle Using Style Sheets in Dreamweaver CS © Netskills, Quality Internet Training, University.

Cascading Style Sheets CSS. Source W3Schools

DYNAMIC HTML What is Dynamic HTML: HTML code that allow you to change/ specify the style of your web pages. Example: specify style sheet, object model.

Layout with Styles Castro Chapter 11. Tables vs. CSS You can produce “liquid layouts” (layouts that stretch as the browser is resized) using tables or.

HTML & CSS BasicsHTMLCSSQuizAnswers  The logo In this website(made of html and css Codes), you will learn some basics of How to use HTML and CSS codes.

CSS Layout Cascading Style Sheets. Lesson Overview  In this lesson, you will learn:  float & clear  display & visibility.

Are You Smarter Than a 5 th Grader? 1,000,000 5th Grade HTML 5th Grade Syntax 4th Grade HTML 4th Grade Syntax 3rd Grade HTML 3rd Grade Syntax 2nd Grade.

CSS Cascading Style Sheets A very brief introduction CSS, Cascading Style Sheets1.

Cascading Style Sheets Class 3, Lecture 4 Rachel A Ober

Unit 5 The Web Book Test. Unit 5 Test The Web Book Test 1. On the bottom of page 46, why is writing web pages not like writing printed documents ?

Introduction to Programming the WWW I CMSC Winter 2003 Lecture 5.

CSS Layout Cascading Style Sheets. Lesson Overview  In this lesson, we’ll cover:  Brief CSS review  Creating sections with the tag  Creating inline.

Chapter 1: Intro to HTML Section 1: HTML Structure Presentation Section 2: Layout of an HTML File Section 3: Working with Lists & Tables Section 4: HTML.

Tutorial 5 Working with Web Tables. New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition 2 Objectives Learn and Apply the structure of.

HTML LAYOUTS. CONTENTS Layouts Example Layout Using Element Example Using Table Example Output Summary Exercise.

INTRODUCTION ABOUT DIV Most websites have put their content in multiple columns. Multiple columns are created by using or elements. The div element is.

Cascading Style Sheets - CSS December 20, 2008 NTPCUG Expression Web SIG.

Cascading Style Sheets for layout

MIT 511- Web Design & Usability

Cascading Style Sheets (CSS) Internal Style Sheets Classes

Week-12 (Lecture-1) Cascading Style Sheets (CSS): describe how documents are presented on screens. Types of Style Sheets: External Style Sheet - Define.

Web Basics: HTML/CSS/JavaScript What are they?

Create and edit web pages 4

Cascading Style Sheets for layout

PAGE LAYOUT - 1.  Most HTML elements are defined as block level elements or inline elements.  Block level elements normally start (and end) with a new.

Cascading Style Sheets

Styles and the Box Model

Laying out a website using CSS and HTML

Introduction to Web Authoring

Apply procedures to create cascading style sheets.

Monday, Sept. 24 Today we are going to update the html code to html5. It has some new features that we have not covered yet.

Presentation transcript:

Cascading Style Sheets Class 2, Lecture 3 Rachel A Ober

Using “display: inline” W3 Schools does it best… ame=trycss_display ame=trycss_display

How to Structure If you’ve peeked at some of my code, you’ll see I make use of tags a lot. You can also use tags for short passages you’d like to change.

Possible Structures Separate Header elements from Content and Footer. You may also want to include a Navigation element. Break up your page into logical organizations. This way, you can manipulate many different parts of the document or the whole document.

Design If you have a good document design, you can just change the style sheet whenever you want to change your design. You won’t even have to touch your HTML again!

Tables vs. DIVs Tables aren’t very flexible when designing pages. DIV tags can be directly manipulated through CSS. What if your manager wants the design of a page to change and everything is controlled by tables? What if he wants the bottom row of every design to now be at the top?

Example 1 html html

Common Layout Suggestions

Lab #3: Designing Without Tables Objective: Change a layout into a layout! Stock Images for use: