SlideShare a Scribd company logo
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

What's hot (20)

PPTX
How to using word press for web devlop part1 wp title
ponnuduraik
 
PDF
Drupal 7: Theming with Omega
Eric Sembrat
 
PPTX
Optimizing images in WordPress to improve site performance and sSEO
Steve Mortiboy
 
PPTX
Getting Started With WordPress Themes for Beginners
New Tricks
 
PPTX
Chapter 17: Responsive Web Design
Steve Guinan
 
PPT
Introduction to web sites design
Marwa Abdelgawad
 
PDF
Getting to know WordPress
Anthony Hortin
 
PPTX
Accessibility Hacks version 2
Graham Armfield
 
PPTX
Accessibility Hacks Wordcamp Manchester October 2018
Graham Armfield
 
PPT
Design selection demo.2
allisonbliss
 
PDF
Theme Wrangling 101
mikeyarce
 
PPTX
Atlanta Drupal User Group (ADUG)
Mediacurrent
 
PPTX
Build your WordPress page fast and clean
Eugene Cibankov
 
PDF
Adobe MAX 2008: HTML/CSS + Fireworks
Nathan Smith
 
PPTX
WordPress and Child Themes
nairobiwordcamp
 
KEY
Designing in the Browser - Mason Wendell, Drupaldelphia
canarymason
 
PPTX
Responsive Web Design - NYC Webgrrls
Amelie Walker-Yung
 
PDF
Getting started with dev tools (4/10/17 DC)
Daniel Friedman
 
PDF
The Genesis Framework: Hooks & Filters for Theme Development
Sarah Moyer
 
How to using word press for web devlop part1 wp title
ponnuduraik
 
Drupal 7: Theming with Omega
Eric Sembrat
 
Optimizing images in WordPress to improve site performance and sSEO
Steve Mortiboy
 
Getting Started With WordPress Themes for Beginners
New Tricks
 
Chapter 17: Responsive Web Design
Steve Guinan
 
Introduction to web sites design
Marwa Abdelgawad
 
Getting to know WordPress
Anthony Hortin
 
Accessibility Hacks version 2
Graham Armfield
 
Accessibility Hacks Wordcamp Manchester October 2018
Graham Armfield
 
Design selection demo.2
allisonbliss
 
Theme Wrangling 101
mikeyarce
 
Atlanta Drupal User Group (ADUG)
Mediacurrent
 
Build your WordPress page fast and clean
Eugene Cibankov
 
Adobe MAX 2008: HTML/CSS + Fireworks
Nathan Smith
 
WordPress and Child Themes
nairobiwordcamp
 
Designing in the Browser - Mason Wendell, Drupaldelphia
canarymason
 
Responsive Web Design - NYC Webgrrls
Amelie Walker-Yung
 
Getting started with dev tools (4/10/17 DC)
Daniel Friedman
 
The Genesis Framework: Hooks & Filters for Theme Development
Sarah Moyer
 

Viewers also liked (15)

PPTX
Treinamento html5, css e java script apresentado na HP
Rodrigo Urubatan
 
PDF
Html5 & CSS overview
Ivan Frantar
 
PPTX
Aside, within HTML5 + CSS
GooseAndSqurirrel
 
PPTX
[JavaLand 2015] Developing JavaScript Mobile Apps Using Apache Cordova
Hazem Saleh
 
PPTX
Html5 & less css
Graham Johnson
 
PDF
Angular js
Knoldus Inc.
 
PDF
Apps with Apache Cordova and Phonegap
Christian Grobmeier
 
PDF
Cordova + Ionic + MobileFirst
Raymond Camden
 
PPTX
Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)
Ryan Cuprak
 
PDF
Hybrid Apps with Angular & Ionic Framework
Cihad Horuzoğlu
 
PPTX
Introduction to Apache Cordova (Phonegap)
ejlp12
 
PDF
Ionic framework one day training
Troy Miles
 
PDF
Cross Platform Mobile Apps with the Ionic Framework
Troy Miles
 
PDF
Building Mobile Applications with Ionic
Morris Singer
 
