Creating an HTML page Skills: edit and debug HTML pages IT concepts: text editor This work is...
-
date post
22-Dec-2015 -
Category
Documents
-
view
218 -
download
1
Transcript of Creating an HTML page Skills: edit and debug HTML pages IT concepts: text editor This work is...
![Page 1: Creating an HTML page Skills: edit and debug HTML pages IT concepts: text editor This work is licensed under a Creative Commons Attribution-Noncommercial-](https://reader030.fdocuments.in/reader030/viewer/2022032523/56649d815503460f94a654ba/html5/thumbnails/1.jpg)
Creating an HTML page
Skills: edit and debug HTML pages
IT concepts: text editor
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 License.
![Page 2: Creating an HTML page Skills: edit and debug HTML pages IT concepts: text editor This work is licensed under a Creative Commons Attribution-Noncommercial-](https://reader030.fdocuments.in/reader030/viewer/2022032523/56649d815503460f94a654ba/html5/thumbnails/2.jpg)
Where does this topic fit?
• Internet concepts– Applications– Technology– Implications
• Internet skills– Application development– Content creation
![Page 3: Creating an HTML page Skills: edit and debug HTML pages IT concepts: text editor This work is licensed under a Creative Commons Attribution-Noncommercial-](https://reader030.fdocuments.in/reader030/viewer/2022032523/56649d815503460f94a654ba/html5/thumbnails/3.jpg)
There are tools for creating Web sites that generate HTML for you – why learn HTML?
• Users– To be able to modify pages – for example adding a
feature to a blog– To understand how the technology works in order to
feel empowered and in control
• Developers– To be able to write programs that generate HTML
![Page 4: Creating an HTML page Skills: edit and debug HTML pages IT concepts: text editor This work is licensed under a Creative Commons Attribution-Noncommercial-](https://reader030.fdocuments.in/reader030/viewer/2022032523/56649d815503460f94a654ba/html5/thumbnails/4.jpg)
Use a text editor, not a word processer or HTML editor to do your assignments.
![Page 5: Creating an HTML page Skills: edit and debug HTML pages IT concepts: text editor This work is licensed under a Creative Commons Attribution-Noncommercial-](https://reader030.fdocuments.in/reader030/viewer/2022032523/56649d815503460f94a654ba/html5/thumbnails/5.jpg)
Notepad, a text editor
Word, a word processor
![Page 6: Creating an HTML page Skills: edit and debug HTML pages IT concepts: text editor This work is licensed under a Creative Commons Attribution-Noncommercial-](https://reader030.fdocuments.in/reader030/viewer/2022032523/56649d815503460f94a654ba/html5/thumbnails/6.jpg)
Extra information in a .doc file
A Web client would not understand this.
![Page 7: Creating an HTML page Skills: edit and debug HTML pages IT concepts: text editor This work is licensed under a Creative Commons Attribution-Noncommercial-](https://reader030.fdocuments.in/reader030/viewer/2022032523/56649d815503460f94a654ba/html5/thumbnails/7.jpg)
The Notepad text editor
Notepad is included with Windows.
Start > All programs > Accessories > Notepad
![Page 8: Creating an HTML page Skills: edit and debug HTML pages IT concepts: text editor This work is licensed under a Creative Commons Attribution-Noncommercial-](https://reader030.fdocuments.in/reader030/viewer/2022032523/56649d815503460f94a654ba/html5/thumbnails/8.jpg)
First, enter the text
![Page 9: Creating an HTML page Skills: edit and debug HTML pages IT concepts: text editor This work is licensed under a Creative Commons Attribution-Noncommercial-](https://reader030.fdocuments.in/reader030/viewer/2022032523/56649d815503460f94a654ba/html5/thumbnails/9.jpg)
Add the basic HTML tags
![Page 10: Creating an HTML page Skills: edit and debug HTML pages IT concepts: text editor This work is licensed under a Creative Commons Attribution-Noncommercial-](https://reader030.fdocuments.in/reader030/viewer/2022032523/56649d815503460f94a654ba/html5/thumbnails/10.jpg)
Save the file on your hard drive
![Page 11: Creating an HTML page Skills: edit and debug HTML pages IT concepts: text editor This work is licensed under a Creative Commons Attribution-Noncommercial-](https://reader030.fdocuments.in/reader030/viewer/2022032523/56649d815503460f94a654ba/html5/thumbnails/11.jpg)
Naming your HTML file
Use the extension htm or html.
Be careful to select All Files as the type.
![Page 12: Creating an HTML page Skills: edit and debug HTML pages IT concepts: text editor This work is licensed under a Creative Commons Attribution-Noncommercial-](https://reader030.fdocuments.in/reader030/viewer/2022032523/56649d815503460f94a654ba/html5/thumbnails/12.jpg)
Check to see the file was saved in the directory you selected
Be sure the file has the extension .htm, not .txt.
![Page 13: Creating an HTML page Skills: edit and debug HTML pages IT concepts: text editor This work is licensed under a Creative Commons Attribution-Noncommercial-](https://reader030.fdocuments.in/reader030/viewer/2022032523/56649d815503460f94a654ba/html5/thumbnails/13.jpg)
Display the page with a Web client
The content is correct, but not the presentation. Web clients run everything together.
(Double click on the file name or use the File > Open command in the Web client).
![Page 14: Creating an HTML page Skills: edit and debug HTML pages IT concepts: text editor This work is licensed under a Creative Commons Attribution-Noncommercial-](https://reader030.fdocuments.in/reader030/viewer/2022032523/56649d815503460f94a654ba/html5/thumbnails/14.jpg)
Add the <h2> and <p> tags
![Page 15: Creating an HTML page Skills: edit and debug HTML pages IT concepts: text editor This work is licensed under a Creative Commons Attribution-Noncommercial-](https://reader030.fdocuments.in/reader030/viewer/2022032523/56649d815503460f94a654ba/html5/thumbnails/15.jpg)
Save it on your hard drive then refresh using the Web client
![Page 16: Creating an HTML page Skills: edit and debug HTML pages IT concepts: text editor This work is licensed under a Creative Commons Attribution-Noncommercial-](https://reader030.fdocuments.in/reader030/viewer/2022032523/56649d815503460f94a654ba/html5/thumbnails/16.jpg)
Note that it re-wraps the text if the window is re-sized
![Page 17: Creating an HTML page Skills: edit and debug HTML pages IT concepts: text editor This work is licensed under a Creative Commons Attribution-Noncommercial-](https://reader030.fdocuments.in/reader030/viewer/2022032523/56649d815503460f94a654ba/html5/thumbnails/17.jpg)
Four tips
![Page 18: Creating an HTML page Skills: edit and debug HTML pages IT concepts: text editor This work is licensed under a Creative Commons Attribution-Noncommercial-](https://reader030.fdocuments.in/reader030/viewer/2022032523/56649d815503460f94a654ba/html5/thumbnails/18.jpg)
Notepad and a Web client side by side
Simple debugging -- change the HTML, save it, and refresh the client.
![Page 19: Creating an HTML page Skills: edit and debug HTML pages IT concepts: text editor This work is licensed under a Creative Commons Attribution-Noncommercial-](https://reader030.fdocuments.in/reader030/viewer/2022032523/56649d815503460f94a654ba/html5/thumbnails/19.jpg)
HTML source for the Classes page on my Web site
The browser View > Source command
![Page 20: Creating an HTML page Skills: edit and debug HTML pages IT concepts: text editor This work is licensed under a Creative Commons Attribution-Noncommercial-](https://reader030.fdocuments.in/reader030/viewer/2022032523/56649d815503460f94a654ba/html5/thumbnails/20.jpg)
The HTML <br> tags are missing
The composed page has line breaks
HTML editors may be approximate
![Page 21: Creating an HTML page Skills: edit and debug HTML pages IT concepts: text editor This work is licensed under a Creative Commons Attribution-Noncommercial-](https://reader030.fdocuments.in/reader030/viewer/2022032523/56649d815503460f94a654ba/html5/thumbnails/21.jpg)
Before starting, turn off Windows extension hiding
tools > folder options ... > view
uncheck
You only have to do this one time.
![Page 22: Creating an HTML page Skills: edit and debug HTML pages IT concepts: text editor This work is licensed under a Creative Commons Attribution-Noncommercial-](https://reader030.fdocuments.in/reader030/viewer/2022032523/56649d815503460f94a654ba/html5/thumbnails/22.jpg)
A few questions
![Page 23: Creating an HTML page Skills: edit and debug HTML pages IT concepts: text editor This work is licensed under a Creative Commons Attribution-Noncommercial-](https://reader030.fdocuments.in/reader030/viewer/2022032523/56649d815503460f94a654ba/html5/thumbnails/23.jpg)
What difference would it make in our example if you accidently left of the paragraph closing tag </p>?
What difference does it make if you add extra blank lines between two lines of text?
![Page 24: Creating an HTML page Skills: edit and debug HTML pages IT concepts: text editor This work is licensed under a Creative Commons Attribution-Noncommercial-](https://reader030.fdocuments.in/reader030/viewer/2022032523/56649d815503460f94a654ba/html5/thumbnails/24.jpg)
Creating an HTML page
Skills: edit and debug HTML pages
IT concepts: text editor
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 License.