1 / 22

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

Learn the fundamentals of HTML, the history, how HTML works, important markup tags, and key elements of webpage structure. Discover hands-on tips for practicing and enhancing pages.

olmsted
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 work?

  3. How do web pages work?

  4. The method behind the madness… • www.yahoo.com Why do you need to learn HTML… • Foundation of web design • Everyone is doing it…The way things are going.

  5. What is HTML? • HTML stands for Hyper Text Markup Language • HTML is the "hidden" code that helps us communicate with others on the World Wide Web (WWW).

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

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

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

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

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

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

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

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

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

  15. 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.ellagallagan.com”>Ella’s Page</a>

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

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

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

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

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

  21. Review Activity 10 pts.

  22. Where To Go From Here • www.w3schools.com • www.htmlgoodies.com • www.yourhtmlsource.com • www.htmlquick.com WYSIWYGs

More Related