Views Carol Wolf Computer Science. Extended Ruby  Views files are written in extended Ruby, erb.  They end in.html.erb.  Ruby code is intermixed with.

Slides:



Advertisements
Similar presentations
Svetlin Nakov Telerik Corporation
Advertisements

WEB DESIGN TABLES, PAGE LAYOUT AND FORMS. Page Layout Page Layout is an important part of web design Why do you think your page layout is important?
HyperText Markup Language (HTML). Introduction to HTML Hyper Text Markup Language HTML Example The structure of an HTML document Agenda.
The Librarian Web Page Carol Wolf CS396X. Create new controller  To create a new controller that can manage more than just books, type ruby script/generate.
CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.
HTML Overview - Cascading Style Sheets (CSS). Before We Begin Make a copy of one of your HTML file you have previously created Make a copy of one of your.
Chapter 3 – Designing your web pages Dr. Stephanos Mavromoustakos.
Cascading Style Sheets. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. CSS is a.
Tutorial 6 Creating a Web Form
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.
The Web Warrior Guide to Web Design Technologies
How to Make a Web Page: A Crash Course in HTML programming.
Cascading Style Sheets. Slide 2 Lecture Overview Overview of Cascading Style Sheets (CSS) Ways to declare a CSS CSS formatting capabilities New features.
1 HTML Markup language – coded text is converted into formatted text by a web browser. Big chart on pg. 16—39. Tags usually come in pairs like – data Some.
Computing Concepts Advanced HTML: Tables and Forms.
There is a certain way that an HTML file should be set up. The HTML section declares a beginning and an ending. Within the HTML, there should be a HEAD.
Ruby on Rails Creating a Rails Application Carol E Wolf CS396X.
Svetlin Nakov Telerik Corporation
Review HTML  What is HTML?  HTML is a language for describing web pages.  HTML stands for Hyper Text Markup Language  HTML is not a programming language,
CpSc 462/662: Database Management Systems (DBMS) (TEXNH Approach) HTML Basics James Wang.
Creating a Simple Page: HTML Overview
_______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications1.
Dreamweaver -- CSS. Dreamweaver -- MX New icons are added in MX Most of the features commonly used in web design, and are same as FrontPage. New feature.
INTRODUCTORY Tutorial 7 Creating Tables. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Discern the difference between data tables and.
DAT602 Database Application Development Lecture 14 HTML.
Svetlin Nakov Telerik Corporation
HTML II. Factors to consider in designing a website. Organizing your files. HTML Tables. Unordered Lists. Ordered Lists. HTML Forms. Learning Objectives.
 HTML stands for Hyper Text Mark-up Language. The coding language used to create documents for the World Wide Web  HTML is composed of tags. HTML tags.
