reading-notes

Class 4 Reading Notes - Structure web pages with HTML

What are Wireframes?

Wireframes are low fidelity sketches of digital interface and are used by UX Designers. Think of them as the barebones of a website design
This practice provides basic artifacts that can be tested with users through positioning of buttons and menus on the diagram
Types: physical hand drawn sketches vs digital wireframes
Both types need basic fundamental shapes in black/white/gray. Keep things in basic forms/colors.

Example of a wireframe for a mobile wepage on left and desktop page on right

Digital Softwares to make Wireframes

Miro (free)
InVision (free)
UXPin
Wireframe.cc
Balsamic
Google drawing

What is HTML?

HTML (HyperText Markup Language)is a markup language used to create the bones, frame, structure, or scaffold of a website and its content.
HTML is seen on front-end development
As noted above, HTML is NOT a programming language but is instead a markup language

Code used to structure a web page and its content.

HTML consists of a series of elements which are used to enclose/wrap different parts of the content and change its appearance
Enclosing tags can turn a word or image into a hyperlink, can change emphasis of words (bold, italics, etc.), can change font size, and more!

Anatomy of an HTML Element

Lets use the following piece of code as an example:

<p>My dog is very sleepy</p>

Opening tag: <p>, consists of the name of element ‘p’ and surrounding brackets. The opnening tag represents where the elements starts to take effect.
Content: My dog is very sleepy, is the content of the element.
Closing tag: </p> includes a forward slash before the element name.

Elements can have attributes

class=“editor-note”, info about the element that does NOT appear in the actual content.
“Class” is attribute name and “editor-note” is the attribute value
Quote ALL attribute values for consistency
Nesting elements: elements inside of other elements
<strong> used to emphasize words
<p> used to denote a paragraph- Empty elements

There are elements with NO content or closing tags. For example, the <img> element.

HTML elements reference

Use the following website for a list of HTML elements!