 CSS ids  Pages  Sites  HTML: class=“name”  Names may define format OR content › Either works  CAN apply multiple classes to the same tag  Multiple.

Slides:



Advertisements
Similar presentations
Table, List, Blocks, Inline Style
Advertisements

Table (TABLE) Contains TABLE ROWS (TR) Contains TABLE DATA (TD) Data can contain anything Text Lists Other tables Pictures …
Cascading Style Sheets
Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is.
MIS 425 Lecture 2 – HTML Navigation, Colors, tables and Styles Instructor: Martin Neuhard
FORMATTING IN CONTEXT. FOLLOW UPS ANCHOR POINTS MUST BE UNIQUE  If you have more than one, how does it know where to go?  They can be repeated across.
Web Development & Design Foundations with XHTML Chapter 7 Key Concepts.
Need to define two things: › The destination › Something to click on to get there  Tag is click here  Can be text, special character or image (next.
Murach’s ASP.NET 3.5/C#, C5© 2008, Mike Murach & Associates, Inc.Slide 1.
CONCEPTS FOR FLUID LAYOUT Web Page Layout. Website Layouts Most websites have organized their content in multiple columns (formatted like a magazine or.
16 HTML Tables and Frames Section 16.1 Create a basic table using HTML Define borders Merge cells Align content in tables Section 16.2 Create a frames-based.
 Pseudo-elements  Centering  Tables  Classes and ids.
Lecture Cascading Style Sheets (CSS) Internal Style Sheets Classes.
XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists.
Art 128 Interface Programming 1 In-class Presentation Week 11B.
TUTORIAL 8: Enhancing a Web Site with Advanced CSS
Page Layout Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan 1.
INTERNAL CSS Casey Ames Different types of CSS There are three different types of CSS: ◦ External CSS ◦ Internal CSS ◦ Inline CSS In this presentation.
Learning HTML. HTML Attributes HTML elements can have attributes Attributes provide additional information about an element Class – specifies a class.
CONCEPTS FOR FLUID LAYOUT Web Page Layout. Website Layouts Most websites have organized their content in multiple columns (formatted like a magazine or.
11 HTML5 sharing St Bonaventure College & High School 31 May 2012.
Chapter 2 HTML Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
Neal Stublen Course Road Map  Create web page layouts using CSS  Manage CSS  Test website validity  Create navigation menus using.
WEB DESIGN UNIT 2 Unit 2 Module 2-5. WHAT HAVE YOU LEARNED?  What is the title tag do? Where does it show?  What are the tags that need to be on every.
 Word doc for you to download › Link at the beginning of class › 10 Questions › Answers to be added inline  Post to Sakai when completed › No resubmits.
 Remember that HTML is just text  Need to point to pictures  Use the img tag  alt: › screen reader › REQUIRED for this class and to validate.
INTRODUCTION TO HTML5 Semantic Layout in HTML5.  The new semantic layout in HTML5 refers to a new class of elements that is designed to help you understand.
Web Development & Design Foundations with XHTML Chapter 8 Key Concepts.
Cascading Style Sheets Class 2, Lecture 3 Rachel A Ober
CLASSES REVIEW: HREF, CONTEXT, FILE STRUCTURE. BIG CAVEAT Never cut and paste from a Powerpoint slide Punctuation is not the same Note that the “ is curly.
Lesson 02 // Elements & Attributes. There are different types of elements, but the 2 most important ones are BLOCK and INLINE. Block elements flow from.
>> HTML: Structure Elements. Elements in HTML are either Inline or Block. Block-level Elements – Begins on a new line – Occupy the whole width – Stacks.
Tutorial #6 – Creating Fixed Width Layouts. Tutorial #5 Review – Box Model Every html element is surround by a box Content, Padding, Border, Margin Can.
CSS October 19. Review of CSS CSS was designed to separate the content of HTML pages from their appearance We are primarily dealing with external style.
Table (TABLE) Contains TABLE ROWS (TR) Contains TABLE DATA (TD) Data can contain anything › Text › Lists › Other tables › Pictures › …
Interface Programming 1 Week 3. Interface Programming 1 CALENDAR.
HTML.
Project 6: Kayaking HTML5 Site
Course created by Sarah Phillips BBCD Melbourne BAPDCOM Version 1 – April 2013.
1 © Netskills Quality Internet Training, University of Newcastle Using Style Sheets in Dreamweaver CS © Netskills, Quality Internet Training, University.
Layout with Styles Castro Chapter 11. Tables vs. CSS You can produce “liquid layouts” (layouts that stretch as the browser is resized) using tables or.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 7 Key Concepts 1 Copyright © Terry Felke-Morris.
INTRODUCTORY Tutorial 5 Using CSS for Layout and Printing.
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
Adobe Dreamweaver CC: The Professional Portfolio Project 8: BLVD Fluid Grid Site Working with fluid grids Creating CSS3 transitions.
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Lesson 5: HTML Tables.
Selective Formatting. Auto Grader Multiple selectors  May use the same formatting for two elements h1, h2 { font-family: cursive; }  Maintains consistency.
CSS Layout Cascading Style Sheets. Lesson Overview  In this lesson, we’ll cover:  Brief CSS review  Creating sections with the tag  Creating inline.
HTML LAYOUTS. CONTENTS Layouts Example Layout Using Element Example Using Table Example Output Summary Exercise.
INTRODUCTION ABOUT DIV Most websites have put their content in multiple columns. Multiple columns are created by using or elements. The div element is.
CONCEPTS FOR FLUID LAYOUT Web Page Layout. Essential Questions What challenges do mobile devices present to Web designers? What are the basic concepts.
HTML Basics Text, Images, Tables, Forms. HTML Structure HTML is comprised of “elements” and “tags” – Begins with and ends with Elements (tags) are nested.
Cascading Style Sheets for layout
Cascading Style Sheets (CSS) Internal Style Sheets Classes
Organizing Content with Lists and Tables
>> Introduction to CSS
Concepts for fluid layout
Display Property.
1-Edit> prefrence> new document> select HTML5
Styles and the Box Model
Google Fonts Selective Formatting
Exam1 Review CSE111 B.Ramamurthy 2/17/2019 B.Ramamurthy.
CSS: Classes and Contextual Selectors
HTML / CSS Mai Moustafa Senior Web Designer eSpace eSpace.
Common Page Design Elements
HTML 5 SEMANTIC ELEMENTS.
Lesson 5: HTML Tables.
Concepts for fluid layout
CSS: Classes and Contextual Selectors
Monday, Sept. 24 Today we are going to update the html code to html5. It has some new features that we have not covered yet.
Presentation transcript:

 CSS ids  Pages  Sites

 HTML: class=“name”  Names may define format OR content › Either works  CAN apply multiple classes to the same tag  Multiple ways to define › Style that applies to many elements › Style that applies to only one element › Style that only applies in certain contexts

 Used to describe a style for a single, unique element  Defined with a “#” › What does that remind you of?  Most common use: page structure  HTML: id=“name”  CSS: [tag]#name [tag]

 What should your page look like?  Parts › Header  Book title › Body  Consistency › Footer  Name, date, close page

 Fixed width or window based  Organization › Tables › Divs  Key attribute is float

 Organizing a site › What should be on a page › How to navigate  Building navigation