CCT260H5 Lecture Notes - Lecture 4: Responsive Web Design, Hypertext, Javascript
17 May 2018
School
Department
Course
Professor
Class 4, Week 2 (Reminder, midterm next week, day 6!)
Intro to basic HTML
• Doctype
o Good form to designate what is to come as HTML
• Head
o Where document meta-information should be
▪ <head> tags and attributes
• While not necessary, good practice to separate document
metadata from content
• Can define many things here – but some (ex. Charset) are
assumed unless stated otherwise
• UTF-8 charset – pretty much every representable symbol
• Meta iforatio useful for SEO ad aessiilit ut do’t ause
meta keywords (Google identifies attempts and will bury/blacklist
sites)
• Body
o Where content should be
• Nested elements
o Failure to close tags in right place will mess things up
• HTML elements
o Traditionally, elements in lowercase
▪ Works upper-case as well
o Most elements have open/close tags, even if they work without them
o Many elements have attributes that pass on required info and can be useful
▪ Ex. Alt attributes in images – good for both accessibility and SEO
• <ig sr=”shools.jpg” alt=”WShools.o” idth=””
height=””>
o SRC = source (file name)
• Same with headers - <h> <h> …<h6> has speifi eaig to
screen readers and is scanned by search engine spiders to
understand semantic value of page
o Other semantic tags
▪ Same with <b> vs. <strong>; <i> vs. <em> - bold and italic is style (visual)
– strong and em implies marked text is important (semantics)
• Shows up the same but has different meanings
▪ <blockquote> <abbr> <address> <cite> - all have specific semantic
meanings, even if you can display this through other means, it often
makes sense to code the semantic value in HTML and worry about display
in CSS
▪ <a> = anchor
▪ <href> = hypertext reference
• Layout and Spacing
find more resources at oneclass.com
find more resources at oneclass.com
