SlideShare une entreprise Scribd logo
1  sur  27
Designing Websites




Using HTML and FrontPage
A Typical Webpage
                     View Source
                      View Source




A webpage is a
 A webpage is a
      text file
       text file
     containing
      containing
 instructions to
   instructions to
tell aacomputer
  tell computer
 how the page
   how the page
    should look.
     should look.
Creating Webpages
●
    You can create a page by hand,
    using a text-editor like Notepad
●
    You can use web-based tools,
    eg Blogging/Content Management
    Systems to store your data and present it in
    different ways.
●
    You can use website authoring software,
    eg FrontPage, Dreamweaver to create a
    page, and upload it when you are ready
HTML and FrontPage
                 FrontPage is an
                  FrontPage is an
                   editor that
                    editor that
                 enables you to
                  enables you to
                    create the
                     create the
                  HTML code
                   HTML code
                  used to make
                   used to make
                    webpages
                     webpages
The HTML for our first page
  HTML tags are
   HTML tags are
  usually in pairs
   usually in pairs

    Between the
     Between the
<head> and </head>
 <head> and </head>
   tags, you find
    tags, you find
 information about
  information about
      the page
       the page

     Between the
      Between the
<body> and </body>
 <body> and </body>
    tags, you find
     tags, you find
   instructions for
    instructions for
  displaying text,
    displaying text,
     pictures etc...
      pictures etc...
Adding text to our first page

 Paragraph styles
  Paragraph styles

   We can use
     We can use
different heading
 different heading
    sizes from
      sizes from
<h1> Heading 11
 <h1> Heading
   (the biggest)
     (the biggest)
         to
          to
<h6> Heading 66
 <h6> Heading
  (the smallest)
    (the smallest)
   to make our
     to make our
 headings stand
  headings stand
         out
          out
Using HTML to format our text




                       To format our
                        To format our
                       text quickly,
                        text quickly,
                        we can use
                          we can use
                        aacascading
                           cascading
                         style sheet
                          style sheet
                        (CSS) page
                         (CSS) page
Creating a blank stylesheet


                    We can choose aa
                     We can choose
                      ready-made
                       ready-made
                      template, or
                       template, or
                    we can make our
                    we can make our
                         own...
                          own...
Selecting styles to modify


                              The computer
                               The computer
                            displays aasample
                             displays sample
                            to show how the
                             to show how the
                              text will look,
                               text will look,
                              as well as the
                               as well as the
                              instructions it
                               instructions it
                               uses for the
                                uses for the
  We can look at
   We can look at             web browser.
                               web browser.
two lists of styles.
 two lists of styles.
The original tags,
 The original tags,
 and the ones we
  and the ones we
  have changed.
   have changed.
Changing formatting for a style




           We can change
           We can change
               several
                several
              different
                different
            attributes for
             attributes for
            aaparagraph
               paragraph
                 style
                  style
The Font Tab

       As well as the size, style
       As well as the size, style
         and colour of aafont,
          and colour of font,
        there are other effects
         there are other effects
           we can choose...
            we can choose...


         For the background,
          For the background,
          border, line-spacing
           border, line-spacing
       and alignment, other tabs
        and alignment, other tabs
         can be selected when
          can be selected when
          modifying aastyle.
           modifying style.
A CSS file




    Clicking on the Style
     Clicking on the Style
    toolbar allows you to
     toolbar allows you to
  continue modifying styles
   continue modifying styles
Linking to a CSS file




             To use aaCSS file,
              To use CSS file,
          you must first link to it
           you must first link to it
          from your HTML file...
           from your HTML file...
Multiple stylesheets?



              If you needed to,
               If you needed to,
              you could link to
               you could link to
                more than one
                 more than one
                  stylesheet!
                   stylesheet!
Linking code for stylesheets




                        The code for
                         The code for
                        linking to aa
                         linking to
                         CSS file is
                          CSS file is
                        added to the
                         added to the
                         <head> by
                          <head> by
                         FrontPage
                          FrontPage
Previewing a page




         The page preview tab
          The page preview tab
        will automatically show
        will automatically show
         our page with all the
          our page with all the
         new CSS formatting
          new CSS formatting
Adding a picture




 The <img src> tag will
  The <img src> tag will
display aapicture in our
  display picture in our
page. It can be modified
 page. It can be modified
by using height, width,
 by using height, width,
  border and alt within
   border and alt within
         the tags.
          the tags.
Picture Preview




           One way to change
           One way to change
            aapage's layout is
               page's layout is
              to use tables
               to use tables
Adding a hyperlink




            Hyperlinks make aa
            Hyperlinks make
          webpage much more
           webpage much more
          useful than aaprintout
           useful than printout
Absolute and Relative URLs




