1. HTML Text formatting, links, CSS, class user interface
Lab Introduction
BIS1523 – Lecture 2
HTML Text formatting, links, CSS, class user interface

2. Creating an HTML file
For this course, you will need to use Notepad (or notepad++) to edit a text file. For mac, any basic text editor will do.
You should not use microsoft word, or any other ‘fancier’ editor to create these files, it will add a large amount of extra material that will keep me from being able to grade homeworks.
Open notepad by going through the start button, add some HTML to a file, then select “save as” from the file menu to create your new file.

3. Saving non .txt file
You will also need to select a location for the file, as well as making it an .html file.
To select the location, just brows the menu strip on the left hand side of the popup window.
To give it a proper extension, you need to change the filename, as well as the “save as type” to be something other than .txt
We will use “all files”

4. Saving .html files
Once you have your file named correctly (inducing the extension), you can click the “save” button to create the file.
In windows explorer, you should see the file saved with the correct “type” associated with it.
If the file type says “text”, then you did not save it correctly.

5. File Names
The ‘default’ name for a web page is ‘index.html’, or (later) index.php.
You can use any meaningful names for your files, but they should be kept short, and not contain spaces or other punctuation in them.
We will be using three primary extensions for our different file types in this course:
.html for basic web pages with no programming code in them
.php for web pages with programming included
.css for style sheets, which are used to change the appearance of your web page

6. Exercise Create a file with the following basic HTML layout:
Save it as a .html file on the desktop, or in any other convienent place.

7. Web Architecture
HTML files are sent from a web server: a computer at a different location.
However, you are going to edit the files on your local, client machine. So some mechanism needs to exist for you to upload your files for testing (and to turn in your homeworks.)
Several software packages exist to aid the uploading of files, and are generally referred to as FTP programs.
Instead of using FTP, Telnet, or other software, we will be using an interface specially designed for BIS1523 located at the web address:
(You can also get to this web site through the course web site at misweb.cbi.msstate.edu)

8. Course Web Site
Once you log into the course web site, you will see several areas on the screen.
There is a menu area for you to select which homework area you are working in.
For in-class projects, there is also a ‘temp’ folder for you to use
The central area lists all files in the currently selected folder

9. Course Web Site
To upload files to your course web site, drag and drop them from windows into the box in the upper left of the course web site.
During upload the box will turn red, but files may upload so quickly that it’s not noticeable.
You can only drag and drop one file at a time to the web site.

10. Course Web Site
Once you have uploaded some files, they are listed in the central area of the screen, along with the date and time they were uploaded.
You will have up to 4 options available for each file:
Delete to remove the file (you will be prompted to be sure)
View Source will view the HTML, PHP, or CSS code in the file
Open Here will open the file on this screen as it would appear in a browser
Open in new Tab will open the file in your current browser on a different tab

11. Exercise
Upload your “Hello World” file you’ve created to the course web site in the ‘temp’ folder, and see the how different options (“view source” and “open here”) allow you test your file.

12. Grouping Tags
Last class, we mentioned the following grouping (or semantic) tags: Header, Footer, Nav, Article, Aside, Div, Section
Some additional tags we can use that have semantic meaning are:
<p> for a paragraph
<h1>, <h2>, … <h6> for headings. H1 is the largest, h6 is the smallest.
Each of these tags has both a start and end markers, so they can be placed around groups of content.

13. Example: kells.html
Copy the file “kells.html” off of the K: drive into your temporary folder on the course web site.
Notice the structure of this web site:
The web browser adds blank lines between these sections, but does no other formatting.
Header
Paragraph
Nav
Article
Section (origin)
Section (medieval)

14. Example: Headings h1
The first enhancement we can do to this basic web design, is take some of the ‘heading’ style content, and mark it as such using <h1> and <h2> tags.
By doing this, the final result is formatted using larger text.

