Let's Learn How to Code

Introduction to HTML

In this lesson, I use jsbin.com to type out my code. However, I've also listed several other code editors both for Mac and Windows.

Intro to coding

Leading up to now, we have mostly been discussing design and basic concepts of Web design. However, we would not have the internet as we know it today with coding. Every website you have ever gone to has been built using HTML. We will be learning about how HTML works so that we can do some basic manipulation to our sites that we've designed. 

How things have changed in 15 years.

By now, most of us have been using the Web for years, if not over a decade.

I remember using the Internet for the very first time in 1995 with my brother at a public Internet lab. At the time, I barely even understood what the Internet was, let alone how it worked.

I remember when my family first got dial up Internet (Hoosier Online) in 1996 and not even really grasping the concept fully. We were using an Apple PowerMac with a 1GB hard drive, a floppy drive, and a CD-ROM. We had to install Hoosier Online by inserting a series of floppy discs and getting a modem that connected to our phone line.

Design-wise, Web pages look incredible now compared to the boring, techie, stale look they used to have. Take a look, for instance, at the difference between Apple’s Website today and14 years ago! Back in 1997, the site was completely static and most likely didn’t even require a separate designer and developer.

What may surprise you though, is that since the late 1990’s, we still use the same coding languages to produce modern Websites, those being HTML, CSS, Javascript, Flash, XML, MySQL, and PHP. In the next section, we’ll discuss the main differences between these four languages and how they team up to create rich Web experiences.

HTML

Most everyone has heard this term, but more than likely don’t know exactly what it means or what it stands for. According to Wikipedia, it is:

the predominant markup language for web pages. HTML is the basic building-blocks of webpages. A markup language is a set of markup tags, and HTML uses markup tags to describe web pages.

Simply put, HTML is the skeleton of the Web. It’s like the blueprint of a building. HTML tells where everything is placed on the page, in what order, and to a certain extent, how it looks. Web pages can be made entirely out of HTML with no assistance from any other language, but the code won’t be nearly as efficient or well-organized, or aesthetically pleasing.

HTML’s structure is based on the opening and closing of “tags”. For instance, if I want to create several paragraphs, you would use an opening and closing <p> tags. This is what it would look like:

<p>This is the first paragraph</p>

<p>This is the second paragraph</p>

Notice how we have the opening paragraph tag <p> to indicate the start of that tag and </p> to indicate the end of it. It’s like placing quotations around something. The opening quote indicates that the speaker is speaking, and the closing quote indicates that he is no longer speaking after that point.

Some other examples of a tags are the <strong> tag, which makes things bold, the <em> tag to make things italicized, and the <u> tag to make things underlined. Below I will show what the HTML would look like and then, what it would look like on the page.

HTML Code:

<p>I am going to use <u>HTML</u> to make <em>certain words</em> <strong>bold</strong>.

How it appears in the browser:

I am going to use HTML to make certain words bold.

And there are many other tags that have unique functions. Below are some of the main ones that I use constantly, and their basic functions:

(Don’t worry about memorizing all these. At this stage, I just want you to get a basic hunderstanding of how these various tags work together to build a page.)

<html>

Declares that we are now working in HTML this is the outer-most tag.

<head>

in the top of an HTML section, holds configuration and informational information about the page, but not anything that will be seen on the page itself.

<title>

Text in here goes up at the top title bar in the browser.

<meta>

Used for stuff like key words, descriptions, etc.

<script>

Used to embed other scripting languages like Javascript.

Example:
<script type="text/javascript" src="js/jquery.js"></script>

<link>

Used to link to external CSS and other documents.

Example:
<link href=”folder/stylesheet.css” rel=”stylesheet” type=”text/css />

<body>

This is where the visable HTML is; the stuff you see in the browser

<p>

Paragraph tag, mostly for text. Has default space around it.

<br/>

Single line space (like hitting Shift-Return)

<img />

An image tag. Usually is self-closing (doesn’t require a closing tag)

Needs src=”” to work. This is the URL of the image file.

Example:
<img src=”folder-path/sub-folder/image.jpg” />

<a>

Anchor” tag; used for links and anchors.

To make a link, you need href="" inside the opening tag.

Example:
<a href=”http://www.google.com”>Link to Google</a>

To open it in a different window or tab, add target="" inside the opening tag

Example:
<a href=”http://www.google.com” target=”_blank”>Opens Google in new window</a>

<span>

Mostly used to style text.

Example:
<span class=”bold”>Bold</span> text.

<strong>

The <strong> tag simple makes text appear bold. <b> does the same thing.

<em>

The <em> tag italicizes text. <i> does the same thing.

<h1>

This is the first of several header tags. These are used for really big text. The larger the h number, the smaller the size. For example <h1> is much larger than <h6>. Each of these can be styled however you want though, using CSS.

<ul>

Unordered list. For bullet points. This contains 1 or more <li> tags

<li>

List item. These are the bullet points in the list.

<ol>

Ordered list. This numbers the list of <li>from 1 through whatever number.

Example:
<ol>
<li>This will be numbered 1.</li>
<li>This will be numbered 2.</li>
</ol>

<div>

A very basic container element that is used most prominently in CSS-driven pages.

<iframe>

Used to display other Web pages within a Web page.

Needs src=""to work.

Example: 
<iframe src=”http://www.amazon.com”></iframe> Displays amazon.com in an iframe.

<table>

A structure used for charts with multiple rows and cells.

<tr>

A row inside a table. This contains cells, but not vice versa.

<td>

A cell inside a row. You can, however, have rows inside cells)

<table>
<tr>
<td>Cell 1, Row 1 </td>
<td> Cell 2, Row 1 </td>
</tr>
<tr>
<td>Cell 1, Row 2<td>
<td>Cell 2, Row 2<td>
</tr>
</table>

The crazy thing about HTML is that we can actually view it in pretty much any browser. How? Well, it’s different for each browser. But, it’s most commonly under the “View” menu and then “View Source”. If you are using Chrome, it is “View”, then “Developer”, then “View Source”.

This allows us to see the HTML structure of the page that we are looking at. In fact, this is how I first got into Web design. I wanted to create a Website for my band, so I went to a Website that looked similar to what I wanted, viewed the source, and then experimented with the code until I got the site I wanted. This is, in my opinion, one of the best ways to learn coding.

Code Editors

Now that we have a basic understanding of how HTML works, let's begin coding. In the video below, I discuss how there are many programs out there that allow us to edit code.

Note: this video is in HD. To view it at full resolution, press the Full Screen icon in the bottom right corner of the player.

 

In this video:

In this lesson, I use jsbin.com to type out my code. However, I've also listed several other code editors both for Mac and Windows.

Here are the full lists:
Windows
Mac

HTML Tags used:

<html> <head> <title> <body> <h1> <p> <b> <strong>
<i> <em> <u> <ul> <li> <ol> <a> <img>

 


HOMEWORK

  1. Read through this lesson to learn about the basic function ot HTML tags.
  2. For additional help, read this article for a further understanding of HTML basics.
  3. Create a basic HTML page like the one I created in the video using the above tags.
  4. Post the URL (web address) of your page in the discussion titled "Session 8: Let's learn to Code".
  5. Post any problems you might have run into in the same discussion.

Questions?

As always, please email me if you have any questions! jearley1@ivytech.edu