HTML5 Semantics

With this week’s module assignment, HTML semantics was one of the topics that was introduced to the class. Semantic is bringing meaning to the web page and not just the presentation-wise. The browser knows how to display the content with the HTML semantic. In the semantic codes, it will define the content that is to be displayed. For example, <form>, <table>, and <article>. 

In the HTML5 there are new elements to the different web pages that weren’t introduced before. Some of the old elements are <header>, <nav>, and <section> which are still used even with the new elements. Some of the new elements include <section>, <time>, and <details>. 

When the code first starts it will have the <section> element to define a section in a document that you want to code. As W3schools explains the homepage usually is split into different sections like the content, introduction, or contact information. I tried it myself with the picture example below. 

This is similar to the regular HTML coding but this has different sections within the page instead of one. With the different sections coded in the HTML semantic, you can have multiple different sections on your webpage. 

Another element that I read more about was the <article> element. This element is a self-contained content where it is usually independent of everything else. If you wanted to let people know what the article was about or the main idea of the article I guess you would put the code in to identify it as an article or it will show up as an article. 

The screenshot below shows the coding for the article section. 

Another cool element to the HTML sematic is the header elements. It is said that you can have multiple headers. The first header though will be bold so the readers know what the content is exactly about. But, the subheader is the different sections for different areas in the article. I tried to test this out and the picture below shows what I inserted. 

Though using that element is cool you will have to have subheaders that make sense like the one I made below for Quinnipiac Dorms because they have two separate locations at Quinnipiac for dorms. It makes sense to have different subheaders for that reason. 

The footer is the interesting element where you can put in information about copyright information, contact information or even authors of a document. The image below shows this element. 

The last element I looked at was the navigation links. This one was rather interesting because you can navigate anywhere within the site if you wanted to. For example purposes, I used my name and Quinnipiac University. 

The HTML semantic is an interesting way to layout your document if you wanted to. While reading through the w3schools site it made a lot of sense what HTML semantic was and how it was done. The site also gives a lot of the semantic elements at the bottom of its page and the reasons for it so the reader knows what each element is used for.

Creating MyWebspace Page-Coding

MyWebspace Page with Coding

Learning HTML may be scary to some people including me. But, when you start to understand the basic coding of HTML it doesn’t seem as hard as you think. For myself, learning HTML is something I am trying to dip my toes in due to the field I want to go into. I thought that it was going to be very complicated, which may soon be the more you want to get advanced with your website.

My professor gave the class a very basic code that is used for a lot of other websites. Reading the directions clearly, I began to insert my code. The insert was simple as it tells you in the code where you have to type your words and information. This is an easy step but if you spell something wrong in the code you will run into trouble.

Basic Code given by Professor

The program I decided to use for the code was Dreamweaver. This tool was very easy and excellent to use. In the application you can have three different viewpoints for the code where you have the “code” section, “split” section, and “live” section where it lets you view the website as you are filling in codes. The big “code” screen makes it easy to see your work and type in the code.

At first, my code wasn’t working and showing up so I deleted the code and reinserted my information into the code. Looking at the “live” section of the code it came out great and how it was supposed to. The only bump in the road was trying to get my picture to fit into the page. The size of my picture was too big so I had to decrease the size to fit in the website which worked perfectly. It can be tricky at first to get the right information in but following instructions, if you are new at coding, makes the process easier.

Dreamweaver Code

The next process was to use FileZilla. This application is a third-party application that allows you to upload files easily to other sites. The site I was uploading my code to was MyWebspace on Quinnipiac’s site. This was a pretty easy process for me. Though I couldn’t figure out how to open the MyWebspace online the process was easy due to a tutorial video given to me in the week module. I did forget to put the picture file in the MyWebspace FileZilla and it didn’t show up. But, as soon as I did it showed up on the site. The content in the coded page I uploaded was my “About Me” page from my actual WordPress site. Opening the Mywebspace after transferring the file showed the layout of what I coded from Dreamweaver.

FileZilla

Using HTML is intriguing to me and I plan to get to know more about it. It is not as tough as I thought it would be. I will have to practice more with this tool but overall, I can see myself making a website in the future. Hopefully, coding for you is not too hard but fun and exciting!

Daily Table Mood Board

Mood Board made in Pinterest

The last step in this week’s assignment was the mood board. I liked this step in this week’s assignment because this is where I can get creative and find images to go along with the color palette I created.

While creating this palette I used Pinterest to bring all of the images together. Looking at the mood board most of the images represent the company and what they sell to its customers. This was very fun to play with because there was a lot to choose from on Pinterest. Because the store sells loaves of bread as well the brown bread went perfect with the brown color. So did the chicken and bacon at the bottom.

For the pink color, I decided to get some images with smoothies because the store sells fruits that can make this color for smoothies. The tan color blends in with some of these images which you can slightly see in some of the photos. The greens in the photo are represented by the fruits and vegetables.

All of these colors pop out and complement each other on the mood board. Some images I replaced because they didn’t go well with the colors. Finally looking back over the mood board I can say this is a pretty accurate and well put together mood board.

Pinterest is a cool site to put together a mood board like this to show others ideas and similar color schemes to the color palette. Hopefully, you like this mood board! This is my first one and I am planning to get better at this!

Daily Table Color Palette

Made in http://colormind.io

A color palette is a great way to show what colors are used in a particular image or design. My next task in this week’s assignment was to make a color palette of the company I am using which is Daily Table. Daily Table has a unique design where it has its fresh meats and vegetables in its logo. It has a variety of colors that represent the foods they sell. If they did that intentionally major points for them!

Most of the foods they sell are vegetables and fruits but they also sell meats. The colors represent this which is a cool way to design a logo. The website even has this theme throughout the site using all of the colors that they have placed in the logo. 

From https://dailytable.org

The colors in this palette are orange, pink, tan, brown, and a medium-toned green. The numbers that represent the colors are in the second image below. This is an interesting color palette as it has some soft colors and darker colors mixed in. The colors go very well together giving it a cool look to the site. Though pink is a small color in the middle it brought out the colors very well instead of the red color. Red would have looked too dark in my opinion. The tan color in the middle combines the much darker colors. 

In the next post, you will see a mood board with objects related to the company and the similar colors from the color palette.

Daily Table Sitemap

Made on https://www.gloomaps.com

For the next part of this assignment, I had to create a sitemap for the Daily Table website I made a wireframe for. If you take a look at the wireframe I made and compare it to this sitemap it looks similar. The only downside I had with this sitemap is I couldn’t add side buttons at the top where I can put social media buttons, etc. For example, if you look at the sitemap you can see that there is a “donate” button. I wanted this button to link off of the “daily table” tab but it wouldn’t let me.

Daily Table Website Comparison

Other than that, you can see that this sitemap looks very similar to the website. I switched around some of the tabs from the Daily Table’s original site because their site menu button felt a bit cluttered. I decided to put some buttons underneath some of the tabs that they already had. Some of these adjustments include the “join our email list” button. I added this to the “home” drop-down menu. I took off the “FAQs” category and moved it under the “about us” page because it seemed like a better fit. The last change I made was the “free cooking classes” tab. I moved this one to under the “get involved” tab. Having free classes does seem like the user can get involved with the company so the switch was made.

A fun feature I decided to add was the “community stories” tab. I wanted this to be implemented on the website because this is a company that better helps a community with the food they provide. What better way to put visitors’ stories about the food and products they receive from this store!