Imagine being at a party and being able to tell people, “Hey, did you know that I can code?” That’ll be a conversation starter for sure.
Chances are, though, if you are reading this article then you have no idea how to code. And that’s okay! I’m far from the most experienced coder out there, but in my journey to build my own portfolio website, I have created a basic HTML document that has been uploaded to a server and can be viewed here. I’m going to walk you through my process on making this…
…and making it viewable like this…
If you’ve never written code before, seeing it for the first time may feel a little intimidating. All the brackets, lines, words, and specific text make it seem impossible to fully grasp.
Here’s the thing though: coding is practically equivalent to learning a language. To become fluent in a language, you need to know so many words, verbs, tenses, and sentence structures. You can, however, get away with forming simple sentences, as you’ll still technically be speaking the language.
Coding is the same way: as long as you’re writing the correct language, it’ll function properly, no matter how simple you choose to make it. Let’s start with the beginning:
So here are your first few lines of code that you’ll need in order to make your website function properly. The first line is <!DOCTYPE html> . This element is always required at the top of every html document, as it specifies that what you are working on is indeed an html document. Directly under that line is <html lang=”en”>. This is technically two different parts of code: an opening tag ( <html> ) and an attribute (lang=”en”). An attribute is a function that is placed inside a tag and does whatever it says. For example, the lang=”en” attribute will set the language of the output code to English. A tag is an identifiable section of the document, characterized by its position within arrow brackets (< >). Most tags require an opening and a closing tag. <html> is one of those tags, however, as you can see, the closing tag </html> is nowhere to be seen. That’s because it’s placed all the way at the bottom of the document and signifies the final line of code.
Just to repeat more clearly: most tags usually require an opening tag and a closing tag. <html> is an opening tag and </html> is a closing tag. Anything in between these tags will be read.
Moving on, you can see the <head> tag follows the same rules that I mentioned earlier. There’s the opening <head> tag, then a few lines of code, then the closing </head> tag. The head section is needed for the page header. Within the head section is a meta element, which is used to specify all kinds of information. It is known that charset=”UTF-8″ is the most common attributes to this meta element, so when you write your code, be sure to include this.
Next is your title element. This is the line of text that appears on the tabs in your browser, so make sure this is short and sweet. Because this document is a copy of my bio, I named my title “Gabe Walerysiak Bio.” This is surrounded by the opening and closing tags <title> and </title>.
Are you starting to see a pattern? Most of these sections that require content within them contain an opening tag and a closing tag. The sections that require characteristics instead of content only have an opening tag and have no ending tag.
Let’s look at the next bit of code:
This is primarily what the middle bunch of code is filled with, at least in order to make a very basic webpage. The top line is a <body> tag. The <body> element works exact like the <head> element, except what’s in the <body> will show up on the page itself. Because the body requires content, it’ll require an end tag </body>, which you’ll see in the next image.
Your next line of code should be your heading text. You can type whatever text you want (I chose “Who Am I?”), but make sure you surround it with the opening tag <h1> and the closing tag </h1>. This gives the text that big bold appearance. If <h1> is too big for you, then you can shrink the boldness and size of the text by using <h2> up to <h6>.
The rest of the text will be contained inside paragraph (<p>) elements. Simply write whatever text you want, and surround it with the opening tag <p> and the closing tag </p>. If you want separate paragraphs, then press enter and for each paragraph, add those two tags.
Note: You can also add a <br> element between sentences that you want a line break in between and it’ll automatically space out the lines the same way.
This is the final bit of code you need. If you want to add an image, then within your <body> element add an <img> tag. <img> is just like <meta> in that it does not require a closing tag, but instead attributes that’ll affect what is outputted. The attributes you see inside this <img> tag are src=”GabeEditing.jpg”, alt=”Photo of Me”, width=”600″ and height=”400″. The first attribute is your source file, It is very important that you not only have the name of the image file spelled correctly in the code, but that the exact image file is in the same location on your storage disk as your html file. This will be important when we discuss FTP software and uploading footage. The alt attribute is simply an alternate name for the photo. I do not believe this is always necessary. Lastly, the width and height of the image are self-explanatory, just make sure you know the dimensions of the photo you are using and type a size that projects the same ratio on the image.
Now that you have all of your content, simply add the closing </body> tag and a few lines later, add your closing </html> tag. That’s it! You’ve successfully written your first piece of code! Now go back up to the first image on this post, look at all of the pieces placed together and make sense of all of the code used.
Now that your code is done, you need a File Transfer Protocol (FTP) software to upload your code to a server so it can be viewable on a browser. I am using FileZilla for this purpose. When you open FileZilla, you may see an interface that looks similar to this. Your local storage will be on the left and your remote (server) storage will be on the right. You’ll want to add a new site by going to file -> site manager. Once you add in the site, fill out all of the necessary information, such as its domain, your username and password, and you’ll be all set. Each domain service is different, so make sure you know which service you are uploading your files to when you are ready to upload your code.
Once that is all set, the last step you need is to select your image file and your html file, right click both of them and choose “upload.” Both of your files will now be placed on the server and…
Congratulations! You’ve made your first few lines of code and successfully uploaded it to a server for it to be viewable on browser windows! That must feel good, doesn’t it?
I really hope you found this article helpful. Again, I’m not the most experienced coder out there. In fact, this was my first time messing with html coding in almost two years, but I was able to retain enough information to successfully make a basic webpage, just like you all just did. Don’t worry, in the coming weeks we’ll get into more advanced coding processes that’ll help make your website look prettier (which is good because I could use a refresher, too), but for now, pat yourself on the back for being able to write code that functions properly.