Vendosja e Headers dhe Footers

Slides:



Advertisements
Similar presentations
HTML and CSS. HTML Hyper Text Markup Language Tells browser how to display text and images.
Advertisements

Advance CSS (Menu and Layout). CSS Navigation MENU.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
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.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
Murach's PHP and MySQL, C1© 2010, Mike Murach & Associates, Inc.Slide 1.
Web Standards XHTML and CSS. Today’s Show ► Discuss web standards ► XHTML ► Layout Without Tables ► CSS ► Why Web Standards?
Slide 1 CMPS 211 Internet Programming Spring 2008 Dynamic Effects with Styles Chapter 12 2/6/08.
Very quick intro HTML and CSS. Sample html A Web Title.
Web Development & Design Foundations with XHTML Chapter 7 Key Concepts.
Cascading Style Sheets By: Valerie Kuna. What are Cascading Style Sheets? Cascading Style Sheets (CSS) are a standard for specifying the presentation.
INTRODUCTORY Tutorial 7 Creating Liquid Layouts. XP Objectives Discern the differences among various types of layouts Create a liquid layout Create a.
Web Development & Design Foundations with XHTML Chapter 7 Key Concepts.
Advance CSS (Menu and Layout) Miftahul Huda. CSS Navigation MENU It's truly remarkable what can be achieved through CSS, especially with navigation menus.
CIS 1310 – HTML & CSS 6 Layout. CIS 1310 – HTML & CSS Learning Outcomes  Describe & Apply the CSS Box Model  Configure Float with CSS  Designate Positioning.
Diliev.com & pLOVEdiv.com  DIliev.com.
Class four: the box model and positioning. is an HTML tag which allows you to create an element out of inline text. It doesn’t mean anything! try it:
Unit 20 - Client Side Customisation of Web Pages
Murach’s ASP.NET 3.5/C#, C5© 2008, Mike Murach & Associates, Inc.Slide 1.
Lecture Cascading Style Sheets (CSS) Internal Style Sheets Classes.
CSS Tutorial 1 Introduction Syntax How to use style specifications. Styles.
Web Design I Spring 2009 Kevin Cole Gallaudet University
Course created by Sarah Phillips BBCD Melbourne BAPDCOM Version 1 – April 2013.
Web Development & Design Foundations with HTML5 7th Edition
Cascading Style Sheet (CSS) SAMPLE IT133 Pengembangan Web.
Week 5.  Normal document flow  Affecting document flow with float and position properties using CSS  Using these properties to create layouts.
1 Cascading Style Sheets
WebD Introduction to CSS By Manik Rastogi.
CSS.
Cascading Style Sheets (CSS) Internal Style Sheets Classes
IS1500: Introduction to Web Development
Introduction to CSS Layout
FMI-PLOVDIV Web Dynamic Applications
CCT260H - Christopher Evan Jones
( Cascading style sheet )
Google fonts CSS box model
Unit 3 - Review.
CSS Presentation and Positioning
What is CSS.
Creating Page Layouts with CSS
Why use Divs when Tables have been working?
Introduction to Web programming
Box model.
On a somewhat dreary day in October, Professor Dumbledore assigned young Harry Potter a new project.
>> CSS Layouts.
Web Development & Design Foundations with HTML5 7th Edition
Chapter 7 Page Layout Basics Key Concepts
Web Development & Design Foundations with HTML5 8th Edition
Web Development & Design Foundations with HTML5
Cascading Style Sheets
Chapter 6 More CSS Basics Key Concepts
Basics of Web Design Chapter 7 Page Layout Basics Key Concepts
Cascading Style Sheets
6 Layout.
Laying out a website using CSS and HTML
CSS Box Model.
December 1, 2017 Web Design.
Float Property Elements that seem to “float" on the right or left side of either the browser window or another element are often configured using.
Web Development & Design Foundations with HTML5
Nov. 1, 2018 Drop-down menu.
How to use the CSS box model for spacing, borders, and backgrounds
Create an Unordered List
Web Development & Design Foundations with HTML5
CSS and Class Tools.
Session 4: CSS Positioning
School of Business Administration
Web Client Side Technologies Raneem Qaddoura
CSc 337 Lecture 5: Grid layout.
Introduction to Cascading Style Sheets (CSS)
Kanida Sinmai CSS – Cascading Style Sheets Kanida Sinmai
Presentation transcript:

Vendosja e Headers dhe Footers TIK 12 – Prof. Blerand Koshi

Vendosja e Headers dhe Footers Shumica e webfaqeve kanë nga një Header dhe Footer Header - zakonisht përdoren për vendosjen e titullit të faqes apo menysë Footer - përdoret për dhënë informata shtesë si psh. Copyright 2016 Loyola

<!doctype html> <html> <head> <title>Two Column With Header and Footer</title> <link rel="stylesheet" type="text/css" href="final. css"> </head> <body> <div id="container"> <div id="header"> <h1>This is my site!</h1> </div> <!-- end header --> <div id="menu"> <ul> <li><a href="#">Home</a></li> <li><A href="#">Services</a></li> <li><a href="#">About Me</a></li> <li><a href="#">Contact Me</a></li> </ul> </div> <!-- end menu --> <div id="mainContainer"> <div id="content"> <h2>Here's some content</h2> <p>This is where a story would go</p> <h2>Here's more content</h2> <p>This is another story</p> </div> <!-- end content --> <div id="sidebar"> <h3>Menu</h3> <li>Menu item 1</li> <li>Menu item 2</li> <li>Menu item 3</li> </div> <!-- end sidebar --> <div id="footer"> <p>Copyright (c) 2012 Steve Suehring</p> </div> <!-- end footer --> </div> <!-- end mainContainer --> </div> <!-- end container --> </body> </html>

body { font-family: arial,helvetica,sans-serif; } #container { margin: 0 auto; width: 100%; #header { background-color: #abacab; padding: 10px; #menu { float: left; background-color: #0c0c0c; #menu ul li { list-style-type: none; display: inline; #menu li a { display: block; text-decoration: none; border-right: 2px solid #FFFFFF; padding: 3px 10px; color: #FFFFFF; #menu li a:hover { background-color: #CCCCCC; #mainContainer { #content { clear: left; width: 65%; padding: 20px 0; margin: 0 0 0 5%; #sidebar { float: right; width: 30%; margin: 0; #footer { text-align: center; padding: 20px; height: 1%;

? Pyetje