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
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
Where does this topic fit?
• Internet concepts– Applications– Technology– Implications
• Internet skills– Application development (web)– Content creation– User skills
HTML
hypertext markup language
Hypertext
Hypertext:
Linear text: Table of contents
Chapter 1 1Chapter 2 10Chapter 3 20. . .
Markup – adding tags to control appearance
This <b>word</b> is bold.
This word is bold.
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?
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
HTML tags control appearance, not content
<!--...--> <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
http://www.w3schools.com/Html/
W3schools
make changes on the left side
see the result on the right side
Codeacademy course on HTML and CSS
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
Text editor versus word processor
This is one sentence.
Which text editor?
All programs > Accessories > Notepad
Chrome: Ctrl + U
FireFox: Ctrl + U
Internet Explorer: Ctrl + F3
To display the HTML source
<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.
The Filezilla FTP client
My laptop The Web server
Summary
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?
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/