computers and information systems html. how the web works to access a web site enter its address...
TRANSCRIPT
COMPUTERS AND INFORMATION SYSTEMS
HTML
How the Web Works
To access a web site Enter its address (URL) in the address box of your
browser http://www.iwacademy.org
The http:// indicates browser & web server will communicate using Hypertext Transfer Protocol
The www indicates a resource on the World Wide Web
The iwacademy.com is called a domain name Identifies which computer (web server), hosts site
Your web browser sends the request to the appropriate web server on the Internet
Connecting to the Internet
Your modem converts signals from your computer to signals that travel over wire lines to an internet service provider (ISP)
Your ISP provides a connection to the Internet
What is HTML?
Hypertext Markup LanguageWeb’s universal programming languagePlaces codes or tags in a Web documentProvides browsers with info about how to
display pages and create linksDeveloped in 1989
Simplified version of Standard Generalized Markup Language Developed to share documents on different types of
computers
Uses hypertext to link documents
What is HTML? (continued)
First version contained only 30 commands (tags)
Subsequent versions expanded so Web sites could become highly interactive and dynamic
W3C (World Wide Web Consortium)Text (ASCII) files with HTML tags embeddedDisplay the HTML by having browser display
source code ViewSource
Why HTML and not HTML Editors?
Best way to learn HTMLEasier to solve problemsTweak appearanceInclude new features on your page
Getting Started
Create a New Folder in your H-Drive: name it Comp Info
Create a New Folder inside Comp Info folder: name it MynameWebPortfolio (substitute your last name for myname in title of folder)
Creating Web Pages with HTML in NotePad
Click the “Start” menuClick on:
All ProgramsAccessoriesRight Click on NotePadPin to Taskbar
Creating HTML Document in Notepad (cont.)
After opening NotePad type the following: <html>
<head><title>The Name of My Page</title></head><body>Welcome to my Web Page!<p>This is my first web page. My name is...<br>I can't wait to learn more about this.</body></html>
Save Your Web Page
FileSave AsSave in your H:Drive Computer Info
FolderMyNameWebPortfolio Folder (you used your name where it says
MyName)Name the file: myname1.htm Save as type: All FilesClick Save
View the Source Code (HTML)
Open Internet ExplorerFileOpen
(If you do not have the menu bar commands showing on Internet Explorer : right click on the status line at the top of the page containing the commands you do have, select MENU BAR, then FILEOPEN)
Browse (lower right corner of dialog box)Select file (from H:drive)OKYou are now viewing what your source code
looks like displayed on the browser, Internet Explorer.
Display Notepad and Browser on Desktop at Same Time
Open Notepad File• Restore down to ½ size
Open Browser, Browse for file• Restore down to ½ size
Make changes to Notepad fileRefresh Browser to see changes
Problem Viewing in Browser?
Did you save notebook file with the file extension .htm or .html?
Are you looking at type of file ALL?
Did you open/close all tags?
Understanding HTML Tags
HTML is a set of codes (tags) used to create a document (“coding”)
Tags: Format text Place graphics on the page Create links
HTML Tags (continued)
Syntax (format) is requiredEach tag begins with an opening angle
bracket (<)Ends with a closing angle bracket (>)Contains a command between brackets
Example: <HTML> This tag designates beginning of an
HTML document
HTML Tags (continued)
Many tags are pairedClosing tag has same syntax of Opening tag BUT:
Includes a forward slash (/) before command Example : </HTML> is the tag for the ending
of an HTML documentAll text between the opening and closing tags is
affected by the tagsIf the tag is not closed the command will stay in
effect.
Review: HTML Tags
HTML tags are keywords surrounded by angle brackets like <html>
HTML tags normally come in pairs like <b> and </b>
The first tag in a pair is the start tagThe second tag is the end tagStart and end tags are also called opening
tags and closing tags
Practice Using a Tag
Open your practice html in Wordpad (Remember how you saved: change type of file from Text Documents to All Files)
Add a tag to your source code to bold the word first
Insert <b> before the word firstInsert </b> after the word firstREMEMBER:SaveOpen (or Refresh) Internet Explorer
The changes you made to your source code (bold format) are now displayed on your browser
Using HTML Structure Tags
Web pages have two main sections:Head and Body
<head> </head> Must contain a title This title is displayed in title bar when
document is displayed (Open Web Page in Browser, look at title)
May contain other info (format styles for document or keyword info for Web search engines)
Using HTML Structure Tags (continued)
<body> </body> Contains the information that will appear
on the screen Text Graphics Links, etc
Structure of a Web Document
<HTML><HEAD>
<TITLE> text that appears in the
browser’s title bar</TITLE> </HEAD>
<BODY>all info that will be displayed on
screen </BODY></HTML>
About Titles (Head)
A Web page can have only one titleThe title should be specific and descriptive
because it is displayed as: a line item in a browser’s history list in bookmarks in indexes other programs that catalog Web pages
The title should be conciseTitle cannot be formatted like other text, you
cannot change its appearance