View on GitHub

reading-notes

Assorted Topics

Chapter 16: “Images”

  1. controlling size of “Images
  2. aliging “Images”
  3. adding backgroung images.

Another way of resizing the image is by using the object-fit property, which fits the image. This CSS property specifies how a video or an image is resized to fit its content box. It defines how an element fits into the container with an established width and height.

The object-fit property is generally applied to image or video. This property defines how an element responds to the width and height of its container. Mainly there are five values of object-fit property such as fill, contain, cover, none, scale-down, initial, and inherit. The default value of this property is “fill”.

Aligning an image means to position the image at center, left and right. We can use the float property and text-align property for the alignment of images.

If the image is in the div element, then we can use the text-align property for aligning the image in the div.

img

Elements are floated only horizontally. So it is possible only to float elements left or right, not up or down. A floated element may be moved as far to the left or the right as possible. Simply, it means that a floated element can display at the extreme left or extreme right. Example In this example, we are aligning the images by using the text-align property. The images are in the div element.

img

The borders of the element are then drawn on top of them, and the background-color is drawn beneath them. How the images are drawn relative to the box and its borders is defined by the background-clip and background-origin CSS properties

If a specified image cannot be drawn (for example, when the file denoted by the specified URI cannot be loaded), browsers handle it as they would a none value.

To specify multiple background images, supply multiple values, separated by a comma:

background-image: linear-gradient(to bottom, rgba(255,255,0,0.5)
rgba(0,0,255,0.5))
url('catfront.png');

Chapter 19: “Practical Information”

There are entire books written about each of the topics covered in this chapter but I will introduce you to the key themes that each subject deals with and give you pointers for what you need to be considering. You will see:

  1. The basics of search engine optimization
  2. Using analytics to understand how people are using your site after it has launched
  3. Putting your site on the web

** SEARCH ENGINE OPTIMIZATION (SEO)**

SEO is a huge topic and several books have been written on the subject. The following pages will help you understand the key concepts so you can improve your website’s visibility on search engines.

** THE BASICS**

Search engine optimization (or 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.

At the heart of SEO is the idea of working out which terms people are likely to enter into a search engine to find your site and then using these terms in the right places on your site to increase the chances that search engines will show a link to your site in their results.

Adding vedios and audio:

HTML5 features include native audio and video support without the need for Flash.

The HTML5

Embedding Video Here is the simplest form of embedding a video file in your webpage −

<video src = "foo.mp4" width = "300" height = "200" controls>

Your browser does not support the

</video> The current HTML5 draft specification does not specify which video formats browsers should support in the video tag. But most commonly used video formats are −

You can use <source> tag to specify media along with media type and many other attributes. A video element allows multiple source elements and browser will use the first recognized format −

 <!DOCTYPE HTML>
<html>
  <body>
      <video  width = "300" height = "200" controls autoplay>
      <source src = "/html5/foo.ogg" type ="video/ogg" />
      <source src = "/html5/foo.mp4" type = "video/mp4" />
          Your browser does not support the <video> element.
       </video>
     </body>
  </html>

Embedding Audio HTML5 supports 

<audio src = "foo.wav" controls autoplay>  
   Your browser does not support the <audio> element.   
</audio>

The current HTML5 draft specification does not specify which audio formats browsers should support in the audio tag. But most commonly used audio formats are ogg, mp3 and wav.

You can use <source&ggt; tag to specify media along with media type and many other attributes. An audio element allows multiple source elements and browser will use the first recognized format −

 <!DOCTYPE HTML>
  <html>
    <body> 
      <audio controls autoplay>
       <source src = "/html5/audio.ogg" type = "audio/ogg" />
       <source src = "/html5/audio.wav" type = "audio/wav" />
        Your browser does not support the <audio> element.
     </audio>
    </body>
 </html>

img