reading-notes

Structure Web Pages with HTML

Back to home

Wireframe and Design

What is Wireframing?

Wireframing is a skectch of a digital interface. Imagine it like how you would have a blueprint for how a house is going to be built. Wireframing would be that blueprint for that digital design, for example, like a website. Wireframing provides the designer a quick glimpse of the basic structures of how to the design should look before going into the detailed process of building it.

Types of Wireframing

Sketch Wireframing

This process of wireframing is done simply by using a pen and a sheet of paper.

Digital Wireframing

This process of wireframing is done using a variety of tools that offer unique features that could be beneficial to your design project.

Key Note: It is important to note to try to keep things simple and to AVOID going into great detail, this is NOT what wireframing is for.

HTML Basics

HTML(Hyper Text Markup Language) is the code used to stucture the basic contents of a web page. It consisit of elements and tags, all of which, can make your content appear a certain way.

Elements

An element consist of an opening tag and a closing tag represented by a angle bracket. The link below provides a list of various HTML elements and a short description of what they are used for.

HTML Element Reference Guide

Attributes

Attributes contain extra information about an element. ALL attribute will have the following:

Nesting

Nesting is the practice of putting an element inside another element.

HTML Skeleton aka “Boilerplate”

This is a standardized markup that needs to be in every document you create:

  1. !DOCTYPE html ( Indicates to the browser which version to expect )

  2. html ( Represents the entire top level of the document )

  3. head ( The head contains information that WILL NOT be displayed on the webpage like: title, scripts, style sheets, etc.

  4. body ( The body represents the content of an HTML document. There con ONLY be one body element.

Key Note: html MUST have one head and one body

Semantics

Semantics refers to the meaning of a piece of code. For example, “what role does a HTML element have?”. The link below provide a list of some HTML semantics:

HTML Semantics

Back to home