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)

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
ponnuduraik
 
Drupal 7: Theming with Omega
Drupal 7: Theming with OmegaDrupal 7: Theming with Omega
Drupal 7: Theming with Omega
Eric Sembrat
 
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
Steve Mortiboy
 
Getting Started With WordPress Themes for Beginners
Getting Started With WordPress Themes for BeginnersGetting Started With WordPress Themes for Beginners
Getting Started With WordPress Themes for Beginners
New Tricks
 
Chapter 17: Responsive Web Design
Chapter 17: Responsive Web DesignChapter 17: Responsive Web Design
Chapter 17: Responsive Web Design
Steve Guinan
 
Introduction to web sites design
Introduction to  web sites designIntroduction to  web sites design
Introduction to web sites design
Marwa Abdelgawad
 
Getting to know WordPress
Getting to know WordPressGetting to know WordPress
Getting to know WordPress
Anthony Hortin
 
Accessibility Hacks version 2
Accessibility Hacks version 2Accessibility Hacks version 2
Accessibility Hacks version 2
Graham Armfield
 
Accessibility Hacks Wordcamp Manchester October 2018
Accessibility Hacks Wordcamp Manchester October 2018Accessibility Hacks Wordcamp Manchester October 2018
Accessibility Hacks Wordcamp Manchester October 2018
Graham Armfield
 
Design selection demo.2
Design selection demo.2Design selection demo.2
Design selection demo.2
allisonbliss
 
Theme Wrangling 101
Theme Wrangling 101Theme Wrangling 101
Theme Wrangling 101
mikeyarce
 
Atlanta Drupal User Group (ADUG)
Atlanta Drupal User Group (ADUG) Atlanta Drupal User Group (ADUG)
Atlanta Drupal User Group (ADUG)
Mediacurrent
 
E commerce-website
E commerce-websiteE commerce-website
E commerce-website
متواضع ولكن وربي ربشه
 
Build your WordPress page fast and clean
Build your WordPress page fast and cleanBuild your WordPress page fast and clean
Build your WordPress page fast and clean
Eugene Cibankov
 
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksAdobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + Fireworks
Nathan Smith
 
WordPress and Child Themes
WordPress and Child ThemesWordPress and Child Themes
WordPress and Child Themes
nairobiwordcamp
 
Designing in the Browser - Mason Wendell, Drupaldelphia
Designing in the Browser - Mason Wendell, DrupaldelphiaDesigning in the Browser - Mason Wendell, Drupaldelphia
Designing in the Browser - Mason Wendell, Drupaldelphia
canarymason
 
Responsive Web Design - NYC Webgrrls
Responsive Web Design - NYC WebgrrlsResponsive Web Design - NYC Webgrrls
Responsive Web Design - NYC Webgrrls
Amelie Walker-Yung
 
Getting started with dev tools (4/10/17 DC)
Getting started with dev tools (4/10/17 DC)Getting started with dev tools (4/10/17 DC)
Getting started with dev tools (4/10/17 DC)
Daniel Friedman
 
The Genesis Framework: Hooks & Filters for Theme Development
The Genesis Framework: Hooks & Filters for Theme DevelopmentThe Genesis Framework: Hooks & Filters for Theme Development
The Genesis Framework: Hooks & Filters for Theme Development
Sarah Moyer
 
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
ponnuduraik
 
Drupal 7: Theming with Omega
Drupal 7: Theming with OmegaDrupal 7: Theming with Omega
Drupal 7: Theming with Omega
Eric Sembrat
 
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
Steve Mortiboy
 
Getting Started With WordPress Themes for Beginners
Getting Started With WordPress Themes for BeginnersGetting Started With WordPress Themes for Beginners
Getting Started With WordPress Themes for Beginners
New Tricks
 
Chapter 17: Responsive Web Design
Chapter 17: Responsive Web DesignChapter 17: Responsive Web Design
Chapter 17: Responsive Web Design
Steve Guinan
 
Introduction to web sites design
Introduction to  web sites designIntroduction to  web sites design
Introduction to web sites design
Marwa Abdelgawad
 
Getting to know WordPress
Getting to know WordPressGetting to know WordPress
Getting to know WordPress
Anthony Hortin
 
