Basic HTML Concepts
As you learned in the
Plan section, the minimum tools required to build a website are an internet-connected computer, a browser, and a text editor. However, it may be faster and easier for most students to use web design software (such as Adobe Dreamweaver) instead of a text editor.
Even if you do use web design software, it's useful for students to understand some basic concepts behind HTML:
- HTML stands for Hyper Text Markup Language. HTML is often called the "language of the internet" because all web pages are written in it. Web browsers (such as Internet Explorer, Firefox, and Safari) are designed to read and transfer HTML documents, which is why web addresses begin with "http" (hyper text transfer protocol).
- URL stands for Uniform Resource Locator and it's another way of saying "web address." For example, the URL for ThinkQuest is http://www.thinkquest.org.
- An HTML document is nothing more than a text file with an .htm or .html file extension. A file extension identifies the type of file, so that the computer knows what to do with it. You are probably already familiar with file extensions such as .doc for Microsoft Word documents, .cwk for AppleWorks documents, or .ppt for Microsoft Powerpoint files. In this case, a computer will know that a file with the extension .htm or .html is designed to be viewed in a web browser.
- An HTML document contains special "tags" that tell the browser what to show on the web page. HTML tags control everything, including the layout of the page and the size and colors of the words on it. All tags are enclosed in brackets that look like this <>. To view the HTML behind any web page, open the page in a browser; then, go to your browser's top menu and select View and then Page Source (or Source).
- Different browsers will read HTML tags a little differently, so what you see on one browser is not necessarily what you will see when using another browser. That's why it's a good idea to test your site in a variety of browsers.
Now, you can follow these instructions to create a very simple web page (or,
click here for directions with screen shots):
- Open a text editor (such as Notepad or Simple Text).
- Type "THIS IS A WEB PAGE"
- Save the file as index.htm.
- Open a web browser (such as Internet Explorer, Netscape, Firefox, or Safari).
- Click File, then Open, and browse to your index.htm file.
- Congratulations! You just created a web page.
- Open your index.htm file in the text editor again.
- Edit your text as follows: "THIS IS A <b>WEB</b> PAGE"
- Save the file again.
- Open your index.htm file in a browser again.
- You should see that only the word "WEB" is bold now. That is because the <b> tag tells the browser to start making the text bold. The </b> tag tells the browser to stop making the text bold.
- Congratulations! You just hand coded HTML for a web page.
Additional resources to learn basic HTML:
Disclaimer: It is the team's responsibility to ensure that a) information on third-party sites aligns with ThinkQuest standards and
Rules and b) technology created using third-party tools can be hosted on the ThinkQuest servers and does not otherwise breach the
Rules. All links to third-party sites are provided only as a courtesy to make teams aware of additional resources that may be helpful; ThinkQuest does not manage, endorse, or take responsibility for the content on third-party sites.
Basic Design Concepts
Students can begin to design the "look and feel" of their website by sketching ideas for page layouts. Teams are encouraged to go beyond the look and feel of a traditional website and use innovative formats such as a digital story, comic book, or photo essay.
Students should consider the following basic questions when designing their site:
- Audience: What is the purpose of the website? Who is the target audience? Do they have special needs or expectations?
- Appearance: Will there be a consistent heading or logo on each page? Where will the text go? Where will the pictures go? Will format and style (such as colors and fonts) remain consistent across all pages? What colors and fonts will be easy to read?
- Navigation: How will the user get from one page to another and back to the home page? Will there be a menu?
- Originality: How can we use an innovative format to make our website stand out?
Additional resources:
Disclaimer: It is the team's responsibility to ensure that a) information on third-party sites aligns with ThinkQuest standards and
Rules and b) technology created using third-party tools can be hosted on the ThinkQuest servers and does not otherwise breach the
Rules. All links to third-party sites are provided only as a courtesy to make teams aware of additional resources that may be helpful; ThinkQuest does not manage, endorse, or take responsibility for the content on third-party sites.
Site Architecture
Once your team has a good
site map in place and an understanding of how web pages work, you can begin to plan how you want to organize the actual folders and files that will make up your website. Planning these details in advance can make it much easier to manage your website going forward.
To begin, create a folder on your computer that represents your team's top level directory on the ThinkQuest server. (In this section, this folder will be referred to as the "top level folder.") This will allow your team to build your site using
relative links.
All subfolders and files within this "top level folder" should eventually match your team's directory on the ThinkQuest server exactly. For example, if the "top level folder" on your computer contains a subfolder called
images, your team's directory on the ThinkQuest server will also need to contain a subfolder called
images. Similarly, if that
images subfolder on your computer contains a file named
team_photo.jpg, you will need to upload that exact file to the corresponding
images subfolder on the ThinkQuest server.
If you would like to avoid re-creating your directory on the ThinkQuest server and uploading files one by one, there are two alternatives:
- You can compress your entire website into a zip file before using the File Upload Tool. See the Upload section for more details.
- You can copy your entire website over to your team directory using WebDAV. See the Upload section for more details.
Entry Requirements
Warning! Before creating and uploading website files, make sure the entire team is aware of entry requirements listed in the
Rules.
Violation of any requirements may result in disqualification.
Technical Restrictions
Warning! Before creating and uploading website files, carefully read all of the information in this section to avoid disqualification for technical issues. Your site may not work correctly on the ThinkQuest server if files are not named and formatted properly.
- Your home page must be named index.htm or index.html (all lowercase), and it must be uploaded to the top level folder of your team's server space.
- The ThinkQuest server may not load your home page automatically if you name it anything else (for example, Index.htm, home.htm, or main.htm will not work) or if you upload it to a subfolder.
- If your home page does not function, your team may be disqualified for technical issues.
- Use only non-accented, Western characters (basic ASCII) in file and folder names.
- Acceptable characters are the 26 letters of the alphabet (from "a" to "z") and digits "0" through "9." Example: page3.htm
- Files named using multi-byte languages (like Chinese or Cyrillic) or characters with accents (like many Hungarian and French words) will not work on the ThinkQuest server.
- Do not use spaces. If you need separate words in a folder or file name, use a hyphen (-) or underscore (_) instead. Example: team_photo.jpg
- Do not use special characters such as asterisks or exclamation points. Use one period (.) before the file extension only. Example: citations.htm
- Use lowercase characters in file and folder names.
- ThinkQuest's server is case-sensitive. Although files with uppercase characters will load properly, we recommend asking everyone on your team to consistently name their files with lowercase characters in order to avoid linking problems. For example, if you upload a file named test.htm and later upload another file that includes links to TEST.HTM or Test.htm, those links will break.
- Work with supported file types (see the Rules).
- The ThinkQuest server supports any kind of file that runs in a browser.
- You can also upload other types of files (such as spreadsheets, word processing documents, presentations, etc.), but users may not be able to view them unless they have the correct software installed on their own computers.
- Server-based technologies such as PHP, Perl, Python, ASP, JSP or Java will not execute or function at all. Do not include them in your website.
- Websites must be functional on both PC and Mac.
- Websites must be functional when viewed using Internet Explorer version 7 and Mozilla version 2.
- Monitor the size of your website (see the Rules).
- Each team has limited space on the ThinkQuest server to upload website files. Check the Rules for the current file space limit. Teams that submit websites that exceed this limit will be disqualified.
- If your team is struggling with space, check to see if any files are duplicated. Also, image and multimedia files can often be compressed to save space.
- The
File Upload tool includes a file usage meter to help you monitor your team's server space.
- All of your team's website files must be uploaded to your team's directory on the ThinkQuest server. Do not host any content (including videos and games) externally.
- Use relative links, not absolute links. Absolute links may break when files are moved from your team's local computer to the team's ThinkQuest server space and then into the ThinkQuest Library. See the example below.
- Links should not point to any specific files on your local computer.
- Links should not point to URLs that include preview.thinkquest.org or webdav.thinkquest.org.
Absolute vs Relative Link Example
An
absolute link includes the entire address needed to find a specific file on a specific computer:
- <a href=""file:\\\C:\windows\desktop\website\animals\dog.html"> is an example of an absolute link pointing to a file called dog.html that is located within a specific directory on the C: drive of your local computer. If you upload a page containing this link to the web, the link will only work when you use your specific computer, where this file is stored. The link will break for everyone else in the world because they don't have access to your local computer.
- <a href="http://webdav.thinkquest.org/03oct/01234/animals/dog.html"> is an example of an absolute link pointing to a file called dog.html that is located within a specific directory on the webdav.thinkquest.org server. If this file is transferred to a different server (for example, the library.thinkquest.org server), the entire address will no longer be valid and the link will break.
In contrast, a
relative link does not include an entire address. Instead, it specifies a path in relation to the current web page or server:
- <a href="animals/dog.html"> is an example of a relative link. It does not point to a specific drive on your local computer, nor is it pointing to a specific server. If a website containing this link is moved to another computer or server, this link will always work as long as there is a subdirectory called animals containing a file called dog.html.
Web Design Software
After your team has decided how the website should be organized and designed, and your team understands the various entry requirements and technical restrictions, you can move on to the process of actually building your site.
Earlier in this section, we reviewed
Basic HTML Concepts, including how to hand code a basic web page. However, most teams will probably want to build their sites using web design software, which is software that allows you to create and edit HTML files without actually knowing the language. Instead, these programs generate the HTML tags automatically. They are also known as WYSIWYG (What You See Is What You Get) editors because you can see what your web page will look like while you are creating it. In contrast, when you hand code HTML using a text editor, you don't really know what it will look like as a web page until you open the file in a browser.
We don't recommend any particular web design software over another, but here are links to some of the most popular software programs (we recommend using the free trial to test software before buying it and/or looking into special educational pricing):
Disclaimer: It is the team's responsibility to ensure that a) information on third-party sites aligns with ThinkQuest standards and
Rules and b) technology created using third-party tools can be hosted on the ThinkQuest servers and does not otherwise breach the
Rules. All links to third-party sites are provided only as a courtesy to make teams aware of additional resources that may be helpful; ThinkQuest does not manage, endorse, or take responsibility for the content on third-party sites.
Image Editors & Archives
It is recommended that students make as many original graphics as possible, by taking photographs, scanning their own artwork, or designing their own graphics using image editors.
Image editors are software programs that allow you to create and edit images. For example, you could use an image editor to create a button, banner, or logo for your site. You could also use an image editor to crop, resize, darken, or lighten a photograph.
We don't recommend any particular image editor over another, but here are links to some of the most popular software programs (we recommend using the free trial to test software before buying it and/or looking into special educational pricing):
- Adobe Photoshop Elements: The Oracle Education Foundation is offering free sets of Adobe software to ThinkQuest teams (available soon). To apply, visit the ThinkQuest Competition website and click the Adobe logo. Video tutorials for Adobe software can be viewed at http://www.adobe.com/designcenter/video_workshop/. Note that the tutorials may be too advanced for some students.
- GNU Image Manipulation Program (free)
http://www.gimp.org
- FastStone (free)
http://www.faststone.org
If students are not able to create all original images, there are many image archives available on the internet. Remember to cite the source for any re-used material. Also, be sure to carefully read any copyright information to determine if permission is required.
Disclaimer: It is the team's responsibility to ensure that a) information on third-party sites aligns with ThinkQuest standards and
Rules and b) technology created using third-party tools can be hosted on the ThinkQuest servers and does not otherwise breach the
Rules. All links to third-party sites are provided only as a courtesy to make teams aware of additional resources that may be helpful; ThinkQuest does not manage, endorse, or take responsibility for the content on third-party sites.
Multimedia Tools
Warning! Before using any third-party tools, please carefully check that the technology can be hosted and supported on the ThinkQuest servers and does not otherwise breach the
Rules.
There are dozens of tools your team can use to add games, animations, videos, and other interactive features to your website. Interactivity can help enhance learning by offering alternative ways to approach a concept. For example, a paragraph of text about a car engine might be enhanced with an animation that demonstrates how the parts of the engine work.
Be sure to carefully read any copyright information; you must provide proper citations and obtain permission (if required) if you use someone else's tools or code to create interactive features.
Tools for creating online activities (games, puzzles, quizzes):
Tools for creating animations:
Tools for producing audio files:
Tools for producing videos:
Disclaimer: It is the team's responsibility to ensure that a) information on third-party sites aligns with ThinkQuest standards and
Rules and b) technology created using third-party tools can be hosted on the ThinkQuest servers and does not otherwise breach the
Rules. All links to third-party sites are provided only as a courtesy to make teams aware of additional resources that may be helpful; ThinkQuest does not manage, endorse, or take responsibility for the content on third-party sites.