URails Meeting 004. Ruby Quiz Is the following statement accessing a variable or calling a method? profile.user_name Could be either. Calling a method.

Slides:



Advertisements
Similar presentations
Table (TABLE) Contains TABLE ROWS (TR) Contains TABLE DATA (TD) Data can contain anything Text Lists Other tables Pictures …
Advertisements

HTML and CSS. HTML Hyper Text Markup Language Tells browser how to display text and images.
Web Pages Week 10 This week: CSS Next week: CSS – Part 2.
Cascading Style Sheets
/k/k 1212 Cascading Style Sheets Part one Marko Boon
Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is.
Fun with Formatting: DIV tags and Cascading Style Sheets Dr. donna Bair-Mundy.
กระบวนวิชา CSS. What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to.
CSS normally control the html elements. Three Ways to Insert CSS There are three ways of inserting a style sheet: External style sheet Internal style.
Cascading Style Sheets SP.772 May 6, CSS Useful for creating one unified look for an entire web site. Helps to seperate style from content. Can.
 CSS ids  Pages  Sites  HTML: class=“name”  Names may define format OR content › Either works  CAN apply multiple classes to the same tag  Multiple.
Chapter 7 Using Advanced Cascading Style Sheets HTML5 & CSS 7 th Edition.
Lecture Cascading Style Sheets (CSS) Internal Style Sheets Classes.
4.01 Cascading Style Sheets
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.
ITP 104.  While you can do things like this:  Better to use styles instead:
The Characteristics of CSS
Learning HTML. HTML Attributes HTML elements can have attributes Attributes provide additional information about an element Class – specifies a class.
IDs versus Classes Naming Your Tags for Maximum Functionality.
 This presentation introduces the following: › 3 types of CSS › CSS syntax › CSS comments › CSS and color › The box model.
CHAPTER 1 HTML & HTML5 I อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา 1.
WRT235: Writing in Electronic Environments CSS Classes, IDs, divs.
CSS Basic (cascading style sheets)
Web Development & Design Foundations with XHTML Chapter 8 Key Concepts.
Lecture 2 - HTML and CSS Review SFDV3011 – Advanced Web Development 1.
WRA 210: 10/30/2013 WIREFRAMES TO HTML/CSS. TODAY’S AGENDA Review: the object Review: the CSS Box Model Review: box model, and layout Intro: HTML5 structural.
ECA225 Applied Interactive Programming Cascading Style Sheets, pt 1 ECA 225 Applied Online Programming.
So far, we have looked at CSS selectors that correlate with HTML tags Now, we’ll see how you can define your own selectors using class and ID selectors.
Quick Questions 1. What does HTML stand for? 2. What are the three main languages of the Web? 3. What is the purpose of the tags? 4. Why do we indent different.
1 © Netskills Quality Internet Training, University of Newcastle Using Style Sheets in Dreamweaver CS © Netskills, Quality Internet Training, University.
CSS Fun damentals The Document Hierarchy Element Relationships The Box Model.
11/12/2015 Box Model Reed Crouch. 11/12/2015  HTML elements can be considered as boxes. In CSS, the term "box model" is used when referring to layout.
Web Design (12) CSS Introduction. Cascading Style Sheets - Defined CSS is the W3C standard for defining the presentation of documents written in HTML.
Coding with HTML/CSS Quiz { } Play as a PowerPoint slideshow for answers.
CIS67 Foundations for Creating Web Pages Professor Al Fichera Rev. September 22, 2010—All HTML code brought to XHTML standards. Reference for CIS127 and.
Chapter 5 pp HTML Elements & Attributes Format Content Or Examples This Text Is A Hyperlink.
ECA 228 Internet/Intranet Design I Cascading Style Sheets.
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.
Chapter 4 and 5. Objectives Introduce markup: elements and attributes How browsers interpret HTML documents Basic structure of HTML document What do style.
CASCADING STYLE SHEET CSS. CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem.
CSS Introductions. Objectives To take control of the appearance of a Web site by creating style sheets. To use a style sheet to give all the pages of.
Cascading Style Sheets (CSS) Internal Style Sheets Classes
CCT260H - Christopher Evan Jones
CSS Box Model.
CSS Box Model.
4.01 Cascading Style Sheets
CSS Layouts: Grouping Elements
Webpage layout using CSS
CSS Rule Selector Declaration Block Value Attribute Name body {
>> Introduction to CSS
CS1220 Web Programming Saloni Chacha.
>> CSS Rules Selection
Cascading Style Sheets
HTML Tables CS 1150 Spring 2017.
Box model.
Cascading Style Sheets (Layout)
CASCADING STYLE SHEET CSS.
CSS Cascading Style Sheets
CSS Box Model.
CSS Box Model.
Float Property Elements that seem to “float" on the right or left side of either the browser window or another element are often configured using.
Putting it all together
More CSS Page layout Boriana Koleva Room: C54
Building a website: Putting it all together
CSS Box Model.
CSS and Class Tools.
4.01 Cascading Style Sheets
Cascading Style Sheets III B. Com (Paper - VI) & III B
Web Programming and Design
Presentation transcript:

URails Meeting 004

Ruby Quiz Is the following statement accessing a variable or calling a method? profile.user_name Could be either. Calling a method with no parameters and accessing a variable are syntactically identical

Quiz (cont.) What is being store in foo ? foo = { :dogs => “rock” } A Hash. { } with key-value pairs indicate a Hash puts foo[:dogs] # String => “rock”

Quiz (cont.) What is being store in foo ? foo = [ “hello”, “world” ] An Array. It has to elements, “hello” and “world” foo[0] # String => “hello”

Quiz (cont.) What is being store in foo ? foo = [ { :hello => “greeting” }, { :world => “planet” } ] An Array. It has two elements, a hash with the key/value :hello/”greeting”, and a hash with the key/value :world/”planet”. puts foo[0] # Hash => { :hello => “greeting” } puts foo[0][:hello] # String => “greeting”

Quiz (cont.) What is being stored in foo ? foo = { :hi => { :hello => “greeting”, :world => “planet” }} A Hash. It has to elements, a hash with the key :hello, and a hash with the key :world. foo[:hi][:world] # String => “planet”

HTML/CSS Quiz How can I change the background color of the p tag to green using CSS? My cool heading Hello! p { background-color:green; }

How can I change only the first p tag to have a green background color? First Paragraph Second Paragraph You can’t! (without adding a class or id)

How can I change only the first p tag to have a green background color? First Paragraph Second Paragraph.green_color { background-color:green; }

div tags div tags can be styled like any other tag, but also have “spacing” and can be thought of as a container div -specific CSS Attributes to be aware of – width – height – margin – padding – border CSS Box Model