Skills: create simple Web pages Concepts: hypertext, markup, HTML tag, appearance vs. content, text...
-
Upload
hanna-samuels -
Category
Documents
-
view
220 -
download
2
Transcript of Skills: create simple Web pages Concepts: hypertext, markup, HTML tag, appearance vs. content, text...
![Page 1: Skills: create simple Web pages Concepts: hypertext, markup, HTML tag, appearance vs. content, text editor, HTML page structure This work is licensed under.](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c7e5503460f94933803/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: Skills: create simple Web pages Concepts: hypertext, markup, HTML tag, appearance vs. content, text editor, HTML page structure This work is licensed under.](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c7e5503460f94933803/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: Skills: create simple Web pages Concepts: hypertext, markup, HTML tag, appearance vs. content, text editor, HTML page structure This work is licensed under.](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c7e5503460f94933803/html5/thumbnails/3.jpg)
HTML
hypertext markup language
![Page 4: Skills: create simple Web pages Concepts: hypertext, markup, HTML tag, appearance vs. content, text editor, HTML page structure This work is licensed under.](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c7e5503460f94933803/html5/thumbnails/4.jpg)
Hypertext
Hypertext:
Linear text: Table of contents
Chapter 1 1Chapter 2 10Chapter 3 20. . .
![Page 5: Skills: create simple Web pages Concepts: hypertext, markup, HTML tag, appearance vs. content, text editor, HTML page structure This work is licensed under.](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c7e5503460f94933803/html5/thumbnails/5.jpg)
Markup – adding tags to control appearance
This <b>word</b> is bold.
This word is bold.
![Page 6: Skills: create simple Web pages Concepts: hypertext, markup, HTML tag, appearance vs. content, text editor, HTML page structure This work is licensed under.](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c7e5503460f94933803/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: Skills: create simple Web pages Concepts: hypertext, markup, HTML tag, appearance vs. content, text editor, HTML page structure This work is licensed under.](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c7e5503460f94933803/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: Skills: create simple Web pages Concepts: hypertext, markup, HTML tag, appearance vs. content, text editor, HTML page structure This work is licensed under.](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c7e5503460f94933803/html5/thumbnails/8.jpg)
HTML tags control appearance, not content
![Page 9: Skills: create simple Web pages Concepts: hypertext, markup, HTML tag, appearance vs. content, text editor, HTML page structure This work is licensed under.](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c7e5503460f94933803/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: Skills: create simple Web pages Concepts: hypertext, markup, HTML tag, appearance vs. content, text editor, HTML page structure This work is licensed under.](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c7e5503460f94933803/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: Skills: create simple Web pages Concepts: hypertext, markup, HTML tag, appearance vs. content, text editor, HTML page structure This work is licensed under.](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c7e5503460f94933803/html5/thumbnails/11.jpg)
Codeacademy course on HTML and CSS
![Page 12: Skills: create simple Web pages Concepts: hypertext, markup, HTML tag, appearance vs. content, text editor, HTML page structure This work is licensed under.](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c7e5503460f94933803/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: Skills: create simple Web pages Concepts: hypertext, markup, HTML tag, appearance vs. content, text editor, HTML page structure This work is licensed under.](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c7e5503460f94933803/html5/thumbnails/13.jpg)
Text editor versus word processor
This is one sentence.
![Page 14: Skills: create simple Web pages Concepts: hypertext, markup, HTML tag, appearance vs. content, text editor, HTML page structure This work is licensed under.](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c7e5503460f94933803/html5/thumbnails/14.jpg)
Which text editor?
All programs > Accessories > Notepad
![Page 15: Skills: create simple Web pages Concepts: hypertext, markup, HTML tag, appearance vs. content, text editor, HTML page structure This work is licensed under.](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c7e5503460f94933803/html5/thumbnails/15.jpg)
Chrome: Ctrl + U
FireFox: Ctrl + U
Internet Explorer: Ctrl + F3
To display the HTML source
![Page 16: Skills: create simple Web pages Concepts: hypertext, markup, HTML tag, appearance vs. content, text editor, HTML page structure This work is licensed under.](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c7e5503460f94933803/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: Skills: create simple Web pages Concepts: hypertext, markup, HTML tag, appearance vs. content, text editor, HTML page structure This work is licensed under.](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c7e5503460f94933803/html5/thumbnails/17.jpg)
Summary
![Page 18: Skills: create simple Web pages Concepts: hypertext, markup, HTML tag, appearance vs. content, text editor, HTML page structure This work is licensed under.](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c7e5503460f94933803/html5/thumbnails/18.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 19: Skills: create simple Web pages Concepts: hypertext, markup, HTML tag, appearance vs. content, text editor, HTML page structure This work is licensed under.](https://reader036.fdocuments.in/reader036/viewer/2022081514/56649c7e5503460f94933803/html5/thumbnails/19.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