[Solved] CINF362 Week 2-Wireframes and Intro to HTML

Agenda

• Wireframes
  • What are they?
  • How do we create them?
  • Wireframes Exercise
• Introduction to HTML
  • What is HTML?
  • Creating/Viewing our first page
  • HTML Exercise
• Next Week

Wireframes

What are they?

Wireframes are used to assist with the planning and development of websites, applications, etc. Rather than beginning with coding, a developer might use a wireframe to plan out the different components and how they will interact. For web development, wireframes are used to provide a visual structure of the websites layout. Wireframes allow us to do this by separating content from styles. We can then focus on content and where its placed rather than worry about aesthetics like color.

Additional Reading

• https://www.webopedia.com/TERM/W/wireframe.html
• https://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframingwebdesign-7399
• https://www.slideshare.net/folletto/introduction-to-building-wireframes/68-Lets_sketch_Wordpresscom_homepage (Only slides 1-28)

How do we create them?

Wireframes are created by drawing out the structure of the product you intend to build. This can be done on paper, markerboard, online, and even in a local image editor. Ive listed some tools that should be a good start if you dont know where to begin. There are many others out there are free or cost money, but the ones below dont require logins and are capable enough for our purposes.

Online Editors

• https://wireframe.cc/
• https://www.gliffy.com/examples/wireframes

Draw/Print

• http://media.konigi.com/tools/graphpaper/pdf/konigi-wireframe-gray.pdf
• http://gridzzly.com/
• https://sneakpeekit.com/

Image Editors

• https://www.getpaint.net/index.html
• https://www.gimp.org/

Wireframes Exercise

Look at the list of potential websites listed below. Think about the kind of content you might find on those websites. Based on your thoughts and some light research, create a wireframe for one page from each website. This might include the home page, about page, blog post/listing page, contact page, etc. Use your creativity and the tools listed above (others are cool too) to create 3 separate wireframes. If you choose to draw your wireframe, take a picture and submit it to Blackboard. Links or direct file uploads are fine for this assignment. Just attach them with your submission.

If you need to explain anything in the wireframe, feel free to add a little paragraph along with your submission. Make sure to let me know which wireframe your writeup refers to so I dont misunderstand anything. Submit all 3 of your links/files to Blackboard under this weeks lecture notes or in the Assignments folder. It will be called Wireframes Exercise.

1. Personal resume website
2. Bakery website
3. Wildlife conservation/blogging website

Tips

• Find similar websites for inspiration
• Use https://www.wirify.com/ to see how potential wireframes would look
• Label your boxes, write an x to signify an image, dont write too much text
• No colors except black, white, or greys
• Explain things as needed
• Dont worry about perfection, this is mostly a thinking/planning exercise
• Submit only 1 wireframe for each one

Introduction to HTML

What is HTML?

There are three major components of front-end web development:

1. Structure
2. Style
3. Interactivity

HTML represents the structure of the page. It is based on the concept of tags that markup the document. Those tags allow the browser to interpret .html files and present them correctly to users on the page. Each tag begins and ends with an angled bracket.

<p class=para>This is a paragraph.</p>

The bold text directly above is an HTML element. Elements are made up of tags, attributes, values, and content. The <p> and </p> part are the starting and ending tags. class is the attribute name and para is the value you are providing to the attribute. Everything between the tags is the content.

In HTML, some tags require ending tags and others do not. <p>, <div>, <span>, <strong>, <em>, and many others require a closing tag which looks like the following </tag> where tag is replaced by the name of the tag. <br>, <hr>, and <img> are examples of tags that dont require a closing tag and can be written without any slashes.

Tags in HTML are often nested within each other. An example is <ul> and <li>. <ul> is unordered list and <li> is list item and they appear together as shown below.

<ul>

<li>Item 1</li>

<li>Item 2</li>

</ul>

Tags can be nested over and over but ideally, you want your HTML to be tidy and should code in a way that allows you to keep your code uncluttered. If you open a tag inside of another one, you MUST close that tag before close the tag it is inside.

You can view a pages HTML at any time by right-clicking the page and selecting view source. F12 (on PCs) also opens up that browsers Inspect Element feature which allows you to select individual parts on the page and see what kind of CSS has been applied.

Additional Reading

Tutorials

https://www.htmldog.com/guides/html/

https://html.com/ (Read up until Our Other HTML Tutorials and that should suffice)

https://www.codecademy.com/learn/learn-html (Interactive, full-blown tutorial you DO NOT have to complete this but if you want to learn on the side, it helps)

Reference Guides

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5

http://html5doctor.com/element-index/

Ive also included a PowerPoint file on Blackboard which will help further explain HTML and demonstrate some best practices you should adopt moving forward.

Creating/Viewing our first page

Go to Blackboard and download the html-materials.zip file. Open index.html with a text editor of your choice. I personally prefer brackets.io since it is free and has many useful extensions but use whatever you are most comfortable with. Review the code inside, I have placed comments in the code to explain what each line does.

Between the body tags, add the following line of code:

<p>Hello World! My name is name.</p>

Replace name with your actual name. After you are done, double-click the file to open it in your default web browser. You should see Hello World! My name is Chris. except my name will be replaced by yours. HTML doesnt display the tags on the page, so we only see the text content between the tags. With this, youve successfully opened and edited a web page to include info about yourself. HTML is straight forward, only requiring that you learn which tag is used for what content.

HTML Exercise

Your task is to build a webpage based on requirements given to you. To get started, use the previously downloaded html-exercise.html file from Blackboard (also inside the html-materials.zip file) and open it up in a text editor. Add code to it as mentioned in the list below. Also, complete the research portion of it below the list. All code should be submitted as one file to Blackboard for credit. Go under todays lecture notes or the Assignments folder. The submission area will be titled HTML Exercise, you can upload your .html file there.

1. Add an h1 tag with HTML Exercise between it
2. Add a p tag beneath that with a sentence or two about a place you would like to go to for vacation. When you mention the name of the place, wrap it in a strong tag so that it appears bold on the page.
3. Create an unordered list with 5 foods you like. Use em tags to make two of the items on that list appear italicized on the page.
4. Create an ordered list with your three favorite websites. Use the a tag to hyperlink those websites so I can visit them.
5. Add an hr tag beneath the ordered list so that a line appears next
6. Follow the next set of instructions for a table

Look up the tags listed below and build a table based on them. The table will contain three columns in it. The first column should have the name of the tag, the second column will explain the purpose of the tag, and the third column will let us know if it is still in use. The possible values for the third column are Yes or NO with one of the following: Not in use, Use CSS instead, New to HTML5, Not supported in HTML5, or Replaced by <tagname>. A tag can have any number of these designations and Ive provided an example below.

Name	Purpose	Still in Use?
Center	A tag used to center align items it is wrapped around.	No Use CSS
Embed	Defines a container for external applications (video, etc.)	Yes New to HTML5

• Font
• Aside
• Footer
• Strike
• Acronym
• Canvas
• Dir
• Applet
• Nav
• B
• Header
• Section
• Div

Next Week

We will learn more about HTML including validation, semantic markup, and how to make our web pages live so that users across the internet can access them.