We don't have to link to just
We don't have to link to just
       web pages.
         web pages.

                   For aapage in the same directory as this file,
                    For page in the same directory as this file,
                        just the filename would be enough
                         just the filename would be enough
                   ––but watch out for upper/lower case letters!
                      but watch out for upper/lower case letters!
Following links




                   You can test
                    You can test
                    your page
                     your page
                   to see if the
                    to see if the
                    links you
                     links you
                    have made
                     have made
                  actually work
                   actually work
Tables!


          A table doesn't
           A table doesn't
          have to be used
           have to be used
          just for tabular
           just for tabular
           data. We can
            data. We can
           also use it to
            also use it to
           arrange items
            arrange items
            on aapage to
             on page to
             look more
               look more
            interesting.
              interesting.
The table so far...




                You can drag and drop
                You can drag and drop
                  text just like you
                   text just like you
                    would with aa
                     would with
                   word-processor
                    word-processor
Modifying a table



                  Once aatable is
                   Once table is
                 made, you have
                  made, you have
                complete control
                 complete control
                 of the way both
                  of the way both
                 the entire table,
                  the entire table,
                or individual cells
                 or individual cells
                  are displayed.
                   are displayed.
Table Properties
Our HTML code
A final preview of our page

Contenu connexe

Tendances

Hexagonal combs style design 2 powerpoint presentation templates.
Hexagonal combs style design 2 powerpoint presentation templates.Hexagonal combs style design 2 powerpoint presentation templates.
Hexagonal combs style design 2 powerpoint presentation templates.SlideTeam.net
 
Hexagonal combs style design 2 powerpoint ppt slides.
Hexagonal combs style design 2 powerpoint ppt slides.Hexagonal combs style design 2 powerpoint ppt slides.
Hexagonal combs style design 2 powerpoint ppt slides.SlideTeam.net
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3Doris Chen
 
Lecture3 web design and development
Lecture3 web design and developmentLecture3 web design and development
Lecture3 web design and developmentRafi Haidari
 
Post it notes on people faces pinned style design 3 powerpoint presentation s...
Post it notes on people faces pinned style design 3 powerpoint presentation s...Post it notes on people faces pinned style design 3 powerpoint presentation s...
Post it notes on people faces pinned style design 3 powerpoint presentation s...SlideTeam.net
 
Post it notes on people faces pinned style design 3 powerpoint ppt slides.
Post it notes on people faces pinned style design 3 powerpoint ppt slides.Post it notes on people faces pinned style design 3 powerpoint ppt slides.
Post it notes on people faces pinned style design 3 powerpoint ppt slides.SlideTeam.net
 
Post it notes on people faces pinned design 3 powerpoint presentation slides.
Post it notes on people faces pinned design 3 powerpoint presentation slides.Post it notes on people faces pinned design 3 powerpoint presentation slides.
Post it notes on people faces pinned design 3 powerpoint presentation slides.SlideTeam.net
 
Post it notes on people faces pinned style design 3 powerpoint presentation t...
Post it notes on people faces pinned style design 3 powerpoint presentation t...Post it notes on people faces pinned style design 3 powerpoint presentation t...
Post it notes on people faces pinned style design 3 powerpoint presentation t...SlideTeam.net
 
Post it notes on people faces pinned design 3 powerpoint ppt slides.
Post it notes on people faces pinned design 3 powerpoint ppt slides.Post it notes on people faces pinned design 3 powerpoint ppt slides.
Post it notes on people faces pinned design 3 powerpoint ppt slides.SlideTeam.net
 
Post it notes on people faces pinned design 3 powerpoint ppt templates.
Post it notes on people faces pinned design 3 powerpoint ppt templates.Post it notes on people faces pinned design 3 powerpoint ppt templates.
Post it notes on people faces pinned design 3 powerpoint ppt templates.SlideTeam.net
 
Post it notes on people faces pinned design 3 powerpoint presentation templates.
Post it notes on people faces pinned design 3 powerpoint presentation templates.Post it notes on people faces pinned design 3 powerpoint presentation templates.
Post it notes on people faces pinned design 3 powerpoint presentation templates.SlideTeam.net
 
Post it notes on people faces pinned style design 3 powerpoint ppt templates.
Post it notes on people faces pinned style design 3 powerpoint ppt templates.Post it notes on people faces pinned style design 3 powerpoint ppt templates.
Post it notes on people faces pinned style design 3 powerpoint ppt templates.SlideTeam.net
 

Tendances (20)

Hexagonal combs style design 2 powerpoint presentation templates.
Hexagonal combs style design 2 powerpoint presentation templates.Hexagonal combs style design 2 powerpoint presentation templates.
Hexagonal combs style design 2 powerpoint presentation templates.
 
Hexagonal combs style design 2 powerpoint ppt slides.
Hexagonal combs style design 2 powerpoint ppt slides.Hexagonal combs style design 2 powerpoint ppt slides.
Hexagonal combs style design 2 powerpoint ppt slides.
 
