Fonts, menu and bit of structure

Let me remind you the importance of the knowledge of the structure traversing.
It is important in any cases such as image, style, font, file, page linking. Everywhere where you have to point to a specific file within the local or remote structure. In other words always. Get familiar with it. I tried to explain it in my previous post.

The Hyper Text Markup Language – the HTML hence the suffix *.html is full of dependences. The page needs to load Bootstrap, the font, your style, images and files and it have the hyper-links to other files and resources.

Some content is just technical such as Font, jQuery sure Bootstrap, style etc.. and that will be called within the head tag.
The contextual content such as images and link to files and stuff, within the body. Again the paths are important, each letter in the name matters.
Avoid spaces and diacritics in names as much as you can. 


Typography is naturally big thing.
Although there are many other ways how to deal with fonts the easiest way is to use the fonts from Google.
Until recently the safest way was to use the native system fonts or so called web safe fonts. If you use them user does not have to download any extra data, which makes the web bit faster to load but you have only few fonts for use and they are not that sexy as you might want to use.

And so the Google fonts are grate. They work across all browsers which is big deal btw, plus they are free, plus some of them have wider range of characters than the English language know all the diacritics, Cyrillic and stuff and others don’t .. be careful, do not use those without latin extended support never mind how sexy they look like. When you try to find the desired font type make sure it supports latin extended, or you might end up with horrible random font variations on your site.


Sure the head of your site should have clearly stated that yo write your text in the UTF-8 character encoding.
like so:

<meta charset="utf-8">

And that is it.. Google even shows you how to use it. It gives you two pieces of code, one is the link to the font source, and the other is a style declaration you use within you style sheet.

<link href=";subset=latin-ext" rel="stylesheet">

Specify in CSS

Use the following CSS rules to specify these families:

font-family: 'Oswald', sans-serif;

For examples of how fonts can be added to webpages, see the getting started guide.


Grate we’ve selected nice fonts we would like to use in our menu and the like, and now how to make a menu. I mean how to link from one page to the other.
So far we worked with one file and now it is time to branch the website a bit.

It is actually really simple. You just make another html files with desired structure and link to them like

<div class="menu">
			<a href="work.html">work</a>
			<a href="about.html">about</a>

..and because the files are in the same directory as the index is, the links are just links of the pages and all is as simple as it can be.

Apply style globally

Up until now we wrote the style in the html head, which is for one page design more than accurate.
But now we have 3 pages and we would naturally want to design them all at once. If we keep the style in the page head, if we want to change some style on the website, on all pages we would need to go to each html file and edit it there.. which is insane indeed.

And so will take the style out of head and create a separate file, lets call it style.css and past the code in there. Without the style tag , just the bare css declaration, like so:

	font-family: 'Lora', serif;
	font-weight: bold;
	font-size: 3rem;
	background-image: url(img/ming.jpg);
	background-size: cover;
	font-family: 'Londrina Outline', cursive;
	font-size: 5rem;
	text-align: center;
	margin-bottom: 2px;
	background-color: pink;

In the head where we had the style defined we will just use the link to newly created css file, and in all html files, and all future files as well. But that will be it. Once we change some declaration in the style.css it will have impact on all html files that link to it.

<link href="style.css" rel="stylesheet">

The result

The result of a simple webpage with made of 3 page (index, work, about) is on Github.

What we accomplished so far:

We made the HTML, scaffold, enhanced it with bootstrap, with fonts, and created couple other pages, link it all together and put the CSS on side so that we can control the style of all the pages at once.
Grate startup. Now it is up to you to tweak it to you needs, and finally make you awesome webdesign be a website.