Guide to HTML, CSS, and JavaScript (Computer Science 4 All 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 bscacad3.buffalostate.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:
<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>
The rendered web page would look like this:
Hello!
This is my sample 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="keywords" content="HTML, CSS, JavaScript, tutorial"/>
<meta name="author" content="Jim Gerland"/>
<meta charset="UTF-8"/>
<meta> TagsExternal 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 "Computer Science 4 All" as a link and have the UB web site open when that link is clicked then you would use this code:
<a> TagImages: 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> TagThe <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://bscacad3.buffalostate.edu/~gerlanjr/"><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:
<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>
- Place 1 cup of flour in a large mixing bowl
- Add one egg
- Add one cup of milk
- Mix until smooth
If you wanted an unordered list, such as a shopping list, you would use something like this:
<li>Milk</li>
<li>Eggs</li>
<li>Flour</li>
</ol>
<ul> TagThe browser will render an unordered list with bullets in front of each item in the list.
- Milk
- Eggs
- Flour
A definition list would be used if you want a glossary of terms. It might look like this:
<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>
<dl> TagThe 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.
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:
- Appropriate html, head, and title tags to give your page a title that contains your name.
- A
<body>tag. - An
<h1>tag that contains your name. - An
<img/>tag with appropriate src, alt, width, and height values that insert a graphic image on your page. It does not matter at this time what the graphic is as long as it is legal and moral. - A
<p>tag that encloses a brief paragraph about yourself. - An
<ol>tag that contains<li>tags that list the remaining Assignments for this course (2, 3, 4, 5, 6, 7, 8, 9, and 10). - At least one of each of these
<strong>,<em>,<hr/>,<br/>
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 bscacad3 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 bscacad3.buffalostate.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.
