Com Arts 155 1st Edition Lecture 9 Outline of Last Lecture I Designing for the Web II Website Navigation User Experience III Directory Structure IV Basics of HTML CSS V What s the Point Outline of Current Lecture I Internet Routing Paths II Directory Structure III Links and Images IV Tall Dark and Loathsome V Semantic HTML Elements VI Metadata VII Dreamweaver Current Lecture Internet Routing Paths Internet is basically a set of pipes and wires that information can flow through You can connect directly to the internet however most need an ISP to connect for us Content is always in some directory somewhere Directory Structure Every file on your website lives in a directory on some server Hyperlinks tell a client what file inside a directory to access Directories are just like the folders on your computer These notes represent a detailed interpretation of the professor s lecture GradeBuddy is best used as a supplement to your own notes not as a substitute Links and Images Relative Link Better choice than fixed Images Images are a lot like links They exist outside of the HTML and need to be directed to You should not have spaces Use underscores instead You need to have the extension jpg tif etc You should define width and height It may be better to do in CSS because we re going beyond just structure and onto presentation Attribute alt eric hoyt portrait If for some reason the image doesn t display this is what the user will see You ll get an impression of what should be there Think broadly about who your users are To make it accessible to everybody this is important to put there Title attribute if you hover over it with a mouse it will say that Align is better left to CSS Class is one of the ways you can make CSS and HTML speak to each other Need to end with a closing tag Documentary Tall Dark and Loathsome The Emergence of a Legend Matrix in the Digital Age Meme on the internet evoked girls to try to kill another There have been other violent acts that stem from media someone interprets something in a particular way The slender man is one of the first cases of that Interesting work going on in communities in terms of creating this Interesting use of Photoshop to take images and then collectively come up with a character that you place inside of it Semantic HTML Elements Nesting You can have a child element within a parent element and if you indent them inward it s easier to read to see where you are in the hierarchy Inheritance The properties of parent elements are inherited by most child and descendant elements This means that when you are writing style rules a really good element to start with is body body is the parent of all other elements visible on the page Element Examples The best elements describe structure and convey semantic meaning ul If you see a list you know how to interpret that It s different than an uninterrupted block of text table Table tags add structure but offer little semantic meaning You wonder why is it a table It s better to use other elements Why does semantic HTML code matter Better interoperability across browsers Improves search engine discovery If you do a good job with your semantic markup you re more likely to be found in the searches you want to be found in Important for screen readers and users with disabilities A lot of people don t experience the web visually and you want to design for them too Far easier to style with CSS Better for collaborative projects You can hand things off to a partner and they understand what s going on Commenting Commenting your code adds semantic meaning for you and other designer But it doesn t show on the user s screen Example of HTML that is semantic Nav Bar It s really clear You can describe the different menu items as an unordered list Then you describe them as list items and attach links Semantic b Bold Not semantic Purely visual strong It will appear bold by default gives more internal meaning p It is semantic You see a block of text It has meaning br You don t know why a random line break is there Are we at the end of a paragraph At the end of a list In general it s best to avoid this it s purely visual ul or p is better because they re semantic Metadata You may insert metadata inside the head of a HTML page by using the element meta Users don t see the metadata however search engines and browsers read it The meta element works with a series of attributes including description keywords author robots and pragma It s information that describes other information A great example is the alt attribute within an image They re not always self describing You can do the same thing with your website there may be certain important things that you want to high light You re making your website more discoverable It will make your website get more hits if you do it right You want 12 to 13 key words max Dreamweaver Can give quick visual rendering of what you re creating Spend most of your time in split screen or code view You can do a code and then quickly get a visual sense of how it might render Try it out in safari or other browsers Not good to add things outside of the code because it will make it inconsistent