CCT260H5 Lecture Notes - Lecture 5: Html Attribute, Creative Commons, Xml
23 May 2018
School
Department
Course
Professor
Day 5, Week 3
Simple website folder structure
• Root (folder)
o Images (folder)
▪ .jpg (file)
o Index.html (file)
o _css (folder)
▪ .css (file)
Test your file paths
• Relative = provides a file path that is related to the current page (likely pointing to a file in the
images folder)
o Eaple: <ig sr=/iages/fileae.jpg
• Absolute = provides the complete URL to an online file
o Example: <img src=http://...ca/image/filename.jpg
• Check images
o Test image path
▪ <img src=alt=style=>
• Check style sheet
o Test style sheet path
▪ <link> in <head>
• HTML elements continued
o Block elements – start on a new line and takes up all available space (width)
▪ Example: <div>, <table>, <blockquote>
o Inline elements – do not start on a new line and only take the space need
▪ Example: <span>, <strong>, <a>, <img>
o <di> ad <spa> oth defie setios of a htl douet
• HTML attributes
o Class attribute – specifies one or more classnames for an element
▪ Class attribute mostly used to point to a class in a style sheet
▪ Can be used similarly for JavaScript as well, denoted with (.)
o ID attribute – specifies a unique id for an HTML element (value must be unique within
HTML document)
▪ Most used to point to a style in a style sheet, and by JavaScript (via the HTML
DOM) to manipulate the element with the specific id, denoted with (#)
o Class vs. ID explained:
▪ ID selector is used to specify a style for a single unique element, the ID selector
uses the ID attriute of the HTML eleet ad is defied ith a #. Class. The
class selector is used to specify a style for a group of elements
Layout: New Elements HTML5
• <header> and <footer> - previously used block elements <div> to create and style accordingly
o New elements help search engines separate content from important info for users
find more resources at oneclass.com
find more resources at oneclass.com
