15.1 fundamentals of html 2 assignments: 1st—complete the worksheet. 2nd—create your first html...
TRANSCRIPT
![Page 1: 15.1 Fundamentals of HTML 2 assignments: 1st—complete the worksheet. 2nd—create your first HTML web page following the directions in this PowerPoint where](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfc41a28abf838ca5c64/html5/thumbnails/1.jpg)
15.1 Fundamentals of 15.1 Fundamentals of HTMLHTML
15.1 Fundamentals of 15.1 Fundamentals of HTMLHTML
2 assignments: 1st—complete the worksheet.2nd—create your first HTML web page following the directions in this PowerPoint where it says “Let’s practice” **TEXT THAT IS IN GOLD MEANS YOU SHOULD DO THAT ACTION.
UNDERSTAND AND APPLY DESIGN PRINCIPLES TO CREATE PROFESSIONAL APPEARING AND FUNCTIONING WEB PAGES
![Page 2: 15.1 Fundamentals of HTML 2 assignments: 1st—complete the worksheet. 2nd—create your first HTML web page following the directions in this PowerPoint where](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfc41a28abf838ca5c64/html5/thumbnails/2.jpg)
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
Today you will learn how to…
![Page 3: 15.1 Fundamentals of HTML 2 assignments: 1st—complete the worksheet. 2nd—create your first HTML web page following the directions in this PowerPoint where](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfc41a28abf838ca5c64/html5/thumbnails/3.jpg)
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.
![Page 4: 15.1 Fundamentals of HTML 2 assignments: 1st—complete the worksheet. 2nd—create your first HTML web page following the directions in this PowerPoint where](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfc41a28abf838ca5c64/html5/thumbnails/4.jpg)
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.
![Page 5: 15.1 Fundamentals of HTML 2 assignments: 1st—complete the worksheet. 2nd—create your first HTML web page following the directions in this PowerPoint where](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfc41a28abf838ca5c64/html5/thumbnails/5.jpg)
Appearance of a Set or Pair of Tags
Opening Tag
<tag> some text </tag>
Closing Tag
![Page 6: 15.1 Fundamentals of HTML 2 assignments: 1st—complete the worksheet. 2nd—create your first HTML web page following the directions in this PowerPoint where](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfc41a28abf838ca5c64/html5/thumbnails/6.jpg)
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 >
![Page 7: 15.1 Fundamentals of HTML 2 assignments: 1st—complete the worksheet. 2nd—create your first HTML web page following the directions in this PowerPoint where](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfc41a28abf838ca5c64/html5/thumbnails/7.jpg)
Every Web Page has Three Sections:
• the <HTML> section is always 1st.
• the <HEAD> section is always 2nd.
• the <BODY> section will be last.
![Page 8: 15.1 Fundamentals of HTML 2 assignments: 1st—complete the worksheet. 2nd—create your first HTML web page following the directions in this PowerPoint where](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfc41a28abf838ca5c64/html5/thumbnails/8.jpg)
HTML Section
<html> </html>
–tells the browser you’re creating a web page.
–marks the beginning and ending of a web page.
![Page 9: 15.1 Fundamentals of HTML 2 assignments: 1st—complete the worksheet. 2nd—create your first HTML web page following the directions in this PowerPoint where](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfc41a28abf838ca5c64/html5/thumbnails/9.jpg)
Head Section
<head> </head>
–Indicates the start and end of a section of the document used for the title and other header information
![Page 10: 15.1 Fundamentals of HTML 2 assignments: 1st—complete the worksheet. 2nd—create your first HTML web page following the directions in this PowerPoint where](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfc41a28abf838ca5c64/html5/thumbnails/10.jpg)
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 bookmark.• Should be placed between the <head> </head>
tags.
![Page 11: 15.1 Fundamentals of HTML 2 assignments: 1st—complete the worksheet. 2nd—create your first HTML web page following the directions in this PowerPoint where](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfc41a28abf838ca5c64/html5/thumbnails/11.jpg)
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.
![Page 12: 15.1 Fundamentals of HTML 2 assignments: 1st—complete the worksheet. 2nd—create your first HTML web page following the directions in this PowerPoint where](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfc41a28abf838ca5c64/html5/thumbnails/12.jpg)
Basic Structure<html> <head><title> Web Page’s Title </title></head>
<body>Everything, All Info & Pictures
</body></html>
![Page 13: 15.1 Fundamentals of HTML 2 assignments: 1st—complete the worksheet. 2nd—create your first HTML web page following the directions in this PowerPoint where](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfc41a28abf838ca5c64/html5/thumbnails/13.jpg)
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.
![Page 14: 15.1 Fundamentals of HTML 2 assignments: 1st—complete the worksheet. 2nd—create your first HTML web page following the directions in this PowerPoint where](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfc41a28abf838ca5c64/html5/thumbnails/14.jpg)
How to Get Started StartProgramsAccessoriesNotepad This is
what you usually do to get to Notepad
But here… Go to my web page. Look above the picture at the bottom for the Notepad Shortcut. Click on it, select Save, change to your
directory. It should unzip automatically. You have 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.
![Page 15: 15.1 Fundamentals of HTML 2 assignments: 1st—complete the worksheet. 2nd—create your first HTML web page following the directions in this PowerPoint where](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfc41a28abf838ca5c64/html5/thumbnails/15.jpg)
Time to Time to PracticePractice
![Page 16: 15.1 Fundamentals of HTML 2 assignments: 1st—complete the worksheet. 2nd—create your first HTML web page following the directions in this PowerPoint where](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfc41a28abf838ca5c64/html5/thumbnails/16.jpg)
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>
![Page 17: 15.1 Fundamentals of HTML 2 assignments: 1st—complete the worksheet. 2nd—create your first HTML web page following the directions in this PowerPoint where](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfc41a28abf838ca5c64/html5/thumbnails/17.jpg)
How toHow to Save & Save &
View a Web View a Web PagePage
![Page 18: 15.1 Fundamentals of HTML 2 assignments: 1st—complete the worksheet. 2nd—create your first HTML web page following the directions in this PowerPoint where](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfc41a28abf838ca5c64/html5/thumbnails/18.jpg)
Saving a Web Page• FileSave AsSave In (click on the
downward arrow to change the location to your directory)
• Always Save every web page with the .html extension on the filename.– Doing this will change your notepad into a web
page
• When SAVED correctly, you should SEE the Internet Explorer Icon, “the big blue E”
and not the NOTEPAD Icon.
![Page 19: 15.1 Fundamentals of HTML 2 assignments: 1st—complete the worksheet. 2nd—create your first HTML web page following the directions in this PowerPoint where](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfc41a28abf838ca5c64/html5/thumbnails/19.jpg)
Working in Chrome• If you are using Chrome as your
browser, you should see this symbol next to your file name:
![Page 20: 15.1 Fundamentals of HTML 2 assignments: 1st—complete the worksheet. 2nd—create your first HTML web page following the directions in this PowerPoint where](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfc41a28abf838ca5c64/html5/thumbnails/20.jpg)
Don’t forget .html
![Page 21: 15.1 Fundamentals of HTML 2 assignments: 1st—complete the worksheet. 2nd—create your first HTML web page following the directions in this PowerPoint where](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfc41a28abf838ca5c64/html5/thumbnails/21.jpg)
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.
• Or the Chrome Circle• This will cause your web page to appear in a
simulation of the Explorer browser.
![Page 22: 15.1 Fundamentals of HTML 2 assignments: 1st—complete the worksheet. 2nd—create your first HTML web page following the directions in this PowerPoint where](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfc41a28abf838ca5c64/html5/thumbnails/22.jpg)
![Page 23: 15.1 Fundamentals of HTML 2 assignments: 1st—complete the worksheet. 2nd—create your first HTML web page following the directions in this PowerPoint where](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfc41a28abf838ca5c64/html5/thumbnails/23.jpg)
• Make sure the Notepad window is still open as well as your browser.
• Now you will learn to Multitask by Switching between both windows as it will be necessary to make changes to the HTML file and it is easier seeing the actual changes in the browser.
![Page 24: 15.1 Fundamentals of HTML 2 assignments: 1st—complete the worksheet. 2nd—create your first HTML web page following the directions in this PowerPoint where](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfc41a28abf838ca5c64/html5/thumbnails/24.jpg)
Let’s Practice Let’s Practice Saving and Saving and
ViewingViewing
![Page 25: 15.1 Fundamentals of HTML 2 assignments: 1st—complete the worksheet. 2nd—create your first HTML web page following the directions in this PowerPoint where](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfc41a28abf838ca5c64/html5/thumbnails/25.jpg)
With the notepad file still open click: With the notepad file still open click: • FileSave AsSave In (change to your
directory)
File Name type: My1stWebPage.html SAVE
• Minimize your Notepad Screen, go to My Computer & locate where you 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 screens and open your file again
![Page 26: 15.1 Fundamentals of HTML 2 assignments: 1st—complete the worksheet. 2nd—create your first HTML web page following the directions in this PowerPoint where](https://reader036.vdocuments.us/reader036/viewer/2022062806/5697bfc41a28abf838ca5c64/html5/thumbnails/26.jpg)
CONGRATULATIONSCONGRATULATIONS
Are you ready now Are you ready now to learn some more?to learn some more?