Accessibility Hacks version 2
Accessibility Hacks version 2Accessibility Hacks version 2
Accessibility Hacks version 2
Graham Armfield
 
Accessibility Hacks Wordcamp Manchester October 2018
Accessibility Hacks Wordcamp Manchester October 2018Accessibility Hacks Wordcamp Manchester October 2018
Accessibility Hacks Wordcamp Manchester October 2018
Graham Armfield
 
Design selection demo.2
Design selection demo.2Design selection demo.2
Design selection demo.2
allisonbliss
 
Theme Wrangling 101
Theme Wrangling 101Theme Wrangling 101
Theme Wrangling 101
mikeyarce
 
Atlanta Drupal User Group (ADUG)
Atlanta Drupal User Group (ADUG) Atlanta Drupal User Group (ADUG)
Atlanta Drupal User Group (ADUG)
Mediacurrent
 
Build your WordPress page fast and clean
Build your WordPress page fast and cleanBuild your WordPress page fast and clean
Build your WordPress page fast and clean
Eugene Cibankov
 
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksAdobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + Fireworks
Nathan Smith
 
WordPress and Child Themes
WordPress and Child ThemesWordPress and Child Themes
WordPress and Child Themes
nairobiwordcamp
 
Designing in the Browser - Mason Wendell, Drupaldelphia
Designing in the Browser - Mason Wendell, DrupaldelphiaDesigning in the Browser - Mason Wendell, Drupaldelphia
Designing in the Browser - Mason Wendell, Drupaldelphia
canarymason
 
Responsive Web Design - NYC Webgrrls
Responsive Web Design - NYC WebgrrlsResponsive Web Design - NYC Webgrrls
Responsive Web Design - NYC Webgrrls
Amelie Walker-Yung
 
Getting started with dev tools (4/10/17 DC)
Getting started with dev tools (4/10/17 DC)Getting started with dev tools (4/10/17 DC)
Getting started with dev tools (4/10/17 DC)
Daniel Friedman
 
The Genesis Framework: Hooks & Filters for Theme Development
The Genesis Framework: Hooks & Filters for Theme DevelopmentThe Genesis Framework: Hooks & Filters for Theme Development
The Genesis Framework: Hooks & Filters for Theme Development
Sarah Moyer
 

Viewers also liked (15)

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

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

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

Recently uploaded (20)

Forestry Model Exit Exam_2025_Wollega University, Gimbi Campus.pdf
Forestry Model Exit Exam_2025_Wollega University, Gimbi Campus.pdfForestry Model Exit Exam_2025_Wollega University, Gimbi Campus.pdf
Forestry Model Exit Exam_2025_Wollega University, Gimbi Campus.pdf
ChalaKelbessa
 
How to Setup Lunch in Odoo 18 - Odoo guides
How to Setup Lunch in Odoo 18 - Odoo guidesHow to Setup Lunch in Odoo 18 - Odoo guides
How to Setup Lunch in Odoo 18 - Odoo guides
Celine George
 
0b - THE ROMANTIC ERA: FEELINGS AND IDENTITY.pptx
0b - THE ROMANTIC ERA: FEELINGS AND IDENTITY.pptx0b - THE ROMANTIC ERA: FEELINGS AND IDENTITY.pptx
0b - THE ROMANTIC ERA: FEELINGS AND IDENTITY.pptx
Julián Jesús Pérez Fernández
 
STUDENT LOAN TRUST FUND DEFAULTERS GHANA
STUDENT LOAN TRUST FUND DEFAULTERS GHANASTUDENT LOAN TRUST FUND DEFAULTERS GHANA
STUDENT LOAN TRUST FUND DEFAULTERS GHANA
Kweku Zurek
 
A Brief Introduction About Jack Lutkus
A Brief Introduction About  Jack  LutkusA Brief Introduction About  Jack  Lutkus
A Brief Introduction About Jack Lutkus
Jack Lutkus
 
How to Use Owl Slots in Odoo 17 - Odoo Slides
How to Use Owl Slots in Odoo 17 - Odoo SlidesHow to Use Owl Slots in Odoo 17 - Odoo Slides
How to Use Owl Slots in Odoo 17 - Odoo Slides
Celine George
 
State institute of educational technology
State institute of educational technologyState institute of educational technology
State institute of educational technology
vp5806484
 
