Structure Pages with HTML

Wire Frame and Design

Three Key Principles for wireframe

• Maintain Clarity
• Gain User Confidence
• Simplicity is Key

Intro to Wireframing

Wireframing is a plain mock up of a project, can be used for coding or design.

Although wireframing can be drawn by hand, examples of wireframing software are:

• Invision
• Google Docs
• Balsamiq

Different structure processes from design to implementation:

• Wireframe > Interactive Prototype > Visual > Design
• Sketch > Code
• Sketch > Wireframe > Hi-Def Wireframe > Visual > Code
• Sketch > Wireframe > Visual > Code

Six Steps to make a Wireframe:

1. Research
2. Reference
3. Map Flow
4. Draft
5. Detail
6. Wire frame to Prototype

Mozilla HTML Basics

HTML(HyperTextMarkupLanguage) is a coding language to create a structure of a website. Elements (code) makes up the structure of the code.

Anatomy of HTML Element:

1. Opening Tag
2. Closing Tag
3. Content(Attribute)
4. Element

Nesting can be used to put elemnts inside other ones; liek when bold an italic text in markdown.

Empty element can be used; like in images

Anatomy of HTML

• doctype html
• html
• head
• meta charset
• title
• body
• footnote

Images consists of:

1. img src
2. url
3. alt(description of image)

Headers consists of H1, H2, H3 accordingly. +Don’t skip H1 to H4, bad syntax. Will read in error

Paragraphs distinguished by p text p.

There are two kind os lists: ordered(ol) and unorderd(ul)

Links are done by a href URL text

HTML Elements are Made by Tags

Semantics

Semantics means the meaning of the code, the effect of the code to the file.

My Github profile lives here github.com/JoseGonzalez1394