Reading Notes Home
HTML Reading Notes
Duckett: HTML&CSS CH1
Structure
How a well a webpage is structured will determine the success in catching and keeping the attention of the audience. When creating a structure, it is important to do so with the goal of clearly stating and portraying the message to be delivered, and making the different pages easily accessible and relevent to the overal goal.
The structure of a webpage first, consists of organizing bodies of texts, photos and other information into headings, subheading, paragraphs and a footing.
HTML code within angled brackets <> which makes them elements. Elements are made up by tags showing as opening and closing. For example <> </>. When a bunch of HTML elements are put together, the structure of a webpage and the contents within each section will begin to show form by priority
This is the start of creating a webpage’s wireframe.
Duckett: HTML&CSS CH8
DOCTYPES
Relays to browser which version of HTML is being used to creat a page.
Adds comments to code.
id and class
Allows the creator to identify particular elements, this helps with edit through CSS.
<div>
Lets creators group ‘block-level’ and ‘inline’ elements together.
Awesome, this element makes a window on a page where another page can be shown.
Using this, creators can include information about the webbpage
Different Versions of HTML
HTML 4 - 1997
No longer recommended to be used by modern day creators. it’s pretty out of date.
XHTML 1.0 - 2000
XHTML was created to follow the rules of XML from 1998 which made stricter rules for writing markup. Some other versions of XHTML 1.0 are,
- Strict XHTML 1.0
- Transitional XHTML 1.0
- XHTML 1.0 Frameset
HTML5 - In progress
In this version, creators will not need to close all tags. New elements and attributes are in the mix as well. Although it is not yet complete, creators can use some of the features as long as we are mindful of how users with older browsers, may or may not be able to view webpages.
Duckett: HTML&CSS CH17
HTML5
HTML5 is introducing new elements that result in clearer code and the ability to better show and describe a the overall structure of a webbpage.
Older browsers won’t recognize these newer element and must be told which elements are “block-level”.
Extra JS needs to be installed in Internet Explorers 8 and older in order for the new HTML5 elements to work.
Duckett:HTML&CSS CH18
Designing My Website
Who is my target audience?
- Is it a company, or an individual? Age? Gender? Where do they live? What level of Education do they have? What kind of device are they using to view the site? etc.
- What are visitors looking for? What is the goal?
- Do I need to include information so they can contact me?
- What information do they need? Am I telling them about a project, service or sharing general information?
- how often do I need to update my website?
- Do I need to include a nav bar? How should I organize the site into sections or pages while maintaing focus on the goals?
Creating a wireframe for my website
Where to start?
- Make a sketch of how the site should appear
- Where are my headings? Subheadings?
- Where will I place the bodies of text?
- Will there be photos?
When making the rough draft/basic layout
- header
- footer
- main
- mian+body= the content which shows
Consider the visual design to help get the message across
- Logos?
- Nav bar?
- Links to related content?
- Subscription/Comment boxes?
- Links to related content?
Navigation needs to be…
- Concise
- Clear
- Selective make sure it aligns with contents/information to be found on each page
- Context
- Interactive
- CONSISTENCY
Be sure to prioritize content of website
- Make sure the main messages can stand out. Some parts of the webbpage should look distinct in comparison to other parts of the page. Creat a visual hierarchy to help draw and keep the attention of visitors.
Visual hierarchy
- Size
- Color
- Style
- Visual contrast
How should it all be organized?
- Group together pieces of content which relate by making blocks or chunks. It should be easy for visitors to identify each group and the information within it. Be mindful of appearance and maintain a visual style.
Grouping and consistent visual style
- Proximity
- Closure
- Continuance
- White space
- Color
- Borders
- Headings
- CONSISTENCY