reading-notes

Structure web pages with HTML

It’s important to understand who your target audience is, why they would come to your site, what information they want to find and when they are likely to return. Site maps allow you to plan the structure of a site. Wireframes allow you to organize the information that will need to go on each page. Design is about communication. Visual hierarchy helps visitors understand what you are trying to tell them. You can differentiate between pieces of information using size, color, and style. You can use grouping and similarity to help simplify the information you present


HTML pages are text documents. HTML uses tags (characters that sit inside angled brackets) to give the information they surround special meaning. Tags are often referred to as elements. Tags usually come in pairs. The opening tag denotes the start of a piece of content; the closing tag denotes the end. Opening tags can carry attributes, which tell us more about the content of that element. Attributes require a name and a value. To learn HTML you need to know what tags are available for you to use, what they do, and where they can go.

elements are often used as containing elements to group together sections of a page. Browsers display pages in normal flow unless you specify relative, absolute, or fixed positioning. The float property moves content to the left or right of the page and can be used to create multi-column layouts. (Floated items require a defined width.). Pages can be fixed width or liquid (stretchy) layouts. Designers keep pages within 960-1000 pixels wide, and indicate what the site is about within the top 600 pixels (to demonstrate its relevance without scrolling). Grids help create professional and flexible designs. CSS Frameworks provide rules for common tasks. You can include multiple CSS files in one page.
Whenever you want to collect information from visitors you will need a form, which lives inside a
element. Information from a form is sent in name/value pairs. Each form control is given a name, and the text the user types in or the values of the options they select are sent to the server. HTML5 introduces new form elements which make it easier for visitors to fill in forms.