Unit C in class EXERCISE

Slides:



Advertisements
Similar presentations
Tables Feb. 14, Tables Great way to organize and display information Laid out in columns and rows Think of an excel spreadsheet Defined with tag.
Advertisements

HTML Basics Customizing your site using the basics of HTML.
CSS-Formatting Review Cascading Style Sheets addstyle to your HTML web pages.
CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.
Cascading Style Sheets
CHAPTER 7 STYLING CONTENT WITH CASCADING STYLE SHEETS.
Project 8 Creating Style Sheets.
Web Pages and Style Sheets Bert Wachsmuth. HTML versus XHTML XHTML is a stricter version of HTML: HTML + stricter rules = XHTML. XHTML Rule violations:
กระบวนวิชา 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.
Session Objectives What is CSS? Define CSS syntax Learn about the authoring options Add comments to a CSS Defining color in CSS.
Chapter 7 Using Advanced Cascading Style Sheets HTML5 & CSS 7 th Edition.
Web Workshop: CSS Objectives: - “What is CSS?” - Structure of CSS - How to use CSS in your webpage.
Workshop: CSS-Part I Cascading Style Sheets add style to your HTML web pages.
HTML. Goals How to use the Komodo editor HTML coding and testing Basic HTML tags List and Images Tables and Links At least 2 pages and navigation
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. Goals How to use the Komodo editor HTML coding and testing – List and Images – Tables and Links – At least 2 pages and navigation –
INFSCI  Start with a skeleton outline: copy and paste:  Warning sometimes copy and paste of quote marks from PowerPoint doesn’t work correctly.
Creating Tables in a Web Site Using an External Style Sheet
HTML. We’ll learn … What HTML is What tags are What a basic web page looks like What 3 HTML tags are required What HTML comments look like How to title.
HTML, Third Edition--Illustrated Introductory 1 HTML, Third Edition Illustrated Introductory Unit F Working with Tables.
More Basic HTML. Add spacing (single & double space) Save Refresh Add horizontal rule Add comments Add styles Add headings Add features Add alignments.
HTML, Third Edition--Illustrated Introductory 1 HTML, Third Edition Illustrated Introductory Unit E Formatting with Cascading Style Sheets.
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.
Lesson 2 Adding more content to your web page. Thanks to Richard Hudnutt, Luella HS.
Web pages in Linux David Douglas Sam M. Walton College of Business, University of Arkansas.
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.
Working with Cascading Style Sheets (CSS) Module 2: HTML Basics LESSON 5.
Lesson 2: Basic HTML Code Basic HTML Code. HTML is an acronym for Hypertext Markup Language. Internet browsers translate the HTML code into texts and.
Cascading Style Sheets Dreamweaver. Styles Determine how the HTML code will display Determine how the HTML code will display Gives designers much more.
Chapter 2 Web Page Design Mr. Gironda. Elements of a Web Page These are things that most web pages use.
HTML. Adding Background Color The bgcolor attribute lets you change the background color of the Web page. Located in the body tag See common Web Page.
Colors & Fonts Building a Website Lesson 7. Font Font The tag specifies the font face, font size, and color of text. The tag can have any or all of these.
Cascading Style Sheets Creating a Uniform Site. Style Sheets  Style sheets are used for conformity on a web page or web site.  Style sheets eliminate.
Cascading Style Sheets
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.
Body and Heading Tags and their Attributes. Attribute Name DefinitionValues backgroundIndicates the background image of the Web page. Ex. Filename(path.
Are You Smarter Than a 5 th Grader? 1,000,000 5th Grade HTML 5th Grade Syntax 4th Grade HTML 4th Grade Syntax 3rd Grade HTML 3rd Grade Syntax 2nd Grade.
1 HTML Tables. 22 Objectives You will be able to Create tables in HTML.
Basic HTML Programming Technology Education Ellsworth Community Middle School Communication Systems.
Open the index.html Open this PowerPoint from the S Drive IDT folder Chapman Images.ppt.
Using Text Edit. Create Folders to Organize a Site  Identify the location where you are storing your Web sites. Ask your teacher for help if needed.
HTML HTML stands for Hyper Text Markup Language. HTML is used in making the base of a Website You can just use an online website maker like weebly.com.
Introduction. MIS 5450 Behavioral Layer JavaScript and DOM Structural Layer XHTML Presentation Layer CSS Design Development Process.
1 Your Web Page title body of Web page main heading H2 heading bulleted list paragraph.
Creating Web Pages with Links, Images, and Embedded Style Sheets
Project 02 Creating and Editing a Web Page Concept Map of Unit Creating and Editing a Web Page Key Learning Understand the elements to create a web page.
Basic HTML Page 1. First Open Windows Notepad to type your HTML code 2.
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.
Creating Web Documents CSS examples (do more later) Lab/Homework: Read chapters 15 & 16. Work on Project 3, do postings.
UNIT C IN CLASS EXERCISE. Go to Download the file samplec.txt.
External Style Sheets.
Web Basics: HTML/CSS/JavaScript What are they?
Getting Started with CSS
>> Introduction to CSS
>> CSS Rules Selection
Creating Tables in a Web Site Using an External Style Sheet
Intro to CSS CS 1150 Fall 2016.
Website Design 3
Intro to CSS CS 1150 Spring 2017.
Intro to CSS Mr. Singh.
Basic HTML and Embed Codes
Working with Cascading Style Sheets (CSS)
Working with Cascading Style Sheets (CSS)
Intro to Web Development First Web Page
More Basic HTML 2 assignments: 1—complete the worksheet
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.
One Set of Styles Connected to As Many Pages as You Want!!!
Presentation transcript:

Unit C in class EXERCISE

Download the file samplec.txt and save it as samplec.html Go to : http://web.gccaz.edu/~timgo00001/cis133/UnitC-exercise/ Download the file samplec.txt and save it as samplec.html Change the title to your group name. Add a comment with your names. Add the begin and end style tags in the head section. Save and view in Chrome.

Add style rules for the body element that will give body a background color based on your group. Akitas wheat Bulldogs LightSteelBlue  Corgis coral Dachshunds PaleGreen English Setter Foxhounds Great Danes Havanese

Add style rules to horizontally align the text of any h1s based on your group. Akitas center Bulldogs right Corgis Dachshunds English Setter Foxhounds Great Danes Havanese

Add an id rule named "text1" that will horizontally align the text to the center. Use the "text1" id rule on the paragraph as follows: Akitas Make sure your dog has Bulldogs Try on your costume Corgis Pumpkins and corn Dachshunds Your door will be English Setter Dogs are very curious Foxhounds Do not dress your Great Danes Chocolate (especially dark Havanese Even if you are

Add an id rule named "text2" with the following: width: 75%; Add a division that uses this rule as follows: When viewing the page, make its width narrower so that you can see the 75% take effect. div starts after div ends before Akitas Pre Halloween night Halloween night Bulldogs Post Halloween Corgis No scardey cats allowed Dachshunds English Setter Foxhounds Great Danes Havanese

Add a class named "text3" that will make text color orange Add a class named "text3" that will make text color orange. Use this class on the following 3 paragraphs. Paragraph 1 Paragraph 2 Paragraph 3 Akitas Try on your costume Your door will be Chocolate (especially dark Bulldogs Pumpkins and corn Do not dress Corgis Even if you are Dachshunds Dogs are very English Setter Foxhounds Great Danes Havanese

Add a single style rule to make the text of h2 and h3 elements be the color as follows. Akitas DarkRed Bulldogs Purple Corgis Yellow Dachshunds English Setter Purple  Foxhounds Great Danes Havanese

Print the source code for samplec. html and hand in to your teacher Print the source code for samplec.html and hand in to your teacher. But wait. There's more. Let's make an external style sheet.

Save the samplec.html file with the name samplec2.html  Copy the style rules and paste them into a new text file. DO NOT INCLUDE THE <style> and </style> TAGS. Save this file with the name samplec.css In samplec2.html delete all of the embedded styles including the <style> and </style> tags and add a link statement to the samplec.css file. Test samplec2.html in your browser and make any corrections as needed.

That's all folks.