Webdesign: HTML and applying CSS

You are about to create your first ever website but you do not know how HTML and CSS are connected?

There is nothing more “easier” only if you know the elements of a websites construction, so before I introduce you more into the HTML and CSS code structure, let me tell you about the basics of coding.

In order for your commando to be read by the systems you need to use tags and attributes. Every line of code needs to begin with < > and end with one as well.

<!DOCTYPE html>
<html lang= "en">

The first ever thing you need to do is to inform the system what kind of coding language you will use as well as in which language you will write. If you write in English probably there won’t be any issues even if you don’t make a tag for English but if you write Polish or any other language with special symbols you will need to specify it in the code in order for the system to read the content correctly.

Think of designing a website as dressing yourself up from head to toe because actually a website is constructed the same way as our bodies. There is a <head> and <header> – attribute, a <body> – attribute and a <footer>.

We will work with the <head> first of all. What you will notice now is that I mention a favicon in the code. Favicon is a small logotype at the corner of a tag showing up beside the title of your website in your browser, you can choose if you want to include it or not. Nevertheless, for your code to show a favicon you will need to create an icon for it first. I saved mine as favicon.png.

<head>
<title> My very first website </title> 
<link  rel="shortcut icon"  type="image/png" href="favicon.png">
  <link rel="apple-touch-icon" type="image/png" href="favicon.png">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="UTF-8">    
  <link  rel="stylesheet" type="text/css" href="stylesheet.css"/>
    
  </head>  

What I did here was to give a commando to the system that I am working with the <head> portion of the websites construction. As you noticed probably this part ends with </head>. That is because I am giving a signal to the system that what I want to have in this section ends here.

So what I choose to have in the <head> is the title of the website. I connected the favicon and made it adaptable to all devices. The next thing I did was to let the system know in which scale I want my website to show to the world. And the very last one was to specify for the system where the CSS-file is situated. CSS is responsible for the colors, images, sizes and resposiveness. We apply the CSS in the HTML by writing the attribute href=”stylesheet.css”. This way I help the HTML to locate the CSS-files.

As you understood by now, most of the coding is done in the CSS-document. HTML is basically a skeleton. But before we take a look at CSS let us be done with the HTML part first. Lets work with the header. That’s where most likely we will have some images or illustration or maybe a logo.

<body>
<header>
<div class="header"><img src="logo.png" alt="logo">
</div>
<div class="topnav"><a class="active" href="address of your homepage here">Homepage</a>
<a href="address to your 2nd page>About me</a>
</div>
</header>

By writing <div class= “”> I am letting the system know what kind of element I want there. it’s very important to specify it because we will be working with the appearance of it in the CSS stylesheet where we will refer to it as per body { or .topnav { . But we will go into more details about it at the end of this tutorial and learn much more about it in another post. What you need to understand more with this lines of code is that I gave the system a command to display a logo. Here remember to save the logotype as png if you want to have a pattern or color in the background that is different from the one of the image.

Secondly with another div class – attrribute “topnav” I specified how I want my websites menu to be displayed on the website. I only choose to go with the homepage and the 2nd page but you can just copy the code for more pages like this :

<div class="topnav"><a class="active" href="address of your homepage here">Homepage</a><a href="address to your 2nd page>Label name</a>
</div><a href="address to another page page>Label name</a>
</div><a href="address to another page>Label name</a>
</div>

Remember to upload the other pages on the server where you are hosting your website else it won’t display the content when you click on the choices in the menubar on your website. Always remember to end your attributes with </> to not confuse the system of what it should read.

Then we have the <footer>. Usually here many websites have some links or a copyright mark.

<footer> write your message here </footer>

Once you are done its time to end the body section and wrap up the html-code.

</body> 
</html>

Next time we will go deeper into CSS attributes with some screenshoots included. Thank you for your focus and until next time!

Webdesign: Essentials of front-end design

Have you always wanted to design your own website but you do not understand how everything works? Which software do I need? How do I host the website into the server? What is HTML and CSS? What is Java script responsible for ?

Before we dig deeper into the terms essential for starting with the designing of a websites layout, colors, fonts and other features which are shown on every screen while visiting a online store etc., let’s talk about softwares and hosting you will be needing in order to code and publish your website into the server.

There are many places you can purchase a hosting and domain. Hosting is like a storage for all your data while the domain makes it easier to navigate on your website. Nevertheless, the mapping needs to be done manually if you are not working with WordPress for example that has already the feature to easily create, structure and display content. It’s called CMS (Content management system).

If you want to do everything from scratch you will need a code editor like:

  • Visual Studio
  • Brackets
  • Notepad++

or you could use a computer application for notes and save it as for example “mywebsite.html”. It allows you to code locally instead of transfering the data. When you code locally you can use your browser to preview the appearance of your website in most cases (works fine if you have a Macbook at least). Brackets is actually one of the softwares that gives you the possibility to preview your code and see how it would look visually on the screen for others.

The elements which we see on a website are created with code language such as HTML, CSS and JavaScript. Although JavaScript is more used as back end developing tool than front end because of its functions such as animations and navigation, pop up windows and much more. HTML is the code which is necessary for the layout, without it the website would not show up as its the skeleton of the whole “construction”. It i used to navigate from one page to the other as well. CSS as a language is responsible for the images, colors, fonts, size of the elements, responsiveness of the object. JavaScript is mostly used for the functionality purpose such as for example signing a subscription, being able to add things in the cart, playing music or videos on your website. Some of these functions can work with HTML too but not as advanced as with JavaScript.

Once you have written your code, you will need to transfer your files over to the server of your host. For that you will need FTP (File Transfer Protocol). A very much known FTP software is Filezilla as its easy in use. You will need a username and host details which can be found on the website of your host on the page of your purchased hostings and domains most likely. After you upload your data into the server it can take a while before you can see anything showing up while visiting the domain you have chosen for your website.

If something is not showing up or at least not the way you would like it to show, you will need to check your code if there are any mistakes. To validate the HTML you can visit and upload your file here . To validate the CSS you can upload your file here.

I hope that you have learned something & Good luck on your journey of webdesign!

Advertisements