Treinamento html5, css e java script apresentado na HP
Rodrigo Urubatan
 
Html5 & CSS overview
Ivan Frantar
 
Aside, within HTML5 + CSS
GooseAndSqurirrel
 
[JavaLand 2015] Developing JavaScript Mobile Apps Using Apache Cordova
Hazem Saleh
 
Html5 & less css
Graham Johnson
 
Angular js
Knoldus Inc.
 
Apps with Apache Cordova and Phonegap
Christian Grobmeier
 
Cordova + Ionic + MobileFirst
Raymond Camden
 
Hybrid Mobile Development with Apache Cordova and Java EE 7 (JavaOne 2014)
Ryan Cuprak
 
Hybrid Apps with Angular & Ionic Framework
Cihad Horuzoğlu
 
Introduction to Apache Cordova (Phonegap)
ejlp12
 
Ionic framework one day training
Troy Miles
 
Cross Platform Mobile Apps with the Ionic Framework
Troy Miles
 
Building Mobile Applications with Ionic
Morris Singer
 
Ad

Similar to Steph's Html5 and css presentation (20)

PPT
Html 5 and CSS - Image Element
Kempy7000
 
PPTX
Lecture 5 & 6 Advance CSS.pptx for web
ZahraWaheed9
 
PDF
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Erin M. Kidwell
 
PPTX
Castro Chapter 11
Jeff Byrnes
 
PPTX
css3.pptx
ThiyaguPappu
 
DOCX
ARTICULOENINGLES
Mónica Sánchez Crisostomo
 
PDF
Intro to html, css & sass
Sean Wolfe
 
PDF
Presenter manual web designing (specially for summer interns)
XPERT INFOTECH
 
PDF
Introduction to Frontend Development - Session 2 - CSS Fundamentals
Kalin Chernev
 
PDF
Code & Design Your First Website (Downtown Los Angeles)
Thinkful
 
PPTX
Designing web page marquee and img tag
Jesus Obenita Jr.
 
PPTX
MTA css flow, positioning, and styling
Dhairya Joshi
 
PPTX
Advanced CSS.pptx
DiyonaVas
 
PPTX
HTML5 - Insert images and Apply page backgrounds
Grayzon Gonzales, LPT
 
PDF
Organize Your Website With Advanced CSS Tricks
Andolasoft Inc
 
PDF
Code &amp; design your first website (3:16)
Thinkful
 
PDF
Chapter 2.pdf
AnisZahirahAzman
 
PDF
Web Development 4
ghayour abbas
 
PDF
Web Development 4 (HTML & CSS)
ghayour abbas
 
Html 5 and CSS - Image Element
Kempy7000
 
Lecture 5 & 6 Advance CSS.pptx for web
ZahraWaheed9
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Erin M. Kidwell
 
Castro Chapter 11
Jeff Byrnes
 
css3.pptx
ThiyaguPappu
 
ARTICULOENINGLES
Mónica Sánchez Crisostomo
 
Intro to html, css & sass
Sean Wolfe
 
Presenter manual web designing (specially for summer interns)
XPERT INFOTECH
 
Introduction to Frontend Development - Session 2 - CSS Fundamentals
Kalin Chernev
 
Code & Design Your First Website (Downtown Los Angeles)
Thinkful
 
Designing web page marquee and img tag
Jesus Obenita Jr.
 
MTA css flow, positioning, and styling
Dhairya Joshi
 
Advanced CSS.pptx
DiyonaVas
 
HTML5 - Insert images and Apply page backgrounds
Grayzon Gonzales, LPT
 
Organize Your Website With Advanced CSS Tricks
Andolasoft Inc
 
Code &amp; design your first website (3:16)
Thinkful
 
Chapter 2.pdf
AnisZahirahAzman
 
Web Development 4
ghayour abbas
 
Web Development 4 (HTML & CSS)
ghayour abbas
 
Ad

Recently uploaded (20)

PPTX
How to Setup Automatic Reordering Rule in Odoo 18 Inventory
Celine George
 
PDF
Supply Chain Security A Comprehensive Approach 1st Edition Arthur G. Arway
rxgnika452
 
