Course overview

Download Report

Transcript Course overview 

Introducing HTML
Skills: 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?
• 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
Chapter 2
Chapter 3
...
1
10
20
Markup – adding tags to control appearance
This word is bold.
This <b>word</b> is bold.
Examples of HTML tags
Tag
<h1> … </h1>
<h2> … </h2>
<p> … </p>
<b> … </b>
<i> … </i>
<u> … </u>
Effect
large heading
smaller heading
paragraph
bold text
italicized text
underlined text
What do you suppose the command to bre
ak a line (like I just did) is?
Examples of HTML tags
Tag
<hr />
Effect
draw a horizontal line
(a rule) across the
window
<br />
force a break in the
line being typed
HTML tags control appearance, not content
HTML tags
<!--...-->
<!doctype>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<b>
<base>
<basefont>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<dd>
<del>
<dfn>
<dir>
<div>
<dl>
<dt>
<em>
<fieldset>
<font>
<form>
<frame>
<frameset>
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
<head>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<isindex>
<kbd>
<label>
<legend>
<li>
<link>
<map>
<menu>
<meta>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<p>
<param>
<pre>
<q>
<s>
<samp>
<script>
<select>
<small>
<span>
<strike>
<strong>
<style>
<sub>
<sup>
<table>
<tbody>
<td>
<textarea>
<tfoot>
<th>
<thead>
<title>
<tr>
<tt>
<u>
<ul>
<var>
W3schools
make changes on
the left side
see the result on
the right side
http://www.w3schools.com/Html/
Codeacademy
course on HTML
and CSS
Steps to create a Web page
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
Text editor versus word processor
This is one sentence.
Which text editor?
All programs > Accessories > Notepad
To display the HTML source
Chrome: Ctrl + U
FireFox: Ctrl + U
Internet Explorer: Ctrl + F3
HTML page structure
<html>
<head>
<title>Page title goes here.</title>
</head>
<body>
The body of the page goes here.
</body>
</html>
Let’s create a Web page.
Summary
Self-study questions
1.
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 Beginners
http://www.codecademy.com/tracks/htmlcss
Free text editors:
http://www.techsupportalert.com/best-free-texteditor.htm