D4DME – HTML CSS Workshops

So far in our HTML CSS workshops Phil has been recapping the basic do’s and don’t’s and in-particular the positioning of our HTML pages. Below is a rough outline of where we are currently at with HTML knowledge and some examples from my own brackets files.

  • Basic Structure Elements: – HEAD section always comes before the BODY section and they must both have first and last tags (<head></head> <body></body>). The HEAD section can contain title, links, script and style elements. The BODY section contains the main content such as text and images – structured by other tags.

html ss 1

  • Block Elements: – PARAGRAPH (<p></p>) HEADINGS(<h1></h1>…<h6></h6>) PRESERVE (<pre></pre>) INDENTED TEXT (<blockquote></blockquote>) DIVISION (<div></div>) => elements cannot overlap each other.

html ss2

  • Unordered Lists: – (<ul>…</ul>) (<li>…</li>) each item has a bullet point
  • Ordered Lists: – (<ol>…</ol>) (<li>…</li>) each item has a number.

We then moved on to the CSS side of the unit and went through the basics of Cascading Style Sheet.

  • CSS helps convey the meaning within HTML and allows developers to separate the content from the design.
  • There are 3 ways to attach a CSS to a HTML: 1) External Style Sheet (used to control styling on multiple pages). 2) Internal Style Sheet (used to control styling on just one page). 3) Inline Style Sheet (CSS is used directly within the HTML tags).
  • IDs and Classes: IDs (#) are unique and can only be used once on the page. Classes (.) can be used as many times as they are needed. Usually, each HTML page is made up of boxes (DIVS) and each <div> is assigned an ID or an Class.

css ss 1

After we had gone over the basics we moved on the typical layout of a web page and Box Model. This is the idea that the whole page is made up of boxes and you have to figure out how all the boxes will fit into your page in an efficient way taking into consideration the margin, border, padding and content. html pp2

After this we then moved on to creating a rough web page with a container, banner, navigation, content and footer. Below is my outcome along with the code used to make it happen.

html screenshot

In the most recent workshop, we went through Positioning in more detail and Wireframes. We learnt that User Experience is built from various layers; Surface, Skeleton, Structure, Scope and Strategy.

  • Surface Layer: describes finished visual design aspects.
  • Skeleton Layer: describes screen layout and the functional compartments in the screen.
  • Structure: defines navigation from place to place around the website (user interface).
  • Scope: places in the user interface which are built to support user task-centric scope (eg. enter numbers/text, graph data, save data, print etc..).
  • Strategy: business goals, user constituencies and usage contexts.

html pp1

Wireframing is a quick sketch, a visual representation of the written requirements. It is how designers begin to create their webpage by being able to visualise what you’re creating enables you to immediately evaluate which parts succeed and what needs to be altered. We were then given paper web browsers to have a go at wireframing our ‘Meet the Team’ page and then each group member could show each other their designs and then a final design can be sketched up incorporating parts of everyones ideas.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s