1 Background and Text Links CGS3066 Rory J. De Simone.

Slides:



Advertisements
Similar presentations
Internet Services and Web Authoring (CSET 226) Lecture # 5 HyperText Markup Language (HTML) 1.
Advertisements

CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.
CSS. CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem External Style.
Cascading Style Sheets
/k/k 1212 Cascading Style Sheets Part one Marko Boon
CSS. CSS, or Cascading Styles Sheets, is a way to style HTML. Whereas the HTML is the content, the style sheet is the presentation of that document.
Introduction to CSS.
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.
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.
CSS(Cascading Style Sheets )
กระบวนวิชา 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.
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.
HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML
Starting BBEdit (Notepad) and Opening an HTML File Open the Public Folder Start Notepad or BBEdit Click File on the menu bar, and then click Open In the.
Introduction to Cascading Style Sheets (CSS) Module 2: HTML Basics LESSON 4.
Using Cascading Style Sheets CSS Basics. Goals Understand basic syntax of Cascading Style Sheets (CSS) Understand basic syntax of Cascading Style Sheets.
4.01 Cascading Style Sheets
Web Design is a class created to nurture the minds of high school techies, and introduce those without prior knowledge to the field.
Colour & Image in HTML Wah Yan College (Hong Kong) Mr. Li C.P.
Using Cascading Style Sheets (CSS) Dept. of Computer Science and Computer Information CSCI N-100.
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.
HTML Tags. Objectives Know the commonly used HTML tags Create a simple webpage using the HTML tags that will be discussed.
Review HTML  What is HTML?  HTML is a language for describing web pages.  HTML stands for Hyper Text Markup Language  HTML is not a programming language,
Cascading Style Sheet. What is CSS? CSS stands for Cascading Style Sheets. CSS are a series of instruction that specify how markup elements should appear.
Chapter 2: The Client Side: HTML CIS 275—Web Application Development for Business I.
Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document.
Using Cascading Style Sheets. Introduction to Styles and Properties  Cascading Style Sheets (CSS) are a standard set by the World Wide Web Consortium.
CS 299 – Web Programming and Design Introduction to HTML.
Bare bones notes. Suggested organization for main folder. REQUIRED organization for the 115 folder.
Agenda Links External and Internet Links Anchor Tag Text Hyperlinks Image Hyperlinks Images Image Attributes: src, alt, width, height, align, border.
(CSS) More Details Instructor: Mr. Ahmed Al Astal ITGD4104 Department Requirement for senior student University of Palestine Faculty of IT.
Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and attributes Create.
Copyright (c) 2004 Prentice-Hall. All rights reserved. 1 Committed to Shaping the Next Generation of IT Experts. Formatting Text and Lists Essentials for.
 This presentation introduces the following: › 3 types of CSS › CSS syntax › CSS comments › CSS and color › The box model.
