1 / 21

Getting Started with HTML

Getting Started with HTML. Please use speaker notes for additional information! If viewing this presentation from the class website, view Speaker Notes as follows: Right-click on this slide and select Full Screen

jackson-rowe
Download Presentation

Getting Started with 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. Getting Started with HTML Please use speaker notes for additional information! If viewing this presentation from the class website, view Speaker Notes as follows: Right-click on this slide and select Full Screen In the lower left corner of the screen click on the square (a pop-up menu will appear) Select Screen and then select Speaker Notes

  2. Notepad Open Notepad to write your code. Do not use a word processor. Notepad does not insert any extra characters in your code so what you write is what you get...

  3. In Browser I am testing this from my hard drive rather then from the web - you do not see the http in the address, but rather the address on my computer.

  4. In Browser I am testing this from my hard drive rather then from the web - you do not see the http in the address, but rather the address on my computer.

  5. In Browser I am testing this from my hard drive rather then from the web - you do not see the http in the address, but rather the address on my computer.

  6. Writing HTML The HTML tag coded as <html> is written on the first line of code to indicate that the code is in HTML. The basic HTML tags for an HTML document are enclosed in < >. The HTML document has two major parts: HEAD and BODY. Here we are showing that we are in the <head> portion of the code. When the head portion is complete, it is closed with </head>. The title of the document is enclosed in the start tag <title> and the close tag</title>. The words in between the tags are the title. The TITLE will appear in the top left of the screen when the code is executed. Look at the output on the previous slide!

  7. Notepad - Saving your HTML file You need to have type All files (*.*). Be sure that you save your file with a .html or a .htm extension. In this example I saved my file as getstart.html

  8. Writing HTML continued The BODY is where the main code to create the HTML web page or HTML document is located. This code uses the H1 and H2 tags. These are header tags. The 1 is the biggest header font, and the 2 is one level down. Notice that the header tags include the open <h1> and the close </h1>. The text for the header is enclosed between the opening and closing tags.

  9. Writing HTML continued <li> is the tag for each item in the list. Notice there is also a close </li>. See the results on the next screen. <ul> for unordered list has an open and a close. The last two lines of code close the BODY and close the HTML.

  10. Each of the lines in the list are list items inside an unordered list. The lines are preceded by bullets to signify a list. Note that I started a new unordered list without closing the original - this causes the indenting that you see. The indenting uses different bullets. <ul>opens the list. Note that the <li> occurs 4 times and then another <ul> is used. This means I want a list within a list and causes the indenting and the change of bullets. When I finish the list within a list, I close the inner ul and continue with another <li> for the original list. <ul> <li>Write your HTML code in Notepad</li> <li>Save it as a name with a .html or .htm</li> <li>I leave the notepad open for possible changes</li> <li>In Netscape or Explorer open the file</li> <ul> <li>In Netscape, this is done with File/Open Page</li> <li>In Explorer, this is done with File/Open</li> </ul> <li>You will need to browse or explorer and find the file or type in the name</li>

  11. Opening the file in Netscape In Netscape, first do a File/Open File. Highlight the file you want and press Open. Note the name you highlight will appear in the file name spot after it is highlighted.

  12. In Browser

  13. Opening the file in Explorer To open the file, use File/Open. Use browse to find the file. Press OK and the Web page will load

  14. Making a change I changed this page in Notepad by adding BGCOLOR and TEXT to the BODY tag. After making the changes, I saved. <HTML> <HEAD> <TITLE>Demonstrate getting started</TITLE> </HEAD> <BODY BGCOLOR=YELLOW TEXT=RED> <H1>Demonstrate getting started</H1> <H2>Things to do:</H2> <UL> <LI>Write your HTML code in Notepad <LI>Save it as a name with a .html or .htm <LI>I leave the notepad open for possible changes <LI>In Netscape or Explorer open the file <UL> <LI>In Netscape, this is done with File/Open Page <LI>In Explorer, this is done with File/Open </UL> <LI>You will need to browse or explorer and find the file or type in the name <LI>Your page should no appear in the browser window - if it doesn't you probably have a problem in your code <LI>To fix problems or add to your page, switch back to notepad and make the changes <LI>Save the changes under the same name if you want to continue working on the same page <LI>In the browser, use Reload or Refresh to see the changes <LI>Note: Occasionally I have to go back and open the page again instead of using reload or refresh </UL> </BODY> </HTML>

  15. Making a change I changed this page in Notepad by adding BGCOLOR and TEXT to the BODY tag. After making the changes, I saved. <html> <head> <title>Demonstrate getting started</title> </head> <bodybgcolor="yellow" text="red"> <h1>Demonstrate getting started</h1> <h2>Things to do:</h2> <ul> <li>Write your HTML code in Notepad</li> <li>Save it as a name with a .html or .htm</li> <li>I leave the notepad open for possible changes</li> <li>In Netscape or Explorer open the file</li> <ul> <li>In Netscape, this is done with File/Open Page</li> <li>In Explorer, this is done with File/Open</li> </ul> <li>You will need to browse or explorer and find the file or type in the name</li> <li>Your page should no appear in the browser window - if it doesn't you probably have a problem in your code</li> <li>To fix problems or add to your page, switch back to notepad and make the changes</li> <li>Save the changes under the same name if you want to continue working on the same page</li> <li>In the browser, use Reload or Refresh to see the changes</li> <li>Note: Occasionally I have to go back and open the page again instead of using reload or refresh</li> </ul> </body> </html>

  16. After making changes to the page in Netscape, I save the pages. Then I go back to Netscape and use Reload. Note: You can also open the page again.

  17. Viewing page Remember, when developing Web sites, you should always test your page in Netscape and Explorer with as many versions as possible. If you have access to computers with different settings and different screen sizes, it is always wise to view a professional site as many ways as possible. Remember there are a wide variety of users and user configurations.

  18. View source To see the HTML code for your page or one of mine in Netscape, go to View/Page Source. The source will appear on a separate screen.

  19. View source using Netscape 6.2

  20. View source To see the source code in Explorer, go to View/Source. The source code will appear in Notepad.

  21. View/Source in Explorer brings up the source code in Notepad.

More Related