User Tools

Site Tools


getting_started_with_html

# HTML Introduction

## What is it?

Most of the web pages you visit are build of HTML. You visit Google to search or click on a link and you end up at a website which is built of html pages (actually files, but we'll get to that later).

HTML is the format a kind of file. If you are familiar with “docx” or “mp3” or “pdf” or “jpg,” each of these is a kind of file. When you access an mp3 file, your phone or laptop recognizes this as a sound file and plays it in Itunes, WinMedia player etc.

HTML is the file building block of the web. It is different in a few important ways.

The power of HTML allows it to contain other kinds of files, including images, sound, and video.

The simplicity of HTML as a markup language means that we can read and write it.

## About Markup or Tagging

HTML is like any other text file, except that it includes hidden <tags> that give instruction to a web browser. Look at the html snippet below:

What do you think <h1> does? What do these tags have in common?

<h1> The Title</h1>
<p> In the beginning, there was a web page.
It was not a very important page. But you have
to start somewhere.</p>

For more details on html tags, please see the HTML Cheat Sheet

## Quick start

Before we setup your web domain, let's develop some familiarity with HTML in a safe “sandbox.” We will work on the code for the first page people see when they visit your site. Web browsers are set up to look for a default page such as index.html

Open a new browser tab and access the W3 Schools "Try It" editor

  1. Copy and paste the html below into your file
  2. Hit run. What do you see?
  3. Now personalize it (and try to use paired tags as in the model, with no typos!)

W3Schools doesn't all direct downloads. So let's open a text editor (Notepad, Notepad ++ or download a free one like Atom). Copy the file, save it as “index.html” on your desktop, and then try opening the file in a web browser like Chrome or Firefox.

<html>
  <head>
  <title> My Name Here
  </title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </head>
<body>
<h1>My Name Here</h1>
  <h2>Stats</h2>
    <ul>
       <li>Hometown: Utopia </li>
       <li>Student: IUP Cook Honors College</li>
       <li>Major: Spells and potions</li>
    </ul>
  <h2>About Me</h2>
<p> They call me the <em>boy who lived</em>. Quite a nickname. I was born on 31 July 1980. My parents were Lily and James. My patronus is the Stag. Gryffindor rules. </p>
</body>
</html>
getting_started_with_html.txt · Last modified: 2020/05/18 13:58 by admin