... Basic iframe body {color: brown; font-family: "Times New Roman"} this is a test of using iframe This is some text just so I can deal with positioning.

Slides:



Advertisements
Similar presentations
LIS650 lecture 4 Thomas Krichel today CSS Properties –Box properties-- List properties –Table properties-- Classification properties –(Audio.
Advertisements

Web Page Design Using Tables Here you see three examples of how tables can be used to organize your content. We call this page layout or design. You can.
HTML and CSS. HTML Hyper Text Markup Language Tells browser how to display text and images.
Cascading Style Sheets
Web Development & Design Foundations with XHTML Chapter 7 Key Concepts.
Web Development & Design Foundations with XHTML Chapter 7 Key Concepts.
Advance CSS (Menu and Layout) Miftahul Huda. CSS Navigation MENU It's truly remarkable what can be achieved through CSS, especially with navigation menus.
Diliev.com & pLOVEdiv.com  DIliev.com.
Class four: the box model and positioning. is an HTML tag which allows you to create an element out of inline text. It doesn’t mean anything! try it:
Unit 20 - Client Side Customisation of Web Pages
Stylin’ with CSS. 2 Topics What is CSS? Why CSS? CSS Examples.
Murach’s ASP.NET 3.5/C#, C5© 2008, Mike Murach & Associates, Inc.Slide 1.
Basics of Web Design Chapter 6 More CSS Basics Key Concepts 1.
Beginning Web Site Creation: Dreamweaver CS4. XHTMLCSS  Describes the structure  Content  Collection of styles  Formatting body { background-color:
The Viewport body element w/ bg image body element w/ bg image wrapper.
Streamlining Website Development in Dreamweaver Roger L. Runquist Western Illinois University Roger L. Runquist Western Illinois University.
Cascading Style Sheet (CSS) Instructor: Dr. Fang (Daisy) Tang
HTML Code. What we will cover Basic HTML Body Font Images Hyperlinks Tables Frames.
Cascading Style Sheets – Block Level. Block Level Style So far we have done text-level CSS With block level CSS, we used a generic container tag Similarly.
ITP 104.  While you can do things like this:  Better to use styles instead:
Principles of Web Design 6 th Edition Chapter 10 – Data Tables.
Basic Responsive Design Techniques. Let’s take a look at this basic layout. It has a header and two columns of text, in a box that is centered on the.
CSS in XHTML continued Please use speaker notes for additional information!
Web Development & Design Foundations with XHTML
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
Basics of Web Design 1 Copyright © 2016 Pearson Education, Inc., Hoboken NJ.
Week 8 – Part 3 More on Links, Layout, and Mobile Key Concepts 1.
Cascading Style Sheets Class 1, Lecture 1 Rachel A Ober
IDs versus Classes Naming Your Tags for Maximum Functionality.
CSS My favourite ICT lesson By Federico Boschi Cascading Style Sheets.
CO1552 – Web Application Development Cascading Style Sheets.
COMP213 – Web Interface Design
Cascading Style Sheets (CSS) Within the Enterprise Architecture Framework (EAF) Wes Ziegeler August 3, 2006.
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.
More CSS.
Chcslonline.org Text –wrapping around Images. chcslonline.org To wrap text around an image, lets set up a style in our style sheet. open a new notepad.
Moving Boxes The CSS ‘box’ Model and moving elements around the page 1.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
CSW131 Steven Battilana 1 CSW 131 – Chapter 6 Laying Out Pages Prepared by Prof. B. for use with Teach Yourself Visually Web Design by Ron Huddleston,
Web Foundations THURSDAY, OCTOBER 3, 2013 LECTURE 6: CSS CONTINUED.
CS-3432 Electronic Commerce Lecture – 7 Sikandar Shujah Toor
CHAPTER 5 Working with Data Tables and Inline Frames.
Web Design I Spring 2009 Kevin Cole Gallaudet University
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.
Internet Technology Dr Jing LU Updated Dr Violet Snell / Dr Kalin Penev 1 Internet Technology (week 6)  Recap: Validating HTML  Page Layout.
CSS Layout Cascading Style Sheets. Lesson Overview  In this lesson, you will learn:  CSS Box Model  CSS properties for border  CSS properties for.
Web Design (12) CSS Introduction. Cascading Style Sheets - Defined CSS is the W3C standard for defining the presentation of documents written in HTML.
Introduction to CSS Layout
Web Development & Design Foundations with XHTML Chapter 6 Key Concepts.
5 th ed: Chapter 4 4 th ed: Chapter 5 SY306 Web and Databases for Cyber Operations SlideSet #5: Advanced CSS.
Coding with HTML {. THE BASICS { What is HTML and how can you use it to make websites?
Review First – on your own... Go to Day 5 Grab the contents of position review file Place in DW Add styles to recreate – get something close to
Cascading Style Sheet (CSS) SAMPLE IT133 Pengembangan Web.
Week 5.  Normal document flow  Affecting document flow with float and position properties using CSS  Using these properties to create layouts.
End User Computing Applied CSS: Building our course homepage Sujana Jyothi Department of Computer Science
Group 9: Through examples, explain how to build a css navigation bar. Presented by: Daniel Ku, Matt Iannacci & Iphia Henry.
Tutorial #5 Working with the Box Model. Tutorial #4 Review - CSS Create a homework page Final Project Discussion Exam on Blackboard Styling Lists (List-style-type,
CS 120: Introduction to Web Programming Lecture 10: Extra Features and Website Design Part 1 Tarik Booker CS 120 California State University, Los Angeles.
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,
Unit 3 - Review. Topics 1. Tag, Attribute, Value 2. CSS Rule Syntax + link 3. Categories of Selectors 4. Inline vs Block Tags 5. CSS Layout 6. CSS Box.
>> CSS Layouts. Recall Properties of Box – Border (style, width, color) – Padding – Margin – Display – Background – Dimension Welcome Padding Area Border.
Creating Web Documents CSS examples (do more later) Lab/Homework: Read chapters 15 & 16. Work on Project 3, do postings.
More CSS.
like you to do and submit as well.
More CSS.
Floating and Positioning
Using tables in HTML Goes in order with Examples at my site.
Presentation transcript:

... Basic iframe body {color: brown; font-family: "Times New Roman"} this is a test of using iframe This is some text just so I can deal with positioning things so as usual I wil go on and on and on so that I will stand some chance of getting it to wrap on most browsers with most standard settings. The wider the screens, the more I have to go on and on and on... Some older versions of browsers do not support iframes and thus they will be invisible - a problem if you want to work with previous browser generations. Click here to change message in the second frame Here I have set up two iframes next to each other and said that the source for them is a separate page I wrote called iframecontent.html. Next, I have said if you click on the line, I will load a different page into the iframe that ws named second. The results are shown on the next page.

... Basic iframe body {color: brown; font-family: "Times New Roman"} this is a test of using iframe This is some text just so I can deal with positioning things so as usual I wil go on and on and on so that I will stand some chance of getting it to wrap on most browsers with most standard settings. The wider the screens, the more I have to go on and on and on... Some older versions of browsers do not support iframes and thus they will be invisible - a problem if you want to work with previous browser generations. Click here to change message in the second frame I have now clicked and the new page has been loaded into the second frame. The page is very basic - it just has this line of code. Basic iframe content This is the content of the other iframe.

This is a very basic setup with two columns. It is controlled by the CSS Two columns using CSS This is the header for the two columns This is the left column where I could put lists of things to click on etc. Note that I have read that sometimes it works well to set the margin to -1 if you encounter problems with older browsers. This is some more text just to fill. This is the main body of the page. This is some more text. The footer Note that the leftcol will be laid out according to the specs in the CSS which say:.leftcol { width: 300px; float: left; margin-left: 0px; padding: 5px; } The colum is 300px and will float to the left with no margin to the left.

This is a very basic setup with two columns. It is controlled by the CSS Two columns using CSS This is the header for the two columns This is the left column where I could put lists of things to click on etc. Note that I have read that sometimes it works well to set the margin to -1 if you encounter problems with older browsers. This is some more text just to fill. This is the main body of the page. This is some more text. The footer Note that the maincol will be laid out according to the specs in the CSS which say:.maincol { margin-left: 350px; border-left: 4px solid brown; padding: 5px; } The starts 350 px in and has a left border that is solid brown. This gives the start for the second column and lays out the line that makes it clear that there are two columns.

This is a very basic setup with two columns. It is controlled by the CSS Two columns using CSS This is the header for the two columns This is the left column where I could put lists of things to click on etc. Note that I have read that sometimes it works well to set the margin to -1 if you encounter problems with older browsers. This is some more text just to fill. This is the main body of the page. This is some more text. The footer This is a spacer and a good explanation for its use is at: /floatutorial/.spacer { clear: both; } Essentially this clears the floating that we have on the leftcol so that the columns are clear.

This is a very basic setup with two columns. It is controlled by the CSS Two columns using CSS This is the header for the two columns This is the left column where I could put lists of things to click on etc. Note that I have read that sometimes it works well to set the margin to -1 if you encounter problems with older browsers. This is some more text just to fill. This is the main body of the page. This is some more text. The footer.header { text-align: center; font-size: 24px; margin-top: 4px; border-bottom: 4px solid brown; margin-bottom: 0px; } This sets up the header as aligned in the center and give the border and margin settings.

This is a very basic setup with two columns. It is controlled by the CSS Two columns using CSS This is the header for the two columns This is the left column where I could put lists of things to click on etc. Note that I have read that sometimes it works well to set the margin to -1 if you encounter problems with older browsers. This is some more text just to fill. This is the main body of the page. This is some more text. The footer The footer also is set up using this CSS:.footer { border-top: 4px solid brown; font-size: 24px; text-align: right; padding: 2px 10px 0px 0px; clear: both }

Meta tags were used to provide descriptions and key words to browsers. Because they were overused and because people put in key words irresponsibly, most search engines do not give them much or any weight today.

Images of BCC This is an example of meta used to move on to the next page which is bccpage2.html. This technique is not widely used anymore. Images of BCC This is bccpage2.html and sends the viewer to bccpage3.html