Style and Lists HTML - Chapters 5 and 6. Objectives  Use and distinguish between various style sheets and properties  Create and distinguish between.

Slides:



Advertisements
Similar presentations
HTML Basics Customizing your site using the basics of HTML.
Advertisements

HTML popo.
Introduction to HTML & CSS
Cascading Style Sheets
Today CSS HTML A project.
CHAPTER 7 STYLING CONTENT WITH CASCADING STYLE SHEETS.
“Cascading Style Sheets” for styling WWW information DSC340 Mike Pangburn.
กระบวนวิชา 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.
Cascading Style Sheets Understanding styles. The term cascading describe the capability of a local style to override a general style. CSS applies style.
Chapter 5 Creating an Image Map.
Chapter 3 Working with Text and Cascading Style Sheets.
Create Unordered and Ordered lists Cascading Style Sheets Insert and align Graphics Image enhancements Background images and site maintenance Working with.
XP 1 New Perspectives on Creating Web Pages with HTML Tutorial 1: Developing a Basic Web Page.
Developing a Basic Web Page with HTML
INSTRUCTIONAL SUPPORT SERVICES (ISS) SHORT COURSE, FALL 2012 UMSL Introduction to Web Page Design.
INTRO TO WEB DEVELOPMENT
Designing Web Pages Getting to know HTML... What is HTML? Hyper Text Markup Language HTML is the major language of the Internet’s World Wide Web. Web.
Working with Text and Cascading Style Sheets Adobe Dreamweaver Chapter 3.
HTML Tags. Objectives Know the commonly used HTML tags Create a simple webpage using the HTML tags that will be discussed.
Identifies the Structure Table Row Column 1 Table Heading Column 2.
Web Design Dreamweaver Semester 2 ATBs. ATB #1 What is a web site?
Cascading Style Sheets (CSS) Instructor: Mr. Ahmed Al Astal ITGD4104 Department Requirement for senior student University of Palestine Faculty of IT.
Cascading Style Sheet Basics Pepper. Looking at the HTML See the surrounding tags See head, body, paragraph, header See the ending tags See the list.
Using Styles and Style Sheets for Design
Chapter 16 The World Wide Web. 2 The Web An infrastructure of information combined and the network software used to access it Web page A document that.
4 HTML Basics 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.
Bare bones notes. Suggested organization for main folder. REQUIRED organization for the 115 folder.
Informatics Computer School CS114 Web Publishing HTML Lesson 2.
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.
XP Mohammad Moizuddin Creating Web Pages with HTML Tutorial 1 1 New Perspectives on Creating Web Pages With HTML Tutorial 1: Developing a Basic Web Page.
OBJECTIVES  What is HTML  What tools are needed  Creating a Web drive on campus (done only once)  HTML file layout  Some HTML tags  Creating and.
 This presentation introduces the following: › 3 types of CSS › CSS syntax › CSS comments › CSS and color › The box model.
