The Comment tag Many programming languages allow us to write comments in a program Comments are ignored by the computer when processing the program but.

Slides:



Advertisements
Similar presentations
HTML I. HTML Hypertext mark-up language. Uses tags to identify elements of a page so that a browser such as Internet explorer can render the page on a.
Advertisements

HTML Basics Customizing your site using the basics of HTML.
HTML popo.
CREATED BY : VIRAL M.KORADIYA. Anchor elements are defined by the element. The element accepts several attributes, but either the Name or HREF attribute.
Internet Services and Web Authoring (CSET 226) Lecture # 5 HyperText Markup Language (HTML) 1.
Cascading Style Sheets (CSS). Cascading Style Sheets With the explosive growth of the World Wide Web, designers and programmers quickly explored and reached.
Cascading Style Sheets
CHAPTER 7 STYLING CONTENT WITH CASCADING STYLE SHEETS.
INTRODUCTION TO HYPERTEXT MARKUP LANGUAGE 1. Outline  Introduction  Markup Languages  Editing HTML  Common Tags  Headers  Text Styling  Linking.
Chapter 3 – Designing your web pages Dr. Stephanos Mavromoustakos.
กระบวนวิชา 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.
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.
MSc. Publishing on WWW Tables and Style Sheets. Tables Tables are used to: Organize and display tabular data To create a layout for web pages.
Another example using headings Suppose we want to write a web document which has two main sections Suppose the first section has two subsections And suppose.
Style Sheets: the right way to specify rendering.
Cascading Style Sheets Controlling the Display Of Web Content.
Cascading Style Sheets Controlling the Display Of Web Content.
Style sheets can also affect the BODY. style4.css BODY {BACKGROUND-COLOR : white} H1 {COLOR : red; FONT-SIZE : 50; FONT-FAMILY : arial} H2 {COLOR : green}
Style sheets can also affect the body. style4.css body {background-color : white} h1 {color : red; font-size : 50; font-family : arial} h2 {color : green}
4.01 Cascading Style Sheets
Comment tags (contd.) A comment tag is of the form A comment can appear anywhere in a html specification They are frequently used to tell people who wrote.
Developing a Basic Web Page with HTML
Computer Sciences Department
TUTORIAL 8: Enhancing a Web Site with Advanced CSS
Understanding HTML Style Sheets. What is a style?  A style is a rule that defines the appearance and position of text and graphics. It may define the.
HTML Tags. Objectives Know the commonly used HTML tags Create a simple webpage using the HTML tags that will be discussed.
Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction.
Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies.
Cascading style sheets (CSS)
CSS Cascading Style Sheets By Garrett Garman. CSS Why use Style Sheets? Separates Appearance and Structure Modularity Quick and Easy changes Flexibility.
INTRODUCTION TO HTML5 CSS Styles. Understanding Style Sheets  HTML5 enables you to define many different types of content on a web page, including headings,
HTML HTML stands for "Hyper Text Mark-up Language“. Technically, HTML is not a programming language, but rather a markup language. Used to create web pages.
HTML (HyperText Markup Language)
Web Design I Spring 2009 Kevin Cole Gallaudet University
INTRODUCTION TO HTML5 Styling Text. Change the Font Size  You can use the font-size property to change the font size for a document’s text.  Instead.
HTML and Style. Session overview Leveling-off on the basic concepts of HTML and Styles Discuss Web authoring options.
 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.
1 What is CSS?  CSS stands for Cascading Style Sheets  Styles define how to display HTML elements  Styles are normally stored in Style Sheets  Styles.
ITCS373: Internet Technology Week 3: Introduction to CSS Dr. Faisal Al-Qaed.
CO1552 – Web Application Development Cascading Style Sheets.
Cascading Style Sheets. What is CSS? Short for Cascading Style Sheets, a new feature being added to HTML that gives more control over how pages are displayed.
Cascade Style Sheet Introduction. What is CSS?  CSS stands for Cascading Style Sheets  Styles define how to display HTML elements  Styles were added.
CPSC 203 Introduction to Computers Lab 33 By Jie Gao.
Web Design and Development for Business Lecture 4 Cascading Style Sheet (CSS)
CSS Tutorial 1 Introduction Syntax How to use style specifications. Styles.
Definition CSS “Short for Cascading Style Sheets, a new feature being added to HTML that gives both Web site developers and users more control over how.
INT222 - Internet Fundamentals Shi, Yue (Sunny) Office: T2095 SENECA COLLEGE.
DHTML. What is it? Dynamic HTML. Not a standard unlike HTML or Java It is a term applied by both Netscape and Microsoft to a collection of technologies.
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.
WEEK -1 ACM 262 ACM 262 Course Notes. HTML What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML.
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 Technologies Beginning Cascading Style Sheets (CSS) 1Copyright © Texas Education Agency, All rights reserved.
How to… Cascading Style Sheets. How to Insert a Style Sheet When a browser reads a style sheet, it will format the document according to it. There are.
Comment tags (contd.) A comment tag is of the form A comment can appear anywhere in a HTML specification They are frequently used to tell people who wrote.
Hyper Text Markup Language.  My First Heading My first paragraph. Example Explained The DOCTYPE declaration defines the document type The text between.
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 Cascading Style Sheets. Session Checklist ► Learn why style sheets are needed and their advantages and disadvantages ► Learn the format of a style.
4.01 Cascading Style Sheets
Module: Software Engineering of Web Applications
Cascading Style Sheets
What are Cascading Stylesheets (CSS)?
Tutorial 3 Working with Cascading Style Sheets
Cascading Style Sheets
Lesson 3: Cascading Style Sheets (CSS) and Graphical Elements
4.01 Cascading Style Sheets
Presentation transcript:

The Comment tag Many programming languages allow us to write comments in a program Comments are ignored by the computer when processing the program but are useful to humans reading the program text HTML also provides comments They are ignored by browsers but are useful to humans reading HTML specifications

Comment tags (contd.) A comment tag is of the form A comment can appear anywhere in a HTML specification They are frequently used to tell people who wrote the specification, when, why, etc.

Politics in Ireland Presidents The presidents of Ireland were Douglas Hyde Eamon de Valera

Using tags

tags tags are used to incorporate pictures into web documents A picture cannot be inserted directly into the HTML spec of a web document, since a HTML spec is a textual spec tags are used to point to pictures that we want to appear in a web document

tags (contd.) The tag is a structured tag -- it has attributes The SRC attribute is used to point to the picture to be included

A simple web document containing a picture

Of course, we can have text with the pictures

A document

The ALIGN attribute In early versions of HTML, IMG tags used to have an ALIGN attribute for specifying how to align pictures relative to neighbouring text This was, therefore, a rendering attribute DO NOT USE this attribute –NEVER use rendering attributes We will see how to achieve rendering effects more cleanly when we meet Style Sheets

Specifying Image sizes The tag has further ATTRIBUTES –the WIDTH and –the HEIGHT which specify the size of the displayed version of an image, in units called “pixels”

Suez

Colour of the background It would be preferable if you could ignore such rendering features as the colour of the background Unfortunately, when you start using pictures, you cannot, since pictures have colour and you have to consider how clearly an image will show up against the background

Background colour (contd.) For example, consider how the last document we specified would appear in both Netscape Navigator and Microsoft Explorer

Background colour (contd.) In Netscape, the images show up clearly against the default background colour, which is white In Explorer, the largely-grey images do not contrast so well with the grey-ish background

Background colour (contd.) We can specify the background colour we want Early versions of HTML provided a BGCOLOR attribute in the tag However this is a rendering attribute and SHOULD NOT BE USED We will see how to do it more cleanly when we meet style sheets

Background PATTERNS We can also ask the browser to use a repeated version of some image as a background This should be done with care, because –it can lead to unreadable documents –it adds to the length of time it takes to download a document over the Internet

Background PATTERNS Early versions of HTML provided an attribute in the tag for this purpose Again, as with all rendering attributes, DO NOT USE IT We will see how to do achieve the same effect more cleanly when we meet style sheets

Another kind of list: Definition lists

Definition lists: Frequently, we want to have lists of items like this: CPU Central Processor Unit VDU Visual Display Unit IRQ Interrupt ReQuest

In other words, we want to have a list in which each member has two parts: –a TERM, whose meaning is to be defined –a DEFINITION of the term

HTML provides a tag for this kind of concept: the Definition List tag or tag A list of definitions is delimited by a tag and a tag ….

Each item between the and tags has two parts, a term and its definition A term is delimited by and tags, while a definition is delimited by and tags: CPU Central Processing Unit VDU Visual Display Unit IRQ Interrupt ReQuest

Example document: Definition List Some Computing Acronyms CPU Central Processing Unit VDU Visual Display Unit IRQ Interrupt ReQuest

Another example document: Languages of the World Languages of the World Tok Pisin A Melanesian Creole spoken in the South-western Pacific Hakka One of the languages spoken in Fujien province in China Mon A language spoken in Cambodia Xhosa One of the major languages of South Africa

Style Sheets: the right way to specify rendering

Structure versus Rendering HTML specifications of documents should contain only information about how a document is structured into logical units such as paragraphs, pictures, lists, etc. HTML specifications should not contain rendering information And yet: –we often want to specify how we want a document rendered

Question: How can we specify our own style of rendering without mixing rendering rules inside a document’s logical specification?

Answer: We should use Style sheets

Style sheets A style sheet contains a set of rendering specifications We can apply a style sheet to a HTML document specification in order to change the appearance of the document when it is rendered by a browser

A simple style sheet This style sheet specifies that all items in any document to which the style sheet is applied should be printed in red H1 { COLOR : red}

Storing style sheets: We can store style sheets in files with the extension “.css” For example, the style sheet H1 { COLOR : red} could be stored in a file called style1.css

Applying style sheets We apply a style sheet in a.css file to a document in a.htm file by calling the.css file in the part of the.htm file: … <LINK REL=STYLESHEET TYPE=“text/css” HREF=“style1.css” > Wars of the 20th Century

Multiple usage of a style sheet: We can apply a style sheet which is stored in a.css file to many documents This HTML spec uses style1.css as well: … <link rel=“stylesheet” type=“text/css” href=“style1.css” > Tourist Attractions of the World

A more sophisticated style sheet Specifying styles for items as well as items

style2.css h1 {color : red} p {color : blue}

wars.htm … Wars of the 20th Century The century just coming to an end was one of the bloodiest on record...

Several H1 style attributes h1 {color : red; font-size : 50} p {color : blue}

Another H1 style attribute H1 {COLOR : red; FONT-SIZE : 50 ; FONT-FAMILY : arial} P {COLOR : blue}

We can, of course, specify styles for all levels of headings Consider a document which has H2 as well as H1 headings

wars2.htm

style2.css This first style-sheet does not specify anything for the H2 headings: H1 {COLOR : red ; FONT-SIZE : 20 ; FONT-FAMILY : arial} P {COLOR : blue} So, as we see on the next slide, H2 headings have the default style

Applying style2.css to wars2.htm

style3.css H1 {COLOR : red ; FONT-SIZE : 20 ; FONT-FAMILY : arial} H2 {COLOR : green} P {COLOR : blue}

Applying style3.css to wars2.htm