Education 4
Education 4Education 4
Education 4
 
Para mi hija evelyn
Para mi hija evelynPara mi hija evelyn
Para mi hija evelyn
 
Ppt精美
Ppt精美Ppt精美
Ppt精美
 
Demystifying WordPress Conditional Tags
Demystifying WordPress Conditional TagsDemystifying WordPress Conditional Tags
Demystifying WordPress Conditional Tags
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3
 
Lecture3 web design and development
Lecture3 web design and developmentLecture3 web design and development
Lecture3 web design and development
 
Plantilla Power XVII
Plantilla Power XVIIPlantilla Power XVII
Plantilla Power XVII
 
Post it notes on people faces pinned style design 3 powerpoint presentation s...
Post it notes on people faces pinned style design 3 powerpoint presentation s...Post it notes on people faces pinned style design 3 powerpoint presentation s...
Post it notes on people faces pinned style design 3 powerpoint presentation s...
 
Post it notes on people faces pinned style design 3 powerpoint ppt slides.
Post it notes on people faces pinned style design 3 powerpoint ppt slides.Post it notes on people faces pinned style design 3 powerpoint ppt slides.
Post it notes on people faces pinned style design 3 powerpoint ppt slides.
 
Post it notes on people faces pinned design 3 powerpoint presentation slides.
Post it notes on people faces pinned design 3 powerpoint presentation slides.Post it notes on people faces pinned design 3 powerpoint presentation slides.
Post it notes on people faces pinned design 3 powerpoint presentation slides.
 
Post it notes on people faces pinned style design 3 powerpoint presentation t...
Post it notes on people faces pinned style design 3 powerpoint presentation t...Post it notes on people faces pinned style design 3 powerpoint presentation t...
Post it notes on people faces pinned style design 3 powerpoint presentation t...
 
Post it notes on people faces pinned design 3 powerpoint ppt slides.
Post it notes on people faces pinned design 3 powerpoint ppt slides.Post it notes on people faces pinned design 3 powerpoint ppt slides.
Post it notes on people faces pinned design 3 powerpoint ppt slides.
 
Post it notes on people faces pinned design 3 powerpoint ppt templates.
Post it notes on people faces pinned design 3 powerpoint ppt templates.Post it notes on people faces pinned design 3 powerpoint ppt templates.
Post it notes on people faces pinned design 3 powerpoint ppt templates.
 
Post it notes on people faces pinned design 3 powerpoint presentation templates.
Post it notes on people faces pinned design 3 powerpoint presentation templates.Post it notes on people faces pinned design 3 powerpoint presentation templates.
Post it notes on people faces pinned design 3 powerpoint presentation templates.
 
Post it notes on people faces pinned style design 3 powerpoint ppt templates.
Post it notes on people faces pinned style design 3 powerpoint ppt templates.Post it notes on people faces pinned style design 3 powerpoint ppt templates.
Post it notes on people faces pinned style design 3 powerpoint ppt templates.
 
Intro to CSS Presentation
Intro to CSS PresentationIntro to CSS Presentation
Intro to CSS Presentation
 
Wcm4
Wcm4Wcm4
Wcm4
 
css-tutorial
css-tutorialcss-tutorial
css-tutorial
 

Similaire à Learn HTML

Class 2 handout css exercises (2)
Class 2 handout css exercises (2)Class 2 handout css exercises (2)
Class 2 handout css exercises (2)Erin M. Kidwell
 
Interview+Questions (1).pdf
Interview+Questions (1).pdfInterview+Questions (1).pdf
Interview+Questions (1).pdframu944534
 
Html xhtml tag-sheet
Html xhtml tag-sheetHtml xhtml tag-sheet
Html xhtml tag-sheetwihrbt
 
Customizing Your WordPress Theme Using Firebug and Basic CSS
Customizing Your WordPress Theme Using Firebug and Basic CSSCustomizing Your WordPress Theme Using Firebug and Basic CSS
Customizing Your WordPress Theme Using Firebug and Basic CSSLaura Hartwig
 
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
 
Basics about front-end
Basics about front-endBasics about front-end
Basics about front-endCETPA Infotech
 
Overview of Using Wordpress for Web Site Design
Overview of Using Wordpress for Web Site DesignOverview of Using Wordpress for Web Site Design
Overview of Using Wordpress for Web Site DesignAmy Goodloe
 
Basic HTML & CSS
Basic HTML & CSSBasic HTML & CSS
Basic HTML & CSSJohn Nelson
 
20130909_GODEL Style Guide Guide
20130909_GODEL Style Guide Guide20130909_GODEL Style Guide Guide
20130909_GODEL Style Guide GuideMilly Schmidt
 
Rh10 css presentation
Rh10 css presentationRh10 css presentation
Rh10 css presentationNeil Perlin
 
