Dakota Lewis - Visual Learning: HTML

Visual Learning

<HyperText Markup Language> an intuitive reference</html>

<Project by> Dakota Lewis

Contents 2

- Introduction

3

- Relationships HTML

4

- Tags

5

- Attributes

6

- Values Examples

7

- Code

8

- Web

Introduction People are visually wired, 70% of all sensory receptors are in our eyes moreover, 50% of our brain is involved in visual processing. This makes people extremely visual creatures able to process an entire visual scene in 1/10th of a second. I wanted to capitalize on the concept that people remember and retain what they see and do four times more than what they read, and eight times more than what they retain from hearing.

I decided to use this information to create a visual learning system than could be applied to educate people on complex topics like data science and programming.

The focus of this project is utilizing design as a tool for curating complex information and topics. I wanted to optimize comprehension and minimize the confusion for people attempting to learn complex skills. By creating simplistic and easy to navigate infographic tools which increase comprehension, we can lower the barrier to entry for programming and informationbased skills which contemporarily are in high demand.

I decided to create my first visual learning tool around HyperText Markup Language (HTML) because it is a relatively basic programming skill. Many people can learn HTML on their own if they dedicate the time, however, this tool would make learning HTML intuitive by using visuals to show relationships in its documentation reference.

Relationships

1- Tag category Used for grouping tags that perform similar functions. there are a total of 10.

6-Attribute relationship Using this color, you can match a tag to its attributes.

2- Tag The core of any HTML code used for assigning sections to your webpage.

7-Attribute The attribute of a tag for enhancing HTML.

3- Tag Definition A brief explanation of tags function.

8-Attribute Definition A brief explanation of attribute function.

9-Attribute relation to values Show the values used for an attribute.

4- Global & Local Attributes Attributes that apply to all tags in a section.

Using color to group attributes.

10-Value used to specify the use of attributes.

5- Tag Attributes Identify the attributes that work with a tag. 11-Value Definiton A brief explanation of value function

<Tags> An HTML code that defines every structure on an HTML page, including the placement of text and images and hypertext links. HTML tags begin with the less-than (<) character and end with greater-than (>). These symbols are also called â&#x20AC;&#x153;angle brackets.â&#x20AC;?

Attributes HTML attributes are special words used inside the opening tag to control the elementâ&#x20AC;&#x2122;s behavior. HTML attributes are a modifier of an HTML element type. An attribute either modifies the default functionality of an element type or provides functionality to certain element types unable to function correctly without them. In HTML syntax, an attribute is added to an HTML start tag.

Global attributes: can be applied to any tag.

Values

The value attribute in HTML is used to specify the value of the element with which it is used. It has a different meaning for different HTML elements.

Values are typically an input that allows you to decide on how a tag or an attribute will behave. This includes its color, the size, the HTTP request type and many more. Using values will allow you to push your HTML programming closer to a professional level.

Code Example

Webpage output

Dakota Lewis University of Michigan Undergraduate 2016-2021

Bachelor of Arts Art & Design

User-Experience design

Batchelor of Science Information Information Analysis

Contact Dakdlew@umich.edu dakotal.myportfolio.com www.studio1201.com

Background During my time at Michigan, I refined my knowledge of art & design in foundation studios (2D, 3D, 4D, and Drawing I, etc.) due to my experience with art & design in high school I used this year to branch out and try different mediums and methods.

In the 2nd year, I explored courses that integrated technology and design (Bits & Atoms, creative programming, and statistics), with the aspiration of dual majoring in Information, Art & Design.

In my 3rd year I began my dual major as a student in Information, Art & Design, this year I honed my focus on graphic/digital design, as well as programming and humancomputer interaction(HCI).

My curriculum (Typography, Sign & Symbol, and color) allowed me to apply new ideas of relationships between visuals and comprehension in my SI courses. Ending my junior year with the aspirations of combining my abilities as a Visual artist and an HCI designer to pursue data visualization.

Currently, I am planning on focusing on the curation of research and analytical aspects of Information and applying them to my career.