Pragya Champion's Chalice 2025 Set , General Quiz
Pragya Champion's Chalice 2025 Set , General QuizPragya Champion's Chalice 2025 Set , General Quiz
Pragya Champion's Chalice 2025 Set , General Quiz
Pragya - UEM Kolkata Quiz Club
 
YSPH VMOC Special Report - Measles Outbreak Southwest US 5-30-2025.pptx
YSPH VMOC Special Report - Measles Outbreak  Southwest US 5-30-2025.pptxYSPH VMOC Special Report - Measles Outbreak  Southwest US 5-30-2025.pptx
YSPH VMOC Special Report - Measles Outbreak Southwest US 5-30-2025.pptx
Yale School of Public Health - The Virtual Medical Operations Center (VMOC)
 
Types of Actions in Odoo 18 - Odoo Slides
Types of Actions in Odoo 18 - Odoo SlidesTypes of Actions in Odoo 18 - Odoo Slides
Types of Actions in Odoo 18 - Odoo Slides
Celine George
 
Coleoptera: The Largest Insect Order.pptx
Coleoptera: The Largest Insect Order.pptxColeoptera: The Largest Insect Order.pptx
Coleoptera: The Largest Insect Order.pptx
Arshad Shaikh
 
PHYSIOLOGY & SPORTS INJURY by Diwakar Sir
PHYSIOLOGY & SPORTS INJURY by Diwakar SirPHYSIOLOGY & SPORTS INJURY by Diwakar Sir
PHYSIOLOGY & SPORTS INJURY by Diwakar Sir
Diwakar Kashyap
 
Multicultural approach in education - B.Ed
Multicultural approach in education - B.EdMulticultural approach in education - B.Ed
Multicultural approach in education - B.Ed
prathimagowda443
 
POS Reporting in Odoo 18 - Odoo 18 Slides
POS Reporting in Odoo 18 - Odoo 18 SlidesPOS Reporting in Odoo 18 - Odoo 18 Slides
POS Reporting in Odoo 18 - Odoo 18 Slides
Celine George
 
How to Setup Renewal of Subscription in Odoo 18
How to Setup Renewal of Subscription in Odoo 18How to Setup Renewal of Subscription in Odoo 18
How to Setup Renewal of Subscription in Odoo 18
Celine George
 
Writing Research Papers: Guidance for Research Community
Writing Research Papers: Guidance for Research CommunityWriting Research Papers: Guidance for Research Community
Writing Research Papers: Guidance for Research Community
Rishi Bankim Chandra Evening College, Naihati, North 24 Parganas, West Bengal, India
 
Introduction to Online CME for Nurse Practitioners.pdf
Introduction to Online CME for Nurse Practitioners.pdfIntroduction to Online CME for Nurse Practitioners.pdf
Introduction to Online CME for Nurse Practitioners.pdf
CME4Life
 
Active Surveillance For Localized Prostate Cancer A New Paradigm For Clinical...
Active Surveillance For Localized Prostate Cancer A New Paradigm For Clinical...Active Surveillance For Localized Prostate Cancer A New Paradigm For Clinical...
Active Surveillance For Localized Prostate Cancer A New Paradigm For Clinical...
wygalkelceqg
 
How to Manage Orders in Odoo 18 Lunch - Odoo Slides
How to Manage Orders in Odoo 18 Lunch - Odoo SlidesHow to Manage Orders in Odoo 18 Lunch - Odoo Slides
How to Manage Orders in Odoo 18 Lunch - Odoo Slides
Celine George
 
প্রত্যুৎপন্নমতিত্ব - Prottutponnomotittwa 2025.pdf
প্রত্যুৎপন্নমতিত্ব - Prottutponnomotittwa 2025.pdfপ্রত্যুৎপন্নমতিত্ব - Prottutponnomotittwa 2025.pdf
প্রত্যুৎপন্নমতিত্ব - Prottutponnomotittwa 2025.pdf
Pragya - UEM Kolkata Quiz Club
 
Forestry Model Exit Exam_2025_Wollega University, Gimbi Campus.pdf
Forestry Model Exit Exam_2025_Wollega University, Gimbi Campus.pdfForestry Model Exit Exam_2025_Wollega University, Gimbi Campus.pdf
Forestry Model Exit Exam_2025_Wollega University, Gimbi Campus.pdf
ChalaKelbessa
 
