Download presentation
Presentation is loading. Please wait.
1
HTML Assignment 01
2
Contents like images, text, Forms, etc Javascript programs, style rules, meta tags Start tag End tag HTML Page Structure
3
Name DOCTYPE declaration to identify HTML standard used Meta tag to identify how the characters of page are “encoded”
4
Name DOCTYPE declaration to identify HTML standard used Meta tag to identify how the characters of page are “encoded” <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> p. 73 text
5
Name <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <img > src =“filename“ attribute value alt =“description“ attribute (required) value
6
Name <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN“ "http://www.w3.org/TR/html4/strict.dtd"> <img>src =“filename“alt =“description“ Inline element img would have to be inside Block element like p strict HTML
7
Name <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN“ "http://www.w3.org/TR/html4/strict.dtd"> <img > src =“filename“alt =“description“ height =300width =300 image dimensions In pixels
8
Name <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN“ "http://www.w3.org/TR/html4/strict.dtd"> <img > src =“filename“alt =“description“ height =300width =300 pixel dimensions img{ height: 300px; width: 300px } alternatively use style rule In head
9
Name <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN“ "http://www.w3.org/TR/html4/strict.dtd"> <img>src =“filename“alt =“description“ img{ height: 300px; width: 300px } bgcolor=“cyan” deprecated allowed <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> but anyway – styles preferred body { background-color: cyan }
10
Name <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN“ "http://www.w3.org/TR/html4/strict.dtd"> <img>src =“filename“alt =“description“ img{ height: 300px; width: 300px } Error Console in Firefox is useful body { background-color: cyan } For example: body : { background-color: cyan } Browsers ignore rules with such errors.
11
Name <img > src =“filename“alt =“description“ height =300width =300 Headings are blocks Snapshot below. Paragraphs allow text & inline elements - Not blocks like h2 - Not Even for loose HTML ! Not allowed inside paragraph p <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
12
Name <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN“ "http://www.w3.org/TR/html4/strict.dtd"> <img>src =“filename“alt =“description“ Hyperlink - inline element <a>href =“URL“descriptor Relative file address -or complete URL Text of hyperlink HYPERLINKS
13
Name <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN“ "http://www.w3.org/TR/html4/strict.dtd"> <img>src =“filename“alt =“description“ <a>href =“URL“descriptor S/b.gif S b.gif current directory Not ! /S/b.gif
14
Block and Inline elements Sometimes block elements -- can contain other block elements. Sometimes they can’t…like paragraphs p.
15
Page.html Image2.png Image1.png Initial dir Sub-dir Image3.png hyperlink Assignment 01 File Configuration Use strict HTML
16
Representation Errors – such as for Images Capture screen image with Alt – Print Scrn Paste in mspaint.exe Save under type PNG But name as z.gif Browser display fails - broken icon in IE – or alt text in Firefox as img Check file name ( = z.gif ) Drop file in TextPad – note Hex format file header has: PNG
Similar presentations
