More on HTML and CSS Sujana Jyothi Department

Recap • Monday 1 st February 2010: Introduction to HTML Wednesday 3 rd February

Positioning in CSS If you want a picture or a section to be on

Float Example Task: Move an image to the left of the page and have

Float Example Move an image to the right hand side of the page and

Float Example • Let us begin to build our page: • Put a background

Menu Example • A Menu is generally just a list of links li {

Menu Example • li { display: block; margin: 0 px -5 px -40 px;

Dividing a page into sections There are HTML tags called div's which are used

Dividing a page into sections Header Menu Left Content Menu Footer End User Computing

In HTML <div id="header"> <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src="i/nuim_crest. gif">. . . </div> <div id="content"> Hi I'm.

The “id” Sections of your webpage can be styled in CSS, this is done

id Example <p> This is a normal paragraph with normal text </p> <p id="Large.

Develop a page from scratch: Part 1 So now I'm going to show you

Dividing the site Final_example. html example. css End User Computing

Dividing the site Inside the <body> we will have the division: 1) main Inside

Recap Ok, so we've covered today some of the ways you can position things

Slides: 19

Download presentation

More on HTML and CSS Sujana Jyothi Department of Computer Science sujana@cs. nuim. ie End User Computing

Recap • Monday 1 st February 2010: Introduction to HTML Wednesday 3 rd February 2010: Introduction to simple styling using CSS • Today: Positioning objects in a webpage and how to divide a page into sections. • End User Computing

Positioning in CSS If you want a picture or a section to be on the left or right hand side of a page, you set it to “float” right (or left). • To further control positioning you can use “margins”. • • Let’s try an example End User Computing

Float Example Task: Move an image to the left of the page and have some text displayed alongside it. • img { float: left; } End User Computing

Float Example Move an image to the right hand side of the page and have text displayed alongside: it. img { float: right; margin: 20 px 15 px; } • Margin: Simple_html End User Computing T-R-B-L (trouble)

Float Example • Let us begin to build our page: • Put a background colour • Some more text • A list • • Start_example. html Example. css

Menu Example • A Menu is generally just a list of links li { margin: 0 px -5 px -40 px; padding: 4 px 3 px 4 px 12 px; width: 180 px; color: #4169 E 1; list-style-type: none; } Margin: End User Computing T-R-B-L (trouble)

Menu Example • li { display: block; margin: 0 px -5 px -40 px; padding: 4 px 3 px 4 px 12 px; width: 180 px; color: #4169 E 1; border-bottom: 1 px solid #efefef; list-style-type: none; } End User Computing

Dividing a page into sections There are HTML tags called div's which are used to divide a page into different sections: <div> <p> Example text </p> </div> This makes development go much faster and allows you to create a template of each webpage very easily. These div's can then be styled in CSS to be positioned in a certain area of the page or to have a certain width or height and so on. End User Computing

Dividing a page into sections Header Menu Left Content Menu Footer End User Computing

In HTML <div id="header"> <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src="i/nuim_crest. gif">. . . </div> <div id="content"> Hi I'm.

In HTML <div id="header"> <img src="i/nuim_crest. gif">. . . </div> <div id="content"> Hi I'm. . . </div> <div id="lefty"> <div id="menu"> <ol><li>Home</li>. . </ol> </div> Holography. . </div> <div id="footer"> Home. . . </div> End User Computing

The “id” Sections of your webpage can be styled in CSS, this is done using id's. Each section can reference an id which is styled in CSS but each id must be UNIQUE in the CSS. So for example you can style links in a menu with blue text, and links in the main content page with orange text. Or you can have a paragraph with normal sized text and a paragraph with large text. End User Computing

id Example <p> This is a normal paragraph with normal text </p> <p id="Large. Intro"> This is a paragraph where the font size has been changed to a larger text. </p> p { font-size: 12 px; } p#Large. Intro { font-size: 24 px; } End User Computing

Develop a page from scratch: Part 1 So now I'm going to show you how to develop a simple page from scratch using CSS and HTML. If at any stage you don't understand what I've done or want a more thorough explanation just stop me and ask. End User Computing

Dividing the site Final_example. html example. css End User Computing

Dividing the site Inside the <body> we will have the division: 1) main Inside main we will have the divisions: i) header ii) content iii) menu example. html example. css End User Computing

Final result End User Computing

Recap Ok, so we've covered today some of the ways you can position things with CSS (using floats/margins/padding). We've seen how a page can be broken down into sections using divisions This was a lot to cover in one lecture, on Monday we will be going through some more advanced CSS and using this we will finish off creating a homepage. End User Computing -- 7 th February 2008