4. Web Technology CSS Basics-1
4. Web Technology CSS Basics-14. Web Technology CSS Basics-1
4. Web Technology CSS Basics-1Jyoti Yadav
 

Similaire à Learn HTML (20)

Class 2 handout css exercises (2)
Class 2 handout css exercises (2)Class 2 handout css exercises (2)
Class 2 handout css exercises (2)
 
Interview+Questions (1).pdf
Interview+Questions (1).pdfInterview+Questions (1).pdf
Interview+Questions (1).pdf
 
Html xhtml tag-sheet
Html xhtml tag-sheetHtml xhtml tag-sheet
Html xhtml tag-sheet
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
HTML Bootcamp
HTML BootcampHTML Bootcamp
HTML Bootcamp
 
Le Wagon - Landing page
Le Wagon - Landing pageLe Wagon - Landing page
Le Wagon - Landing page
 
Customizing Your WordPress Theme Using Firebug and Basic CSS
Customizing Your WordPress Theme Using Firebug and Basic CSSCustomizing Your WordPress Theme Using Firebug and Basic CSS
Customizing Your WordPress Theme Using Firebug and Basic CSS
 
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)
 
Basics about front-end
Basics about front-endBasics about front-end
Basics about front-end
 
Presentation 1 [autosaved]
Presentation 1 [autosaved]Presentation 1 [autosaved]
Presentation 1 [autosaved]
 
Overview of Using Wordpress for Web Site Design
Overview of Using Wordpress for Web Site DesignOverview of Using Wordpress for Web Site Design
Overview of Using Wordpress for Web Site Design
 
HTML Bootcamp
HTML BootcampHTML Bootcamp
HTML Bootcamp
 
Basic HTML & CSS
Basic HTML & CSSBasic HTML & CSS
Basic HTML & CSS
 
Html tutorials
Html tutorialsHtml tutorials
Html tutorials
 
Html tutorials
Html tutorialsHtml tutorials
Html tutorials
 
20130909_GODEL Style Guide Guide
20130909_GODEL Style Guide Guide20130909_GODEL Style Guide Guide
20130909_GODEL Style Guide Guide
 
Rh10 css presentation
Rh10 css presentationRh10 css presentation
Rh10 css presentation
 
Html intro
Html introHtml intro
Html intro
 
Dreamweaver Basics
Dreamweaver BasicsDreamweaver Basics
Dreamweaver Basics
 
4. Web Technology CSS Basics-1
4. Web Technology CSS Basics-14. Web Technology CSS Basics-1
4. Web Technology CSS Basics-1
 

Dernier

❤Personal Whatsapp Number Keylong Call Girls 8617697112 💦✅.
❤Personal Whatsapp Number Keylong Call Girls 8617697112 💦✅.❤Personal Whatsapp Number Keylong Call Girls 8617697112 💦✅.
❤Personal Whatsapp Number Keylong Call Girls 8617697112 💦✅.Nitya salvi
 
Navi Mumbai Call Girls -📞9833754194-Call Girls Number Vashi-Nerul Call Girls ...
Navi Mumbai Call Girls -📞9833754194-Call Girls Number Vashi-Nerul Call Girls ...Navi Mumbai Call Girls -📞9833754194-Call Girls Number Vashi-Nerul Call Girls ...
Navi Mumbai Call Girls -📞9833754194-Call Girls Number Vashi-Nerul Call Girls ...priyasharma62062
 
Mira Road | Call Girls Service Mumbai | ₹,9500 Pay Cash 9833325238 Free Home ...
Mira Road | Call Girls Service Mumbai | ₹,9500 Pay Cash 9833325238 Free Home ...Mira Road | Call Girls Service Mumbai | ₹,9500 Pay Cash 9833325238 Free Home ...
Mira Road | Call Girls Service Mumbai | ₹,9500 Pay Cash 9833325238 Free Home ...hotbabesbook
 
Jodhpur Park ( Call Girls ) Kolkata ✔ 6297143586 ✔ Hot Model With Sexy Bhabi ...
Jodhpur Park ( Call Girls ) Kolkata ✔ 6297143586 ✔ Hot Model With Sexy Bhabi ...Jodhpur Park ( Call Girls ) Kolkata ✔ 6297143586 ✔ Hot Model With Sexy Bhabi ...
Jodhpur Park ( Call Girls ) Kolkata ✔ 6297143586 ✔ Hot Model With Sexy Bhabi ...ritikasharma
 
WhatsApp Chat: 📞 8617697112 Hire Call Girls Raiganj For a Sensual Sex Experience
WhatsApp Chat: 📞 8617697112 Hire Call Girls Raiganj For a Sensual Sex ExperienceWhatsApp Chat: 📞 8617697112 Hire Call Girls Raiganj For a Sensual Sex Experience
WhatsApp Chat: 📞 8617697112 Hire Call Girls Raiganj For a Sensual Sex ExperienceNitya salvi
 
