15.1 Fundamentals of HTML DeKalb County School System.
-
Upload
elisabeth-washington -
Category
Documents
-
view
218 -
download
0
Transcript of 15.1 Fundamentals of HTML DeKalb County School System.
![Page 1: 15.1 Fundamentals of HTML DeKalb County School System.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f295503460f94c423da/html5/thumbnails/1.jpg)
15.1 Fundamentals of 15.1 Fundamentals of HTMLHTML
15.1 Fundamentals of 15.1 Fundamentals of HTMLHTML
DeKalb County School System DeKalb County School System
![Page 2: 15.1 Fundamentals of HTML DeKalb County School System.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f295503460f94c423da/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 DeKalb County School System.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f295503460f94c423da/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 DeKalb County School System.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f295503460f94c423da/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 DeKalb County School System.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f295503460f94c423da/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 DeKalb County School System.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f295503460f94c423da/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 DeKalb County School System.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f295503460f94c423da/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 DeKalb County School System.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f295503460f94c423da/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 DeKalb County School System.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f295503460f94c423da/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 DeKalb County School System.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f295503460f94c423da/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 bookmarks.• Should be placed between the <head> </head>
tags.
![Page 11: 15.1 Fundamentals of HTML DeKalb County School System.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f295503460f94c423da/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 DeKalb County School System.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f295503460f94c423da/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 DeKalb County School System.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f295503460f94c423da/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 DeKalb County School System.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f295503460f94c423da/html5/thumbnails/14.jpg)
How to Get Started StartProgramsAccessoriesNotepad
• 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 DeKalb County School System.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f295503460f94c423da/html5/thumbnails/15.jpg)
Time to Time to PracticePractice
![Page 16: 15.1 Fundamentals of HTML DeKalb County School System.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f295503460f94c423da/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 DeKalb County School System.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f295503460f94c423da/html5/thumbnails/17.jpg)
How toHow to Save & Save &
View a Web View a Web PagePage
![Page 18: 15.1 Fundamentals of HTML DeKalb County School System.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f295503460f94c423da/html5/thumbnails/18.jpg)
Saving a Web Page• FileSave AsSave 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
• 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 DeKalb County School System.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f295503460f94c423da/html5/thumbnails/19.jpg)
Don’t forget .html
![Page 20: 15.1 Fundamentals of HTML DeKalb County School System.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f295503460f94c423da/html5/thumbnails/20.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.
• This will cause your web page to appear in a simulation of the Explorer browser.
![Page 21: 15.1 Fundamentals of HTML DeKalb County School System.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f295503460f94c423da/html5/thumbnails/21.jpg)
![Page 22: 15.1 Fundamentals of HTML DeKalb County School System.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f295503460f94c423da/html5/thumbnails/22.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 will be necessary to make changes to the HTML file and seeing the actual changes on the browser.
![Page 23: 15.1 Fundamentals of HTML DeKalb County School System.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f295503460f94c423da/html5/thumbnails/23.jpg)
Let’s Practice Let’s Practice Saving and Saving and
ViewingViewing
![Page 24: 15.1 Fundamentals of HTML DeKalb County School System.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f295503460f94c423da/html5/thumbnails/24.jpg)
With the your notepad file still open click: With the your notepad file still open click: • FileSave AsSave 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
![Page 25: 15.1 Fundamentals of HTML DeKalb County School System.](https://reader036.fdocuments.net/reader036/viewer/2022062722/56649f295503460f94c423da/html5/thumbnails/25.jpg)
CONGRATULATIONSCONGRATULATIONS
Are you ready now Are you ready now to learn some more?to learn some more?