1Development Techniques. HTML _presentation4_ 2 variant
Оценка 4.6

1Development Techniques. HTML _presentation4_ 2 variant

Оценка 4.6
ppt
09.05.2020
1Development Techniques. HTML _presentation4_ 2 variant
1Development Techniques. HTML _presentation4_ 2 variant.ppt

HTML

HTML

HTML

Learning objective 10.4.2.1 use

Learning objective 10.4.2.1 use

Learning objective
10.4.2.1 use HTML tags when developing webpages

Web Pages Web pages are created, stored, and sent in encoded form

Web Pages Web pages are created, stored, and sent in encoded form

Web Pages

Web pages are created, stored, and sent in encoded form
A browser converts them to what we see on the screen
Hypertext Markup Language (HTML) is the main language used to define how a Web page should look
Features like background color, font, and layout are specified in HTML

Marking Up with HTML The words on a

Marking Up with HTML The words on a

Marking Up with HTML

The words on a Web page are embellished by hidden formatting
There is XHTML or the Extensible Hypertext Markup Language
We will use HTML
XHTML tags are also HTML tags, but not vice versa
There are some parts of the original HTML that are not part of XHTML

Formatting with Tags Tags are words or abbreviations enclosed in angle brackets, < and >

Formatting with Tags Tags are words or abbreviations enclosed in angle brackets, < and >

Formatting with Tags

Tags are words or abbreviations enclosed in angle brackets, < and >
Many tags come in pairs
The second of the pair comes with a slash: Fluency
In HTML, the tags may be upper or lowercase , <Title>, and <tITle> are <i>legal<br></i>XHTML is more restrictive<br>The tag pair surrounds the text to be formatted like parentheses</p></strong>

Required Tags Starter other stuff goes here…that will come later

Required Tags Starter other stuff goes here…that will come later

Required Tags

Starter other stuff goes here…that will come later

The head section contains the beginning material like the title and other information that applies to the whole page

Required Tags the main content of the page goes here

Required Tags the main content of the page goes here

Required Tags

the main content of the page goes here

The body section contains the content of the page.

This form must always be followed
All of these tags are required

Making Links two parts to a hyperlink the highlighted text in the current document, which is called the anchor text the address of the other

Making Links two parts to a hyperlink the highlighted text in the current document, which is called the anchor text the address of the other

Making Links

two parts to a hyperlink
the highlighted text in the current document, which is called the anchor text
the address of the other Web page, called the hyperlink reference
both parts are specified in the anchor tag using attributes

Marking Links with Anchor Tags

Marking Links with Anchor Tags

Marking Links with Anchor Tags

Both parts of the hyperlink are specified in the anchor tag:
Begin with and make sure there’s a space after the a but not before it. a is for anchor
Give the hyperlink reference using the href attribute href="filename", making sure to include the double quotes
Close the anchor tag with the > symbol
Give the anchor text, which will be highlighted when it is displayed by the browser
End the hyperlink with the tag

Bertrand Russell

Bertrand Russell

Bertrand Russell

Structure of the Image Tag An image tag specifies a file that contains an image: src is the abbreviation for “source” filename uses the same…

Structure of the Image Tag An image tag specifies a file that contains an image: src is the abbreviation for “source” filename uses the same…

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

Structure of the Image Tag The alt tag was introduced to assist persons who are visually impaired

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

Image File Types the file name needs to use the correct file extension

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

Attributes for Image Tags The attributes width and height of the image tag can be used to specify the size of an image

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

1Development Techniques. HTML _presentation4_ 2 variant

1Development Techniques. HTML _presentation4_ 2 variant

Summary Recall the idea of using tags for formatting:

Summary Recall the idea of using tags for formatting:

Summary

Recall the idea of using tags for formatting:
A working set of HTML tags, giving you the ability to create a Web page
An explanation of how links are marked with anchor tags
Absolute and relative pathnames. Relative pathnames refer to files deeper or higher in the directory hierarchy
The two most popular image formatting schemes and how to place them in a page
Cascading Style Sheets, a general system for styling Web documents
Lists and tables
The precision achievable by using classes

Скачать файл