Com Arts 155 1st Edition Lecture 9Outline of Last Lecture I. Designing for the WebII. Website Navigation & User ExperienceIII. Directory StructureIV. Basics of HTML & CSSV. What’s the Point?Outline of Current Lecture I. Internet Routing PathsII. Directory StructureIII. Links and ImagesIV. Tall, Dark and LoathsomeV. Semantic HTML ElementsVI. MetadataVII. DreamweaverCurrent LectureInternet 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 somewhereDirectory 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 computerThese 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 tagDocumentary: “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 itSemantic 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 youdescribe 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 semanticMetadata 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 yourwebsite; 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
View Full Document
Unlocking...