Create a new stylesheet called Hotel Style

Slides:



Advertisements
Similar presentations
HTML and CSS. HTML Hyper Text Markup Language Tells browser how to display text and images.
Advertisements

1 Cascading Style Sheets Continued Different kinds of selectors in a style sheet –Simple- Pseudo-Class –Contextual- Pseudo-Element –Class Image Styles.
Cascading Style Sheets
/k/k 1212 Cascading Style Sheets Part one Marko Boon
CSS. Intro to CSS Cascading Style Sheets – styles and enhances appearance of webpage.css extension.
Adding styles. Three alternatives HIT151 Web 'n' Net Web Page Basics /*stylesheet*/ h1,h2,h3 { font-family: verdana, arial, 'sans serif'; } p,table,li.
Introduction to CSS.
Very quick intro HTML and CSS. Sample html A Web Title.
Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease
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.
Web Development & Design Foundations with XHTML Chapter 7 Key Concepts.
Cascading Style Sheets By: Valerie Kuna. What are Cascading Style Sheets? Cascading Style Sheets (CSS) are a standard for specifying the presentation.
CSS cont. October 5, Unit 4. Padding We can add borders around the elements of our pages To increase the space between the content and the border, use.
Web Development & Design Foundations with XHTML Chapter 7 Key Concepts.
Web Development & Design Foundations with XHTML Chapter 7 Key Concepts.
1 Web Developer & Design Foundations with XHTML Chapter 9 Key Concepts.
End User Computing An Introduction to CSS Sujana Jyothi Research Lab1, Callan Building, Department of Computer Science
CSS BASICS. CSS Rules Components of a CSS Rule  Selector: Part of the rule that targets an element to be styled  Declaration: Two or more parts: a.
Building a Website: Cascading Style Sheets (CSS) Fall 2013.
Cascading Style Sheet CSS CS1520 Ali Alanjawi. 2 TA Information Ali Alanjawi Homepage: Office:
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.
CSS(Cascading Style Sheets )
Web Pages and Style Sheets Bert Wachsmuth. HTML versus XHTML XHTML is a stricter version of HTML: HTML + stricter rules = XHTML. XHTML Rule violations:
Part 3 Introduction to CSS. CSS Text Text Styles h1 {color: green} // rgb(0,255,0), #00ff00 h2{letter-spacing: 0.5cm} // 2px h3 {text-align: right} //
กระบวนวิชา 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.
Unit 20 - Client Side Customisation of Web Pages
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.
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.
ETT 429 Spring 2007 Web Design I.
CITY UNIVERSITY / Vysoká Škola Manažmentu.:MG Information Systems :. © Martina Cesalova, 2005 MS FRONTPAGE 1 1.Open FrontPage – View -> Page 2.Open.
Learning HTML. HTML Attributes HTML elements can have attributes Attributes provide additional information about an element Class – specifies a class.
 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.