VIP Model Call Girls Koregaon Park ( Pune ) Call ON 8005736733 Starting From ...
VIP Model Call Girls Koregaon Park ( Pune ) Call ON 8005736733 Starting From ...VIP Model Call Girls Koregaon Park ( Pune ) Call ON 8005736733 Starting From ...
VIP Model Call Girls Koregaon Park ( Pune ) Call ON 8005736733 Starting From ...SUHANI PANDEY
 
Model Call Girls In Pazhavanthangal WhatsApp Booking 7427069034 call girl ser...
Model Call Girls In Pazhavanthangal WhatsApp Booking 7427069034 call girl ser...Model Call Girls In Pazhavanthangal WhatsApp Booking 7427069034 call girl ser...
Model Call Girls In Pazhavanthangal WhatsApp Booking 7427069034 call girl ser... Shivani Pandey
 
VIP Model Call Girls Budhwar Peth ( Pune ) Call ON 8005736733 Starting From 5...
VIP Model Call Girls Budhwar Peth ( Pune ) Call ON 8005736733 Starting From 5...VIP Model Call Girls Budhwar Peth ( Pune ) Call ON 8005736733 Starting From 5...
VIP Model Call Girls Budhwar Peth ( Pune ) Call ON 8005736733 Starting From 5...SUHANI PANDEY
 
𓀤Call On 6297143586 𓀤 Park Street Call Girls In All Kolkata 24/7 Provide Call...
𓀤Call On 6297143586 𓀤 Park Street Call Girls In All Kolkata 24/7 Provide Call...𓀤Call On 6297143586 𓀤 Park Street Call Girls In All Kolkata 24/7 Provide Call...
𓀤Call On 6297143586 𓀤 Park Street Call Girls In All Kolkata 24/7 Provide Call...rahim quresi
 
Call Girls Panaji Just Call 8617370543 Top Class Call Girl Service Available
Call Girls Panaji Just Call 8617370543 Top Class Call Girl Service AvailableCall Girls Panaji Just Call 8617370543 Top Class Call Girl Service Available
Call Girls Panaji Just Call 8617370543 Top Class Call Girl Service AvailableNitya salvi
 
📞 Contact Number 8617697112 VIP Ganderbal Call Girls
📞 Contact Number 8617697112 VIP Ganderbal Call Girls📞 Contact Number 8617697112 VIP Ganderbal Call Girls
📞 Contact Number 8617697112 VIP Ganderbal Call GirlsNitya salvi
 
Model Call Girls In Ariyalur WhatsApp Booking 7427069034 call girl service 24...
Model Call Girls In Ariyalur WhatsApp Booking 7427069034 call girl service 24...Model Call Girls In Ariyalur WhatsApp Booking 7427069034 call girl service 24...
Model Call Girls In Ariyalur WhatsApp Booking 7427069034 call girl service 24... Shivani Pandey
 
📞 Contact Number 8617697112 VIP East Sikkim Call Girls
📞 Contact Number 8617697112 VIP East Sikkim Call Girls📞 Contact Number 8617697112 VIP East Sikkim Call Girls
📞 Contact Number 8617697112 VIP East Sikkim Call GirlsNitya salvi
 
Verified Trusted Call Girls Egmore Chennai ✔✔7427069034 Independent Chennai ...
Verified Trusted Call Girls Egmore Chennai ✔✔7427069034  Independent Chennai ...Verified Trusted Call Girls Egmore Chennai ✔✔7427069034  Independent Chennai ...
Verified Trusted Call Girls Egmore Chennai ✔✔7427069034 Independent Chennai ... Shivani Pandey
 
𓀤Call On 6297143586 𓀤 Ultadanga Call Girls In All Kolkata 24/7 Provide Call W...
𓀤Call On 6297143586 𓀤 Ultadanga Call Girls In All Kolkata 24/7 Provide Call W...𓀤Call On 6297143586 𓀤 Ultadanga Call Girls In All Kolkata 24/7 Provide Call W...
𓀤Call On 6297143586 𓀤 Ultadanga Call Girls In All Kolkata 24/7 Provide Call W...rahim quresi
 
Call Girls In Warangal Escorts ☎️7427069034 🔝 💃 Enjoy 24/7 Escort Service En...
Call Girls In Warangal Escorts ☎️7427069034  🔝 💃 Enjoy 24/7 Escort Service En...Call Girls In Warangal Escorts ☎️7427069034  🔝 💃 Enjoy 24/7 Escort Service En...
Call Girls In Warangal Escorts ☎️7427069034 🔝 💃 Enjoy 24/7 Escort Service En...HyderabadDolls
 
Almora call girls 📞 8617697112 At Low Cost Cash Payment Booking
Almora call girls 📞 8617697112 At Low Cost Cash Payment BookingAlmora call girls 📞 8617697112 At Low Cost Cash Payment Booking
Almora call girls 📞 8617697112 At Low Cost Cash Payment BookingNitya salvi
 
