reading-notes

This Repo required for Asac labs class 2

Project maintained by ManarAbdelkarim Hosted on GitHub Pages — Theme by mattgraham

HTML5 video and audio

Chapter 16: “Images

CSS Setting height and width for images the height and width properties are used to set the height and width of an element.

The height and width properties do not include padding, borders, or margins. It sets the height/width of the area inside the padding, border, and margin of the element.

Specifying image sizes helps pages to load more smoothly because the HTML and CSS code will often load before the images, and telling the browser how much space to leave for an image allows it to render the rest of the page without waiting for the image to download.

img {
height: 200px;
width: 50%;
}
<html><img src='./img/teamAttack.jpg'</html>
<img src='./img/teamAttack.jpg'

The <video> and <audio> elements allow us to embed video and audio into web pages. As we showed in Video and audio content, a typical implementation looks like this:

<video controls>
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
</video>

This creates a video player inside the browser.

How to align images?

.column { float: left; width: 33.33%; padding: 5px; }

.row::after { content: “”; clear: both; display: table; }

background-image

The background-image property specifies an image to use as the background of an element.
The background-image property allows you to place an image behind any HTML element. This could be the entire page or just part of the page. By default, a background image will repeat to fill the entire box.
and you can control how many times you want to repeat in the x direction or the y direction or none for not repeating once ,or you can assign background postion Using CSS, it is possible to create a link or button that changes to a second style when a user moves their mouse over it (known as a rollover) and a third style when they click on it.
To reduce the number of images your browser has to load, you can create image sprites.

Repeating Images

Example body { background-image: url(“./img/teamAttack.jpg”); background-repeat: repeat-y; }
result at the end of the summary

position of background image

Add Responsiveness

Optionally, you could add media queries to make the images stack on top of each other instead of floating next to each other, on a specific screen width.

Summary

IMAGES

Chapter 19: “Practical Information”

Search Engine Optimization (SEO)

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.

(the words people might search on to find your site) 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

Summary

PRACTICAL INFORMATION

</body> </html>