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 commends 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="http://shadesofme.org/2021/12/30/webdesign-html-and-applying-css/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 command 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="http://shadesofme.org/2021/12/30/webdesign-html-and-applying-css/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="http://shadesofme.org/2021/12/30/webdesign-html-and-applying-css/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="http://shadesofme.org/2021/12/30/webdesign-html-and-applying-css/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!
WordPress.com
