To Do This Week:
DUE: Submit the Blackbird HTML
Once you have completed the HTML for the Blackbird project (mostly done in class), upload the “blackbird” folder to the server following the FTP instruction from last week. – Due Friday
In Class
Codecademy strategies. Focus on patterns:
<element attribute=”value”></attribute>
Backup by uploading regularly!
File names! lowercase, no spaces
How to find your project url?
dtc-wsuv.org/yourfoldername/projectname/
blackbird-projects-01-fall2024.html
blackbird-projects-02-fall2024.html
infocards-01-fall2024.html
infocards-02-fall2024.html
Validate Blackbird HTML | Web Developer
FTP issues?
Open Blackbird in Sublime Text.
Add a wrapper – <div id=”wrapper”></div> – to surround all the content of the body.
Sublime Text:
- open folder!
- sidebar toggle
- word wrap
- find/replace
HTML Flow demo
- add color borders to elements to see structure
- width, height and overflow
- block vs. inline element
- attributes: id, class and style
Web Images
- resize for web
- file formats: gif, png, jpg
- transparency
- images are inline
- style dimension vs actual dimension
- resolutions and ppi
HTML Review:
- HTML: Hypertext Markup Language
- HTTP: Hypertext Transfer Protocol
- FTP: File Transfer Protocol
- absolute vs. relative urls
- index.html
- Basic HTML structure for a page: <html><head></head><body></body></html>
- <title></title>
- HTML syntax: <element attribute=”value”></element>
- HTML5 semantic elements: p, img, header, nav, article, section, aside, footer
- parents and children (nested elements)
- block vs. inline
- headings: h1-6
- <div> and <span>
- <p>, <em>, <small>, <br>, <img>
- attributes: id and class, style
- <a>: anchor (internal) and external links
- doctype declaration: <!DOCTYPE html>
- HTML commenting:
<!-- comment --> - Validating HTML
Nouspace Student Gallery – Blackbird Projects
CSS next week…
WORKSHOP