HTML CSS Basic Structure. HTML Structure [Source Code] CSS Structure [Cascading Styles] DIV or ID Tags and Classes. The BOX MODEL

Size: px

Start display at page:

Download "HTML CSS Basic Structure. HTML Structure [Source Code] CSS Structure [Cascading Styles] DIV or ID Tags and Classes. The BOX MODEL"

Holly Janel Norton
7 years ago
Views:

1 HTML CSS Basic Structure

2 HTML [Hypertext Markup Language] is the code read by a browser and defines the overall page structure. The HTML file or web page [.html] is made up of a head and a body. The head of the document contains the page title, meta tags, links to CSS, Javascript and other items referenced within the page. The body may be seen as the extents of the browser window itself and contains all of the elements that make up the contents of the page. head content title keywords description css favicon <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN xhtml1/dtd/xhtml1-transitional.dtd > <html xmlns= > <head> <meta http-equiv= Content-Type content= text/html; charset=utf-8 /> <title>box Model</title> <meta name= keywords content= Barbara Ambach, HTML Tutorials, CSS Tutorials, Digital Port folio Design, Web Design, Graphic Design, Architecture, College of Architecture and Planning, University of Colorado Denver /> <meta name= description content= Introductions to HTML, CSS, Dreamweaver, FTP and Flash Integration for students preparing Web-Based Portfolios in Architecture and Graphic Design /> <link href= main.css rel= stylesheet type= text/css /> <link rel= icon href= > </head> The HTML Structure is a series of nested elements similar to a Box of Chocolates. The box is the wrapper for all of the chocolates. Each chocolate has an individual container or div. Each div contains a series of elements and/ or classes, such as; milk or dark chocolate, filling, nuts and fruit. html body wrapper header main Nav left Sidebar main Content break bar footer <body> <div id= wrapper > <div id= header > <p>the header may contain text and images at the top of the page.</p> <div id= mainnav > <p>the mainnav includes primary links to other primary pages.</p> <div id= leftsidebar > <p>the leftsidebar may contain secondary navigation, images and text.</p> <div id= maincontent > <p>the maincontent may contain images, text and navigation.</p> <div id= breakbar > <p>the breakbar may be used to separate a series of floats from other inline content.</p> <div id= footer > <p>the footer may contain other navigation and copyright information.</p> </body> </html>

The body may be seen as the extents of the browser window itself and contains all of the elements that make up the contents of the page. head content title keywords description css favicon <!

3 CSS Structure [Cascading Style Sheet] CSS [Cascading Style Sheet] defines the look of the content within the HTML DIV Tags and Classes. The CSS is linked to the HTML file [Format - Attach Style Sheet - browse for.css UTF-8 ; /* CSS Document */ Commented Code /* Color values: #fff - white #333 - dark grey #666 - medium grey #999 - light grey #9CF - light blue #F06 - pink */ Commented code is grey and begins with a /* and ends with a */ A generic comment may be added or a rule may be temporarily commented-out so that it is not read or rendered by the browser. HTML Default Tag HTML Default Tag Resets DIV Tag begins with # body { margin: 0px; padding: 0px; text-align: center; background-color: #FFF; margin-top: 30px; h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, address, img { margin: 0px; padding: 0px; #wrapper { margin: 0 auto; padding: 0px; background-color: #fff; width: 960px; box-shadow: 3px 3px 3px #666; CSS Resets remove the HTML browser defaults for margins, padding and many other attributes that you may wish to have more control over by overwriting them with your own CSS Rules. These Resets avoid conflicts between the browser s default values and the CSS Rules you write. Class begins with. (period).copyright { font-family: Coda, sans-serif; font-size: 10px; color: #CCC; text-align: center;

css file] @charset UTF-8 ; /* CSS Document */ Commented Code /* Color values: #fff - white #333 - dark grey #666 - medium grey #999 - light grey #9CF - light blue #F06 - pink */ Commented code is

4 for DIV Tags and Classes are written in the CSS [Cascading Style Sheet]. DIV or ID Tags: A DIV or ID Tag will have a CSS Rule beginning with a #... i.e.: #wrapper, #header, #sidebar, #maincontent, #footer. Each DIV or ID may be used only once in the document and is used for primary structural elements [or DIVISIONS within the page]. Each DIV must be added to the page structure by INSERTING a DIV Tag in the appropriage place in the Source Code: At Insertion Point = wherever the cursor is placed within the source code... Wrap Around Selection = wraps the div around previously selected content in the source code... After Start of Tag = after the start tag of a previously placed div... <div>... </div After Tag = after the closing tag of a previously placed div... <div>... Classes: A Class will have a CSS Rule beginning with a. (period)... i.e.:.title,.img,.block, thumb, etc. etc. Each Class may be applied to multiple elements in the document to add more specific style attributes. They may be used to define the specific look of various types of text, colors, images, etc. within a div.

Each DIV must be added to the page structure by INSERTING a DIV Tag in the appropriage place in the Source Code: At Insertion Point = wherever the cursor is placed within the source code.

5 An element [div or class] may be given margins, padding and borders determining the amount of area it takes up on the page. All of these add to the overall pixel dimensions that the element will occupy. MARGIN - pushes the exterior edges of the box away from other elements. PADDING - pushes elements within a box away from its interior edges. ELEMENT CONTENTS BORDER - creates a line around edges of the box. 40 px 2 px 20 px 300px contents px px px margin border padding 424px padding border margin

MARGIN - pushes the exterior edges of the box away from other elements.

6 Elements may be added to the page with INLINE structure or with FLOATS. INLINE Elements are placed within normal document flow. This page structure maintains the vertical organization of elements as they are added to the page one after the other. FLOATED Elements are removed from normal document flow. This page structure allows elements to float above the page and, as a result, other elements move up to take the place of where they used to be. Floated elements may be placed next to one another horizontally. Elements may be floated left or right. Elements Floated left align to the furthest left position possible. Elements Floated right align to the furthest right position possible. Clearing Floats: A CSS Rule of clear: left; or clear: right; keeps the next element from floating on that side of a previously floated element. A CSS Rule of clear: both; returns the element back to normal document flow and pushes the next Element below the previously floated Elements. A Class of.clear with a CSS Rule of clear: both; may be added to an element to force no other elements to float next to it or below it.

This page structure allows elements to float above the page and, as a result, other elements move up to take the place of where they used to be.

Web Design Basics. Cindy Royal, Ph.D. Associate Professor Texas State University

Web Design Basics. Cindy Royal, Ph.D. Associate Professor Texas State University Web Design Basics Cindy Royal, Ph.D. Associate Professor Texas State University HTML and CSS HTML stands for Hypertext Markup Language. It is the main language of the Web. While there are other languages