Images

The tag is used to embed an image in an HTML page. Images are not technically inserted into a web page; images are linked to web pages. The tag creates a holding space for the referenced image. The tag has two required attributes: src - Specifies the path to the image. Choosing Images On the Internet, images are used for all kinds of reasons: to enhance websites, to illustrate stories, in ad displays, to present products or services,as stand-alone “a picture is worth a thousand words” meaning-rich tools, and sure, on social media .and images can provide more beuaty to our wedpage. save your image when we create a webpage we have to save all the image that we use to have our referunces that we can go back and use and to create new point of view.

Adding Images

how to add image that we use tag called (imag) and inside it will find src : which is the sorces alt : This provides a text description of the image which describes the image if you cannot see it. title : that you want to show in the image .

Height & Width

height : ues to specified the height of the images in PX . width : This specifies the width of the image in PX .

Place Images

image is a slef closeing tage which is mean it can be used in any palce that we want in paragraph that insid it or in top of it or in end of it . bay using (aling) and wirt the place you want it like aling:right

Three Rules for Creating Images

1. Save images in the right format.
2. Save images at the right size.
3. Use the correct resolution .

tools to edit images

we can change the dimntion and croping the image . and we have a lot of resurce that we can use it to change and save the image .

### so what we learn . 1.You should save images at the size you will be using them on the web page and in the appropriate format

2.Photographs are best saved as JPEGs; illustrations or logos that use flat colors are better saved as GIFs.

3.You must always specify a src attribute to indicate the source of an image and an alt attribute to describe the content of an image

# Color

Color is the aspect of things that is caused by differing qualities of light being reflected or emitted by them. To see color, you have to have light. When light shines on an object some colors bounce off the object and others are absorbed by it. Our eyes only see the colors that are bounced off or reflected. and which make our page more meaningfull .

type of color

1. RGB Values
2. Hex Codes
3. Color Names
4. Hue
5. Saturation
6. Brigh tness

There are three ways to specify colors in CSS: RGB values, hex codes, and color names. XX Color pickers can help you find the color you want. XX It is important to ensure that there is enough contrast between any text and the background color (otherwise people will not be able to read your content). XX CSS3 has introduced an extra value for RGB colors to indicate opacity. It is known as RGBA. XX CSS3 also allows you to specify colors as HSL values, with an optional opacity value. It is known as HSLA .

Text

text that what you wirt in your webpage and we can control the type , size , family and the color of the text inside your webpage .

typeface of text

typeface has a unique tone that should produce a harmonious fit between the verbal and visual flow of your content. Modern versions of html and css allow designers to specify typeface. … This is useful not only for aesthetic reasons but also because of the differing dimensions of typefaces

so the text we can cotroll it by the font-size and we can git change in the fon-family by chooseing the type of font family .

in this image we can see the text defereint type style and use in html .

see the summery

You can use pseudo-classes to change the style of an element when a user hovers over or clicks on text, or when they have visited a link. You can use pseudo-classes to change the style of an element when a user hovers over or clicks on text, or when they have visited a link. You can control the space between lines of text, individual letters, and words. Text can also be aligned to the left, right, center, or justified. It can also be indented.

JPEG vs PNG vs GIF

JPEG

PEG stands for “Joint Photographic Experts Group”. It’s a standard image format for containing lossy and compressed image data. Despite the huge reduction in file size JPEG images maintain reasonable image quality .Use JPEG format for all images that contain a natural scene or photograph where variation in colour and intensity is smooth. Use PNG format for any image that needs transparency or for images with text & objects with sharp contrast edges like logos. Use GIF format for images that contain animations.

PNG

PNG stands for “Portable Graphics Format”. … This lossless data compression format was created to replace the Graphics Interchange Format (GIF). PNG file format is an open format with no copyright limitations. Like GIF images, PNG also have the ability to display transparent backgrounds.No data is lost during compression and no compression artefacts are introduced in the image. For this reason, a PNG image would retain higher quality than an image than JPEG and would look a lot sharper, it would also occupy more space on the disk

deferint between JPEG vs PNG .

GIF

Last but not least, we have GIFs (Graphics Interchange Format). GIFs are also lossless and support transparency, much like PNGs. However, unlike the PNG, they do support animation across all browsers. GIFs use 8-bit color and thus only have a range of 256 colors. They are usually just used for animations and very simple images or logos.

short quiz .

1. you can change the font size ………
2. what is font family ……………….
3. gif is ………………………….
4. what is RPG ……………………..

referances

text

JPEG vs PNG vs GIF

for more info please visit my github qusaiqeisi

best regard