In any directory on your hosting site, such as public_html or, if you made a subdirectory foobar of public_html, a file called index.html is the one which will be loaded if someone goes to yoursite.tld or yoursite.tld/foobar.
So your landing page, the front page of your site to the whole world, will be the file index.html in your public_html directory, and the other pages you will want to make will have other file names (all ending in .html, though).
Every web page should have the following general form:
<!DOCTYPE html>
<html>
<head>
"header" material for the web page, which doesn't appear in the browser window for the page
</head>
<body>
the main content of the page, which is displayed by a browser
</body>
</html>
[Strictly speaking, none of these parts is required, but it is good form to have them all -- including that odd !DOCTYPE bit.]
In this class, the only header material we will use is a title, which is the word or phrase that will appear in the top line of the browser window when you are looking at that page, and in tabs to identify the tab. So you might use something like
<head>
<title>Welcome!</title>
</head>
or
<head>
<title>Rumpelstiltsking' Home Page</title>
</head>
or something like that, as your <head> section on your
landing page, while something like
<head>
<title>My Favorite Links</title>
</head>
would be appropriate for a page you might make with links to your favorite
web sites.
The rest of this discussion will about what can be in your page's <body> section.
You may have parts of your page which have their own titles (yes, not to be confused with the browser page title which is between the <title> and </title> inside the <head>), which are called headings (yes, not to be confused with the header part of a web page which begins with <head> and ends with </head>), and different such headings may have different importance – called the level of the heading.
For example, the top of this page says "HTML Quick Start", as sort of the title of the whole body of this page, is a level 2 heading (the highest usually used within a page). Then "The importance of the index.html file" was a level 3, as were "Over-all form of all web pages," "What to put in the <header>: <title>," and "What to put in the <body>: tons of neat stuff," while "Different levels of headings" was a level 4 heading.
The way to make those different kinds of headings is with codes like
<h2>A level 2 heading</h2>
<h3>A level 3 heading</h3>
<h4>A level 4 heading</h4>
which would produce the following in a browser:
Plain old text will just be processed as, well, plain old text. Except that a browser ignores spaces, tabs, and other "whitespace." It also breaks lines wherever it wants to, usually ignoring where you put line breaks.
If you want to force a blank space somewhere, put the special character non-breaking space there by inserting
in your HTML file.
You can also force a line break by putting in the tag
<br>
And you can tell the browswer that some piece of text is a paragraph - which automatically means it will have a little extra space before and after - by starting the paragraph with <p> and ending it with </p>, like this
<p>
Here is some happy text that
will be fomatted into one paragraph
with lines as long as the browser chooses.
</p>
You can get an image into your web page by uploading the file on your website into the same folder as the HTML file, and putting the tag
<img src="filename">
into your HTML file, where filename is the image file's name,
including .jpg, .png, or whatever it is.
Using the basic <img ... > command will put in the image in whatever size the browser chooses. If you want to force the width to be a certain number of pixels, add width="pixels" inside the img command, and likewise with height="pixels"; in both cases, the whole image will be zoomed without changing its aspect ration. If you specify both the width and height, the aspect ratio will change, however.
For example, using an image of a mathematical object called the Hopf Fibration by Niles Johnson (own work; CC BY-SA 3.0, http://creativecommons.org/licenses/by-sa/3.0, via Wikimedia Commons), <img src="Hopf_Fibration.png"> produces
The reason it is called the "World-Wide Web" is that different points on the web, different pages, are connected to each other by links. You can insert a link into your web page with a command like
<a href="URL_where_clicking_the_link_goes">Text you want to be clickable</a>
For example this link to the MAESTRO
Journal Prompts web page was made by the command
<a href="http://maestro2017.net/blog">this link to the MAESTRO Journal Prompts</a>
You can actually also make almost anything into a clickable link in HTML,
by putting that thing between the <a href=... and
</a> tags. For example, we can make a version of the above
Hopf Fibration which is also a link to the Wikipedia page on the Hopf
Fibration by
<a href="https://en.wikipedia.org/wiki/Hopf_fibration"><img src="Hopf_Fibration.png" width=150></a>
-- look (and try clicking):
Lastly, your link can be to an HTML file on your own web site in the same folder, in which case you only have to say the filename instead of the full URL. For example, this link, going to the index.html file in the current folder, was made with
<a href="index.html">this link</a>
Sometimes you want to make a long horizontal line to break between two very different section of your web page. You can do this with the command
<hr>
which produces this:If you want the horizontal line to stretch only partway across the page, you can do something like
<hr width="50%">
which produces a line half as wide as the window:
<hr width="50">
which produces a line that is 50 pixels wide:It's easy to make a bit of text bold, just enclose it in <b> and </b>. For example, that word bold was made with
<b>bold</b>
in the HTML file.
Similarly, text becomes italic when enclosed in <i> and </i>. For example, that word italic was made with
<i>italic</i>
in the html.
Sometimes you want to make a little bit of text float a little bit to the right of some other text, and either above or below. This is called a superscript or subscript in mathematics, where it is used for this like "a quadratic equation has the form ax2+bx+c=0" - the 2 is a superscript. In HTML, to get a superscript, put the floating text between <sup> and </sup>. For example, to get the text "the 1st Amendment of the US Constitution..." you put
the 1<sup>st</sup> Amendment ...
in your HTML file.
You can use exciting colors to make your text really stand out by enclosing it between <font color="color_name"> and </font>. Here color_name can be most obvious choices like
<font color="orange">orange</font>
You can actually get many more colors by using what are called
HTML Color Codes, for which you should search that phrase in your
favorite search engine (which will get you sites like
this one). Color codes look
like "#DF01D7", which corresponds to
this pretty color (which was made by
<font color="#DF01D7">this pretty color</font>
in HTML).
If you want to put ny object in the center of a browser window, just enclose it between <center> and </center>. For example, we can get
<center><b>This important message.</b></center>
A more complex, but often useful, way to format material on a web page is as a table. For example, you might want to make the following information available to your readers:
| Student | Final Exam | Course Grade |
| Albert Einstein | 85% | B |
| Isaac Newton | 92% | A- |
<center><table border="1" cols="3">
<tr>
<td>
Student
</td>
<td>
Final Exam
</td>
<td>
Course Grade
</td>
</tr>
<tr>
<td>
Albert Einstein
</td>
<td>
85%
</td>
<td>
B
</td>
</tr>
<tr>
<td>
Isaac Newton
</td>
<td>
92%
</td>
<td>
A-
</td>
</tr>
</table></center>
Note that here we specify at the beginning how many columns will be in the
table, with that cols="3", and that we want a border of size 1
around all of the cells in the table with the border="1". Then
there is a bunch of groups between <tr> and
</tr>, which you can think of as each defining a table
row. Each such row has a bunch of items, which will come out as the
individual cells in that row, each between <td> and
</t>, which you might think of as table data items.
There are two kinds of lists in HTML, those with numbered items and those where each item simply has a bullet (•). In both types of list, the list items appear one after the other, each between <li> and </li> (think of this as list item). For numbered lists, the whole thing is wrapped up between <ol> and </ol> (think of it as ordered list), while for bullet lists it is between <ul> and </ul> (think of it as unordered list). For example, to get
<ul>
<li>First bullet point.
</li>
<li>Second bullet point.
</li>
<li><i>etc.</i>
</li>
</ul>
<ol>
<li>First numbered point.
</li>
<li>Second numbered point.
</li>
<li><i>etc.</i>
</li>
</ol>
Sometimes you might want to change the background of a web page from the default color (usually white) to a different color or even to an image. If you have an image in the file filename, you can use it as a background by making the main <body> look like this
<body background="filename">
If instead you want to make the background a solid color, use
<body bgcolor="color_name">
where color_name is a name or code for a color, as described in
this page, above. For example, this page uses
<body bgcolor="#c0ffee">
because the color code #c0ffee seems pretty cool (notice that is the number
"0", not the letter "o" or "O" in this color code).
Be aware that there are many useful web sites that explain how to use HTML. Just searching with your favorite search engine very frequently gives quite good information.
For example, the site w3schools.com has a large number of very useful tutorials that are easy to understand, complete, and even have interactive components which allow you to test your understanding.
When you are searching around for information about how to do something in HTML, you may come across the acronym CSS. This stands for Cascading Style Sheets and is another language beyond HTML that allows web designers to control many intricate details of the way their sites appear, and therefore to make very beautiful sites. For the HTML beginner, however, CSS can be confusing and should probably just be avoided.
Some students have asked how to make a small image as their background on a page without having it repeated over and over like bricks on a wall. What follows is how; it's not that difficult, although it is a tiny bit intricate.
First of all, take out the background="filename" from the body tag, it should just be plain <body>.
Next, add the following in your header section — that is, add it somewhere between the <head> and the </head> (maybe on a line after the </title>):
<style>
body {
background-image: url("filename");
background-repeat: no-repeat;
}
</style>
where filename is the name of the file with the image you want as
your background.
That will make the background be one copy of the image ... at the upper-left of the web page. If you want the one copy to be in the center of the web page, you would instead use:
<style>
body {
background-image: url("filename");
background-repeat: no-repeat;
background-position: 50% 50%;
}
</style>
|
|
Site maintained by:
Jonathan Poritz (jonathan@poritz.net)
Last modified: |