HTML WebQuest

Introduction

HTML Introduction

HTML stands for Hypertext Markup Language and is used for the basis of making webpages to go on websites. HTML is the language that you use to put content on the page.  

Task

Describing your task

In this webquest you will learn how to write the code for an HTML page, and hopefully write your own. You will learn the basic tags for HTML like the <!DOCTYPE>, <html>,<body>, and <head>. All of these tags are necessary to make a webpage from scratch. Then you will learn how to add content with the <p> tag.

Process

How to write an HTML page

To write an HTML page you need a text editor. Some examples : Notepad, Notepad++, and gedit(Linux), or the command line if you are that code savvy . Most computers come with notepad preinstalled, on windows. To start writing a webpage you must open your preferred text editor.

To start you want to make a declaration. The declaration we're going to use is in a tag that looks like <!DOCTYPE>. This tag tells the browser the version of HTML being used. Today, it is mostly HTML5. So at the top of your new document you write <!DOCTYPE HTML>.

 

The <html> tag is used to start the actual document. All of your content will go in between these two tags, as well as another set of tags. You start, also called open, a tag like this:

<html>

And end, or close, the tag like this:

</html>

 

The next tags you need to know about are very similar in the way you write them and where you put them, but also very different in what they do. The <head> tag is where all the information for your website goes. The info you'd put in the head tag is the title of your webpage, the keywords used to search for your webpage, and any links to scripts or stylesheets you used.

 

The <body> tag is where you start writing your content, within another set of tags but this is where the tags go. You will open it and close it within the <html> and </html> tag.

So once you add your <body> and <head> tags your document should look like this with a few exceptions. You should have the declaration tag, the html tag, the head, and body tag.

Now for the title tag. It is used just like the <head> and <body> tags, meaning it has an open and closing tag, but instead of putting content in other tags you put the title and that's it. It is used like this:<title>My Webpage!</title>

Now to add some content! The most basic way to add content is to use a tag labeled <p>, p standing for paragraph. You use this tag the same way as you use the others, you open it, <p>, and close it, </p>. You put the sentence/paragraph between the two tags. Example:

<p> I'm learning HTML!</p>

 

This is how you make an extremley basic webpage. You can learn how to add color, pictures, and style your content to your liking using another language called CSS.

 

If you had trouble understanding this document here is a youtube video that teaches HTML:

http://www.homeandlearn.co.uk/JS/images/chapter_1/javascript_head.gif 

Now to add some content! The most basic way to add content is to use a tag labeled <p>, p standing for paragraph. You use this tag the same way as you use the others, you open it, <p>, and close it, </p>. You put the sentence/paragraph between the two tags. Example:

<p> I'm learning HTML!</p>

This is how you make an extremley basic webpage. You can learn how to add color, pictures, and style your content to your liking using another language called CSS.

If you had trouble understanding this document here is a youtube video that teaches HTML:

http://www.youtube.com/watch?v=JAbAEe3tCGs

Evaluation

Rubric:

Correct <!DOCTYPE> tag inserted into page: 2 points

<Body> and <Head> tags are used appropriately: 6 points

Web page is titled "My Web Page!" correctly: 2 points

There are at least 4 paragraphs describing yourself: 10 points 

Conclusion

Conclusion

There are a huge amount of resources that you can find to add style, more content, like images and audio. New advances are made every day for web development.

Here are some web sites that can teach you to write in these languages:

www.codecademy.com

www.w3schools.com

Credits