Key question  What are the three standardized core languages used to implement web pages? Write the full name not the abbreviation and describe the “layer”

Slides:



Advertisements
Similar presentations
Programming Club IIT Kanpur. Work environment Before you begin coding,always set up your work environment to your needs IDE Notepad++ Sublime Text 2.
Advertisements

CSS The basics { }. CSS Cascading Style Sheets - language used to – describe html appearance & formatting Style Sheet - file that describes – how html.
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.
Presenter: James Huang Date: Sept. 26,  Introduction  Basics  Lists  Links  Forms  CSS 2.
Very quick intro HTML and CSS. Sample html A Web Title.
FORMATTING IN CONTEXT. FOLLOW UPS ANCHOR POINTS MUST BE UNIQUE  If you have more than one, how does it know where to go?  They can be repeated across.
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.
Advance CSS (Menu and Layout) Miftahul Huda. CSS Navigation MENU It's truly remarkable what can be achieved through CSS, especially with navigation menus.
Recognizing the Benefits of Using CSS 1. The Evolution of CSS CSS was developed to standardize display information CSS was slow to be supported by browsers.
Web Pages and Style Sheets Bert Wachsmuth. HTML versus XHTML XHTML is a stricter version of HTML: HTML + stricter rules = XHTML. XHTML Rule violations:
Need to define two things: › The destination › Something to click on to get there  Tag is click here  Can be text, special character or image (next.
Cascade Style Sheet Demo. Cascading Style Sheets Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to.
Unit 20 - Client Side Customisation of Web Pages
Murach’s ASP.NET 3.5/C#, C5© 2008, Mike Murach & Associates, Inc.Slide 1.
Chapter 6 Web Typography
Beginning Web Site Creation: Dreamweaver CS4. XHTMLCSS  Describes the structure  Content  Collection of styles  Formatting body { background-color:
INFORMATION ORGANIZATION LAB SEPTEMBER 15, 2009 LAST WEEK ON IO LAB Write your first Greasemonkey script. Complete the CSS self-test. You can find links.
4.01 Cascading Style Sheets
Principles of Web Design 6 th Edition Chapter 4 – Cascading Style Sheets.
Chapter 4 HTML. Objectives Explain how HTML/XHTML are used and describe the difference between them Interpret HTML code Explain how HTML Forms are used.
CSS Style Rules Guang Tong, Zhan L;lo’p[ Css Style Rule Guang Tong Zhan Three ways to insert CSS 1 External style sheet 2 Internal style sheet 3 Inline.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 3 Key Concepts 1 Copyright © Terry Felke-Morris.
The Characteristics of CSS
Chapter 6 Web Typography. 2 Principles of Web Design Chapter 5 Objectives Understand principles for type design on a Web site Use the element Understand.
Cascading Style Sheets. Defines the presentation of one or more web pages Similar to a template Can control the appearance of an entire web site giving.
Learning HTML. HTML Attributes HTML elements can have attributes Attributes provide additional information about an element Class – specifies a class.
Today’s objectives  Review  CSS | Rules | Declarations  HTML Structure document  Class asignment.
 This presentation introduces the following: › 3 types of CSS › CSS syntax › CSS comments › CSS and color › The box model.
CSS My favourite ICT lesson By Federico Boschi Cascading Style Sheets.
Tutorial #4 Formatting Text and Links. Tutorial #3 Review - CSS CSS format Selector { property1: value1; /* Comments */ } Embedded, In-Line, and External.
CSS. HTML: Looking Back HTML dictates order, structure, and function Does very little to specify layout or visual rendering.
Lesson 03 // Cascading Style Sheets. CSS Stands for Cascading Style Sheets. We’ll be using a combination of Html and CSS to create websites. CSS is a.
CSS Tutorial 1 Introduction Syntax How to use style specifications. Styles.
ECA225 Applied Interactive Programming Cascading Style Sheets, pt 1 ECA 225 Applied Online Programming.
Advanced Web Development Instructor: Thomas Bombach.
JQuery Introduction © Copyright 2014, Fred McClurg All Rights Reserved.
Colors & Fonts Building a Website Lesson 7. Font Font The tag specifies the font face, font size, and color of text. The tag can have any or all of these.
HTML.
Cascading Style Sheets
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.
Cascading Style Sheets CSS.  Standard defined by the W3C  CSS1 (released 1996) 50 properties  CSS2 (released 1998) 150 properties (positioning)  CSS3.
Cascading Style Sheets (CSS). A style sheet is a document which describes the presentation semantics of a document written in a mark-up language such.
CSS Cascading Style Sheets A very brief introduction CSS, Cascading Style Sheets1.
5 th ed: Chapter 4 4 th ed: Chapter 5 SY306 Web and Databases for Cyber Operations Slide Set #4: CSS.
CHAPTER 13 COMMUNICATING WITH AJAX. LEARNING OBJECTIVES AJAX, which stands for Asynchronous JavaScript and XMLprovides a way for a browser to send and.
Web Technologies Beginning Cascading Style Sheets (CSS) 1Copyright © Texas Education Agency, All rights reserved.
Understanding ID and Class in CSS Web Design – Sec 4-9 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.
Creating Layouts with CSS. Span tag Here is some underlined text. Here is some blinking text. Here's some bold text.
Stylizing a Navigational Menu Web Design Section 6-3 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.
Selective Formatting. Auto Grader Multiple selectors  May use the same formatting for two elements h1, h2 { font-family: cursive; }  Maintains consistency.
ECA 228 Internet/Intranet Design I Cascading Style Sheets.
JavaScript and Ajax (JavaScript Dynamic HTML (DHTML)) Week 7 Web site:
LT: I can use CSS to decorate a web page. Do Now: Get your storyboard, and log in to winhome. Write our a list of colors you want in your website. (Minimum.
HTML & CSS Contents: the different ways we can use to apply CSS to The HTML documents CSS Colors and Background CSS Fonts CSS Text CSS box model: padding,
CSS DHS Web Design. Location Between the & Start with – End with –
CSCI 3100 Tutorial 5 JavaScript & Ajax Jichuan Zeng Department of Computer Science and Engineering The Chinese University of Hong.
INTRODUCTION ABOUT DIV Most websites have put their content in multiple columns. Multiple columns are created by using or elements. The div element is.
CSS Cascading Style Sheets. Session Checklist ► Learn why style sheets are needed and their advantages and disadvantages ► Learn the format of a style.
NAVIGATION USING HTML TO SET UP THE BASIC STRUCTURE OF A NAV BAR.
WebD Introduction to CSS By Manik Rastogi.
Introduction to Web programming
Cascading Style Sheets (Layout)
Cascading Style Sheets
COMP 101 Review.
Of HTML, CSS and JavaScript
What are Cascading Stylesheets (CSS)?
Secure Web Programming
What is HTML?.
Computer communications
Presentation transcript:

Key question  What are the three standardized core languages used to implement web pages? Write the full name not the abbreviation and describe the “layer” that the language implements.

Key question  What are the three “tiers” of web application development. Describe each “tier” and list some of the languages used for each of the “tiers.”

Key Concept Questions: True or False  jQuery is a JavaScript library  CSS is an extension of HTML. Explain.  HTML can be used to change the appearance of a website. Explain.  HTML should be used to control the appearance of a website. Explain.  CSS alone can be used to make a web page interactive, i.e., user interaction can change the appearance of a website.

Show the one example of how CSS can make a page interactive

Show an example of how CSS can make a page interactive  a {color: black}  a:hover {color: red; font-weight: bold}

HTML questions  Which HTML tag defines an item in a list?  Which HTML tag defines a list that uses bullets instead of numbers?  Which HTML tag defines a numbered list?  Which HTML tag contains the title and character set of a web page?

CSS questions  Which CSS attribute makes text bold?  How do you use CSS to make a centered?  What is the difference between the CSS color attribute and background-color attribute?  Write the CSS code to make list items bold but only if the list items are inside of a tag:  Write the CSS code to center the text of paragraphs but only if the paragraph is in a tag with the class name “center”:

Use CSS to make a centered?  div {margin: 10px auto}  div {margin: 10px auto 5px}  div {margin: 10px auto 5px auto}

Context specificity  Write the CSS code to center the text of paragraphs but only if the paragraph is in a tag with the class name “center”: div.center p { text-align: center; } section div p { text-align: left; }

 nav ul li { font-weight: bold; color: red; border: 1px solid blue;  }

Which of these is jQuery  A. document.getElementById(“intro”);  B. var x = 3;  C. $(“#intro”).html(“hello”);  D. #intro { color: red };

What is wrong with this code  HTML:  OK  Cancel  jQuery:  $(“button”).click( submit() );

Identify: PHP, JavaScript, jQuery, SQL, HTML, or CSS  echo “ Title ”;  ” type=“text”>  $result = run_query(“SELECT * FROM Users”);

Identify: PHP, JavaScript, jQuery, SQL, HTML, or CSS  This is a paragraph with big margins  .important { font-weight: bold; }  $(“.important”).css(“color”, “red”);

Identify: PHP, JavaScript, jQuery, SQL, HTML, or CSS  $("#sportlink").attr("href","  $("#red").attr(”style",”color: red");

Why is CSS better than HTML for styling a web page?

Why is JavaScript better than CSS for implementing interaction?

AJAX var xmlhttp =new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { var content = xmlhttp.responseText; document.getElementById("myDiv").innerHTML = content; } xmlhttp.open("POST","example2.php",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("first=Eric&last=Breimer");