WEEK 3: HTML Flow (Jan 21)

To Do This Week

Blackbird HTML Submission

Due: Friday

  • Complete the HTML for the Blackbird project (mostly done in class).
  • Upload the “blackbird” folder to the server following last week’s FTP instructions.

In-Class Activities

Codecademy Strategies

  • Focus on recognizing and using patterns: <element attribute="value"></element>

Best Practices

  • Backup: Upload your projects regularly.
  • File Names: Use lowercase letters and avoid spaces.

Finding Your Project URL

Format: dtc-wsuv.org/yourfoldername/projectname/

  • blackbird-projects-01-fall2024.html
  • blackbird-projects-02-fall2024.html
  • infocards-01-fall2024.html
  • infocards-02-fall2024.html

Validating HTML

Use the Web Developer extension to validate your Blackbird HTML. Troubleshoot any issues with your code or FTP uploads as needed.

Blackbird HTML

  • Download the example: info-card-example.ZIP
  • Open the Blackbird project in Sublime Text.
  • Wrap all content inside a <div id="wrapper"></div>.

Sublime Text Tips

  • Open project folder.
  • Use the sidebar toggle for navigation.
  • Enable word wrap for better readability.
  • Use find/replace for efficient editing.

HTML Flow Demo

  • Add color borders to elements to visualize structure.
  • Adjust width, height, and overflow properties.
  • Understand block vs. inline elements.
  • Practice using attributes: id, class, and style.

Web Images

  • Resize images for web use.
  • File formats: GIF, PNG, JPG
  • Transparency considerations.
  • Style dimensions vs. actual dimensions.
  • Understand resolutions and PPI.

HTML Review

  • HTML: Hypertext Markup Language
  • HTTP: Hypertext Transfer Protocol
  • FTP: File Transfer Protocol
  • Absolute vs. relative URLs
  • index.html
  • Basic structure: <html><head></head><body></body></html>
  • <title></title>
  • HTML5 semantic elements: p, img, header, nav, article, section, aside, footer
  • Nested elements: parents and children
  • Block vs. inline elements
  • Headings: h1 to h6
  • Common tags: <div>, <span>, <p>, <em>, <small>, <br>, <img>
  • Attributes: id, class, style
  • <a>: Internal and external links
  • Doctype declaration: <!DOCTYPE html>
  • Comments: <!-- comment -->

Helpful Resources

  • HTML tag reference
  • Nouspace Student Gallery: Blackbird Projects

Next Week

Introduction to CSS!

Workshop

  • Hands-on practice with HTML and project setup
  • Reviewing Blackbird HTML structure and validation

 

 

 

 

 

 

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?

Blackbird HTML 

 info-card-example.ZIP

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:

  1. HTML: Hypertext Markup Language
  2. HTTP: Hypertext Transfer Protocol
  3. FTP: File Transfer Protocol
  4. absolute vs. relative urls
  5. index.html
  6. Basic HTML structure for a page: <html><head></head><body></body></html>
  7. <title></title>
  8. HTML syntax: <element attribute=”value”></element>
  9. HTML5 semantic elements: p, img, header, nav, article, section, aside, footer
  10. parents and children (nested elements)
  11. block vs. inline
  12. headings: h1-6
  13. <div> and <span>
  14. <p>, <em>, <small>, <br>, <img>
  15. attributes: id and class, style
  16. <a>: anchor (internal) and external links
  17. doctype declaration: <!DOCTYPE html>
  18. HTML commenting: <!-- comment -->
  19. Validating HTML 

HTML tag reference

Nouspace Student Gallery – Blackbird Projects

CSS next week…

WORKSHOP