Guide to HTML, CSS and JavsScript (University at Buffalo Version)


Chapter 2: Creating Your First Web Page

As I mentioned in Chapter 1, when someone tries to access your web site the web server will look in your *public_html* sub-directory (folder) for a file called *index.html*. This is known as the default home page file. On many systems the web server will also look for other files until it finds one (*Index.html*, *index.htm*, *default.html*, *home.html*). Check with your web server support for the name that your web server uses for the default home page. Note: The ubunix.buffalo.edu web server runs the UNIX operating system and so all file names are CASE SENSITIVE. I *STRONGLY* recommend that you always name files and directories (folder) using all lowercase letters and numbers with no spaces or other special characters except underscores (_) and hyphens (-).

Basic HTML Tags

An HTML file is simply a text file that contains HTML tags that advise the browser how to render your web page. All HTML5 files should begin with the line:

<!doctype html>

The next line should contain an opening <html> tag.

HTML files have a certain "structure" to them. This structured document is divided into two parts, a HEAD (<head> and </head> tags) and a BODY (<body> and </body> tags).

The last line in your HTML file should be your closing </html> tag.

Sample HTML file

A typical HTML file would look something like this:

<!doctype html>
<html>
  <head>
    <title>The name of this page</title>
    <!­­ this is a comment -->
  <head>
  <body>
    <h2>Hello!</h2>
    <p>This is my sample web page.</p>
  </body>
</html>

Figure 2-1: HTML for a Basic Web Page

The rendered web page would look like this:

Hello!

This is my sample web page.


Figure 2-2: A Basic Web Page

Inside the <head></head> Tags

The <head> and </head> tags define an area of your web page used by the web browser to contain *metadata* (information about your web page).

Page Title: The <title> Tag

Normally the set of <title></title> tags is the first HTML in this area. The text inside the <title></title> tags is displayed by the web browser in the top bar (the blue bar in IE) and is used as the words for the users bookmark or favorite. Your <title> should be something that is related to that particular web page. For example:

<title>Jim Gerland’s Home Page</title>

Page Information: The <meta/> Tags

You can also have various <meta> tags within your <head> area that might include some keywords, the author, the character set used, or a description for your web page. These are used by search engines to index your page in their search database. For example:

<meta name="description" content="Introduction to HTML, CSS, and JavaScript"/>
<meta name="keywords" content="HTML, CSS, JavaScript, tutorial"/>
<meta name="author" content="Jim Gerland"/>
<meta charset="UTF-8"/>

Figure 2-3: HTML <meta> Tags

External Files: The <link/> and <script> Tags

The <head> area is also where you would use a <link> tag to tell the web browser you want to include an external CSS file or you can include <style></style> tags with any Embedded Styles or internal JavaScript code, <script></script>. More detail will be provided in later chapters about CSS styles and JavaScript coding.

HTML Comments

Adding comments to your code can help you remember what your code is doing at that statement and will also help others who may need to maintain your code in the future. They are also handy for commenting out certain styles when you are developing your styles.

There are many instances where you might need to either make a comment about the code or "comment out" a section of code. The <!-- --> tag can be used for this. For example, you may want to include your name as a comment:

<!-- Author: Jim Gerland -->

Or, you may have some code, for example:

<h3>My heading level 3</h3>

That you don’t want to appear but you may want it later so you just "comment it out" like this:

<!-- h3>My heading level 3</h3 -->

Comments can appear in both the <head> and <body> areas.

Inside the <body></body> Tags

Your web page can contain many more tags than the example above.

Headings: The <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> Tags

HTML tags are used to define the structure of your document. So, there are 6 heading levels tags. These tags do not need to be in any order and you do not need an <h2> tag to have an <h3> tag (and so forth). Though you are allowed to have more than one (1) <h1> tag, a well-designed web page should only be one (1) <h1> tag on each page. The web browser determines the look of each heading tag and should provide more emphasis for a lower numbered heading tag than a higher numbered heading tag. You can use CSS styles to modify the look of your heading tags.

Paragraphs and Line Breaks: The <p> and <br/> Tags

The paragraph, <p></p>, tags define a section of your web page that appears to be a single set of words or sentences. The web browser is expected to put a blank line after each paragraph.

The break tag, <br/>, advises the browser to end that line and start the next line without displaying a blank line.

Hyperlinks: The <a> Tag

