More HTML Chapter 4. 2 Nesting Tags How do you write the following in HTML? The wrong way: This is really, REALLY fun ! Tags must be correctly nested.

Slides:



Advertisements
Similar presentations
Cascading Style Sheets
Advertisements

CSS The basics { }. CSS Cascading Style Sheets - language used to – describe html appearance & formatting Style Sheet - file that describes – how html.
Cascading Style Sheets (CSS) “Styles” for short. Pg. 418.
Chapter 2 HTML Basics Key Concepts
Introduction to CSS.
Web Pages and Style Sheets Bert Wachsmuth. HTML versus XHTML XHTML is a stricter version of HTML: HTML + stricter rules = XHTML. XHTML Rule violations:
Stylin’ with CSS. 2 Topics What is CSS? Why CSS? CSS Examples.
XP Introducing Cascading Style Sheets With Cascading Style Sheets (CSS), you can create one or more documents that control the appearance of some or all.
Tutorial 3 Introducing Cascading Style Sheets. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Learn about Cascading Style Sheets Write.
Cascading Style Sheets. Slide 2 Lecture Overview Overview of Cascading Style Sheets (CSS) Ways to declare a CSS CSS formatting capabilities New features.
1 Getting Started with CSS. 2 CSS Cascading Style Sheets XHTML provides structure for our documents (web pages) CSS provides Style or Presentation for.
CSS Basics LIS Webteam April 8, Why CSS? What’s wrong with HTML? Structure vs Style Early web design used hacks to style webpages with HTML – like.
Workshop: CSS-Part I Cascading Style Sheets add style to your HTML web pages.
Using Cascading Style Sheets CSS Structure. Goals Understand how contextual, class and ID selectors work Understand how contextual, class and ID selectors.
The.htm/.html Mystery When saving the template files in Internet Explorer, they will be named.htm by default. To be consistent with how the code was written.
4.01 Cascading Style Sheets
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 3 Key Concepts 1 Copyright © Terry Felke-Morris.
HTML BASIC
3.1 Cascading Style Sheets. Motto Fashions fade, style is eternal. —Yves Saint Laurent.
Stylin’ with CSS. 2 Topics What is CSS? Why CSS? CSS Examples.
CSS (Cascading Style Sheets): How the web is styled Create Rules that specify how the content of an HTML Element should appear. CSS controls how your web.
Computer Sciences Department
Selectors thru Borders. CSS – Cascading Style Sheets – is a way to style HTML HTML is the content base of a web page CSS provides the presentation qualities.
HIGHER COMPUTING CSS. WHAT IS CSS? CSS: Cascaded Style Sheets used to separate a web site’s content(information) from its style(how it looks).
Computer Science 101 HTML. World Wide Web Invented by Tim Berners-Lee at CERN, the European Laboratory for Particle Physics in Geneva, Switzerland (roughly.
CompSci Today’s topics Networks & the Internet Basic HTML ä The basis for web pages ä “Almost” programming Upcoming ä Connections ä Algorithms.
TECH2018 Multimedia and the Internet More about CSS and Page Layouts.
XHTML and CSS Introduction to XHTML and CSS Bharti Patel 1 phones off (please)
Chapter 4 Cascading Style Sheets Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies.
Review: Three parts to a webpage: - Content - Structure  XHTML - Presentation  CSS In this chapter we will focus on introducing and examining the mechanics.
Cascading Style Sheets (CSS) 1.  What is CSS?  Why CSS?  How to write a CSS? 2.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 3 Key Concepts 1 Copyright © Terry Felke-Morris.
Tutorial #3 Cascading Style Sheets. Review: Last Class Image sizing Pathnames Project Default Path Relative Path Absolute Path Blackboard Homework Submission.
1 Cascading Style Sheets (CSS) Part 2. 2 The Sources of Style Sheets.
ITEC 745 Instructional Web Authoring I Instructor: Ray Cole Week 8.
Chapter 2 HTML Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
I NTRO TO CSS IAT100 Spring I NTRO TO CSS Covered in this lesson: Overview What is CSS? Why to use CSS? CSS for Skinning your Website Structure.
CSS: Cascading Style Sheets. 2 What are Style Sheets A style sheet is a mechanism that allows to specify how HTML (/XHTML/XML) pages should look The style.
Copyright (c) 2004 Prentice-Hall. All rights reserved. 1 Committed to Shaping the Next Generation of IT Experts. Formatting Text and Lists Essentials for.
ITP 104.  Basic HTML using and form  Using Filezilla  public_html ▪ 755 permission  Have a directory name itp104 ▪ 755 permission  classpage.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.
Tutorial #3 Cascading Style Sheets. Tutorial #2 Review - Anchors Links to Site DMACC Internal Links Go to Top Mail To me Local.
Introduction to Programming the WWW I CMSC Winter 2003 Lecture 7.
Stylin’ with CSS Monday October 8 th and Tuesday October 9 th.
CSS Cascading Style Sheets. CSS Advantages Greater typography and page layout control Style is separate from structure Styles can be stored in a separate.
XHTML and CSS. The Browser The browser is not print!
Cascading Style Sheets Robin Burke ECT 270. Outline Midterm The Layout Debate CSS properties Fonts Alignment Color CSS selection selectors pseudo-classes.
Creating Your Own Webpage COSC Cascading Stylesheets Think of: HTML: content of your webpage HTML has tags CSS: presentation and appearance of your.
Cascading Style Sheets Eugenia Fernandez IUPUI. CSS Purpose CSS allow you to specify the style in which your XML elements are displayed. CSS were originally.
CSS Hadas Kahsay. Overview  What is CSS  Basic syntax of CSS Rules  How to link CSS style to html documents  Browsers and CSS  Advantages of CSS.
Web Design (14) CSS Formatting Text. Formatting Text In Brackets, go to your ‘externalcss’ website and find the ‘formattingtext’ page. Use the ‘main’
CSS Cascading Style Sheets *referenced from
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
NASRULLAHIBA.  It is time to take your web designing skills to the next level with Cascading Style Sheets (CSS). They are a way to control the look and.
Blended HTML and CSS Fundamentals 3 rd EDITION Tutorial 3 Introducing Cascading Style Sheets.
Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
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.
CONFIGURING COLOR AND TEXT WITH CSS Chapter 3. Cascading Style Sheets (CSS) Used to configure text, color, and page layout. Launched in 1996 Developed.
HTML WITH CSS.
CSS for Styling By Jinzhu Gao.
HTML Basics.
HTML WITH CSS.
Creating Your Own Webpage
Cascading Style Sheets
Introduction to Web programming
Lesson 3: Cascading Style Sheets (CSS) and Graphical Elements
Cascading Style Sheets
CGS 3066: Web Programming and Design Fall 2019
Presentation transcript:

More HTML Chapter 4

2 Nesting Tags How do you write the following in HTML? The wrong way: This is really, REALLY fun ! Tags must be correctly nested.  A closing tag must match the most recently opened tag. The right way:

3 Spacing And Indentation Which tag is not closed? Can you find it? Not it! Is it here? Or maybe it's this one? More words here This is very hard to read

4 How About Now? Can you find it? Not it! Is it here? Or maybe it's this one? More words here This is very hard to read

5 Spacing And Indentation Guidelines If the tag's content fits on one line, open and close the tag on the same line. Otherwise, the tag's content should be indented more than the starting and closing tags. If the starting and closing tags are on separate lines, they should line up vertically, like above. Is it here Is it here? Or maybe this tag is not closed?

6 Spacing And Indentation Guidelines Use newlines to structure the HTML. The wrong way: The right way: Item 1 Item 2 Item 3 Item 1 Item 2 Item 3

7 Extensible HTML: XHTML Newer version of HTML, standardized in 2000 XHTML tags must always be …  … in lowercase  … closed  … nested properly XHTML 1.0 Strict is the standard we will be using.  Reference:

8 Why Use Standards? Ensure interoperability across different browsers Can easily verify if standards-compliant  XHTML Validation Service: Alas, not all web browsers (particularly Internet Explorer) adhere to the standards 

9 Basic XHTML Template page title goes here page content goes here

10 HTML Element

11 Block vs. Inline Elements Block elements create "larger" structures than inline elements. In general,  block elements may contain text, inline elements, and other block elements.  inline elements may contain only text and other inline elements. Block elements begin on new lines, inline elements do not.

12 Block or Inline? Block  h1, h2,..., h6  p  ul, ol  hr Inline  br  em  strong  a  img

13 Document Flow: Block Elements

14 Document Flow: Inline Elements

15 Document Flow Example

16 Why Important? Elements allowed in body element Only block elements are directly allowed inside the body element. Image snapshot from XHTML 1.0 Strict Reference

17 What About Links? Allowable content for body : Illegal: How can a web page have links?  One solution is to put the link in a block element. Yahoo! No a ! Yahoo!

18 Images In XHTML Requires an alt attribute describing the image Image missing: Image present:

19 XHTML Validation Make sure your files validate!  XHTML Validation Service: When fixing errors, fix the first error and then try validating again.  For example, a single missing closing tag might be confused for several errors. Validation does not check for proper indentation.

20 Web 2.0

21 HTML/XHTML Resources W3Schools HTML Tutorial  W3Schools XHTML Tutorial  Complete list of HTML tags  XHTML 1.0 Strict Reference 

22 Cascading Style Sheets (CSS) Describe the appearance, layout, and presentation of information on a web page Describe how information is to be displayed, not what is being displayed

23 Basic CSS Rule A CSS file contains one or more rules. Rule syntax: selector: HTML element you wish to style property: attribute you wish to change selector { property: value;... property: value; }

24 CSS: HTML: Example Can you see me now? p { font-family: sans-serif; background-color: yellow; }

25 Color Properties color : color of the element's text background-color : color that will appear behind the element

26 Colors Colors are defined by three numbers (from 0 to 255) representing the amount of red, green, and blue (RGB) Can specify colors by:  Pre-defined name aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow  RGB triplet rgb( R, G, B ) where R, G, and B are each numbers from 0 to 255  RGB triplet in hexadecimal format* # RRGGBB where RR, GG, BB are the red, green, and blue values in hexadecimal ColorSchemer: *You do not need to understand hexadecimal.

27 Colors Example Ways to specify teal h1 { color: teal; } h1 { color: rgb(0,128,128); } h1 { color: #008080; }

28 More Properties: Font font-family : which font will be used font-size : how large the letters will be drawn font-style : used to enable/disable italic style font-weight : used to enable/disable bold style For examples on how to set these and other properties, see:  

29 Attaching a CSS File: Copy the rel and type attributes and their corresponding values verbatim Use the href attribute to specify the location of a stylesheet file  Path location may be absolute or relative...

30 CSS Resources CSS property references:   CSS tutorial:  CSE 190 M (Web Programming) lecture notes:  ntQtr/lectures/slides/lecture03-basic_css.html ntQtr/lectures/slides/lecture03-basic_css.html