reading-notes
HTML & CSS
DOCTYPEs
- Because there have been several versions of HTML, each web page should begin with a DOCTYPE declaration to tell a browser which version of HTML the page is using
- HTML 5
<!DOCTYPE html>
- HTML 4
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
- Transitional XHTML 1.0
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd”>
- Strict XHTML 1.0
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd”>
- XML Declaration
<?xml version=”1.0” ?>
Comments in HTML
- If you want to add a comment to your code that will not be visible in the user’s browser, you can add the text between these characters:
<!-- comment goes here -->
ID Attribute & Class Attribute
- allow you to identify particular elements.
Elements
- Block Elements
- Some elements will always appear to start on a new line in the browser window. These are known as block level elements.
Examples of block elements are
<h1>, <p>, <ul>, and <li>.
- Some elements will always appear to start on a new line in the browser window. These are known as block level elements.
- Inline Elements
- Some elements will always appear to continue on the same line as their neighbouring elements. These are known as inline elements.
Examples of inline elements are
<a>, <b>, <em>, and <img>.
- Some elements will always appear to continue on the same line as their neighbouring elements. These are known as inline elements.
** The <div> and elements allow you to group block-level and inline elements together. **
HTML5 Layout
** The new HTML5 elements indicate the purpose of different parts of a web page and help to describe its structure. **
- The <header> and <footer> elements can be used for:
- The main header or footer that appears at the top or bottom of every page on the site.
- A header or footer for an individual <article> or <section> within the page.
- Navigation <nav>
- The <nav> element is used to contain the major navigational blocks on the site such as the primary site navigation.
- Articles <article>
- The <article> element acts as a container for any section of a page that could stand alone and potentially be syndicated.
- Sections <section>
- The <section> element groups related content together, and typically each section would have its own heading.
Process & Design
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
- WireFrames
- A wireframe is a simple sketch of the key information that needs to go on each page of a site. It shows the hierarchy of the information and how much space it might require.
Wireframes allow you to organize the information that will need to go on each page.
- A wireframe is a simple sketch of the key information that needs to go on each page of a site. It shows the hierarchy of the information and how much space it might require.