PDF
Learning Styles Inventory for Senior High School Students
Thelma Villaflores
 
PDF
Gladiolous Cultivation practices by AKL.pdf
kushallamichhame
 
PPTX
Comparing Translational and Rotational Motion.pptx
AngeliqueTolentinoDe
 
PDF
Rapid Mathematics Assessment Score sheet for all Grade levels
DessaCletSantos
 
PPTX
How Physics Enhances Our Quality of Life.pptx
AngeliqueTolentinoDe
 
DOCX
Lesson 1 - Nature and Inquiry of Research
marvinnbustamante1
 
PDF
Indian National movement PPT by Simanchala Sarab, Covering The INC(Formation,...
Simanchala Sarab, BABed(ITEP Secondary stage) in History student at GNDU Amritsar
 
PDF
Lesson 1 - Nature of Inquiry and Research.pdf
marvinnbustamante1
 
PPTX
How to Manage Wins & Losses in Odoo 18 CRM
Celine George
 
PDF
Our Guide to the July 2025 USPS® Rate Change
Postal Advocate Inc.
 
PPTX
How to Create & Manage Stages in Odoo 18 Helpdesk
Celine George
 
PDF
Wikinomics How Mass Collaboration Changes Everything Don Tapscott
wcsqyzf5909
 
PDF
CAD25 Gbadago and Fafa Presentation Revised-Aston Business School, UK.pdf
Kweku Zurek
 
PPTX
Iván Bornacelly - Presentation of the report - Empowering the workforce in th...
EduSkills OECD
 
PPTX
Urban Hierarchy and Service Provisions.pptx
Islamic University of Bangladesh
 
PPTX
The Gift of the Magi by O Henry-A Story of True Love, Sacrifice, and Selfless...
Beena E S
 
PPTX
week 1-2.pptx yueojerjdeiwmwjsweuwikwswiewjrwiwkw
rebznelz
 
PDF
Genomics Proteomics and Vaccines 1st Edition Guido Grandi (Editor)
kboqcyuw976
 
How to Setup Automatic Reordering Rule in Odoo 18 Inventory
Celine George
 
Supply Chain Security A Comprehensive Approach 1st Edition Arthur G. Arway
rxgnika452
 
Learning Styles Inventory for Senior High School Students
Thelma Villaflores
 
Gladiolous Cultivation practices by AKL.pdf
kushallamichhame
 
Comparing Translational and Rotational Motion.pptx
AngeliqueTolentinoDe
 
Rapid Mathematics Assessment Score sheet for all Grade levels
DessaCletSantos
 
How Physics Enhances Our Quality of Life.pptx
AngeliqueTolentinoDe
 
Lesson 1 - Nature and Inquiry of Research
marvinnbustamante1
 
Indian National movement PPT by Simanchala Sarab, Covering The INC(Formation,...
Simanchala Sarab, BABed(ITEP Secondary stage) in History student at GNDU Amritsar
 
Lesson 1 - Nature of Inquiry and Research.pdf
marvinnbustamante1
 
How to Manage Wins & Losses in Odoo 18 CRM
Celine George
 
Our Guide to the July 2025 USPS® Rate Change
Postal Advocate Inc.
 
How to Create & Manage Stages in Odoo 18 Helpdesk
Celine George
 
Wikinomics How Mass Collaboration Changes Everything Don Tapscott
wcsqyzf5909
 
CAD25 Gbadago and Fafa Presentation Revised-Aston Business School, UK.pdf
Kweku Zurek
 
Iván Bornacelly - Presentation of the report - Empowering the workforce in th...
EduSkills OECD
 
Urban Hierarchy and Service Provisions.pptx
Islamic University of Bangladesh
 
The Gift of the Magi by O Henry-A Story of True Love, Sacrifice, and Selfless...
Beena E S
 
week 1-2.pptx yueojerjdeiwmwjsweuwikwswiewjrwiwkw
rebznelz
 
Genomics Proteomics and Vaccines 1st Edition Guido Grandi (Editor)
kboqcyuw976
 

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.