Hire 💕 8617697112 North Sikkim Call Girls Service Call Girls Agency
Hire 💕 8617697112 North Sikkim Call Girls Service Call Girls AgencyHire 💕 8617697112 North Sikkim Call Girls Service Call Girls Agency
Hire 💕 8617697112 North Sikkim Call Girls Service Call Girls AgencyNitya salvi
 
Science City Kolkata ( Call Girls ) Kolkata ✔ 6297143586 ✔ Hot Model With Sex...
Science City Kolkata ( Call Girls ) Kolkata ✔ 6297143586 ✔ Hot Model With Sex...Science City Kolkata ( Call Girls ) Kolkata ✔ 6297143586 ✔ Hot Model With Sex...
Science City Kolkata ( Call Girls ) Kolkata ✔ 6297143586 ✔ Hot Model With Sex...rahim quresi
 
Bhimtal ❤CALL GIRL 8617697112 ❤CALL GIRLS IN Bhimtal ESCORT SERVICE❤CALL GIRL
Bhimtal ❤CALL GIRL 8617697112 ❤CALL GIRLS IN Bhimtal ESCORT SERVICE❤CALL GIRLBhimtal ❤CALL GIRL 8617697112 ❤CALL GIRLS IN Bhimtal ESCORT SERVICE❤CALL GIRL
Bhimtal ❤CALL GIRL 8617697112 ❤CALL GIRLS IN Bhimtal ESCORT SERVICE❤CALL GIRLNitya salvi
 

Dernier (20)

❤Personal Whatsapp Number Keylong Call Girls 8617697112 💦✅.
❤Personal Whatsapp Number Keylong Call Girls 8617697112 💦✅.❤Personal Whatsapp Number Keylong Call Girls 8617697112 💦✅.
❤Personal Whatsapp Number Keylong Call Girls 8617697112 💦✅.
 
Navi Mumbai Call Girls -📞9833754194-Call Girls Number Vashi-Nerul Call Girls ...
Navi Mumbai Call Girls -📞9833754194-Call Girls Number Vashi-Nerul Call Girls ...Navi Mumbai Call Girls -📞9833754194-Call Girls Number Vashi-Nerul Call Girls ...
Navi Mumbai Call Girls -📞9833754194-Call Girls Number Vashi-Nerul Call Girls ...
 
Mira Road | Call Girls Service Mumbai | ₹,9500 Pay Cash 9833325238 Free Home ...
Mira Road | Call Girls Service Mumbai | ₹,9500 Pay Cash 9833325238 Free Home ...Mira Road | Call Girls Service Mumbai | ₹,9500 Pay Cash 9833325238 Free Home ...
Mira Road | Call Girls Service Mumbai | ₹,9500 Pay Cash 9833325238 Free Home ...
 
Jodhpur Park ( Call Girls ) Kolkata ✔ 6297143586 ✔ Hot Model With Sexy Bhabi ...
Jodhpur Park ( Call Girls ) Kolkata ✔ 6297143586 ✔ Hot Model With Sexy Bhabi ...Jodhpur Park ( Call Girls ) Kolkata ✔ 6297143586 ✔ Hot Model With Sexy Bhabi ...
Jodhpur Park ( Call Girls ) Kolkata ✔ 6297143586 ✔ Hot Model With Sexy Bhabi ...
 
WhatsApp Chat: 📞 8617697112 Hire Call Girls Raiganj For a Sensual Sex Experience
WhatsApp Chat: 📞 8617697112 Hire Call Girls Raiganj For a Sensual Sex ExperienceWhatsApp Chat: 📞 8617697112 Hire Call Girls Raiganj For a Sensual Sex Experience
WhatsApp Chat: 📞 8617697112 Hire Call Girls Raiganj For a Sensual Sex Experience
 
VIP Model Call Girls Koregaon Park ( Pune ) Call ON 8005736733 Starting From ...
VIP Model Call Girls Koregaon Park ( Pune ) Call ON 8005736733 Starting From ...VIP Model Call Girls Koregaon Park ( Pune ) Call ON 8005736733 Starting From ...
VIP Model Call Girls Koregaon Park ( Pune ) Call ON 8005736733 Starting From ...
 
Model Call Girls In Pazhavanthangal WhatsApp Booking 7427069034 call girl ser...
Model Call Girls In Pazhavanthangal WhatsApp Booking 7427069034 call girl ser...Model Call Girls In Pazhavanthangal WhatsApp Booking 7427069034 call girl ser...
Model Call Girls In Pazhavanthangal WhatsApp Booking 7427069034 call girl ser...
 
