Graphic Design Production II Blog

Organizing + Naming for Web/ HTML Basics

Organizing is essential

To get your websites to work properly, you need to follow rules for organizing files. The files fall into a few different categories, viewable content (text and imagery), the presentation of the content (design and layout), and the interactivity or animation of the content. Each of these is controlled by a core language, HTML, CSS, or JS. Web pages (HTML) contain the code that talks to the web browser and the unstyled written text for the site. The style sheets (CSS) hold the instructions for styling the content, the page layout and other effects. Script (JS) enables user input, interactions and some animations to take place. For simple websites, the web pages, content and instructions all live together in a folder or directory. This main website folder referred to as the root folder, Inside the root folder there are also other folders for the different kinds of content and instructions.

Organizing and naming your files is very important

Naming Files

Code demands that you write it in a very particular way. A single character out of place can result in a whole web page displaying incorrectly or not at all. You need to know that the naming conventions for web pages and files are also prescribed and are not optional. Specified methods must be followed and names assigned so web browsers can ‘read’ the files. Files, documents and folders have special names. The root folder is called that, or the root directory, but it is not usually named that. We call the first page of a website, the home page. This page uses a special naming convention. It is either named ‘index’ or sometimes ‘default’ or ‘home.’ Browsers read these names as a signal to open this page first. Rules for naming: Varying your cases — Commonly all lowercase is used for file naming, but not always. Some people use what is called camelCase and some use all UPPERCASE. It is important, however, to keep your naming method constant.

Commenting your code

All comments are written with opening and closing characters and are used to demarcate a category or an area of similar things. Earlier we looked at using comments in our HTML to identify areas in the code. Today we are going to add comments to our CSS to help us organize our growing lists of styles. In HTML Comments are written with an angle bracket and an exclamation point. Comments in CSS are written starting with a forward slash followed by an asterisk and a space. To close the comment, the characters are reversed. It looks like this: /* LAYOUT and GRID */

HTML Basics

Super brief history: HTML was developed by an awesome dude named Tim Berners-Lee, along with some colleagues at CERN, an international scientific organization based in Geneva, Switzerland. Around this time (1989–1991) they also developed the Hyper Text Transfer Protocol (HTTP) and the Universal Resource Locator (URL).

Syntax — the rules of HTML structure

All languages have rules that govern how the parts are ordered. This is the syntax. The absolute most basic parts of HTML are the ‘elements’ and ‘tags.’ Tags are recognized by their use of angle brackets. Tags come in pairs, a start and an end tag. Elements are the parts made from using tags. Elements are nested.

Page Structure

In order for web pages to communicate with and be able to be displayed in browsers, they need to have specific HTML elements and in a specific order. All web pages have prescribed parts, nested elements and are divided into head and body areas. Because of the shared structure in web pages, a template, also called a boilerplate, is used to jumpstart the process of coding. The first piece of code on the page is the document declaration or the ‘doctype’ telling the browser what code language it is.

Hyperlinks

So much of the web is “...Click on this to go here.” Hyperlinks are the fundamental interactive parts that enliven web pages and serve a site’s navigational functions. Links are made by using the anchor element. The anchor element uses an ‘a’ to stand for ‘anchor’ along with the letters ‘href’ meaning ‘hypertext reference’ to designate the place the link goes. Absolute links: A link that references a page outside of the root folder of the website is an absolute link. Relative link: A link that references a page within the website (inside the same root folder) is called a relative link.

Meta Tags

meta tags — give important info about the website to browsers meta tags do not have end tags meta tags include specific attributes and values. The following are examples of meta tags: a. charset =”UTF-8” b. name=”description” content=”A description of the content on the site” c. name=”keywords” content=”word, word, word, word” d. name=”author” content=”Your Name” e. name=”viewport” content=”width=device-width, initial-scale=1”

Some examples of what meta tags will look like on your html

Making Images Links

IMAGE AS LINK — In order to make your image a hyperlink all you need to do is wrap anchor tags around your image element and then specify the destination. Select a destination (somewhere on the web) and create the link. Add text to take away the border.