Using Cascading Style Sheet As you create more web pages, you may wish to impose a consistent look for all of your web pages or for group of related pages.
Introduction to Programming the WWW I CMSC Winter 2003 Lecture 3.
INTRODUCTION TO CSS. OBJECTIVES: D EFINE WHAT CSS IS. K NOW THE HISTORY OF CSS. K NOW THE REASON WHY CSS IS USED. CSS SYNTAX. CSS ID AND CLASS.
Cascade Style Sheet Introduction. What is CSS?  CSS stands for Cascading Style Sheets  Styles define how to display HTML elements  Styles were added.
XHTML1 Images N100 Building a Simple Web Page. XHTML2 The Element The src attribute specifies the filename of an image file To include the src attribute.
Web Design and Development for Business Lecture 3 Hyper Text Markup Language (HTML)
More CSS.
Use CSS to Implement a Reusable Design Selecting a Dreamweaver CSS Starter Layout is the easiest way to create a page with a CSS layout You can access.
DIV, Span, CSS.
C H 07: M ORE A BOUT HTML Tharith Sriv. O UTLINE You have already learnt almost everything in HTML. In this chapter, you will learn more about:  An HTML.
HTML Basics Computers. What is an HTML file? *HTML is a format that tells a computer how to display a web page. The documents themselves are plain text.
Cascading Style Sheets CSS. Source W3Schools
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.
INTRODUCTORY Tutorial 5 Using CSS for Layout and Printing.
Body and Heading Tags and their Attributes. Attribute Name DefinitionValues backgroundIndicates the background image of the Web page. Ex. Filename(path.
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.
©SoftMoore ConsultingSlide 1 Introduction to HTML: Basic Document Structure.
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: … …
What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup.
CHAPTER TWO HTML TAGS. 1.Basic HTML Tags 1.1 HTML: Hypertext Markup Language  HTML stands for Hypertext Markup Language.  It is the markup language.
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
Microsoft Expression Web - Illustrated Unit A: Getting Started With Microsoft Expression Web.
Web Design Principles 5 th Edition Chapter 3 Writing HTML for the Modern Web.
This is a test Webpage Wow, I’m writing my first webpage.
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.
HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML.
Chapter 4 Frames and Cascading Style Sheets. Frames Frames divide a browser window into two or more separate pieces or panes, with each pane containing.
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.
4.01 Cascading Style Sheets
Introduction to Cascading Style Sheets (CSS)
Cascading Style Sheets™ (CSS)
Tutorial 3 Working with Cascading Style Sheets
4.01 Cascading Style Sheets
HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML
Presentation transcript:

1 Background and Text Links CGS3066 Rory J. De Simone

2 Backgrounds The tag has two attributes where you can specify backgrounds. The background can be a color or an image. Bgcolor The bgcolor attribute specifies a background- color for an HTML page. The value of this attribute can be a hexadecimal number, an RGB value, or a color name: The lines above all set the background-color to black.

3 Background The background attribute specifies a background- image for an HTML page. The value of this attribute is the URL of the image you want to use. If the image is smaller than the browser window, the image will repeat itself until it fills the entire browser window. The URL can be relative (as in the first line above) or absolute (as in the second line above).

4 Note: If you want to use a background image, you should keep in mind: Will the background image - increase the loading time too much? - look good with other images on the page? - look good with the text colors on the page? - look good when it is repeated on the page? - take away the focus from the text?

5 BODY COLORS Body colors are those that are set as the basic colors for your page. They cover the colors of the background, text, links, visited links and activated links. The body colors are not written individually, but are all set within one body tag. For example.... or or

6 NOTE: You must only ever have ONE BODY TAG on your page, and it should be immediately after your tag. If you have more than one body tag, or you have it in the wrong part of your page, then the page may not load correctly with some browsers! You can change various pieces of text within your page to different colors as the need arises, but the body colors remain the major colors that you have selected for the rest of your page. In the following examples,"#xxxxxx" is either the hexadecimal code, or the "colorname" for your chosen color.

7 Text and Background Colors COLOR bgcolor="#xxxxxx" This code sets the background color for your page. If you have a background image, you can still select a background color for your page. This background color will show until the image file has loaded. It is a good idea to select a background color that is similar to your background image. That way, if for some reason the background image does not load, your page will still look "nearly" right! TEXT COLOR text="#xxxxxx" This code sets the text color for your page. The normal default for text color is black. If you do not specify a text color, it will automatically default to black. LINK COLORS

8 Link Colors Link color: link="#xxxxxx" This code sets the color for your links. Links appear as an underlined, different colored part of the text. Visited link color: vlink="#xxxxxx" This code sets the color for viewed links. It is useful for links which have been viewed to change to another color. Activated link color: alink="#xxxxxx" This code sets the color for activated links. It simply means it flashes another color when clicked.

9 Examples:

10 Important: Basic Notes - Useful Tips The bgcolor, background, and the text attributes in the tag are deprecated in the latest versions of HTML (HTML 4 and XHTML). The World Wide Web Consortium (W3C) has removed these attributes from its recommendations. Style sheets (CSS) should be used instead (to define the layout and display properties of HTML elements).