Transcript Slide 1
Using HTML to Create a Basic Web Page… By Josh Gallagan How do web pages compare to the Wizard of Oz? http://www.youtube.com/watch?v=YWyCCJ6B2WE How do web pages work? How do web pages work? HTML is the Man Behind the Curtain HTML is the "hidden" code that helps us communicate with others on the World Wide Web (WWW). The method behind the madness… www.yahoo.com – Show Source Why do you need to learn HTML… Foundation of web design Everyone is doing it…The way things are going. What is HTML? H-T-M-L are initials that stand for HyperText Markup Language (computer people love initials and acronyms -- you'll be talking acronyms ASAP). Let me break it down for you: Hyper is the opposite of linear. It used to be that computer programs had to move in a linear fashion. This before this, this before this, and so on. HTML does not hold to that pattern and allows the person viewing the World Wide Web page to go anywhere, any time they want. Text is what you will use. Real, honest to goodness English letters. Mark up is what you will do. You will write in plain English and then mark up what you wrote. More to come on that in the next Primer. Language because they needed something that started with "L" to finish HTML and Hypertext Markup Louie didn't flow correctly. Because it's a language, really -- but the language is plain English. History of HTML HTML stands for HyperText Markup Language. Developed by scientist Tim Berners-Lee in 1990. Is a descendant of SGML or Standard Generalized Markup Language which was a descendant of IBMs GML. In 2000 HTML became an international standard for web documents. History of HTML The latest version of HTML is 4.01. The World Wide Web Consortium or W3C sets these standards. XHTML 1.0 or Extensible HTML has worked its way alongside HTML. The future is unknown, but HTML 5.0 and XHTML 5.0 are expected to be released in the near future. How Does HTML Work An HTML file is a text file containing small markup tags or container tags. The markup tags tell the Web browser how to display the page An HTML file must have an htm or html file extension An HTML file can be created using a simple text editor like Notepad or Word. Markup Tags HTML tags are used to mark-up HTML elements HTML tags are surrounded by the two characters < and > The surrounding characters are called angle brackets HTML tags normally come in pairs like <b> and </b> The first tag in a pair is the open tag , the second tag is the closing tag. The text between the start and end tags is the element content HTML tags are not case sensitive, <b> means the same as <B> There are many HTML markup tags The 8 Elements of a Webpage 1. 2. 3. 4. 5. 6. 7. 8. <html> - Opening HTML tag <head> - Opening head tag <title>Title of page</title> - Title tags </head> - Closing head tag <body> - Opening body tag This is my first homepage. - Content </body> - Closing body tag </html> - Closing html tag A Basic Web Document Structure <html> <head> <title>Title of page</title> </head> <body> This is my first homepage. </body> </html> Your Turn Now you practice by creating your own web page using HTML. Follow the instructions on the handout to create your webpage. Instructions Open Notepad. Type the HTML into Notepad. Save the document as index.html You can save it right on your desktop. After you have saved the document, open it up in Internet Explorer. You should be able to see your webpage. View Source Code Once you have opened your file using Internet Explorer, right mouse click anywhere on the webpage. When the menu pops up select>View Page Source. This will allow you to edit your code or you can also check the code of another website. More Markup Tags Adding Bold Text <b> </b> Centering Text <center> </center> Horizontal Rule <hr> no end tag needed Add vertical space or a break <br> no end tag needed Hyperlink <a href =“http://www.joshgallagan.com”> Mr. G’s Page </a> Adding Bold Text <html> <head> <title>Title of page</title> </head> <body> <b>This is my first homepage.</b> </body> </html> Centering Text <html> <head> <title>Title of page</title> </head> <body> <center> <b>This is my first homepage.</b> </center> </body> </html> Adding a Horizontal Rule <html> <head> <title>Title of page</title> </head> <body> <center> <b>This is my first homepage.</b> </center> <hr> </body> </html> Adding Vertical Space <html> <head> <title>Title of page</title> </head> <body> <br> <center><b>This is my first homepage.</b></center> <br> <hr> <br> </body> </html> Adding a Hyperlink <html> <head> <title>Title of page</title> </head> <body> <br> <center><b>This is my first homepage.</b></center> <br> <hr> <br> <a href =“http://www.ellagallagan.com”> Ella’s Page </a> </body> </html> W3C and Validate W3C = World Wide Web Consortium W3C is the governing body of web design. They determine the web design standards. To check your code, go to w3c.org HTML vs XHTML We will review this later, I do not want to overwhelm you. XHTML requires mandatory DTD which stands for Doctype Declaration. Where To Go From Here www.w3schools.com www.htmlgoodies.com www.yourhtmlsource.com www.htmlquick.com WYSIWYGs = Dreamweaver