15. Other Text Specific Tags
Description br
Put in a line break (advance to next line), br has no end tag em
Usually rendered as “italics” text, can use CSS to modify
small
Make text small (legal disclaimers,
strong
Usually rendered as “bold” text, can use CSS to modify
sup or sub
Display the enclosed text as a super or subscript
pre
Performatted text, retain all white-space characteristics (tabs, indent, line breaks, etc)
There are a number of other tags that exist, that are covered in chapter 4.

16. Exercise
Use line breaks <br> and emphasize text <strong> in the kells example to format your content a bit more
Html:

17. Tags without Closing Some tags don’t use a closing tag.
The <br> is an example of one.
The syntax of HTML is moving towards closing those tags within the tag itself, by adding a space and slash character to them:
<br />

18. Links
An important part of the world wide web is the ability to link content to other content; on the same page, on the same server, or on a different server all together.
The <a> tag is the tag that creates a link around a block of text. It uses the “href” attribute to set the destination for the link.
For example:
The above would create a link around the word “Wikipedia”, so that it was clickable, and would direct the web browser to that site when clicked on.

19. Absolute URL’s
Absolute URL: Contains all the information that points to a directory or file, including the scheme, the host, and the path.
This means you can reference an absolute URL from any webpage on any host with the same URL every time.
When referencing a file located on someone else’s web server, always use an absolute URL.
Also use absolute URLs for FTP sites or any kind of URL that doesn’t use an HTTP protocol.

20. Relative URLs
Relative URL: Describes location of file in relation to the file that contains the URL reference.
Linking to:
File in the same directory: Use file name and extension.
Example: anotherlink.html
File in subdirectory: Create URL by typing the name of the subdirectory, followed by a forward slash, and then the name and extension of the desired file.
Example: anotherfolder/somelink.html
File in higher directory: Use two periods and a forward slash for each directory level above the current file.
Example: ../uponefolder/somelink.html
Root relative URLs: If files are on a web server, jump straight to the site’s root and drill down to the targeted file.
Example: /~scanfield/UI/index.php

21. Exercise
Modify the third link in the Nav section to link to the Wikipedia page entry for the Book of Kells
That link is now clickable
In order to link to sections in the same document, we need to first examine how to give them names.

22. The ID and Class attributes
We can use the ID and CLASS attributes to identify sections of content.
ID is a unique identifier for an individual piece of content.
CLASS identifiers can be assigned to more than one piece of content, to group them together. For example, you could create a class called “info-text” for the descriptive paragraphs in our example file.
ID and CLASS names should not contain spaces, instead it is common practice to use the dash character “-” for multi word names.
Not every element needs a name or a class. Only those for which you want to reference in CSS or link to will need them.

23. Example: ID’s
Take our html example, and assign id’s to the “Origin” section, and the “Medieval” section.
You can then link to them by name by using the # sign preceding the name in a link
(add screen shot with <a href=“#origin”> and history

24. Linking to a CSS file
Cascading Style Sheets (CSS) are the text files that contain information on the appearance of our web pages. They can be used for positioning, color, fonts, and a number of other stylistic enhancements.
In order to use a CSS file, one must first link to it in the from your HTML file. You reference it by using the <link> tag in the <head> section of the file.
The “rel” attribute specifies the relationship, the the link is to a CSS file. The href is the name of the css file. You can use absolute or relative URL’s for the style sheet.
There is no closing tag for <link>

25. CSS Syntax The CSS file contains groups of items that consist of:
A selector, which designates which piece of content is being modified
A property, which designates which property is being modified
A value, which designates how the property should be modified.
For example:
The above example would indicate that every “h1” element on the web page have its “color” attribute set to red. So the text would appear in red.

26. Cache-ing Browsers
When modifying CSS files, sometimes a browser will not update very well with the changes. This is due to the browser remembering when the last time it loaded the HTML file was, and if the file hasn’t changed, it doesn’t go get the new version.
You can get around this by re-saving the HTML file and re-uploading it, which will tell the browser to get the new copy
The preferred method for this course is to add a <meta> tag to the top of your HTML file to disable it, the tag should look like:
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">

27. Referencing an Element, ID, or Class
In a CSS file, you can reference an element three ways:
Using the element name
Using the ID name prefaced with a #
Using a CLASS name prefaced with a .
.doesn’t_exist
(we haven’t defined any classes in our example yet)

28. A Few Starting Attributes
There are a number of CSS attributes you can use to control the style of content in your web page. A few we will start with today are:
Color: Affects the color of the foreground of the content
Background: affects the color of the background of the content
Border: Affects the type of border around the content
Today, we will stick to the simple color constants available for values. Some of the color values are:
Aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow
A full list is available at

29. Border Styles
We will start with 2 attributes that can affect a border around content, they are:
Border-style
Border-style can have the following values:
Dotted, dashed, solid, double, groove, ridge, inset, outset
Border-width, which is measured in pixels
Modify our CSS to include a border around the nav
Notice we separate each attribute with a semicolon.