HTML H yper T ext M arkup L anguage
What is HTML? It is a programming language that Defines the format of a World Wide Web (WWW) page. It is a simple language to learn made up of “TAGS”
Where did HTML Come From? Tim Berners-Lee was the original developer First developed as a simple hypertext language First developed and used 25 September 1990
History Continued Early problems of HTML, not enough tags could only be used for text tag allows for pictures to be placed on the “Web”, the explosion of the World Wide Web begins.
History Continued 1995 First official standard HTML 2.0 Earliest HTML format Earliest HTML webpage
The Present Currently there are many web page creator programs. Many creators allow “point and click” creation, but you are limited in what you can add to your page. There are scripts that run on web pages now such as JAVA Script, which allow web pages to be more Interactive.
Why should I know HTML? You should know the “Basic Skills” so that you are able to explain how and what create the web page you or your students are looking at. Would you teach addition on a calculator before your students knew the process of addition? NO
Uses of HTML in the Classroom Basic survival – What if you don’t have an editor/creator program? Problem solving exercises – Identify errors Constructivist Theory of education – Students construct projects for posting to “Web” Communication with students & parents through the use of web pages.
Are you Ready? I thought you would be. So in the spirit of Constructivist Educational Theory we will create a simple web page today using simple HTML “Tags”.
The Beginning What program to use? Notepad – Text editor Microsoft Word – Converts text to Hypertext, but you lose out on learning the “tags” So for our purposes today we will use Notepad or on some computers Wordpad.
Our First Tags - Declares that this will be HTML Web Page and can be viewed by a Web browser. (always the first tag and last tag ) - Defines header area of the page, not viewed by the Web browser. ( closing tag) - Used by Web searching programs to name your Web page. ( closing tag) - Determines content that will be viewed by your browser. ( closing tag)
Let us Begin Together Now that you have your text editor program open let’s get going. First let’s type our first tag, do you remember what it is? Second let’s put our heading tag in place.
Third please title your document. Next, let us get to the body/the meat of our page. Type a simple message here. Lastly – let’s close every all of our tags and save the page. Then let’s amaze one another by using our viewer to see what it looks like.
The Message The following tags can be used to emphasize your message. Let’s edit our previous document by using some of these tags. Don’t forget to close the tags. - Actually h1 – h6 are used to change the size of default text h1 is the largest and h6 is the smallest. ( is the closing) - B is for bold ( is the closing) - I is for italicized text ( is the closing) - U is for underlining ( is the closing) Let’s save again and view our page. Amazing, your doing a great job.
Would you like some Color? You can use the following tags to colorize the background or text or links. <body bgcolor=“#ffcc33” bgcolor= Background text=“#000000” text = Text Link=“#0033ff” link = Hyperlinks vlink=“#6600cc” vlink= Visited links Alink=“#ffffff”> alink= Active links ( is the closing) Let us go and change some colors, save and then view. Your on fire!!!!!!
Special Items of Interest Hyper linking – Used to connect to other documents or other web pages. Yahoo creates the active hyperlink for the text outside of the quotation marks (ie. Yahoo) is the closing tag for the link
Special Item of Interest II Images - This simple tag led to the explosion of the Internet. Let learn to use it shall we? Find an image from the web, right click and copy it to your My Documents folder. Remember what you named it. Now somewhere in our practice page lets place our image. Go ahead take a look, Did it work, why not, lets figure it out.
Conclusion You’ve learned the basics of HTML. This knowledge will help you understand what you are seeing on the web and what you are not seeing, the language that lets your pages happen.