reading-notes

View project on GitHub

html

image

You can control the size of an image using the width and height elements appear in the HTML, rather than using width and height attributes you can use these names as values for the class attribute. float property can be used to move an element to the left or the right of its containing block.

  • By default, images are inline elements.
  • to center an image, it should be turned into a blocklevel element using the display property with a value of block.then there are two common ways in which you can horizontally center an image:
    1. On the containing element,you can use the text-align property with a value of center
    2. On the image itself, you can use the use the margin property and set the values of the left and right margins to auto.
  • The background-image property allows you to place an image behind any HTML element
  • The background-repeat property can have four values:
    • repeat:repeat-x The image is repeated horizontally and repeat-y The image is repeated vertically only.and no-repeat The image is only shown once
    • fixed The background image stays in the same position on the page.
    • scroll The background image moves up and down as the user scrolls up and down the page
  • background-position property to specify where in the browser window the background image should be placed its value :
    • left top
    • left center
    • left bottom
    • center top
    • center center
    • center bottom
    • right top
    • right center
    • right bottom

      background

      1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position
  • **rollover **create a link or button that changes to a second style when a user moves their mouse over it

  • **sprite **When a single image is used for several different parts of an interface.

  • To reduce the number of images your browser has to load, you can create image sprites. If you want to overlay text on a background image, the image must be low contrast in order for the text to be legible :
    • High Contrast
    • Low Contrast
    • Screen

practical information

  • Search Engine Optimization(SEO):
    • is the practice of trying to help your site appear nearer the top of search engine results when people look for the topics that your website covers.
    • On-page techniques are the methods you can use on your web pages to improve their rating in search engines.
    • Getting other sites to link to you is just as important as on-page techniques. In every page of your website there are seven key places where keywords can appear in order to improve its findability: 1. Page Title 2. URL/Web Address 3. Headings 4. Text 5. Link Text 6. Image Alt Text 7. Page Descriptions
  • How to Identify Keywords and Phrases :
    1. Brainstorm : List down the words that someone might type into Google to find your site
    2. Organize :Group the keywords into separate lists for the different sections or categories of your website.
    3. Research :There are several tools that let you enter your keywords and then they will suggest additional keywords you might like to consider.
    4. Compare :
    5. Refine : Now you need to pick which keywords you will focus on.
    6. Map : Now that you have a refined list of keywords, you know which have the most competition, and which ones are most relevant,it is time to start picking which keywords you will use for each page.
  • Learning about your Visitors using tools called Google Analytics :
    • Signing Up :
    • How it Works :
    • The Tracking Code :the tracking code sends data to the Google servers where it is stored.
  • it tells you how many people are coming to your site.
    • Visits :This is the number of times people have come to your site
    • Unique Visits :This is the total number of people who have visited your site over the specified period
    • Page Views: The total number of pages all visitors have viewed on your site
    • Pages per Visit :The average number of pages each visitor has looked at on your site per visit.
    • Av erage Time on Site :The average amount of time each user has spent on the site per visit.
    • Date Selector :Using the date selector in the top right hand corner of the site, you can change the period of time the reports display.
    • Export :The export link just above the title that says “visitors overview” allows you to export the statistics on this page for other applications such as Excel
  • The content link on the left-hand side allows you to learn more about what the visitors are looking at when they come to your site
    • Landing PagesThese are the pages that people arrive on when first visiting your site.
    • PagesThis tells you which pages your visitors are looking at the most
    • Top Exit Pages: This shows which pages people most commonly leave from
    • Bounce Rate :This shows the number of people who left on the same page that they arrived on.
  • Where Are Your Visitors Coming From?
    • Referrers This shows the sites that have linked to youand the number of people who have come via those sites.
    • Direct This shows which page a user arrived on if they did not come via a link on another site
    • Search Terms This shows the terms users entered into a search engine to find your site
    • Advanced Features We have only scratched the surface of what you can find out about your visitors from Google Analytics
  • In order to put your site on the web you will need a domain name and web hosting :
  • DOMAIN NAMES :Your domain name is your web address
  • WEB HOSTING :So that other people can see your site, you will need to upload it to a web server.
  • Bandwidth :This is the amount of data the hosting company will send to your site’s visitors
  • Backups :Check whether the hosting company performs backups on your site
  • Disk space :This refers to the total size of all of the files that make up your site
  • Server-side languages and databases :If you are using a content management system, it will likely use a server-side programming language and a database
  • File Transfer Protocol(FTP) :To transfer your code and images from your computer to your hosting company
  • Here is a list of some popular FTP applications:
    • FileZilla
    • FireFTP
    • CuteFTP
    • SmartFTP
    • Transmit
  • Here is a list of some popular third party tools:
    • Blogs
    • E-commerce
    • Email newsletters
    • Social networking sharing buttons