HTML

Содержание

1. HTML
2. Block-Level vs. Inline ElementsThis worksBold and italicHow
3. Block-Level vs. Inline ElementsPartial list of block-level
4. AttributeAn attribute is a special code that
5. Common Attributesidunique identifier for elementsclassthe class of
6. Common AttributesExamples 1Assuming style sheet contains.indent { margin-right: 5%; margin-left: 5%;}Example 2
7. Common Attributeslangsets the language code; “en”: English,
8. Deprecated AttributesIn order to separate structure from
9. ListsOrdered lists & Unordered lists for ordered
10. ListsNested lists Top Level, Item 1 Top Level, Item
11. Customizing List DisplayList numbers or marks can be customized“type” attributeExample
12. Definition Lists for list element; for “definition
13. Tables Tables used not only for displaying
14. TablesBy defaultText in each cell is automatically
15. TablesOther attributes of align, cellpadding, cellspacing, colspanYet
16. IframeUsed to display a web page within a web page.height, width, src, style, nameExampleW3Schools.com
17. LinksThe true power of WWW comes with
18. LinksExternal LinksText/imageCreate a link to CS web
19. LinksCombining External and Internal LinksLink Text
20. Images Insert an image using tagImage can
21. ImagesAlternative Text for imagesExamplewidth & height attributes
22. Скачать презентанцию

Block-Level vs. Inline ElementsThis worksBold and italicHow about thisBold and italicBlock-level element/tagdefine a complete section or block of textCan contain inline element and block-level elementInline elementsDefine the structure of a sequence

Слайды и текст этой презентации

Слайд 1Computation and Problem Solving
HTML

Korzhumbayev Azamat

Слайд 2Block-Level vs. Inline Elements
This works
Bold and italic
How about this
Bold and

italic
Block-level element/tag
define a complete section or block of text
Can contain

inline element and block-level element
Inline elements
Define the structure of a sequence of characters within a line
may not contain a block-level element
may be used within a block

Block-Level vs. Inline ElementsThis worksBold and italicHow about thisBold and italicBlock-level element/tagdefine a complete section or block

Слайд 3Block-Level vs. Inline Elements
Partial list of block-level tags
p, blockquote, h1

… h6, div, ul, ol, li, table, tr, td, th

Partial

list of inline tags
a (anchor tag), em, strong, img, q (short quotation), span
Example

This is a simple paragraph.

Block-Level vs. Inline ElementsPartial list of block-level tagsp, blockquote, h1 … h6, div, ul, ol, li, table,

Слайд 4Attribute
An attribute is a special code that can enhance or

modify a tag. They are generally located in the starting

tag after the tag name.
Basic syntax for xhtml tags and attributes

All tags must be lower case
all values of attributes need to be surrounded by quotes

AttributeAn attribute is a special code that can enhance or modify a tag. They are generally located

Слайд 5Common Attributes
id
unique identifier for elements
class
the class of the element, used

to specify similar attributes for dissimilar elements by putting them

in the same class
style
an inline style definition
title
a text to display in a tool tip

Common Attributesidunique identifier for elementsclassthe class of the element, used to specify similar attributes for dissimilar elements

Слайд 6Common Attributes
Examples 1

Assuming

style sheet contains
.indent { margin-right: 5%; margin-left: 5%;}
Example 2

style=“margin-right: 5%; margin-left: 5%;” title=“This paragraph introduces html attributes”>

Слайд 7Common Attributes
lang
sets the language code; “en”: English, “fr”: French, “es”:

Spanish, “de”: German etc.
dir
sets the text direction, left to right

or right to left

bonjour!

accesskey
assigns an access key to an element. An access key is a single character from the document character set.
tabindex
Sets the tab order of an element

Common Attributeslangsets the language code; “en”: English, “fr”: French, “es”: Spanish, “de”: German etc.dirsets the text direction,

Слайд 8Deprecated Attributes
In order to separate structure from presentation
many HTML attributes/tags

used for presentation were deprecated, starting from HTML version 4
Some

deprecated attributes
font, Text
align,

Centered text

bgcolor, width, height, etc.

Deprecated AttributesIn order to separate structure from presentationmany HTML attributes/tags used for presentation were deprecated, starting from

Слайд 9Lists
Ordered lists & Unordered lists
for ordered
for unordered
for

each item inside the list
Browser inserts a blank line before

& after the list (block-level element)
Example

Item 1
Item 2
Item3

ListsOrdered lists & Unordered lists for ordered for unordered for each item inside the listBrowser inserts a

Слайд 10Lists
Nested lists

Top Level, Item 1
Top Level, Item 2

Sublevel 1, Item

1

Sublevel 2, Item 1
Sublevel 2, Item 2

Sublevel 1, Item 2

Top

Level, Item 3

ListsNested lists Top Level, Item 1 Top Level, Item 2 Sublevel 1, Item 1 Sublevel 2, Item 1 Sublevel 2, Item 2 Sublevel

Слайд 11Customizing List Display
List numbers or marks can be customized
“type” attribute
Example

