s kills : create simple web pages
DESCRIPTION
Introducing HTML. S kills : create simple Web pages Concepts : hypertext, markup , HTML tag, appearance vs. content, text editor, HTML page structure. This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 License. . Where does this topic fit?. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: S kills : create simple Web pages](https://reader035.vdocument.in/reader035/viewer/2022062410/56816361550346895dd4312c/html5/thumbnails/1.jpg)
Skills: create simple Web pagesConcepts: hypertext, markup, HTML tag, appearance vs. content, text editor, HTML page structure
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 License.
Introducing HTML
![Page 2: S kills : create simple Web pages](https://reader035.vdocument.in/reader035/viewer/2022062410/56816361550346895dd4312c/html5/thumbnails/2.jpg)
Where does this topic fit?
• Internet concepts– Applications– Technology– Implications
• Internet skills– Application development (web)– Content creation– User skills
![Page 3: S kills : create simple Web pages](https://reader035.vdocument.in/reader035/viewer/2022062410/56816361550346895dd4312c/html5/thumbnails/3.jpg)
HTML
hypertext markup language
![Page 4: S kills : create simple Web pages](https://reader035.vdocument.in/reader035/viewer/2022062410/56816361550346895dd4312c/html5/thumbnails/4.jpg)
Hypertext
Hypertext:
Linear text: Table of contents
Chapter 1 1Chapter 2 10Chapter 3 20. . .
![Page 5: S kills : create simple Web pages](https://reader035.vdocument.in/reader035/viewer/2022062410/56816361550346895dd4312c/html5/thumbnails/5.jpg)
Markup – adding tags to control appearance
This <b>word</b> is bold.
This word is bold.
![Page 6: S kills : create simple Web pages](https://reader035.vdocument.in/reader035/viewer/2022062410/56816361550346895dd4312c/html5/thumbnails/6.jpg)
Tag Effect<h1> … </h1> large heading<h2> … </h2> smaller heading<p> … </p> paragraph<b> … </b> bold text<i> … </i> italicized text<u> … </u> underlined text
Examples of HTML tags
What do you suppose the command to break a line (like I just did) is?
![Page 7: S kills : create simple Web pages](https://reader035.vdocument.in/reader035/viewer/2022062410/56816361550346895dd4312c/html5/thumbnails/7.jpg)
Tag Effect<hr /> draw a horizontal line
(a rule) across the window
<br /> force a break in the line being typed
Examples of HTML tags
![Page 8: S kills : create simple Web pages](https://reader035.vdocument.in/reader035/viewer/2022062410/56816361550346895dd4312c/html5/thumbnails/8.jpg)
HTML tags control appearance, not content
![Page 9: S kills : create simple Web pages](https://reader035.vdocument.in/reader035/viewer/2022062410/56816361550346895dd4312c/html5/thumbnails/9.jpg)
<!--...--> <cite> <h3> <menu> <strong><!doctype> <code> <h4> <meta> <style><a> <col> <h5> <noframes> <sub><abbr> <colgroup> <h6> <noscript> <sup><acronym> <dd> <head> <object> <table><address> <del> <hr> <ol> <tbody><applet> <dfn> <html> <optgroup> <td><area> <dir> <i> <option> <textarea><b> <div> <iframe> <p> <tfoot><base> <dl> <img> <param> <th><basefont> <dt> <input> <pre> <thead><bdo> <em> <ins> <q> <title><big> <fieldset> <isindex> <s> <tr><blockquote> <font> <kbd> <samp> <tt><body> <form> <label> <script> <u><br> <frame> <legend> <select> <ul><button> <frameset> <li> <small> <var><caption> <h1> <link> <span><center> <h2> <map> <strike>
HTML tags
![Page 10: S kills : create simple Web pages](https://reader035.vdocument.in/reader035/viewer/2022062410/56816361550346895dd4312c/html5/thumbnails/10.jpg)
http://www.w3schools.com/Html/
W3schools
make changes on the left side
see the result on the right side
![Page 11: S kills : create simple Web pages](https://reader035.vdocument.in/reader035/viewer/2022062410/56816361550346895dd4312c/html5/thumbnails/11.jpg)
Codeacademy course on HTML and CSS
![Page 12: S kills : create simple Web pages](https://reader035.vdocument.in/reader035/viewer/2022062410/56816361550346895dd4312c/html5/thumbnails/12.jpg)
1. Write page content using a text editor
2. Add tags
3. Save page
4. View page using a Web browser
5. Correct any errors
Steps to create a Web page
![Page 13: S kills : create simple Web pages](https://reader035.vdocument.in/reader035/viewer/2022062410/56816361550346895dd4312c/html5/thumbnails/13.jpg)
Text editor versus word processor
This is one sentence.
![Page 14: S kills : create simple Web pages](https://reader035.vdocument.in/reader035/viewer/2022062410/56816361550346895dd4312c/html5/thumbnails/14.jpg)
Which text editor?
All programs > Accessories > Notepad
![Page 15: S kills : create simple Web pages](https://reader035.vdocument.in/reader035/viewer/2022062410/56816361550346895dd4312c/html5/thumbnails/15.jpg)
Chrome: Ctrl + U
FireFox: Ctrl + U
Internet Explorer: Ctrl + F3
To display the HTML source
![Page 16: S kills : create simple Web pages](https://reader035.vdocument.in/reader035/viewer/2022062410/56816361550346895dd4312c/html5/thumbnails/16.jpg)
<html><head><title>Page title goes here.</title></head><body>The body of the page goes here.</body></html>
Structure of an HTML page
HTML page structure
Let’s create a Web page.
![Page 17: S kills : create simple Web pages](https://reader035.vdocument.in/reader035/viewer/2022062410/56816361550346895dd4312c/html5/thumbnails/17.jpg)
The Filezilla FTP client
My laptop The Web server
![Page 18: S kills : create simple Web pages](https://reader035.vdocument.in/reader035/viewer/2022062410/56816361550346895dd4312c/html5/thumbnails/18.jpg)
Summary
![Page 19: S kills : create simple Web pages](https://reader035.vdocument.in/reader035/viewer/2022062410/56816361550346895dd4312c/html5/thumbnails/19.jpg)
Self-study questions1. What happens if you accidentally leave the closing tag </b> off of a bold-face
portion of text?2. What happens if you accidently misspell the <b> tag as <bx>?3. How would you make some text both bold face and italicized?4. What does the <hr /> tag do?5. What happens if you leave out the </h2> at the end of a heading?6. What happens if you accidentally leave the "<" off of a tag? 7. Does it matter if tags are in upper case or lower case?8. We introduced several HTML tags that altered the appearance of the page in this
presentation. Do you recall what they were and what each does?9. An HTML page has two sections, what are they and what tags are used to start
and end them?10. What tags start and end an entire HTML page?11. What are some of the other tags shown at w3schools, and what are their
functions? 12. The HTML standard has been revised several times, but Web authors don’t have
to go back and change all of their old pages when a new standard is published. Why not? What does have to be changed when the HTML standard is revised?
![Page 20: S kills : create simple Web pages](https://reader035.vdocument.in/reader035/viewer/2022062410/56816361550346895dd4312c/html5/thumbnails/20.jpg)
Resources
W3schools HTML reference and tutorial:http://www.w3schools.com/Html/
HTML & CSS for Beginnershttp://www.codecademy.com/tracks/htmlcss
Free text editors:http://www.techsupportalert.com/best-free-text-editor.htm
The Filezilla FTP client:https://filezilla-project.org/