VIP Model Call Girls Budhwar Peth ( Pune ) Call ON 8005736733 Starting From 5...
VIP Model Call Girls Budhwar Peth ( Pune ) Call ON 8005736733 Starting From 5...VIP Model Call Girls Budhwar Peth ( Pune ) Call ON 8005736733 Starting From 5...
VIP Model Call Girls Budhwar Peth ( Pune ) Call ON 8005736733 Starting From 5...
 
𓀤Call On 6297143586 𓀤 Park Street Call Girls In All Kolkata 24/7 Provide Call...
𓀤Call On 6297143586 𓀤 Park Street Call Girls In All Kolkata 24/7 Provide Call...𓀤Call On 6297143586 𓀤 Park Street Call Girls In All Kolkata 24/7 Provide Call...
𓀤Call On 6297143586 𓀤 Park Street Call Girls In All Kolkata 24/7 Provide Call...
 
Call Girls Panaji Just Call 8617370543 Top Class Call Girl Service Available
Call Girls Panaji Just Call 8617370543 Top Class Call Girl Service AvailableCall Girls Panaji Just Call 8617370543 Top Class Call Girl Service Available
Call Girls Panaji Just Call 8617370543 Top Class Call Girl Service Available
 
📞 Contact Number 8617697112 VIP Ganderbal Call Girls
📞 Contact Number 8617697112 VIP Ganderbal Call Girls📞 Contact Number 8617697112 VIP Ganderbal Call Girls
📞 Contact Number 8617697112 VIP Ganderbal Call Girls
 
Model Call Girls In Ariyalur WhatsApp Booking 7427069034 call girl service 24...
Model Call Girls In Ariyalur WhatsApp Booking 7427069034 call girl service 24...Model Call Girls In Ariyalur WhatsApp Booking 7427069034 call girl service 24...
Model Call Girls In Ariyalur WhatsApp Booking 7427069034 call girl service 24...
 
📞 Contact Number 8617697112 VIP East Sikkim Call Girls
📞 Contact Number 8617697112 VIP East Sikkim Call Girls📞 Contact Number 8617697112 VIP East Sikkim Call Girls
📞 Contact Number 8617697112 VIP East Sikkim Call Girls
 
Verified Trusted Call Girls Egmore Chennai ✔✔7427069034 Independent Chennai ...
Verified Trusted Call Girls Egmore Chennai ✔✔7427069034  Independent Chennai ...Verified Trusted Call Girls Egmore Chennai ✔✔7427069034  Independent Chennai ...
Verified Trusted Call Girls Egmore Chennai ✔✔7427069034 Independent Chennai ...
 
𓀤Call On 6297143586 𓀤 Ultadanga Call Girls In All Kolkata 24/7 Provide Call W...
𓀤Call On 6297143586 𓀤 Ultadanga Call Girls In All Kolkata 24/7 Provide Call W...𓀤Call On 6297143586 𓀤 Ultadanga Call Girls In All Kolkata 24/7 Provide Call W...
𓀤Call On 6297143586 𓀤 Ultadanga Call Girls In All Kolkata 24/7 Provide Call W...
 
Call Girls In Warangal Escorts ☎️7427069034 🔝 💃 Enjoy 24/7 Escort Service En...
Call Girls In Warangal Escorts ☎️7427069034  🔝 💃 Enjoy 24/7 Escort Service En...Call Girls In Warangal Escorts ☎️7427069034  🔝 💃 Enjoy 24/7 Escort Service En...
Call Girls In Warangal Escorts ☎️7427069034 🔝 💃 Enjoy 24/7 Escort Service En...
 
Almora call girls 📞 8617697112 At Low Cost Cash Payment Booking
Almora call girls 📞 8617697112 At Low Cost Cash Payment BookingAlmora call girls 📞 8617697112 At Low Cost Cash Payment Booking
Almora call girls 📞 8617697112 At Low Cost Cash Payment Booking
 
Hire 💕 8617697112 North Sikkim Call Girls Service Call Girls Agency
Hire 💕 8617697112 North Sikkim Call Girls Service Call Girls AgencyHire 💕 8617697112 North Sikkim Call Girls Service Call Girls Agency
Hire 💕 8617697112 North Sikkim Call Girls Service Call Girls Agency
 
Science City Kolkata ( Call Girls ) Kolkata ✔ 6297143586 ✔ Hot Model With Sex...
Science City Kolkata ( Call Girls ) Kolkata ✔ 6297143586 ✔ Hot Model With Sex...Science City Kolkata ( Call Girls ) Kolkata ✔ 6297143586 ✔ Hot Model With Sex...
Science City Kolkata ( Call Girls ) Kolkata ✔ 6297143586 ✔ Hot Model With Sex...
 