type=“square”>

Слайд 12Definition Lists
for list element; for “definition terms”;

for “definition data”
Example
CPU Central Processing Unit ALU Arithmetic Logic Unit GHz Gigahertz

Definition Lists for list element; for “definition terms”; for “definition data”Example CPU Central Processing Unit ALU Arithmetic

Слайд 13Tables
Tables used not only for displaying data in tabular

format
A table () in HTML
Consists of rows ()
Each row consists

of rectangular boxes called cells ()

R1,Cell1	R1,Cell2
R2,Cell1	R2,Cell2

Tables Tables used not only for displaying data in tabular formatA table () in HTMLConsists of rows

Слайд 14Tables
By default
Text in each cell is automatically aligned to the

left
All the cells in a column have the same width
Width

of the column is determined by the cell with the most text in it
for “table header” Header1 Header2

TablesBy defaultText in each cell is automatically aligned to the leftAll the cells in a column have

Слайд 15Tables
Other attributes of
align, cellpadding, cellspacing, colspan
Yet XHTML 1.0 Strict

don’t allow this attributes, so use stylesheet instead
Example

, ,

TablesOther attributes of align, cellpadding, cellspacing, colspanYet XHTML 1.0 Strict don’t allow this attributes, so use stylesheet

Слайд 16Iframe
Used to display a web page within a web page.
height,

width, src, style, name
Example

target="iframe_a">W3Schools.com

Слайд 17Links
The true power of WWW comes with hyperlinks
Surfer click on

a specially marked word or image on a web page

and automatically be jumped to another web page or another place in the same web page.
Another web page – External link
Another place – Internal link
Use (anchor) tag to create a link

LinksThe true power of WWW comes with hyperlinksSurfer click on a specially marked word or image on

Слайд 18Links
External Links
Text/image
Create a link to CS web page
CET

Department at IITU
Be careful about the quotation mark
Internal Links Create

a place/anchor
or
Link to the anchor
Go to some place

LinksExternal LinksText/imageCreate a link to CS web pageCET Department at IITUBe careful about the quotation markInternal Links

Слайд 19Links
Combining External and Internal Links
Link Text

Слайд 20Images
Insert an image using tag

image file” />
Image can an image on a remote machine

on the Internet, or an image in your local machine.
Examples,

Images Insert an image using tagImage can an image on a remote machine on the Internet, or

Слайд 21Images
Alternative Text for images

Example

alt="Lake Karakul"/>
width & height attributes

ImagesAlternative Text for imagesExamplewidth & height attributes

Скачать презентацию

Разделы презентаций

HTML

Содержание

Слайды и текст этой презентации

Слайд 1Computation and Problem SolvingHTMLKorzhumbayev Azamat

Слайд 2Block-Level vs. Inline ElementsThis worksBold and italicHow about thisBold and

italicBlock-level element/tagdefine a complete section or block of textCan contain

Слайд 3Block-Level vs. Inline ElementsPartial list of block-level tagsp, blockquote, h1

… h6, div, ul, ol, li, table, tr, td, thPartial

Слайд 4AttributeAn attribute is a special code that can enhance or

modify a tag. They are generally located in the starting

Слайд 5Common Attributesidunique identifier for elementsclassthe class of the element, used

to specify similar attributes for dissimilar elements by putting them

Слайд 6Common AttributesExamples 1Assuming

style sheet contains.indent { margin-right: 5%; margin-left: 5%;}Example 2

Слайд 7Common Attributeslangsets the language code; “en”: English, “fr”: French, “es”:

Spanish, “de”: German etc.dirsets the text direction, left to right

Слайд 8Deprecated AttributesIn order to separate structure from presentationmany HTML attributes/tags

used for presentation were deprecated, starting from HTML version 4Some

Слайд 9ListsOrdered lists & Unordered lists for ordered for unordered for

each item inside the listBrowser inserts a blank line before

Слайд 10ListsNested lists Top Level, Item 1 Top Level, Item 2 Sublevel 1, Item

1 Sublevel 2, Item 1 Sublevel 2, Item 2 Sublevel 1, Item 2 Top

Слайд 11Customizing List DisplayList numbers or marks can be customized“type” attributeExample

type=“square”>

Слайд 12Definition Lists for list element; for “definition terms”;

for “definition data”Example CPU Central Processing Unit ALU Arithmetic Logic Unit GHz Gigahertz

Слайд 13Tables Tables used not only for displaying data in tabular

formatA table () in HTMLConsists of rows ()Each row consists

Слайд 14TablesBy defaultText in each cell is automatically aligned to the

leftAll the cells in a column have the same widthWidth

Слайд 15TablesOther attributes of align, cellpadding, cellspacing, colspanYet XHTML 1.0 Strict

don’t allow this attributes, so use stylesheet insteadExample, ,

Слайд 16IframeUsed to display a web page within a web page.height,

width, src, style, nameExample

Слайд 17LinksThe true power of WWW comes with hyperlinksSurfer click on