1 / 56

Using Hyper Text Markup Language to develop a Web page

Using Hyper Text Markup Language to develop a Web page. Objectives. Define vocabulary of HTML and use words to make tags. Define key HTML tags and implement them in source code. Create Web page using Notepad and view it in Browser. Objectives.

aden
Download Presentation

Using Hyper Text Markup Language to develop a Web page

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 Hyper Text Markup Language to develop a Web page

  2. Objectives • Define vocabulary of HTML and use words to make tags. • Define key HTML tags and implement them in source code. • Create Web page using Notepad and view it in Browser.

  3. Objectives • Explore and Master Lewis and Clark’s journey by research, cooperative work, and writing.

  4. Journal Entries (5) • Geography • Climate • Science (animals, plants) • Co-explorers • Native Americans

  5. Journal Pictures (2) • Choose 2 areas from above. • Make 2 pictures for journal entries.

  6. Journal Pictures (2) When scanning or saving an image, abide by the following protocols: • The image must be saved as a JPEG format only. • All images must be saved with the extension .jpg • Your first image should be called yourname1.jpg. The second image yourname2.jpg.

  7. Journal Pictures (2) • All measurement is pixels only. • If the image is horizontal (or landscape format), it must be cropped to no more than 700 pixels wide. • If the image is vertical (or portrait format), it must be cropped to no more than 350 pixels wide.

  8. Journal Pictures (2) • The resolution is set to 72 DPI only • The color format is RGB or Grayscale only

  9. Sources (7) • One source for each journal entry (5) • One source for each picture (2) • Sources cannot be duplicated. • Sources must be from academically acceptable websites.

  10. l

  11. l

  12. ogin l

  13. Vocabulary • URL---Universal resource locater or address of a Web site. This is the URL

  14. Vocabulary • HTML---Hyper Text Markup Language.

  15. Vocabulary • HTML---Hyper Text Markup Language.

  16. Vocabulary • Link---A clickable element that “links”

  17. Vocabulary • Link---A clickable element that “links” or connects a page to another page within the same Web site.

  18. Vocabulary • Link---A clickable element that “links”, or connects, a page to another page within the same Web site.

  19. Vocabulary • Hyperlink--Connects a page to Web.

  20. Vocabulary • Hyperlink--A clickable element that “links” or connects a page to another page on the World Wide Web.

  21. For example, <html> tells the browser that this code is comprised of hyper text markup language. Vocabulary • Tag---Code that instructs the browser to do a task. <html>

  22. Class website has link to our pages

  23. Lower case for all coding. • Lower case for all file names. • OK to use/upper/lower case for content

  24. Make a new folder on your desktop • Name it using your first name and last intitial only.pauls, for example.

  25. Go to the following website: • http//:carversville.com/us1 • Locate your class (a12, a34, a78) • Locate your directory.

  26. Click on your directory • Right click on the your page

  27. Open Notepad. • Paste the code from your webpage into the Notepad file. • Save the Notepad file as index.html to your directory.

  28. Save the image to the same directory of your .html file. • Drag the image to a browser.

  29. Copy the entire URL

  30. Now, go back to your Notepad file. • Find the following code:<imgsrc=“images/yourname.jpg"> • Paste the URL and replace images/yourname.jpg. • Save, refresh browser.

  31. Now, go back to your Notepad file. • Find the following code:<imgsrc=“images/yourname.jpg"> • Paste the URL and replace images/yourname.jpg. • Save, refresh browser. • <marquee scroll ="infinite" direction="left"> • </marquee>

  32. Building Pages • A simple program—Notepad—used to make Web pages

  33. Building Pages • Open Notepad.

  34. Building Pages • Open Notepad. • Type the following HTML tag exactly as shown:

  35. Building Pages • Open Notepad. • Type the following HTML tag exactly as shown: <html>

  36. Building Pages • Type the following HTML tag exactly as shown: <head>

  37. Building Pages • Type the following HTML tag exactly as shown: <title>

  38. Building Pages • Type the following words (you may substitute your own words): My First Web Page

  39. Building Pages • Type the following HTML tag exactly as shown: </title>

  40. Building Pages • Type the following HTML tag exactly as shown: </title> Notice the “front slash” / before the word title.

  41. Building Pages • Type the following HTML tag exactly as shown: </title> The “front slash” / tells the browser to stop a function. In this case the function is to put a title in the very top of a browser page.

  42. Building Pages • Type the following HTML tag exactly as shown: </head>

  43. Building Pages • Then: press enter

  44. Building Pages • Type the following HTML tag exactly as shown: <body>

  45. Building Pages • Type the following HTML tag exactly as shown: <font face=“Arial” color=“black” size=“3”> This tells the browser text is following: The text is Arial, the color is black and the size is 3 on scale of 1-7.

  46. Building Pages • Type the following words (you may substitute your own words): This is my first Web page. Welcome!

More Related