How to Setup Lunch in Odoo 18 - Odoo guides
How to Setup Lunch in Odoo 18 - Odoo guidesHow to Setup Lunch in Odoo 18 - Odoo guides
How to Setup Lunch in Odoo 18 - Odoo guides
Celine George
 
STUDENT LOAN TRUST FUND DEFAULTERS GHANA
STUDENT LOAN TRUST FUND DEFAULTERS GHANASTUDENT LOAN TRUST FUND DEFAULTERS GHANA
STUDENT LOAN TRUST FUND DEFAULTERS GHANA
Kweku Zurek
 
A Brief Introduction About Jack Lutkus
A Brief Introduction About  Jack  LutkusA Brief Introduction About  Jack  Lutkus
A Brief Introduction About Jack Lutkus
Jack Lutkus
 
How to Use Owl Slots in Odoo 17 - Odoo Slides
How to Use Owl Slots in Odoo 17 - Odoo SlidesHow to Use Owl Slots in Odoo 17 - Odoo Slides
How to Use Owl Slots in Odoo 17 - Odoo Slides
Celine George
 
State institute of educational technology
State institute of educational technologyState institute of educational technology
State institute of educational technology
vp5806484
 
Types of Actions in Odoo 18 - Odoo Slides
Types of Actions in Odoo 18 - Odoo SlidesTypes of Actions in Odoo 18 - Odoo Slides
Types of Actions in Odoo 18 - Odoo Slides
Celine George
 
Coleoptera: The Largest Insect Order.pptx
Coleoptera: The Largest Insect Order.pptxColeoptera: The Largest Insect Order.pptx
Coleoptera: The Largest Insect Order.pptx
Arshad Shaikh
 
PHYSIOLOGY & SPORTS INJURY by Diwakar Sir
PHYSIOLOGY & SPORTS INJURY by Diwakar SirPHYSIOLOGY & SPORTS INJURY by Diwakar Sir
PHYSIOLOGY & SPORTS INJURY by Diwakar Sir
Diwakar Kashyap
 
Multicultural approach in education - B.Ed
Multicultural approach in education - B.EdMulticultural approach in education - B.Ed
Multicultural approach in education - B.Ed
prathimagowda443
 
POS Reporting in Odoo 18 - Odoo 18 Slides
POS Reporting in Odoo 18 - Odoo 18 SlidesPOS Reporting in Odoo 18 - Odoo 18 Slides
POS Reporting in Odoo 18 - Odoo 18 Slides
Celine George
 
How to Setup Renewal of Subscription in Odoo 18
How to Setup Renewal of Subscription in Odoo 18How to Setup Renewal of Subscription in Odoo 18
How to Setup Renewal of Subscription in Odoo 18
Celine George
 
Introduction to Online CME for Nurse Practitioners.pdf
Introduction to Online CME for Nurse Practitioners.pdfIntroduction to Online CME for Nurse Practitioners.pdf
Introduction to Online CME for Nurse Practitioners.pdf
CME4Life
 
Active Surveillance For Localized Prostate Cancer A New Paradigm For Clinical...
Active Surveillance For Localized Prostate Cancer A New Paradigm For Clinical...Active Surveillance For Localized Prostate Cancer A New Paradigm For Clinical...
Active Surveillance For Localized Prostate Cancer A New Paradigm For Clinical...
wygalkelceqg
 
How to Manage Orders in Odoo 18 Lunch - Odoo Slides
How to Manage Orders in Odoo 18 Lunch - Odoo SlidesHow to Manage Orders in Odoo 18 Lunch - Odoo Slides
How to Manage Orders in Odoo 18 Lunch - Odoo Slides
Celine George
 
প্রত্যুৎপন্নমতিত্ব - Prottutponnomotittwa 2025.pdf
প্রত্যুৎপন্নমতিত্ব - Prottutponnomotittwa 2025.pdfপ্রত্যুৎপন্নমতিত্ব - Prottutponnomotittwa 2025.pdf
প্রত্যুৎপন্নমতিত্ব - Prottutponnomotittwa 2025.pdf
Pragya - UEM Kolkata Quiz Club
 

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.