Bhimtal ❤CALL GIRL 8617697112 ❤CALL GIRLS IN Bhimtal ESCORT SERVICE❤CALL GIRL
Bhimtal ❤CALL GIRL 8617697112 ❤CALL GIRLS IN Bhimtal ESCORT SERVICE❤CALL GIRLBhimtal ❤CALL GIRL 8617697112 ❤CALL GIRLS IN Bhimtal ESCORT SERVICE❤CALL GIRL
Bhimtal ❤CALL GIRL 8617697112 ❤CALL GIRLS IN Bhimtal ESCORT SERVICE❤CALL GIRL
 

Learn HTML

  • 2. A Typical Webpage View Source View Source A webpage is a A webpage is a text file text file containing containing instructions to instructions to tell aacomputer tell computer how the page how the page should look. should look.
  • 3. Creating Webpages ● You can create a page by hand, using a text-editor like Notepad ● You can use web-based tools, eg Blogging/Content Management Systems to store your data and present it in different ways. ● You can use website authoring software, eg FrontPage, Dreamweaver to create a page, and upload it when you are ready
  • 4. HTML and FrontPage FrontPage is an FrontPage is an editor that editor that enables you to enables you to create the create the HTML code HTML code used to make used to make webpages webpages
  • 5. The HTML for our first page HTML tags are HTML tags are usually in pairs usually in pairs Between the Between the <head> and </head> <head> and </head> tags, you find tags, you find information about information about the page the page Between the Between the <body> and </body> <body> and </body> tags, you find tags, you find instructions for instructions for displaying text, displaying text, pictures etc... pictures etc...
  • 6. Adding text to our first page Paragraph styles Paragraph styles We can use We can use different heading different heading sizes from sizes from <h1> Heading 11 <h1> Heading (the biggest) (the biggest) to to <h6> Heading 66 <h6> Heading (the smallest) (the smallest) to make our to make our headings stand headings stand out out
  • 7. Using HTML to format our text To format our To format our text quickly, text quickly, we can use we can use aacascading cascading style sheet style sheet (CSS) page (CSS) page
  • 8. Creating a blank stylesheet We can choose aa We can choose ready-made ready-made template, or template, or we can make our we can make our own... own...
  • 9. Selecting styles to modify The computer The computer displays aasample displays sample to show how the to show how the text will look, text will look, as well as the as well as the instructions it instructions it uses for the uses for the We can look at We can look at web browser. web browser. two lists of styles. two lists of styles. The original tags, The original tags, and the ones we and the ones we have changed. have changed.
  • 10. Changing formatting for a style We can change We can change several several different different attributes for attributes for aaparagraph paragraph style style
  • 11. The Font Tab As well as the size, style As well as the size, style and colour of aafont, and colour of font, there are other effects there are other effects we can choose... we can choose... For the background, For the background, border, line-spacing border, line-spacing and alignment, other tabs and alignment, other tabs can be selected when can be selected when modifying aastyle. modifying style.
  • 12. A CSS file Clicking on the Style Clicking on the Style toolbar allows you to toolbar allows you to continue modifying styles continue modifying styles
  • 13. Linking to a CSS file To use aaCSS file, To use CSS file, you must first link to it you must first link to it from your HTML file... from your HTML file...
  • 14. Multiple stylesheets? If you needed to, If you needed to, you could link to you could link to more than one more than one stylesheet! stylesheet!
  • 15. Linking code for stylesheets The code for The code for linking to aa linking to CSS file is CSS file is added to the added to the <head> by <head> by FrontPage FrontPage
  • 16. Previewing a page The page preview tab The page preview tab will automatically show will automatically show our page with all the our page with all the new CSS formatting new CSS formatting
  • 17. Adding a picture The <img src> tag will The <img src> tag will display aapicture in our display picture in our page. It can be modified page. It can be modified by using height, width, by using height, width, border and alt within border and alt within the tags. the tags.
  • 18. Picture Preview One way to change One way to change aapage's layout is page's layout is to use tables to use tables
  • 19. Adding a hyperlink Hyperlinks make aa Hyperlinks make webpage much more webpage much more useful than aaprintout useful than printout
  • 20. Absolute and Relative URLs We don't have to link to just We don't have to link to just web pages. web pages. For aapage in the same directory as this file, For page in the same directory as this file, just the filename would be enough just the filename would be enough ––but watch out for upper/lower case letters! but watch out for upper/lower case letters!
  • 21. Following links You can test You can test your page your page to see if the to see if the links you links you have made have made actually work actually work
  • 22. Tables! A table doesn't A table doesn't have to be used have to be used just for tabular just for tabular data. We can data. We can also use it to also use it to arrange items arrange items on aapage to on page to look more look more interesting. interesting.
  • 23. The table so far... You can drag and drop You can drag and drop text just like you text just like you would with aa would with word-processor word-processor
  • 24. Modifying a table Once aatable is Once table is made, you have made, you have complete control complete control of the way both of the way both the entire table, the entire table, or individual cells or individual cells are displayed. are displayed.
  • 27. A final preview of our page