Introduction to Web Programming - Part 2 (HTML basics)
Article 2
In my last article we began our journey into the world of web computing by building a simple Hello World application.
This time we're going to be getting a little bit more involved.
HTML
As we already know, HTML (HyperText Markup Language) is a standard programming language used to build things such as websites or web applications. HTML elements are objects of the HTML DOM (Document Object Model) and we can manipulate the DOM to do some pretty cool things.
Some of the most common HTML elements you will come across are headers, paragraphs and lists. If you have ever written an english paper for school you can probably conceptualize what these elements might look like.
header example below
BREAKING NEWS : NEW SPECIES OF FISH CAN SURVIVE OUT OF WATER
paragraph example
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
list example
- eggs
- milk
- butter
Time to Write Some Code
Today we will be learning enough about HTML so that by the end everyone reading this will be proficient enough to code up a very basic personal website.
Before we begin, let's look at what we had last time.
<!Doctype html>
<html>
<head><title>Hello World</title>
</head>
<body><h1>Hello World</h1>
</body>
</html>
When we open up our browser we are able to see that there isn't much content being displayed in our web app.
All we really have is a header that says Hello World.
Let's start to add some more content to this page.
One of the best examples for a tutorial like this is to build a web page about ourselves.
To begin this transformation let's change the contents of our <title></title> tags and our <h1></h1> tags.
<!doctype html>
<html>
<head>
<title>Nick's Webpage</title>
</head>
<body>
<h1>Nicholas White</h1>
</body>
</html>
Obviously you should add your own information.
We should now have something that looks much like this.
When we're adding content to our page we should try and visualize how we wan't it to look. I don't think multiple sentences describing myself will look all that great in giant bold letters.
Usually when we have multiple sentences and to display information in large chunks, we will use the paragraph tag. <p></p>
Let's add a paragraph describing ourselves.
<!doctype html>
<html>
<head>
<title>Nick's Webpage</title>
</head>
<body>
<h1>Nicholas White</h1>
<h3>Bio</h3>
<p>I am a college student. I am 20 years old and I love computer programming. If you would like to contact me please send me an email at [email protected].</p>
</body>
</html>
Here's what we should see when we open our browsers.
Now we are beginning to see a structure forming. Let's add another header (<h3></h3>) called "Things I Do For Fun" along with a list of things we like to do for fun directly underneath.
<!doctype html>
<html>
<head>
<title>Nick's Webpage</title>
</head>
<body>
<h1>Nicholas White</h1>
<h3>Bio</h3>
<p>I am a college student. I am 20 years old and I love computer programming. If you would like to contact me please send me an email at [email protected].</p>
<h3>Things I like to do for fun</h3>
<ol>
<li>I like to sleep</li>
<li>I like to eat</li>
<li>I like to watch netflix</li>
<li>I like to make websites</li>
<li>I like to play basketball</li>
</ol>
</body>
</html>
Here we are using <ol></ol> tags to create our list. <ol> stands for o-ordered l-list. As we can see below our list is ordered by increasing number values.
Between the <ol></ol> tags we have five <li></li> tags. Each <li> tags represents an item within our list.
Another way to represent a list is as an unordered group of list elements. We can convert our ordered list to an unordered list simply by changing our <ol></ol> tags to <ul></ul> tags. (u-unordered l-list)
<!--ordered list below-->
<ol>
<li>I like to sleep</li>
<li>I like to eat</li>
<li>I like to watch netflix</li>
<li>I like to make websites</li>
<li>I like to play basketball</li>
</ol>
<!--unordered list below-->
<ul>
<li>I like to sleep</li>
<li>I like to eat</li>
<li>I like to watch netflix</li>
<li>I like to make websites</li>
<li>I like to play basketball</li>
</ul>
Below we can see our unordered list.
List elements of an unordered list are displayed with bullets.
In future articles we will go over how we can customize how all of these elements are displayed using a stylistic programming language called CSS.
Until then enjoy tinkering with your personal website and please check out https://www.w3schools.com/ if you have any questions.