Tag Archives: HTML

So You Want To Learn HTML? (Part 1: What IS HTML?)

Hi there! If you’ve clicked on this article, there is a non zero chance you want to learn HTML.

Today, I will be going over some of the basics of HTML. But first we must answer the question:

What IS HTML?

HTML Stands for HyperText Markup Language, and it provides the backbone for the code that makes up most web pages you visit on a daily basis. HTML code is usually written and modified using a variety of tags, styles and scripts.

  • Tags are the backbone of HTML, providing a basic structure for web pages.
  • Styles allow a web developer to modify the layout of a webpage but modifying attributes like the positioning, color, or size of elements on the webpage.
  • Scripts allow a web developer to create ways for users to interact with webpages in a variety of ways.

Today, we will be creating a basic HTML document. To begin, open up A simple text editor. The most common/easy to use for this exercise are Notepad (Windows) or TextEdit (Mac).

notepad-blank.bb647ae001a4fc7d168c240e01088787[1]

This is where we’ll begin. As previously stated, tags are the backbone of an HTML document, and are what we’ll be using to create a very basic text page. Every tag has an opening tag and closing tag. Text is then placed in between these tags.

Let’s run through a quick example: To create a full header tag, one would simply type the opening tag for a header: <h1>, followed by some text, and finally, the closing header tag: </h1>. Altogether, it would look something like this:

<h1> This is what a header looks like! </h1>?

Got that? To break it down one last time:

<h1> is our opening tag. It tells the document, “hey, I’m about to start a header tag. The stuff to follow is going to make a header for my page!”

</h1> tells the document, “I’m done writing the header now. Close it up!”

On a very basic level, this is all it takes to write a line of HTML code. Now, let’s dive into a few of the basic tag types.

Tag Types

Today we will be going over two very basic HTML tags to help give you a taste of writing HTML code.

Header

The header tag is a very important one, usually used to format the title of a webpage. We worked with it a bit up above, but there’s an extra part about headers that is important to know, for formatting purposes. The number that comes after the “h” in the header tag ranges from 1-6. These numbers rank the “importance” of each header in a given HTML document. Each rank, from <h1> all the way to <h6>, produce a progressively smaller header.

Consider the following block of code:

<h1> This is what an h1 header looks like! </h1>
<h2> This is what an h2 header looks like! </h2>
<h3> This is what an h3 header looks like! </h3>
<h4> This is what an h4 header looks like! </h4>
<h5> This is what an h5 header looks like! </h5>
<h6> This is what an h6 header looks like! </h6>

This code, when saved and viewed as an HTML document, looks like this:

headers

As we can see, each successive “rank” in our headers produces a smaller and smaller line, with the last couple of lines ending up quite small. This allows you to create “sub headers” to rank and organize items on your page by importance.

Paragraph

The paragraph tag is a simple and elegant way of “wrapping” text in your document, so that it doesn’t all stay together on one, long line. To represent a paragraph, use the following structure:

<p> This is my paragraph! By using this tag, it will wrap all of the text that I’m typing inside of it to make it much nicer to look at and read in my HTML document. Thanks <p> tag! </p>

Now that we’ve learned a couple of HTML tags, let’s use them to whip up your own HTML document!

  1. Open up Notepad, TextEdit, or similar text program.
  2. Type the following on the first line: <h1> This is my first HTML Document!</h1>
  3. On the next line, copy and paste the following: <p> The paragraph tag allows me to input text into my document, and format it to make it readable!</p>
  4. Finally type an <h2> header, with your name, and the date. Don’t forget to close the tag!
  5. Save the file as an HTML document. To do this, when naming the file, type ‘.html’ after the file name (for example: MyFirstHTML.html). Save it somewhere on your computer that is easily accessible.

Your final code should look something like this:

<h1> This is my first HTML Document!</h1>
<p> The paragraph tag allows me to input text into my document,  and format it to make it readable!</p>
<h2> First Name Last Name, October 4, 2016 </h2>

When you try to open up the HTML document, it should look like this:

headers

Congratulations! This article provides a very basic overview of HTML, and teaches you the basics of creating your first HTML document. Next time, we will discuss some more basic structural tags, as well as begin discussing styles, which will allow us to further modify the layout and color, as well as other features of our web page.

Link

Did you know that the University provides all students, faculty, and staff with their own webpage? This article explains the basics of how to access your personal webpage. If you have not yet read our previous article about Data Storage via FTP, I recommend doing so before you read this one over, as the same basic principles apply.

Please note that this will not cover HTML or use of Dreamweaver, just the steps to get access to your personal webpage.

First, you will need two resources to be able to access and update your website:

1) A File-Transfer-Protocol (FTP) application. In plain English this is a bridge that connects you with your webpage, allowing you to directly access it and change any files inside of the webpage as needed. Instructions on how to log in will be briefly explained here, but more detailed instructions can be found here under the section captioned ‘Using FTP with WinSCP and Filezilla’.

ITUS supports two types of FTP applications: WinSCP and Filezilla. You can obtain WinSCP here (Windows machines only!) and Filezilla here (select “Filezilla client”). If you are using a Mac, you can also connect using the built-in terminal, no downloads needed, but it is not very user-friendly and not recommended for users unfamiliar with a command line prompt. I personally prefer WinSCP and will continue instructions as if we were using WinSCP.

2) Web Authoring Software. This is technically optional, but I do not recommend anyone without experience in webpage design to create a website without one of these. ITUS supports a program called Dreamweaver. It costs money, but it is available on our Computer Classrooms if you don’t want to purchase the product.

Alright! You have your FTP application and your Web Authoring Software. For the next step, you’ll want to go to this URL: webadmin.oit.umass.edu . Once you log in, you will see your Web Space Management Tool:

Web Space Management Tool

This will show you how much space you have left in your webpage. If you receive an error when you try to upload more files in the future, please go to webadmin.oit.umass.edu and make sure your webpage is not full. You may now log out and no longer need to log into this page unless you want to check the space.

Now we are going to connect to your website using WinSCP. Please copy the screenshot below, replacing “netID” and “your password” with your IT Account netID and password.

WinSCPThen select “Login”.

Once you have successfully logged in, a new window will appear with two panels. On the left-hand side are files on your own personal computer. On the right-hand side you will see all the files in your website. If you wish to bring any files from your computer to the website, simply drag the desired file from the left panel to the right panel. If you would like to pull any files from the website, drag from right to left.

If you explore through the files in the right-hand panel, you will come across a file called index.html. This is the main page that will appear when someone goes to your website by typing in people.umass.edu/your-netID. If you double click it, it will open a text document with the appropriate HTML inside it and will look nothing like the real website. Or if you have never made any edits to your website, then there won’t be much content at all. This is normal.

In theory, one could build and make edits to their website by making direct edits to this index.html file. However, this is impractical and tedious. We can use a web authoring software (step 2 above) to make editing the website much easier and intuitive. Instructions on how to connect Dreamweaver to your website can be found here.

At this point you are set up and ready to start making edits to your UMass website. Congratulations!

 

Sources (by order of appearance):

Data Storage via FTP

http://winscp.net/eng/index.php

https://filezilla-project.org/

https://www.it.umass.edu/support/web-hosting/connect-oit-web-hosting-servers-ssh-terminal-macintosh

http://www.it.umass.edu/support/web-hosting/web-site-building-guide

http://www.it.umass.edu/support/web-hosting/site-definition-sftp-adobe-dreamweaver