The format is text files, with.htm or.html extension. Hard returns, tabs, and extra spaces are ignored. DO NOT use spaces in file names. File names ARE.
MIS 425 Lecture 3 – HTML 5 and CSS Instructor: Martin Neuhard
Css. Definition Cascading style sheet (CSS) Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.
HTML,DHTML & Javascript/Session1/1 of 39 Introduction and Basic Tags Session 1 of Using HTML, DHTML & JavaScript.
Networks and Networking TEST NEXT WEEK Chapter 6.
Bare bones slide show. The format is text files, with.htm or.html extension. Hard returns, tabs, and extra spaces are ignored. DO NOT use spaces in file.
Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.
Css. Definition Cascading style sheet (CSS)  It is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.
4 Chapter Four Introduction to HTML. 4 Chapter Objectives Learn basic HTML commands Discover how to display graphic image objects in Web pages Create.
Chapter 2 Web Page Design Mr. Gironda. Elements of a Web Page These are things that most web pages use.
4 HTML Basics 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.
Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT.
DYNAMIC HTML What is Dynamic HTML: HTML code that allow you to change/ specify the style of your web pages. Example: specify style sheet, object model.
Web Design (12) CSS Introduction. Cascading Style Sheets - Defined CSS is the W3C standard for defining the presentation of documents written in HTML.
This shows CIS17 and the first day introduction..
Writing Your Own Web Page: Using HTML and FrontPage Chapter 10.
CSS Cascading Style Sheets *referenced from
Practice for Chapter 3: Assume that you are a freelance web designer and need to create a website to promote your freelance company.
Creating Web Pages with Links, Images, and Embedded Style Sheets
1 Cascading Style Sheet (CSS). 2 Cascading Style Sheets (CSS)  a style defines the appearance of a document element. o E.g., font size, font color etc…
Computer Basics Introduction CIS 109 Columbia College.
CS 200 – Web Tech I Web Site Organization – (con't)
CASCADING STYLE SHEET 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.
Cascading Style Sheets Using HTML. What are they? A set of style rules that tell the web browser how to present a web page or document. In earlier versions.
Section 4.1 Section 4.2 Format HTML tags Identify HTML guidelines
4.01 Cascading Style Sheets
Bare boned notes.
Bare bones notes.
Madam Hazwani binti Rahmat
Website Design 3
Software Engineering for Internet Applications
Introduction to Cascading Style Sheets (CSS)
Cascading Style Sheets™ (CSS)
Some Stuff You Need to Know
Bare bones notes.
Web Design and Development
Exercise 9 Skills You create and use styles to create formatting rules that can easily by applied to other pages in the Web site. You can create internal.
4.01 Cascading Style Sheets
Presentation transcript:

Style and Lists HTML - Chapters 5 and 6

Objectives  Use and distinguish between various style sheets and properties  Create and distinguish between different types of lists  Alter the default bullets for lists

Style Sheets  A style  To  style sheet -

Style Sheets    

Style Sheet Types for HTML  inline styles:  embedded styles:  linked style sheets: in external file and linked with the Web site

Using Inline Styles “attribute1:value1; attribute2:value2”

Example file

Inserting an Inline Style This figure shows how to insert an inline style.

Heading with New Style This figure shows the heading with the new style.

Creating an Embedded Style  tag between the head tags  selector {attribute1:value1; attribute2;value2;...}

Values of the List-Style-Type Attribute This figure shows the possible values of the list-style-type attribute.

Style Properties  Text on page 53  Link and Anchor page 56  Color page 57  MS Training available online Do a search for training Introduction to cascading style sheets From there is a link to HTML for Beginners

Creating a Rollover Effect This figure shows the rollover effect.

The class Attribute  DO NOT USE THE CLASS ATTRIBUTE FOR YOUR ASSIGNMENTS!  THE EXAMPLES IN THE BOOK SHOW HOW TO USE CLASS BUT THAT IS NOT THE ONLY WAY TO COMPLETE THE TASK.

Horizontal Lines  Created with the tag  Modify: color, height, width, alignment  Specify as: percentage of available space # of pixels

Exercise  What will the following code generate?

Adding Style h1 {color:red} Let's put a line at the top of this page And another one with different style attributes here And a final one of a different height, length and color

Creating Lists

List Types  ordered list  unordered list  definition list

Lists in Action 

Homework HTML2 Create a file containing characteristics of your current/future/desired web page. You will use an ordered list and a definition list. You will use inline and embedded styles. Specifics on my web site Start early so you can get your questions answered.

Homework Networks - Long & Long, chapter 6  Consider methods to connect to the Internet. Research the following: local availability (company names), max & typical connection speed, price to connect to the Internet (initial and monthly), transmission media (for example twisted pair, wireless- microwave, wireless-radio)  Cellular modems, Internal & External modems, DSL, cable modems, Satellite, T1/T3

Extra Credit Opportunities  3-4 minute PowerPoint presentation  Max of 5 points  Send presentation to by 8am on the third day following class (Friday for Tuesday classes or Sunday for Thursday classes)

Topics Define any unfamiliar terms used in your presentations. Use your book, other books, the Internet as sources.  Identify the reasons to create a home network. Tell how to connect a home network. Include hardware, software, & costs.  Define client/server and peer-to-peer networks. Identify differences between them? Where are they used? Distinguish client from server.  Discuss the advantages and disadvantages of wireless networks. How are they created? What are the types of wireless networks?