Download presentation
Presentation is loading. Please wait.
1
Computers and Information Systems
HTML Computers and Information Systems
2
How the Web Works To access a web site
Enter its address (URL) in the address box of your browser The 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
3
Connecting to the Internet
Your modem converts signals from your computer to signals that travel to an internet service provider (ISP) Your ISP provides a connection to the Internet
4
What is HTML? Hypertext Markup Language
Web’s universal programming language Places codes or tags in a Web document Provides browsers with info about how to display pages and create links Developed in 1989 Simplified version of Standard Generalized Markup Language Developed to share documents on different types of computers Uses hypertext to link documents Web pages are made up of text, graphics, and links to other documents. You use HTML to provide browsers with information about how to display pages and create links. HTML is the Web’s universal programming language, it’s not specific to any platform, computer brand, or operating system. It is a simple markup language that places codes or tags in a Web document, providing information to browsers about the structure of the document.
5
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 embedded Display the HTML by having browser display source code ViewSource First version contained only 30 commands, or tags, which the user embedded in a document. Later versions improved and expanded the capability of the language to the point where highly interactive, dynamic Web sites could be created. W3C (World Wide Web Consortium is the international organization dedicated to maintaining and improving the standards used by the World Wide Web, like HTML. HTML documents are actually text (ASCII) files with HTML tags embedded. HTML tags tell browsers how to display the document; however EACH browser interprets the commands in its own way. For example, if you define a line of text on your Web page as a heading, each browser (Internet Explorer, Mozilla Fire Fox, Netscape) knows to display the line of text as a heading, however each browser may embellish the text in the heading differently, so your Web document will look different when displayed in different browsers That is why it is a good idea to display your web page in different browsers so you can preview how others will be viewing your page. For any Web page that you display in your browser, you display the HTML by having the browser display the source code.
6
Why HTML and not HTML Editors?
Best way to learn HTML Easier to solve problems Tweak appearance Include new features on your page HTML Editors (Dreamweaver, InDesign, Microsoft FrontPage, Kompozer, WebEdit Professional, HotMetal Pro, HotDog Professional are often preferred by professional web developers. We will be using a plain text editor, Notepad, to edit HTML because this is the best way to learn HTML. You will need to be familiar with HTML to be able to solve problems, tweak appearances and learn to include new features on your pages. To do this you will need to do more than have a Wizard create a Web document for you.
7
Getting Started Create a New Folder on your desktop: 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)
8
Creating Web Pages with HTML in NotePad
Go to “Start” menu (symbol in lower left corner that looks like window pane) Click on “Windows Accessories” Right Click on NotePadMorePin to Taskbar
9
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> When you save an HTML file, you can use either the .html or the .htm extension. .htm is a habit from the past, when software only allowed three letters in file extensions. With today’s software it is perfectly safe to use .html.
10
Save Your Web Page FileSave As
Save on your Desktop Computer Info FolderMyNameWebPortfolio Folder Name the file: myname1.htm (type in your last name where it says MyName) Save as type: All Files Click Save (Check folder to see if file saved correctly. Should show the google icon and your filename)
11
View the Source Code (HTML)
Open Internet Explorer FileOpen (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 desktop) OK You are now viewing what your source code looks like displayed on the browser, Internet Explorer. Ask if everyone has menu bar for internet Explorer. If you do not have menu bar, right click on command line on Internet Explorer page, select MENU BAR, then select FILEOPEN and continue with directions.
12
Suggestion for easy editing
Display both your notepad file and your internet explorer browser on your screen As you edit your notepad file you can Refresh (F5) your web page
13
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?
14
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 The work of creating a Web page is often referred to as “coding”. Format: bold, underline, italicize, font size, color, etc. Graphics: Pictures Links: hyperlinks, links, video links, etc.
15
HTML Tags (continued) Syntax (format) is required
Each 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
16
HTML Tags (continued) Includes a forward slash (/) before command
Many tags are paired Closing tag has same syntax as Opening tag BUT: Includes a forward slash (/) before command Example : </HTML> is the tag for the ending of an HTML document All text between the opening and closing tags is affected by the tags If the tag is not closed the command will stay in effect. Many tags are paired, meaning the first tag indicates the beginning of the command and the second tag ends the command. If you forget to close a paired set of tags or you include a backslash or some other character rather than a forward slash, the tag will not be closed, and the command will stay in effect.
17
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 tag The second tag is the end tag Start and end tags are also called opening tags and closing tags <br> break, <p> paragraph, do not have closing tags
18
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 first Insert </b> after the word first REMEMBER: Save Open (or Refresh) Internet Explorer The changes you made to your source code (bold format) are now displayed on your browser
19
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)
20
Using HTML Structure Tags (continued)
<body> </body> Contains the information that will appear on the screen Text Graphics Links, etc
21
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>
22
About Titles (Head) A Web page can have only one title
The 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 concise Title cannot be formatted like other text, you cannot change its appearance
23
Adding an Image (graphic)
When using the source code to add an image to your web page use a web address for the image instead of a file nameThis will help prevent problems with the picture not appearing on your web page. <img src=“web address is inserted between quotation marks” width=“277” height=“200” /> Find your image on the internet. Right click on the image. Select: Copy Image Address. Paste image between quotation marks. Enter width and height. See above for proper syntax. The width and height can be anything you choose. To center image on page: <center> can be inserted above command for image…remember to close center tag.
24
Linking to School E-mail
link with anchor will NOT go to your google account UNLESS you do the following: Use Chrome to open your account In the upper right corner of your search bar, to the left of the Star you will see an icon of two diamond shapes intersecting Right click on the diamonds icon Click on allow Close , then open Your link on your web page should now link directly to your google account
25
Web Page Requirements Web Page Title Name 2 Working Hyperlinks
<a href=“ Cantina</a> 2 different Heading Levels (<h1>,</h1>, thru h6) Ordered (numbered) List (<ol> </ol>) Unordered (bulleted) List (<ul> </ul>) 2 Relevant Graphics <IMG SRC=“ width=“227” height=“200”>
26
Web Page Requirements (continued)
Table: see Select “Learn HTML” under the “HTML Tutorial” heading. Also: See resources on Weebly. Horizontal Line used as separator <HR size=10 width=“75%” color=pink> Link to with correct anchor (SEE SLIDE 24) <a Mrs. Claxton</a> Web page saved as index.html Folder with web page, notepad, & graphics
27
Now, Lets Get Started! Open new file in Notepad, Enter the following:
<HTML> <HEAD> <TITLE>Enter name of your title </TITLE> </HEAD> <BODY> </BODY> </HTML>
28
Getting Started (continued)
Save notepad file: FILESAVE AS Name of File: index.html Save as Type: All Files Save in: Your desktop folder Comp Info in the folder titled yournameWebPortfolio Reduce Notepad file to ½ screen size Open file in Internet Explorer (Browse) Reduce Internet Explorer to ½ screen size so both Notepad and Browser appear on screen Check that your title appears correctly in Browser CREATE BODY OF YOUR WEB PAGE…HAVE FUN!
Similar presentations
