1 Introducing Multimedia_presentation1 1 variant

  • ppt
  • 09.05.2020
Публикация на сайте для учителей

Публикация педагогических разработок

Бесплатное участие. Свидетельство автора сразу.
Мгновенные 10 документов в портфолио.

Иконка файла материала 1 Introducing Multimedia_presentation1 1 variant.ppt

Introducing Multimedia

10.4.2.4 4 use HTML tags to insert multimedia objects into a webpage

Setting Global Style

Can be placed in one global location inside the
It then applies to the whole page
Place the style information inside a pair of tags

Styling Background and Paragraph

for each tag, you can give properties


this results in the background being black, and all text on the page being white

Structure of the Image Tag

An image tag specifies a file that contains an image:description
src is the abbreviation for “source”
filename uses the same rules for absolute and relative pathnames as anchor tags
alt value specifies an alternative form for the image, usually a textual description

Structure of the Image Tag

The alt tag was introduced to assist persons who are visually impaired
Screen readers don’t know what the image is, but they can read the description of the alt tag
HTML requires alt tags
When an image is not available or loads slow, browsers display the alt information

Image File Types

the file name needs to use the correct file extension
.gif, .png, .jpeg and .jpg are frequently used extenstions

Attributes for Image Tags

The attributes width and height of the image tag can be used to specify the size of an image
origami puffer fish
The photo puffer.jpg will appear as 200 × 200 pixels, even if the actual size of the photo is 2000 × 2000
Specify only the width or the height of an image

Styling Position for Images

Images are inserted in the page at the point in the text where the tag is specified in the HTML, and the text lines up with the bottom of the image
Messy? Hard to read?
A better way to place images in text is to flow the text around them

Styling Position for Images

You can either position the image on the left with the text to its right, or vice versa
To make the text flow around the image, use the style attribute in the image tag with the value "float:left" or "float:right“
To display an image without any text around it, enclose it in paragraph tags

Making an Image Link

We do not have to use text as the anchor
Images can be used as well
Combine an anchor tag with an image tag:
Red Box
When the page displays, the usual highlighting that links receive will be used to mark the .gif as a link

Add Extra Information

To benefit from the automatic checking service, you need to add three more lines to the starterPage.html
These lines are not required for the file to be a proper HTML page, but they are needed by the checking service
Before the tag, add the lines:

Go to www.w3.org/QA/2002/04/valid-dtd-list.html for exact format

Add Extra Information

The other line that we need to add is

between and <br>This code specifies that the character encoding for the Web page will be UTF-8, or Unicode Translation Format for bytes<br>This Unicode representation will be explained in Chapter 7</p></strong> </div> </div> <div class="media-material-detail-body-presentation__container"> <div class="media-material-detail-body-presentation-image__container"> <a href="https://fs.znanio.ru/d5af0e/fa/cd/8b92a5c74cc53bb4d426d5cd3ad86f7db7.jpg" title="Ссылка на снимок материала: Adds, plays and manages video settings on a web page" target="_blank"> <img class="media-material-detail-body-presentation-image__snapshot" src="https://fs.znanio.ru/d5af0e/fa/cd/8b92a5c74cc53bb4d426d5cd3ad86f7db7.jpg" alt="Adds, plays and manages video settings on a web page" loading="lazy" /> </a> </div> <div class="media-material-detail-body-presentation-text__container"> <p><strong><video> - </strong>Adds, plays and manages video settings on a web page. The file path is specified via the src attribute or the embedded <source> element. </p><p><!DOCTYPE html><br><html><br> <head><br> <meta charset="utf-8"><br> <title>video