HTML revolutionized the web with its ability to identify a word or phrase or image in such a way that it appeared on your web page as a click-able link that did something. This hyperlink could open a new page or go to a sub-section of the current page. It can even open a Word document, an Excel spreadsheet, or a PDF file. There are many other types of action for these links. You use the <a> (anchor) tag to define your link and the href attribute to tell the web browser what you’d like to happen when someone clicks on that link. For example, if you wanted to display the words "University at Buffalo" as a link and have the UB web site open when that link is clicked then you would use this code:

Visit the <a href="http://buffalo.edu/">University at Buffalo</a> web site.

Figure 2-4: HTML <a> Tag

Images: The <img/> Tag

Web pages can contain more than words and click-able links. If you want to include an image on your page you would use an <img/> tag like this:

<img src="http://buffalo.edu/~gerland/gerland-small.jpg" alt="Jim Gerland Photo" id="myPic"/>

Figure 2-5: HTML <img> Tag

The <img/> tag is "self-closing" since it places information in the document directly and does not surround (contain) any page information. The <img/> tag has additional parts (attributes) that tell the browser where to get the image from (*src=""*), what text to display when the user may have images turned off in their browser or the words to be read to the user if they are using a screen reader (*alt=""*).

You can even make an image click-able by nesting the <img/> tag inside of an <a> tag like this:

Visit <a href="http://buffalo.edu/~gerland/"><img src="http://buffalo.edu/~gerland/gerland-small.jpg" alt="Jim Gerland Photo" id="myPic"/> Jims web page</a>

Ordered, Unordered, and Definition Lists: The <ol>, <ul>, and <dl> Tags

You can display different types of lists on your web pages using the <ol></ol>, <ul></ul>, or <dl></dl> HTML tags.

You might use an ordered list if you have a series of steps. The web browser will automatically render an ordered list with increasing numbers. For example, a recipe:

<ol>
  <li>
Place 1 cup of flour in a large mixing bowl</li>
  <li>
Add one egg</li>
  <li>
Add one cup of milk</li>
  <li>
Mix until smooth</li>
</ol>


Figure 2-6: HTML Ordered List Using the <ol> Tag
  1. Place 1 cup of flour in a large mixing bowl
  2. Add one egg
  3. Add one cup of milk
  4. Mix until smooth
Figure 2-7: HTML Ordered List

If you wanted an unordered list, such as a shopping list, you would use something like this:

<ol>
  <li>
Milk</li>
  <li>
Eggs</li>
  <li>
Flour</li>
</ol>


Figure 2-8: HTML UnorderedList Using the <ul> Tag

The browser will render an unordered list with bullets in front of each item in the list.



Figure 2-9: HTML Unordered List

A definition list would be used if you want a glossary of terms. It might look like this:

<dl>
  <dt>
The <dt> tag defines the term.</dt>
    <dd>The <dd>tag defines the definition.</dd>
  <dt>
The <dd> tag</dt>
    <dd>This tag provides the definition.</dd>
    <dd>
This tag provides a second definition.</dd>

Figure 2-10: HTML Definition List Usng the <dl> Tag

The output would look like this:

The <dt> tag defines the term.
The <dd> tag defines the definition.
The <dd> tag
This tag provides the definition.
This tag provides a second definition line.
Figure 2-11: HTML Definition List

You can even nest lists inside of lists. Remember to take care with your opening and closing list and item tags though.

Emphasis: The <em>, <i>, <b>, and <strong> Tags

There are tags (<em></em> and <i></i>) that can be used to place emphasis (italics) on a word of phrase and tags (<b></b> and <strong></strong>) that can be used to bold a word or phrase. Later we will see how it would be better to use "CSS styles" to manipulate the look of your web pages.

Example:

Here are <em>italicized</em> and <strong>bolded</strong> words.

Horizontal Rules: The <hr/> Tag

The <hr/> tag can be used to place a line on your web page. Normally the browser will place a blank line before and after the horizontal line.

Task - Create Your First Web Page

For this task you will create a web page in your web server account called *index.html* that will be used as the starting page for the rest of your tasks in this guide. Your web page should utilize the following HTML tags and include the following:

Remember, whenever you login to your web server account you need to issue the command *cd public_html* to change to the sub-directory where you can create and maintain the files for your tasks.

You can use either the vi or Emacs editor while logged into your ubunix account to maintain your files or you can edit them on your PC and use an SFTP client (FileZilla for Windows or Fetch for a Mac) to move them from your PC to your ubunix.buffalo.edu account. For Windows it may be even better to use Notepad++ for your editor since it has a built-in SFTP client. For Mac the better choice is TextWrangler which also has a built-in SFTP client.

Creative Commons License This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. Copyright © 2017 Jim Gerland