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 scracth. Then you will learn how to add content with the <p>,<img>,and the <h1>-<h6> tags.
Process
How to write an HTML page
To write an HTML page you need a text editor. Some examples : Notepad, Notepad++, and gedit. 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 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
Attachments areaPreview YouTube video HTML and CSS Tutorials 1: Setting up the Development Environment
HTML and CSS Tutorials 1: Setting up the Development Environment
Evaluation
Evaluation
To evaluate, we learned what we need to write an HTML page, we learned what a declaration tag is, what an HTML tag is and how to use it, what the <head> and <body> tags do and how to close them, and how to add content with the <p> tag.
Now you should be able to write an HTML page which is basic but effective. You should be able to show content such as paragraphs and sentences. There is a huge amount of web sites and tutorials online that will teach you how to add images, video, audio, and style to your webpage. There are also resources to put your page on a web site for others to see!
Credits
HTML example image: http://www.homeandlearn.co.uk/JS/images/chapter_1/javascript_head.gif
Youtube video:
http://www.youtube.com/watch?v=JAbAEe3tCGs
Attachments areaPreview YouTube video HTML and CSS Tutorials 1: Setting up the Development EnvironmentHTML and CSS Tutorials 1: Setting up the Development Environment
Completed by Jackson T. and Briana H.
HTML example image: http://www.homeandlearn.co.uk/JS/images/chapter_1/javascript_head.gif
Youtube video:
http://www.youtube.com/watch?v=JAbAEe3tCGs
Html file picture:
http://yukonstruct.com/wp-content/uploads/2014/09/html.jpg
HTML folder:
http://html-code-generator.weebly.com/files/theme/HTMLpicture.
Codecademy Logo:
http://wahlnetwork.com/wn/wp-content/uploads/2013/12/codecademy.png
W3schools logo:
http://cdn.impressivewebs.com/2014-02/w3schools-logo.jpg
<P> start writing image:
http://www.stwi.in/images/blog/html-code/p.jpg
