Computer Science 101 Color, Fonts, Links, Design.

Slides:



Advertisements
Similar presentations
Session 2 Introduction to HyperText Markup Language 4 (HTML 4) Matakuliah: M0114/Web Based Programming Tahun: 2005 Versi: 5.
Advertisements

Internet Services and Web Authoring (CSET 226) Lecture # 5 HyperText Markup Language (HTML) 1.
/k/k 1212 Cascading Style Sheets Part one Marko Boon
INTRODUCTION TO HYPERTEXT MARKUP LANGUAGE 1. Outline  Introduction  Markup Languages  Editing HTML  Common Tags  Headers  Text Styling  Linking.
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 Pages and Style Sheets Bert Wachsmuth. HTML versus XHTML XHTML is a stricter version of HTML: HTML + stricter rules = XHTML. XHTML Rule violations:
Scientific Communication CITS7200 Lecture 11 Designing and Writing Web Pages.
Introduction to Cascading Style Sheets (CSS) Module 2: HTML Basics LESSON 4.
Tutorial 3 Designing a Web Page.
Basic HTML UCR Webmasters Support Group Derk Adams.
Creating a Web Page HyperText Markup Language. HTML Documents  Created using any text editor  Notepad  Vi, Pico, or Emacs  If using word-processor,
Glencoe Digital Communication Tools Create a Web Page with HTML Chapter Contents Lesson 4.1Lesson 4.1 Get Started with HTML (85) Lesson 4.2Lesson 4.2 Format.
Using color and fonts in HTML and XHTML Please use speaker notes for additional information!
Contains 16,777,216 Colors. My Car is red My Car is red How do I add colors to my web page? Notepad Browser Works with the “Standard” colors: Red, Green,
Colour & Image in HTML Wah Yan College (Hong Kong) Mr. Li C.P.
1 Introduction to HTML. 2  W W W – World Wide Web.  HTML – HyperText Markup Language – The Language  of Web Pages on the World Wide Web. HTML is a.
Explanation of Web 6, Web 7 and Web 9 at my site Please be sure to bring up the speaker notes for the explanation Intro - Web 6, Web 7 and Web 9.
Computer Science 101 HTML. World Wide Web Invented by Tim Berners-Lee at CERN, the European Laboratory for Particle Physics in Geneva, Switzerland (roughly.
Link and Table in HTML. Statistics HTML review The two faces of a HTML file In a notepad program. In a internet browser program. The function of HTML.
Chapter 2: The Client Side: HTML CIS 275—Web Application Development for Business I.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 3 Key Concepts 1 Copyright © Terry Felke-Morris.
Links in HTML. Hyperlinks or links Millions of linked web pages make up the World Wide Web Used to connect a web page to another web page on the same.
Colors, Images, & Image Maps. Working with Color Colors are defined in terms of RGB Triplet –Red, Green, Blue –0 to 255 in intensity –(00, 00, 00) is.
IT Introduction to Website Development Welcome!
Copyright © 2003 Pearson Education, Inc. Slide 4-1 Created by, Stephanie Ludi, Rochester Institute of Technology—NY Basic Web Page Construction Graphics.
1 CSC 121 Computers and Scientific Thinking David Reed Creighton University HTML and Web Pages.
More Basic HTML. Add spacing (single & double space) Save Refresh Add horizontal rule Add comments Add styles Add headings Add features Add alignments.
Kevin Murphy Web Color Basics Masters Project CS 490.
Unit 1 — HTML BASICS Lesson 2 — HTML Organization Techniques.
Copyright (c) 2004 Prentice-Hall. All rights reserved. 1 Committed to Shaping the Next Generation of IT Experts. Formatting Text and Lists Essentials for.
Chapter 6 An Introduction to HTML Pages Tag Nesting You can put two tags together to combine the effects Bold and underlined But make sure.
15.2 More Basic HTML. More Basic HTML Add spacing (single & double space) Save Refresh Add horizontal rule Add comments Add styles Add headings Add features.
Review session for Web development. Time line of the internet history When was the ARPANET first demostrated? When did the NFSNet replace it? When did.
Most of the attributes of the body element specify colors for the Web page. Note: The background attribute won’t be useful till we learn about graphics.
1 Web Developer Foundations: Using XHTML Chapter 4 Key Concepts.
Web Colors. Web Colors: Up until now, we have been using only pre- defined color names, such as "orange" and "lightblue". As web designers, we need the.
Web Design I Spring 2009 Kevin Cole Gallaudet University
Applying Color in CSS Web Design – Sec 4-5 Part or all of this lesson was adapted from the University of Washington’s “ Web Design & Development I ” Course.
HTML Basic IST2101. Keep In Mind Programming can be time consuming. Plan ahead!
ALBERT WAVERING BOBBY SENG. Week 2: HTML + CSS  Quiz  Announcements/questions/etc  Some functional HTML elements.
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.
 To specify blue as the background color for a page, put bgcolor=“blue” inside the tag. Of course, you can use many colors other than blue. You can choose.
Web Site Design & Management Class Three February 12, 2003 Pam Scanlon.
XHTML Formatting font with a style declaration. Formatting Font HTML uses the font tag to change size and family of font But… the font tag is being deprecated.
12/20/20151 Color Fall, 2010 Modified by Linda Kenney 10/26/10.
HTML (Hyper Text Markup Language) Lecture II. Review Writing HTML files for web pages – efficient compact – fundamental. Text files with htm extension.
Formatting Tags.  What is an Attribute? ◦ Describes in detail what the tag is meant to display ◦ Example: BGCOLOR, ALIGN, HREF.
©SoftMoore ConsultingSlide 1 Introduction to HTML: Basic Document Structure.
Links in HTML What you need to know….. Hyperlinks or links Millions of linked web pages make up the World Wide Web Used to connect a web page to another.
HTML Links HTML uses a hyperlink to another document on the Web.
HTML CS 105. Page Structure HTML elements control the details of how a page gets displayed. Every HTML document has the following basic structure: … …
Basic HTML Programming Technology Education Ellsworth Community Middle School Communication Systems.
CompSci Today’s topics Networks & the Internet Basic HTML ä The basis for web pages ä “Almost” programming Upcoming ä Connections ä Algorithms.
1 2/16/05CS120 The Information Era Chapter 4 Basic Web Page Construction TOPICS: Intro to HTML and Basic Web Page Design.
Hyperlink ● Anchor tag and its attributes ● Four Types of URL ─ ─ Absolute addressing ─ Relative addressing ─ Intrapage ● Attributes -- link, vlink,
Writing Web Pages in HTML HTML.1 The Web  Lots of computers connected together in a collection of networks  HyperText Markup Language (HTML) is a common.
CompSci Today’s topics Basic HTML  The basis for web pages  “Almost” programming Upcoming  Programming  Java Reading Great Ideas Chapters 1,
1 Introduction to HTML. 2 Definitions  W W W – World Wide Web.  HTML – HyperText Markup Language – The Language of Web Pages on the World Wide Web.
Basic Web Publishing M. Scott Gartner 7/15/98.
Review session for Web development. Today’s class Review the web designing. Filling out instructor evaluation form.
Introduction to HTML.
Hyperlink Anchor tag and its attributes Four Types of URL
Hyperlink Anchor tag and its attributes Four Types of Hyperlink
Hyperlink Anchor tag and its attributes Four Types of URL
Web Design 3080 : Week 3 Introduction to Dreamweaver Lecture
Web Colors.
Lesson 2 — HTML Organization Techniques
IDT Links in HTML What you need to know….
Presentation transcript:

Computer Science 101 Color, Fonts, Links, Design

Body Attributes Govern the entire body of the page BGCOLOR - the background color TEXT - the text color LINK - the color of all links VLINK - the color of a link after it’s been selected

Examples (uses defaults) (hexadecimal number)

Hexadecimal Number System Digits 0..9 and A..F base 16 A 16 = 10 10, etc. Can say more with less - AA is 170 (10 * 16) + (10 * 1)

Representing Colors Almost 17 million colors on most computers Use a six-digit hexadecimal number # is black, #FFFFFF is white

RGB Color System Mixes three color components (red, green, blue) Each component is given two hex digits #2C45F2 = 2C 45 F2 red green blue

Saturation Values 00 is minimum saturation FF is maximum saturation In general, lower saturation produces darker shades, whereas higher saturation produces brighter shades

Web-Safe Colors Only 216 colors are guaranteed on all browsers 6 * 6 * 6 = 216, so only 6 different values per component 00, 33, 66, 99, CC, and FF

Examples # medium gray # medium purple #FF0000 brightest red

RGB on Most Monitors 256 * 256 * 256 = 16,777,216 colors If the browser does not support all these, then the nearest color among the Web-safe ones is used

The FONT Tag some text It’s deprecated, meaning it’s probably supported by most browsers but may not be in future releases

Font Attributes SIZE – 3 (10 or 12 pt) is default COLOR – as usual FACE – Arial, Courier, Times, etc. Relative size - +2, -2, etc.

Example

Linking to Other Pages The Web is a hyperspace One navigates to various items by following links The navigation path can be linear or non- linear

Basic Principles of Web Site Design Distribute topics into a set of pages Connect the pages with links Each topic should be self-contained and contain links to related topics, allowing users to form a cognitive map easily

The Top-Level Page Serves as a platform for browsing the entire site Many ways to lay it out, but the most simple is to provide –an introductory paragraph –a set of links to the main topics

Example: A Simple Site Top-level page (index.html) has links to my hobbies and my career information Hobbies are discussed in hobbies.html Career stuff is in career.html

Organization of Files index.htmlhobbies.htmlcareer.html public_html = a directory = a file

A Better Organization index.html public_html hobbiescareer index.html golf.htmlbooks.html

Why Design? Helps to divide up the work into manageable parts Reduces cognitive overload on viewers of pages Facilitates the construction of links

The Anchor Element Supports links to other pages or to places within the same page … A required attribute is either HREF (link to another page) or NAME (link to same page)

The HREF Anchor Lambert page The displayed text of the link

Absolute URLs An absolute URL contains the complete address, including the server name –Example: Causes a linking request to the server for a page, which involves some overhead (ie, time)

Relative URLs A relative URL contains just a path name (a file name or directory name and zero or more directory names) –Example: hobbies.html –Example: hobbies/golf.html Link to server is already there, so this way is faster than with absolute URLs

How to Construct a Pathname index.html public_html hobbiescareer index.html golf.htmlbooks.html If you’re in hobbies/index.html, you get to golf.html with golf.html

How to Construct a Pathname index.html public_html hobbiescareer index.html golf.htmlbooks.html If you’re in public_html/index.html, you get to golf.html with hobbies/golf.html

How to Construct a Pathname index.html public_html hobbiescareer index.html golf.htmlbooks.html If you’re in hobbies/index.html, you get to the top-level index.html with../index.html

Relative vs Absolute Back to index An absolute link causes a relink to the server, which can slow down navigation. Relative links are shorter and easier to remember and use. Absolute links can change, relative links are (relatively) stable

More Basic Principles Restrict content of each page to avoid cognitive overload (3-7 rule) Avoid superfluous links, such as back to previous page (the browser has a button for this already)

Other Design Tips Draw a diagram of the file/directory system Show also how the files are linked

The File/Directory Structure index.html public_html hobbiescareer index.html golf.htmlbooks.html

The Link Map index.html public_html hobbiescareer index.html golf.htmlbooks.html