HTML
jguerra[at}northeastern.edu | @duto_guerra
Slides:http://johnguerra.co/lectures/webDevelopment_fall2021/02_HTML/
Class page:https://johnguerra.co/classes/webDevelopment_fall_2021/
Readings discussion
- questions?
Random Questions
- What's a class?
- What's an attribute?
- What's the id?
- What's the difference between the head and the body
- Content vs Style
- What's the DOM
Setting up your environment
Working online
- Good for quick coding
- All being taken care
- Can share links
- Good for asking questions
- I recommend JSFiddle
Working locally
- Better for debugging and organizing
- Need setup
- Better linters!!
- I recommend Sublime
Setting up locally
Requirements
- Code editor
- HTTP Server
- HTTP Browser
Group Exercise
We have the tweets collected from yesterday for the class. Let's design a web page to show display and grade them.
Audience and objective
- Who are we targeting? Users
- What do we want them to do? Task
Resources
What do we have to show?
- Tweets
- Handle
- Text
- User image
- Date
- University Logo
- What else?
Wireframe it
Test it
Code it
Web Developer tools
HTML
HTML documents
- Attributes
- Anatomy
- Nesting
- Sections
- Header
- Nav Bar
- Main content
- Sidebar
- Footer
Common elements
- Images
- Links
- Headers
- Paragraphs
- Lists
- div, span
Forms
- inputs
- label
- submit
- form
Web Architectures
.svg)
Exercise
Design and write the HTML of your home page
- Code it and put it on github