Learning Web Design: Chapter 4. HTML  Hypertext Markup Language (HTML)  Uses tags to tell the browser the start and end of a certain kind of formatting.
Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and attributes Create.
1 HTML محمد احمدی نیا 2 Of 43 What is HTML?  HTML stands for Hyper Text Markup Language  HTML is not a programming language, it.
Cascading Style SHEETS for formatting and layout control CSS HTML HTML HTML HTML HTML.
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.
Creating Webpage Using HTML
CS134 Web Design & Development Cascading Style Sheets (CSS) Mehmud Abliz.
Forms and Server Side Includes. What are Forms? Forms are used to get user input We’ve all used them before. For example, ever had to sign up for courses.
IReport Demo Spring 2008 OEDSA Conference. Report Properties.
Introduction To HTML.  HTML stands for Hyper Text Markup Language.  HTML was developed by Tim Berners-Lee.  HTML is maintained by World Wide Web Consortium(W3C).
HTML Basics BCIS 3680 Enterprise Programming. Web Client/Server Architecture 2  Your browser (the client) requests a Web page from a remote computer.
Definition CSS “Short for Cascading Style Sheets, a new feature being added to HTML that gives both Web site developers and users more control over how.
4 Chapter Four Introduction to HTML. 4 Chapter Objectives Learn basic HTML commands Discover how to display graphic image objects in Web pages Create.
PHP Form Introduction Getting User Information Text Input.
HTML file format  Lesson Objective: Understanding HTML and how it is used to create web pages.  Learning Outcome:  Create a HTML page by interpreting.
Course ILT Forms and queries Unit objectives Create forms by using AutoForm and the Form Wizard, and add or modify form headers and footers Open and enter.
Advanced Web Development Instructor: Thomas Bombach.
Introducing Python CS 4320, SPRING Lexical Structure Two aspects of Python syntax may be challenging to Java programmers Indenting ◦Indenting is.
Forms Collecting Data CSS Class 5. Forms Create a form Add text box Add labels Add check boxes and radio buttons Build a drop-down list Group drop-down.
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.
Create, Update and Delete Carol Wolf Computer Science.
HTML Hyper Text Markup Language 1BFCET BATHINDA. Definitions Web server: a system on the internet containing one or more web site Web site: a collection.
IS-907 Java EE World Wide Web - Overview. World Wide Web - History Tim Berners-Lee, CERN, 1990 Enable researchers to share information: Remote Access.
Starting BBEdit or Notepad and Opening the HTML File Start BBEdit or Notepad Select Open from the File Menu Open survey1.htm from the Public Folder.
8 Chapter Eight Server-side Scripts. 8 Chapter Objectives Create dynamic Web pages that retrieve and display database data using Active Server Pages Process.
Spiderman ©Marvel Comics Creating Web Pages (part 1)
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
Coding with HTML {. THE BASICS { What is HTML and how can you use it to make websites?
Practice for Chapter 3: Assume that you are a freelance web designer and need to create a website to promote your freelance company.
Section 4.1 Section 4.2 Format HTML tags Identify HTML guidelines
>> Introduction to CSS
ASP.NET Web Controls.
Basic XHTML Tables XHTML tables—a frequently used feature that organizes data into rows and columns. Tables are defined with the table element. Table.
Intro to PHP & Variables
HTML Forms and User Input
CS134 Web Design & Development
In Class Programming BIS1523 – Lecture 11.
Training & Development
Computer communications
Web Design & Development
Presentation transcript:

Views Carol Wolf Computer Science

Extended Ruby  Views files are written in extended Ruby, erb.  They end in.html.erb.  Ruby code is intermixed with html.  It is enclosed by  Some code adds and ‘=‘ sign, as in.  This guards against a sequel injection attack.  Ruby control blocks require the keyword, end.  Lining up control statements with corresponding ends is tricky.

Forms  Forms have been part of html for a long time.  They are used to send parameters to the server. Size Color  Forms have a method, action, text input and a submit button.

Methods  Get – Used for moving from one page to another  Parameters are sent in the URL string  Rails uses get for path changes  Post – Used in forms  Parameters are sent in the packets  Rails requires post when using forms  Head, Put, Delete, Trace and Connect  See  Of these, Rails uses Put and Delete.

Actions  The action tells the server which controller method should be executed.  Example: action=" ">  Example from Pace Portal  Example from schedule {:action => :list_courses} do |form| %>

Text Fields  Text fields are used to collect information. Color  In extended Ruby we would write: Color: 20 %>  The label is used to tell the client what to enter.  The size attribute determines how many characters are to be allowed.  The value attribute is empty in the html and doesn’t even appear in the extended Ruby.

Buttons  The submit button is standard for forms.  In Rails this becomes  The value attribute in the first example determines what will be displayed on the button.  In Rails, all you have to do is put the value in quotes, "Send“.  In Rails you can have other buttons as well; we use button_to and have to detail the value and action.

The Resulting Code Size: Color:

Layouts Rails supplies a layout for every application. Testapp

Layouts  The application layout is added to the application, with the code that comes before the listed first.  The Ruby command, yield, tells the application to add in the code in the ERB file.  The last two lines are then added to the end.  The result is a complete html page with a header and footer.

Cascading Style Sheets  Styles such as B for bold can be added directly into the html code. Any in the code are always done first.  Styles can also be added into the head of the page in a specific style section. Styles in the body of the html have precedence over these.  Finally styles can be incorporated into a style sheet with extension.css. This is strongly recommended by developers.  The format is very simple. The html tag comes first followed by curly braces. The styles are listed inside the braces, separated by semicolons. And each style is separated from its value by a colon.  Style sheets can be added to the public/stylesheets folder. They will all be added in by Rails.

A sample style sheet for tables table{ border: 1; border-style: solid; border-width: thin; cellpadding: 10; } td { border-style: solid; border-width: thin; padding-right: 0.5cm; }