SlideShare a Scribd company logo

Steph's Html5 and css presentation

•
•
S
stephy123123

This presentation discusses using CSS to style HTML elements on a webpage. It focuses on positioning and styling an image. Specifically, it demonstrates how to add a border around an image, change the image size, position the image using static, relative, fixed and absolute positioning, float images left and right, and group images using the HTML <div> tag. It also mentions testing the CSS styling in Google Chrome and Internet Explorer browsers.

Related slideshows

How to using word press for web devlop part1 wp title
How to using word press for web devlop part1 wp titleHow to using word press for web devlop part1 wp title
How to using word press for web devlop part1 wp title
 
Drupal 7: Theming with Omega
Drupal 7: Theming with OmegaDrupal 7: Theming with Omega
Drupal 7: Theming with Omega
 
Optimizing images in WordPress to improve site performance and sSEO
Optimizing images in WordPress to improve site performance and sSEOOptimizing images in WordPress to improve site performance and sSEO
Optimizing images in WordPress to improve site performance and sSEO
 
1 of 36
By Stephanie Huynh
Why have I created this presentation? • For my web design class assignment based on what the class has focused on for the past few weeks which are: ~HTTP5 (Hyper Text Transfer Protocol) ~HTML (Hyper Text Mark up Language) ~Cascade Style Sheet (CSS)
What is my chosen element?
• To make a difference to your webpage you design. • Changes the audience’s view of Why would you web pages. need to use this • Is creative type of element?
Which internet browsers support the type of code we use? • Google Chrome • Internet Explorer • Firefox • Opera • Safari HINT - Google Chrome is the recommended internet browser to use to show CSS at its best potential
How to begin using HTTP/HTML • You will first have to use a program to build your webpage. • For starters you can use the program notepad. • I prefer using a program called Notepad++ which is a free program downloadable from the internet.
How to begin using CSS • This is a screenshot of my webpage html using notepad++. • To start using my CSS, I created a external CSS page and had to link it with my HTML page as seen on the screenshot.
• To begin demonstrating my element I will first have to import a image onto my webpage. I have chosen this image to focus on in my example.
• Here is a screenshot on how I have imported a image into my html code. I have used <img src=“image name”.image type”/> HINT: Ensure your image is saved in the same folder/area as where your html and CSS code is saved. In this example my image name is “Picture1” and the file type was “jpeg”
• This is what my webpage looks like so far.
• The amazing idea about CSS is that you can customise what a image can appear as or positioned on your webpage.
Border • My first creative CSS feature I would like to demonstrate is to create a border surrounding your selected image.
• The code displayed above in my CSS file, creates a black border 5 pixels thick. The code is; img {border : pixel size solid;}
Borders • You can create different coloured borders for your image with the code used in the previous slide but with a little extra code to add. The code is; img {border : pixel size solid colour;} EG - img {border : 5px solid blue;}
• Next CSS feature I will demonstrate is to edit the size of the image displayed on my webpage. The code is; Width: Size in pixels Height: Size in pixels
• This is how my webpage is displayed so far with the following features on CSS; ~A border ~The change of size of the image
Positioning CSS • The next CSS feature I will introduce and demonstrate is to have the ability to position your image in a certain way on your webpage. There are certain element positioning techniques available with the following codes; ~Static ~Absolute ~Fixed ~Relative
Static positioning • This is the default setting for every page element. Each element that can be used all have the same default setting as ‘Static’ positioning. • The only reason why you would set an element to position: static is to forcefully remove some positioning that got applied to an element outside of your control.
Static positioning screenshot Also known as the default setting for all elements.
Relative positioning • If you set a element to relative position without other positioning attributes (top, bottom, left or right) there will be no difference than the static positioning. • If a positioning attribute e.g top100px is used than it will shift your element 100pixels down from where it is normally placed rather than 100 pixels above the normal position the element is placed.
Relative positioning screenshot
Fixed positioning • This type of positioning is used rarely but is also useful. • It is relative positioned in a browser. • The special feature of this positioning, is that it will not move even if the window is scrolled.
With the two screenshots demonstrates the positioning set to fixed. As I scrolled to the bottom of my webpage the image stayed in the same exact position.
Absolute positioning • This is the best positioning option because this technique allows users to place an element exactly where you want it to be placed. • Using the positioning attributes top, bottom, left and right to set the position. • Setting the position attribute using pixels on the webpage. (E.g Top:100px;)
• As I said before, setting your element to absolute, is the most ideal positioning as you can position your element exactly where you prefer. As seen on my screenshot I was able to position my element in the center of my webpage.
REMINDER - Web Browser differences • As discussed before on a previous slide, different web browsers may affect some features offered for your element and CSS designs, such as my CSS demonstrations. • I recommend using Google Chrome to ensure you are able to sight all features at it’s best quality.
Floating • Elements are floated horizontally meaning left and right. (NOT up and down) • A floated element will move as far either left or right depending where you set it. • Other elements used will flow around the floating element.
Floating • Here are two screenshots of a image floating to ABOVE – Image is floating to the right. the right and another floating to the left. ABOVE – Image is floating to the left.
• Below is a screenshot of several extra images uploaded onto my webpage and are all set on floating to the right.
• Than we can use a HTML div tag.
HTML Div tag • Div tags can be viewed as containers as they group certain elements of a web page together. • E.G – If I wanted to upload multiple images, and each image has different border settings, image size etc.
The image below is a screenshot of me using a div class for two images and also the floating element. One image is floating on the left and the other image floating on the right. The next slide will have valid code to make your web page like the above image.
• Here is the code I used to have my webpage displayed like the previous slide screen shot.
Testing • I have tested my HTML/CSS element on two popular web browsers. • Google Chrome – worked successfully • Internet Explorer – worked successfully
What we have demonstrated in this presentation • We have learnt how to begin our HTML5 Page and connecting a CSS page. • We have shown you different web browsers you can choose to use. • How to import a image into your web page. • How to put a border around your image and select the colour of the border. • How to change the size of your image using pixels. • The different types of positioning for elements. • How to make your element float to the left or right. • What the div tag can do • A result of my testing on two different web browsers.
By Stephanie Huynh

