Website Authoringlwc1/files/files/s3_cl... · Publish your site Adding one more page ... Adding...
34
Website Authoring
Transcript of Website Authoringlwc1/files/files/s3_cl... · Publish your site Adding one more page ... Adding...
![Page 1: Website Authoringlwc1/files/files/s3_cl... · Publish your site Adding one more page ... Adding images HTML entities ... Video Lists ...](https://reader036.fdocuments.us/reader036/viewer/2022063016/5fd58faf55cdbe213a37c55c/html5/thumbnails/1.jpg)
Website Authoring
![Page 2: Website Authoringlwc1/files/files/s3_cl... · Publish your site Adding one more page ... Adding images HTML entities ... Video Lists ...](https://reader036.fdocuments.us/reader036/viewer/2022063016/5fd58faf55cdbe213a37c55c/html5/thumbnails/2.jpg)
Basic stuffs
![Page 4: Website Authoringlwc1/files/files/s3_cl... · Publish your site Adding one more page ... Adding images HTML entities ... Video Lists ...](https://reader036.fdocuments.us/reader036/viewer/2022063016/5fd58faf55cdbe213a37c55c/html5/thumbnails/4.jpg)
Structure of an HTML file
●●●●
![Page 5: Website Authoringlwc1/files/files/s3_cl... · Publish your site Adding one more page ... Adding images HTML entities ... Video Lists ...](https://reader036.fdocuments.us/reader036/viewer/2022063016/5fd58faf55cdbe213a37c55c/html5/thumbnails/5.jpg)
Normal text (paragraph) and headings
●●
![Page 6: Website Authoringlwc1/files/files/s3_cl... · Publish your site Adding one more page ... Adding images HTML entities ... Video Lists ...](https://reader036.fdocuments.us/reader036/viewer/2022063016/5fd58faf55cdbe213a37c55c/html5/thumbnails/6.jpg)
Font styles
●●●●
![Page 7: Website Authoringlwc1/files/files/s3_cl... · Publish your site Adding one more page ... Adding images HTML entities ... Video Lists ...](https://reader036.fdocuments.us/reader036/viewer/2022063016/5fd58faf55cdbe213a37c55c/html5/thumbnails/7.jpg)
Publish your site
●●
●●
![Page 8: Website Authoringlwc1/files/files/s3_cl... · Publish your site Adding one more page ... Adding images HTML entities ... Video Lists ...](https://reader036.fdocuments.us/reader036/viewer/2022063016/5fd58faf55cdbe213a37c55c/html5/thumbnails/8.jpg)
Adding one more page
●●●
![Page 9: Website Authoringlwc1/files/files/s3_cl... · Publish your site Adding one more page ... Adding images HTML entities ... Video Lists ...](https://reader036.fdocuments.us/reader036/viewer/2022063016/5fd58faf55cdbe213a37c55c/html5/thumbnails/9.jpg)
Adding images
●
●●●
![Page 10: Website Authoringlwc1/files/files/s3_cl... · Publish your site Adding one more page ... Adding images HTML entities ... Video Lists ...](https://reader036.fdocuments.us/reader036/viewer/2022063016/5fd58faf55cdbe213a37c55c/html5/thumbnails/10.jpg)
HTML entities
●
●
●
![Page 11: Website Authoringlwc1/files/files/s3_cl... · Publish your site Adding one more page ... Adding images HTML entities ... Video Lists ...](https://reader036.fdocuments.us/reader036/viewer/2022063016/5fd58faf55cdbe213a37c55c/html5/thumbnails/11.jpg)
Intro to CSS
![Page 12: Website Authoringlwc1/files/files/s3_cl... · Publish your site Adding one more page ... Adding images HTML entities ... Video Lists ...](https://reader036.fdocuments.us/reader036/viewer/2022063016/5fd58faf55cdbe213a37c55c/html5/thumbnails/12.jpg)
Advantages of CSS
●●●
●
![Page 13: Website Authoringlwc1/files/files/s3_cl... · Publish your site Adding one more page ... Adding images HTML entities ... Video Lists ...](https://reader036.fdocuments.us/reader036/viewer/2022063016/5fd58faf55cdbe213a37c55c/html5/thumbnails/13.jpg)
CSS syntax
this style
![Page 14: Website Authoringlwc1/files/files/s3_cl... · Publish your site Adding one more page ... Adding images HTML entities ... Video Lists ...](https://reader036.fdocuments.us/reader036/viewer/2022063016/5fd58faf55cdbe213a37c55c/html5/thumbnails/14.jpg)
Selectors
●●
●
●
![Page 15: Website Authoringlwc1/files/files/s3_cl... · Publish your site Adding one more page ... Adding images HTML entities ... Video Lists ...](https://reader036.fdocuments.us/reader036/viewer/2022063016/5fd58faf55cdbe213a37c55c/html5/thumbnails/15.jpg)
Things we can do with CSS
●●●●●●
![Page 16: Website Authoringlwc1/files/files/s3_cl... · Publish your site Adding one more page ... Adding images HTML entities ... Video Lists ...](https://reader036.fdocuments.us/reader036/viewer/2022063016/5fd58faf55cdbe213a37c55c/html5/thumbnails/16.jpg)
Colours
●●●●●
![Page 17: Website Authoringlwc1/files/files/s3_cl... · Publish your site Adding one more page ... Adding images HTML entities ... Video Lists ...](https://reader036.fdocuments.us/reader036/viewer/2022063016/5fd58faf55cdbe213a37c55c/html5/thumbnails/17.jpg)
●●
●●
Colours with alpha (semi-transparent)
Sample text
![Page 18: Website Authoringlwc1/files/files/s3_cl... · Publish your site Adding one more page ... Adding images HTML entities ... Video Lists ...](https://reader036.fdocuments.us/reader036/viewer/2022063016/5fd58faf55cdbe213a37c55c/html5/thumbnails/18.jpg)
Font
●●●
![Page 19: Website Authoringlwc1/files/files/s3_cl... · Publish your site Adding one more page ... Adding images HTML entities ... Video Lists ...](https://reader036.fdocuments.us/reader036/viewer/2022063016/5fd58faf55cdbe213a37c55c/html5/thumbnails/19.jpg)
Font style
●●●
●●
![Page 20: Website Authoringlwc1/files/files/s3_cl... · Publish your site Adding one more page ... Adding images HTML entities ... Video Lists ...](https://reader036.fdocuments.us/reader036/viewer/2022063016/5fd58faf55cdbe213a37c55c/html5/thumbnails/20.jpg)
Line spacing
●●
![Page 21: Website Authoringlwc1/files/files/s3_cl... · Publish your site Adding one more page ... Adding images HTML entities ... Video Lists ...](https://reader036.fdocuments.us/reader036/viewer/2022063016/5fd58faf55cdbe213a37c55c/html5/thumbnails/21.jpg)
Spacing (box model)
●●●●
![Page 22: Website Authoringlwc1/files/files/s3_cl... · Publish your site Adding one more page ... Adding images HTML entities ... Video Lists ...](https://reader036.fdocuments.us/reader036/viewer/2022063016/5fd58faf55cdbe213a37c55c/html5/thumbnails/22.jpg)
Borders
●
●●
●
![Page 23: Website Authoringlwc1/files/files/s3_cl... · Publish your site Adding one more page ... Adding images HTML entities ... Video Lists ...](https://reader036.fdocuments.us/reader036/viewer/2022063016/5fd58faf55cdbe213a37c55c/html5/thumbnails/23.jpg)
More useful properties to search for
●
●
![Page 24: Website Authoringlwc1/files/files/s3_cl... · Publish your site Adding one more page ... Adding images HTML entities ... Video Lists ...](https://reader036.fdocuments.us/reader036/viewer/2022063016/5fd58faf55cdbe213a37c55c/html5/thumbnails/24.jpg)
Useful online tools (Google these terms)
●●●●●●
![Page 25: Website Authoringlwc1/files/files/s3_cl... · Publish your site Adding one more page ... Adding images HTML entities ... Video Lists ...](https://reader036.fdocuments.us/reader036/viewer/2022063016/5fd58faf55cdbe213a37c55c/html5/thumbnails/25.jpg)
Time for mix and match!
![Page 26: Website Authoringlwc1/files/files/s3_cl... · Publish your site Adding one more page ... Adding images HTML entities ... Video Lists ...](https://reader036.fdocuments.us/reader036/viewer/2022063016/5fd58faf55cdbe213a37c55c/html5/thumbnails/26.jpg)
More on web pages
![Page 27: Website Authoringlwc1/files/files/s3_cl... · Publish your site Adding one more page ... Adding images HTML entities ... Video Lists ...](https://reader036.fdocuments.us/reader036/viewer/2022063016/5fd58faf55cdbe213a37c55c/html5/thumbnails/27.jpg)
Layout of web pages
Header
Navigation Content
Footer (optional)
![Page 28: Website Authoringlwc1/files/files/s3_cl... · Publish your site Adding one more page ... Adding images HTML entities ... Video Lists ...](https://reader036.fdocuments.us/reader036/viewer/2022063016/5fd58faf55cdbe213a37c55c/html5/thumbnails/28.jpg)
HTML5 structure tags
●●●●●
![Page 29: Website Authoringlwc1/files/files/s3_cl... · Publish your site Adding one more page ... Adding images HTML entities ... Video Lists ...](https://reader036.fdocuments.us/reader036/viewer/2022063016/5fd58faf55cdbe213a37c55c/html5/thumbnails/29.jpg)
Example HTML5 document
![Page 30: Website Authoringlwc1/files/files/s3_cl... · Publish your site Adding one more page ... Adding images HTML entities ... Video Lists ...](https://reader036.fdocuments.us/reader036/viewer/2022063016/5fd58faf55cdbe213a37c55c/html5/thumbnails/30.jpg)
CSS descendant selectors
●●
![Page 31: Website Authoringlwc1/files/files/s3_cl... · Publish your site Adding one more page ... Adding images HTML entities ... Video Lists ...](https://reader036.fdocuments.us/reader036/viewer/2022063016/5fd58faf55cdbe213a37c55c/html5/thumbnails/31.jpg)
Audio
●●●●
![Page 32: Website Authoringlwc1/files/files/s3_cl... · Publish your site Adding one more page ... Adding images HTML entities ... Video Lists ...](https://reader036.fdocuments.us/reader036/viewer/2022063016/5fd58faf55cdbe213a37c55c/html5/thumbnails/32.jpg)
Video
●
![Page 33: Website Authoringlwc1/files/files/s3_cl... · Publish your site Adding one more page ... Adding images HTML entities ... Video Lists ...](https://reader036.fdocuments.us/reader036/viewer/2022063016/5fd58faf55cdbe213a37c55c/html5/thumbnails/33.jpg)
Lists
●●●