1 CSC 121 Computers and Scientific Thinking David Reed Creighton University HTML and Web Pages.
HTML tags Some popular ones. Paragraph: separated by a single line of white space Line break NOTE: no end tag is used for this tag Headlines ( through.
Creating Your Own Webpage COSC Cascading Stylesheets Think of: HTML: content of your webpage HTML has tags CSS: presentation and appearance of your.
Paper 3 Unit 15 – Web Authoring Software Choices Graphics Exporting Graphics Creating CSS RGB Colour CSS – Body, Table and TD Border Collapse Tables -
1 Creating Links Lesson 2. 2 In the center column type : Home | Order Now | Contact Us This is the navigation button which will link to the other pages.
Web Authoring Task 8– Create the following Style Sheet: 1.Create a new CSS called Tiger.CSS Style Sheet Body Horizontal Tile using the Tiger.JPG H1 Browsers.
CSS Cascading Style Sheets *referenced from
Chapter 17: Document Production (Word) Task 6 1. Using a suitable software package, load the file ANGLING.RTF 2. Save this document with a new file name.
Unit 15 – Web Authoring Web Authoring Project.
WebD Introduction to CSS By Manik Rastogi.
CSS.
Chapter 17: Document Production (Word)
Open the Nissan.html page in a suitable application and create the table shown below between Table 3 and 4. Set the appropriate sizes for each cell. A.
CS3220 Web and Internet Programming CSS Basics
Chapter 17: Document Production (Word)
( Cascading style sheet )
Creating Your Own Webpage
CSS Rule Selector Declaration Block Value Attribute Name body {
With Microsoft FrontPage 2000
Web Authoring (Ski Resort Task)
Unit 17 Website Development
Page Layout Header & Footer Font Styles Image wrapping List Styles
Web Authoring Task 1– Create Style Sheet H1 H2 P LI OL UL Table Body
Web Authoring Task 1– Create Style Sheet List – LI { Table Body
Web Authoring Task 8– Create the following Style Sheet:
Style Sheet Create a new CSS called Cameras.CSS TD Web Authoring
Introduction to CSS.
Table CSS Create a new CSS called tablestyle.CSS Green Background
The Internet 10/13/11 The Box Model
Web Authoring Task 1– Create Style Sheet H1 H2 P LI Table Body
Summer 31: Web Authoring A trainee has started to create a single stylesheet to be used with the website. The stylesheet was not finished and contains.
Web Authoring Task 1– Create Style Sheet H1 H2 H3 P LI Table Body
For the World Wide Web Styling Tables with CSS
How to use the CSS box model for spacing, borders, and backgrounds
CS3220 Web and Internet Programming CSS Basics
CS3220 Web and Internet Programming CSS Basics
Introduction to Styling
Summer 31: Web Authoring A trainee has started to create a single stylesheet to be used with the website. The stylesheet was not finished and contains.
Presentation transcript:

Create a new stylesheet called Hotel Style Arial Font, Centre, Bold & 22PX H2 Browsers Default Sans- Serif Font, Italic Left & 16PX H3 Browsers Default Serif Font, Centre & 18PX H4 Helvetica, but if not available then Arial, or if these fonts are not available, then browser’s default sans-serif font, Bold & 16PX P Times New Roman Font, Fully Justified & 12PX LI Arial, 14PX OL Decimal, Italic UL Square Table Padding: Top 5 PX & Bottom 5PX Margin: Right & Left Auto (Centre Aligned) Internal gridline width 1 PX External gridline width 3 PX All Collapsed All Solid Line

RGB # 2. Apply Color Attributes Green Blue Style Sheet Colour Components Style Attribute Red Green Blue Body Yellow H1 Full Red No Green No Blue H2 Black H3 No Red Full Blue H4 P OL NO Dark Blue UL 50% Red Table External Border Internal border Dark Green Background Light Grey Red Green Blue RGB # FF White 00 Full Red Full Green Full Blue C0 ¾ ON (75%) Red 80 ½ On (50%) Red 40 ¼ on (25%) (Darker Shade) OFF (Black)

3. Open the Doha and Istanbul HTML webpages in a suitable web authoring package. 4. Delete the existing style sheet and attach the style sheet created in step 1 to both html pages. 5. Open the Katara Cultural Village JPEG and the Museum of Islamic Art JPEG in a suitable application. Reduce the width of the image to 200 pixels maintaining the aspect ratio. Save the changes. 6. Insert the appropriate animated GIF images into Table 3 replacing the text. 7. Apply the text styles shown on the next slides for table 1, 2, 3 & 4 for both webpages. 8) Insert appropriate images in both webpages replacing the insert image text. Refer to the text to choose the most appropriate image. Include appropriate alternative text for each image.

Table 1 H1 Style H2 Style Paragraph Style OL List Table 3

Paragraph Style for all remaining text Table 4 H1 Style H3 Style UL Style H4 Style Paragraph Style for all remaining text

Table 5 H1 Style H2 Style

Preview links in the browser. 9. Set suitable titles for each web page. 10. Create internal Hyperlinks between the two pages (Repeat steps for both pages). Preview links in the browser.

11. Create external links to open on a new window for both webpages.

Email Link with a subject Line 12. Find and merge the row which contains email us. Create email links to Bookings@gmail.com with a subject line: Summer Hotel Booking 13) Make the text Click here a hyperlink to return to the top of the page. 14) Make the text Click here to return to Istanbul/Doha Hotels a hyperlink to return to the hotel table. 15) Create a test table to carry out suitable tests on your website. You can also test the following: External links, Email Links, Named anchors, images appearing, correct text styles applied. Email Link with a subject Line mailto:Bookings@gmail.com ?subject=Summer Hotel Booking Test How Expected Actual Action Taken Checking internal Hyperlinks Click on each link in the browser All links to go to the correct page. All links work as expected. No action required.