end user computing more on html and css sujana jyothi department of computer science...
TRANSCRIPT
![Page 1: End User Computing More on HTML and CSS Sujana Jyothi Department of Computer Science sujana@cs.nuim.ie](https://reader030.vdocuments.mx/reader030/viewer/2022032612/56649eac5503460f94bb2bec/html5/thumbnails/1.jpg)
End User Computing
More on HTML and CSS
Sujana JyothiDepartment of Computer Science
![Page 2: End User Computing More on HTML and CSS Sujana Jyothi Department of Computer Science sujana@cs.nuim.ie](https://reader030.vdocuments.mx/reader030/viewer/2022032612/56649eac5503460f94bb2bec/html5/thumbnails/2.jpg)
Recap
•Monday 1st February 2010: Introduction to HTML
• Wednesday 3rd 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
![Page 3: End User Computing More on HTML and CSS Sujana Jyothi Department of Computer Science sujana@cs.nuim.ie](https://reader030.vdocuments.mx/reader030/viewer/2022032612/56649eac5503460f94bb2bec/html5/thumbnails/3.jpg)
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
![Page 4: End User Computing More on HTML and CSS Sujana Jyothi Department of Computer Science sujana@cs.nuim.ie](https://reader030.vdocuments.mx/reader030/viewer/2022032612/56649eac5503460f94bb2bec/html5/thumbnails/4.jpg)
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
![Page 5: End User Computing More on HTML and CSS Sujana Jyothi Department of Computer Science sujana@cs.nuim.ie](https://reader030.vdocuments.mx/reader030/viewer/2022032612/56649eac5503460f94bb2bec/html5/thumbnails/5.jpg)
Float Example
End User Computing
img{
float: right;margin: 20px 15px
15px 15px;}
Margin: T-R-B-L (trouble)
• Move an image to the right hand side of the page and have text displayed alongside: it.
Simple_html
![Page 6: End User Computing More on HTML and CSS Sujana Jyothi Department of Computer Science sujana@cs.nuim.ie](https://reader030.vdocuments.mx/reader030/viewer/2022032612/56649eac5503460f94bb2bec/html5/thumbnails/6.jpg)
Float Example
• Let us begin to build our page:• Put a background colour• Some more text• A list
• Start_example.html• Example.css
![Page 7: End User Computing More on HTML and CSS Sujana Jyothi Department of Computer Science sujana@cs.nuim.ie](https://reader030.vdocuments.mx/reader030/viewer/2022032612/56649eac5503460f94bb2bec/html5/thumbnails/7.jpg)
Menu Example
End User Computing
• A Menu is generally just a list of links
li{
margin: 0px 0px -5px -40px;padding: 4px 3px 4px 12px;width: 180px;color: #4169E1;list-style-type: none;
}
Margin: T-R-B-L (trouble)
![Page 8: End User Computing More on HTML and CSS Sujana Jyothi Department of Computer Science sujana@cs.nuim.ie](https://reader030.vdocuments.mx/reader030/viewer/2022032612/56649eac5503460f94bb2bec/html5/thumbnails/8.jpg)
Menu Example
End User Computing
• li{
display: block;margin: 0px 0px -5px -40px;padding: 4px 3px 4px 12px;width: 180px;color: #4169E1;border-bottom: 1px solid #efefef;list-style-type: none;
}
![Page 9: End User Computing More on HTML and CSS Sujana Jyothi Department of Computer Science sujana@cs.nuim.ie](https://reader030.vdocuments.mx/reader030/viewer/2022032612/56649eac5503460f94bb2bec/html5/thumbnails/9.jpg)
Dividing a page into sections
End User Computing
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.
![Page 10: End User Computing More on HTML and CSS Sujana Jyothi Department of Computer Science sujana@cs.nuim.ie](https://reader030.vdocuments.mx/reader030/viewer/2022032612/56649eac5503460f94bb2bec/html5/thumbnails/10.jpg)
![Page 11: End User Computing More on HTML and CSS Sujana Jyothi Department of Computer Science sujana@cs.nuim.ie](https://reader030.vdocuments.mx/reader030/viewer/2022032612/56649eac5503460f94bb2bec/html5/thumbnails/11.jpg)
Dividing a page into sections
End User Computing
Header
Footer
ContentLeft
Menu
Menu
![Page 12: End User Computing More on HTML and CSS Sujana Jyothi Department of Computer Science sujana@cs.nuim.ie](https://reader030.vdocuments.mx/reader030/viewer/2022032612/56649eac5503460f94bb2bec/html5/thumbnails/12.jpg)
In HTML
End User Computing
<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>
![Page 13: End User Computing More on HTML and CSS Sujana Jyothi Department of Computer Science sujana@cs.nuim.ie](https://reader030.vdocuments.mx/reader030/viewer/2022032612/56649eac5503460f94bb2bec/html5/thumbnails/13.jpg)
The “id”
End User Computing
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.
![Page 14: End User Computing More on HTML and CSS Sujana Jyothi Department of Computer Science sujana@cs.nuim.ie](https://reader030.vdocuments.mx/reader030/viewer/2022032612/56649eac5503460f94bb2bec/html5/thumbnails/14.jpg)
id Example
End User Computing
<p>This is a normal paragraph with normal text
</p><p id="LargeIntro">
This is a paragraph where the font size has been changed to a larger text.</p>
p{
font-size: 12px;}p#LargeIntro{
font-size: 24px;}
![Page 15: End User Computing More on HTML and CSS Sujana Jyothi Department of Computer Science sujana@cs.nuim.ie](https://reader030.vdocuments.mx/reader030/viewer/2022032612/56649eac5503460f94bb2bec/html5/thumbnails/15.jpg)
Develop a page from scratch: Part 1
End User Computing
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.
![Page 16: End User Computing More on HTML and CSS Sujana Jyothi Department of Computer Science sujana@cs.nuim.ie](https://reader030.vdocuments.mx/reader030/viewer/2022032612/56649eac5503460f94bb2bec/html5/thumbnails/16.jpg)
Dividing the site
End User Computing
Final_example.htmlexample.css
![Page 17: End User Computing More on HTML and CSS Sujana Jyothi Department of Computer Science sujana@cs.nuim.ie](https://reader030.vdocuments.mx/reader030/viewer/2022032612/56649eac5503460f94bb2bec/html5/thumbnails/17.jpg)
Dividing the site
End User Computing
Inside the <body> we will have the division:1) mainInside main we will have the divisions:
i) headerii) contentiii) menu
example.htmlexample.css
![Page 18: End User Computing More on HTML and CSS Sujana Jyothi Department of Computer Science sujana@cs.nuim.ie](https://reader030.vdocuments.mx/reader030/viewer/2022032612/56649eac5503460f94bb2bec/html5/thumbnails/18.jpg)
Final result
End User Computing
![Page 19: End User Computing More on HTML and CSS Sujana Jyothi Department of Computer Science sujana@cs.nuim.ie](https://reader030.vdocuments.mx/reader030/viewer/2022032612/56649eac5503460f94bb2bec/html5/thumbnails/19.jpg)
Recap
End User Computing -- 7th February 2008
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.