More Related Content

Steph's Html5 and css presentation

  • 2. Why have I created this presentation? • For my web design class assignment based on what the class has focused on for the past few weeks which are: ~HTTP5 (Hyper Text Transfer Protocol) ~HTML (Hyper Text Mark up Language) ~Cascade Style Sheet (CSS)
  • 3. What is my chosen element?
  • 4. • To make a difference to your webpage you design. • Changes the audience’s view of Why would you web pages. need to use this • Is creative type of element?
  • 5. Which internet browsers support the type of code we use? • Google Chrome • Internet Explorer • Firefox • Opera • Safari HINT - Google Chrome is the recommended internet browser to use to show CSS at its best potential
  • 6. How to begin using HTTP/HTML • You will first have to use a program to build your webpage. • For starters you can use the program notepad. • I prefer using a program called Notepad++ which is a free program downloadable from the internet.
  • 7. How to begin using CSS • This is a screenshot of my webpage html using notepad++. • To start using my CSS, I created a external CSS page and had to link it with my HTML page as seen on the screenshot.
  • 8. • To begin demonstrating my element I will first have to import a image onto my webpage. I have chosen this image to focus on in my example.
  • 9. • Here is a screenshot on how I have imported a image into my html code. I have used <img src=“image name”.image type”/> HINT: Ensure your image is saved in the same folder/area as where your html and CSS code is saved. In this example my image name is “Picture1” and the file type was “jpeg”
  • 10. • This is what my webpage looks like so far.
  • 11. • The amazing idea about CSS is that you can customise what a image can appear as or positioned on your webpage.
  • 12. Border • My first creative CSS feature I would like to demonstrate is to create a border surrounding your selected image.
  • 13. • The code displayed above in my CSS file, creates a black border 5 pixels thick. The code is; img {border : pixel size solid;}
  • 14. Borders • You can create different coloured borders for your image with the code used in the previous slide but with a little extra code to add. The code is; img {border : pixel size solid colour;} EG - img {border : 5px solid blue;}
  • 15. • Next CSS feature I will demonstrate is to edit the size of the image displayed on my webpage. The code is; Width: Size in pixels Height: Size in pixels
  • 16. • This is how my webpage is displayed so far with the following features on CSS; ~A border ~The change of size of the image
  • 17. Positioning CSS • The next CSS feature I will introduce and demonstrate is to have the ability to position your image in a certain way on your webpage. There are certain element positioning techniques available with the following codes; ~Static ~Absolute ~Fixed ~Relative
  • 18. Static positioning • This is the default setting for every page element. Each element that can be used all have the same default setting as ‘Static’ positioning. • The only reason why you would set an element to position: static is to forcefully remove some positioning that got applied to an element outside of your control.
  • 19. Static positioning screenshot Also known as the default setting for all elements.
  • 20. Relative positioning • If you set a element to relative position without other positioning attributes (top, bottom, left or right) there will be no difference than the static positioning. • If a positioning attribute e.g top100px is used than it will shift your element 100pixels down from where it is normally placed rather than 100 pixels above the normal position the element is placed.
  • 22. Fixed positioning • This type of positioning is used rarely but is also useful. • It is relative positioned in a browser. • The special feature of this positioning, is that it will not move even if the window is scrolled.
  • 23. With the two screenshots demonstrates the positioning set to fixed. As I scrolled to the bottom of my webpage the image stayed in the same exact position.
  • 24. Absolute positioning • This is the best positioning option because this technique allows users to place an element exactly where you want it to be placed. • Using the positioning attributes top, bottom, left and right to set the position. • Setting the position attribute using pixels on the webpage. (E.g Top:100px;)
  • 25. • As I said before, setting your element to absolute, is the most ideal positioning as you can position your element exactly where you prefer. As seen on my screenshot I was able to position my element in the center of my webpage.
  • 26. REMINDER - Web Browser differences • As discussed before on a previous slide, different web browsers may affect some features offered for your element and CSS designs, such as my CSS demonstrations. • I recommend using Google Chrome to ensure you are able to sight all features at it’s best quality.
  • 27. Floating • Elements are floated horizontally meaning left and right. (NOT up and down) • A floated element will move as far either left or right depending where you set it. • Other elements used will flow around the floating element.
  • 28. Floating • Here are two screenshots of a image floating to ABOVE – Image is floating to the right. the right and another floating to the left. ABOVE – Image is floating to the left.
  • 29. • Below is a screenshot of several extra images uploaded onto my webpage and are all set on floating to the right.
  • 30. • Than we can use a HTML div tag.
  • 31. HTML Div tag • Div tags can be viewed as containers as they group certain elements of a web page together. • E.G – If I wanted to upload multiple images, and each image has different border settings, image size etc.
  • 32. The image below is a screenshot of me using a div class for two images and also the floating element. One image is floating on the left and the other image floating on the right. The next slide will have valid code to make your web page like the above image.
  • 33. • Here is the code I used to have my webpage displayed like the previous slide screen shot.
  • 34. Testing • I have tested my HTML/CSS element on two popular web browsers. • Google Chrome – worked successfully • Internet Explorer – worked successfully
  • 35. What we have demonstrated in this presentation • We have learnt how to begin our HTML5 Page and connecting a CSS page. • We have shown you different web browsers you can choose to use. • How to import a image into your web page. • How to put a border around your image and select the colour of the border. • How to change the size of your image using pixels. • The different types of positioning for elements. • How to make your element float to the left or right. • What the div tag can do • A result of my testing on two different web browsers.