Remember that links have four states: a:link — the normal, unvisited link a:visited — the link after a user has visited a:hover — the link as the user mouses over it a:active — the link as it is clicked. Each of these states is a selector that can be styled. You can include the properties for color and background-color.

Links have 4 states:

Images

Adding Captions to Images

To add captions to your images use the HTML tags ‘figure’ and ‘figcaption’. These tags work with the 'img' tag as a set. The figure tags wrap the image and the caption together. Nested inside is the img tag the words of the caption are wrapped inside the figcaption. It should look like this:

When adding a caption to an image it should look like these examples

Background Images

Just like changing the background color of an HTML element, we can also use CSS to set an image as the background of an element. There are a few different ways you can do this. One way is to set an unobtrusive pattern in the background of the body so that there is some subtle color and/or texture behind the content on the entire page. Open your styles.css page and locate the style for your body element. In order to indicate an image we need to tell the browser to find the address of that image, and in this case, the address is inside the images folder which is inside our root folder. Since we are already inside the css folder, we need to tell the browser to back out of this folder, then go into the images folder. The signal to the browser is by using two periods in front of the slash. So the code looks like this:

The following link is a free online source called Subtle Patterns where you can go and find a pattern to add to your background:

Image Width

We can use our CSS to tell all images in our page that the largest they can ever be is 100% of the available width. Essentially, we tell images that they are free to be full size if they fit, and if they don’t, they will automatically scale themselves. We need to talk to the images directly, so we need to use img { as our CSS selector. The property we’ll use in this case is max-width:. This is what lets the image know how much of the available space it can take up. If we want to allow it to take up 100% of the screen, we can type: 100%; as the value.

Box Model

Web browsers see everything — every HTML element that is — as a box. These boxes have certain physical characteristics including width, height, space around it, space inside of it, contents, and sometimes a frame or border. By creating the boxes and specifying their characteristics, we can control how the content on our web pages is displayed.

Box Model Properties

Padding

Padding is the CSS property that controls the space inside the box around the content. Padding, like font-size, can use various units. For now, we'll use pixels. We can add padding uniformly or to a specific side around the content.

Border

Border is a line that can be thick, thin, solid, dashed, dotted, etc. It is the CSS property used to style the outer perimeter or edge of an element. So, if our content is in the center of the box, and padding is wrapped around the content, the border is then wrapped around the padding. The border property uses three values for line width, line type, and for line color.

You can control the padding, border, and margin on your css styles and it should look similar to this

Margin

Margin is the space between the boxes. Every element has a margin applied by default. Margin is what is creating the space between our h1 and our p in our page.

CSS Margin Reset: Before we set a new margin, we'll turn off any existing default browser margin using a magic trick in our CSS. At the top of your styles.css file, before any other elements, type an asterisk * This is a special selector that means “every element in the page.” This turns off all margin defaults. The space that was on the left and right side of our h1 and p elements goes away. That is because that space was actually default margin placed on the body element. This reset technique can be used on any webpage to reset any default margin on the page. You can, and will want to add padding: 0; to the reset as well. This way you can control all the spacing manually on your site giving you precise control over your layout.

The analogy I have devised to think about these box properties relates to actual boxes. padding is like the packing peanuts inside the box, border is like the kind of cardboard (heavy-duty, corrugated, thin, etc.), and margin equates to spacers or bumpers attached to the outside of a box.

Width and Height

The last two properties that we can change on our box is the width and the height. It’s important to know that it is actually best not to mess with these unless you have to. Browsers automatically set these based on the content and other box properties that are already defined. This generally works really well. However, sometimes you want to set specific values for a box (block-level element).

Text Alignment

We have already discussed controlling the space inside and outside of the box using padding and margin. We can also control how the content is situated inside the box. Default alignment for all elements in HTML is left. Sometimes we might want to align text to the right or center for a certain design effect. Seeing where the content such as text lives inside a box helps us do that. The CSS declaration we use to do this is text-align: and the acceptable values are left, right, and center.

Building a Navigation Unordered List

Now we'll add an unordered list that will become our navigation on the page. In order to make our list into navigation we need to add the code that makes the text into links.

Anchored Links

An anchor link “anchors” a navigational link to another element in the same page. In order to make the anchor tags work we have to add to the HTML tags that are the anchors and add to the HTML tags that are the links. To establish a connection between the two, it requires the id= attribute. This particular attribute is used to identify (id) the HTML element being anchored to. Each id is given a unique name which is placed inside the double quotation marks. You can use any word you want, though descriptive words work best. Now we have to connect the link. To do this we have to go back up to the link we made in the nav and enter the address in our href= attribute. For an anchored link the address is very simple. You use a # and then 'call it' by name. The # indicates an id= attribute and the name specifies which one.

The above image is an example of what anchored links look like

Responsive Design Mode

In order to work properly on our mobile first design, we’ll need to change our browser settings so we can easily preview our site using the correct dimensions for a small mobile device. In Chrome go to View > Developer > Developer Tools.

Removing the Bullets on the Unordered List

Unordered lists use bullets to indicate each of the list items. This is great in some cases, but for navigation this just gets in the way. We'll use CSS to remove them. Bullets are connected to the parent element, so go to the ul { selector. The property we need to use to remove them is list-style: none;

This would need to be added to your css if you wanted to remove the bullets from your list

Creating Larger Buttons (Hit Points)

When dealing with links, the spot a user needs to click, tap or touch to activate the link is called the hit point or hit target. In text links, the hit point is only the text—a pretty small target. The user needs to click directly on the text to use the link. When using fingers to navigate a touch device, users typically need a much bigger hit target to be accurate.

To increase the hit target on a text link, we need to do two things. First we need to 'promote' our link from an inline element to a block-level element. This will expand our hit target to the full width of the screen. It will also allow us to put padding on our link. We’ll use a { for our selector to address the link directly To promote the link from inline to block, we’ll use the property display: block;

Creaing Separation Between Links

If we remember our box model, we know that the best way to move objects apart, is to use margin. Margin will allow us to separate our links with an invisible barrier. Since we only will need to have the margin between the links which stack vertically, we only need to add the margin to the bottom of each of our links. That works to create visual separation and actual separation between our links. We can also now see that the unordered list does expand the full width of our screen proving that the unordered list is a block-level element.

Hamburger Button

One conventional method to indicate navigation is to use an icon made of three lines which is referred to as the hamburger button. The set of navigation links is usually hidden from view until it’s accessed by the user. There are lot's of ways to hide and show navigation, but almost all of them require knowing the programming language called javascript.

Placing a hamburger buttom and connecting it to your navigation list

Header and Footer Content

Header

The 'header' element is NOT the same as the 'head' element. The header lives at top of a web page and usually includes a logo, the navigation, and sometimes other things like a tagline or a search function. By setting up the header like this it makes the code easier to scan. Another plus is that we have a new element to use when considering specificity for nested elements. I can have the CSS talk directly to the hamburger button image link, by using the header a { as my selector. So only the links inside the header tag will respond to that CSS command leaving other links on my page alone.

This is some information you can include in your header and it should look similar to this

Footer

In web design footers refer to the content that appears consistently at the bottom of every page of a website. The content can vary, but it’s common to see site navigation, contact information, links to social media as well as all sort of other bits of company information. Similar to the header, the footer content rarely changes between the pages in any given website. Having this content grouped together in a footer element is just smart. Another common piece of footer content is a copyright statement and symbol.

Float Property

The most basic positioning method we can use is called floating. This command allows any element to be positioned inside its enclosing element to either the right or the left. Floating an element changes it's default behavior and allows other elements that are below the floated element in the HTML to also “float” up and sit next to it – creating a wrap effect around the floated element.Floating came about as a way to deal with images and text together. It is a way to include an image inside of text, or have the text to wrap around the image. The basic CSS declaration to float an image left or right, tells the image to "go be on the right side or left side" aligned inside of its enclosing element. It also tells any text below it fill available space to the left or right of the image. Let’s try it.

Okay, we were about to float our second image to the right. Normally we could just add a CSS block saying float: right; rather than left to an image selector, but because we have two images that we want to behave differently, we’ll have to create a specific name to talk just to that second image. There are many approaches you can use, but we’re going to add id= attributes to the sections. Add id="one" to the opening tag of the first section: section class="group" id="one" Add id="two" to the opening tag of the second section: section class="group" id="two"

You can float images so that they will appear on the right side of the screen and the code should look like the above image

Custom Fonts / Favicon

Fonts

Font vs. Typeface

The term 'font' is used in digital typography, though it truly refers to a specific typeface. The term 'typeface' includes all the sizes, styles, and weights of that face, where 'font' actually describes a subset of the typeface.

Copyright

Typefaces or fonts are protected by copyright. This means that that only the font creator has any rights over how the final font is used, sold, edited, etc. A font is essentially a piece of software, but also an original work, like a painting, novel, or scientific invention. Copyright law protects creators, and anyone who infringes on those rights can be punished. By using a font that you do not have permission to use is a direct infringement on copyright and you risk incurring punishment. The punishments for copyright infringement can be serious. Penalties include fines and/or jail time. 

When adding a copyright you can add it to the footer so it looks similar to this

Custom Fonts

Websites have been, in the past, dependent on the fonts installed on the user’s computer. In the last decade or so, the ability to specify exact fonts has evolved. There are two general methods: hosted and self-hosted.

Hosted — This means that the font doesn’t live on our root folder, but instead that font lives somewhere else on the internet. Font companies or services (like Google fonts) provide designers with access to fonts by providing a way to link to them on their server. Copyright issues are managed and monitored by the hosting company. There are hosted fonts that are paid and those that are free.

After you download the font you want, then put it into your html so it looks like this

Some Services: Google Fonts (Free) Adobe Edge Webfonts (Free) Adobe Typekit (Paid) Cloud Typography (Paid) Visit Google Fonts Here

Self-Hosted — This means that you are actually uploading your own font files (in a folder, just like your images) for browsers to download and display in your webpages. There are both paid and free models for this as well.

Some Services: Font Squirrel (Free) Fontspring (Paid)

Favicon

Short for "favorite icon" a favicon is that tiny little image or graphic associated with a website you see when you bookmark the page. Web browsers use favicons in the address bar, on tabs, and in the book mark lists to identify sites visually. It is really an extension of the brand. Favicons used to be typically 16 x 16 pixels square, though now they can be up to 48px square. They are saved with the name: favicon.ico and are stored in the root folder of your website.

Creating your own favicon

Favicons can be created using online services or any image editing software that allows the saving of .ico files. (Photoshop needs an extension). The image you use should be a graphic with very little detail and designed to match your site's identity. It will take some work to strike the right balance of detail and communication. Experiment with an online service to create your very own favicon. favicon.cc, favicon-generator.org, faviconer.com, Dynamic Drive, to name a few. Follow the instructions provided by the site and then download the favicon.ico image to your computer.

Column Grid

We have been able to use the float property to adjust how elements display on a page. This is good for simple 2-column layouts. However, once we get into more columns more control is required. Many, if not most, responsive websites use a multi-column grid structure to exercise greater control over the positioning of the page elements. A 12-column grid is fairly common. By adopting this approach, we can ensure that our pages look right in all viewports.

The 12 Column Grid

So, a 1-column layout uses all 12 units, a 2-column layout would use 6 + 6 units, a 3-column layout would use 4 + 4 + 4 units, 4-column layout would use 3 + 3 + 3 + 3, etc.

Defining the Column Grid

We need to make CSS classes for each of the 12 columns. We will use class="col-number" where the specified number defines how many columns the parent element or div is to span.

You can specify how wide you want something to go across the page by saying what column you want like so

App

For a project in the Graphic Design Production II class, we had to design an application from scratch. We came up with the whole concept and design and then made mock screens showing what it would look like if it was a real app. We made sell sheets and user journeys showing how the user would experience our app and what they would go through to use it.

I designed an app called Closet Moodist. It's an app that helps the user get ready in the morning that is based completely on their specific mood in that moment. They can upload their own closet into the app so that they can be stylish with what they already have!Below are the screenshots of the mock screen that I constructed for them.

Screens for my app Closet Moodist
Sell sheet and user journey

Help

If you need further help about HTML and CSS visit W3 schools. Right click to open in a new tab