HTML Basics
Showing some stuff
All websites and webpages, almost anything that a web browser will show you, is
written with HTML. HTML is very simple and doesn't support any logic (like the
if statements and for loops that we covered in the
Python section). HTML can become intimidating for large webpages, but lets
begin by dissecting fundamentals.
Fundamentals
HTML is a markup language used to "describe the structure and semantic content of
a web document". HTML consists of numerous tags, each
of which modifies the contents in slightly different ways. Any of the specific
keywords (head, title, body, div, h1, p, span, img, a, and many more) between a
< and > are known as tags. All tags need to be
opened and then closed with very few exceptions. Tags are opened by simply typing
the tag you want within the less than and greater than symbols. A tag is closed by
adding a slash (/) after the less than symbol. Here's what it would look like with
the paragraph tag: <p>Hello there!</p>.
All webpages require the following boiler plate code to get up and running. Anything
that is to be displayed will be written within the <body>
tags. It is really customizeable at this point, especially with the addition of
css which we'll
touch on in the Bootstrap section.
<html>
<head>
<title>Gate</title>
</head>
<body>
... All of the fun stuff happens here ...
</body>
</html>
Everything in the document has to be within the html tag. Much of the
setup stuff, like including extra CSS and Javascript files, goes in the head
tag. And then all of the content that is to be displayed within a web browser will
be inside of the body tag. Now, the most important thing to remember is
that you must close all open tags. The other thing that you will notice is
that the nesting of HTML elements is not only prevalent, but also necessary.
I recommend you take a look at the source code for this webpage to get an idea of what is going on behind the scenes.
Basic Tags
<head>
Everything that needs to be loaded before the page can render, like CSS and JavaScript, goes inside of this tag, along with the favicon and any other meta information.
<title>
This will be the name that appears in the tab bar for your webpage.
<body>
The actual visual part of your webpage, everything that the user could see or interact with, will go in this section.
<div>
These are useful, generic containers for other HTML elements. If you have multiple
elements that you want to modify in some way, lets say indent, you can nest them
all inside of a <div> element and then give it a CSS class
(we'll talk about CSS briefly at the end of this section).
<h1>
These are your header tags. If you were writing a newspaper, you would put your
headline within this tag. There are multiple levels as well so you can have subheadings.
<h1> through <h6> are all valid header
tags, each becoming increasingly smaller.
<p>
The paragraph elements almost always just contain some text. They're pretty straight forward and don't get too complicated.
<span>
The span elements are usually used to apply some CSS class to a single letter or small phrase within a paragraph.
<img>
This tag is used for embedding images into a page, and it is one of the few exceptions
to the rule "all tags must be closed". The image tag doesn't need to be closed. Here
is what it normally looks like:
<img src="http://i.imgur.com/ME4Kf.gif" />
<a>
The anchor tag is used for creating hyper links to other webpages. They're one of the
most important aspects to webpages, because linking to other pages is the what makes
the World Wide Web so powerful. Here is an example:
<a href="http://github.com/samolds">Click here!</a>
This is a good reference for more HTML tags.
Tag Attributes
HTML tags can also have attributes. For example, the <img> tag will
need a src attribute to specify where the image file is located and the
<a> tag will need an href attribute for the link to the
page. Learn more about a specific tag's available attributes using the reference I just
mentioned.
CSS Classes
CSS allows you to customize the look of any HTML element. You can use CSS to make the
background blue and the text to be a different font and more indented. The best way to
do this is to give an HTML element a CSS class. This is similar to giving an element
an attribute, you just add class="whatever" to the tag. Then you create
a CSS class named whatever and list what looks you want any element with that
class name to have.
When modifying an HTML element with CSS, you can alter all elements by referencing a
general HTML tag, or a specific class name. General tags will just be the tag name,
like p, body, or div while class names will
start with a .. So altering an element with class="banner"
would looke like .banner {padding: 20px;}.
Here is an example:
<html>
<head>
<title>Gate</title>
<style>
body {
padding: 40px;
background-color: gray;
}
.special-style {
padding-left: 80px;
}
</style>
</head>
<body>
<h1>Welcome</h1>
<div class="special-style">
<p>Do you like my stylish webpage?</p>
</div>
</body>
</html>