Getting Started
Introduction
There is a lot in this Module to get started with so be sure to pace yourself. This is a big introduction if you are not familiar with HTML, but don't worry we will be starting from the ground up. There is a lot of information so be sure to take in a little at a time. I don't expect you to memorize everything we will go over, learning HTML is like learning a new language. Many times you need to go back to the dictionary to understand the meaning of a new word. Don't worry even experienced coders have to look up the language to remember it. Practice helps, play around with your code and explore what everything does. I find it the most helpful to change a line of code, save it, refresh my page, and see what changed. But first, we will need to download a number of files and programs to get us started.
Objectives
- Download all of your needs
- connect text editor to your server space
- become familiar with basic HTML
- understand the structure of HTML documents and how it works
- play with some code
First let's start with getting you set up with everything you will need for this course. First and foremost you will need server space. Many companies offer web hosting such as ipage, hub, web.com. You will also need a merging software called Cyberduck. This create a fluidity between files that are on your server and pull it into your text editor. Which brings me to the next need: a text editor. For Mac users, I suggest textwrangler and PC users can use Notepad++. And finally we need the Bootstrap files. Below is a list with links to the download pages.
Needs
Once you have all your downloads we will open our text editor and link it to the server so we can see what we are doing with the code. With both Cyberduck and your text editor open the connections to your server. If you are unsure of how to do this, look at their websites or your web hosting website, they usually will walk you through how to do this.
Now that you are linked up to your server, create a new page in your text editor called "basics.html" and we will work with that.
Learning HTML
What is it?
Simply put, HTML is a language for describing web pages. The language is made up of elements and tags. If you think of a webpage, it is broken up into parts such as paragraphs, images, columns, etc. All of these parts are the elements. Each element has a name and designation to tell it was it is. These names or designations are called tags. A tag simply tells the element what kind of element it is. Elements are written with a starting and ending tag. This essentially just defines where the element begins and where it ends. The opening tag is and the ending tag is .
So for example, a paragraph opening tag is and the closing tag is . The code is: this is where the paragraph text would go
The best way to get the hang of it is to just play around with it. So let's play!
Document Layout
In your text editor, open your page you've created "basics.html". There are three main parts to a document. It is easiest for me to think of these as boxes where elements can go. And even elements can be boxes to hold more elements. So if you are familiar with the Russian Matryoshka doll, you have a doll that fits into another doll and so on. These main three, are the biggest outer dolls. They are HTML, HEAD, and BODY. The HTML will describe the webpage. The head will hold all of the script and style elements. And the body will hold all of your page elements (what will be seen on your webpage). As we build our website, you will start to see how these boxes are arranged in the code.
If do not have server space or a text editor, you can play with code and see how it looks on a webpage here. This is good practice even if you do have yours set up because you can see the code and webpage side by side.
Good practice is lining up your open and closed tags so you know where your 'boxes' are. Often times you might forget to close a tag (or box) and your code will not look right. This helps you find the error faster. You will see what this looks like in our code.
Now let's build our Basics page and get familiar with our code. Watch this video which will walk you through text editing.
Exercise
- Play around with your code. Create a basic page and share it in the discussion forum.
- Use cram to study the HTML coding language. Cram is a flashcard builder and will help familiarize yourself with tags.
Extra Help
A very helpful resource which lays out all the HTML language for you is http://www.w3schools.com/. This can act as a dictionary for when you need to know what certain tags are and as we move forward how to build in certain features like drag and drop or image carousels.