HTML & CSS

Scroll to the bottom of the page for a PDF download of these instructions.

What is HTML?

  • HTML, short for “Hypertext Markup Language,” refers to the language that dictates the appearance and structure of webpages on the Internet. It essentially creates a language in which you can speak to your computer, instructing it (through HTML code) to embed links and images where needed and to structure and position text where you want it, ultimately allowing you to build the basic components of website. For the purpose of this exercise, you will be required to build an HTML page on a local computer.

What is HMTL built in?

  • Most Mac and PC computers have generic text edit programs that can be used to write, create and edit HTML documents. For a PC, this program is Notepad, while Mac computers have TextEdit. However, there are more effective software programs out there to edit HTML documents.

HTML: Getting Started

  • The best way to learn HTML is by producing a document in order to learn how HTML works and garnering a grasp on just how each instruction influences the front end of your HTML document.
  • In order to write basic HTML, it is important to know how to use the language. Instructions are dictated by inclosing the content of your webpage within start and end tags. HTML is used as follows:

<*HTML Instruction Goes Here*> Text That I Want on my

Webpage </*HTML Instruction Goes Here*>

  • Begin creating your HTML document with these start and end tags:

<html> </html>: This should be the very first and the very last tags in your html document, as it contains the entire code.

<head> </head>: This will contain the header of your entire HTML page. These tags should begin and end before the <body> tag.

<body> </body>: This start and end tag will contain the majority of the content in your webpage. It should follow the end tag of </head>.

  • Here are a series of basic instructions to begin writing your HTML Webpage:

Title:

<title> DH 101 Webpage </title>

(This title text will give your webpage a name. It should be inside the <head> start and end tag.)

Header:

<h1> Header 1 </h1> Paragraph: <p> Text </p>

Header (2):

<h2> Header 2 </h2> Emphasize/Bold: <em> Text </em>
  • Open Notepad++ or Komodo Edit and create a basic HTML Document using all of these start and end tags. Make the HTML Document a personal page documenting who you are much like a Facebook profile.

HTML: Hyperlinks and Images

  • Using HTML, you can place images within your webpage as follows:
<img src=“filelocation.jpg” width=“200” height=“150” alt=“picturedescription”>
  • “Img Src” is short for Image Source. If you are working locally, you may place a location somewhere on your C: drive. If you are connected to the internet, you can place the url of the image you would like to use. “Width” and “Height” dictate the pixel size of the actual image. “Alt” is a caption for the image.
  • You can also create a hyperlink, which allows you to turn text or an image as a reference to another location by using these tags:
<a href=“google.com”> Google </a>
  • If you would like to hyperlink an image, you would follow the same general format:
<a href=“google.com”><img src= “filelocation.gif></a>

HTML: Lists

  • Use the following tags to create lists. Remember that within these lists, you can input hyperlinks and images to liven up and make your HTML document useful.

Unordered List (This is just a bullet list):

<ul>
<li>the first list item</li>
<li>the second list item</li>
<li>the third list item</li>
</ul>

Ordered List (This is an enumerated list):

<ol>
<li>the first list item</li>
<li>the second list item</li>
<li>the third list item</li>
</ol>

Definition List (This is a list in which you can enhance each item with a definition):

<dl>
<dt>the first term</dt>
<dd>its definition</dd>
<dt>the second term</dt>
<dd>its definition</dd>
<dt>the third term</dt>
<dd>its definition</dd>
</dl>

HTML: The Assignment

  • Use all of the tools provided in this basic tutorial to create a profile in which you describe yourself and your interests. Create links out to websites that you visit often and videos/images of music and movies that you enjoy. You can test your code and see its output on this link:

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_bodybgcol

  • Enjoyed the tutorial? Consider editing your HTML document by adding on a Cascading Style Sheet, or a .css file. Visit W3schools.com for an introduction andhow to.

*For pdf download of this tutorial, click here.

(2013, Anthony Bushong; Based on Basic HTML Tutorial by Dave Raggert)

Copyright © 2014 - All Rights Reserved