1 / 25

15.1 Fundamentals of HTML

15.1 Fundamentals of HTML. Identify the basic structure tags Identify elements of a Web page Start Notepad and describe the Notepad window Enable word wrap in Notepad. Enter the HTML tags Save an HTML file Activate Notepad Use a browser to view a Web page. Fundamentals of HTML.

koto
Download Presentation

15.1 Fundamentals of HTML

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. 15.1 Fundamentals of HTML

  2. Identify the basic structure tags Identify elements of a Web page Start Notepad and describe the Notepad window Enable word wrap in Notepad Enter the HTML tags Save an HTML file Activate Notepad Use a browser to view a Web page Fundamentals of HTML Today you will learn how to…

  3. What is HTML & Tags? • HTML is the language that allows text and graphics to be displayed as Web pages. • HTML uses a series of Special Codes called Tags. • Tags tell a browser application such as Internet Explorer how to display the web page & its items in a browser window.

  4. HTML Tags? • Tags must be surrounded by angle brackets along with some word. • < > or the less and greater than signs. • Tags aren’t case sensitive, so typing a tag either <TITLE>, <title> and <TiTLE> will all do the same. • Tags mostly come in a set or a pair . • Some are single, not a set.

  5. Appearance of a Set or Pair of Tags <tag> some text </tag> Closing Tag Opening Tag

  6. Open or Start Tag • tells the browser to turn on a function. • will appear like this <tag name> End or Close Tag • tells the browser to turn off a function. • looks like the start but, has a slash / • appears like this </tag name >

  7. Every Web Page has Three Sections: • the <HTML> sectionis always 1st. • the <HEAD> section is always 2nd. • the <BODY> section will be last.

  8. HTML Section <html></html> • tells the browser you’re creating a web page. • marks the beginning and ending of a web page.

  9. Head Section <head> </head> • Indicates the start and end of a section of the document used for the title and other header information

  10. Title Section <title> </title> • Displays information on the browser’s blue title bar. • Used so search engines can search the pages’ content and keywords. • Used to bookmarks. • Should be placed between the <head> </head> tags.

  11. Body Section <body> </body> • Contains the majority of the document and the tags used to create your web page. • Comes after the <head> </head> tags.

  12. Basic Structure <html> <head> <title> Web Page’s Title </title> </head> <body> Everything, All Info & Pictures </body> </html>

  13. HTML Editor • Allows you to create a HTML document and see how the codes work. • Some are free, shareware or commercial products. • We will use NOTEPAD.

  14. How to Get Started StartProgramsAccessoriesNotepad • If the Notepad window is not maximized, Maximize it. • Click Format on the menu bar. • If Word Wrap is not checked, click Word Wrap

  15. Time to Practice

  16. Type the following code in Notepad … <html> <head> <title> {Insert your name}’s First Site</title> </head> <body> This is my very first “WEB PAGE”!!! </body> </html>

  17. How to Save & View a Web Page

  18. Saving a Web Page • FileSave AsSave In (click on the downward arrow to change the location to where you will save your file) • Always Save every web page with the .html extension on the filename. • Doing this will change your notepad into a web page • WhenSAVED correctly,you should SEE the Internet Explorer Icon, “the big blue E” and not the NOTEPAD Icon.

  19. Don’t forget .html

  20. Viewing a Web Page • Locate and Open the area where you’ve saved your web page. • Make sure the file name was saved with the .html extension. • Click on the E Icon next to the web page’s file name. • This will cause your web page to appear in a simulation of the Explorer browser.

  21. Make sure the Notepad window is still open as well as your browser. • Now you will learn to Multitask by Switching between both windows will be necessary to make changes to the HTML file and seeing the actual changes on the browser.

  22. Let’s Practice Saving and Viewing

  23. With the your notepad file still open click: • FileSave AsSave In (change your location) File Name type: My1stWebPage.htmlSAVE • Minimize your Notepad Screen, go to My Computer & locate where your saved your file. • You should see the Explorer “E” above your file’s name. Now, double click on it. • Did your file change into a Web Page? • If not, resave your notepad file with .html, close all screen and open your file again

  24. CONGRATULATIONSAre you ready now to learn some more?

More Related