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.

HTML Workshop

In todays workshop we moved away from Programming and Processing and moved onto HTML & CSS. In order to create this HTML webpage we used the program ‘Brackets‘. First of all we went to getbootstrap.com/css which allows you to download a basic template for your webpage. This saves time and means that you can be as productive as possible – streamlining your workflow. Once everyone had downloaded this, we began to insert various lines of code.

Screen Shot 2014-11-09 at 18.39.20

Brackets is a great program to use as when you begin to type in the code you want, it comes up with a drop down list for you to choose from – this ensure that you are typing everything quickly and, again, saves time. The download folder from Bootstrap is saved in your documents and you can insert images/processing files into this folder and then onto your website. I inserted a previous processing file that was on my computer already. The code looks very complicated but I am starting to understand (as with Processing) what each line of code means. This is the outcome of just the Processing file inserted.

Screen Shot 2014-10-22 at 12.13.00

We then wanted to add in some text, columns and an image. The good thing about this was that as we make the window smaller, the columns transform into rows so that it all fits on the page. Below is the code used and my final outcome. As this was our first workshop, there are obviously things I still need to master but I am looking forward to creating more HTML documents like this and extending my knowledge and skills further.

Screen Shot 2014-10-22 at 12.13.20  Screen Shot 2014-10-22 at 12.44.56