1 / 25

Using HTML to Create a Basic Web Page… By Josh Gallagan

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.

tausiq
Download Presentation

Using HTML to Create a Basic Web Page… By Josh Gallagan

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Using HTML to Create a Basic Web Page… By Josh Gallagan

  2. How do web pages compare to the Wizard of Oz? http://www.youtube.com/watch?v=YWyCCJ6B2WE

  3. How do web pages work?

  4. How do web pages work?

  5. HTML is the Man Behind the Curtain • HTML is the "hidden" code that helps us communicate with others on the World Wide Web (WWW).

  6. 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.

  7. 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.

  8. 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.

  9. 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.

  10. 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.

  11. 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

  12. The 8 Elements of a Webpage • <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

  13. A Basic Web Document Structure <html> <head> <title>Title of page</title> </head> <body> This is my first homepage. </body> </html>

  14. Your Turn • Now you practice by creating your own web page using HTML. • Follow the instructions on the handout to create your webpage.

  15. 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.

  16. 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.

  17. 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>

  18. Adding Bold Text • <html> <head> <title>Title of page</title> </head> <body> <b>This is my first homepage.</b></body> </html>

  19. Centering Text <html> <head> <title>Title of page</title> </head> <body> <center><b>This is my first homepage.</b></center></body> </html>

  20. 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>

  21. 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>

  22. 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>

  23. 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

  24. HTML vs XHTML • We will review this later, I do not want to overwhelm you. • XHTML requires mandatory DTD which stands for Doctype Declaration.

  25. Where To Go From Here • www.w3schools.com • www.htmlgoodies.com • www.yourhtmlsource.com • www.htmlquick.com WYSIWYGs = Dreamweaver

More Related