Basic Web Development

HTML Intro

Intro to HTML

So you want to build a simple web page, but don’t know where to start. If this is your case, you are in the right place! However, this will not be a step-by-step guide. We will begin with a good foundation of knowledge. This will enable you to build your own websites and not have to copy and paste someone else’s code.

The World Wide Web, the Internet, and the Client

Before we can begin building web pages, we need to understand how the ‘Web’ works. So lets start with some definitions, first the World Wide Web or the Web for short. The Web is a network of servers, specialized computers that offer services, that host websites. The Web sits on the infrastructure of the Internet (inter-networks) which is comprised of cables, routers, switches, and protocols that allow data to be transmitted from one device to another.

The Web works off of a client-server relationship. The servers that comprise the Web serve up web pages in the form of HTML documents. These resources are requested by a client device (such as your computer) through a web browser, much like the one you are using to read this now. Usually this data travels thousands of miles and the process to get it from one location to the other is complicated. Thankfully it works, most of the time, and most of us take it for granted that when we type in google.com that Google is going to appear upon our screens.

So the relevant concepts at work here are clients (you) request web pages (HTML, CSS, JS) through a browser (Chrome) from web servers. We will leave the details of how web servers work for another post, but let us get into the technology behind web pages, HTML, CSS, and JS.

HTML, CSS, and JS

You may be asking yourself what all of these acronyms are, and you’re right, it can be confusing at first. These three acronyms are the technology that makes web pages possible.

HTML or Hyper-Text Markup Language is the technology used to structure web pages. HTML is based on things known as ‘tags’. These tags give the program, a web browser, the instructions on where to display the tag’s contents.

CSS or Cascading Style Sheets are what make web pages pretty (or gives them style!). There can be more than one CSS document linked with an HTML page or it could be ‘in-line’ meaning that it is contained with in the HTML document itself. Through various rules the different styles contained in a CSS document cascade down overriding the previous style.

Finally, JS or JavaScript is a programming language that is executed ‘client-side’ in the browser. JS allows for a great deal of possibilities. You can dynamically rewrite the HTML in a document, add style, animate, and a whole lot more. There are even several specialized frameworks that help you from not re-inventing the wheel for a lot of things. JavaScript is a deep, deep world which we will only touch in this series. Fear not though, as JS will have its very own series.

More About HTML

As we go through the basic elements needed for an HTML page please refer below to the code snippet (you can view the result by clicking ‘Result’).

Hopefully we are speaking the same language now and can move a little deeper into HTML. An HTML document can be broken down into elements which are defined by tags. The first element is the html element. Everything in between the opening <html> and closing </html> tags is identified as HTML code. The next element is the <body> element which tells the browser that everything in between its opening and closing tags is the main content to show in the browser’s window. Within the body element you can have header elements with <h1> being the main header and <h6> being the smallest sub-header. You can also have paragraph elements identified by the <p> tag, and text formatting elements such as <strong>. As you can see in the result of the code below, the page is pretty plain. This is because we haven’t applied any CSS to the HTML elements.

Though it may not be apparent at first, hopefully you can see the parent-child relationship of the different HTML elements. As said before, the html element is the first or root element, meaning that it doesn’t have a parent. The first child of the html element in the example below is the body element. The body element has multiple children: a h1 element and a paragraph element. The paragraph element has a child, the strong element. Though this may seem trivial, it will become very important as we move through the series that you can recognize the parent and children of different elements from looking at the HTML code.

Go ahead and take a look at the HTML code below and its corresponding result. You can even click ‘Edit on Codepen’ and play around with it a bit.


<html> <!– this is an opening tag –>
<body>
<h1>Hello World!</h1>
<p><strong>HTML</strong> is used to structure web pages. In other words it controls the layout of your web page!</p>
</body>
</html> <!– this is a closing tag –>

See the Pen OVByXz by Dustin E Homan (@dhoman01) on CodePen.

Conclusion

Now that we have a basic understanding of how the Web works and what makes up a basic HTML page you are probably dying to try it out. If you are concerned that you will have to get a domain name and a host or set up a server RELAX! Something really cool about web browsers are that they can read HTML documents from your computer’s file system! So all you have to do is open up a text editor (such as Notepad) and begin with thetag! Save this document as.html and when you open it again it will open with your default web browser! Also check out W3Schools for some more information about HTML.

Thank you for joining me and Happy Coding until next time!

One thought on “Basic Web Development

Leave a Reply

Your email address will not be published. Required fields are marked *